feat/wire-up new backend endpoints to support multiple flows (#1823)

With the new endpoints introduced by kaoto-archive/kaoto-backend#638, we could start wiring up the source code editor and the related components to use the multiple flows approach.

Changes
This pull request replaces the previous v1/integrations endpoint with the new v2/integrations endpoint that supports multiple flows.

All the changes were validated against the existing e2e tests to ensure that the previous functionality from the single flow is still in place.

* chore: Fix settings.js e2e test
* chore: Fix editing.cy.js e2e test
* chore: Fix step_integration.cy.js e2e test
* chore: Fix source_code.cy.js e2e test
* chore: Fix deleting_steps.cy.js e2e test
* chore: Fix catalog_actions.cy.js e2e test
* chore: Fix code_editor_actions.cy.js e2e test
* chore: Fix step_actions_from_canvas.cy.js e2e test
* chore: Fix step_extension_actions_from_canvas.cy.js e2e test
* chore: Fix branches_from_canvas.cy.js e2e test
* chore: Fix branches_step_actions_from_canvas.cy.js e2e test
* chore: Fix nested_branches_from_canvas.cy.js e2e test
* chore: Fix nested_branches_step_actions_from_canvas.cy.js e2e test

relates to: #801

cypress/e2e/01-settings/about.cy.js

@@ -1,8 +1,9 @@
 describe('Settings: About', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.openAboutModal();

cypress/e2e/01-settings/appearance.cy.js

@@ -1,8 +1,9 @@
 describe('Settings: Appearance', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
     cy.openAppearanceModal();

cypress/e2e/01-settings/settings.cy.js

@@ -1,8 +1,9 @@
 describe('Settings', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
 
@@ -84,7 +85,7 @@ describe('Settings', () => {
     cy.get('[data-testid="settings--integration-type"]')
       .select('Integration')
       .should('have.value', 'Integration');
-    cy.saveMenuModal(true);
+    cy.saveMenuModal();
     cy.replaceEmptyStepMiniCatalog('timer');
     cy.openSettingsModal();
 
@@ -114,7 +115,7 @@ describe('Settings', () => {
     // CHECK that steps are still there
     cy.get('[data-testid="viz-step-kamelet"]').should('be.visible');
 
-    // reopen modal, 
+    // reopen modal,
     cy.openSettingsModal();
 
     // CHECK that value is still Kamelet

cypress/e2e/02-editing_properties/editing.cy.js

@@ -1,8 +1,9 @@
 describe('editing properties', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
   });

cypress/e2e/03-step_integration/step_integration.cy.js

@@ -1,8 +1,10 @@
 describe('3 step integration', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
+    cy.intercept('/v1/steps/id/*').as('getStepDetails');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
   });

cypress/e2e/04-source_code/source_code.cy.js

@@ -1,8 +1,10 @@
 describe('source code and drag and drop', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
+    cy.intercept('/v1/steps/id/*').as('getStepDetails');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
     cy.uploadFixture('KafkaSourceSink.yaml');

cypress/e2e/05-deleting_steps/deleting_steps.cy.js

@@ -1,8 +1,9 @@
 describe('Test for deleting steps', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
     cy.uploadFixture('ChuckNorris.yaml');

cypress/e2e/06-undo_redo_actions/undo_redo_actions.cy.js

@@ -2,7 +2,7 @@ describe('Test for undo/redo actions on code-editor', () => {
   beforeEach(() => {
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
 

cypress/e2e/07-catalog_actions/catalog_actions.cy.js

@@ -1,8 +1,10 @@
 describe('Test for catalog actions', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
+        cy.intercept('/v1/steps/id/*').as('getStepDetails');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('EipAction.yaml');

cypress/e2e/08-code-editor-actions/code_editor_actions.cy.js

@@ -1,8 +1,9 @@
 describe('editing properties', () => {
   beforeEach(() => {
+    cy.intercept('/v1/deployments*').as('getDeployments');
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations*').as('getIntegration');
+    cy.intercept('/v2/integrations*').as('getIntegration');
 
     cy.openHomePage();
 

cypress/e2e/09-step_actions_from_canvas/step_actions_from_canvas.cy.js

@@ -1,8 +1,9 @@
 describe('Test for Step actions from the canvas', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('TimerLogCamelRoute.yaml');

cypress/e2e/09-step_actions_from_canvas/step_extension_actions_from_canvas.cy.js

@@ -1,8 +1,9 @@
 describe('Test for Step extensions', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('TimerLogCamelRoute.yaml');
@@ -13,8 +14,9 @@ describe('Test for Step extensions', () => {
     it('User sees a step extension(transform)', () => {
         cy.insertStepMiniCatalog('transform');
         cy.openStepConfigurationTab('transform', true);
+        cy.waitExtensionLoaded();
 
-        // CHECK that choice extension elements are visible
+        // CHECK that transform extension elements are visible
         cy.get('[data-testid="expression-syntax-select"]').should('be.visible');
         cy.get('[data-testid="expression-string-input"]').should('be.visible');
         cy.get('[data-testid="transform-apply-button"]').should('be.visible');
@@ -23,6 +25,7 @@ describe('Test for Step extensions', () => {
     it('User configures a step from a step extension (set-header)', () => {
         cy.insertStepMiniCatalog('set-header');
         cy.openStepConfigurationTab('set-header', true);
+        cy.waitExtensionLoaded();
 
         // Fill the step name
         cy.get('[data-testid="set-header-name-input"]').clear().type('test-name');
@@ -43,7 +46,7 @@ describe('Test for Step extensions', () => {
     it('User adds and removes a branch from a step using a step extension', () => {
         cy.insertStepMiniCatalog('choice');
         cy.openStepConfigurationTab('choice', true);
-
+        cy.waitExtensionLoaded();
 
         cy.addBranchChoiceExtension();
         cy.addBranchChoiceExtension();

cypress/e2e/10-branching_actions_from_canvas/branches_from_canvas.cy.js

@@ -1,8 +1,9 @@
 describe('Test for Branching actions from the canvas', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('EipAction.yaml');
@@ -11,7 +12,7 @@ describe('Test for Branching actions from the canvas', () => {
     });
 
     it(' User appends a branch from the canvas', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.appendBranch(0);
@@ -58,7 +59,7 @@ describe('Test for Branching actions from the canvas', () => {
 
         // CHECK new choice step added
         cy.get('.stepNode').eq(1).should('have.attr', 'data-testid', 'viz-step-choice');
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(1);

cypress/e2e/10-branching_actions_from_canvas/branches_step_actions_from_canvas.cy.js

@@ -1,8 +1,10 @@
 describe('User completes normal actions on steps in a branch', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
+        cy.intercept('/v1/steps/id/*').as('getStepDetails');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('EipAction.yaml');

cypress/e2e/10-branching_actions_from_canvas/nested_branches_from_canvas.cy.js

@@ -1,8 +1,9 @@
 describe('Test for Nested Branching actions from the canvas', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('EipAction.yaml');
@@ -11,7 +12,7 @@ describe('Test for Nested Branching actions from the canvas', () => {
     });
 
     it('User inserts/appends a nested branch from the canvas', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(3);
@@ -46,7 +47,7 @@ describe('Test for Nested Branching actions from the canvas', () => {
     })
 
     it('User deletes a branch from the canvas', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(3);
@@ -76,7 +77,7 @@ describe('Test for Nested Branching actions from the canvas', () => {
     });
 
     it('User appends a step in a nested branch from the canvas (last in the branch)', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(3);
@@ -110,7 +111,7 @@ describe('Test for Nested Branching actions from the canvas', () => {
     });
 
     it('User prepends a step in a nested branch from the canvas (first in the branch)', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(3);
@@ -144,7 +145,7 @@ describe('Test for Nested Branching actions from the canvas', () => {
     });
 
     it('User prepends a step to a step whose previous step contains nested branches', () => {
-        // Blocked due to: 
+        // Blocked due to:
         //      https://github.com/KaotoIO/kaoto-ui/issues/1381
         //      https://github.com/KaotoIO/kaoto-ui/issues/1473
         // cy.insertBranch(3);

cypress/e2e/10-branching_actions_from_canvas/nested_branches_step_actions_from_canvas.cy.js

@@ -1,8 +1,10 @@
 describe('User completes normal actions on steps in a branch', () => {
     beforeEach(() => {
+        cy.intercept('/v1/deployments*').as('getDeployments');
+        cy.intercept('/v1/steps/id/*').as('getStepDetails');
         cy.intercept('/v1/integrations/dsls').as('getDSLs');
         cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-        cy.intercept('/v1/integrations*').as('getIntegration');
+        cy.intercept('/v2/integrations*').as('getIntegration');
 
         cy.openHomePage();
         cy.uploadFixture('EipAction.yaml');

cypress/support/kaoto-ui-commands/branches.js

@@ -67,5 +67,5 @@ Cypress.Commands.add('deleteBranchChoiceExtension', (indexOrType) => {
 });
 
 Cypress.Commands.add('waitExtensionLoaded', () => {
-    cy.contains('Loading extension...').should('not.exist');
+    cy.contains('Loading extension...', { timeout: 30_000 }).should('not.exist');
 });

cypress/support/kaoto-ui-commands/default.js

@@ -15,16 +15,19 @@ Cypress.Commands.add('zoomOutXTimes', (times) => {
 
 Cypress.Commands.add('waitVisualizationUpdate', () => {
     cy.get('body').then((body) => {
+        /**
+         * If the code editor is visible, it means that we would need
+         * to wait for the getIntegration call, otherwise, the operation
+         * is synchronous
+         */
         if (body.find('.code-editor').length > 0) {
             cy.wait('@getIntegration');
         }
-        cy.wait('@getDSLs');
-        cy.wait('@getViewDefinitions');
     });
 });
 
 Cypress.Commands.add('waitOpenHomePage', () => {
-    cy.wait('@getDSLs');
+    cy.wait('@getDeployments');
     cy.wait('@getViewDefinitions');
 });
 
@@ -55,15 +58,15 @@ Cypress.Commands.add('openSettingsModal', () => {
 });
 
 Cypress.Commands.add('closeAppearanceModal', () => {
-    cy.get('#pf-modal-part-3 > .pf-c-button').click();
+    cy.get('[data-ouia-component-id="appearance-modal"] > button[aria-label="Close"]').click();
 });
 
 Cypress.Commands.add('closeAboutModal', () => {
     cy.get('.pf-c-button.pf-m-plain').click();
 });
 
 Cypress.Commands.add('closeMenuModal', () => {
-    cy.get('[data-ouia-component-id="OUIA-Generated-Modal-small-2-ModalBoxCloseButton"]').click();
+    cy.get('[data-ouia-component-id="settings-modal"] > button[aria-label="Close"]').click();
 });
 
 Cypress.Commands.add('cancelMenuModal', () => {
@@ -78,6 +81,7 @@ Cypress.Commands.add('saveMenuModal', (integrationChanged) => {
     cy.wait('@getIntegration');
     if (integrationChanged) {
         cy.waitVisualizationUpdate();
+        cy.wait('@getDSLs');
     }
 });
 

cypress/support/kaoto-ui-commands/editor.js

@@ -9,7 +9,6 @@ Cypress.Commands.add('uploadFixture', (fixture, open) => {
     cy.get('.pf-c-code-editor__main').should('be.visible');
     cy.get('.pf-c-code-editor__main > input').attachFile(fixture);
     cy.syncUpCodeChanges();
-    cy.waitVisualizationUpdate();
 });
 
 Cypress.Commands.add('openCodeEditor', () => {
@@ -52,8 +51,8 @@ Cypress.Commands.add('editorClickUndoXTimes', (times) => {
 
 Cypress.Commands.add('syncUpCodeChanges', () => {
     cy.get('[data-testid="sourceCode--applyButton"]').click();
-    cy.waitVisualizationUpdate();
     cy.wait('@getIntegration');
+    cy.wait('@getViewDefinitions');
 });
 
 Cypress.Commands.add('checkCodeSpanLine', (spanText, linesCount) => {