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 335f9f8 Fix #128 (#258) 335f9f8 is described below commit 335f9f83b192131b39249b66deb09d1eb27561c8 Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Tue Mar 29 21:37:20 2022 -0400 Fix #128 (#258) --- karavan-designer/src/App.tsx | 7 +-- karavan-designer/src/designer/KaravanDesigner.tsx | 50 +++++++++++----------- .../src/designer/beans/BeansDesigner.tsx | 14 +++--- .../designer/dependencies/DependenciesDesigner.tsx | 15 ++++--- .../src/designer/error/ErrorDesigner.tsx | 8 ++-- .../src/designer/exception/ExceptionDesigner.tsx | 8 ++-- .../src/designer/rest/RestDesigner.tsx | 16 ++++--- .../src/designer/route/RouteDesigner.tsx | 24 +++++++---- .../src/designer/templates/TemplatesDesigner.tsx | 6 ++- karavan-vscode/src/designerView.ts | 4 -- karavan-vscode/webview/App.tsx | 38 +++++++++------- 11 files changed, 107 insertions(+), 83 deletions(-) diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx index 04d400b..959c727 100644 --- a/karavan-designer/src/App.tsx +++ b/karavan-designer/src/App.tsx @@ -95,16 +95,17 @@ class App extends React.Component<Props, State> { } - save(filename: string, yaml: string) { + save(filename: string, yaml: string, propertyOnly: boolean) { // console.log(filename); - // console.log(yaml); + console.log(yaml); + // console.log(propertyOnly); } public render() { return ( <Page className="karavan"> <KaravanDesigner key={this.state.key} filename={this.state.name} yaml={this.state.yaml} - onSave={(filename, yaml) => this.save(filename, yaml)} + onSave={(filename, yaml, propertyOnly) => this.save(filename, yaml, propertyOnly)} dark={document.body.className.includes('vscode-dark')} /> </Page> diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx index 8ead316..ae87168 100644 --- a/karavan-designer/src/designer/KaravanDesigner.tsx +++ b/karavan-designer/src/designer/KaravanDesigner.tsx @@ -16,13 +16,13 @@ */ import React from 'react'; import { - Badge, Label, + Badge, PageSection, PageSectionVariants, Tab, Tabs, TabTitleIcon, TabTitleText, Tooltip, } from '@patternfly/react-core'; import './karavan.css'; import {RouteDesigner} from "./route/RouteDesigner"; import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml"; -import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; +import {Integration} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {CamelUi} from "./utils/CamelUi"; import {BeansDesigner} from "./beans/BeansDesigner"; @@ -33,7 +33,7 @@ import {ExceptionDesigner} from "./exception/ExceptionDesigner"; import {DependenciesDesigner} from "./dependencies/DependenciesDesigner"; interface Props { - onSave?: (filename: string, yaml: string) => void + onSave?: (filename: string, yaml: string, propertyOnly: boolean) => void filename: string yaml: string dark: boolean @@ -43,6 +43,7 @@ interface State { tab: string, integration: Integration, key: string + propertyOnly: boolean } export class KaravanDesigner extends React.Component<Props, State> { @@ -53,16 +54,17 @@ export class KaravanDesigner extends React.Component<Props, State> { ? CamelDefinitionYaml.yamlToIntegration(this.props.filename, this.props.yaml) : Integration.createNew(this.props.filename), key: "", + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration.metadata.name, this.getCode(this.state.integration)); + this.props.onSave?.call(this, this.props.filename, this.getCode(this.state.integration), this.state.propertyOnly); } } - save = (integration: Integration): void => { - this.setState({key: Math.random().toString(), integration: integration}); + save = (integration: Integration, propertyOnly: boolean): void => { + this.setState({key: Math.random().toString(), integration: integration, propertyOnly: propertyOnly}); } getCode = (integration: Integration): string => { @@ -196,17 +198,17 @@ export class KaravanDesigner extends React.Component<Props, State> { <rect x="10" y="16" width="12" height="2"/> <rect className="st0" width="32" height="32"/> </svg>) - if (icon === 'code') return ( - <svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon"> - <defs> - <style>{".cls-1{fill:none;}"}</style> - </defs> - <title>code</title> - <polygon points="31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16"/> - <polygon points="1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16"/> - <rect x="5.91" y="15" width="20.17" height="2" transform="translate(-3.6 27.31) rotate(-75)"/> - <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32" transform="translate(0 32) rotate(-90)"/> - </svg>) + if (icon === 'code') return ( + <svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon"> + <defs> + <style>{".cls-1{fill:none;}"}</style> + </defs> + <title>code</title> + <polygon points="31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16"/> + <polygon points="1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16"/> + <rect x="5.91" y="15" width="20.17" height="2" transform="translate(-3.6 27.31) rotate(-75)"/> + <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32" transform="translate(0 32) rotate(-90)"/> + </svg>) } render() { @@ -224,25 +226,25 @@ export class KaravanDesigner extends React.Component<Props, State> { {/*<Tab eventKey='code' title={this.getTab("Code", "Code", "code")}></Tab>*/} </Tabs> {tab === 'routes' && <RouteDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'rest' && <RestDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'beans' && <BeansDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'dependencies' && <DependenciesDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'error' && <ErrorDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'exception' && <ExceptionDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} {tab === 'templates' && <TemplatesDesigner integration={this.state.integration} - onSave={(integration) => this.save(integration)} + onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)} dark={this.props.dark}/>} </PageSection> ); diff --git a/karavan-designer/src/designer/beans/BeansDesigner.tsx b/karavan-designer/src/designer/beans/BeansDesigner.tsx index 9709737..30991b7 100644 --- a/karavan-designer/src/designer/beans/BeansDesigner.tsx +++ b/karavan-designer/src/designer/beans/BeansDesigner.tsx @@ -27,10 +27,9 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt" import {BeanProperties} from "./BeanProperties"; import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {BeanCard} from "./BeanCard"; -import {DslProperties} from "../route/DslProperties"; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -41,6 +40,7 @@ interface State { selectedBean?: NamedBeanDefinition key: string showBeanEditor: boolean + propertyOnly: boolean } export class BeansDesigner extends React.Component<Props, State> { @@ -50,11 +50,12 @@ export class BeansDesigner extends React.Component<Props, State> { showDeleteConfirmation: false, key: "", showBeanEditor: false, + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } @@ -63,7 +64,7 @@ export class BeansDesigner extends React.Component<Props, State> { } onIntegrationUpdate = (i: Integration) => { - this.setState({integration: i, showDeleteConfirmation: false, key: Math.random().toString()}); + this.setState({integration: i, propertyOnly: false, showDeleteConfirmation: false, key: Math.random().toString()}); } deleteBean = () => { @@ -72,14 +73,15 @@ export class BeansDesigner extends React.Component<Props, State> { integration: i, showDeleteConfirmation: false, key: Math.random().toString(), - selectedBean: new NamedBeanDefinition() + selectedBean: new NamedBeanDefinition(), + propertyOnly: false }); } changeBean = (bean: NamedBeanDefinition) => { const clone = CamelUtil.cloneIntegration(this.state.integration); const i = CamelDefinitionApiExt.addBeanToIntegration(clone, bean); - this.setState({integration: i, key: Math.random().toString(), selectedBean: bean}); + this.setState({integration: i, propertyOnly: false, key: Math.random().toString(), selectedBean: bean}); } getDeleteConfirmation() { diff --git a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx index 96723cd..ef1e16a 100644 --- a/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx +++ b/karavan-designer/src/designer/dependencies/DependenciesDesigner.tsx @@ -26,11 +26,9 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil"; import {Integration, Dependency} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"; import {DependencyCard} from "./DependencyCard"; -import {BeanProperties} from "../beans/BeanProperties"; -import {BeanCard} from "../beans/BeanCard"; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -41,6 +39,7 @@ interface State { selectedDep?: Dependency key: string showDepEditor: boolean + propertyOnly: boolean } export class DependenciesDesigner extends React.Component<Props, State> { @@ -50,11 +49,12 @@ export class DependenciesDesigner extends React.Component<Props, State> { showDeleteConfirmation: false, key: "", showDepEditor: false, + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } @@ -63,7 +63,7 @@ export class DependenciesDesigner extends React.Component<Props, State> { } onIntegrationUpdate = (i: Integration) => { - this.setState({integration: i, showDeleteConfirmation: false, key: Math.random().toString()}); + this.setState({integration: i, propertyOnly: false, showDeleteConfirmation: false, key: Math.random().toString()}); } deleteDep = () => { @@ -72,14 +72,15 @@ export class DependenciesDesigner extends React.Component<Props, State> { integration: i, showDeleteConfirmation: false, key: Math.random().toString(), - selectedDep: undefined + selectedDep: undefined, + propertyOnly: false }); } changeDep = (dep: Dependency) => { const clone = CamelUtil.cloneIntegration(this.state.integration); const i = CamelDefinitionApiExt.addDependencyToIntegration(clone, dep); - this.setState({integration: i, key: Math.random().toString(), selectedDep: dep}); + this.setState({integration: i, propertyOnly: false, key: Math.random().toString(), selectedDep: dep}); } getDeleteConfirmation() { diff --git a/karavan-designer/src/designer/error/ErrorDesigner.tsx b/karavan-designer/src/designer/error/ErrorDesigner.tsx index 362ed1a..f09e6d9 100644 --- a/karavan-designer/src/designer/error/ErrorDesigner.tsx +++ b/karavan-designer/src/designer/error/ErrorDesigner.tsx @@ -16,7 +16,7 @@ */ import React from 'react'; import { - Button, EmptyState, EmptyStateBody, EmptyStateIcon, Modal, + EmptyState, EmptyStateBody, EmptyStateIcon, Modal, PageSection, Title } from '@patternfly/react-core'; import '../karavan.css'; @@ -24,7 +24,7 @@ import {Integration, CamelElement} from "karavan-core/lib/model/IntegrationDefin import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -33,6 +33,7 @@ interface State { integration: Integration selectedStep?: CamelElement key: string + propertyOnly: boolean } export class ErrorDesigner extends React.Component<Props, State> { @@ -40,11 +41,12 @@ export class ErrorDesigner extends React.Component<Props, State> { public state: State = { integration: this.props.integration, key: "", + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } diff --git a/karavan-designer/src/designer/exception/ExceptionDesigner.tsx b/karavan-designer/src/designer/exception/ExceptionDesigner.tsx index 6784967..15972af 100644 --- a/karavan-designer/src/designer/exception/ExceptionDesigner.tsx +++ b/karavan-designer/src/designer/exception/ExceptionDesigner.tsx @@ -16,7 +16,7 @@ */ import React from 'react'; import { - Button, EmptyState, EmptyStateBody, EmptyStateIcon, Modal, + EmptyState, EmptyStateBody, EmptyStateIcon, Modal, PageSection, Title } from '@patternfly/react-core'; import '../karavan.css'; @@ -24,7 +24,7 @@ import {Integration, CamelElement} from "karavan-core/lib/model/IntegrationDefin import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -33,6 +33,7 @@ interface State { integration: Integration selectedStep?: CamelElement key: string + propertyOnly: boolean } export class ExceptionDesigner extends React.Component<Props, State> { @@ -40,11 +41,12 @@ export class ExceptionDesigner extends React.Component<Props, State> { public state: State = { integration: this.props.integration, key: "", + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx b/karavan-designer/src/designer/rest/RestDesigner.tsx index e2a1753..d7630a6 100644 --- a/karavan-designer/src/designer/rest/RestDesigner.tsx +++ b/karavan-designer/src/designer/rest/RestDesigner.tsx @@ -34,7 +34,7 @@ import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi"; import {RestConfigurationCard} from "./RestConfigurationCard"; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -45,6 +45,7 @@ interface State { key: string showSelector: boolean showDeleteConfirmation: boolean + propertyOnly: boolean } export class RestDesigner extends React.Component<Props, State> { @@ -53,17 +54,18 @@ export class RestDesigner extends React.Component<Props, State> { integration: this.props.integration, key: "", showSelector: false, - showDeleteConfirmation: false + showDeleteConfirmation: false, + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } onIntegrationUpdate = (i: Integration) => { - this.setState({integration: i, showSelector: false, key: Math.random().toString()}); + this.setState({integration: i, showSelector: false, key: Math.random().toString(), propertyOnly: false}); } selectElement = (element: CamelElement) => { @@ -82,11 +84,12 @@ export class RestDesigner extends React.Component<Props, State> { key: Math.random().toString(), showSelector: false, selectedStep: element, + propertyOnly: false }); } else { const clone = CamelUtil.cloneIntegration(this.state.integration); const i = CamelDefinitionApiExt.updateIntegrationRestElement(clone, element); - this.setState({integration: i, key: Math.random().toString()}); + this.setState({integration: i, propertyOnly: true, key: Math.random().toString()}); } } @@ -100,7 +103,7 @@ export class RestDesigner extends React.Component<Props, State> { addRest = (rest: RestDefinition) => { const clone = CamelUtil.cloneIntegration(this.state.integration); const i = CamelDefinitionApiExt.addRestToIntegration(clone, rest); - this.setState({integration: i, key: Math.random().toString(), selectedStep: rest}); + this.setState({integration: i, propertyOnly: false, key: Math.random().toString(), selectedStep: rest}); } createRest = () => { @@ -128,6 +131,7 @@ export class RestDesigner extends React.Component<Props, State> { showDeleteConfirmation: false, key: Math.random().toString(), selectedStep: undefined, + propertyOnly: false }); } } diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx index 19bc630..18e4f90 100644 --- a/karavan-designer/src/designer/route/RouteDesigner.tsx +++ b/karavan-designer/src/designer/route/RouteDesigner.tsx @@ -43,7 +43,7 @@ import {CamelUi, RouteToCreate} from "../utils/CamelUi"; import {findDOMNode} from "react-dom"; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -64,6 +64,7 @@ interface State { left: number clipboardStep?: CamelElement ref?: any + propertyOnly: boolean } export class RouteDesigner extends React.Component<Props, State> { @@ -80,7 +81,8 @@ export class RouteDesigner extends React.Component<Props, State> { height: 1000, top: 0, left: 0, - ref: React.createRef() + ref: React.createRef(), + propertyOnly: false }; componentDidMount() { @@ -108,7 +110,7 @@ export class RouteDesigner extends React.Component<Props, State> { componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } @@ -135,12 +137,13 @@ export class RouteDesigner extends React.Component<Props, State> { key: Math.random().toString(), showSelector: false, selectedStep: element, - selectedUuid: element.uuid + selectedUuid: element.uuid, + propertyOnly: false }); } else { const clone = CamelUtil.cloneIntegration(this.state.integration); const i = CamelDefinitionApiExt.updateIntegrationRouteElement(clone, element); - this.setState({integration: i, key: Math.random().toString()}); + this.setState({integration: i, propertyOnly: true, key: Math.random().toString()}); } } @@ -157,7 +160,8 @@ export class RouteDesigner extends React.Component<Props, State> { showDeleteConfirmation: false, key: Math.random().toString(), selectedStep: undefined, - selectedUuid: '' + selectedUuid: '', + propertyOnly: false }); const el = new CamelElement(""); el.uuid = id; @@ -209,12 +213,13 @@ export class RouteDesigner extends React.Component<Props, State> { key: Math.random().toString(), showSelector: false, selectedStep: step, - selectedUuid: step.uuid + selectedUuid: step.uuid, + propertyOnly: false }); } onIntegrationUpdate = (i: Integration) => { - this.setState({integration: i, showSelector: false, key: Math.random().toString()}); + this.setState({integration: i, propertyOnly: false, showSelector: false, key: Math.random().toString()}); } moveElement = (source: string, target: string) => { @@ -226,7 +231,8 @@ export class RouteDesigner extends React.Component<Props, State> { key: Math.random().toString(), showSelector: false, selectedStep: selectedStep, - selectedUuid: source + selectedUuid: source, + propertyOnly: false }); } diff --git a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx index de45550..78c8b07 100644 --- a/karavan-designer/src/designer/templates/TemplatesDesigner.tsx +++ b/karavan-designer/src/designer/templates/TemplatesDesigner.tsx @@ -24,7 +24,7 @@ import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefin import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; interface Props { - onSave?: (integration: Integration) => void + onSave?: (integration: Integration, propertyOnly: boolean) => void integration: Integration dark: boolean } @@ -33,6 +33,7 @@ interface State { integration: Integration selectedStep?: CamelElement key: string + propertyOnly: boolean } export class TemplatesDesigner extends React.Component<Props, State> { @@ -40,11 +41,12 @@ export class TemplatesDesigner extends React.Component<Props, State> { public state: State = { integration: this.props.integration, key: "", + propertyOnly: false }; componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => { if (prevState.key !== this.state.key) { - this.props.onSave?.call(this, this.state.integration); + this.props.onSave?.call(this, this.state.integration, this.state.propertyOnly); } } diff --git a/karavan-vscode/src/designerView.ts b/karavan-vscode/src/designerView.ts index acdecf8..ce07170 100644 --- a/karavan-vscode/src/designerView.ts +++ b/karavan-vscode/src/designerView.ts @@ -63,7 +63,6 @@ export class DesignerView { } createIntegration(crd: boolean, fullPath?: string) { - console.log(fullPath); vscode.window .showInputBox({ title: crd ? "Create Camel-K Integration CRD" : "Create Camel Integration YAML", @@ -129,7 +128,6 @@ export class DesignerView { ); // Handle close event panel.onDidDispose(() => { - console.log("close panel", relativePath) KARAVAN_PANELS.delete(relativePath); }, null, this.context.subscriptions); @@ -143,11 +141,9 @@ export class DesignerView { sendData(panel: vscode.WebviewPanel, filename: string, relativePath: string, yaml?: string) { // Read and send Kamelets - console.log("Kamelets sent"); panel.webview.postMessage({ command: 'kamelets', kamelets: utils.readKamelets(this.context) }); // Read and send Components - console.log("Components sent"); panel.webview.postMessage({ command: 'components', components: utils.readComponents(this.context) }); // Send integration diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx index a419744..92d2719 100644 --- a/karavan-vscode/webview/App.tsx +++ b/karavan-vscode/webview/App.tsx @@ -33,6 +33,9 @@ interface State { yaml: string key: string loaded: boolean + interval?: NodeJS.Timer + scheduledYaml: string + hasChanges: boolean } class App extends React.Component<Props, State> { @@ -43,48 +46,51 @@ class App extends React.Component<Props, State> { yaml: '', key: '', loaded: false, + scheduledYaml: '', + hasChanges: false }; + saveScheduledChanges = () => { + if (this.state.hasChanges){ + this.save(this.state.relativePath, this.state.scheduledYaml, false); + } + }; componentDidMount() { window.addEventListener('message', this.onMessage, false); - vscode.postMessage({ command: 'getData' }) + vscode.postMessage({ command: 'getData' }); + this.setState({interval: setInterval(this.saveScheduledChanges, 3000)}); } componentWillUnmount() { + if (this.state.interval) clearInterval(this.state.interval); window.removeEventListener('message', this.onMessage, false); } onMessage = (event) => { const message = event.data; - console.log("Message received", message); switch (message.command) { case 'kamelets': - console.log("Kamelets saving"); KameletApi.saveKamelets(message.kamelets); - console.log("Kamelets saved"); break; case 'components': - console.log("Components saving"); ComponentApi.saveComponents(message.components); - console.log("Components saved"); break; 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(), loaded: true }); + this.setState({ filename: message.filename, yaml: message.yaml, scheduledYaml: message.yaml, relativePath: message.relativePath, key: Math.random().toString(), loaded: true }); } break; } }; - save(filename: string, yaml: string) { - vscode.postMessage({ - command: 'save', - filename: filename, - relativePath: this.state.relativePath, - yaml: yaml - }) + save(filename: string, yaml: string, propertyOnly: boolean) { + if (!propertyOnly) { + vscode.postMessage({ command: 'save', filename: filename, relativePath: this.state.relativePath, yaml: yaml }); + this.setState({scheduledYaml: yaml, hasChanges: false}); + } else { + this.setState({scheduledYaml: yaml, hasChanges: true}); + } } public render() { @@ -100,7 +106,7 @@ class App extends React.Component<Props, State> { key={this.state.key} filename={this.state.filename} yaml={this.state.yaml} - onSave={(filename, yaml) => this.save(filename, yaml)} + onSave={(filename, yaml, propertyOnly) => this.save(filename, yaml, propertyOnly)} dark={this.props.dark} /> } </Page>