convert userTags composable to store

client/src/components/TagsMultiselect/StatelessTags.test.js

@@ -1,9 +1,10 @@
 import { mount } from "@vue/test-utils";
 import { useToast } from "composables/toast";
-import { useUserTags } from "composables/user";
 import { getLocalVue } from "tests/jest/helpers";
 import { computed } from "vue";
 
+import { useUserTagsStore } from "@/stores/userTagsStore";
+
 import StatelessTags from "./StatelessTags";
 
 const autocompleteTags = ["#named_user_tag", "abc", "my_tag"];
@@ -19,7 +20,7 @@ const mountWithProps = (props) => {
 
 jest.mock("composables/user");
 const addLocalTagMock = jest.fn((tag) => tag);
-useUserTags.mockReturnValue({
+useUserTagsStore.mockReturnValue({
     userTags: computed(() => autocompleteTags),
     addLocalTag: addLocalTagMock,
 });

client/src/components/TagsMultiselect/StatelessTags.vue

@@ -8,8 +8,8 @@ import Multiselect from "vue-multiselect";
 
 import { useToast } from "@/composables/toast";
 import { useMultiselect } from "@/composables/useMultiselect";
-import { useUserTags } from "@/composables/user";
 import { useUid } from "@/composables/utils/uid";
+import { useUserTagsStore } from "@/stores/userTagsStore";
 
 import Tag from "./Tag.vue";
 
@@ -39,7 +39,7 @@ const emit = defineEmits<{
 
 library.add(faTags, faCheck, faTimes, faPlus);
 
-const { userTags, addLocalTag } = useUserTags();
+const { userTags, addLocalTag } = useUserTagsStore();
 const { warning } = useToast();
 
 function onAddTag(tag: string) {

client/src/components/Workflow/Editor/Attributes.test.js

@@ -1,8 +1,9 @@
 import { createLocalVue, mount } from "@vue/test-utils";
-import { useUserTags } from "composables/user";
 import { isDate } from "date-fns";
 import { computed } from "vue";
 
+import { useUserTagsStore } from "@/stores/userTagsStore";
+
 import Attributes from "./Attributes";
 import { UntypedParameters } from "./modules/parameters";
 
@@ -17,7 +18,7 @@ const TEST_VERSIONS = [
 const autocompleteTags = ["#named_uer_tag", "abc", "my_tag"];
 
 jest.mock("composables/user");
-useUserTags.mockReturnValue({
+useUserTagsStore.mockReturnValue({
     userTags: computed(() => autocompleteTags),
     addLocalTag: jest.fn(),
 });

client/src/components/Workflow/WorkflowList.test.js

@@ -2,13 +2,14 @@ import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { useUserTags } from "composables/user";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import flushPromises from "flush-promises";
 import { PiniaVuePlugin } from "pinia";
 import { getLocalVue, wait } from "tests/jest/helpers";
 import { computed } from "vue";
 
+import { useUserTagsStore } from "@/stores/userTagsStore";
+
 import Tag from "../TagsMultiselect/Tag";
 import Workflows from "../Workflow/WorkflowList";
 
@@ -17,7 +18,7 @@ localVue.use(PiniaVuePlugin);
 
 const autocompleteTags = ["#named_user_tags", "abc", "my_tag"];
 jest.mock("composables/user");
-useUserTags.mockReturnValue({
+useUserTagsStore.mockReturnValue({
     userTags: computed(() => autocompleteTags),
     addLocalTag: jest.fn(),
 });

client/src/composables/user.ts

@@ -1,5 +1,4 @@
-import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
@@ -14,27 +13,3 @@ export function useCurrentTheme() {
         setCurrentTheme,
     };
 }
-
-// temporarily stores tags which have not yet been fetched from the backend
-const localTags = ref<string[]>([]);
-
-/**
- * Keeps tracks of the tags the current user has used.
- */
-export function useUserTags() {
-    const { currentUser } = storeToRefs(useUserStore());
-    const userTags = computed(() => {
-        let tags: string[];
-        if (currentUser.value && !currentUser.value.isAnonymous) {
-            tags = [...currentUser.value.tags_used, ...localTags.value];
-        } else {
-            tags = localTags.value;
-        }
-        const tagSet = new Set(tags);
-        return Array.from(tagSet).map((tag) => tag.replace(/^name:/, "#"));
-    });
-    const addLocalTag = (tag: string) => {
-        localTags.value.push(tag);
-    };
-    return { userTags, addLocalTag };
-}

client/src/stores/userTagsStore.ts

@@ -0,0 +1,27 @@
+import { defineStore, storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+
+import { useUserStore } from "./userStore";
+
+export const useUserTagsStore = defineStore("userTagsStore", () => {
+    const localTags = ref<string[]>([]);
+
+    const { currentUser } = storeToRefs(useUserStore());
+
+    const userTags = computed(() => {
+        let tags: string[];
+        if (currentUser.value && !currentUser.value.isAnonymous) {
+            tags = [...currentUser.value.tags_used, ...localTags.value];
+        } else {
+            tags = localTags.value;
+        }
+        const tagSet = new Set(tags);
+        return Array.from(tagSet).map((tag) => tag.replace(/^name:/, "#"));
+    });
+
+    const addLocalTag = (tag: string) => {
+        localTags.value.push(tag);
+    };
+
+    return { userTags, addLocalTag };
+});