feat(multiple-flows): Enable experimental support for multiple flows

src/components/SettingsModal.tsx

@@ -18,12 +18,13 @@ import {
   Modal,
   ModalVariant,
   Popover,
+  Switch,
   TextArea,
   TextInput,
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import { useAlert } from '@rhoas/app-services-ui-shared';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface ISettingsModal {
   handleCloseModal: () => void;
@@ -176,6 +177,10 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
     handleCloseModal();
   };
 
+  const onToggleUseMultipleFlowsSupport = useCallback((useMultipleFlows: boolean) => {
+    setLocalSettings({ ...localSettings, useMultipleFlows });
+  }, [localSettings]);
+
   return (
     <Modal
       actions={[
@@ -326,6 +331,18 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
             })}
           </FormSelect>
         </FormGroup>
+
+        {/* TODO: Temporary toggle to enable experimental support for Multiple Flows */}
+        <FormGroup
+          fieldId="useMultipleFlows"
+          label="Enable experimental support for multiple flows"
+        >
+          <Switch
+            aria-label="enable multiple flows support"
+            isChecked={localSettings.useMultipleFlows}
+            onChange={onToggleUseMultipleFlowsSupport}
+          />
+        </FormGroup>
       </Form>
     </Modal>
   );

src/components/Visualization.tsx

@@ -9,7 +9,7 @@ import {
   VisualizationStepViews,
 } from '@kaoto/components';
 import { StepsService, VisualizationService } from '@kaoto/services';
-import { useIntegrationJsonStore, useVisualizationStore } from '@kaoto/store';
+import { useIntegrationJsonStore, useSettingsStore, useVisualizationStore } from '@kaoto/store';
 import { IStepProps, IVizStepNode } from '@kaoto/types';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactFlow, { Background, Viewport } from 'reactflow';
@@ -33,6 +33,8 @@ const Visualization = () => {
     UUID: '',
     integrationId: '',
   });
+
+  const useMultipleFlows = useSettingsStore((state) => state.settings.useMultipleFlows);
   const visualizationStore = useVisualizationStore.getState();
   const layout = useVisualizationStore((state) => state.layout);
   const nodes = useVisualizationStore((state) => state.nodes);
@@ -70,7 +72,7 @@ const Visualization = () => {
 
   useEffect(() => {
     visualizationService.redrawDiagram(handleDeleteStep, true).catch((e) => console.error(e));
-  }, [integrationJson, layout]);
+  }, [integrationJson, layout, useMultipleFlows]);
 
   const nodeTypes = useMemo(() => ({ step: VisualizationStep }), []);
   const edgeTypes = useMemo(

src/services/stepsService.ts

@@ -11,6 +11,7 @@ import {
   IIntegrationJsonStore,
   INestedStepStore,
   RFState,
+  useFlowsStore,
   useIntegrationJsonStore,
   useNestedStepsStore,
   useVisualizationStore,
@@ -301,6 +302,8 @@ export class StepsService {
   async handleAppendStep(currentStep: IStepProps, selectedStep: IStepProps) {
     // fetch parameters and other details
     fetchStepDetails(selectedStep.id).then((newStep) => {
+      const integrationId = currentStep.integrationId;
+
       newStep.UUID = selectedStep.UUID;
       const currentStepNested = this.getStepNested(currentStep.UUID);
       if (currentStepNested) {
@@ -312,8 +315,13 @@ export class StepsService {
         useIntegrationJsonStore
           .getState()
           .replaceBranchParentStep(newParentStep, currentStepNested.pathToParentStep);
+
+        useFlowsStore
+          .getState()
+          .insertStep(integrationId, newParentStep, { mode: 'replace', path: currentStepNested.pathToParentStep });
       } else {
         useIntegrationJsonStore.getState().appendStep(newStep);
+        useFlowsStore.getState().insertStep(integrationId, newStep, { mode: 'append' });
       }
     });
   }
@@ -332,6 +340,8 @@ export class StepsService {
   ) {
     // fetch parameters and other details
     return fetchStepDetails(proposedStep.id).then((newStep) => {
+      const integrationId = node.step.integrationId;
+
       const validation = ValidationService.canStepBeReplaced(node, newStep);
       // Replace step
       if (validation.isValid) {
@@ -341,10 +351,18 @@ export class StepsService {
             useIntegrationJsonStore
               .getState()
               .replaceBranchParentStep(newStep, currentStepNested.pathToStep);
+
+            useFlowsStore
+              .getState()
+              .insertStep(integrationId, newStep, { mode: 'replace', path: currentStepNested.pathToStep });
           }
         } else {
-          const currentIdx = this.findStepIdxWithUUID(currentStep.UUID);
+          let currentIdx = this.findStepIdxWithUUID(currentStep.UUID);
           useIntegrationJsonStore.getState().replaceStep(newStep, currentIdx);
+
+          const integration = this.getIntegration(integrationId);
+          currentIdx = this.findStepIdxWithUUID(currentStep.UUID, integration?.steps);
+          useFlowsStore.getState().insertStep(integrationId, newStep, { mode: 'replace', index: currentIdx });
         }
       }
       return validation;
@@ -353,12 +371,14 @@ export class StepsService {
 
   /**
    * Handler for inserting a step, where `targetNode` is the
-   * right-hand node. Ex: source -> {insert step here} -> target
+   * right-hand node. Ex: source -> {insert step here} -> targetNode
    * @param targetNode
    * @param step
    */
   async handleInsertStep(targetNode: IVizStepNode | undefined, step: IStepProps) {
     return fetchStepDetails(step.id).then((newStep) => {
+      const integrationId = targetNode?.data.step.integrationId;
+
       if (targetNode?.data.branchInfo) {
         const currentStepNested = this.getStepNested(targetNode.data.step.UUID);
 
@@ -376,14 +396,26 @@ export class StepsService {
           useIntegrationJsonStore
             .getState()
             .replaceBranchParentStep(newParentStep, currentStepNested.pathToParentStep);
+
+          useFlowsStore
+            .getState()
+            .insertStep(integrationId, newParentStep, { mode: 'replace', path: currentStepNested.pathToParentStep });
         }
       } else {
-        const currentIdx = this.findStepIdxWithUUID(targetNode?.data.step.UUID);
+        let currentIdx = this.findStepIdxWithUUID(targetNode?.data.step.UUID);
         useIntegrationJsonStore.getState().insertStep(newStep, currentIdx);
+
+        const integration = this.getIntegration(integrationId);
+        currentIdx = this.findStepIdxWithUUID(targetNode?.data.step.UUID, integration?.steps);
+        useFlowsStore.getState().insertStep(integrationId, newStep, { mode: 'insert', index: currentIdx });
       }
     });
   }
 
+  getIntegration(integrationId: string): IIntegration | undefined {
+    return useFlowsStore.getState().flows.find((integration) => integration.id === integrationId);
+  }
+
   /**
    * Prepends a selected step to the current step.
    * @param currentStep
@@ -503,9 +535,11 @@ export class StepsService {
             );
             const newPath = pathToBranch?.concat('steps', '0');
             useIntegrationJsonStore.getState().replaceBranchParentStep(step, newPath);
+            useFlowsStore.getState().insertStep(node.step.integrationId, step, { mode: 'replace', path: newPath });
           }
         } else {
           useIntegrationJsonStore.getState().replaceStep(step);
+          useFlowsStore.getState().insertStep(node.step.integrationId, step, { mode: 'append' });
         }
       }
       return validation;

src/services/visualizationService.test.ts

@@ -228,7 +228,7 @@ describe('visualizationService', () => {
     expect(VisualizationService.buildEdges(nodes)).toHaveLength(1);
 
     // let's test that it works for branching too
-    const stepNodes = VisualizationService.buildNodesFromSteps(branchSteps, 'RIGHT');
+    const stepNodes = VisualizationService.buildNodesFromSteps('Camel Route-1', branchSteps, 'RIGHT');
 
     expect(VisualizationService.buildEdges(stepNodes)).toHaveLength(branchSteps.length - 1);
   });
@@ -260,13 +260,13 @@ describe('visualizationService', () => {
   });
 
   it('buildNodesFromSteps(): should build visualization nodes from an array of steps', () => {
-    const stepNodes = VisualizationService.buildNodesFromSteps(steps, 'RIGHT');
+    const stepNodes = VisualizationService.buildNodesFromSteps('Camel Route-1', steps, 'RIGHT');
     expect(stepNodes[0].data.step.UUID).toBeDefined();
     expect(stepNodes[0].id).toContain(stepNodes[0].data.step.UUID);
   });
 
   it.skip('buildNodesFromSteps(): should build visualization nodes from an array of steps with branches', () => {
-    const stepNodes = VisualizationService.buildNodesFromSteps(branchSteps, 'RIGHT');
+    const stepNodes = VisualizationService.buildNodesFromSteps('Camel Route-1', branchSteps, 'RIGHT');
     expect(stepNodes[0].data.step.UUID).toBeDefined();
     expect(stepNodes).toHaveLength(branchSteps.length);
   });
@@ -480,7 +480,7 @@ describe('visualizationService', () => {
 
   it('insertAddStepPlaceholder(): should add an ADD STEP placeholder to the beginning of the array', () => {
     const nodes: IVizStepNode[] = [];
-    VisualizationService.insertAddStepPlaceholder(nodes, '', 'START', { nextStepUuid: '' });
+    VisualizationService.insertAddStepPlaceholder('Camel Route-1', nodes, '', 'START', { nextStepUuid: '' });
     expect(nodes).toHaveLength(1);
   });
 

src/services/visualizationService.ts

@@ -4,7 +4,9 @@ import {
   IIntegrationJsonStore,
   RFState,
   useIntegrationJsonStore,
+  useFlowsStore,
   useVisualizationStore,
+  useSettingsStore,
 } from '@kaoto/store';
 import {
   IStepProps,
@@ -279,12 +281,32 @@ export class VisualizationService {
    * @param handleDeleteStep
    */
   buildNodesAndEdges(handleDeleteStep: (uuid: string) => void) {
-    const steps = useIntegrationJsonStore.getState().integrationJson.steps;
+    const { id: singleFlowId, steps: singleFlowSteps } = useIntegrationJsonStore.getState().integrationJson;
     const layout = useVisualizationStore.getState().layout;
+
     // build all nodes
-    const stepNodes = VisualizationService.buildNodesFromSteps(steps, layout, {
-      handleDeleteStep,
-    });
+    let stepNodes: IVizStepNode[] = [];
+
+    /**
+     * TODO: The following check is meant to be a temporary one
+     * while the Multiple Flows support is completed.
+     *
+     * This will be removed once all the existing functionality
+     * it's ported to the new "multi-flow" approach
+     */
+    if (!useSettingsStore.getState().settings.useMultipleFlows) {
+      stepNodes = VisualizationService.buildNodesFromSteps(singleFlowId, singleFlowSteps, layout, { handleDeleteStep });
+    } else {
+      const integrations = useFlowsStore.getState().flows;
+      stepNodes = integrations.reduce((acc, currentIntegration) => acc.concat(
+        VisualizationService.buildNodesFromSteps(
+          currentIntegration.id,
+          currentIntegration.steps,
+          layout,
+          { handleDeleteStep },
+        ),
+      ), [] as IVizStepNode[]);
+    }
 
     // build edges only for main nodes
     const filteredNodes = stepNodes.filter((node) => !node.data.branchInfo);
@@ -304,28 +326,29 @@ export class VisualizationService {
    * Data is stored in the `nodes` hook.
    */
   static buildNodesFromSteps(
+    integrationId: string,
     steps: IStepProps[],
     layout: string,
     props?: { [prop: string]: any },
     branchInfo?: IVizStepNodeDataBranch
   ): IVizStepNode[] {
     let stepNodes: IVizStepNode[] = [];
     let id = 0;
-    let getId = (uuid: string) => `node_${id++}-${uuid}-${getRandomArbitraryNumber()}`;
+    let getId = (UUID: string) => `node_${id++}-${UUID}-${getRandomArbitraryNumber()}`;
 
     // if no steps or first step isn't START, create a dummy placeholder step
     if (
       (steps.length === 0 && !branchInfo) ||
       (!StepsService.isFirstStepStart(steps) && !branchInfo)
     ) {
-      VisualizationService.insertAddStepPlaceholder(stepNodes, getId(''), 'START', {
+      VisualizationService.insertAddStepPlaceholder(integrationId, stepNodes, getId(''), 'START', {
         nextStepUuid: steps[0]?.UUID,
       });
     }
 
     // build EIP placeholder
     if (branchInfo && steps.length === 0 && !StepsService.isFirstStepStart(steps)) {
-      VisualizationService.insertAddStepPlaceholder(stepNodes, getId(''), 'MIDDLE', {
+      VisualizationService.insertAddStepPlaceholder(integrationId, stepNodes, getId(''), 'MIDDLE', {
         branchInfo,
         nextStepUuid: steps[0]?.UUID,
       });
@@ -360,7 +383,7 @@ export class VisualizationService {
       if (step.branches && step.branches.length > 0 && step.maxBranches !== 0) {
         step.branches.forEach((branch) => {
           stepNodes = stepNodes.concat(
-            VisualizationService.buildNodesFromSteps(branch.steps, layout, props, {
+            VisualizationService.buildNodesFromSteps(integrationId, branch.steps, layout, props, {
               branchIdentifier: branch.condition !== null ? branch.condition : branch.identifier,
 
               // rootStepUuid is the parent for a first branch step,
@@ -487,6 +510,7 @@ export class VisualizationService {
   }
 
   static insertAddStepPlaceholder(
+    integrationId: string,
     stepNodes: IVizStepNode[],
     id: string,
     type: string,
@@ -499,6 +523,7 @@ export class VisualizationService {
           name: '',
           type: type,
           UUID: `placeholder-${getRandomArbitraryNumber()}`,
+          integrationId,
         },
         isPlaceholder: true,
         ...props,