feat(Canvas): Add new Entities to the canvas

Currently, setting the current DSL and creating a new entity are tied together in a single step in the NewFlow component. This commit split that functionality in two separate buttons: 1. DSL Selector: Meant to choose the current DSL and therefore determine which type of entities can be added into the Canvas 2. NewEntity: This is for adding new entities, supported by the current DSL, or said in a different way, allows to add entities from the current CamelResource registry. The existing functionality from the CanvasEmptyState is preserved for now. In addition to that, when removing all routes, a new route won't be created by default. fix: #1030
KaotoIO · May 2, 2024 · 08c70ad · 08c70ad
1 parent 24f6342
commit 08c70ad
Show file tree

Hide file tree

Showing 30 changed files with 839 additions and 362 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/multiflow/multiFlowDesigner.cy.ts b/packages/ui-tests/cypress/e2e/designer/multiflow/multiFlowDesigner.cy.ts
@@ -5,11 +5,11 @@ describe('Test for Multi route actions from the canvas', () => {
 
   it('User changes route type in the canvas', () => {
     cy.switchIntegrationType('Kamelet');
-    cy.get('[data-testid="toolbar-current-dsl"]').contains('Kamelet');
+    cy.get('[data-testid="dsl-list-dropdown"]').contains('Kamelet');
     cy.switchIntegrationType('camelYamlDsl');
-    cy.get('[data-testid="toolbar-current-dsl"]').contains('Camel Route');
+    cy.get('[data-testid="dsl-list-dropdown"]').contains('Camel Route');
     cy.switchIntegrationType('Pipe');
-    cy.get('[data-testid="toolbar-current-dsl"]').contains('Pipe');
+    cy.get('[data-testid="dsl-list-dropdown"]').contains('Pipe');
   });
 
   it('User shows and hides a route', () => {
@@ -55,8 +55,7 @@ describe('Test for Multi route actions from the canvas', () => {
     cy.checkCodeSpanLine('id: route-1234', 0);
   });
 
-  // Blocked ATM by https://github.com/KaotoIO/kaoto/issues/301
-  it.skip('User deletes routes in the canvas till there are no routes', () => {
+  it('User deletes routes in the canvas till there are no routes', () => {
     cy.openDesignPage();
     cy.addNewRoute();
     cy.addNewRoute();
@@ -67,13 +66,17 @@ describe('Test for Multi route actions from the canvas', () => {
     cy.deleteRoute(0);
     cy.deleteRoute(0);
     cy.deleteRoute(0);
+
+    cy.toggleFlowsList();
+
     cy.get('[data-testid^="rf__node-node_0"]').should('have.length', 0);
-    cy.get('[data-testid="flows-list-empty-state"]').should('have.length', 1);
-    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '0/0');
 
-    cy.get('[data-testid="flows-list-empty-state"]').within(() => {
-      cy.get('h4.pf-c-title').should('have.text', "There's no routes to show");
+    cy.get('[data-testid="flows-list-route-count"]').should('have.text', '0/0');
+    cy.get('#flows-list-select').within(() => {
+      cy.get('h4.pf-v5-c-empty-state__title-text').should('have.text', "There's no routes to show");
     });
+
+    cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
   });
 
   const testData = ['Pipe', 'Kamelet'];
@@ -83,7 +86,7 @@ describe('Test for Multi route actions from the canvas', () => {
       cy.switchIntegrationType(data);
       cy.get('[data-testid="dsl-list-dropdown"]').click({ force: true });
       cy.get('.pf-v5-c-menu__item-text').contains(data).closest('button').should('be.disabled');
-      cy.get('[data-testid="dsl-list-btn"]').should('be.disabled');
+      cy.get('[data-testid="new-entity-list-dropdown"]').should('not.exist');
 
       cy.get('[data-testid="flows-list-route-count"]').should('have.text', '1/1');
     });
@@ -94,6 +97,7 @@ describe('Test for Multi route actions from the canvas', () => {
     cy.deleteRoute(0);
     cy.addNewRoute();
     cy.addNewRoute();
+    cy.addNewRoute();
 
     cy.showAllRoutes();
     cy.get('[data-id^="log"]').should('have.length', 3);

diff --git a/packages/ui-tests/cypress/support/next-commands/default.ts b/packages/ui-tests/cypress/support/next-commands/default.ts
@@ -64,7 +64,8 @@ Cypress.Commands.add('switchIntegrationType', (type: string) => {
 });
 
 Cypress.Commands.add('addNewRoute', () => {
-  cy.get('[data-testid="dsl-list-btn"]').click();
+  cy.get('[data-testid="new-entity-list-dropdown"]').click();
+  cy.get('[data-testid="new-entity-route"]').click();
 });
 
 Cypress.Commands.add('toggleRouteVisibility', (index) => {

diff --git a/packages/ui-tests/stories/canvas/Canvas.stories.tsx b/packages/ui-tests/stories/canvas/Canvas.stories.tsx
@@ -39,8 +39,8 @@ const emptyCamelRouteJson = {
   },
 };
 
-const camelRouteEntity = new CamelRouteVisualEntity(complexRouteMock.route);
-const emptyCamelRouteEntity = new CamelRouteVisualEntity(emptyCamelRouteJson.route);
+const camelRouteEntity = new CamelRouteVisualEntity(complexRouteMock);
+const emptyCamelRouteEntity = new CamelRouteVisualEntity(emptyCamelRouteJson);
 const pipeEntity = new PipeVisualEntity(pipeJson.spec!);
 const kameletEntity = new KameletVisualEntity(kameletJson);
 const emptyPipeEntity = new PipeVisualEntity(emptyPipeJson.spec!);

diff --git a/packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx b/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,
   },
 };

diff --git a/packages/ui-tests/stories/canvas/ContextToolbar.stories.tsx b/packages/ui-tests/stories/canvas/ContextToolbar.stories.tsx
@@ -3,30 +3,36 @@ import {
   CatalogSchemaLoader,
   CatalogTilesProvider,
   ContextToolbar,
-  EntitiesContext,
+  EntitiesProvider,
   SchemasLoaderProvider,
-  SourceCodeContext,
+  SourceCodeApiContext,
+  SourceCodeProvider,
   VisibleFlowsProvider,
+  camelRouteYaml,
+  kameletYaml,
+  pipeYaml,
 } from '@kaoto/kaoto/testing';
 import { Divider, Toolbar, ToolbarContent, ToolbarGroup } from '@patternfly/react-core';
 import { Meta, StoryFn } from '@storybook/react';
-import camelRouteMock from '../../cypress/fixtures/camelRouteMock.json';
-
-const EntitiesContextDecorator = (Story: StoryFn) => (
-  <SourceCodeContext.Provider value={{ sourceCode: '', setCodeAndNotify: () => {} }}>
-    <EntitiesContext.Provider value={camelRouteMock}>
-      <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-        <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-          <CatalogTilesProvider>
-            <VisibleFlowsProvider>
-              <Story />
-            </VisibleFlowsProvider>
-          </CatalogTilesProvider>
-        </CatalogLoaderProvider>
-      </SchemasLoaderProvider>
-    </EntitiesContext.Provider>
-  </SourceCodeContext.Provider>
-);
+import { useContext } from 'react';
+
+const EntitiesContextDecorator = (Story: StoryFn) => {
+  return (
+    <SourceCodeProvider>
+      <EntitiesProvider>
+        <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+          <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+            <CatalogTilesProvider>
+              <VisibleFlowsProvider>
+                <Story />
+              </VisibleFlowsProvider>
+            </CatalogTilesProvider>
+          </CatalogLoaderProvider>
+        </SchemasLoaderProvider>
+      </EntitiesProvider>
+    </SourceCodeProvider>
+  );
+};
 
 export default {
   title: 'Canvas/ContextToolbar',
@@ -37,7 +43,10 @@ export default {
   },
 } as Meta<typeof ContextToolbar>;
 
-const Template: StoryFn<typeof ContextToolbar> = () => {
+const Template: StoryFn<{ sourceCode: string }> = (props: { sourceCode: string }) => {
+  const sourceCodeApi = useContext(SourceCodeApiContext);
+  sourceCodeApi.setCodeAndNotify(props.sourceCode);
+
   return (
     <Toolbar>
       <ToolbarContent>
@@ -49,4 +58,23 @@ const Template: StoryFn<typeof ContextToolbar> = () => {
     </Toolbar>
   );
 };
+
 export const Default = Template.bind({});
+Default.args = {
+  sourceCode: camelRouteYaml,
+};
+
+export const Kamelet = Template.bind({});
+Kamelet.args = {
+  sourceCode: kameletYaml,
+};
+
+export const Pipe = Template.bind({});
+Pipe.args = {
+  sourceCode: pipeYaml,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  sourceCode: '',
+};