From 3add9e7cd1f24cecc36cd6cc5ea29fdcc7bf2dc5 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 6 Nov 2023 16:54:44 +0100
Subject: [PATCH] provide id as ref object instead of string

---
 .../src/components/Workflow/Editor/Index.vue  |  2 +-
 .../Workflow/Published/WorkflowPublished.vue  |  2 +-
 client/src/composables/workflowStores.ts      | 28 +++++++++----------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index b195dafbcef..f805712ea47 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -243,7 +243,7 @@ export default {
         const uid = unref(useUid("workflow-editor-"));
         const id = ref(props.workflowId || uid);
 
-        const { connectionStore, stepStore, stateStore, commentStore } = provideScopedWorkflowStores(id.value);
+        const { connectionStore, stepStore, stateStore, commentStore } = provideScopedWorkflowStores(id);
 
         const { comments } = storeToRefs(commentStore);
         const { getStepIndex, steps } = storeToRefs(stepStore);
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 7452a4b62b5..4ec5ed90ea4 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -46,7 +46,7 @@ const errorMessage = ref("");
 
 const { datatypesMapper } = useDatatypesMapper();
 
-const { stateStore } = provideScopedWorkflowStores(props.id);
+const { stateStore } = provideScopedWorkflowStores(ref(props.id));
 
 stateStore.setScale(0.75);
 
diff --git a/client/src/composables/workflowStores.ts b/client/src/composables/workflowStores.ts
index 25d8e1c3f5c..cf0c3922f58 100644
--- a/client/src/composables/workflowStores.ts
+++ b/client/src/composables/workflowStores.ts
@@ -1,4 +1,4 @@
-import { inject, onScopeDispose, provide } from "vue";
+import { inject, onScopeDispose, provide, type Ref } from "vue";
 
 import { useConnectionStore } from "@/stores/workflowConnectionStore";
 import { useWorkflowCommentStore } from "@/stores/workflowEditorCommentStore";
@@ -15,14 +15,14 @@ import { useWorkflowStepStore } from "@/stores/workflowStepStore";
  * @param workflowId the workflow to scope to
  * @returns workflow Stores
  */
-export function provideScopedWorkflowStores(workflowId: string) {
+export function provideScopedWorkflowStores(workflowId: Ref<string>) {
     provide("workflowId", workflowId);
 
-    const connectionStore = useConnectionStore(workflowId);
-    const stateStore = useWorkflowStateStore(workflowId);
-    const stepStore = useWorkflowStepStore(workflowId);
-    const commentStore = useWorkflowCommentStore(workflowId);
-    const toolbarStore = useWorkflowEditorToolbarStore(workflowId);
+    const connectionStore = useConnectionStore(workflowId.value);
+    const stateStore = useWorkflowStateStore(workflowId.value);
+    const stepStore = useWorkflowStepStore(workflowId.value);
+    const commentStore = useWorkflowCommentStore(workflowId.value);
+    const toolbarStore = useWorkflowEditorToolbarStore(workflowId.value);
 
     onScopeDispose(() => {
         connectionStore.$dispose();
@@ -51,19 +51,19 @@ export function provideScopedWorkflowStores(workflowId: string) {
  * @returns workflow stores
  */
 export function useWorkflowStores() {
-    const workflowId = inject("workflowId");
+    const workflowId = inject("workflowId") as Ref<string>;
 
-    if (typeof workflowId !== "string") {
+    if (typeof workflowId?.value !== "string") {
         throw new Error(
             "Workflow ID not provided by parent component. Use `provideScopedWorkflowStores` on a parent component."
         );
     }
 
-    const connectionStore = useConnectionStore(workflowId);
-    const stateStore = useWorkflowStateStore(workflowId);
-    const stepStore = useWorkflowStepStore(workflowId);
-    const commentStore = useWorkflowCommentStore(workflowId);
-    const toolbarStore = useWorkflowEditorToolbarStore(workflowId);
+    const connectionStore = useConnectionStore(workflowId.value);
+    const stateStore = useWorkflowStateStore(workflowId.value);
+    const stepStore = useWorkflowStepStore(workflowId.value);
+    const commentStore = useWorkflowCommentStore(workflowId.value);
+    const toolbarStore = useWorkflowEditorToolbarStore(workflowId.value);
 
     return {
         connectionStore,