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 · 097f219 · 097f219
1 parent 9b7cd80
commit 097f219
Show file tree

Hide file tree

Showing 35 changed files with 604 additions and 134 deletions.
diff --git a/packages/ui-tests/stories/canvas/Aggregate.stories.tsx b/packages/ui-tests/stories/canvas/Aggregate.stories.tsx
@@ -31,10 +31,10 @@ const selectedNode: CanvasNode = {
       previousNode: undefined,
       label: 'test',
       getId: () => 'aggregate-6839',
+      getTitle: () => 'Aggregate',
       getOmitFormFields: () => [],
       getComponentSchema: () => {
         return {
-          title: 'aggregate',
           schema: {
             title: 'Aggregate',
             description: 'Aggregates many messages into a single message',

diff --git a/packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx b/packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx
@@ -34,10 +34,10 @@ const selectedNode: CanvasNode = {
       previousNode: undefined,
       label: 'test',
       getId: () => 'log-sink-6839',
+      getTitle: () => 'My Node',
       getOmitFormFields: () => [],
       getComponentSchema: () => {
         return {
-          title: 'My Node',
           schema: {
             type: 'object',
             properties: {
@@ -76,6 +76,7 @@ const unknownSelectedNode: CanvasNode = {
         icon: NodeIconResolver.getIcon(''),
       } as IVisualizationNodeData,
       getId: () => 'test',
+      getTitle: () => '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
@@ -12,7 +12,6 @@ import {
 import { Meta, StoryFn } from '@storybook/react';
 
 const visualComponentSchema: VisualComponentSchema = {
-  title: 'My Node',
   schema: {
     type: 'object',
     properties: {
@@ -37,6 +36,7 @@ const mockNode: CanvasNode = {
   type: 'node',
   data: {
     vizNode: {
+      getTitle: () => '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
@@ -13,7 +13,6 @@ import {
 import { Meta, StoryFn } from '@storybook/react';
 
 const visualComponentSchema: VisualComponentSchema = {
-  title: 'My Node',
   schema: {
     type: 'object',
     properties: {
@@ -39,6 +38,7 @@ const mockNode: CanvasNode = {
   type: 'node',
   data: {
     vizNode: {
+      getTitle: () => 'My Node',
       getComponentSchema: () => visualComponentSchema,
     } as IVisualizationNode,
   },

diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
@@ -19,7 +19,6 @@ describe('DataFormatEditor', () => {
     CamelCatalogService.setCatalogKey(CatalogKind.Dataformat, catalogsMap.dataformatCatalog);
 
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {
@@ -53,7 +52,6 @@ describe('DataFormatEditor', () => {
 
   it('should render with only the user updated fields', () => {
     const visualComponentSchema: VisualComponentSchema = {
-      title: 'My Node',
       schema: {
         type: 'object',
         properties: {
@@ -95,7 +93,6 @@ describe('DataFormatEditor', () => {
 
   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/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"
                           >