feat(viz): alignment catalog properties with camel catalog page

KaotoIO · Aug 29, 2023 · 72c9e9a · 72c9e9a
1 parent 13216be
commit 72c9e9a
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 43 deletions.
diff --git a/packages/ui/src/camel-utils/camel-to-table.adapter.test.ts b/packages/ui/src/camel-utils/camel-to-table.adapter.test.ts
@@ -1,4 +1,5 @@
 import { PropertiesHeaders } from '../components/PropertiesModal/PropertiesModal.models';
+import { Required } from '../../../camel-catalog/dist/types/camel-yaml-dsl';
 import {
   ICamelComponentApi,
   ICamelComponentApiMethod,
@@ -129,42 +130,39 @@ describe('camelComponentToTable', () => {
   it('should return a properties IPropertiesTable with the correct values', () => {
     const table = camelComponentPropertiesToTable(componentDef.componentProperties);
     expect(table.headers).toContain(PropertiesHeaders.Name);
-    expect(table.headers).toContain(PropertiesHeaders.Group);
     expect(table.headers).toContain(PropertiesHeaders.Description);
     expect(table.headers).toContain(PropertiesHeaders.Default);
     expect(table.headers).toContain(PropertiesHeaders.Type);
 
     expect(table.rows.length).toEqual(1);
     expect(table.rows[0].name).toEqual('brokerURL');
-    expect(table.rows[0].group).toEqual('producer');
     expect(table.rows[0].description).toEqual('url');
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].type).toEqual('String');
-    expect(table.rows[0].required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.group).toEqual('producer');
   });
   it('should return a component properties IPropertiesTable with the correct values with filter', () => {
     const table = camelComponentPropertiesToTable(componentDef.properties, {
       filterKey: 'kind',
       filterValue: 'parameter',
     });
     expect(table.headers).toContain(PropertiesHeaders.Name);
-    expect(table.headers).toContain(PropertiesHeaders.Group);
     expect(table.headers).toContain(PropertiesHeaders.Description);
     expect(table.headers).toContain(PropertiesHeaders.Default);
     expect(table.headers).toContain(PropertiesHeaders.Type);
 
     expect(table.rows.length).toEqual(1);
     expect(table.rows[0].name).toEqual('hostname');
-    expect(table.rows[0].group).toEqual('common');
     expect(table.rows[0].description).toEqual('The hostname of the asterisk server');
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].type).toEqual('String');
-    expect(table.rows[0].required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.group).toEqual('common');
   });
   it('should return a headers IPropertiesTable with the correct values', () => {
     let table = camelComponentPropertiesToTable(componentDef.headers!, { filterKey: 'kind', filterValue: 'parameter' });
     expect(table.headers).toContain(PropertiesHeaders.Name);
-    expect(table.headers).toContain(PropertiesHeaders.Group);
     expect(table.headers).toContain(PropertiesHeaders.Description);
     expect(table.headers).toContain(PropertiesHeaders.Default);
     expect(table.headers).toContain(PropertiesHeaders.Type);
@@ -173,11 +171,11 @@ describe('camelComponentToTable', () => {
     table = camelComponentPropertiesToTable(componentDef.headers!);
     expect(table.rows.length).toEqual(1);
     expect(table.rows[0].name).toEqual('CamelAsteriskEventName');
-    expect(table.rows[0].group).toEqual('producer');
     expect(table.rows[0].description).toEqual('Header asterisk');
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].type).toEqual('ExceptionHandler');
-    expect(table.rows[0].required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.group).toEqual('producer');  
   });
   it('should return a apis IPropertiesTable with the correct values', () => {
     const table = camelComponentApisToTable(componentDef.apis!);
@@ -189,6 +187,7 @@ describe('camelComponentToTable', () => {
     expect(table.rows[0].name).toEqual('client');
     expect(table.rows[0].description).toEqual('Client api');
     expect(table.rows[0].type).toEqual('Both');
+    expect(table.rows[0].rowAdditionalInfo).toBeUndefined;
     expect(table.rows[1].name).toEqual('client2');
     expect(table.rows[1].description).toEqual('Client2 api');
     expect(table.rows[1].type).toEqual('Both');
@@ -211,6 +210,7 @@ describe('camelComponentToTable', () => {
     expect(table.rows[0].name).toEqual('server');
     expect(table.rows[0].description).toEqual('Server api');
     expect(table.rows[0].type).toEqual('Consumer');
+    expect(table.rows[0].rowAdditionalInfo).toBeUndefined;
   });
 });
 
@@ -249,6 +249,7 @@ 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;
   });
 
   it('should return a properties IPropertiesTable with the correct values with filter', () => {
@@ -265,6 +266,7 @@ 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;
   });
 });
 
@@ -308,17 +310,17 @@ describe('kameletToTable', () => {
     expect(table.rows[0].name).toEqual('Cron Schedule');
     expect(table.rows[0].description).toEqual('A cron example');
     expect(table.rows[0].type).toEqual('number');
-    expect(table.rows[0].required).toEqual(true);
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].example).toBeUndefined();
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(true);
 
     expect(table.rows[1].property).toEqual('message');
     expect(table.rows[1].name).toEqual('Message');
     expect(table.rows[1].description).toEqual('The message to generate');
     expect(table.rows[1].type).toEqual('string');
-    expect(table.rows[1].required).toEqual(false);
     expect(table.rows[1].default).toEqual('hello');
     expect(table.rows[1].example).toEqual('secretsmanager.amazonaws.com');
+    expect(table.rows[1].rowAdditionalInfo.required).toEqual(false);
   });
 
   it('should return a IPropertiesTable with the correct values with filter', () => {
@@ -354,9 +356,9 @@ describe('kameletToTable', () => {
     expect(table.rows[0].name).toEqual('Cron Schedule');
     expect(table.rows[0].description).toEqual('A cron example');
     expect(table.rows[0].type).toEqual('number');
-    expect(table.rows[0].required).toEqual(true);
     expect(table.rows[0].default).toBeUndefined();
     expect(table.rows[0].example).toBeUndefined();
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(true);
   });
 
   it('should return empty IPropertiesTable if no properties exists', () => {
@@ -414,6 +416,6 @@ describe('kameletToTable', () => {
     expect(table.rows[0].description).toEqual('A cron example');
     expect(table.rows[0].type).toEqual('number');
     expect(table.rows[0].default).toBeUndefined();
-    expect(table.rows[0].required).toEqual(false);
+    expect(table.rows[0].rowAdditionalInfo.required).toEqual(false);
   });
 });
diff --git a/packages/ui/src/camel-utils/camel-to-table.adapter.ts b/packages/ui/src/camel-utils/camel-to-table.adapter.ts
@@ -23,17 +23,18 @@ export const camelComponentPropertiesToTable = (
     if (filter && !fullFillFilter(value, filter)) continue;
     propertiesRows.push({
       name: key,
-      group: value.group,
       description: value.description,
       default: value.defaultValue,
       type: value.javaType.substring(value.javaType.lastIndexOf('.') + 1),
-      required: value.required,
+      rowAdditionalInfo: {
+        required: value.required,
+        group: value.group
+      }
     });
   }
   return {
     headers: [
       PropertiesHeaders.Name,
-      PropertiesHeaders.Group,
       PropertiesHeaders.Description,
       PropertiesHeaders.Default,
       PropertiesHeaders.Type,
@@ -57,6 +58,7 @@ export const camelComponentApisToTable = (
       name: key,
       description: value.description,
       type: getApiType(value.consumerOnly, value.producerOnly),
+      rowAdditionalInfo: {}
     });
   }
   return {
@@ -76,8 +78,10 @@ export const camelProcessorPropertiesToTable = (
       name: key,
       default: value.defaultValue,
       type: value.javaType.substring(value.javaType.lastIndexOf('.') + 1),
-      required: value.required,
       description: value.description,
+      rowAdditionalInfo: {
+        required: value.required,
+      }
     });
   }
   return {
@@ -103,8 +107,10 @@ export const kameletToPropertiesTable = (
         description: value.description,
         type: value.type,
         default: value.default,
-        required: requiredProperties.includes(key),
         example: value.example,
+        rowAdditionalInfo: {
+          required: requiredProperties.includes(key)
+        }
       });
     }
   }

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts b/packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts
@@ -1,25 +1,25 @@
 export const enum PropertiesHeaders {
   Property = 'property',
   Name = 'name',
-  Group = 'group',
-  Type = 'type',
-  Kind = 'kind',
-  Default = 'default',
-  Required = 'required',
   Description = 'description',
+  Default = 'default',
+  Type = 'type',
   Example = 'example',
 }
 
+export interface IPropertiesRowAdditionalInfo {
+  required?: boolean,
+  group?: string,
+}
+
 export interface IPropertiesRow {
   property?: string;
   name: string;
-  group?: string;
   description: string;
   default?: string;
   type: string;
-  kind?: string;
-  required?: boolean;
   example?: string;
+  rowAdditionalInfo: IPropertiesRowAdditionalInfo
 }
 
 export type IPropertiesTable = {

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.scss b/packages/ui/src/components/PropertiesModal/PropertiesModal.scss
@@ -1,3 +1,7 @@
 .properties-modal {
     .pf-v5-c-table__th { text-transform: capitalize; }
+    .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="group"] { font-weight: normal; }
 }
diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.test.tsx
@@ -39,7 +39,7 @@ describe('Component tile', () => {
         },
         hostname: {
           kind: 'parameter',
-          group: 'common',
+          group: 'advanced',
           required: false,
           javaType: 'java.lang.String',
           defaultValue: 'http',
@@ -93,14 +93,12 @@ describe('Component tile', () => {
     expect(screen.getByTestId('tab-0')).toHaveTextContent('Component Options (1)');
     // headers
     expect(screen.getByTestId('tab-0-table-0-header-name')).toHaveTextContent('name');
-    expect(screen.getByTestId('tab-0-table-0-header-group')).toHaveTextContent('group');
     expect(screen.getByTestId('tab-0-table-0-header-description')).toHaveTextContent('description');
     expect(screen.getByTestId('tab-0-table-0-header-default')).toHaveTextContent('default');
     expect(screen.getByTestId('tab-0-table-0-header-type')).toHaveTextContent('type');
 
     // rows
-    expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('bridgeErrorHandler');
-    expect(screen.getByTestId('tab-0-table-0-row-0-cell-group')).toHaveTextContent('common');
+    expect(screen.getByTestId('tab-0-table-0-row-0-cell-name')).toHaveTextContent('bridgeErrorHandler (common)');
     expect(screen.getByTestId('tab-0-table-0-row-0-cell-description')).toHaveTextContent(
       'Required Allows for bridging the consumer to the Camel',
     );
@@ -113,13 +111,11 @@ describe('Component tile', () => {
     expect(screen.getByTestId('tab-1-table-0-properties-modal-table-caption')).toHaveTextContent('path parameters (1)');
     //headers
     expect(screen.getByTestId('tab-1-table-0-header-name')).toHaveTextContent('name');
-    expect(screen.getByTestId('tab-1-table-0-header-group')).toHaveTextContent('group');
     expect(screen.getByTestId('tab-1-table-0-header-description')).toHaveTextContent('description');
     expect(screen.getByTestId('tab-1-table-0-header-default')).toHaveTextContent('default');
     expect(screen.getByTestId('tab-1-table-0-header-type')).toHaveTextContent('type');
     //rows
-    expect(screen.getByTestId('tab-1-table-0-row-0-cell-name')).toHaveTextContent('name');
-    expect(screen.getByTestId('tab-1-table-0-row-0-cell-group')).toHaveTextContent('common');
+    expect(screen.getByTestId('tab-1-table-0-row-0-cell-name')).toHaveTextContent('name (common)');
     expect(screen.getByTestId('tab-1-table-0-row-0-cell-description')).toHaveTextContent('Required Name of component');
     expect(screen.getByTestId('tab-1-table-0-row-0-cell-default')).toHaveTextContent('');
     expect(screen.getByTestId('tab-1-table-0-row-0-cell-type')).toHaveTextContent('String');
@@ -130,13 +126,11 @@ describe('Component tile', () => {
     );
     //headers
     expect(screen.getByTestId('tab-1-table-1-header-name')).toHaveTextContent('name');
-    expect(screen.getByTestId('tab-1-table-1-header-group')).toHaveTextContent('group');
     expect(screen.getByTestId('tab-1-table-1-header-description')).toHaveTextContent('description');
     expect(screen.getByTestId('tab-1-table-1-header-default')).toHaveTextContent('default');
     expect(screen.getByTestId('tab-1-table-1-header-type')).toHaveTextContent('type');
     //rows
-    expect(screen.getByTestId('tab-1-table-1-row-0-cell-name')).toHaveTextContent('hostname');
-    expect(screen.getByTestId('tab-1-table-1-row-0-cell-group')).toHaveTextContent('common');
+    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',
     );
@@ -147,13 +141,11 @@ describe('Component tile', () => {
     expect(screen.getByTestId('tab-2')).toHaveTextContent('Message Headers (1)');
     //headers
     expect(screen.getByTestId('tab-2-table-0-header-name')).toHaveTextContent('name');
-    expect(screen.getByTestId('tab-2-table-0-header-group')).toHaveTextContent('group');
     expect(screen.getByTestId('tab-2-table-0-header-description')).toHaveTextContent('description');
     expect(screen.getByTestId('tab-2-table-0-header-default')).toHaveTextContent('default');
     expect(screen.getByTestId('tab-2-table-0-header-type')).toHaveTextContent('type');
     //rows
-    expect(screen.getByTestId('tab-2-table-0-row-0-cell-name')).toHaveTextContent('CamelAsteriskEventName');
-    expect(screen.getByTestId('tab-2-table-0-row-0-cell-group')).toHaveTextContent('producer');
+    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',
     );

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesTable.tsx b/packages/ui/src/components/PropertiesModal/PropertiesTable.tsx
@@ -27,9 +27,14 @@ export const PropertiesTable: FunctionComponent<IPropertiesTableProps> = (props)
             <Tr data-testid={props.rootDataTestId + '-row-' + index} key={index}>
               {table.headers.map((header) => (
                 <Td data-testid={props.rootDataTestId + '-row-' + index + '-cell-' + header} key={index + header} dataLabel={header} modifier="wrap">
-                  { header == PropertiesHeaders.Description && row.required
-                        ?  <p><strong>Required</strong> {row[header]?.toString()}</p>
-                        :  <p>{row[header]?.toString()}</p>
+                  { //suffix if needed
+                    (header == PropertiesHeaders.Description && row.rowAdditionalInfo.required) ? <span data-label="required">Required </span> : ""
+                  }
+                  {
+                    <span>{row[header]?.toString()}</span>
+                  }
+                  { //prefix if needed
+                    (header == PropertiesHeaders.Name && row.rowAdditionalInfo.group) ? <span data-label="group"> ({row.rowAdditionalInfo.group})</span> : ""
                   }
                 </Td>
               ))}

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesTabs.tsx b/packages/ui/src/components/PropertiesModal/PropertiesTabs.tsx
@@ -10,7 +10,7 @@ interface IPropertiesTabsProps {
 export const PropertiesTabs: FunctionComponent<IPropertiesTabsProps> = (props) => {
   const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   const handleTabClick = (
-    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    _event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
     tabIndex: string | number,
   ) => {
     setActiveTabKey(tabIndex);