feat(CanvasForm): Use component Title in CanvasForm

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

packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepRemoval.cy.ts

@@ -33,8 +33,8 @@ describe('Tests for Design page', () => {
     cy.checkCodeSpanLine('json-deserialize-action', 0);
     cy.checkCodeSpanLine('kafka-source', 0);
     cy.checkCodeSpanLine('kafka-sink', 0);
-    cy.checkCodeSpanLine('source: {}', 1);
-    cy.checkCodeSpanLine('sink: {}', 1);
+    cy.checkCodeSpanLine('source: {}', 0);
+    cy.checkCodeSpanLine('sink: {}', 0);
   });
 
   it('In an integration with at least two steps, user can not delete the from step', () => {

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 {

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 {

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,

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

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/camel/kamelet-resource.ts

@@ -1,5 +1,5 @@
-import { set } from 'lodash';
 import { TileFilter } from '../../components/Catalog/Catalog.models';
+import { setValue } from '../../utils';
 import { IKameletDefinition } from '../kamelets-catalog';
 import { AddStepMode } from '../visualization/base-visual-entity';
 import { CamelComponentFilterService } from '../visualization/flows/support/camel-component-filter.service';
@@ -61,9 +61,9 @@ export class KameletResource extends CamelKResource implements RouteTemplateBean
      * and this way the kamelet definition is updated when the user interacts with
      * the CamelRouteVisualEntity.
      */
-    set(this.resource, 'metadata.name', this.flow.getId());
-    set(this.resource, 'spec.template.from', this.flow.entityDef.template.from);
-    set(this.resource, 'spec.template.beans', this.beans?.parent.beans);
+    setValue(this.resource, 'metadata.name', this.flow.getId());
+    setValue(this.resource, 'spec.template.from', this.flow.entityDef.template.from);
+    setValue(this.resource, 'spec.template.beans', this.beans?.parent.beans);
     return this.resource as IKameletDefinition;
   }
 

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