feat(CanvasForm): Use component Title in CanvasForm

Currently, the component name is being used as the title in the `CanvasForm`. This commit uses the corresponding `Title` property if available from components, eips and kamelets, and the `ID` as a last resort. fix: #1462 prerequisite of: #1699
KaotoIO · Dec 16, 2024 · a68039a · a68039a
1 parent ae8bfa4
commit a68039a
Show file tree

Hide file tree

Showing 37 changed files with 201 additions and 241 deletions.
diff --git a/packages/ui-tests/.storybook/main.ts b/packages/ui-tests/.storybook/main.ts
@@ -47,6 +47,13 @@ const config: StorybookConfig = {
         __GIT_DATE: JSON.stringify('1970-01-01T00:00:00Z'),
         __KAOTO_VERSION: JSON.stringify(packageJson.version),
       },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            api: 'modern-compiler',
+          },
+        },
+      },
     };
   },
 };

diff --git a/packages/ui-tests/stories/canvas/Aggregate.stories.tsx b/packages/ui-tests/stories/canvas/Aggregate.stories.tsx
@@ -33,7 +33,7 @@ const selectedNode: CanvasNode = {
       previousNode: undefined,
       label: 'test',
       getId: () => 'aggregate-6839',
-      getTitle: () => 'Aggregate',
+      getNodeTitle: () => 'Aggregate',
       getOmitFormFields: () => [],
       getComponentSchema: () => {
         return {

diff --git a/packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx b/packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx
@@ -35,7 +35,7 @@ const selectedNode: CanvasNode = {
       previousNode: undefined,
       label: 'test',
       getId: () => 'log-sink-6839',
-      getTitle: () => 'My Node',
+      getNodeTitle: () => 'My Node',
       getOmitFormFields: () => [],
       getComponentSchema: () => {
         return {
@@ -77,7 +77,7 @@ const unknownSelectedNode: CanvasNode = {
         icon: NodeIconResolver.getIcon(''),
       } as IVisualizationNodeData,
       getId: () => 'test',
-      getTitle: () => 'My Node',
+      getNodeTitle: () => 'My Node',
       getOmitFormFields: () => [],
       getComponentSchema: () => {
         return {

diff --git a/packages/ui-tests/stories/metadataEditor/DataformatEditor.stories.tsx b/packages/ui-tests/stories/metadataEditor/DataformatEditor.stories.tsx
@@ -36,7 +36,7 @@ const mockNode: CanvasNode = {
   type: 'node',
   data: {
     vizNode: {
-      getTitle: () => 'My Node',
+      getNodeTitle: () => 'My Node',
       getComponentSchema: () => visualComponentSchema,
       updateModel: (_value: unknown) => {},
     } as IVisualizationNode,

diff --git a/packages/ui-tests/stories/metadataEditor/ExpressionEditor.stories.tsx b/packages/ui-tests/stories/metadataEditor/ExpressionEditor.stories.tsx
@@ -38,7 +38,7 @@ const mockNode: CanvasNode = {
   type: 'node',
   data: {
     vizNode: {
-      getTitle: () => 'My Node',
+      getNodeTitle: () => 'My Node',
       getComponentSchema: () => visualComponentSchema,
     } as IVisualizationNode,
   },

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -23,7 +23,6 @@ import {
 import { EntitiesContext, EntitiesProvider } from '../../../../providers/entities.provider';
 import { camelRouteJson, kameletJson } from '../../../../stubs';
 import { getFirstCatalogMap } from '../../../../stubs/test-load-catalog';
-import { ROOT_PATH } from '../../../../utils';
 import { CanvasNode } from '../canvas.models';
 import { FlowService } from '../flow.service';
 import { CanvasForm } from './CanvasForm';
@@ -77,7 +76,7 @@ describe('CanvasForm', () => {
 
   it('should render nothing if no schema is available', () => {
     const vizNode = createVisualizationNode('route', {
-      path: ROOT_PATH,
+      path: CamelRouteVisualEntity.ROOT_PATH,
       entity: new CamelRouteVisualEntity(camelRouteJson),
       isGroup: true,
       processorName: 'route',
@@ -113,7 +112,7 @@ describe('CanvasForm', () => {
     };
 
     const vizNode = createVisualizationNode('route', {
-      path: ROOT_PATH,
+      path: CamelRouteVisualEntity.ROOT_PATH,
       entity: new CamelRouteVisualEntity(camelRouteJson),
       isGroup: true,
       processorName: 'route',

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
@@ -18,7 +18,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, o
   const { visualFlowsApi } = useContext(VisibleFlowsContext)!;
   const flowIdRef = useRef<string | undefined>(undefined);
   const vizNode = selectedNode.data?.vizNode;
-  const title = vizNode?.getTitle();
+  const title = vizNode?.getNodeTitle();
 
   /** Store the flow's initial Id */
   useEffect(() => {

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`CanvasForm should render 1`] = `
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              log
+              Logger
             </h2>
           </div>
           <div
@@ -305,7 +305,7 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              route
+              Route
             </h2>
           </div>
           <div
@@ -561,7 +561,7 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = `
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              route
+              Route
             </h2>
           </div>
           <div

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
@@ -49,7 +49,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "child2",
             },
           ],
           "data": {
@@ -59,10 +58,8 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "group",
         },
         "previousNode": undefined,
-        "title": "child1",
       },
     },
     "height": 75,
@@ -118,7 +115,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "child1",
             },
             [Circular],
           ],
@@ -129,10 +125,8 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "group",
         },
         "previousNode": undefined,
-        "title": "child2",
       },
     },
     "height": 75,
@@ -177,7 +171,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child1",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -196,7 +189,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child2",
           },
         ],
         "data": {
@@ -206,7 +198,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "group",
       },
     },
     "group": true,
@@ -296,15 +287,13 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when-leaf",
                   },
                 ],
                 "data": {},
                 "id": "when-1234",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
               },
               VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -347,23 +336,20 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
                       },
                     ],
                     "data": {},
                     "id": "process-1234",
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "process",
                   },
                 ],
                 "data": {},
                 "id": "otherwise-1234",
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
               },
             ],
             "data": {},
@@ -385,19 +371,15 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": [Circular],
-              "title": "direct",
             },
             "parentNode": undefined,
             "previousNode": [Circular],
-            "title": "choice",
           },
           "parentNode": undefined,
           "previousNode": [Circular],
-          "title": "set-header",
         },
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,
@@ -443,7 +425,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,
@@ -491,15 +472,13 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child",
           },
         ],
         "data": {},
         "id": "node-1234",
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
@@ -126,7 +126,7 @@ describe('FlowsList.tsx', () => {
     });
 
     expect(mockDeleteModalContext.actionConfirmation).toHaveBeenCalledWith({
-      title: "Do you want to delete the 'route-1234' route?",
+      title: "Do you want to delete the 'route-1234' Route?",
       text: 'All steps will be lost.',
     });
   });

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
@@ -144,7 +144,7 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                       "Do you want to delete the '" +
                       flow.toVizNode().getId() +
                       "' " +
-                      flow.toVizNode().getTitle() +
+                      flow.toVizNode().getNodeTitle() +
                       '?',
                     text: 'All steps will be lost.',
                   });

diff --git a/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx b/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx
@@ -44,7 +44,7 @@ describe('ItemDeleteGroup', () => {
     fireEvent.click(wrapper.getByText('Delete'));
 
     expect(mockDeleteModalContext.actionConfirmation).toHaveBeenCalledWith({
-      title: "Do you want to delete the 'undefined' test?",
+      title: "Do you want to delete the 'undefined' test-1234?",
       text: 'All steps will be lost.',
     });
   });

diff --git a/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx b/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx
@@ -24,7 +24,7 @@ export const useDeleteGroup = (vizNode: IVisualizationNode) => {
     const buttonOptions = modalCustoms.length > 0 ? modalCustoms[0].buttonOptions : undefined;
     /** Open delete confirm modal, get the confirmation  */
     const modalAnswer = await deleteModalContext?.actionConfirmation({
-      title: "Do you want to delete the '" + vizNode.getId() + "' " + vizNode.getTitle() + '?',
+      title: "Do you want to delete the '" + vizNode.getId() + "' " + vizNode.getNodeTitle() + '?',
       text: 'All steps will be lost.',
       additionalModalText,
       buttonOptions,

diff --git a/packages/ui/src/models/visualization/base-visual-entity.ts b/packages/ui/src/models/visualization/base-visual-entity.ts
@@ -24,6 +24,9 @@ export interface BaseVisualCamelEntity extends BaseCamelEntity {
   /** Given a path, get the component label */
   getNodeLabel: (path?: string, labelType?: NodeLabelType) => string;
 
+  /** Given a path, get the component title from the catalog */
+  getNodeTitle: (path?: string) => string;
+
   /** Given a path, get the component tooltip content */
   getTooltipContent: (path?: string) => string;
 
@@ -83,11 +86,8 @@ export interface IVisualizationNode<T extends IVisualizationNodeData = IVisualiz
   /** This method returns the tooltip content to be used by the canvas nodes */
   getTooltipContent(): string;
 
-  /** This method set the title used by the CanvasForm component */
-  setTitle(title: string): void;
-
   /** This method returns the title used by the CanvasForm component */
-  getTitle(): string;
+  getNodeTitle(): string;
 
   addBaseEntityStep(definedComponent: DefinedComponent, mode: AddStepMode, targetProperty?: string): void;
 

diff --git a/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap b/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap
@@ -4,12 +4,12 @@ exports[`Pipe getNodeInteraction should return the correct interaction for the '
 {
   "canBeDisabled": false,
   "canHaveChildren": false,
-  "canHaveNextStep": false,
-  "canHavePreviousStep": false,
+  "canHaveNextStep": true,
+  "canHavePreviousStep": true,
   "canHaveSpecialChildren": false,
-  "canRemoveFlow": true,
-  "canRemoveStep": false,
-  "canReplaceStep": false,
+  "canRemoveFlow": false,
+  "canRemoveStep": true,
+  "canReplaceStep": true,
 }
 `;
 

diff --git a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
@@ -1,6 +1,6 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { SchemaService } from '../../../components/Form/schema.service';
-import { getArrayProperty, getValue, setValue } from '../../../utils';
+import { camelCaseToSpaces, getArrayProperty, getValue, setValue } from '../../../utils';
 import { NodeIconResolver, NodeIconType } from '../../../utils/node-icon-resolver';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { EntityType } from '../../camel/entities';
@@ -56,6 +56,21 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     return label;
   }
 
+  getNodeTitle(path?: string): string {
+    if (!path) return '';
+    if (path === this.getRootPath()) {
+      return camelCaseToSpaces(this.getRootPath(), { capitalize: true });
+    }
+
+    const componentModel = getValue(this.entityDef, path);
+
+    const title = CamelComponentSchemaService.getNodeTitle(
+      CamelComponentSchemaService.getCamelComponentLookup(path, componentModel),
+    );
+
+    return title;
+  }
+
   getTooltipContent(path?: string): string {
     if (!path) return '';
     const componentModel = getValue(this.entityDef, path);

diff --git a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts
@@ -174,7 +174,7 @@ describe('CamelErrorHandlerVisualEntity', () => {
     const entity = new CamelErrorHandlerVisualEntity(errorHandlerDef);
     const vizNode = entity.toVizNode();
 
-    expect(vizNode.getTitle()).toEqual('Error Handler');
+    expect(vizNode.getNodeTitle()).toEqual('Error Handler');
   });
 
   it('should serialize the errorHandler definition', () => {