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

…ested fields

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' &&

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 (

packages/ui/src/components/Form/dataFormat/DataFormatEditor.tsx

@@ -12,12 +12,7 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import './DataFormatEditor.scss';
 import { DataFormatService } from './dataformat.service';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import {
-  getRequiredPropertiesSchema,
-  getSerializedModel,
-  getUserUpdatedPropertiesSchema,
-  isDefined,
-} from '../../../utils';
+import { getRequiredPropertiesSchema, getSerializedModel, getUserUpdatedProperties, isDefined } from '../../../utils';
 import { FormTabsModes } from '../../Visualization/Canvas/Form/canvasformtabs.modes';
 
 interface DataFormatEditorProps {
@@ -67,13 +62,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: getUserUpdatedProperties(dataFormatSchema?.properties, dataFormatModel, dataFormatSchema),
       };
     }
   }, [props.formMode, dataFormat]);

packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.tsx

@@ -12,12 +12,7 @@ import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { LoadBalancerService } from './loadbalancer.service';
 import './LoadBalancerEditor.scss';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
-import {
-  getRequiredPropertiesSchema,
-  getSerializedModel,
-  getUserUpdatedPropertiesSchema,
-  isDefined,
-} from '../../../utils';
+import { getRequiredPropertiesSchema, getSerializedModel, getUserUpdatedProperties, isDefined } from '../../../utils';
 import { FormTabsModes } from '../../Visualization/Canvas/Form/canvasformtabs.modes';
 
 interface LoadBalancerEditorProps {
@@ -68,13 +63,13 @@ 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: getUserUpdatedProperties(loadBalancerSchema?.properties, loadBalancerModel, loadBalancerSchema),
       };
     }
   }, [props.formMode, loadBalancer]);

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'];
         }
       }
 

packages/ui/src/components/Form/stepExpression/StepExpressionEditor.tsx

@@ -8,12 +8,7 @@ import {
 } from '@patternfly/react-core';
 import { FunctionComponent, useCallback, useContext, useMemo, useState } from 'react';
 import { EntitiesContext } from '../../../providers';
-import {
-  getRequiredPropertiesSchema,
-  getSerializedModel,
-  getUserUpdatedPropertiesSchema,
-  isDefined,
-} from '../../../utils';
+import { getRequiredPropertiesSchema, getSerializedModel, getUserUpdatedProperties, isDefined } from '../../../utils';
 import { CanvasNode } from '../../Visualization/Canvas/canvas.models';
 import { TypeaheadEditor } from '../customField/TypeaheadEditor';
 import { ExpressionService } from '../expression/expression.service';
@@ -71,13 +66,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: getUserUpdatedProperties(languageSchema?.properties, languageModel, languageSchema),
       };
     }
   }, [props.formMode, language]);

packages/ui/src/components/Visualization/Canvas/Form/CanvasFormBody.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { EntitiesContext } from '../../../../providers/entities.provider';
 import { SchemaBridgeProvider } from '../../../../providers/schema-bridge.provider';
-import { getUserUpdatedPropertiesSchema, getRequiredPropertiesSchema, isDefined, setValue } from '../../../../utils';
+import { getUserUpdatedProperties, getRequiredPropertiesSchema, isDefined, setValue } from '../../../../utils';
 import { CustomAutoForm, CustomAutoFormRef } from '../../../Form/CustomAutoForm';
 import { DataFormatEditor } from '../../../Form/dataFormat/DataFormatEditor';
 import { LoadBalancerEditor } from '../../../Form/loadBalancer/LoadBalancerEditor';
@@ -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: getUserUpdatedProperties(
+        visualComponentSchema?.schema.properties,
+        model,
+        visualComponentSchema?.schema,
+      ),
     };
   }