diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js index 5468a153a8e..cb2c2db73b1 100644 --- a/client/src/components/TagsMultiselect/StatelessTags.test.js +++ b/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, }); diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue index a00f45bafcd..71a94434075 100644 --- a/client/src/components/TagsMultiselect/StatelessTags.vue +++ b/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) { diff --git a/client/src/components/Workflow/Editor/Attributes.test.js b/client/src/components/Workflow/Editor/Attributes.test.js index 544cbe7281d..af85f253e77 100644 --- a/client/src/components/Workflow/Editor/Attributes.test.js +++ b/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(), }); diff --git a/client/src/components/Workflow/WorkflowList.test.js b/client/src/components/Workflow/WorkflowList.test.js index 6bb58612251..7bdd4537e4b 100644 --- a/client/src/components/Workflow/WorkflowList.test.js +++ b/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(), }); diff --git a/client/src/composables/user.ts b/client/src/composables/user.ts index ecc6bddadcf..9182934a2a7 100644 --- a/client/src/composables/user.ts +++ b/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([]); - -/** - * 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 }; -} diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts new file mode 100644 index 00000000000..3c009c8f46d --- /dev/null +++ b/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([]); + + 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 }; +});