feat(viz): add autowired and enum prop into component properties

packages/ui/src/camel-utils/camel-to-table.adapter.test.ts

@@ -34,6 +34,7 @@ describe('camelComponentToTable', () => {
         type: 'string',
         javaType: 'java.lang.String',
         deprecated: false,
+        autowired: false,
         secret: false,
         description: 'url',
       },
@@ -49,6 +50,7 @@ describe('camelComponentToTable', () => {
         description: 'Name of component',
         type: 'string',
         deprecated: false,
+        autowired: true,
         secret: false,
       },
       hostname: {
@@ -61,6 +63,8 @@ describe('camelComponentToTable', () => {
         description: 'The hostname of the asterisk server',
         type: 'string',
         deprecated: false,
+        enum: ["first", "second"],
+        autowired: true,
         secret: false,
       },
     } as Record<string, ICamelComponentProperty>,
@@ -73,6 +77,7 @@ describe('camelComponentToTable', () => {
         description: 'Header asterisk',
         javaType: 'org.apache.camel.spi.ExceptionHandler',
         deprecated: false,
+        autowired: true,
         secret: false,
         required: false,
         constantName: '',
@@ -126,7 +131,7 @@ describe('camelComponentToTable', () => {
     } as Record<string, ICamelComponentApi>,
   } as ICamelComponentDefinition;
 
-  it('should return a properties IPropertiesTable with the correct values', () => {
+  it('should return a component properties IPropertiesTable with the correct values', () => {
     const table = camelComponentPropertiesToTable(componentDef.componentProperties);
     expect(table.headers).toContain(PropertiesHeaders.Name);
     expect(table.headers).toContain(PropertiesHeaders.Description);
@@ -140,8 +145,10 @@ describe('camelComponentToTable', () => {
     expect(table.rows[0].type).toEqual('String');
     expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
     expect(table.rows[0].rowAdditionalInfo.group).toEqual('producer');
+    expect(table.rows[0].rowAdditionalInfo.autowired).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.enum).toBeUndefined;
   });
-  it('should return a component properties IPropertiesTable with the correct values with filter', () => {
+  it('should return a properties IPropertiesTable with the correct values with filter', () => {
     const table = camelComponentPropertiesToTable(componentDef.properties, {
       filterKey: 'kind',
       filterValue: 'parameter',
@@ -158,6 +165,8 @@ describe('camelComponentToTable', () => {
     expect(table.rows[0].type).toEqual('String');
     expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
     expect(table.rows[0].rowAdditionalInfo.group).toEqual('common');
+    expect(table.rows[0].rowAdditionalInfo.autowired).toEqual(true);
+    expect(table.rows[0].rowAdditionalInfo.enum).toHaveLength(2);
   });
   it('should return a headers IPropertiesTable with the correct values', () => {
     let table = camelComponentPropertiesToTable(componentDef.headers!, { filterKey: 'kind', filterValue: 'parameter' });
@@ -175,6 +184,7 @@ describe('camelComponentToTable', () => {
     expect(table.rows[0].type).toEqual('ExceptionHandler');
     expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
     expect(table.rows[0].rowAdditionalInfo.group).toEqual('producer');  
+    expect(table.rows[0].rowAdditionalInfo.autowired).toEqual(true);
   });
   it('should return a apis IPropertiesTable with the correct values', () => {
     const table = camelComponentApisToTable(componentDef.apis!);
@@ -231,6 +241,8 @@ describe('camelProcessorToTable', () => {
         description: 'Class name to use for marshal and unmarshalling',
         type: 'string',
         deprecated: false,
+        autowired: true,
+        enum: ["first", "second"],
         secret: false,
       },
     } as Record<string, ICamelProcessorProperty>,
@@ -248,7 +260,10 @@ describe('camelProcessorToTable', () => {
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].type).toEqual('String');
     expect(table.rows[0].description).toEqual('Class name to use for marshal and unmarshalling');
-    expect(table.rows[0].rowAdditionalInfo).toBeUndefined;
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(true);
+    expect(table.rows[0].rowAdditionalInfo.group).toBeUndefined;
+    expect(table.rows[0].rowAdditionalInfo.autowired).toEqual(true);
+    expect(table.rows[0].rowAdditionalInfo.enum).toHaveLength(2);
   });
 
   it('should return a properties IPropertiesTable with the correct values with filter', () => {
@@ -265,7 +280,10 @@ describe('camelProcessorToTable', () => {
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].type).toEqual('String');
     expect(table.rows[0].description).toEqual('Class name to use for marshal and unmarshalling');
-    expect(table.rows[0].rowAdditionalInfo).toBeUndefined;
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(true);
+    expect(table.rows[0].rowAdditionalInfo.group).toBeUndefined;
+    expect(table.rows[0].rowAdditionalInfo.autowired).toEqual(true);
+    expect(table.rows[0].rowAdditionalInfo.enum).toHaveLength(2);
   });
 });
 

packages/ui/src/camel-utils/camel-to-table.adapter.ts

@@ -28,7 +28,9 @@ export const camelComponentPropertiesToTable = (
       type: value.javaType.substring(value.javaType.lastIndexOf('.') + 1),
       rowAdditionalInfo: {
         required: value.required,
-        group: value.group
+        group: value.group,
+        autowired: value.autowired,
+        enum: value.enum
       }
     });
   }
@@ -81,6 +83,8 @@ export const camelProcessorPropertiesToTable = (
       description: value.description,
       rowAdditionalInfo: {
         required: value.required,
+        autowired: value.autowired,
+        enum: value.enum
       }
     });
   }

packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts

@@ -10,6 +10,8 @@ export const enum PropertiesHeaders {
 export interface IPropertiesRowAdditionalInfo {
   required?: boolean,
   group?: string,
+  autowired?: boolean,
+  enum?: string[],
 }
 
 export interface IPropertiesRow {

packages/ui/src/components/PropertiesModal/PropertiesModal.scss

@@ -3,5 +3,6 @@
     .pf-v5-c-table__td[data-label="property"] { font-weight: bold; }
     .pf-v5-c-table__td[data-label="name"] { font-weight: bold; }
     span[data-label="required"] { font-weight: bold; }
+    span[data-label="autowired"] { font-weight: bold; }
     span[data-label="group"] { font-weight: normal; }
 }

packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx

@@ -34,13 +34,15 @@ describe('Component tile', () => {
           kind: 'path',
           group: 'common',
           required: true,
+          autowired: false,
           javaType: 'java.lang.String',
           description: 'Name of component',
         },
         hostname: {
           kind: 'parameter',
           group: 'advanced',
           required: false,
+          autowired: true,
           javaType: 'java.lang.String',
           defaultValue: 'http',
           description: 'The hostname of the asterisk server',
@@ -51,8 +53,10 @@ describe('Component tile', () => {
           kind: 'header',
           displayName: '',
           group: 'producer',
-          description: 'The hostname of the asterisk server',
+          description: 'The event name header',
           javaType: 'org.apache.camel.spi.ExceptionHandler',
+          autowired: true,
+          enum: ['first', 'second'],
         },
       },
       apis: {
@@ -132,7 +136,7 @@ describe('Component tile', () => {
     //rows
     expect(screen.getByTestId('tab-1-table-1-row-0-cell-name')).toHaveTextContent('hostname (advanced)');
     expect(screen.getByTestId('tab-1-table-1-row-0-cell-description')).toHaveTextContent(
-      'The hostname of the asterisk server',
+      'Autowired The hostname of the asterisk server',
     );
     expect(screen.getByTestId('tab-1-table-1-row-0-cell-default')).toHaveTextContent('http');
     expect(screen.getByTestId('tab-1-table-1-row-0-cell-type')).toHaveTextContent('String');
@@ -147,8 +151,11 @@ describe('Component tile', () => {
     //rows
     expect(screen.getByTestId('tab-2-table-0-row-0-cell-name')).toHaveTextContent('CamelAsteriskEventName (producer)');
     expect(screen.getByTestId('tab-2-table-0-row-0-cell-description')).toHaveTextContent(
-      'The hostname of the asterisk server',
+      'Autowired The event name header',
     );
+    expect(screen.getByTestId('tab-2-table-0-row-0-cell-description-enum-0')).toHaveTextContent('first');
+    expect(screen.getByTestId('tab-2-table-0-row-0-cell-description-enum-1')).toHaveTextContent('second');
+
     expect(screen.getByTestId('tab-2-table-0-row-0-cell-type')).toHaveTextContent('ExceptionHandler');
     expect(screen.getByTestId('tab-2-table-0-row-0-cell-default')).toHaveTextContent('');
 

packages/ui/src/components/PropertiesModal/PropertiesModal.tsx

@@ -143,11 +143,11 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
       className="properties-modal"
       title={props.tile.title}
       isOpen={props.isModalOpen}
-      position="top"
       onClose={props.onClose}
       ouiaId="BasicModal"
     >
       <p data-testid="properties-modal-description">{props.tile.description}</p>
+      <br/>
       {tabs.length == 0 && <EmptyTableState name={props.tile.name}></EmptyTableState>}
       {tabs.length != 0 && <PropertiesTabs tabs={tabs}></PropertiesTabs>}
     </Modal>

packages/ui/src/components/PropertiesModal/PropertiesTable.tsx

@@ -1,3 +1,4 @@
+import { List, ListItem } from '@patternfly/react-core';
 import { Caption, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { FunctionComponent } from 'react';
 import { IPropertiesTable, PropertiesHeaders } from './PropertiesModal.models';
@@ -23,18 +24,61 @@ export const PropertiesTable: FunctionComponent<IPropertiesTableProps> = (props)
       </Thead>
       <Tbody>
         {table.rows.length != 0 &&
-          table.rows.map((row, index) => (
-            <Tr data-testid={props.rootDataTestId + '-row-' + index} key={index}>
+          table.rows.map((row, row_index) => (
+            <Tr data-testid={props.rootDataTestId + '-row-' + row_index} key={row_index}>
               {table.headers.map((header) => (
-                <Td data-testid={props.rootDataTestId + '-row-' + index + '-cell-' + header} key={index + header} dataLabel={header} modifier="wrap">
-                  { //suffix if needed
-                    (header == PropertiesHeaders.Description && row.rowAdditionalInfo.required) ? <span data-label="required">Required </span> : ""
+                <Td
+                  data-testid={props.rootDataTestId + '-row-' + row_index + '-cell-' + header}
+                  key={row_index + header}
+                  dataLabel={header}
+                  modifier="wrap"
+                >
+                  {
+                    //suffix required for description cell if needed
+                    header == PropertiesHeaders.Description && row.rowAdditionalInfo.required ? (
+                      <span data-label="required">Required </span>
+                    ) : (
+                      ''
+                    )
+                  }
+                  {
+                    //suffix autowired for description cell if needed
+                    header == PropertiesHeaders.Description && row.rowAdditionalInfo.autowired ? (
+                      <span data-label="autowired">Autowired </span>
+                    ) : (
+                      ''
+                    )
                   }
+                  {<span>{row[header]?.toString()}</span>}
                   {
-                    <span>{row[header]?.toString()}</span>
+                    //prefix with group for name cell if needed
+                    header == PropertiesHeaders.Name && row.rowAdditionalInfo.group ? (
+                      <span data-label="group"> ({row.rowAdditionalInfo.group})</span>
+                    ) : (
+                      ''
+                    )
                   }
-                  { //prefix if needed
-                    (header == PropertiesHeaders.Name && row.rowAdditionalInfo.group) ? <span data-label="group"> ({row.rowAdditionalInfo.group})</span> : ""
+                  {
+                    //prefix with enum for description cell if needed
+                    header == PropertiesHeaders.Description && row.rowAdditionalInfo.enum ? (
+                      <>
+                        <p data-label="enum">Enum values:</p>
+                        <List>
+                          {row.rowAdditionalInfo.enum.map((item, enum_index) => (
+                            <ListItem
+                              data-testid={
+                                props.rootDataTestId + '-row-' + row_index + '-cell-' + header + '-enum-' + enum_index
+                              }
+                              key={item}
+                            >
+                              {item}
+                            </ListItem>
+                          ))}
+                        </List>
+                      </>
+                    ) : (
+                      ''
+                    )
                   }
                 </Td>
               ))}

packages/ui/src/models/camel-properties-common.ts

@@ -6,7 +6,8 @@ export interface CamelPropertyCommon {
     label?: string;
     required: boolean;
     javaType: string;
-    enum?: string;
+    enum?: string[];
+    autowired: boolean;
     defaultValue?: string;
     deprecated: boolean;
     secret: boolean;