Merge pull request #17753 from ElectronicBlueberry/fix-tag-sorting

[24.0] Fix tag sorting
galaxyproject · Mar 17, 2024 · 56ffd6b · 56ffd6b
2 parents 3ebf8eb + da7349a
commit 56ffd6b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts b/client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts
@@ -20,7 +20,7 @@ describe("HeadlessMultiselect", () => {
         });
     };
 
-    const sampleOptions = ["#named", "#named_2", "#named_3", "abc", "def", "ghi"];
+    const sampleOptions = ["name:named", "name:named_2", "name:named_3", "abc", "def", "ghi"];
 
     const selectors = {
         openButton: ".toggle-button",
@@ -197,27 +197,27 @@ describe("HeadlessMultiselect", () => {
             const input = await open(wrapper);
 
             await keyPress(input, "Enter");
-            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named"]);
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["name:named"]);
 
             await keyPress(input, "ArrowDown");
             await keyPress(input, "Enter");
-            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named_2"]);
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["name:named_2"]);
         });
 
         it("deselects options via keyboard", async () => {
             const wrapper = mountWithProps({
                 options: sampleOptions,
-                selected: ["#named", "#named_2", "#named_3"],
+                selected: ["name:named", "name:named_2", "name:named_3"],
             });
 
             const input = await open(wrapper);
 
             await keyPress(input, "Enter");
-            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named_2", "#named_3"]);
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["name:named_2", "name:named_3"]);
 
             await keyPress(input, "ArrowDown");
             await keyPress(input, "Enter");
-            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named", "#named_3"]);
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["name:named", "name:named_3"]);
         });
 
         it("allows for adding new options", async () => {
@@ -243,26 +243,26 @@ describe("HeadlessMultiselect", () => {
             const options = wrapper.findAll(selectors.option);
 
             await options.at(0).trigger("click");
-            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named"]);
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["name:named"]);
 
             await options.at(1).trigger("click");
-            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named_2"]);
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["name:named_2"]);
         });
 
         it("deselects options with mouse", async () => {
             const wrapper = mountWithProps({
                 options: sampleOptions,
-                selected: ["#named", "#named_2", "#named_3"],
+                selected: ["name:named", "name:named_2", "name:named_3"],
             });
 
             await open(wrapper);
             const options = wrapper.findAll(selectors.option);
 
             await options.at(0).trigger("click");
-            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named_2", "#named_3"]);
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["name:named_2", "name:named_3"]);
 
             await options.at(1).trigger("click");
-            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named", "#named_3"]);
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["name:named", "name:named_3"]);
         });
     });
 });
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -15,6 +15,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import Vue2Teleport from "vue2-teleport";
 
 import { useUid } from "@/composables/utils/uid";
+import { normalizeTag } from "@/stores/userTagsStore";
 
 library.add(faCheck, faChevronUp, faPlus, faTags, faTimes);
 
@@ -147,6 +148,8 @@ function getOptionWithId(id: number) {
  * was not part of the provided options
  */
 function onOptionSelected(option: string) {
+    option = normalizeTag(option);
+
     if (!optionsAsSet.value.has(option)) {
         emit("addOption", option);
         return;
@@ -318,7 +321,7 @@ whenever(isOpen, async () => {
                     :data-parent-id="props.id"
                     class="headless-multiselect__option"
                     role="option"
-                    :aria-selected="props.selected.includes(option)"
+                    :aria-selected="props.selected.includes(normalizeTag(option))"
                     :class="{
                         invalid: i === 0 && !searchValueValid,
                         highlighted: highlightedOption === i,
@@ -332,7 +335,7 @@ whenever(isOpen, async () => {
                         {{ option }}
                     </span>
 
-                    <span v-if="props.selected.includes(option)" class="headless-multiselect__info">
+                    <span v-if="props.selected.includes(normalizeTag(option))" class="headless-multiselect__info">
                         <template v-if="highlightedOption === i">
                             <FontAwesomeIcon
                                 class="headless-multiselect__needs-highlight"

diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -3,11 +3,11 @@ import { useToast } from "composables/toast";
 import { getLocalVue } from "tests/jest/helpers";
 import { computed } from "vue";
 
-import { useUserTagsStore } from "@/stores/userTagsStore";
+import { normalizeTag, useUserTagsStore } from "@/stores/userTagsStore";
 
 import StatelessTags from "./StatelessTags";
 
-const autocompleteTags = ["#named_user_tag", "abc", "my_tag"];
+const autocompleteTags = ["name:named_user_tag", "abc", "my_tag"];
 const toggleButton = ".toggle-button";
 
 const localVue = getLocalVue();
@@ -28,6 +28,12 @@ useUserTagsStore.mockReturnValue({
     onMultipleNewTagsSeen: jest.fn(),
 });
 
+function normalize(tag) {
+    return tag.replace(/^#/, "name:");
+}
+
+normalizeTag.mockImplementation(normalize);
+
 jest.mock("composables/toast");
 const warningMock = jest.fn((message, title) => {
     return { message, title };
@@ -88,7 +94,7 @@ describe("StatelessTags", () => {
         expect(visibleOptions.length).toBe(autocompleteTags.length);
 
         visibleOptions.wrappers.forEach((option, i) => {
-            expect(option.text()).toContain(autocompleteTags[i]);
+            expect(normalize(option.text())).toContain(autocompleteTags[i]);
         });
     });
 

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -111,7 +111,7 @@ function onTagClicked(tag: string) {
 
             <HeadlessMultiselect
                 :options="userTags"
-                :selected="tags"
+                :selected="props.value"
                 :placeholder="props.placeholder"
                 :validator="isValid"
                 @addOption="onAddTag"

diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts
@@ -20,13 +20,13 @@ class UserTagStoreDatabase extends Dexie {
 
     constructor() {
         super("userTagStoreDatabase");
-        this.version(1).stores({ tags: "++id, userHash, lastUsed" });
+        this.version(2).stores({ tags: "++id, userHash, lastUsed, tag" });
     }
 }
 
 const maxDbEntriesPerUser = 10000;
 
-function normalizeTag(tag: string) {
+export function normalizeTag(tag: string) {
     return tag.replace(/^#/, "name:");
 }
 
@@ -113,12 +113,17 @@ export const useUserTagsStore = defineStore("userTagsStore", () => {
         await until(dbLoaded).toBe(true);
         tag = normalizeTag(tag);
 
-        const storedTag = tags.value.find((o) => o.tag === tag);
-        const id = storedTag?.id;
+        const dbTag = await db.tags.get({ tag });
 
-        if (id !== undefined) {
-            // put instead of update, because `removeOldestEntries` may have deleted this tag on init
-            await db.tags.put({ ...storedTag, lastUsed: Date.now() } as StoredTag, id);
+        if (dbTag) {
+            await db.tags.update(dbTag, { lastUsed: Date.now() });
+        } else {
+            const storedTag = tags.value.find((o) => o.tag === tag);
+            const id = storedTag?.id;
+
+            if (id !== undefined) {
+                await db.tags.add({ ...storedTag, lastUsed: Date.now() } as StoredTag);
+            }
         }
     }