Fix(CanvasForm): Search field not showing correct fields in case of n…

…ested fields
KaotoIO · Jan 15, 2025 · 7ffc322 · 7ffc322
1 parent c4f7873
commit 7ffc322
Show file tree

Hide file tree

Showing 20 changed files with 1,477 additions and 555 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 } from '../../utils';
+import { getFieldGroups, getFilteredProperties, isDefined } from '../../utils';
 import './CustomAutoFields.scss';
 import { CustomExpandableSection } from './customField/CustomExpandableSection';
 import { NoFieldFound } from './NoFieldFound';
@@ -29,16 +29,20 @@ export function CustomAutoFields({
   const { filteredFieldText, isGroupExpanded } = useContext(FilteredFieldContext);
   const canvasFormTabsContext = useContext(CanvasFormTabsContext);
   const oneOf = (rootField as KaotoSchemaDefinition['schema']).oneOf;
-
   const cleanQueryTerm = filteredFieldText.replace(/\s/g, '').toLowerCase();
-  const actualFields = (fields ?? schema.getSubfields()).filter(
-    (field) => !omitFields!.includes(field) && (field === 'parameters' || field.toLowerCase().includes(cleanQueryTerm)),
+  const schemaObject = isDefined(fields)
+    ? fields.reduce((acc: { [name: string]: unknown }, name) => {
+        acc[name] = schema.getField(name);
+        return acc;
+      }, {})
+    : (rootField as KaotoSchemaDefinition['schema']).properties;
+
+  const filteredProperties = getFilteredProperties(
+    schemaObject as KaotoSchemaDefinition['schema']['properties'],
+    cleanQueryTerm,
+    omitFields,
   );
-  const actualFieldsSchema = actualFields.reduce((acc: { [name: string]: unknown }, name) => {
-    acc[name] = schema.getField(name);
-    return acc;
-  }, {});
-  const propertiesArray = getFieldGroups(actualFieldsSchema);
+  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),
+    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
@@ -67,13 +67,13 @@ export const DataFormatEditor: FunctionComponent<DataFormatEditorProps> = (props
 
   const processedSchema = useMemo(() => {
     if (props.formMode === 'Required') {
-      return getRequiredPropertiesSchema(dataFormatSchema ?? {});
+      return getRequiredPropertiesSchema(dataFormatSchema, dataFormatSchema);
     } else if (props.formMode === 'All') {
       return dataFormatSchema;
     } 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
@@ -68,13 +68,17 @@ export const LoadBalancerEditor: FunctionComponent<LoadBalancerEditorProps> = (p
 
   const processedSchema = useMemo(() => {
     if (props.formMode === 'Required') {
-      return getRequiredPropertiesSchema(loadBalancerSchema ?? {});
+      return getRequiredPropertiesSchema(loadBalancerSchema, loadBalancerSchema);
     } else if (props.formMode === 'All') {
       return loadBalancerSchema;
     } 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
@@ -71,13 +71,13 @@ export const StepExpressionEditor: FunctionComponent<StepExpressionEditorProps>
 
   const processedSchema = useMemo(() => {
     if (props.formMode === 'Required') {
-      return getRequiredPropertiesSchema(languageSchema ?? {});
+      return getRequiredPropertiesSchema(languageSchema, languageSchema);
     } else if (props.formMode === 'All') {
       return languageSchema;
     } 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
@@ -32,11 +32,15 @@ export const CanvasFormBody: FunctionComponent<CanvasFormTabsProps> = (props) =>
   const model = visualComponentSchema?.definition;
   let processedSchema = visualComponentSchema?.schema;
   if (selectedTab === 'Required') {
-    processedSchema = getRequiredPropertiesSchema(visualComponentSchema?.schema ?? {});
+    processedSchema = getRequiredPropertiesSchema(visualComponentSchema?.schema, visualComponentSchema?.schema);
   } else if (selectedTab === 'Modified') {
     processedSchema = {
       ...visualComponentSchema?.schema,
-      properties: getUserUpdatedPropertiesSchema(visualComponentSchema?.schema.properties ?? {}, model),
+      properties: getUserUpdatedPropertiesSchema(
+        visualComponentSchema?.schema.properties,
+        model,
+        visualComponentSchema?.schema,
+      ),
     };
   }