feat(Form): Add property filtering and grouping

packages/ui/src/components/Visualization/Canvas/FormV2/fields/AnyOfField.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent, useContext } from 'react';
+import { FunctionComponent } from 'react';
 import { KaotoSchemaDefinition } from '../../../../../models';
-import { SchemaContext, SchemaProvider } from '../providers/SchemaProvider';
+import { SchemaProvider } from '../providers/SchemaProvider';
 import { FieldProps } from '../typings';
 import { AutoField } from './AutoField';
 
@@ -9,14 +9,6 @@ interface AnyOfFieldProps extends FieldProps {
 }
 
 export const AnyOfField: FunctionComponent<AnyOfFieldProps> = ({ propName, anyOf }) => {
-  const { schema } = useContext(SchemaContext);
-
-  if (!Array.isArray(schema.anyOf) || schema.anyOf.length === 0) {
-    return null;
-  } else if (!schema) {
-    return <div>AnyOfField - Schema not defined</div>;
-  }
-
   return (
     <>
       {anyOf?.map((schema, index) => {

packages/ui/src/components/Visualization/Canvas/FormV2/fields/EnumField.tsx

@@ -1,6 +1,5 @@
 import { FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core';
 import { FunctionComponent, useCallback, useContext, useMemo } from 'react';
-import { isDefined } from '../../../../../utils';
 import { useFieldValue } from '../hooks/field-value';
 import { SchemaContext } from '../providers/SchemaProvider';
 import { FieldProps } from '../typings';

packages/ui/src/components/Visualization/Canvas/FormV2/fields/ObjectField/ObjectField.tsx

@@ -1,11 +1,11 @@
+import { Button } from '@patternfly/react-core';
+import { TrashIcon } from '@patternfly/react-icons';
 import { FunctionComponent, useContext, useMemo } from 'react';
 import { isDefined, ROOT_PATH } from '../../../../../../utils';
 import { SchemaContext } from '../../providers/SchemaProvider';
 import { FieldProps } from '../../typings';
-import { ObjectFieldInner } from './ObjectFieldInner';
-import { TrashIcon } from '@patternfly/react-icons';
-import { Button } from '@patternfly/react-core';
 import { FieldWrapper } from '../FieldWrapper';
+import { ObjectFieldGrouping } from './ObjectFieldGrouping';
 
 export const ObjectField: FunctionComponent<FieldProps> = ({ propName, onRemove }) => {
   const { schema } = useContext(SchemaContext);
@@ -33,7 +33,7 @@ export const ObjectField: FunctionComponent<FieldProps> = ({ propName, onRemove
   );
 
   if (propName === ROOT_PATH || !schema.title) {
-    return <ObjectFieldInner propName={propName} />;
+    return <ObjectFieldGrouping propName={propName} />;
   }
 
   return (
@@ -45,7 +45,7 @@ export const ObjectField: FunctionComponent<FieldProps> = ({ propName, onRemove
       defaultValue={schema.default}
       actions={actions}
     >
-      <ObjectFieldInner propName={propName} />
+      <ObjectFieldGrouping propName={propName} />
     </FieldWrapper>
   );
 };

packages/ui/src/components/Visualization/Canvas/FormV2/fields/ObjectField/ObjectFieldGrouping.tsx

@@ -0,0 +1,57 @@
+import { FormFieldGroupExpandable, FormFieldGroupHeader } from '@patternfly/react-core';
+import { FunctionComponent, useContext, useMemo } from 'react';
+import { FilteredFieldContext } from '../../../../../../providers';
+import { getFieldGroupsV2, getFilteredProperties, isDefined } from '../../../../../../utils';
+import { capitalizeString } from '../../../../../../utils/capitalize-string';
+import { SchemaContext, SchemaProvider } from '../../providers/SchemaProvider';
+import { FieldProps } from '../../typings';
+import { AnyOfField } from '../AnyOfField';
+import { ObjectFieldInner } from './ObjectFieldInner';
+
+const SPACE_REGEX = /\s/g;
+
+export const ObjectFieldGrouping: FunctionComponent<FieldProps> = ({ propName }) => {
+  const { schema } = useContext(SchemaContext);
+  if (!isDefined(schema)) {
+    throw new Error(`ObjectFieldGrouping: schema is not defined for ${propName}`);
+  }
+
+  const { filteredFieldText } = useContext(FilteredFieldContext);
+
+  const groupedProperties = useMemo(() => {
+    const cleanQueryTerm = filteredFieldText.replace(SPACE_REGEX, '').toLowerCase();
+    const filteredProperties = getFilteredProperties(schema.properties, cleanQueryTerm);
+    return getFieldGroupsV2(filteredProperties);
+  }, [filteredFieldText, schema.properties]);
+
+  const requiredProperties = Array.isArray(schema.required) ? schema.required : [];
+
+  return (
+    <>
+      {/* Common properties */}
+      <SchemaProvider schema={{ properties: groupedProperties.common }}>
+        <ObjectFieldInner propName={propName} requiredProperties={requiredProperties} />
+      </SchemaProvider>
+
+      {/* AnyOf field */}
+      {Array.isArray(schema.anyOf) && <AnyOfField propName={propName} anyOf={schema.anyOf} />}
+
+      {/* Grouped properties */}
+      {groupedProperties.groups.map(([groupName, groupProperties]) => {
+        const name = capitalizeString(groupName);
+
+        return (
+          <FormFieldGroupExpandable
+            key={`${name}-section-toggle`}
+            toggleAriaLabel={`Toggle ${name} group`}
+            header={<FormFieldGroupHeader titleText={{ text: name, id: `${propName}-${name}` }} />}
+          >
+            <SchemaProvider schema={{ properties: groupProperties }}>
+              <ObjectFieldInner propName={propName} requiredProperties={requiredProperties} />
+            </SchemaProvider>
+          </FormFieldGroupExpandable>
+        );
+      })}
+    </>
+  );
+};

packages/ui/src/components/Visualization/Canvas/FormV2/fields/ObjectField/ObjectFieldInner.tsx

@@ -2,17 +2,18 @@ import { FunctionComponent, useContext } from 'react';
 import { isDefined } from '../../../../../../utils';
 import { SchemaContext, SchemaProvider } from '../../providers/SchemaProvider';
 import { FieldProps } from '../../typings';
-import { AnyOfField } from '../AnyOfField';
 import { AutoField } from '../AutoField';
 
-export const ObjectFieldInner: FunctionComponent<FieldProps> = ({ propName }) => {
+interface ObjectFieldInnerProps extends FieldProps {
+  requiredProperties: string[];
+}
+
+export const ObjectFieldInner: FunctionComponent<ObjectFieldInnerProps> = ({ propName, requiredProperties }) => {
   const { schema } = useContext(SchemaContext);
-  if (!schema) {
-    return <div>ObjectField - Schema not defined</div>;
+  if (!isDefined(schema)) {
+    throw new Error(`ObjectFieldInner: schema is not defined for ${propName}`);
   }
 
-  const requiredProperties = Array.isArray(schema.required) ? schema.required : [];
-
   return (
     <>
       {Object.entries(schema.properties ?? {})
@@ -30,8 +31,6 @@ export const ObjectFieldInner: FunctionComponent<FieldProps> = ({ propName }) =>
             </SchemaProvider>
           );
         })}
-
-      {Array.isArray(schema.anyOf) && <AnyOfField propName={propName} anyOf={schema.anyOf} />}
     </>
   );
 };

packages/ui/src/stubs/timer.component.schema.ts

@@ -1,17 +1,19 @@
-export const TimerComponentSchema = {
+import { KaotoSchemaDefinition } from '../models';
+
+export const TimerComponentSchema: KaotoSchemaDefinition['schema'] = {
   $schema: 'http://json-schema.org/draft-07/schema#',
   type: 'object',
   properties: {
     timerName: {
       title: 'Timer Name',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description: 'The name of the timer',
       type: 'string',
       deprecated: false,
     },
     delay: {
       title: 'Delay',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description:
         'The number of milliseconds to wait before the first event is generated. Should not be used in conjunction with the time option. The default value is 1000.',
       format: 'duration',
@@ -21,23 +23,23 @@ export const TimerComponentSchema = {
     },
     fixedRate: {
       title: 'Fixed Rate',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description: 'Events take place at approximately regular intervals, separated by the specified period.',
       type: 'boolean',
       deprecated: false,
       default: false,
     },
     includeMetadata: {
       title: 'Include Metadata',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description: 'Whether to include metadata in the exchange such as fired time, timer name, timer count etc.',
       type: 'boolean',
       deprecated: false,
       default: false,
     },
     period: {
       title: 'Period',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description: 'Generate periodic events every period. Must be zero or positive value. The default value is 1000.',
       format: 'duration',
       type: 'string',
@@ -46,15 +48,15 @@ export const TimerComponentSchema = {
     },
     repeatCount: {
       title: 'Repeat Count',
-      group: 'consumer',
+      $comment: 'group:consumer',
       description:
         'Specifies a maximum limit for the number of fires. Therefore, if you set it to 1, the timer will only fire once. If you set it to 5, it will only fire five times. A value of zero or negative means fire forever.',
       type: 'integer',
       deprecated: false,
     },
     bridgeErrorHandler: {
       title: 'Bridge Error Handler',
-      group: 'consumer (advanced)',
+      $comment: 'group:consumer (advanced)',
       description:
         'Allows for bridging the consumer to the Camel routing Error Handler, which mean any exceptions (if possible) occurred while the Camel consumer is trying to pickup incoming messages, or the likes, will now be processed as a message and handled by the routing Error Handler. Important: This is only possible if the 3rd party component allows Camel to be alerted if an exception was thrown. Some components handle this internally only, and therefore bridgeErrorHandler is not possible. In other situations we may improve the Camel component to hook into the 3rd party component and make this possible for future releases. By default the consumer will use the org.apache.camel.spi.ExceptionHandler to deal with exceptions, that will be logged at WARN or ERROR level and ignored.',
       type: 'boolean',
@@ -63,24 +65,24 @@ export const TimerComponentSchema = {
     },
     exceptionHandler: {
       title: 'Exception Handler',
-      group: 'consumer (advanced)',
+      $comment: 'group:consumer (advanced)',
       description:
         'To let the consumer use a custom ExceptionHandler. Notice if the option bridgeErrorHandler is enabled then this option is not in use. By default the consumer will deal with exceptions, that will be logged at WARN or ERROR level and ignored.',
       type: 'string',
       deprecated: false,
-      $comment: 'class:org.apache.camel.spi.ExceptionHandler',
+      format: 'class:org.apache.camel.spi.ExceptionHandler',
     },
     exchangePattern: {
       title: 'Exchange Pattern',
-      group: 'consumer (advanced)',
+      $comment: 'group:consumer (advanced)',
       description: 'Sets the exchange pattern when the consumer creates an exchange.',
       type: 'string',
       deprecated: false,
       enum: ['InOnly', 'InOut'],
     },
     daemon: {
       title: 'Daemon',
-      group: 'advanced',
+      $comment: 'group:advanced',
       description:
         'Specifies whether the thread associated with the timer endpoint runs as a daemon. The default value is true.',
       type: 'boolean',
@@ -89,38 +91,38 @@ export const TimerComponentSchema = {
     },
     pattern: {
       title: 'Pattern',
-      group: 'advanced',
+      $comment: 'group:advanced',
       description: 'Allows you to specify a custom Date pattern to use for setting the time option using URI syntax.',
       type: 'string',
       deprecated: false,
     },
     synchronous: {
       title: 'Synchronous',
-      group: 'advanced',
+      $comment: 'group:advanced',
       description: 'Sets whether synchronous processing should be strictly used',
       type: 'boolean',
       deprecated: false,
       default: false,
     },
     time: {
       title: 'Time',
-      group: 'advanced',
+      $comment: 'group:advanced',
       description:
         "A java.util.Date the first event should be generated. If using the URI, the pattern expected is: yyyy-MM-dd HH:mm:ss or yyyy-MM-dd'T'HH:mm:ss.",
       type: 'string',
       deprecated: false,
     },
     timer: {
       title: 'Timer',
-      group: 'advanced',
+      $comment: 'group:advanced',
       description: 'To use a custom Timer',
       type: 'string',
       deprecated: false,
-      $comment: 'class:java.util.Timer',
+      format: 'class:java.util.Timer',
     },
     runLoggingLevel: {
       title: 'Run Logging Level',
-      group: 'scheduler',
+      $comment: 'group:scheduler',
       description:
         'The consumer logs a start/complete log line when it polls. This option allows you to configure the logging level for that.',
       type: 'string',