feat(CanvasForm): Add title API

Currently, there's no mechanism for setting the Canvas Form title per component. This commit adds that possibility.
KaotoIO · Sep 17, 2024 · dc3f4a1 · dc3f4a1
1 parent 9b7cd80
commit dc3f4a1
Show file tree

Hide file tree

Showing 30 changed files with 599 additions and 127 deletions.
diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
@@ -18,7 +18,6 @@ describe('LoadBalancerEditor', () => {
     CamelCatalogService.setCatalogKey(CatalogKind.Loadbalancer, loadbalancerCatalog);
 
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {
@@ -54,7 +53,6 @@ describe('LoadBalancerEditor', () => {
 
   it('should render with only the user updated fields', () => {
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {
@@ -96,7 +94,6 @@ describe('LoadBalancerEditor', () => {
 
   it('should render with only the Required fields', () => {
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {

diff --git a/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx b/packages/ui/src/components/Form/stepExpression/StepExpressionEditor.test.tsx
@@ -18,7 +18,6 @@ describe('StepExpressionEditor', () => {
     CamelCatalogService.setCatalogKey(CatalogKind.Language, languageCatalog);
 
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {
@@ -52,7 +51,6 @@ describe('StepExpressionEditor', () => {
 
   it('should render with only the user updated fields', () => {
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -24,9 +24,9 @@ import { EntitiesContext, EntitiesProvider } from '../../../../providers/entitie
 import { camelRouteJson, kameletJson } from '../../../../stubs';
 import { getFirstCatalogMap } from '../../../../stubs/test-load-catalog';
 import { ROOT_PATH } from '../../../../utils';
-import { CanvasForm } from './CanvasForm';
 import { CanvasNode } from '../canvas.models';
 import { FlowService } from '../flow.service';
+import { CanvasForm } from './CanvasForm';
 
 describe('CanvasForm', () => {
   let camelRouteVisualEntity: CamelRouteVisualEntity;
@@ -104,7 +104,6 @@ describe('CanvasForm', () => {
 
   it('should render nothing if no schema and no definition is available', () => {
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: null as unknown as KaotoSchemaDefinition['schema'],
       definition: null,
     };
@@ -137,39 +136,6 @@ describe('CanvasForm', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should update the parameters object if null', () => {
-    const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
-      schema: null as unknown as KaotoSchemaDefinition['schema'],
-      definition: {
-        parameters: null,
-      },
-    };
-
-    const selectedNode: CanvasNode = {
-      id: '1',
-      type: 'node',
-      data: {
-        vizNode: {
-          getComponentSchema: () => visualComponentSchema,
-          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
-          getId: () => 'route-8888',
-          getOmitFields: () => [],
-        } as unknown as IVisualizationNode,
-      },
-    };
-
-    render(
-      <EntitiesContext.Provider value={null}>
-        <VisibleFlowsProvider>
-          <CanvasForm selectedNode={selectedNode} />
-        </VisibleFlowsProvider>
-      </EntitiesContext.Provider>,
-    );
-
-    expect(visualComponentSchema.definition.parameters).toEqual({});
-  });
-
   it("should serialize empty strings `''` as `undefined`", async () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
@@ -1,5 +1,5 @@
 import { Card, CardBody, CardHeader } from '@patternfly/react-core';
-import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { FunctionComponent, useCallback, useContext, useEffect, useRef } from 'react';
 import { VisibleFlowsContext } from '../../../../providers';
 import { ErrorBoundary } from '../../../ErrorBoundary';
 import { CanvasNode } from '../canvas.models';
@@ -16,16 +16,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, o
   const { visualFlowsApi } = useContext(VisibleFlowsContext)!;
   const flowIdRef = useRef<string | undefined>(undefined);
   const vizNode = selectedNode.data?.vizNode;
-
-  const visualComponentSchema = useMemo(() => {
-    const answer = vizNode?.getComponentSchema();
-    // Overriding parameters with an empty object When the parameters property is mistakenly set to null
-    if (answer?.definition?.parameters === null) {
-      answer!.definition.parameters = {};
-    }
-    return answer;
-  }, [vizNode]);
-  const title = visualComponentSchema?.title;
+  const title = vizNode?.getTitle();
 
   /** 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
@@ -314,7 +314,7 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              My Node
+              route
             </h2>
           </div>
           <div
@@ -578,7 +578,9 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = `
               data-ouia-component-id="OUIA-Generated-Title-2"
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
-            />
+            >
+              route
+            </h2>
           </div>
           <div
             class="pf-v5-l-grid__item pf-m-1-col"

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -687,7 +687,7 @@ exports[`Canvas should render correctly 1`] = `
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -1099,7 +1099,7 @@ exports[`Canvas should render correctly 1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                           >
@@ -1414,7 +1414,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -1826,7 +1826,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             </g>
                           </g>
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                           >
@@ -2141,7 +2141,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                           data-layer-id="groups"
                         >
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                             transform="translate(0, 0)"
@@ -2553,7 +2553,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             </g>
                           </g>
                           <g
-                            data-id="route-8888-1234"
+                            data-id="route-1234"
                             data-kind="node"
                             data-type="group"
                           >

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
@@ -51,6 +51,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nodeInteraction": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
+              "title": "child2",
             },
           ],
           "data": {
@@ -61,8 +62,10 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nodeInteraction": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
+          "title": "group",
         },
         "previousNode": undefined,
+        "title": "child1",
       },
     },
     "height": 75,
@@ -120,6 +123,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nodeInteraction": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
+              "title": "child1",
             },
             [Circular],
           ],
@@ -131,8 +135,10 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nodeInteraction": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
+          "title": "group",
         },
         "previousNode": undefined,
+        "title": "child2",
       },
     },
     "height": 75,
@@ -178,6 +184,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nodeInteraction": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
+            "title": "child1",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -197,6 +204,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nodeInteraction": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
+            "title": "child2",
           },
         ],
         "data": {
@@ -207,6 +215,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         "nodeInteraction": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
+        "title": "group",
       },
     },
     "group": true,
@@ -297,6 +306,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     "nodeInteraction": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
+                    "title": "when-leaf",
                   },
                 ],
                 "data": {},
@@ -305,6 +315,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                 "nodeInteraction": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
+                "title": "when",
               },
               VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -348,6 +359,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                         "nodeInteraction": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
+                        "title": "log",
                       },
                     ],
                     "data": {},
@@ -356,6 +368,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     "nodeInteraction": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
+                    "title": "process",
                   },
                 ],
                 "data": {},
@@ -364,6 +377,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                 "nodeInteraction": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
+                "title": "otherwise",
               },
             ],
             "data": {},
@@ -386,18 +400,22 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
               "nodeInteraction": undefined,
               "parentNode": undefined,
               "previousNode": [Circular],
+              "title": "direct",
             },
             "nodeInteraction": undefined,
             "parentNode": undefined,
             "previousNode": [Circular],
+            "title": "choice",
           },
           "nodeInteraction": undefined,
           "parentNode": undefined,
           "previousNode": [Circular],
+          "title": "set-header",
         },
         "nodeInteraction": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
+        "title": "node",
       },
     },
     "height": 75,
@@ -444,6 +462,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
         "nodeInteraction": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
+        "title": "node",
       },
     },
     "height": 75,
@@ -492,6 +511,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
             "nodeInteraction": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
+            "title": "child",
           },
         ],
         "data": {},
@@ -500,6 +520,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
         "nodeInteraction": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
+        "title": "node",
       },
     },
     "height": 75,

diff --git a/packages/ui/src/models/visualization/base-visual-entity.ts b/packages/ui/src/models/visualization/base-visual-entity.ts
@@ -80,6 +80,12 @@ 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;
+
   addBaseEntityStep(definedComponent: DefinedComponent, mode: AddStepMode, targetProperty?: string): void;
 
   getNodeInteraction(): NodeInteraction;
@@ -131,7 +137,6 @@ export interface IVisualizationNodeData {
  * the name and the schema of the component.
  */
 export interface VisualComponentSchema {
-  title: string;
   schema: KaotoSchemaDefinition['schema'];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   definition: any;