Fix(CanvasForm): fetching modified fields resolving refs

KaotoIO · Jan 14, 2025 · a8a104a · a8a104a
1 parent c64100f
commit a8a104a
Show file tree

Hide file tree

Showing 14 changed files with 1,118 additions and 148 deletions.
diff --git a/packages/ui/src/components/Form/CustomAutoFields.tsx b/packages/ui/src/components/Form/CustomAutoFields.tsx
@@ -4,7 +4,7 @@ import { ComponentType, createElement, useContext } from 'react';
 import { useForm } from 'uniforms';
 import { CatalogKind, KaotoSchemaDefinition } from '../../models';
 import { CanvasFormTabsContext, FilteredFieldContext } from '../../providers';
-import { getFieldGroups, isDefined } from '../../utils';
+import { getFieldGroups, getFilteredProperties, isDefined } from '../../utils';
 import './CustomAutoFields.scss';
 import { CustomExpandableSection } from './customField/CustomExpandableSection';
 import { NoFieldFound } from './NoFieldFound';
@@ -37,13 +37,12 @@ export function CustomAutoFields({
       }, {})
     : (rootField as KaotoSchemaDefinition['schema']).properties;
 
-  const filteredfields = Object.entries(schemaObject ?? {}).filter(
-    (field) =>
-      (!omitFields!.includes(field[0]) && field[0].toLowerCase().includes(cleanQueryTerm)) ||
-      (field[1] as { type: string }).type === 'object',
+  const filteredProperties = getFilteredProperties(
+    schemaObject as KaotoSchemaDefinition['schema']['properties'],
+    cleanQueryTerm,
+    omitFields,
   );
-
-  const propertiesArray = getFieldGroups(Object.fromEntries(filteredfields));
+  const propertiesArray = getFieldGroups(filteredProperties!);
 
   if (
     canvasFormTabsContext?.selectedTab !== 'All' &&

diff --git a/packages/ui/src/components/Form/customField/CustomNestField.tsx b/packages/ui/src/components/Form/customField/CustomNestField.tsx
@@ -21,10 +21,11 @@ import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { useContext } from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
 import { FilteredFieldContext } from '../../../providers';
-import { getFieldGroups } from '../../../utils';
+import { getFieldGroups, getFilteredProperties } from '../../../utils';
 import { CustomAutoField } from '../CustomAutoField';
 import { CustomExpandableSection } from './CustomExpandableSection';
 import './CustomNestField.scss';
+import { KaotoSchemaDefinition } from '../../../models';
 
 export type CustomNestFieldProps = HTMLFieldProps<
   object,
@@ -51,12 +52,11 @@ export const CustomNestField = connectField(
   }: CustomNestFieldProps) => {
     const { filteredFieldText, isGroupExpanded } = useContext(FilteredFieldContext);
     const cleanQueryTerm = filteredFieldText.replace(/\s/g, '').toLowerCase();
-    const filteredProperties = Object.entries(props.properties ?? {}).filter(
-      (field) => field[0].toLowerCase().includes(cleanQueryTerm) || (field[1] as { type: string }).type === 'object',
+    const filteredProperties = getFilteredProperties(
+      props.properties as KaotoSchemaDefinition['schema']['properties'],
+      cleanQueryTerm,
     );
-    const actualProperties = Object.fromEntries(filteredProperties);
-    const propertiesArray = getFieldGroups(actualProperties);
-
+    const propertiesArray = getFieldGroups(filteredProperties!);
     if (propertiesArray.common.length === 0 && Object.keys(propertiesArray.groups).length === 0) return null;
 
     return (

diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx
@@ -73,7 +73,7 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
     } else if (props.formMode === 'Modified') {
       return {
         ...dataFormatSchema,
-        properties: getUserUpdatedPropertiesSchema(dataFormatSchema?.properties ?? {}, dataFormatModel ?? {}),
+        properties: getUserUpdatedPropertiesSchema(dataFormatSchema?.properties, dataFormatModel, dataFormatSchema),
       };
     }
   }, [props.formMode, dataFormat]);

diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx
@@ -74,7 +74,11 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
     } else if (props.formMode === 'Modified') {
       return {
         ...loadBalancerSchema,
-        properties: getUserUpdatedPropertiesSchema(loadBalancerSchema?.properties ?? {}, loadBalancerModel ?? {}),
+        properties: getUserUpdatedPropertiesSchema(
+          loadBalancerSchema?.properties,
+          loadBalancerModel,
+          loadBalancerSchema,
+        ),
       };
     }
   }, [props.formMode, loadBalancer]);

diff --git a/packages/ui/src/components/Form/schema-bridge.ts b/packages/ui/src/components/Form/schema-bridge.ts
@@ -42,6 +42,7 @@ export class SchemaBridge extends JSONSchemaBridge {
         } else if (definition.$ref) {
           /** Resolve $ref if needed */
           Object.assign(definition, resolveRefIfNeeded(definition, this.schema));
+          delete definition['$ref'];
         }
       }
 

diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx
@@ -77,7 +77,7 @@ export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps>
     } else if (props.formMode === 'Modified') {
       return {
         ...languageSchema,
-        properties: getUserUpdatedPropertiesSchema(languageSchema?.properties ?? {}, languageModel ?? {}),
+        properties: getUserUpdatedPropertiesSchema(languageSchema?.properties, languageModel, languageSchema),
       };
     }
   }, [props.formMode, language]);

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormBody.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormBody.tsx
@@ -36,7 +36,11 @@ export const CanvasFormBody: FunctionComponent<CanvasFormTabsProps> = (props) =>
   } else if (selectedTab === 'Modified') {
     processedSchema = {
       ...visualComponentSchema?.schema,
-      properties: getUserUpdatedPropertiesSchema(visualComponentSchema?.schema.properties ?? {}, model),
+      properties: getUserUpdatedPropertiesSchema(
+        visualComponentSchema?.schema.properties,
+        model,
+        visualComponentSchema?.schema,
+      ),
     };
   }