chore: Split properties switch into generalized function

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

@@ -27,3 +27,8 @@ export type IPropertiesTable = {
   rows: IPropertiesRow[];
   caption?: string;
 };
+
+export interface IPropertiesTab {
+  rootName: string;
+  tables: IPropertiesTable[];
+}

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

@@ -8,111 +8,137 @@ import {
 } from '../../camel-utils/camel-to-table.adapter';
 import { CatalogKind, ICamelComponentDefinition, ICamelProcessorDefinition, IKameletDefinition } from '../../models';
 import { ITile } from '../Catalog';
-import './PropertiesModal.scss';
-import { IPropertiesTab, PropertiesTabs } from './PropertiesTabs';
 import { EmptyTableState } from './EmptyTableState';
-import { IPropertiesTable } from './PropertiesModal.models';
+import { IPropertiesTab } from './PropertiesModal.models';
+import './PropertiesModal.scss';
+import { PropertiesTabs } from './PropertiesTabs';
+import { transformPropertiesIntoTab } from './camel-properties-to-tab';
 
 interface IPropertiesModalProps {
   tile: ITile;
   onClose: () => void;
   isModalOpen: boolean;
 }
 
-// TODO change this horrible switch
-const prepareDataForTabs = (tile: ITile): IPropertiesTab[] => {
-  let tabs: IPropertiesTab[] = [];
-  switch (tile.type) {
-    case CatalogKind.Component: {
-      // component properties
-      let table = camelComponentPropertiesToTable((tile.rawObject as ICamelComponentDefinition).componentProperties);
-      if (table.rows.length != 0) {
-        tabs.push({
-          rootName: 'Component Options (' + table.rows.length + ')',
-          tables: [table],
-        });
-      }
+const transformCamelComponentIntoTab = (
+  tabsToRender: IPropertiesTab[],
+  componentDef: ICamelComponentDefinition,
+): void => {
+  let tab = transformPropertiesIntoTab(
+    [
+      {
+        transformFunction: camelComponentPropertiesToTable,
+        propertiesObject: componentDef.componentProperties,
+      },
+    ],
+    'Component Options',
+  );
+  if (tab) tabsToRender.push(tab);
 
+  // properties, contains 2 subtables divided according to Kind
+  tab = transformPropertiesIntoTab(
+    [
+      {
+        transformFunction: camelComponentPropertiesToTable,
+        propertiesObject: componentDef.properties,
+        filter: {
+          filterKey: 'kind',
+          filterValue: 'path',
+        },
+        tableCaption: 'path parameters',
+      },
+      {
+        transformFunction: camelComponentPropertiesToTable,
+        propertiesObject: componentDef.properties,
+        filter: {
+          filterKey: 'kind',
+          filterValue: 'parameter',
+        },
+        tableCaption: 'query parameters',
+      },
+    ],
+    'Endpoint Options',
+  );
+  if (tab) tabsToRender.push(tab);
 
-      let subTables: IPropertiesTable[] = [];
-      let subTablesRows = 0
-      // properties, only if exists
-      let subTable = camelComponentPropertiesToTable((tile.rawObject as ICamelComponentDefinition).properties, {
-        filterKey: 'kind',
-        filterValue: 'path',
-      });
-      subTable.caption = 'path parameters (' + subTable.rows.length + ')';
-      if (subTable.rows.length != 0) {
-        subTablesRows += subTable.rows.length
-        subTables.push(subTable)
-      }
-      subTable = camelComponentPropertiesToTable((tile.rawObject as ICamelComponentDefinition).properties, {
-        filterKey: 'kind',
-        filterValue: 'parameter',
-      });
-      subTable.caption = 'query parameters (' + subTable.rows.length + ')';
-      if (subTable.rows.length != 0) {
-        subTablesRows += subTable.rows.length
-        subTables.push(subTable)
-      }
-      if (subTables.length != 0) {
-        tabs.push({
-          rootName: 'Endpoint Options (' + subTablesRows + ')',
-          tables: subTables,
-        });
-      }
+  // headers, only if exists
+  if (componentDef.headers) {
+    let tab = transformPropertiesIntoTab(
+      [
+        {
+          transformFunction: camelComponentPropertiesToTable,
+          propertiesObject: componentDef.headers!,
+        },
+      ],
+      'Message Headers',
+    );
+    if (tab) tabsToRender.push(tab);
+  }
 
-      // headers, only if exists
-      if ((tile.rawObject as ICamelComponentDefinition).headers) {
-        table = camelComponentPropertiesToTable((tile.rawObject as ICamelComponentDefinition).headers!);
-        if (table.rows.length != 0) {
-          tabs.push({
-            rootName: 'Message Headers (' + table.rows.length + ')',
-            tables: [table],
-          });
-        }
-      }
+  // apis, only if exists
+  if (componentDef.apis) {
+    let tab = transformPropertiesIntoTab(
+      [
+        {
+          transformFunction: camelComponentApisToTable,
+          propertiesObject: componentDef.apis!,
+        },
+      ],
+      'APIs',
+    );
+    if (tab) tabsToRender.push(tab);
+  }
+};
 
-      // apis, only if exists
-      if ((tile.rawObject as ICamelComponentDefinition).apis) {
-        table = camelComponentApisToTable((tile.rawObject as ICamelComponentDefinition).apis!);
-        if (table.rows.length != 0) {
-          tabs.push({
-            rootName: 'APIs (' + table.rows.length + ')',
-            tables: [table],
-          });
-        }
-      }
+const transformCamelProcessorComponentIntoTab = (
+  tabsToRender: IPropertiesTab[],
+  processorDef: ICamelProcessorDefinition,
+): void => {
+  let tab = transformPropertiesIntoTab(
+    [
+      {
+        transformFunction: camelProcessorPropertiesToTable,
+        propertiesObject: processorDef.properties,
+      },
+    ],
+    'Options',
+  );
+  if (tab) tabsToRender.push(tab);
+};
+
+const transformKameletComponentIntoTab = (tabsToRender: IPropertiesTab[], kameletDef: IKameletDefinition): void => {
+  let tab = transformPropertiesIntoTab(
+    [
+      {
+        transformFunction: kameletToPropertiesTable,
+        propertiesObject: kameletDef,
+      },
+    ],
+    'Options',
+  );
+  if (tab) tabsToRender.push(tab);
+};
+
+export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props) => {
+  let tabs: IPropertiesTab[] = [];
+  switch (props.tile.type) {
+    case CatalogKind.Component: {
+      transformCamelComponentIntoTab(tabs, props.tile.rawObject as ICamelComponentDefinition);
       break;
     }
     case CatalogKind.Processor: {
-      let table = camelProcessorPropertiesToTable((tile.rawObject as ICamelProcessorDefinition).properties);
-      if (table.rows.length != 0) {
-        tabs.push({
-          rootName: 'Options (' + table.rows.length + ')',
-          tables: [table],
-        });
-      }
+      transformCamelProcessorComponentIntoTab(tabs, props.tile.rawObject as ICamelProcessorDefinition);
       break;
     }
     case CatalogKind.Kamelet: {
-      let table = kameletToPropertiesTable(tile.rawObject as IKameletDefinition);
-      if (table.rows.length != 0) {
-        tabs.push({
-          rootName: 'Options (' + table.rows.length + ')',
-          tables: [table],
-        });
-      }
+      transformKameletComponentIntoTab(tabs, props.tile.rawObject as IKameletDefinition);
+
       break;
     }
     default:
-      throw Error('Unknown CatalogKind during rendering modal: ' + tile.type);
+      throw Error('Unknown CatalogKind during rendering modal: ' + props.tile.type);
   }
-  return tabs;
-};
 
-export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props) => {
-  let tabs: IPropertiesTab[] = prepareDataForTabs(props.tile);
   return (
     <Modal
       className="properties-modal"

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

@@ -1,13 +1,7 @@
 import { Tab, Tabs } from '@patternfly/react-core';
-import { FunctionComponent, useState } from 'react';
-import { IPropertiesTable } from './PropertiesModal.models';
+import React, { FunctionComponent, useState } from 'react';
+import { IPropertiesTab } from './PropertiesModal.models';
 import { PropertiesTable } from './PropertiesTable';
-import React from 'react';
-
-export interface IPropertiesTab {
-  rootName: string;
-  tables: IPropertiesTable[];
-}
 
 interface IPropertiesTabsProps {
   tabs: IPropertiesTab[];

packages/ui/src/components/PropertiesModal/camel-properties-to-tab.ts

@@ -0,0 +1,40 @@
+import { IPropertiesTableFilter } from '../../camel-utils/camel-to-table.adapter';
+import { IPropertiesTab, IPropertiesTable } from './PropertiesModal.models';
+
+interface IPropertiesTransformToTable {
+  transformFunction: (properties: any, filter?: IPropertiesTableFilter) => IPropertiesTable;
+  propertiesObject: any;
+  tableCaption?: string;
+  filter?: IPropertiesTableFilter;
+}
+
+/**
+ * This function transforms properties data (from camel-component, camel-processor, kamelets) into one or more tables which are added into the final IPropertiesTab.
+ *
+ * @param transformationsData object which contains function which is used for transfromation properties object into IPropertiesTable, optionally filter and table caption
+ * @param tabTitle - Title of the Tab
+ * @returns Tab data which will be use for rendering one Tab
+ */
+export const transformPropertiesIntoTab = (
+  transformationsData: IPropertiesTransformToTable[],
+  tabTitle: string,
+): IPropertiesTab | undefined => {
+  let tables = [];
+  for (let transformationData of transformationsData) {
+    let table = transformationData.transformFunction(transformationData.propertiesObject, transformationData.filter);
+    if (table.rows.length == 0) continue; // we don't care about empty table
+    if (transformationData.tableCaption)
+      table.caption = transformationData.tableCaption + ' (' + table.rows.length + ')';
+    tables.push(table);
+  }
+  if (tables.length == 0) return undefined;
+
+  let allRowsInAllTables = 0;
+  tables.forEach((table) => {
+    allRowsInAllTables += table.rows.length;
+  });
+  return {
+    rootName: tabTitle + ' (' + allRowsInAllTables + ')',
+    tables: tables,
+  };
+};