feat(Canvas): Add CustomGroups

As a preparation for adding containers for branches, we need to introduce a new `CustomGroup` component that can render its label on top, among other topics. This commit moves the `CustomGroup` and `CustomNode` to dedicated folders while also reuse the same `NodeContextMenu` component. fix: #368
KaotoIO · Aug 8, 2024 · c7b8e8c · c7b8e8c
1 parent fe03804
commit c7b8e8c
Show file tree

Hide file tree

Showing 38 changed files with 1,274 additions and 800 deletions.
diff --git a/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts b/packages/ui-tests/cypress/e2e/designer/rootContainerConfig/rootContainersConf.cy.ts
@@ -8,24 +8,14 @@ describe('Test for camel route root containers configuration', () => {
     cy.openDesignPage();
     cy.toggleRouteVisibility(1);
 
-    cy.get('[data-id^="route-1234"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .eq(0)
-      .click();
-
-    cy.get('[data-id^="route-4321"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .eq(0)
-      .click();
+    cy.toggleExpandGroup('route-1234');
+    cy.toggleExpandGroup('route-4321');
+
     cy.checkNodeExist('timer', 0);
     cy.checkNodeExist('log', 0);
-    cy.get('[data-id^="route-4321"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .eq(0)
-      .click();
+
+    cy.toggleExpandGroup('route-4321');
+
     cy.checkNodeExist('timer', 1);
     cy.checkNodeExist('log', 1);
   });
@@ -35,11 +25,10 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/camelRoute/multiflow.yaml');
     cy.openDesignPage();
     cy.toggleRouteVisibility(1);
-    cy.get('[data-id^="route-1234"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .click();
+
+    cy.toggleExpandGroup('route-1234');
     cy.toggleRouteVisibility(1);
+
     cy.checkNodeExist('timer', 0);
     cy.checkNodeExist('log', 0);
   });
@@ -48,10 +37,8 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="camel-route"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('camel-route');
+
     cy.interactWithConfigInputObject('description', 'test.description');
     cy.interactWithConfigInputObject('group', 'test.group');
     cy.interactWithConfigInputObject('inputType.description', 'test.inputType.description');
@@ -102,10 +89,7 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/kamelet/basic.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="eip-action"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__label__background')
-      .click();
+    cy.openStepConfigurationTab('eip-action');
 
     cy.interactWithConfigInputObject('name', 'test.name');
     cy.interactWithConfigInputObject('title', 'test.title');
@@ -144,7 +128,7 @@ describe('Test for camel route root containers configuration', () => {
     cy.uploadFixture('flows/pipe/basic.yaml');
     cy.openDesignPage();
 
-    cy.get('[data-id^="pipe"] .pf-topology__group__label text').click({ force: true });
+    cy.openStepConfigurationTab('pipe');
 
     cy.get(`input[name="name"]`).clear();
     cy.get(`input[name="name"]`).type('testName');
@@ -187,23 +171,13 @@ describe('Test for camel route root containers configuration', () => {
     cy.openDesignPage();
     cy.toggleRouteVisibility(1);
 
-    cy.get('[data-id^="route-4321"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .eq(1)
-      .click();
-    cy.get('[data-testid="context-menu-container-remove"]').click();
+    cy.performNodeAction('route-4321', 'container-remove');
     cy.contains('button', 'Cancel').click();
 
     cy.checkNodeExist('timer', 2);
     cy.checkNodeExist('log', 2);
 
-    cy.get('[data-id^="route-4321"]')
-      .find('.pf-topology__group__label')
-      .find('.pf-topology__node__action-icon')
-      .eq(1)
-      .click();
-    cy.get('[data-testid="context-menu-container-remove"]').click();
+    cy.performNodeAction('route-4321', 'container-remove');
     cy.contains('button', 'Confirm').click();
 
     cy.checkNodeExist('timer', 1);

diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -5,7 +5,15 @@
 export {};
 
 declare global {
-  type ActionType = 'append' | 'prepend' | 'replace' | 'insert' | 'insert-special' | 'delete' | 'disable';
+  type ActionType =
+    | 'append'
+    | 'prepend'
+    | 'replace'
+    | 'insert'
+    | 'insert-special'
+    | 'delete'
+    | 'disable'
+    | 'container-remove';
 
   namespace Cypress {
     interface Chainable {
@@ -34,6 +42,7 @@ declare global {
       showAllRoutes(): Chainable<JQuery<Element>>;
       // design
       openStepConfigurationTab(step: string, stepIndex?: number): Chainable<JQuery<Element>>;
+      toggleExpandGroup(groupName: string, groupIndex?: number): Chainable<JQuery<Element>>;
       fitToScreen(): Chainable<JQuery<Element>>;
       closeStepConfigurationTab(): Chainable<JQuery<Element>>;
       removeNodeByName(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
@@ -43,6 +52,7 @@ declare global {
       selectInsertSpecialNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       selectInsertNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       selectPrependNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
+      selectRemoveGroup(groupName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       performNodeAction(nodeName: string, action: ActionType, nodeIndex?: number): Chainable<JQuery<Element>>;
       checkNodeExist(inputName: string, nodesCount: number): Chainable<JQuery<Element>>;
       checkEdgeExists(sourceName: string, targetName: string): Chainable<JQuery<Element>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -7,6 +7,11 @@ Cypress.Commands.add('openStepConfigurationTab', (step: string, stepIndex?: numb
   cy.get(`[data-nodelabel="${step}"]`).eq(stepIndex).click({ force: true });
 });
 
+Cypress.Commands.add('toggleExpandGroup', (groupName: string, groupIndex?: number) => {
+  groupIndex = groupIndex ?? 0;
+  cy.get(`[data-testid="collapseButton-${groupName}"]`).eq(groupIndex).click({ force: true });
+});
+
 Cypress.Commands.add('closeStepConfigurationTab', () => {
   cy.get('[data-testid="close-side-bar"]').click();
   cy.get('.pf-topology-resizable-side-bar').should('not.exist');
@@ -49,6 +54,10 @@ Cypress.Commands.add('selectPrependNode', (nodeName: string, nodeIndex?: number)
   cy.performNodeAction(nodeName, 'prepend', nodeIndex);
 });
 
+Cypress.Commands.add('selectRemoveGroup', (groupName: string, groupIndex?: number) => {
+  cy.performNodeAction(groupName, 'container-remove', groupIndex);
+});
+
 Cypress.Commands.add('chooseFromCatalog', (_nodeType: string, name: string) => {
   cy.get(`input[placeholder="Filter by name, description or tag"]`).click();
   cy.get(`input[placeholder="Filter by name, description or tag"]`).type(name);