diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts b/packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts index 5e2755374..f08dcb541 100644 --- a/packages/ui/src/components/PropertiesModal/PropertiesModal.models.ts +++ b/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[]; +} diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx index 687d1b9dc..3c15fe120 100644 --- a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx +++ b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx @@ -8,10 +8,11 @@ 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; @@ -19,100 +20,125 @@ interface IPropertiesModalProps { 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 = (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 = (props) => { - let tabs: IPropertiesTab[] = prepareDataForTabs(props.tile); return ( 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, + }; +};