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/03/17 22:54:58 UTC
[camel-karavan] branch main updated: UI improvemtns (#217)
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 9a41db8 UI improvemtns (#217)
9a41db8 is described below
commit 9a41db80bdf4ea41542b18224ca073cc3fd6f10d
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Thu Mar 17 18:54:52 2022 -0400
UI improvemtns (#217)
---
karavan-app/src/main/webapp/src/index.css | 12 +++
.../src/main/webapp/src/kamelets/KameletsPage.tsx | 2 +-
karavan-designer/package-lock.json | 66 +--------------
karavan-designer/package.json | 4 +-
karavan-designer/src/designer/KaravanDesigner.tsx | 7 --
.../src/designer/route/DslConnections.tsx | 4 +-
karavan-designer/src/designer/utils/CamelUi.ts | 2 +-
.../src/designer/yaml/YamlDesigner.tsx | 93 ----------------------
karavan-vscode/package-lock.json | 64 ---------------
karavan-vscode/package.json | 2 -
karavan-vscode/webview/App.tsx | 40 ++++++----
karavan-vscode/webview/index.css | 11 +++
12 files changed, 53 insertions(+), 254 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/index.css b/karavan-app/src/main/webapp/src/index.css
index bc66de1..3e8bff9 100644
--- a/karavan-app/src/main/webapp/src/index.css
+++ b/karavan-app/src/main/webapp/src/index.css
@@ -45,6 +45,18 @@
overflow: hidden;
}
+.karavan .kamelet-section {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.karavan .kamelets-page {
+ overflow: auto;
+ flex-shrink: unset;
+ flex-grow: 1;
+}
+
.karavan .integration-card .pf-c-card__footer {
text-align: end;
}
diff --git a/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx b/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
index a79b388..6b2a251 100644
--- a/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
+++ b/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
@@ -53,7 +53,7 @@ export class KameletsPage extends React.Component<Props, State> {
render() {
return (
- <PageSection padding={{ default: 'noPadding' }}>
+ <PageSection padding={{ default: 'noPadding' }} className="kamelet-section">
<KameletModal key={this.state.kamelet?.metadata.name + this.state.isModalOpen.toString()}
isOpen={this.state.isModalOpen} kamelet={this.state.kamelet}/>
<PageSection className="tools-section" variant={PageSectionVariants.light}>
diff --git a/karavan-designer/package-lock.json b/karavan-designer/package-lock.json
index 5e30c50..1340a50 100644
--- a/karavan-designer/package-lock.json
+++ b/karavan-designer/package-lock.json
@@ -9,7 +9,6 @@
"version": "0.0.13",
"license": "Apache-2.0",
"dependencies": {
- "@monaco-editor/react": "4.3.1",
"@patternfly/patternfly": "4.171.1",
"@patternfly/react-core": "4.192.7",
"@types/js-yaml": "^4.0.5",
@@ -29,8 +28,7 @@
"@types/dagre": "^0.7.47",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
- "@types/react-router-dom": "^5.3.3",
- "monaco-editor": "0.29.1"
+ "@types/react-router-dom": "^5.3.3"
}
},
"../karavan-core": {
@@ -2703,31 +2701,6 @@
"sourcemap-codec": "1.4.8"
}
},
- "node_modules/@monaco-editor/loader": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
- "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
- "dependencies": {
- "state-local": "^1.0.6"
- },
- "peerDependencies": {
- "monaco-editor": ">= 0.21.0 < 1"
- }
- },
- "node_modules/@monaco-editor/react": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
- "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
- "dependencies": {
- "@monaco-editor/loader": "^1.2.0",
- "prop-types": "^15.7.2"
- },
- "peerDependencies": {
- "monaco-editor": ">= 0.25.0 < 1",
- "react": "^16.8.0 || ^17.0.0",
- "react-dom": "^16.8.0 || ^17.0.0"
- }
- },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10900,11 +10873,6 @@
"mkdirp": "bin/cmd.js"
}
},
- "node_modules/monaco-editor": {
- "version": "0.29.1",
- "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
- "integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
- },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14025,11 +13993,6 @@
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
},
- "node_modules/state-local": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
- "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
- },
"node_modules/statuses": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -17789,23 +17752,6 @@
"sourcemap-codec": "1.4.8"
}
},
- "@monaco-editor/loader": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
- "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
- "requires": {
- "state-local": "^1.0.6"
- }
- },
- "@monaco-editor/react": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
- "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
- "requires": {
- "@monaco-editor/loader": "^1.2.0",
- "prop-types": "^15.7.2"
- }
- },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -23801,11 +23747,6 @@
"minimist": "^1.2.5"
}
},
- "monaco-editor": {
- "version": "0.29.1",
- "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
- "integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
- },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -25959,11 +25900,6 @@
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
},
- "state-local": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
- "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
- },
"statuses": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
diff --git a/karavan-designer/package.json b/karavan-designer/package.json
index 99cc751..1bc2446 100644
--- a/karavan-designer/package.json
+++ b/karavan-designer/package.json
@@ -35,7 +35,6 @@
"karavan-core": "file:../karavan-core",
"react": "17.0.2",
"react-dom": "17.0.2",
- "@monaco-editor/react": "4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"rxjs": "^7.5.2",
@@ -46,7 +45,6 @@
"@types/dagre": "^0.7.47",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
- "@types/react-router-dom": "^5.3.3",
- "monaco-editor": "0.29.1"
+ "@types/react-router-dom": "^5.3.3"
}
}
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index 31e1cbc..e28766d 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -32,7 +32,6 @@ import {TemplatesDesigner} from "./templates/TemplatesDesigner";
import {ExceptionDesigner} from "./exception/ExceptionDesigner";
import {DependenciesDesigner} from "./dependencies/DependenciesDesigner";
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import {YamlDesigner} from "./yaml/YamlDesigner";
interface Props {
onSave?: (filename: string, yaml: string) => void
@@ -228,7 +227,6 @@ export class KaravanDesigner extends React.Component<Props, State> {
<Tab eventKey='error' title={this.getTab("Error", "Error Handler", "error")}></Tab>
<Tab eventKey='exception' title={this.getTab("Exceptions", "Exception Clauses per type", "exception")}></Tab>
<Tab eventKey='code' title={this.getTab("Code", "Code", "code")}></Tab>
- {/*<Tab eventKey='yaml' title={this.getTab("YAML", "Integration YAML", "yaml")}></Tab>*/}
</Tabs>
{tab === 'routes' && <RouteDesigner integration={this.state.integration}
onSave={(integration) => this.save(integration)}
@@ -265,11 +263,6 @@ export class KaravanDesigner extends React.Component<Props, State> {
borderColor={this.props.borderColor}
borderColorSelected={this.props.borderColorSelected}
dark={this.props.dark}/>}
- {tab === 'yaml' && <YamlDesigner integration={this.state.integration}
- onSave={(integration) => this.save(integration)}
- borderColor={this.props.borderColor}
- borderColorSelected={this.props.borderColorSelected}
- dark={this.props.dark}/>}
</PageSection>
);
}
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 16ea068..2334590 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -100,7 +100,7 @@ export class DslConnections extends React.Component<Props, State> {
<g key={pos.step.uuid + "-incoming"}>
<circle cx={incomingX} cy={fromY} r={r} className="circle-incoming"/>
<image x={imageX} y={imageY} href={CamelUi.getConnectionIcon(pos.step)} className="icon"/>
- <text x={imageX - 5} y={imageY + 40} textAnchor="start">{CamelUi.getTitle(pos.step)}</text>
+ <text x={imageX - 5} y={imageY + 40} className="caption" textAnchor="start">{CamelUi.getTitle(pos.step)}</text>
<path d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
</g>
@@ -170,7 +170,7 @@ export class DslConnections extends React.Component<Props, State> {
<g key={pos.step.uuid + "-outgoing"}>
<circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
<image x={imageX} y={imageY} href={image} className="icon"/>
- <text x={imageX + 25} y={imageY + 40} textAnchor="end">{CamelUi.getOutgoingTitle(pos.step)}</text>
+ <text x={imageX + 25} y={imageY + 40} className="caption" textAnchor="end">{CamelUi.getOutgoingTitle(pos.step)}</text>
<path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
</g>
diff --git a/karavan-designer/src/designer/utils/CamelUi.ts b/karavan-designer/src/designer/utils/CamelUi.ts
index 8ee329b..130c4ea 100644
--- a/karavan-designer/src/designer/utils/CamelUi.ts
+++ b/karavan-designer/src/designer/utils/CamelUi.ts
@@ -84,7 +84,7 @@ export class CamelUi {
.reduce((accumulator, value) => accumulator.concat(value), [])
.filter((nav, i, arr) => arr.findIndex(l => l === nav) === i)
.filter((nav, i, arr) => ![ 'dataformat'].includes(nav));
- const connectorNavs = ['routing', "transformation", "error", "configuration", "endpoint", "component", "kamelet"];
+ const connectorNavs = ['routing', "transformation", "error", "configuration", "endpoint", "kamelet", "component"];
const eipLabels = connectorNavs.filter(n => navs.includes(n));
return eipLabels;
}
diff --git a/karavan-designer/src/designer/yaml/YamlDesigner.tsx b/karavan-designer/src/designer/yaml/YamlDesigner.tsx
deleted file mode 100644
index d4ab41b..0000000
--- a/karavan-designer/src/designer/yaml/YamlDesigner.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import {PageSection
-} from '@patternfly/react-core';
-// import '../karavan.css';
-import {NamedBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
-import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
-import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
-import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
-import Editor from '@monaco-editor/react';
-
-const LINE_HEIGHT = 18;
-
-interface Props {
- onSave?: (integration: Integration) => void
- integration: Integration
- borderColor: string
- borderColorSelected: string
- dark: boolean
-}
-
-interface State {
- integration: Integration
- showDeleteConfirmation: boolean
- selectedBean?: NamedBeanDefinition
- key: string
- showBeanEditor: boolean
- editorHeight: number
-
-}
-
-export class YamlDesigner extends React.Component<Props, State> {
-
- public state: State = {
- integration: this.props.integration,
- showDeleteConfirmation: false,
- key: "",
- showBeanEditor: false,
- editorHeight: 3000,
- };
-
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevState.key !== this.state.key) {
- this.props.onSave?.call(this, this.state.integration);
- }
- }
-
- onIntegrationUpdate = (i: Integration) => {
- this.setState({integration: i, showDeleteConfirmation: false, key: Math.random().toString()});
- }
-
- deleteBean = () => {
- const i = CamelDefinitionApiExt.deleteBeanFromIntegration(this.state.integration, this.state.selectedBean);
- this.setState({
- integration: i,
- showDeleteConfirmation: false,
- key: Math.random().toString(),
- selectedBean: new NamedBeanDefinition()
- });
- }
-
- render() {
- const code = CamelDefinitionYaml.integrationToYaml(this.state.integration);
- const height = code.split("\n").length * LINE_HEIGHT;
- return (
- <PageSection className="yaml-page" isFilled padding={{default: 'noPadding'}} >
- <Editor
- height="100vh"
- defaultLanguage={'yaml'}
- theme={'light'}
- value={code}
- className={'code-editor'}
-
- />
- </PageSection>
- );
- }
-}
diff --git a/karavan-vscode/package-lock.json b/karavan-vscode/package-lock.json
index e5e985e..9ae3e4c 100644
--- a/karavan-vscode/package-lock.json
+++ b/karavan-vscode/package-lock.json
@@ -9,7 +9,6 @@
"version": "0.0.13",
"license": "Apache-2.0",
"dependencies": {
- "@monaco-editor/react": "4.3.1",
"@patternfly/patternfly": "4.171.1",
"@patternfly/react-core": "4.192.7",
"@types/js-yaml": "4.0.5",
@@ -41,7 +40,6 @@
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.6.0",
"mocha": "^8.2.1",
- "monaco-editor": "0.29.1",
"prettier": "2.3.0",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0",
@@ -1901,31 +1899,6 @@
"sourcemap-codec": "1.4.8"
}
},
- "node_modules/@monaco-editor/loader": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
- "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
- "dependencies": {
- "state-local": "^1.0.6"
- },
- "peerDependencies": {
- "monaco-editor": ">= 0.21.0 < 1"
- }
- },
- "node_modules/@monaco-editor/react": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
- "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
- "dependencies": {
- "@monaco-editor/loader": "^1.2.0",
- "prop-types": "^15.7.2"
- },
- "peerDependencies": {
- "monaco-editor": ">= 0.25.0 < 1",
- "react": "^16.8.0 || ^17.0.0",
- "react-dom": "^16.8.0 || ^17.0.0"
- }
- },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5928,11 +5901,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
- "node_modules/monaco-editor": {
- "version": "0.29.1",
- "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
- "integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
- },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7135,11 +7103,6 @@
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
"dev": true
},
- "node_modules/state-local": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
- "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
- },
"node_modules/static-site-generator-webpack-plugin": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-3.4.2.tgz",
@@ -9719,23 +9682,6 @@
"sourcemap-codec": "1.4.8"
}
},
- "@monaco-editor/loader": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
- "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
- "requires": {
- "state-local": "^1.0.6"
- }
- },
- "@monaco-editor/react": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
- "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
- "requires": {
- "@monaco-editor/loader": "^1.2.0",
- "prop-types": "^15.7.2"
- }
- },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -12737,11 +12683,6 @@
}
}
},
- "monaco-editor": {
- "version": "0.29.1",
- "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
- "integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
- },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -13617,11 +13558,6 @@
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
"dev": true
},
- "state-local": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
- "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
- },
"static-site-generator-webpack-plugin": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-3.4.2.tgz",
diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json
index cbda946..cf73b55 100644
--- a/karavan-vscode/package.json
+++ b/karavan-vscode/package.json
@@ -187,7 +187,6 @@
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.6.0",
"mocha": "^8.2.1",
- "monaco-editor": "0.29.1",
"prettier": "2.3.0",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0",
@@ -199,7 +198,6 @@
"webpack-cli": "^4.4.0"
},
"dependencies": {
- "@monaco-editor/react": "4.3.1",
"@patternfly/patternfly": "4.171.1",
"@patternfly/react-core": "4.192.7",
"@types/js-yaml": "4.0.5",
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index e93deb0..496d57b 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -16,7 +16,7 @@
*/
import * as React from "react";
import {
- Page,
+ Page, PageSection, Spinner,
} from "@patternfly/react-core";
import { KaravanDesigner } from "./designer/KaravanDesigner";
import vscode from "./vscode";
@@ -33,6 +33,7 @@ interface State {
yaml: string
key: string
backward: boolean
+ loaded: boolean
}
class App extends React.Component<Props, State> {
@@ -42,14 +43,15 @@ class App extends React.Component<Props, State> {
relativePath: '',
yaml: '',
key: '',
- backward: false
+ backward: false,
+ loaded: false,
};
componentDidMount() {
console.log("componentDidMount");
window.addEventListener('message', this.onMessage, false);
- vscode.postMessage({command: 'getData'})
+ vscode.postMessage({ command: 'getData' })
}
componentWillUnmount() {
@@ -57,7 +59,7 @@ class App extends React.Component<Props, State> {
}
onMessage = (event) => {
- const message = event.data;
+ const message = event.data;
console.log("Message received", message);
switch (message.command) {
case 'backward':
@@ -77,7 +79,7 @@ class App extends React.Component<Props, State> {
case 'open':
console.log(event);
if (this.state.filename === '' && this.state.key === '') {
- this.setState({ filename: message.filename, yaml: message.yaml, relativePath: message.relativePath, key: Math.random().toString() });
+ this.setState({ filename: message.filename, yaml: message.yaml, relativePath: message.relativePath, key: Math.random().toString(), loaded: true });
}
break;
}
@@ -95,18 +97,24 @@ class App extends React.Component<Props, State> {
public render() {
return (
<Page className="karavan">
- <KaravanDesigner
- key={this.state.key}
- backward={this.state.backward}
- filename={this.state.filename}
- yaml={this.state.yaml}
- onSave={(filename, yaml) => this.save(filename, yaml)}
- borderColor="rgb(239, 166, 79)"
- borderColorSelected="rgb(171, 172, 224)"
- dark={this.props.dark}
- />
+ {!this.state.loaded &&
+ <PageSection variant={this.props.dark ? "dark" : "light"} className="loading-page">
+ <Spinner className="progress-stepper" isSVG diameter="80px" aria-label="Loading..."/>
+ </PageSection>
+ }
+ {this.state.loaded &&
+ <KaravanDesigner
+ key={this.state.key}
+ backward={this.state.backward}
+ filename={this.state.filename}
+ yaml={this.state.yaml}
+ onSave={(filename, yaml) => this.save(filename, yaml)}
+ borderColor="rgb(239, 166, 79)"
+ borderColorSelected="rgb(171, 172, 224)"
+ dark={this.props.dark} />
+ }
</Page>
- );
+ )
}
}
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index e9400db..c991c0e 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -45,6 +45,17 @@ body,
background-color: rgb(30, 30, 30);
}
+.vscode-dark .karavan .loading-page {
+ background-color: rgb(50, 50, 50);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.vscode-dark .karavan .progress-stepper{
+ margin: auto;
+}
+
.vscode-dark .karavan .dsl-page .dsl-page-columns,
.vscode-dark .karavan .rest-page .rest-page-columns,
.vscode-dark .karavan .beans-page .beans-page-columns,