feat: improve filter to match title and values

src/form/fields/ObjectField/ObjectFieldGrouping.test.tsx

@@ -1,11 +1,11 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import { KaotoSchemaDefinition } from '../../models';
 import { FilteredFieldContext } from '../../providers/filtered-field.provider';
 import { ROOT_PATH } from '../../utils';
 import { SchemaProvider } from '../../providers/SchemaProvider';
 import { FormWrapper } from '../../testing/FormWrapper';
 import { ObjectFieldGrouping } from './ObjectFieldGrouping';
+import { JSONSchema4 } from 'json-schema';
 
 describe('ObjectFieldGrouping', () => {
   const schema: JSONSchema4 = {
@@ -111,4 +111,41 @@ describe('ObjectFieldGrouping', () => {
       <FormWrapper>{children}</FormWrapper>
     </SchemaProvider>
   );
+
+  it('should strip spaces from the filter before matching', () => {
+    const wrapper = render(
+      <FilteredFieldContext.Provider
+        value={{ filteredFieldText: 'cor rel', onFilterChange: jest.fn(), isGroupExpanded: false }}
+      >
+        <ObjectFieldGrouping propName={ROOT_PATH} />
+      </FilteredFieldContext.Provider>,
+      { wrapper: formWrapper },
+    );
+
+    const inputFields = wrapper.queryAllByRole('textbox');
+    expect(inputFields).toHaveLength(1);
+    expect(inputFields[0]).toHaveAttribute('name', '#.correlationExpression');
+  });
+
+  it('should mark required properties with the required indicator', () => {
+    const requiredSchema: JSONSchema4 = {
+      type: 'object',
+      required: ['id'],
+      properties: {
+        id: { type: 'string', title: 'Id' },
+        description: { type: 'string', title: 'Description' },
+      },
+    };
+
+    const { getByTestId } = render(
+      <SchemaProvider schema={requiredSchema}>
+        <FormWrapper>
+          <ObjectFieldGrouping propName={ROOT_PATH} />
+        </FormWrapper>
+      </SchemaProvider>,
+    );
+
+    expect(getByTestId('#.id__field-wrapper').querySelector('.pf-v6-c-form__label-required')).toBeInTheDocument();
+    expect(getByTestId('#.description__field-wrapper').querySelector('.pf-v6-c-form__label-required')).toBeNull();
+  });
 });

src/form/fields/ObjectField/ObjectFieldGrouping.tsx

@@ -1,8 +1,10 @@
 import { FunctionComponent, useContext, useMemo } from 'react';
+import { FieldProps } from '../../models/typings';
 import { FilteredFieldContext } from '../../providers/filtered-field.provider';
-import { getFieldGroups, getFilteredProperties } from '../../utils';
+import { ModelContext } from '../../providers/ModelProvider';
 import { SchemaContext, SchemaProvider } from '../../providers/SchemaProvider';
-import { FieldProps } from '../../models/typings';
+import { getFieldGroups, safeGetValue } from '../../utils';
+import { SchemaPropertyFilter } from '../../utils/SchemaPropertyFilter';
 import { AnyOfField } from './AnyOfField';
 import { GroupFields } from './GroupFields';
 import { ObjectFieldInner } from './ObjectFieldInner';
@@ -12,12 +14,15 @@ const SPACE_REGEX = /\s/g;
 export const ObjectFieldGrouping: FunctionComponent<FieldProps> = ({ propName }) => {
   const { schema } = useContext(SchemaContext);
   const { filteredFieldText } = useContext(FilteredFieldContext);
+  const { model } = useContext(ModelContext);
 
-  const groupedProperties = useMemo(() => {
+  const filteredProperties = useMemo(() => {
     const cleanQueryTerm = filteredFieldText.replace(SPACE_REGEX, '').toLowerCase();
-    const filteredProperties = getFilteredProperties(schema.properties, cleanQueryTerm);
-    return getFieldGroups(filteredProperties);
-  }, [filteredFieldText, schema.properties]);
+    const modelSlice = safeGetValue(model, propName.replace('#.', '')) as Record<string, unknown> | undefined;
+    return SchemaPropertyFilter.filter(schema.properties, cleanQueryTerm, undefined, modelSlice);
+  }, [filteredFieldText, schema.properties, model, propName]);
+
+  const groupedProperties = useMemo(() => getFieldGroups(filteredProperties), [filteredProperties]);
 
   const requiredProperties = Array.isArray(schema.required) ? schema.required : [];