fix(CanvasForm): Expression form hold stale data

When the users includes config in a form field, which has same name as form field of another language/dataformat type, to which they can switch - the previously configured form field might get omited. The fix is to assign a key to the form, so React know that the form should be recreated without reusing the existing fields. fix: #904
KaotoIO · Mar 11, 2024 · d64fba6 · d64fba6
1 parent 271a29c
commit d64fba6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
@@ -128,8 +128,9 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
               </Dropdown>
               {dataFormat && (
                 <MetadataEditor
+                  key={dataFormat.model.name}
                   data-testid="dataformat-editor"
-                  name={'dataformat'}
+                  name="dataformat"
                   schema={dataFormatSchema}
                   metadata={dataFormatModel}
                   onChangeModel={(model) => handleOnChange(dataFormat.model.name, model)}

diff --git a/packages/ui/src/components/Form/expression/ExpressionEditor.tsx b/packages/ui/src/components/Form/expression/ExpressionEditor.tsx
@@ -236,8 +236,9 @@ export const ExpressionEditor: FunctionComponent<ExpressionEditorProps> = ({
         {language && (
           <div className="metadata-editor">
             <MetadataEditor
+              key={language.model.name}
               data-testid="expression-editor"
-              name={'expression'}
+              name="expression"
               schema={languageSchema}
               metadata={expressionModel}
               onChangeModel={(model) => onChangeExpressionModel(language.model.name, model)}

diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
@@ -130,8 +130,9 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
             {loadBalancer && (
               <div className="load-balancer-editor">
                 <MetadataEditor
+                  key={loadBalancer.model.name}
                   data-testid="loadbalancer-editor"
-                  name={'loadbalancer'}
+                  name="loadbalancer"
                   schema={loadBalancerSchema}
                   metadata={loadBalancerModel}
                   onChangeModel={(model) => handleOnChange(loadBalancer.model.name, model)}