From c6f877c44dcf4763b53259fe7437c5c36d1e0e4f Mon Sep 17 00:00:00 2001 From: tplevko Date: Mon, 1 Jul 2024 09:51:14 +0200 Subject: [PATCH] fix(KTO-441): option to display the ID instead of the description as step label --- packages/ui/src/assets/settingsSchema.json | 7 + .../__snapshots__/SettingsForm.test.tsx.snap | 137 ++++++++++++++++++ .../Visualization/Custom/CustomNode.tsx | 6 +- .../ui/src/models/settings/settings.model.ts | 2 + .../visualization/base-visual-entity.ts | 4 +- .../flows/abstract-camel-visual-entity.ts | 3 +- .../support/camel-component-schema.service.ts | 4 +- .../visualization/visualization-node.ts | 4 +- .../settings.provider.test.tsx.snap | 2 +- 9 files changed, 159 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/assets/settingsSchema.json b/packages/ui/src/assets/settingsSchema.json index c35bde104..932b93d44 100644 --- a/packages/ui/src/assets/settingsSchema.json +++ b/packages/ui/src/assets/settingsSchema.json @@ -10,6 +10,13 @@ "default": "", "type": "string", "format": "uri" + }, + "nodeLabel": { + "title": "Node label to display in canvas", + "description": "Node label, which will be used for nodes in the canvas. Can be either `description` or `id`. If `description` is selected, it will be displayed only if it is available, otherwise `id` will be displayed by default.", + "default": "description", + "type": "string", + "enum": ["description", "id"] } } } diff --git a/packages/ui/src/components/Settings/__snapshots__/SettingsForm.test.tsx.snap b/packages/ui/src/components/Settings/__snapshots__/SettingsForm.test.tsx.snap index 8f6e6c3f1..d2a06f6d5 100644 --- a/packages/ui/src/components/Settings/__snapshots__/SettingsForm.test.tsx.snap +++ b/packages/ui/src/components/Settings/__snapshots__/SettingsForm.test.tsx.snap @@ -94,6 +94,143 @@ exports[`SettingsForm should render 1`] = ` +
+
+ + +
+ +
+
+
+
+
+
+ + + +
+
+ +
+
+ +
+
+
`; diff --git a/packages/ui/src/components/Visualization/Custom/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/CustomNode.tsx index 15f6a9ca7..429d25e89 100644 --- a/packages/ui/src/components/Visualization/Custom/CustomNode.tsx +++ b/packages/ui/src/components/Visualization/Custom/CustomNode.tsx @@ -14,7 +14,7 @@ import { withSelection, } from '@patternfly/react-topology'; import clsx from 'clsx'; -import { FunctionComponent, ReactElement } from 'react'; +import { FunctionComponent, ReactElement, useContext } from 'react'; import { AddStepMode } from '../../../models/visualization/base-visual-entity'; import { CanvasDefaults } from '../Canvas/canvas.defaults'; import { CanvasNode } from '../Canvas/canvas.models'; @@ -26,6 +26,7 @@ import { ItemDisableStep } from './ItemDisableStep'; import { ItemInsertStep } from './ItemInsertStep'; import { ItemReplaceStep } from './ItemReplaceStep'; import { doTruncateLabel } from '../../../utils/truncate-label'; +import { SettingsContext } from '../../../providers'; interface CustomNodeProps extends WithSelectionProps { element: Node; @@ -34,7 +35,8 @@ const noopFn = () => {}; const CustomNode: FunctionComponent = observer(({ element, ...rest }) => { const vizNode = element.getData()?.vizNode; - const label = vizNode?.getNodeLabel(); + const settingsAdapter = useContext(SettingsContext); + const label = vizNode?.getNodeLabel(settingsAdapter.getSettings().nodeLabel); const isDisabled = !!vizNode?.getComponentSchema()?.definition?.disabled; const tooltipContent = vizNode?.getTooltipContent(); const statusDecoratorTooltip = vizNode?.getNodeValidationText(); diff --git a/packages/ui/src/models/settings/settings.model.ts b/packages/ui/src/models/settings/settings.model.ts index 878cb5365..57c6721e5 100644 --- a/packages/ui/src/models/settings/settings.model.ts +++ b/packages/ui/src/models/settings/settings.model.ts @@ -1,9 +1,11 @@ const DEFAULT_SETTINGS: SettingsModel = { catalogUrl: '', + nodeLabel: 'description', }; export class SettingsModel { catalogUrl: string = ''; + nodeLabel: string = ''; constructor(options: Partial = {}) { Object.assign(this, DEFAULT_SETTINGS, options); diff --git a/packages/ui/src/models/visualization/base-visual-entity.ts b/packages/ui/src/models/visualization/base-visual-entity.ts index 9cb096619..b9a52ef0a 100644 --- a/packages/ui/src/models/visualization/base-visual-entity.ts +++ b/packages/ui/src/models/visualization/base-visual-entity.ts @@ -18,7 +18,7 @@ export interface BaseVisualCamelEntity extends BaseCamelEntity { setId: (id: string) => void; /** Given a path, get the component label */ - getNodeLabel: (path?: string) => string; + getNodeLabel: (path?: string, labelType?: string) => string; /** Given a path, get the component tooltip content */ getTooltipContent: (path?: string) => string; @@ -75,7 +75,7 @@ export interface IVisualizationNode implements Bas return this.id; } - getNodeLabel(path?: string): string { + getNodeLabel(path?: string, labelType?: string): string { if (!path) return ''; const componentModel = getValue(this.route, path); const label = CamelComponentSchemaService.getNodeLabel( CamelComponentSchemaService.getCamelComponentLookup(path, componentModel), componentModel, + labelType, ); return label; diff --git a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts index 6a297811c..04bedc20e 100644 --- a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts +++ b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts @@ -66,8 +66,8 @@ export class CamelComponentSchemaService { } // eslint-disable-next-line @typescript-eslint/no-explicit-any - static getNodeLabel(camelElementLookup: ICamelElementLookupResult, definition?: any): string { - if (typeof definition?.description === 'string' && definition.description !== '') { + static getNodeLabel(camelElementLookup: ICamelElementLookupResult, definition?: any, labelType?: string): string { + if (typeof definition?.description === 'string' && labelType !== 'id' && definition.description !== '') { return definition.description; } diff --git a/packages/ui/src/models/visualization/visualization-node.ts b/packages/ui/src/models/visualization/visualization-node.ts index 864d1891f..5249da5ef 100644 --- a/packages/ui/src/models/visualization/visualization-node.ts +++ b/packages/ui/src/models/visualization/visualization-node.ts @@ -44,8 +44,8 @@ class VisualizationNode - {"catalogUrl":""} + {"catalogUrl":"","nodeLabel":"description"}

`;