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 · 6838f60 · 6838f60
1 parent ae8bfa4
commit 6838f60
Show file tree

Hide file tree

Showing 29 changed files with 169 additions and 227 deletions.
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/__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.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', () => {

diff --git a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts
@@ -78,6 +78,10 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     return errorHandlerId;
   }
 
+  getNodeTitle(): string {
+    return 'Error Handler';
+  }
+
   getTooltipContent(): string {
     return 'errorHandler';
   }
@@ -139,7 +143,6 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     errorHandlerGroupNode.data.entity = this;
     errorHandlerGroupNode.data.isGroup = true;
     errorHandlerGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
-    errorHandlerGroupNode.setTitle('Error Handler');
 
     return errorHandlerGroupNode;
   }

diff --git a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts
@@ -206,7 +206,7 @@ describe('CamelRestConfigurationVisualEntity', () => {
       const entity = new CamelRestConfigurationVisualEntity(restConfigurationDef);
       const vizNode = entity.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Rest Configuration');
+      expect(vizNode.getNodeTitle()).toEqual('Rest Configuration');
     });
   });
 

diff --git a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts
@@ -61,6 +61,10 @@ export class CamelRestConfigurationVisualEntity implements BaseVisualCamelEntity
     return 'restConfiguration';
   }
 
+  getNodeTitle(): string {
+    return 'Rest Configuration';
+  }
+
   getTooltipContent(): string {
     return 'restConfiguration';
   }
@@ -131,7 +135,6 @@ export class CamelRestConfigurationVisualEntity implements BaseVisualCamelEntity
     restConfigurationGroupNode.data.entity = this;
     restConfigurationGroupNode.data.isGroup = true;
     restConfigurationGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
-    restConfigurationGroupNode.setTitle('Rest Configuration');
 
     return restConfigurationGroupNode;
   }

diff --git a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts
@@ -215,7 +215,7 @@ describe('CamelRouteConfigurationVisualEntity', () => {
       const entity = new CamelRouteConfigurationVisualEntity(routeConfigurationDef);
       const vizNode = entity.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Route Configuration');
+      expect(vizNode.getNodeTitle()).toEqual('Route Configuration');
     });
   });
 

diff --git a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts
@@ -86,6 +86,14 @@ export class CamelRouteConfigurationVisualEntity
     return super.getTooltipContent(path);
   }
 
+  getNodeLabel(path?: string): string {
+    if (path === this.getRootPath()) {
+      return 'Route Configuration';
+    }
+
+    return super.getNodeLabel(path);
+  }
+
   getComponentSchema(path?: string | undefined): VisualComponentSchema | undefined {
     if (path === this.getRootPath()) {
       const schema = CamelCatalogService.getComponent(CatalogKind.Entity, 'routeConfiguration');
@@ -150,7 +158,6 @@ export class CamelRouteConfigurationVisualEntity
       icon: NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity),
       processorName: this.getRootPath(),
     });
-    routeConfigurationGroupNode.setTitle('Route Configuration');
 
     CamelComponentSchemaService.getProcessorStepsProperties(this.getRootPath() as keyof ProcessorDefinition).forEach(
       (stepsProperty) => {

diff --git a/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts
@@ -2,7 +2,6 @@ import { ProcessorDefinition, RouteDefinition } from '@kaoto/camel-catalog/types
 import { cloneDeep } from 'lodash';
 import { camelFromJson } from '../../../stubs/camel-from';
 import { camelRouteJson } from '../../../stubs/camel-route';
-import { ROOT_PATH } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
 import { NodeLabelType } from '../../settings/settings.model';
@@ -197,7 +196,7 @@ describe('Camel Route', () => {
   });
 
   describe('toVizNode', () => {
-    it(`should return the group viz node and set the initial path to '${ROOT_PATH}'`, () => {
+    it(`should return the group viz node and set the initial path to '${CamelRouteVisualEntity.ROOT_PATH}'`, () => {
       const vizNode = camelEntity.toVizNode();
 
       expect(vizNode).toBeDefined();

diff --git a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts
@@ -161,7 +161,7 @@ describe('KameletVisualEntity', () => {
       const kamelet = new KameletVisualEntity(kameletDef);
       const vizNode = kamelet.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Kamelet');
+      expect(vizNode.getNodeTitle()).toEqual('Kamelet');
     });
   });
 });