chore: Create new FlowsStore that supports multiple routes

src/store/flowsStore.tsx

@@ -0,0 +1,95 @@
+import { StepsService } from '@kaoto/services';
+import { IIntegration, IStepProps, IViewProps } from '@kaoto/types';
+import isEqual from 'lodash.isequal';
+import { temporal } from 'zundo';
+import { create } from 'zustand';
+import { initialFlows } from '../stubs';
+import { useNestedStepsStore } from './nestedStepsStore';
+import { initDsl, initialSettings } from './settingsStore';
+
+export interface IFlowsStore {
+  // Data
+  flows: IIntegration[];
+  properties: Record<string, unknown>;
+  views: IViewProps[];
+
+  // Handler methods
+  appendStep: (integrationId: string, newStep: IStepProps) => void;
+  deleteStep: (integrationId: string, stepUUID: string) => void;
+}
+
+export const flowsInitialState: Pick<IFlowsStore, 'flows' | 'properties' | 'views'> = {
+  flows: [{
+    id: `${initDsl.name}-1`,
+    dsl: initDsl.name,
+    metadata: { name: initialSettings.name, namespace: initialSettings.namespace },
+    steps: [],
+    params: [],
+  }],
+  properties: {},
+  views: [],
+};
+
+/**
+ * This store has duplicated code as we can see on
+ * how are we dealing with regenerating UUIDs and setting
+ * them in the correspondig integration.
+ *
+ * The goal is to have a working version first to include
+ * support for multiple routes and then make another pass
+ * to clean the duplication and hopefully get a smaller
+ * API for the consumers
+ */
+export const flowsStore = create<IFlowsStore>()(
+  temporal(
+    (set) => ({
+      ...flowsInitialState,
+
+      /**
+       * Overriding the default route for demo purposes
+       * To be removed once the final feature is complete
+       */
+      ...{ flows: initialFlows },
+
+      appendStep: (integrationId, newStep) => {
+        set((state: IFlowsStore): IFlowsStore => {
+          const integrationIndex = state.flows.findIndex((integration) => integration.id === integrationId);
+          if (integrationIndex === -1) {
+            return state;
+          }
+
+          newStep.integrationId = integrationId;
+          const clonedSteps = state.flows[integrationIndex].steps.slice();
+          clonedSteps.push(newStep);
+          const stepsWithNewUuids = StepsService.regenerateUuids(clonedSteps, `${integrationId}|`);
+          state.flows[integrationIndex].steps = stepsWithNewUuids;
+          useNestedStepsStore.getState().updateSteps(StepsService.extractNestedSteps(stepsWithNewUuids));
+
+          return state;
+        });
+      },
+      deleteStep: (integrationId: string, stepUUID: string) => {
+        set((state) => {
+          const integrationIndex = state.flows.findIndex((integration) => integration.id === integrationId);
+          if (integrationIndex === -1) {
+            return state;
+          }
+
+          const filteredSteps = state.flows[integrationIndex].steps.slice().filter((step: IStepProps) => step.UUID !== stepUUID);
+          const stepsWithNewUuids = StepsService.regenerateUuids(filteredSteps, `${integrationId}|`);
+          state.flows[integrationIndex].steps = stepsWithNewUuids;
+          useNestedStepsStore.getState().updateSteps(StepsService.extractNestedSteps(stepsWithNewUuids));
+
+          return state;
+        });
+      },
+    }),
+    {
+      partialize: (state) => {
+        const { flows: integrations } = state;
+        return { integrations };
+      },
+      equality: (a, b) => isEqual(a, b),
+    }
+  )
+);

src/store/index.ts

@@ -1,4 +1,26 @@
+import { mountStoreDevtool } from 'simple-zustand-devtools';
+import { useDeploymentStore } from './deploymentStore';
+import { flowsStore } from './flowsStore';
+import { useIntegrationJsonStore } from './integrationJsonStore';
+import { useIntegrationSourceStore } from './integrationSourceStore';
+import { useNestedStepsStore } from './nestedStepsStore';
+import { useSettingsStore } from './settingsStore';
+import { useStepCatalogStore } from './stepCatalogStore';
+import { useVisualizationStore } from './visualizationStore';
+
+if (process.env.NODE_ENV === 'development') {
+  mountStoreDevtool('deploymentStore', useDeploymentStore);
+  mountStoreDevtool('flowsStore', flowsStore);
+  mountStoreDevtool('integrationJsonStore', useIntegrationJsonStore);
+  mountStoreDevtool('integrationSourceStore', useIntegrationSourceStore);
+  mountStoreDevtool('nestedStepsStore', useNestedStepsStore);
+  mountStoreDevtool('settingsStore', useSettingsStore);
+  mountStoreDevtool('stepCatalogStore', useStepCatalogStore);
+  mountStoreDevtool('visualizationStore', useVisualizationStore);
+}
+
 export * from './deploymentStore';
+export * from './flowsStore';
 export * from './integrationJsonStore';
 export * from './integrationSourceStore';
 export * from './nestedStepsStore';

src/store/integrationJsonStore.tsx

@@ -1,15 +1,11 @@
-import { useDeploymentStore } from './deploymentStore';
-import { useIntegrationSourceStore } from './integrationSourceStore';
-import { useNestedStepsStore } from './nestedStepsStore';
-import { initDsl, initialSettings, useSettingsStore } from './settingsStore';
-import { useVisualizationStore } from './visualizationStore';
 import { StepsService } from '@kaoto/services';
 import { IIntegration, IStepProps, IViewProps } from '@kaoto/types';
 import { setDeepValue } from '@kaoto/utils';
 import isEqual from 'lodash.isequal';
-import { mountStoreDevtool } from 'simple-zustand-devtools';
 import { temporal } from 'zundo';
 import { create } from 'zustand';
+import { useNestedStepsStore } from './nestedStepsStore';
+import { initDsl, initialSettings } from './settingsStore';
 
 export interface IIntegrationJsonStore {
   appendStep: (newStep: IStepProps) => void;
@@ -184,14 +180,3 @@ export const useIntegrationJsonStore = create<IIntegrationJsonStore>()(
     }
   )
 );
-
-if (process.env.NODE_ENV === 'development') {
-  mountStoreDevtool('integrationJsonStore', useIntegrationJsonStore);
-  mountStoreDevtool('integrationSourceStore', useIntegrationSourceStore);
-  mountStoreDevtool('nestedStepsStore', useNestedStepsStore);
-  mountStoreDevtool('deploymentStore', useDeploymentStore);
-  mountStoreDevtool('settingsStore', useSettingsStore);
-  mountStoreDevtool('visualizationStore', useVisualizationStore);
-}
-
-export default useIntegrationJsonStore;

src/stubs/index.ts

@@ -1,3 +1,4 @@
 export * from './debezium-mongodb.step';
+export * from './initial-flows';
 export * from './integration-steps';
 export * from './steps';