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 3cb5f45  Fix #485
3cb5f45 is described below

commit 3cb5f45ba00bebf673aad5575a08cae6781790e5
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Thu Sep 29 18:51:49 2022 -0400

    Fix #485
---
 karavan-designer/src/App.tsx                       | 57 +++++++++++-----------
 .../designer/route/property/DataFormatField.tsx    | 23 ++++++---
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 276c971..17eb768 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -51,24 +51,25 @@ class App extends React.Component<Props, State> {
             '  flows:\n' +
             '    - route:\n' +
             '        from:\n' +
-            '          uri: timer:demo\n' +
+            '          uri: kamelet:timer-source\n' +
             '          steps:\n' +
-            '            - doTry:\n' +
-            '                steps:\n' +
-            '                  - setBody:\n' +
-            '                      expression:\n' +
-            '                        groovy:\n' +
-            '                          expression: 1000 / 0\n' +
-            '                doCatch:\n' +
-            '                  - steps:\n' +
-            '                      - log:\n' +
-            '                          message: Exception\n' +
-            '                    exception:\n' +
-            '                      - java.lang.ArithmeticException\n' +
-            '                doFinally:\n' +
-            '                  steps:\n' +
-            '                    - log:\n' +
-            '                        message: ${body}\n' +
+            '             - marshal: {}\n' +
+            // '            - doTry:\n' +
+            // '                steps:\n' +
+            // '                  - setBody:\n' +
+            // '                      expression:\n' +
+            // '                        groovy:\n' +
+            // '                          expression: 1000 / 0\n' +
+            // '                doCatch:\n' +
+            // '                  - steps:\n' +
+            // '                      - log:\n' +
+            // '                          message: Exception\n' +
+            // '                    exception:\n' +
+            // '                      - java.lang.ArithmeticException\n' +
+            // '                doFinally:\n' +
+            // '                  steps:\n' +
+            // '                    - log:\n' +
+            // '                        message: ${body}\n' +
             // '            - aggregate: {}\n' +
             // '            - choice: {}\n' +
             // '            - split:\n' +
@@ -81,16 +82,16 @@ class App extends React.Component<Props, State> {
             // '                parameters:\n' +
             // '                  sObjectId: xxx\n' +
             // '                  sObjectClass: Account\n' +
-            // '          parameters:\n' +
-            // '            period: 2000\n' +
-            // '            message: Hello World\n' +
-            '    - route:\n' +
-            '        from:\n' +
-            '          uri: direct:hello-world\n' +
-            '        id: hello-world\n' +
-            '    - beans:\n' +
-            '        - name: FFF\n' +
-            '          type: GGGG\n'
+            '          parameters:\n' +
+            '            period: 2000\n' +
+            '            message: Hello World\n'
+            // '    - route:\n' +
+            // '        from:\n' +
+            // '          uri: direct:hello-world\n' +
+            // '        id: hello-world\n' +
+            // '    - beans:\n' +
+            // '        - name: FFF\n' +
+            // '          type: GGGG\n'
     };
 
     componentDidMount() {
@@ -139,7 +140,7 @@ class App extends React.Component<Props, State> {
 
     save(filename: string, yaml: string, propertyOnly: boolean) {
         // console.log(filename);
-        // console.log(yaml);
+        console.log(yaml);
         // console.log(propertyOnly);
     }
 
diff --git a/karavan-designer/src/designer/route/property/DataFormatField.tsx 
b/karavan-designer/src/designer/route/property/DataFormatField.tsx
index 8eac5c0..aad0022 100644
--- a/karavan-designer/src/designer/route/property/DataFormatField.tsx
+++ b/karavan-designer/src/designer/route/property/DataFormatField.tsx
@@ -16,7 +16,6 @@
  */
 import React from 'react';
 import {
-    FormGroup,
     Select,
     SelectVariant,
     SelectDirection,
@@ -54,6 +53,12 @@ export class DataFormatField extends React.Component<Props, 
State> {
         isShowAdvanced: false
     }
 
+    componentDidMount() {
+        if (CamelDefinitionApiExt.getDataFormat(this.props.value)?.name === 
undefined) {
+            this.dataFormatChanged("json", 
CamelDefinitionApi.createDataFormat('JsonDataFormat', {}));
+        }
+    }
+
     componentDidUpdate = (prevProps: Readonly<Props>, prevState: 
Readonly<State>, snapshot?: any) => {
         const newDataFormat = 
CamelDefinitionApiExt.getDataFormat(this.props.value)?.name || "json"
         if (prevProps.value
@@ -98,7 +103,7 @@ export class DataFormatField extends React.Component<Props, 
State> {
     getPropertyFields = (value: any, properties: PropertyMeta[]) => {
         return (<>
             {value && properties?.map((property: PropertyMeta) =>
-                <DslPropertyField property={property}
+                <DslPropertyField key={property.name} property={property}
                                   integration={this.props.integration}
                                   element={value}
                                   value={value ? (value as any)[property.name] 
: undefined}
@@ -129,7 +134,11 @@ export class DataFormatField extends 
React.Component<Props, State> {
         })
         return (
             <div>
-                <FormGroup label={"Data Format"} key={"dataFormat"} 
fieldId={"dataFormat"}>
+                <div>
+                    <label className="pf-c-form__label" htmlFor="expression">
+                        <span className="pf-c-form__label-text">{"Data 
Format"}</span>
+                        <span className="pf-c-form__label-required" 
aria-hidden="true"> *</span>
+                    </label>
                     <Select
                         variant={SelectVariant.typeahead}
                         aria-label={"dataFormat"}
@@ -144,11 +153,9 @@ export class DataFormatField extends 
React.Component<Props, State> {
                     >
                         {selectOptions}
                     </Select>
-                </FormGroup>
+                </div>
                 <div className="object">
-                    <FormGroup
-                        key={"properties"}
-                        fieldId={"properties"}>
+                    <div>
                         {this.getPropertyFields(value, propertiesMain)}
                         {propertiesAdvanced.length > 0 &&
                             <ExpandableSection
@@ -157,7 +164,7 @@ export class DataFormatField extends React.Component<Props, 
State> {
                                 isExpanded={this.state.isShowAdvanced}>
                                 {this.getPropertyFields(value, 
propertiesAdvanced)}
                             </ExpandableSection>}
-                    </FormGroup>
+                    </div>
 
                 </div>
             </div>

Reply via email to