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: KaotoIO#1462
prerequisite of: KaotoIO#1699

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',

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(() => {

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

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,

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.',
     });
   });

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.',
                   });

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.',
     });
   });

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,

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;
 

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,
 }
 `;
 

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);

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', () => {

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;
   }

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');
     });
   });
 

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;
   }

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');
     });
   });