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="&lt;Transparent 
Rectangle&gt;" 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="&lt;Transparent 
Rectangle&gt;" 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>

Reply via email to