From f6a8290a3789b2fa70d7b8aeaef7dd2f422c6c93 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:10:18 +0100
Subject: [PATCH] add scope wrapper to all scoped workflow stores

---
 client/src/stores/workflowConnectionStore.ts    | 8 ++++----
 client/src/stores/workflowEditorCommentStore.ts | 5 ++++-
 client/src/stores/workflowEditorStateStore.ts   | 6 +++++-
 client/src/stores/workflowEditorToolbarStore.ts | 5 ++++-
 client/src/stores/workflowStepStore.ts          | 6 +++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/client/src/stores/workflowConnectionStore.ts b/client/src/stores/workflowConnectionStore.ts
index 686cc9b4a287..ba201dab52fe 100644
--- a/client/src/stores/workflowConnectionStore.ts
+++ b/client/src/stores/workflowConnectionStore.ts
@@ -4,6 +4,8 @@ import Vue from "vue";
 import { useWorkflowStepStore } from "@/stores/workflowStepStore";
 import { pushOrSet } from "@/utils/pushOrSet";
 
+import { useScopePointerStore } from "./scopePointerStore";
+
 interface InvalidConnections {
     [index: ConnectionId]: string | undefined;
 }
@@ -43,11 +45,9 @@ interface TerminalToOutputTerminals {
 }
 
 export const useConnectionStore = (workflowId: string) => {
-    if (!workflowId) {
-        throw new Error("WorkflowId is undefined");
-    }
+    const { scope } = useScopePointerStore();
 
-    return defineStore(`workflowConnectionStore${workflowId}`, {
+    return defineStore(`workflowConnectionStore${scope(workflowId)}`, {
         state: (): State => ({
             connections: [] as Array<Readonly<Connection>>,
             invalidConnections: {} as InvalidConnections,
diff --git a/client/src/stores/workflowEditorCommentStore.ts b/client/src/stores/workflowEditorCommentStore.ts
index 261887e66e76..f193e64d4157 100644
--- a/client/src/stores/workflowEditorCommentStore.ts
+++ b/client/src/stores/workflowEditorCommentStore.ts
@@ -15,6 +15,7 @@ import {
 import { assertDefined } from "@/utils/assertions";
 import { hasKeys, match } from "@/utils/utils";
 
+import { useScopePointerStore } from "./scopePointerStore";
 import { useWorkflowStateStore } from "./workflowEditorStateStore";
 import { Step, useWorkflowStepStore } from "./workflowStepStore";
 
@@ -92,7 +93,9 @@ function assertCommentDataValid(
 export type WorkflowCommentStore = ReturnType<typeof useWorkflowCommentStore>;
 
 export const useWorkflowCommentStore = (workflowId: string) => {
-    return defineStore(`workflowCommentStore${workflowId}`, () => {
+    const { scope } = useScopePointerStore();
+
+    return defineStore(`workflowCommentStore${scope(workflowId)}`, () => {
         const commentsRecord = ref<Record<number, WorkflowComment>>({});
         const localCommentsMetadata = ref<Record<number, CommentsMetadata>>({});
 
diff --git a/client/src/stores/workflowEditorStateStore.ts b/client/src/stores/workflowEditorStateStore.ts
index b7e5f1bdfbfb..6cba836b721d 100644
--- a/client/src/stores/workflowEditorStateStore.ts
+++ b/client/src/stores/workflowEditorStateStore.ts
@@ -5,6 +5,8 @@ import Vue, { reactive } from "vue";
 
 import type { OutputTerminals } from "@/components/Workflow/Editor/modules/terminals";
 
+import { useScopePointerStore } from "./scopePointerStore";
+
 export interface InputTerminalPosition {
     endX: number;
     endY: number;
@@ -34,7 +36,9 @@ interface State {
 }
 
 export const useWorkflowStateStore = (workflowId: string) => {
-    return defineStore(`workflowStateStore${workflowId}`, {
+    const { scope } = useScopePointerStore();
+
+    return defineStore(`workflowStateStore${scope(workflowId)}`, {
         state: (): State => ({
             inputTerminals: {},
             outputTerminals: {},
diff --git a/client/src/stores/workflowEditorToolbarStore.ts b/client/src/stores/workflowEditorToolbarStore.ts
index 4743fc304683..30b3680bfd68 100644
--- a/client/src/stores/workflowEditorToolbarStore.ts
+++ b/client/src/stores/workflowEditorToolbarStore.ts
@@ -4,6 +4,7 @@ import { computed, onScopeDispose, reactive, ref, watch } from "vue";
 
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 
+import { useScopePointerStore } from "./scopePointerStore";
 import { WorkflowCommentColor } from "./workflowEditorCommentStore";
 
 export type CommentTool = "textComment" | "markdownComment" | "frameComment" | "freehandComment" | "freehandEraser";
@@ -28,7 +29,9 @@ export interface InputCatcherEvent {
 export type WorkflowEditorToolbarStore = ReturnType<typeof useWorkflowEditorToolbarStore>;
 
 export const useWorkflowEditorToolbarStore = (workflowId: string) => {
-    return defineStore(`workflowEditorToolbarStore${workflowId}`, () => {
+    const { scope } = useScopePointerStore();
+
+    return defineStore(`workflowEditorToolbarStore${scope(workflowId)}`, () => {
         const snapActive = useUserLocalStorage("workflow-editor-toolbar-snap-active", false);
         const currentTool = ref<EditorTool>("pointer");
         const inputCatcherActive = ref<boolean>(false);
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index b53a2f078623..1358e7b028da 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -5,6 +5,8 @@ import type { CollectionTypeDescriptor } from "@/components/Workflow/Editor/modu
 import { type Connection, getConnectionId, useConnectionStore } from "@/stores/workflowConnectionStore";
 import { assertDefined } from "@/utils/assertions";
 
+import { useScopePointerStore } from "./scopePointerStore";
+
 interface State {
     steps: { [index: string]: Step };
     stepIndex: number;
@@ -145,7 +147,9 @@ interface StepInputMapOver {
 }
 
 export const useWorkflowStepStore = (workflowId: string) => {
-    return defineStore(`workflowStepStore${workflowId}`, {
+    const { scope } = useScopePointerStore();
+
+    return defineStore(`workflowStepStore${scope(workflowId)}`, {
         state: (): State => ({
             steps: {} as Steps,
             stepMapOver: {} as { [index: number]: CollectionTypeDescriptor },