You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/11/02 00:30:41 UTC
[camel-karavan] branch main updated: Buttons for download image
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new 87e5bcc Buttons for download image
87e5bcc is described below
commit 87e5bccc5a3871722c7dab1fa35587589686b258
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Tue Nov 1 20:30:17 2022 -0400
Buttons for download image
---
.../src/main/webapp/src/projects/ProjectPage.tsx | 22 ++++++++++++++++++++--
karavan-designer/src/designer/KaravanDesigner.tsx | 5 +++++
karavan-vscode/package.json | 15 +++++++++++++--
karavan-vscode/src/designerView.ts | 9 +++++++++
karavan-vscode/src/extension.ts | 6 ++++++
karavan-vscode/webview/App.tsx | 9 ++++++++-
6 files changed, 61 insertions(+), 5 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
index 74ab6f0..2bc4837 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
@@ -21,7 +21,7 @@ import {
ToggleGroup,
ToggleGroupItem,
CodeBlockCode,
- CodeBlock, Skeleton, Checkbox, Tabs, Tab
+ CodeBlock, Skeleton, Checkbox, Tabs, Tab, Tooltip
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {MainToolbar} from "../MainToolbar";
@@ -33,6 +33,7 @@ import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import {KaravanDesigner} from "../designer/KaravanDesigner";
import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
+import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
import FileSaver from "file-saver";
import Editor from "@monaco-editor/react";
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -54,6 +55,7 @@ interface Props {
}
interface State {
+ karavanDesignerRef: any,
project?: Project,
file?: ProjectFile,
files: ProjectFile[],
@@ -72,6 +74,7 @@ interface State {
export class ProjectPage extends React.Component<Props, State> {
public state: State = {
+ karavanDesignerRef: React.createRef(),
project: this.props.project,
isUploadModalOpen: false,
isCreateModalOpen: false,
@@ -145,6 +148,12 @@ export class ProjectPage extends React.Component<Props, State> {
}
}
+ downloadImage = () => {
+ if (this.state.karavanDesignerRef) {
+ this.state.karavanDesignerRef.current.downloadImage();
+ }
+ }
+
addProperty() {
const file = this.state.file;
if (file){
@@ -160,6 +169,7 @@ export class ProjectPage extends React.Component<Props, State> {
const {file, mode} = this.state;
const isFile = file !== undefined;
const isYaml = file !== undefined && file.name.endsWith("yaml");
+ const isIntegration = isYaml && file?.code && CamelDefinitionYaml.yamlIsIntegration(file.code);
const isProperties = file !== undefined && file.name.endsWith("properties");
return <Toolbar id="toolbar-group-types">
<ToolbarContent>
@@ -184,7 +194,14 @@ export class ProjectPage extends React.Component<Props, State> {
</FlexItem>}
{isFile && <FlexItem>
- <Button variant="secondary" icon={<DownloadIcon/>} onClick={e => this.download()}>Download</Button>
+ <Tooltip content="Download source" position={"bottom-end"}>
+ <Button variant="control" icon={<DownloadIcon/>} onClick={e => this.download()}/>
+ </Tooltip>
+ </FlexItem>}
+ {isIntegration && <FlexItem>
+ <Tooltip content="Download image" position={"bottom-end"}>
+ <Button variant="control" icon={<DownloadImageIcon/>} onClick={e => this.downloadImage()}/>
+ </Tooltip>
</FlexItem>}
{!isFile && <FlexItem>
<Button variant={"primary"} icon={<PlusIcon/>}
@@ -328,6 +345,7 @@ export class ProjectPage extends React.Component<Props, State> {
return (
file !== undefined &&
<KaravanDesigner
+ ref={this.state.karavanDesignerRef}
dark={false}
key={"key"}
filename={file.name}
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index 28c4150..c8c7d41 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -90,6 +90,11 @@ export class KaravanDesigner extends React.Component<Props, State> {
)
}
+ downloadImage(){
+ // TODO: download image
+ console.log("Download image")
+ }
+
render() {
const tab = this.state.tab;
return (
diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json
index 5b6bcaa..ddf79f3 100644
--- a/karavan-vscode/package.json
+++ b/karavan-vscode/package.json
@@ -49,6 +49,7 @@
"onCommand:karavan.jbang-run-project",
"onCommand:karavan.jbang-export",
"onCommand:karavan.generate-rest",
+ "onCommand:karavan.download-image",
"onCommand:karavan.openKamelets",
"onCommand:karavan.openComponents",
"onCommand:karavan.openEip",
@@ -268,6 +269,11 @@
"command": "karavan.generate-rest",
"title": "Karavan: Generate REST API"
},
+ {
+ "command": "karavan.download-image",
+ "title": "Download image",
+ "icon": "$(device-camera)"
+ },
{
"command": "integrations.refresh",
"title": "Refresh",
@@ -347,12 +353,17 @@
{
"command": "karavan.open",
"when": "resourceExtname == .yaml",
- "group": "navigation"
+ "group": "navigation@1"
},
{
"command": "karavan.jbang-run-file",
"when": "resourceExtname == .yaml || karavan:loaded",
- "group": "navigation"
+ "group": "navigation@2"
+ },
+ {
+ "command": "karavan.download-image",
+ "when": "karavan:loaded",
+ "group": "navigation@3"
}
],
"view/title": [
diff --git a/karavan-vscode/src/designerView.ts b/karavan-vscode/src/designerView.ts
index 7115213..c16b373 100644
--- a/karavan-vscode/src/designerView.ts
+++ b/karavan-vscode/src/designerView.ts
@@ -194,4 +194,13 @@ export class DesignerView {
}
+ downloadImage(fullPath: string) {
+ if (fullPath.startsWith('webview-panel/webview')) {
+ const filename = this.getFilenameFromWebView();
+ if (filename && KARAVAN_PANELS.has(filename)) {
+ const panel = KARAVAN_PANELS.get(filename);
+ panel?.webview.postMessage({ command: 'downloadImage' });
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/karavan-vscode/src/extension.ts b/karavan-vscode/src/extension.ts
index 81c4f57..9052b58 100644
--- a/karavan-vscode/src/extension.ts
+++ b/karavan-vscode/src/extension.ts
@@ -174,6 +174,12 @@ export function activate(context: ExtensionContext) {
});
context.subscriptions.push(generateRest);
+ // Download Image command
+ const downloadImageCommand = commands.registerCommand("karavan.download-image", (...args: any[]) => {
+ designer.downloadImage(args[0].fsPath);
+ });
+ context.subscriptions.push(downloadImageCommand);
+
// Create issue command
commands.registerCommand('karavan.reportIssue', () => {
commands.executeCommand('open', Uri.parse('https://github.com/apache/camel-karavan/issues/new?title=[VS+Code]New+report&template=issue_template.md'));
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index f1aa2ce..8a78b4a 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -31,6 +31,7 @@ interface Props {
}
interface State {
+ karavanDesignerRef: any
filename: string
relativePath: string
yaml: string
@@ -48,6 +49,7 @@ interface State {
class App extends React.Component<Props, State> {
public state: State = {
+ karavanDesignerRef: React.createRef(),
filename: '',
relativePath: '',
yaml: '',
@@ -111,6 +113,11 @@ class App extends React.Component<Props, State> {
case 'deactivate':
this.setState({ active: false, hasChanges: false });
break;
+ case 'downloadImage':
+ if (this.state.karavanDesignerRef) {
+ this.state.karavanDesignerRef.current.downloadImage();
+ }
+ break;
}
};
@@ -134,7 +141,7 @@ class App extends React.Component<Props, State> {
</PageSection>
}
{this.state.loaded && this.state.page === "designer" &&
- <KaravanDesigner
+ <KaravanDesigner ref={this.state.karavanDesignerRef}
key={this.state.key}
filename={this.state.filename}
yaml={this.state.yaml}