fix(278): Group parameters in the configuration panel

packages/camel-catalog/kaoto-camel-catalog-maven-plugin/src/main/java/io/kaoto/camelcatalog/CamelCatalogProcessor.java

@@ -104,6 +104,7 @@ private void generatePropertiesSchema(ObjectNode parent) throws Exception {
             var property = (ObjectNode) propertyEntry.getValue();
             var propertySchema = answerProperties.withObject("/" + propertyName);
             if (property.has("displayName")) propertySchema.put("title", property.get("displayName").asText());
+            if (property.has("group")) propertySchema.put("group", property.get("group").asText());
             if (property.has("description")) propertySchema.put("description", property.get("description").asText());
             var propertyType = "string";
             if (property.has("type")) {

packages/ui/src/components/Form/CustomAutoField.test.tsx

@@ -8,12 +8,13 @@ jest.mock('uniforms', () => {
   };
 });
 
-import { BoolField, DateField, ListField, NestField, RadioField, TextField } from '@kaoto-next/uniforms-patternfly';
+import { BoolField, DateField, ListField, RadioField, TextField } from '@kaoto-next/uniforms-patternfly';
 import { AutoFieldProps } from 'uniforms';
 import { CustomAutoField } from './CustomAutoField';
+import { OneOfField } from './OneOf/OneOfField';
+import { CustomNestField } from './customField/CustomNestField';
 import { DisabledField } from './customField/DisabledField';
 import { TypeaheadField } from './customField/TypeaheadField';
-import { OneOfField } from './OneOf/OneOfField';
 
 describe('CustomAutoField', () => {
   it('should return `OneOfField` if `props.oneOf` is an array with a length > 0', () => {
@@ -138,7 +139,7 @@ describe('CustomAutoField', () => {
 
     const result = CustomAutoField(props);
 
-    expect(result).toBe(NestField);
+    expect(result).toBe(CustomNestField);
   });
 
   it('should return `TextField` if `props.fieldType` is `String`', () => {

packages/ui/src/components/Form/CustomAutoField.tsx

@@ -1,16 +1,9 @@
-import {
-  BoolField,
-  DateField,
-  ListField,
-  LongTextField,
-  NestField,
-  RadioField,
-  TextField,
-} from '@kaoto-next/uniforms-patternfly';
+import { BoolField, DateField, ListField, LongTextField, RadioField, TextField } from '@kaoto-next/uniforms-patternfly';
 import { createAutoField } from 'uniforms';
 import { getValue } from '../../utils';
 import { OneOfField } from './OneOf/OneOfField';
 import { BeanReferenceField } from './bean/BeanReferenceField';
+import { CustomNestField } from './customField/CustomNestField';
 import { DisabledField } from './customField/DisabledField';
 import { TypeaheadField } from './customField/TypeaheadField';
 import { ExpressionAwareNestField } from './expression/ExpressionAwareNestField';
@@ -55,7 +48,7 @@ export const CustomAutoField = createAutoField((props) => {
     case Number:
       return TextField;
     case Object:
-      return NestField;
+      return CustomNestField;
     case String:
       /* catalog preprocessor put 'string' as a type and the javaType as a schema $comment */
       if (comment?.startsWith('class:')) {

packages/ui/src/components/Form/customField/CustomNestField.scss

@@ -0,0 +1,4 @@
+.custom-nestfield-spacing {
+  display: grid;
+  gap: var(--pf-v5-c-form--GridGap);
+}

packages/ui/src/components/Form/customField/CustomNestField.test.tsx

@@ -0,0 +1,132 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+
+import { AutoField } from '@kaoto-next/uniforms-patternfly';
+
+import { AutoForm } from 'uniforms';
+import { CustomAutoFieldDetector } from '../CustomAutoField';
+import { SchemaService } from '../schema.service';
+import { CustomNestField } from './CustomNestField';
+
+describe('CustomNestField', () => {
+  const mockSchema = {
+    title: 'Test',
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      parameters: {
+        type: 'object',
+        title: 'Endpoint Properties',
+        description: 'Endpoint properties description',
+        properties: {
+          timerName: {
+            title: 'Timer Name',
+            group: 'common',
+            description: 'The name of the timer',
+            type: 'string',
+          },
+          pattern: {
+            title: 'Pattern',
+            group: 'advanced',
+            description:
+              'Allows you to specify a custom Date pattern to use for setting the time option using URI syntax.',
+            type: 'string',
+          },
+          secret: {
+            title: 'Secret',
+            group: 'secret',
+            description: 'The secret',
+            type: 'string',
+          },
+        },
+      },
+    },
+  };
+
+  const schemaService = new SchemaService();
+  const schemaBridge = schemaService.getSchemaBridge(mockSchema);
+
+  it('should render the component', () => {
+    render(
+      <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
+        <AutoForm schema={schemaBridge!}>
+          <CustomNestField name="parameters" />
+        </AutoForm>
+      </AutoField.componentDetectorContext.Provider>,
+    );
+    const inputTimerElement = screen
+      .getAllByRole('textbox')
+      .filter((textbox) => textbox.getAttribute('label') === 'Timer Name');
+    expect(inputTimerElement).toHaveLength(1);
+    const inputPatternElement = screen
+      .getAllByRole('textbox')
+      .filter((textbox) => textbox.getAttribute('label') === 'Pattern');
+    expect(inputPatternElement).toHaveLength(0);
+    const advancedProperties = screen.getByRole('button', { name: 'advanced properties' });
+    const secretProperties = screen.getByRole('button', { name: 'secret properties' });
+    expect(advancedProperties).toBeInTheDocument();
+    expect(secretProperties).toBeInTheDocument();
+  });
+
+  it('should display the advanced properties', async () => {
+    render(
+      <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
+        <AutoForm schema={schemaBridge!}>
+          <CustomNestField name="parameters" />
+        </AutoForm>
+      </AutoField.componentDetectorContext.Provider>,
+    );
+    const buttonElement = screen.getByRole('button', { name: 'advanced properties' });
+    await act(async () => {
+      fireEvent.click(buttonElement);
+    });
+    const inputPatternElement = screen
+      .getAllByRole('textbox')
+      .filter((textbox) => textbox.getAttribute('label') === 'Pattern');
+    expect(inputPatternElement).toHaveLength(1);
+  });
+});
+
+describe('CustomNestField', () => {
+  const mockSchema = {
+    title: 'Test',
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+      parameters: {
+        type: 'object',
+        title: 'Endpoint Properties',
+        description: 'Endpoint properties description',
+        properties: {
+          timerName: {
+            title: 'Timer Name',
+            description: 'The name of the timer',
+            type: 'string',
+          },
+        },
+      },
+    },
+  };
+
+  const schemaService = new SchemaService();
+  const schemaBridge = schemaService.getSchemaBridge(mockSchema);
+
+  it('should not render the advanced properties button if no advanced properties are provided', () => {
+    render(
+      <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
+        <AutoForm schema={schemaBridge!}>
+          <CustomNestField name="parameters" />
+        </AutoForm>
+      </AutoField.componentDetectorContext.Provider>,
+    );
+    const inputTimerElement = screen
+      .getAllByRole('textbox')
+      .filter((textbox) => textbox.getAttribute('label') === 'Timer Name');
+    expect(inputTimerElement).toHaveLength(1);
+
+    const advancedButton = screen
+      .getAllByRole('button')
+      .filter((button) => button.textContent === 'advanced properties');
+    expect(advancedButton).toHaveLength(0);
+  });
+});

packages/ui/src/components/Form/customField/CustomNestField.tsx

@@ -0,0 +1,92 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Card, CardBody, CardHeader, CardTitle, ExpandableSection } from '@patternfly/react-core';
+import { useMemo } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { getValue } from '../../../utils';
+import { CustomAutoField } from '../CustomAutoField';
+import './CustomNestField.scss';
+
+export type CustomNestFieldProps = HTMLFieldProps<
+  object,
+  HTMLDivElement,
+  { properties?: Record<string, unknown>; helperText?: string; itemProps?: object }
+>;
+
+export const CustomNestField = connectField(
+  ({
+    children,
+    error,
+    errorMessage,
+    fields,
+    itemProps,
+    label,
+    name,
+    showInlineError,
+    disabled,
+    ...props
+  }: CustomNestFieldProps) => {
+    const propertiesArray = useMemo(() => {
+      return Object.entries(props.properties ?? {}).reduce(
+        (acc, [name, definition]) => {
+          const group: string = getValue(definition, 'group', '');
+          if (group === '' || group === 'common' || group === 'producer' || group === 'consumer') {
+            acc.common.push(name);
+          } else if (group.includes('advanced')) {
+            acc.groups['advanced'] ??= [];
+            acc.groups['advanced'].push(name);
+          } else {
+            acc.groups[group] ??= [];
+            acc.groups[group].push(name);
+          }
+          return acc;
+        },
+        { common: [], groups: {} } as { common: string[]; groups: Record<string, string[]> },
+      );
+    }, [props.properties]);
+
+    return (
+      <Card data-testid={'nest-field'} {...filterDOMProps(props)}>
+        <CardHeader>
+          <CardTitle>{label}</CardTitle>
+        </CardHeader>
+        <CardBody className="custom-nestfield-spacing">
+          {propertiesArray.common.map((field) => (
+            <CustomAutoField key={field} name={field} />
+          ))}
+        </CardBody>
+
+        {Object.entries(propertiesArray.groups).map(([groupName, groupFields]) => (
+          <ExpandableSection
+            toggleText={`${groupName} properties`}
+            toggleId="expandable-section-toggle"
+            contentId="expandable-section-content"
+          >
+            <CardBody className="custom-nestfield-spacing">
+              {groupFields.map((field) => (
+                <CustomAutoField key={field} name={field} />
+              ))}
+            </CardBody>
+          </ExpandableSection>
+        ))}
+      </Card>
+    );
+  },
+);