[Temp]: Rework how to add new Entities to the canvas

fix: KaotoIO#1030

packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx

@@ -56,7 +56,7 @@ const selectedNode: CanvasNode = {
           },
         } as VisualComponentSchema;
       },
-      getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson.route),
+      getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
     } as IVisualizationNode,
   },
 };
@@ -79,7 +79,7 @@ const unknownSelectedNode: CanvasNode = {
           definition: null,
         } as VisualComponentSchema;
       },
-      getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson.route),
+      getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
     } as IVisualizationNode,
   },
 };

packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx

@@ -2,41 +2,42 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { CamelRouteResource, KameletResource } from '../../../models/camel';
 import { CamelRouteVisualEntity } from '../../../models/visualization/flows';
-import { EntitiesContext } from '../../../providers';
 import { CatalogModalContext } from '../../../providers/catalog-modal.provider';
-import { VisibleFLowsContextResult, VisibleFlowsContext } from '../../../providers/visible-flows.provider';
+import { VisibleFLowsContextResult } from '../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../stubs';
 import { camelRouteJson } from '../../../stubs/camel-route';
 import { kameletJson } from '../../../stubs/kamelet-route';
 import { Canvas } from './Canvas';
 
 describe('Canvas', () => {
-  const entity = new CamelRouteVisualEntity(camelRouteJson.route);
+  const entity = new CamelRouteVisualEntity(camelRouteJson);
   const entity2 = { ...entity, id: 'route-9999' } as CamelRouteVisualEntity;
 
   it('should render correctly', async () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { Provider } = TestProvidersWrapper({
+      visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+    });
     const result = render(
-      <TestProvidersWrapper
-        visibleFlows={{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult}
-      >
+      <Provider>
         <Canvas entities={[entity]} />
-      </TestProvidersWrapper>,
+      </Provider>,
     );
 
     await waitFor(async () => expect(result.container.querySelector('#fit-to-screen')).toBeInTheDocument());
     expect(result.container).toMatchSnapshot();
   });
 
   it('should render correctly with more routes ', async () => {
+    const { Provider } = TestProvidersWrapper({
+      visibleFlowsContext: {
+        visibleFlows: { ['route-8888']: true, ['route-9999']: false },
+      } as unknown as VisibleFLowsContextResult,
+    });
     const result = render(
-      <TestProvidersWrapper
-        visibleFlows={
-          { visibleFlows: { ['route-8888']: true, ['route-9999']: false } } as unknown as VisibleFLowsContextResult
-        }
-      >
+      <Provider>
         <Canvas entities={[entity, entity2]} />
-      </TestProvidersWrapper>,
+      </Provider>,
     );
 
     await waitFor(async () => expect(result.container.querySelector('#fit-to-screen')).toBeInTheDocument());
@@ -45,34 +46,23 @@ describe('Canvas', () => {
 
   it('should be able to delete the routes', async () => {
     const camelResource = new CamelRouteResource(camelRouteJson);
-    const routeEntity = camelResource.getVisualEntities();
+    const routeEntities = camelResource.getVisualEntities();
     const removeSpy = jest.spyOn(camelResource, 'removeEntity');
-    const setCurrentSchemaTypeSpy = jest.fn();
-    const updateEntitiesFromCamelResourceSpy = jest.fn();
-    const updateSourceCodeFromEntitiesSpy = jest.fn();
-
-    render(
-      <EntitiesContext.Provider
-        value={{
-          camelResource,
-          entities: camelResource.getEntities(),
-          visualEntities: camelResource.getVisualEntities(),
-          currentSchemaType: camelResource.getType(),
-          setCurrentSchemaType: setCurrentSchemaTypeSpy,
-          updateEntitiesFromCamelResource: updateEntitiesFromCamelResourceSpy,
-          updateSourceCodeFromEntities: updateSourceCodeFromEntitiesSpy,
-        }}
-      >
-        <VisibleFlowsContext.Provider
-          value={{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult}
-        >
-          <Canvas entities={routeEntity} />
-        </VisibleFlowsContext.Provider>
-      </EntitiesContext.Provider>,
+
+    const { Provider } = TestProvidersWrapper({
+      camelResource,
+      visibleFlowsContext: {
+        visibleFlows: { ['route-8888']: true },
+      } as unknown as VisibleFLowsContextResult,
+    });
+    const wrapper = render(
+      <Provider>
+        <Canvas entities={routeEntities} />
+      </Provider>,
     );
 
     // Right click anywhere on the container label
-    const route = screen.getByText('route-8888');
+    const route = wrapper.getByText('route-8888');
     await act(async () => {
       fireEvent.contextMenu(route);
     });
@@ -92,34 +82,24 @@ describe('Canvas', () => {
 
   it('should be able to delete the kamelets', async () => {
     const kameletResource = new KameletResource(kameletJson);
-    const kameletEntity = kameletResource.getVisualEntities();
+    const kameletEntities = kameletResource.getVisualEntities();
     const removeSpy = jest.spyOn(kameletResource, 'removeEntity');
-    const setCurrentSchemaTypeSpy = jest.fn();
-    const updateEntitiesFromCamelResourceSpy = jest.fn();
-    const updateSourceCodeFromEntitiesSpy = jest.fn();
-
-    render(
-      <EntitiesContext.Provider
-        value={{
-          camelResource: kameletResource,
-          entities: kameletResource.getEntities(),
-          visualEntities: kameletResource.getVisualEntities(),
-          currentSchemaType: kameletResource.getType(),
-          setCurrentSchemaType: setCurrentSchemaTypeSpy,
-          updateEntitiesFromCamelResource: updateEntitiesFromCamelResourceSpy,
-          updateSourceCodeFromEntities: updateSourceCodeFromEntitiesSpy,
-        }}
-      >
-        <VisibleFlowsContext.Provider
-          value={{ visibleFlows: { ['user-source']: true } } as unknown as VisibleFLowsContextResult}
-        >
-          <Canvas entities={kameletEntity} />
-        </VisibleFlowsContext.Provider>
-      </EntitiesContext.Provider>,
+
+    const { Provider } = TestProvidersWrapper({
+      camelResource: kameletResource,
+      visibleFlowsContext: {
+        visibleFlows: { ['user-source']: true },
+      } as unknown as VisibleFLowsContextResult,
+    });
+
+    const wrapper = render(
+      <Provider>
+        <Canvas entities={kameletEntities} />
+      </Provider>,
     );
 
     // Right click anywhere on the container label
-    const kamelet = screen.getByText('user-source');
+    const kamelet = wrapper.getByText('user-source');
     // const route = document.querySelectorAll('.pf-topology__group');
     await act(async () => {
       fireEvent.contextMenu(kamelet);
@@ -138,13 +118,14 @@ describe('Canvas', () => {
   });
 
   it('should render the Catalog button if `CatalogModalContext` is provided', async () => {
+    const { Provider } = TestProvidersWrapper({
+      visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+    });
     const result = render(
       <CatalogModalContext.Provider value={{ getNewComponent: jest.fn(), setIsModalOpen: jest.fn() }}>
-        <TestProvidersWrapper
-          visibleFlows={{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult}
-        >
+        <Provider>
           <Canvas entities={[entity]} />
-        </TestProvidersWrapper>
+        </Provider>
       </CatalogModalContext.Provider>,
     );
 
@@ -156,23 +137,27 @@ describe('Canvas', () => {
 
   describe('Empty state', () => {
     it('should render empty state when there is no visual entity', async () => {
+      const { Provider } = TestProvidersWrapper({
+        visibleFlowsContext: { visibleFlows: {} } as unknown as VisibleFLowsContextResult,
+      });
       const result = render(
-        <TestProvidersWrapper visibleFlows={{ visibleFlows: {} } as unknown as VisibleFLowsContextResult}>
+        <Provider>
           <Canvas entities={[]} />
-        </TestProvidersWrapper>,
+        </Provider>,
       );
 
       await waitFor(async () => expect(result.getByTestId('visualization-empty-state')).toBeInTheDocument());
       expect(result.container).toMatchSnapshot();
     });
 
     it('should render empty state when there is no visible flows', async () => {
+      const { Provider } = TestProvidersWrapper({
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: false } } as unknown as VisibleFLowsContextResult,
+      });
       const result = render(
-        <TestProvidersWrapper
-          visibleFlows={{ visibleFlows: { ['route-8888']: false } } as unknown as VisibleFLowsContextResult}
-        >
+        <Provider>
           <Canvas entities={[entity]} />
-        </TestProvidersWrapper>,
+        </Provider>,
       );
 
       await waitFor(async () => expect(result.getByTestId('visualization-empty-state')).toBeInTheDocument());

packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx

@@ -84,7 +84,7 @@ describe('CanvasForm', () => {
   });
 
   beforeEach(() => {
-    camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson.route);
+    camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
     const { nodes } = CanvasService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[2]; // choice
   });
@@ -112,7 +112,7 @@ describe('CanvasForm', () => {
       data: {
         vizNode: {
           getComponentSchema: () => undefined,
-          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson.route),
+          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
         } as unknown as IVisualizationNode,
       },
     };
@@ -141,7 +141,7 @@ describe('CanvasForm', () => {
       data: {
         vizNode: {
           getComponentSchema: () => visualComponentSchema,
-          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson.route),
+          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
         } as unknown as IVisualizationNode,
       },
     };
@@ -172,7 +172,7 @@ describe('CanvasForm', () => {
       data: {
         vizNode: {
           getComponentSchema: () => visualComponentSchema,
-          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson.route),
+          getBaseEntity: () => new CamelRouteVisualEntity(camelRouteJson),
         } as unknown as IVisualizationNode,
       },
     };

packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.tsx

@@ -3,29 +3,39 @@ import { FunctionComponent, useContext } from 'react';
 import { sourceSchemaConfig } from '../../../models/camel';
 import { EntitiesContext } from '../../../providers/entities.provider';
 import './ContextToolbar.scss';
+import { DSLSelector } from './DSLSelector/DSLSelector';
 import { FlowClipboard } from './FlowClipboard/FlowClipboard';
 import { FlowExportImage } from './FlowExportImage/FlowExportImage';
-import { NewFlow } from '../EmptyState/FlowType/NewFlow';
 import { FlowsMenu } from './Flows/FlowsMenu';
+import { NewEntity } from './NewEntity/NewEntity';
 
 export const ContextToolbar: FunctionComponent = () => {
   const { currentSchemaType } = useContext(EntitiesContext)!;
+  const isMultipleRoutes = sourceSchemaConfig.config[currentSchemaType].multipleRoute;
 
-  return [
-    <ToolbarItem className="current-dsl-tag" key="toolbar-current-dsl">
-      <span data-testid="toolbar-current-dsl">{sourceSchemaConfig.config[currentSchemaType].name || 'None'}</span>
+  const toolbarItems: JSX.Element[] = [
+    <ToolbarItem key="toolbar-dsl-selector">
+      <DSLSelector />
     </ToolbarItem>,
     <ToolbarItem key="toolbar-flows-list">
       <FlowsMenu />
     </ToolbarItem>,
-    <ToolbarItem key="toolbar-new-route">
-      <NewFlow />
-    </ToolbarItem>,
+  ];
+
+  if (isMultipleRoutes) {
+    toolbarItems.push(
+      <ToolbarItem key="toolbar-new-route">
+        <NewEntity />
+      </ToolbarItem>,
+    );
+  }
+
+  return toolbarItems.concat([
     <ToolbarItem key="toolbar-clipboard">
       <FlowClipboard />
     </ToolbarItem>,
     <ToolbarItem key={'toolbar-export-image'}>
       <FlowExportImage />
     </ToolbarItem>,
-  ];
+  ]);
 };

packages/ui/src/components/Visualization/ContextToolbar/DSLSelector/DSLSelector.test.tsx

@@ -1,9 +1,7 @@
 import { act, fireEvent, render } from '@testing-library/react';
-import { EntitiesContextResult } from '../../../../hooks';
 import { KaotoSchemaDefinition } from '../../../../models';
 import { SourceSchemaType, sourceSchemaConfig } from '../../../../models/camel';
-import { EntitiesContext } from '../../../../providers/entities.provider';
-import { SourceCodeApiContext } from '../../../../providers/source-code.provider';
+import { TestProvidersWrapper } from '../../../../stubs';
 import { DSLSelector } from './DSLSelector';
 
 describe('DSLSelector.tsx', () => {
@@ -25,28 +23,14 @@ describe('DSLSelector.tsx', () => {
     schema: { name: 'route', description: 'desc' } as KaotoSchemaDefinition['schema'],
   } as KaotoSchemaDefinition;
 
-  const renderWithContext = () => {
-    return render(
-      <SourceCodeApiContext.Provider
-        value={{
-          setCodeAndNotify: jest.fn(),
-        }}
-      >
-        <EntitiesContext.Provider
-          value={
-            {
-              currentSchemaType: SourceSchemaType.Integration,
-            } as unknown as EntitiesContextResult
-          }
-        >
-          <DSLSelector />
-        </EntitiesContext.Provider>
-      </SourceCodeApiContext.Provider>,
+  it('should render all of the types', async () => {
+    const { Provider } = TestProvidersWrapper();
+    const wrapper = render(
+      <Provider>
+        <DSLSelector />
+      </Provider>,
     );
-  };
 
-  it('should render all of the types', async () => {
-    const wrapper = renderWithContext();
     const trigger = await wrapper.findByTestId('dsl-list-dropdown');
 
     /** Open Select */
@@ -61,7 +45,13 @@ describe('DSLSelector.tsx', () => {
   });
 
   it('should warn the user when adding a different type of flow', async () => {
-    const wrapper = renderWithContext();
+    const { Provider } = TestProvidersWrapper();
+    const wrapper = render(
+      <Provider>
+        <DSLSelector />
+      </Provider>,
+    );
+
     const trigger = await wrapper.findByTestId('dsl-list-dropdown');
 
     /** Open Select */