From 73584e8ced70bb9112e90b94e1a746c4b928e88b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 30 Sep 2022 13:10:19 +0200
Subject: [PATCH 01/58] initial commit

---
 .../History/Content/ContentItem.vue           |  12 +-
 client/src/components/Tags/model.js           | 111 ++++++-------
 .../TagsMultiselect/StatelessTags.vue         | 150 ++++++++++++++++++
 client/src/components/TagsMultiselect/Tag.vue |  61 +++++++
 .../src/components/TagsMultiselect/Tags.vue   |  21 +++
 client/src/composables/user.js                |  36 ++++-
 6 files changed, 326 insertions(+), 65 deletions(-)
 create mode 100644 client/src/components/TagsMultiselect/StatelessTags.vue
 create mode 100644 client/src/components/TagsMultiselect/Tag.vue
 create mode 100644 client/src/components/TagsMultiselect/Tags.vue

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 0ff44351494..d4b3d44335c 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -90,14 +90,15 @@
             :collection-type="item.collection_type"
             :element-count="item.element_count"
             :elements-datatypes="item.elements_datatypes" />
-        <StatelessTags
+        <!--StatelessTags
             v-if="!tagsDisabled || hasTags"
             class="alltags p-1"
             :value="tags"
             :use-toggle-link="false"
             :disabled="tagsDisabled"
             @tag-click="onTagClick"
-            @input="onTags" />
+            @input="onTags" /-->
+        <Tags v-if="!tagsDisabled || hasTags" :value="tags" :disabled="tagsDisabled" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <b-collapse :visible="expandDataset">
             <DatasetDetails
@@ -113,7 +114,7 @@
 </template>
 
 <script>
-import { StatelessTags } from "components/Tags";
+import Tags from "components/TagsMultiselect/Tags";
 import { STATES, HIERARCHICAL_COLLECTION_JOB_STATES } from "./model/states";
 import CollectionDescription from "./Collection/CollectionDescription";
 import ContentOptions from "./ContentOptions";
@@ -131,7 +132,7 @@ export default {
         CollectionDescription,
         ContentOptions,
         DatasetDetails,
-        StatelessTags,
+        Tags,
         FontAwesomeIcon,
     },
     props: {
@@ -251,6 +252,9 @@ export default {
 };
 </script>
 <style lang="scss">
+.content-item:hover {
+    //filter: brightness(105%);
+}
 .content-item {
     .name {
         word-break: break-all;
diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index 71282f924cb..eb2f633a8f7 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -9,76 +9,67 @@ import { keyedColorScheme } from "utils/color";
 // separated by a period, and then an optional value after a colon.
 export const VALID_TAG_RE = /^([^\s.:])+(.[^\s.:]+)*(:[^\s.:]+)?$/;
 
-function TagModel(props = {}) {
-    this.text = "";
+export class TagModel {
+    text;
+    styles;
+    label;
+    valid;
 
-    // special handling for name:thing tags
-    if (props.text && props.text.startsWith("#")) {
-        props.text = props.text.replace("#", "name:");
+    /**
+     * @param {string || object} data
+     */
+    constructor(data) {
+        let props = {};
+
+        switch (typeof data) {
+            case "string":
+                props = { text: data };
+                break;
+            case "object":
+                props = data;
+                break;
+        }
+
+        Object.assign(this, props);
+
+        this.text = props.text ?? "";
+        this.label = this.text;
+        this.styles = "";
+
+        if (this.text.startsWith("#")) {
+            this.text = this.text.replace("#", "name:");
+            this.styles += "font-weight: bold;";
+        }
+
+        const { primary, darker } = keyedColorScheme(this.text);
+
+        this.styles += `background-color: ${primary};`;
+        this.styles += "color: black;";
+        this.styles += `border-color: ${darker};`;
+
+        this.valid = VALID_TAG_RE.test(this.text);
     }
 
-    Object.assign(this, props);
+    equals(otherTag) {
+        return this.text === otherTag.text;
+    }
 
-    // Need to do Object.defineProperty instead of a class getter to make
-    // style enumerable for vue-tags-input
-    Object.defineProperty(this, "style", {
-        enumerable: true,
-        get: function () {
-            const { primary, darker } = keyedColorScheme(this.text);
-
-            const styles = {
-                "background-color": primary,
-                color: "black",
-                "border-color": darker,
-            };
-            if (this.text.startsWith("name:")) {
-                styles["font-weight"] = "bold";
-            }
-
-            return Object.keys(styles)
-                .map((prop) => `${prop}: ${styles[prop]}`)
-                .join(";");
-        },
-    });
-
-    // Changes name:foo to #foo
-    Object.defineProperty(this, "label", {
-        enumerable: true,
-        get: function () {
-            return this.text.startsWith("name:") ? this.text.replace("name:", "#") : this.text;
-        },
-    });
-
-    // valid flag
-    Object.defineProperty(this, "valid", {
-        enumerable: false,
-        get: function () {
-            return VALID_TAG_RE.test(this.text);
-        },
-    });
+    toString() {
+        return this.text;
+    }
 }
 
-TagModel.prototype.equals = function (otherTag) {
-    return this.text == otherTag.text;
-};
-
-TagModel.prototype.toString = function () {
-    return this.text;
-};
+/**
+ * Legacy functions
+ *
+ * The following two functions are deprecated and will be removed.
+ * Do not use them in new code.
+ */
 
 // Public factory
 
 export function createTag(data) {
-    let props = {};
-    switch (typeof data) {
-        case "string":
-            props = { text: data };
-            break;
-        case "object":
-            props = Object.assign({}, data);
-            break;
-    }
-    return new TagModel(props);
+    return new TagModel(data);
 }
 
 // Returns tags in "newTags" that aren't present in "existingTags"
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
new file mode 100644
index 00000000000..69b72fc53cf
--- /dev/null
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -0,0 +1,150 @@
+<script setup>
+import Multiselect from "vue-multiselect";
+import Tag from "./Tag.vue";
+import { ref } from "vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+const props = defineProps({
+    value: {
+        type: Array,
+        default: () => [],
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+function onAddTag(tag) {
+    console.log(tag);
+}
+
+const editing = ref(false);
+
+function onOpen() {
+    editing.value = true;
+}
+
+function onClose() {
+    editing.value = false;
+}
+
+const multiselectElement = ref(null);
+
+function openMultiselect() {
+    multiselectElement.value.activate();
+}
+</script>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTags, faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faTags, faCheck, faTimes);
+</script>
+
+<template>
+    <div class="stateless-tags px-1">
+        <Multiselect
+            v-if="!disabled"
+            placeholder="Add Tags"
+            class=""
+            ref="multiselectElement"
+            :value="props.value"
+            :options="props.options"
+            :multiple="true"
+            :taggable="true"
+            @tag="onAddTag"
+            @open="onOpen"
+            @close="onClose">
+            <template v-slot:tag="{ option, search, remove }">
+                <Tag :option="option" :search="search" :remove="remove" :editable="true"></Tag>
+            </template>
+            <template v-slot:noOptions> Type to add new tag </template>
+            <template v-slot:caret>
+                <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">
+                    Add Tags
+                    <FontAwesomeIcon icon="fa-tags"></FontAwesomeIcon>
+                </b-button>
+            </template>
+            <template v-slot:option="{ option }">
+                <span>{{ option }} Test</span>
+            </template>
+        </Multiselect>
+        <div v-else class="pl-1 pb-2">
+            <div class="d-inline">
+                <Tag v-for="tag in props.value" :key="tag" :option="tag" :editable="false"></Tag>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.stateless-tags {
+    &:deep(.multiselect) {
+        min-height: unset;
+        display: flex;
+        flex-direction: column-reverse;
+
+        .multiselect__select {
+            top: unset;
+            bottom: 0;
+            padding: 0 0.25rem;
+            z-index: 1;
+            height: $font-size-base * 2;
+        }
+
+        .multiselect__placeholder {
+            display: none;
+        }
+
+        .multiselect__tags-wrap {
+            margin-bottom: 0.5rem;
+        }
+
+        .multiselect__tags {
+            padding: 0 0.25rem;
+            background: none;
+            font-size: $font-size-base;
+            border: none;
+            min-height: 0;
+        }
+
+        .multiselect__content-wrapper {
+            top: 100%;
+            z-index: 800;
+        }
+
+        &.multiselect--above .multiselect__content-wrapper {
+            top: unset;
+        }
+
+        .multiselect__input,
+        .toggle-button {
+            font-size: $font-size-base;
+            color: $text-color;
+            text-decoration: none;
+            padding: 0;
+            background: none;
+            cursor: text;
+            text-align: left;
+            margin: 0;
+            border: none;
+        }
+
+        .multiselect__input {
+            padding-left: 0.25rem;
+        }
+
+        .toggle-button {
+            padding-left: 0.5rem;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
new file mode 100644
index 00000000000..6813051e633
--- /dev/null
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { keyedColorScheme } from "utils/color";
+import { computed } from "vue";
+
+const props = defineProps({
+    option: String,
+    search: String,
+    remove: Function,
+    editable: Boolean,
+    focusable: Boolean,
+});
+
+const emit = defineEmits(["click"]);
+
+const color = computed(() => keyedColorScheme(props.option).primary);
+
+function onClick() {
+    emit("click", props.option);
+}
+</script>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faTimes);
+</script>
+
+<template>
+    <div class="tag" :class="{ editable }" :style="`background-color: ${color};`" @click.prevent.stop="onClick">
+        <span>
+            {{ props.option }}
+        </span>
+        <b-button v-if="editable" size="sm" variant="link" class="px-1 py-0" tabindex="-1" @click="props.remove">
+            <FontAwesomeIcon icon="fa-times"></FontAwesomeIcon>
+        </b-button>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.tag {
+    display: inline-flex;
+    align-items: baseline;
+
+    margin-right: 0.25rem;
+    margin-bottom: 0.1rem;
+
+    font-size: $font-size-base * 0.95;
+    color: black;
+    border-radius: 4px;
+    cursor: pointer;
+
+    padding: 0 0.5rem;
+    &.editable {
+        padding: 0 0.25rem;
+    }
+}
+</style>
diff --git a/client/src/components/TagsMultiselect/Tags.vue b/client/src/components/TagsMultiselect/Tags.vue
new file mode 100644
index 00000000000..82b70bcada0
--- /dev/null
+++ b/client/src/components/TagsMultiselect/Tags.vue
@@ -0,0 +1,21 @@
+<script setup>
+import StatelessTags from "./StatelessTags.vue";
+import { watch } from "vue";
+import { useUserTags } from "composables/user";
+
+const props = defineProps({
+    value: Array,
+    disabled: Boolean,
+});
+
+const { userTags } = useUserTags();
+
+watch(
+    () => userTags.value,
+    (tags) => console.log(tags)
+);
+</script>
+
+<template>
+    <StatelessTags :value="props.value" :options="userTags" :disabled="props.disabled" />
+</template>
diff --git a/client/src/composables/user.js b/client/src/composables/user.js
index 0910ec0ff7c..c2de2a48fb8 100644
--- a/client/src/composables/user.js
+++ b/client/src/composables/user.js
@@ -1,4 +1,4 @@
-import { computed, onMounted, inject } from "vue";
+import { computed, onMounted, inject, watch, ref } from "vue";
 
 /**
  * composable user store wrapper
@@ -18,3 +18,37 @@ export function useCurrentUser() {
 
     return { currentUser, addFavoriteTool, removeFavoriteTool };
 }
+
+// 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 } = useCurrentUser();
+
+    watch(
+        () => currentUser.value,
+        (user) => {
+            // reset local tags if user reloads
+            if (user) {
+                localTags.value = [];
+            }
+        }
+    );
+
+    const userTags = computed(() => {
+        if (currentUser.value) {
+            return [...currentUser.value.tags_used, ...localTags.value];
+        } else {
+            return localTags.value;
+        }
+    });
+
+    const addLocalTag = (tag) => {
+        localTags.value.push(tag);
+    };
+
+    return { userTags, addLocalTag };
+}

From f8deaa0b2cbbfc897333d2a6ac101228f6b08f8f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 30 Sep 2022 15:06:48 +0200
Subject: [PATCH 02/58] make tag model immutable

---
 client/src/components/Tags/model.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index eb2f633a8f7..2521c727fe0 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -48,6 +48,8 @@ export class TagModel {
         this.styles += `border-color: ${darker};`;
 
         this.valid = VALID_TAG_RE.test(this.text);
+
+        Object.freeze(this);
     }
 
     equals(otherTag) {

From 11778ba2d526f526e74412f0d20f48cb764bc66f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 20 Oct 2022 12:46:46 +0200
Subject: [PATCH 03/58] style options dropdown

---
 .../TagsMultiselect/StatelessTags.vue         | 56 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 69b72fc53cf..d03fef7200c 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -42,9 +42,9 @@ function openMultiselect() {
 
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTags, faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faTags, faCheck, faTimes);
+library.add(faTags, faCheck, faTimes, faPlus);
 </script>
 
 <template>
@@ -64,15 +64,25 @@ library.add(faTags, faCheck, faTimes);
             <template v-slot:tag="{ option, search, remove }">
                 <Tag :option="option" :search="search" :remove="remove" :editable="true"></Tag>
             </template>
+
             <template v-slot:noOptions> Type to add new tag </template>
+
             <template v-slot:caret>
                 <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">
                     Add Tags
                     <FontAwesomeIcon icon="fa-tags"></FontAwesomeIcon>
                 </b-button>
             </template>
+
             <template v-slot:option="{ option }">
-                <span>{{ option }} Test</span>
+                <span>{{ option.label ?? option }}</span>
+                <span v-if="value.includes(option)" class="float-right">
+                    <FontAwesomeIcon class="check-icon" icon="fa-check"></FontAwesomeIcon>
+                    <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
+                </span>
+                <span v-else class="float-right">
+                    <FontAwesomeIcon class="plus-icon" icon="fa-plus"></FontAwesomeIcon>
+                </span>
             </template>
         </Multiselect>
         <div v-else class="pl-1 pb-2">
@@ -145,6 +155,46 @@ library.add(faTags, faCheck, faTimes);
         .toggle-button {
             padding-left: 0.5rem;
         }
+
+        .multiselect__option {
+            font-size: $font-size-base;
+            min-height: unset;
+            padding: 0.5rem 1rem;
+
+            .plus-icon {
+                display: none;
+            }
+
+            &::after {
+                display: none;
+            }
+
+            &.multiselect__option--selected {
+                color: $brand-primary;
+
+                .times-icon {
+                    display: none;
+                }
+            }
+
+            &.multiselect__option--highlight {
+                background: $brand-primary;
+                color: $brand-light;
+
+                .times-icon,
+                .plus-icon {
+                    display: inline-block;
+                }
+
+                .check-icon {
+                    display: none;
+                }
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
     }
 }
 </style>

From 4515f617c09270b6a7443b1d598bea1863c6bff4 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 20 Oct 2022 12:57:09 +0200
Subject: [PATCH 04/58] connect selected event

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index d03fef7200c..89127106f74 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -59,6 +59,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             :multiple="true"
             :taggable="true"
             @tag="onAddTag"
+            @select="onAddTag"
             @open="onOpen"
             @close="onClose">
             <template v-slot:tag="{ option, search, remove }">

From ff492d838f7f31f45798fa90362e64422948f734 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Nov 2022 13:59:43 +0100
Subject: [PATCH 05/58] bind value remove unused Tags component

---
 .../History/Content/ContentItem.vue           |  6 ++--
 .../TagsMultiselect/StatelessTags.vue         | 32 +++++++++++++------
 client/src/components/TagsMultiselect/Tag.vue | 14 ++++++--
 .../src/components/TagsMultiselect/Tags.vue   | 21 ------------
 4 files changed, 38 insertions(+), 35 deletions(-)
 delete mode 100644 client/src/components/TagsMultiselect/Tags.vue

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index d4b3d44335c..359a70a12aa 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -98,7 +98,7 @@
             :disabled="tagsDisabled"
             @tag-click="onTagClick"
             @input="onTags" /-->
-        <Tags v-if="!tagsDisabled || hasTags" :value="tags" :disabled="tagsDisabled" />
+        <StatelessTags v-if="!tagsDisabled || hasTags" :value="tags" :disabled="tagsDisabled" @input="onTags" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <b-collapse :visible="expandDataset">
             <DatasetDetails
@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import Tags from "components/TagsMultiselect/Tags";
+import StatelessTags from "components/TagsMultiselect/StatelessTags";
 import { STATES, HIERARCHICAL_COLLECTION_JOB_STATES } from "./model/states";
 import CollectionDescription from "./Collection/CollectionDescription";
 import ContentOptions from "./ContentOptions";
@@ -132,7 +132,7 @@ export default {
         CollectionDescription,
         ContentOptions,
         DatasetDetails,
-        Tags,
+        StatelessTags,
         FontAwesomeIcon,
     },
     props: {
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 89127106f74..dd672669a58 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -3,24 +3,38 @@ import Multiselect from "vue-multiselect";
 import Tag from "./Tag.vue";
 import { ref } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useUserTags } from "composables/user";
 
 const props = defineProps({
     value: {
         type: Array,
         default: () => [],
     },
-    options: {
-        type: Array,
-        default: () => [],
-    },
     disabled: {
         type: Boolean,
         default: false,
     },
 });
 
+const emit = defineEmits(["input"]);
+
+const { userTags, addLocalTag } = useUserTags();
+
 function onAddTag(tag) {
-    console.log(tag);
+    addLocalTag(tag);
+    emit("input", [...props.value, tag]);
+}
+
+function onInput(val) {
+    console.log(val);
+    emit("input", val);
+}
+
+function onDelete(tag) {
+    const val = [...props.value];
+    const index = props.value.indexOf(tag);
+    val.splice(index, 1);
+    emit("input", val);
 }
 
 const editing = ref(false);
@@ -55,15 +69,15 @@ library.add(faTags, faCheck, faTimes, faPlus);
             class=""
             ref="multiselectElement"
             :value="props.value"
-            :options="props.options"
+            :options="userTags"
             :multiple="true"
             :taggable="true"
             @tag="onAddTag"
-            @select="onAddTag"
+            @input="onInput"
             @open="onOpen"
             @close="onClose">
-            <template v-slot:tag="{ option, search, remove }">
-                <Tag :option="option" :search="search" :remove="remove" :editable="true"></Tag>
+            <template v-slot:tag="{ option, search }">
+                <Tag :option="option" :search="search" :editable="true" @deleted="onDelete"></Tag>
             </template>
 
             <template v-slot:noOptions> Type to add new tag </template>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 6813051e633..5e4f2fc5e39 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -11,13 +11,17 @@ const props = defineProps({
     focusable: Boolean,
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "deleted"]);
 
 const color = computed(() => keyedColorScheme(props.option).primary);
 
 function onClick() {
     emit("click", props.option);
 }
+
+function onDelete() {
+    emit("deleted", props.option);
+}
 </script>
 
 <script>
@@ -32,7 +36,13 @@ library.add(faTimes);
         <span>
             {{ props.option }}
         </span>
-        <b-button v-if="editable" size="sm" variant="link" class="px-1 py-0" tabindex="-1" @click="props.remove">
+        <b-button
+            v-if="editable"
+            size="sm"
+            variant="link"
+            class="px-1 py-0"
+            tabindex="-1"
+            @click.prevent.stop="onDelete">
             <FontAwesomeIcon icon="fa-times"></FontAwesomeIcon>
         </b-button>
     </div>
diff --git a/client/src/components/TagsMultiselect/Tags.vue b/client/src/components/TagsMultiselect/Tags.vue
deleted file mode 100644
index 82b70bcada0..00000000000
--- a/client/src/components/TagsMultiselect/Tags.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import StatelessTags from "./StatelessTags.vue";
-import { watch } from "vue";
-import { useUserTags } from "composables/user";
-
-const props = defineProps({
-    value: Array,
-    disabled: Boolean,
-});
-
-const { userTags } = useUserTags();
-
-watch(
-    () => userTags.value,
-    (tags) => console.log(tags)
-);
-</script>
-
-<template>
-    <StatelessTags :value="props.value" :options="userTags" :disabled="props.disabled" />
-</template>

From 1f9b69f3254965149ef6c3749d59584aded78d24 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Nov 2022 14:16:36 +0100
Subject: [PATCH 06/58] fix named tags label

---
 client/src/components/Tags/model.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index 2521c727fe0..c44611e1558 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -10,11 +10,6 @@ import { keyedColorScheme } from "utils/color";
 export const VALID_TAG_RE = /^([^\s.:])+(.[^\s.:]+)*(:[^\s.:]+)?$/;
 
 export class TagModel {
-    text;
-    styles;
-    label;
-    valid;
-
     /**
      * @param {string || object} data
      */
@@ -33,11 +28,11 @@ export class TagModel {
         Object.assign(this, props);
 
         this.text = props.text ?? "";
-        this.label = this.text;
+        this.label = this.text.replace(/^name:/, "#");
         this.styles = "";
 
         if (this.text.startsWith("#")) {
-            this.text = this.text.replace("#", "name:");
+            this.text = this.text.replace(/^#/, "name:");
             this.styles += "font-weight: bold;";
         }
 

From 7ddd1857438d8aa317f9a0ce874b2664c9ec7f2c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Nov 2022 14:20:39 +0100
Subject: [PATCH 07/58] fix bold style

---
 client/src/components/Tags/model.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index c44611e1558..11a47800f31 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -29,18 +29,18 @@ export class TagModel {
 
         this.text = props.text ?? "";
         this.label = this.text.replace(/^name:/, "#");
-        this.styles = "";
+        this.text = this.text.replace(/^#/, "name:");
+        this.style = "";
 
-        if (this.text.startsWith("#")) {
-            this.text = this.text.replace(/^#/, "name:");
-            this.styles += "font-weight: bold;";
+        if (this.text.startsWith("name:")) {
+            this.style += "font-weight: bold;";
         }
 
         const { primary, darker } = keyedColorScheme(this.text);
 
-        this.styles += `background-color: ${primary};`;
-        this.styles += "color: black;";
-        this.styles += `border-color: ${darker};`;
+        this.style += `background-color: ${primary};`;
+        this.style += "color: black;";
+        this.style += `border-color: ${darker};`;
 
         this.valid = VALID_TAG_RE.test(this.text);
 

From e260b2be846b72377318930132b55633f3c7356c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Nov 2022 14:37:16 +0100
Subject: [PATCH 08/58] named tag support

---
 .../src/components/TagsMultiselect/StatelessTags.vue   | 10 ++++++----
 client/src/components/TagsMultiselect/Tag.vue          |  4 +++-
 client/src/composables/user.js                         |  8 ++++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index dd672669a58..2d4479e0930 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -1,7 +1,7 @@
 <script setup>
 import Multiselect from "vue-multiselect";
 import Tag from "./Tag.vue";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useUserTags } from "composables/user";
 
@@ -52,6 +52,8 @@ const multiselectElement = ref(null);
 function openMultiselect() {
     multiselectElement.value.activate();
 }
+
+const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
 </script>
 
 <script>
@@ -68,7 +70,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             placeholder="Add Tags"
             class=""
             ref="multiselectElement"
-            :value="props.value"
+            :value="tags"
             :options="userTags"
             :multiple="true"
             :taggable="true"
@@ -91,7 +93,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
 
             <template v-slot:option="{ option }">
                 <span>{{ option.label ?? option }}</span>
-                <span v-if="value.includes(option)" class="float-right">
+                <span v-if="tags.includes(option)" class="float-right">
                     <FontAwesomeIcon class="check-icon" icon="fa-check"></FontAwesomeIcon>
                     <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
                 </span>
@@ -102,7 +104,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
         </Multiselect>
         <div v-else class="pl-1 pb-2">
             <div class="d-inline">
-                <Tag v-for="tag in props.value" :key="tag" :option="tag" :editable="false"></Tag>
+                <Tag v-for="tag in tags" :key="tag" :option="tag" :editable="false"></Tag>
             </div>
         </div>
     </div>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 5e4f2fc5e39..0dfed346d36 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -22,6 +22,8 @@ function onClick() {
 function onDelete() {
     emit("deleted", props.option);
 }
+
+const named = computed(() => props.option.startsWith("#"));
 </script>
 
 <script>
@@ -33,7 +35,7 @@ library.add(faTimes);
 
 <template>
     <div class="tag" :class="{ editable }" :style="`background-color: ${color};`" @click.prevent.stop="onClick">
-        <span>
+        <span :class="{ 'font-weight-bold': named }">
             {{ props.option }}
         </span>
         <b-button
diff --git a/client/src/composables/user.js b/client/src/composables/user.js
index c2de2a48fb8..da3003587cb 100644
--- a/client/src/composables/user.js
+++ b/client/src/composables/user.js
@@ -39,11 +39,15 @@ export function useUserTags() {
     );
 
     const userTags = computed(() => {
+        let tags;
+
         if (currentUser.value) {
-            return [...currentUser.value.tags_used, ...localTags.value];
+            tags = [...currentUser.value.tags_used, ...localTags.value];
         } else {
-            return localTags.value;
+            tags = localTags.value;
         }
+
+        return tags.map((tag) => tag.replace(/^name:/, "#"));
     });
 
     const addLocalTag = (tag) => {

From 2d853b378f009b3e4461a004380018683cde6db3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 7 Nov 2022 13:32:55 +0100
Subject: [PATCH 09/58] add tag validation remove hide-element class

---
 .../DatasetInformation/DatasetDetails.vue     |  2 +-
 client/src/components/Tags/model.js           |  7 --
 .../TagsMultiselect/StatelessTags.vue         | 92 +++++++++++++------
 client/src/style/scss/ui.scss                 | 12 ---
 4 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/client/src/components/DatasetInformation/DatasetDetails.vue b/client/src/components/DatasetInformation/DatasetDetails.vue
index 9c202627343..b8a7dfdb10f 100644
--- a/client/src/components/DatasetInformation/DatasetDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetDetails.vue
@@ -4,7 +4,7 @@
             :id="datasetId"
             v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
             <div aria-labelledby="dataset-details-heading">
-                <h1 id="dataset-details-heading" class="hide-element">Dataset Details</h1>
+                <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
                 <LoadingSpan v-if="isDatasetLoading" />
                 <Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
                 <CurrentUser v-else v-slot="{ user }">
diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index 11a47800f31..2543ec76f5d 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -56,13 +56,6 @@ export class TagModel {
     }
 }
 
-/**
- * Legacy functions
- *
- * The following two functions are deprecated and will be removed.
- * Do not use them in new code.
- */
-
 // Public factory
 
 export function createTag(data) {
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 2d4479e0930..0aec49a173f 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -21,8 +21,10 @@ const emit = defineEmits(["input"]);
 const { userTags, addLocalTag } = useUserTags();
 
 function onAddTag(tag) {
-    addLocalTag(tag);
-    emit("input", [...props.value, tag]);
+    if (isValid(tag)) {
+        addLocalTag(tag);
+        emit("input", [...props.value, tag]);
+    }
 }
 
 function onInput(val) {
@@ -54,6 +56,16 @@ function openMultiselect() {
 }
 
 const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
+
+const validTagRegex = /^([^.:])+(.[^\s.:]+)*(:[^.:]+)?$/;
+
+function isValid(tag) {
+    if (typeof tag === "string") {
+        return Boolean(tag.match(validTagRegex));
+    } else {
+        return Boolean(tag.label.match(validTagRegex));
+    }
+}
 </script>
 
 <script>
@@ -92,13 +104,24 @@ library.add(faTags, faCheck, faTimes, faPlus);
             </template>
 
             <template v-slot:option="{ option }">
-                <span>{{ option.label ?? option }}</span>
-                <span v-if="tags.includes(option)" class="float-right">
-                    <FontAwesomeIcon class="check-icon" icon="fa-check"></FontAwesomeIcon>
-                    <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
-                </span>
-                <span v-else class="float-right">
-                    <FontAwesomeIcon class="plus-icon" icon="fa-plus"></FontAwesomeIcon>
+                <span class="multiselect-option" :class="{ invalid: !isValid(option) }">
+                    <span>{{ option.label ?? option }}</span>
+                    <span v-if="tags.includes(option)" class="float-right">
+                        <span class="info">
+                            <FontAwesomeIcon class="check-icon" icon="fa-check"></FontAwesomeIcon>
+                        </span>
+
+                        <span class="info highlighted">
+                            <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
+                            <span class="sr-only">add tag</span>
+                        </span>
+                    </span>
+                    <span v-else class="float-right">
+                        <span class="info highlighted">
+                            <FontAwesomeIcon class="plus-icon" icon="fa-plus"></FontAwesomeIcon>
+                            <span class="sr-only">remove tag</span>
+                        </span>
+                    </span>
                 </span>
             </template>
         </Multiselect>
@@ -173,41 +196,58 @@ library.add(faTags, faCheck, faTimes, faPlus);
             padding-left: 0.5rem;
         }
 
+        // built in option class
         .multiselect__option {
-            font-size: $font-size-base;
             min-height: unset;
-            padding: 0.5rem 1rem;
-
-            .plus-icon {
-                display: none;
-            }
+            padding: 0;
 
             &::after {
                 display: none;
             }
 
-            &.multiselect__option--selected {
-                color: $brand-primary;
+            // custom option wrapper
+            .multiselect-option {
+                font-size: $font-size-base;
+                padding: 0.5rem 1rem;
+                display: inline-block;
+                width: 100%;
+                height: 100%;
 
-                .times-icon {
+                .info {
                     display: none;
                 }
+
+                &.invalid {
+                    color: $brand-light;
+                    background-color: $brand-warning;
+                }
+            }
+        }
+
+        .multiselect__option--selected {
+            .multiselect-option {
+                color: $brand-primary;
+
+                .info:not(.highlighted) {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .multiselect__option--highlight {
+            &::after {
+                display: none;
             }
 
-            &.multiselect__option--highlight {
+            .multiselect-option {
                 background: $brand-primary;
                 color: $brand-light;
 
-                .times-icon,
-                .plus-icon {
+                .info.highlighted {
                     display: inline-block;
                 }
 
-                .check-icon {
-                    display: none;
-                }
-
-                &::after {
+                .info:not(.highlighted) {
                     display: none;
                 }
             }
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 14859cd17e1..5f6f0d4cbfb 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -442,15 +442,3 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .h-text {
     font-size: $font-size-base;
 }
-
-/* hides element in a way where it can still be read by screen-readers */
-.hide-element {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}

From a8ae8e1b20037cfecc55853b94e74fef2103b2af Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:29:52 +0100
Subject: [PATCH 10/58] add TagsMultiselect to DetailsLayout

---
 client/src/components/History/Layout/DetailsLayout.vue | 2 +-
 client/src/components/TagsMultiselect/Tag.vue          | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 629388419b3..df5219098f2 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -67,7 +67,7 @@
 <script>
 import { mapGetters } from "vuex";
 import short from "components/directives/v-short";
-import { StatelessTags } from "components/Tags";
+import StatelessTags from "components/TagsMultiselect/StatelessTags";
 
 export default {
     components: {
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 0dfed346d36..5dbfa72ef38 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -34,7 +34,11 @@ library.add(faTimes);
 </script>
 
 <template>
-    <div class="tag" :class="{ editable }" :style="`background-color: ${color};`" @click.prevent.stop="onClick">
+    <div
+        class="tag btn-transparent-background"
+        :class="{ editable }"
+        :style="`background-color: ${color};`"
+        @click.prevent.stop="onClick">
         <span :class="{ 'font-weight-bold': named }">
             {{ props.option }}
         </span>

From e3289f29786a5a1196bc80fc15c1e817a808294c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 11:47:12 +0100
Subject: [PATCH 11/58] invert regular expression to fix performance concern

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 0aec49a173f..e657c7b7b43 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -57,13 +57,13 @@ function openMultiselect() {
 
 const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
 
-const validTagRegex = /^([^.:])+(.[^\s.:]+)*(:[^.:]+)?$/;
+const invalidTagRegex = /([.:\s][.:\s])|(^[.:])|([.:]$)|(^[\s]*$)/;
 
 function isValid(tag) {
     if (typeof tag === "string") {
-        return Boolean(tag.match(validTagRegex));
+        return !tag.match(invalidTagRegex);
     } else {
-        return Boolean(tag.label.match(validTagRegex));
+        return !tag.label.match(invalidTagRegex);
     }
 }
 </script>

From de8167b7c7a961c9d10d4fe7e1bea40ba50a41a7 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 12:38:39 +0100
Subject: [PATCH 12/58] fix local tags always empty

---
 client/src/composables/user.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/client/src/composables/user.js b/client/src/composables/user.js
index da3003587cb..74b265926dc 100644
--- a/client/src/composables/user.js
+++ b/client/src/composables/user.js
@@ -1,4 +1,4 @@
-import { computed, onMounted, inject, watch, ref } from "vue";
+import { computed, onMounted, inject, ref } from "vue";
 
 /**
  * composable user store wrapper
@@ -28,16 +28,6 @@ const localTags = ref([]);
 export function useUserTags() {
     const { currentUser } = useCurrentUser();
 
-    watch(
-        () => currentUser.value,
-        (user) => {
-            // reset local tags if user reloads
-            if (user) {
-                localTags.value = [];
-            }
-        }
-    );
-
     const userTags = computed(() => {
         let tags;
 

From ad2d5c22be73c40c9c9d2f32d87b4a7c9f9adf9c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 13:07:17 +0100
Subject: [PATCH 13/58] add tag-click fixed unit test

---
 .../History/Content/ContentItem.test.js       | 27 ++++++++++++++++---
 .../History/Content/ContentItem.vue           |  9 +++++--
 client/src/components/Tags/model.js           |  2 --
 .../TagsMultiselect/StatelessTags.vue         | 11 +++++---
 client/src/components/TagsMultiselect/Tag.vue |  1 +
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.test.js b/client/src/components/History/Content/ContentItem.test.js
index e731b526132..a18c047cd55 100644
--- a/client/src/components/History/Content/ContentItem.test.js
+++ b/client/src/components/History/Content/ContentItem.test.js
@@ -36,44 +36,63 @@ describe("ContentItem", () => {
                 DatasetDetails: true,
                 vueTagsInput: false,
             },
+            provide: {
+                store: {
+                    dispatch: jest.fn,
+                    getters: {},
+                },
+            },
         });
     });
 
     it("check basics", async () => {
         expect(wrapper.attributes("data-hid")).toBe("1");
         expect(wrapper.find(".content-title").text()).toBe("name");
-        const tags = wrapper.find(".alltags").findAll(".ti-tag");
+        const tags = wrapper.find(".stateless-tags").findAll(".tag");
+
         // verify tags
         expect(tags.length).toBe(3);
+
         for (let i = 0; i < 3; i++) {
             expect(tags.at(i).text()).toBe(`tag${i + 1}`);
-            await tags.at(i).find(".tag-name").trigger("click");
+
+            await tags.at(i).trigger("click");
             expect(wrapper.emitted()["tag-click"][i][0]).toBe(`tag${i + 1}`);
         }
+
         // close all tags
         for (let i = 0; i < 3; i++) {
-            const tagRemover = wrapper.find(".ti-icon-close");
+            const tagRemover = wrapper.find(`.tag[data-option=tag${i + 1}] button`);
+
             await tagRemover.trigger("click");
             expect(wrapper.emitted()["tag-change"][i][1]).not.toContain(`tag${i + 1}`);
         }
+
         await wrapper.setProps({ isHistoryItem: false, item: { tags: [] } });
-        expect(wrapper.find(".alltags").exists()).toBe(false);
+        expect(wrapper.find(".stateless-tags").exists()).toBe(false);
+
         // expansion button
         const $el = wrapper.find(".cursor-pointer");
         $el.trigger("click");
         expect(wrapper.emitted()["update:expand-dataset"]).toBeDefined();
+
         // select and unselect
         const noSelector = wrapper.find(".selector > svg");
         expect(noSelector.exists()).toBe(false);
+
         await wrapper.setProps({ selectable: true });
         expect(wrapper.classes()).toEqual(expect.arrayContaining(["alert-success"]));
+
         const selector = wrapper.find(".selector > svg");
         expect(selector.attributes("data-icon")).toBe("square");
         selector.trigger("click");
+
         await localVue.nextTick();
         expect(wrapper.emitted()["update:selected"][0][0]).toBe(true);
+
         await wrapper.setProps({ selected: true });
         selector.trigger("click");
+
         await localVue.nextTick();
         expect(wrapper.emitted()["update:selected"][1][0]).toBe(false);
         expect(wrapper.classes()).toEqual(expect.arrayContaining(["alert-info"]));
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 359a70a12aa..a4316608678 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -98,7 +98,12 @@
             :disabled="tagsDisabled"
             @tag-click="onTagClick"
             @input="onTags" /-->
-        <StatelessTags v-if="!tagsDisabled || hasTags" :value="tags" :disabled="tagsDisabled" @input="onTags" />
+        <StatelessTags
+            v-if="!tagsDisabled || hasTags"
+            :value="tags"
+            :disabled="tagsDisabled"
+            @input="onTags"
+            @tag-click="onTagClick" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <b-collapse :visible="expandDataset">
             <DatasetDetails
@@ -243,7 +248,7 @@ export default {
             updateContentFields(this.item, { tags: newTags });
         },
         onTagClick(tag) {
-            this.$emit("tag-click", tag.label);
+            this.$emit("tag-click", tag);
         },
         toggleHighlights() {
             this.$emit("toggleHighlights", this.item);
diff --git a/client/src/components/Tags/model.js b/client/src/components/Tags/model.js
index 2543ec76f5d..ced4f989655 100644
--- a/client/src/components/Tags/model.js
+++ b/client/src/components/Tags/model.js
@@ -43,8 +43,6 @@ export class TagModel {
         this.style += `border-color: ${darker};`;
 
         this.valid = VALID_TAG_RE.test(this.text);
-
-        Object.freeze(this);
     }
 
     equals(otherTag) {
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index e657c7b7b43..c8e05d6e0df 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -16,7 +16,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(["input"]);
+const emit = defineEmits(["input", "tag-click"]);
 
 const { userTags, addLocalTag } = useUserTags();
 
@@ -28,7 +28,6 @@ function onAddTag(tag) {
 }
 
 function onInput(val) {
-    console.log(val);
     emit("input", val);
 }
 
@@ -66,6 +65,10 @@ function isValid(tag) {
         return !tag.label.match(invalidTagRegex);
     }
 }
+
+function onTagClicked(tag) {
+    emit("tag-click", tag);
+}
 </script>
 
 <script>
@@ -91,7 +94,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             @open="onOpen"
             @close="onClose">
             <template v-slot:tag="{ option, search }">
-                <Tag :option="option" :search="search" :editable="true" @deleted="onDelete"></Tag>
+                <Tag :option="option" :search="search" :editable="true" @deleted="onDelete" @click="onTagClicked"></Tag>
             </template>
 
             <template v-slot:noOptions> Type to add new tag </template>
@@ -127,7 +130,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
         </Multiselect>
         <div v-else class="pl-1 pb-2">
             <div class="d-inline">
-                <Tag v-for="tag in tags" :key="tag" :option="tag" :editable="false"></Tag>
+                <Tag v-for="tag in tags" :key="tag" :option="tag" :editable="false" @click="onTagClicked"></Tag>
             </div>
         </div>
     </div>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 5dbfa72ef38..7e73a12efa6 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -36,6 +36,7 @@ library.add(faTimes);
 <template>
     <div
         class="tag btn-transparent-background"
+        :data-option="props.option"
         :class="{ editable }"
         :style="`background-color: ${color};`"
         @click.prevent.stop="onClick">

From 50e4d7101264bbf6d92ab14e3402e908d51d5e76 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 13:14:56 +0100
Subject: [PATCH 14/58] fix untrimmed tags

---
 .../src/components/TagsMultiselect/StatelessTags.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index c8e05d6e0df..39f73503217 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -21,9 +21,11 @@ const emit = defineEmits(["input", "tag-click"]);
 const { userTags, addLocalTag } = useUserTags();
 
 function onAddTag(tag) {
-    if (isValid(tag)) {
-        addLocalTag(tag);
-        emit("input", [...props.value, tag]);
+    const newTag = tag.trim();
+
+    if (isValid(newTag)) {
+        addLocalTag(newTag);
+        emit("input", [...props.value, newTag]);
     }
 }
 
@@ -33,7 +35,7 @@ function onInput(val) {
 
 function onDelete(tag) {
     const val = [...props.value];
-    const index = props.value.indexOf(tag);
+    const index = props.value.indexOf(tag.trim());
     val.splice(index, 1);
     emit("input", val);
 }
@@ -83,8 +85,8 @@ library.add(faTags, faCheck, faTimes, faPlus);
         <Multiselect
             v-if="!disabled"
             placeholder="Add Tags"
-            class=""
             ref="multiselectElement"
+            class=""
             :value="tags"
             :options="userTags"
             :multiple="true"

From da2edc0844eb168c2faa11eb43039268e8c24197 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 13:42:53 +0100
Subject: [PATCH 15/58] add clickability hint

---
 .../History/Content/ContentItem.vue           |  9 +------
 .../TagsMultiselect/StatelessTags.vue         | 20 ++++++++++++++--
 client/src/components/TagsMultiselect/Tag.vue | 24 ++++++++++++++++---
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index a4316608678..595bdd36db0 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -90,18 +90,11 @@
             :collection-type="item.collection_type"
             :element-count="item.element_count"
             :elements-datatypes="item.elements_datatypes" />
-        <!--StatelessTags
-            v-if="!tagsDisabled || hasTags"
-            class="alltags p-1"
-            :value="tags"
-            :use-toggle-link="false"
-            :disabled="tagsDisabled"
-            @tag-click="onTagClick"
-            @input="onTags" /-->
         <StatelessTags
             v-if="!tagsDisabled || hasTags"
             :value="tags"
             :disabled="tagsDisabled"
+            :clickable="true"
             @input="onTags"
             @tag-click="onTagClick" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 39f73503217..bfad0e9b7bd 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -14,6 +14,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(["input", "tag-click"]);
@@ -96,7 +100,13 @@ library.add(faTags, faCheck, faTimes, faPlus);
             @open="onOpen"
             @close="onClose">
             <template v-slot:tag="{ option, search }">
-                <Tag :option="option" :search="search" :editable="true" @deleted="onDelete" @click="onTagClicked"></Tag>
+                <Tag
+                    :option="option"
+                    :search="search"
+                    :editable="true"
+                    :clickable="props.clickable"
+                    @deleted="onDelete"
+                    @click="onTagClicked"></Tag>
             </template>
 
             <template v-slot:noOptions> Type to add new tag </template>
@@ -132,7 +142,13 @@ library.add(faTags, faCheck, faTimes, faPlus);
         </Multiselect>
         <div v-else class="pl-1 pb-2">
             <div class="d-inline">
-                <Tag v-for="tag in tags" :key="tag" :option="tag" :editable="false" @click="onTagClicked"></Tag>
+                <Tag
+                    v-for="tag in tags"
+                    :key="tag"
+                    :option="tag"
+                    :editable="false"
+                    :clickable="props.clickable"
+                    @click="onTagClicked"></Tag>
             </div>
         </div>
     </div>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 7e73a12efa6..97ec4bf0c3d 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -9,11 +9,12 @@ const props = defineProps({
     remove: Function,
     editable: Boolean,
     focusable: Boolean,
+    clickable: Boolean,
 });
 
 const emit = defineEmits(["click", "deleted"]);
 
-const color = computed(() => keyedColorScheme(props.option).primary);
+const color = computed(() => keyedColorScheme(props.option));
 
 function onClick() {
     emit("click", props.option);
@@ -37,8 +38,8 @@ library.add(faTimes);
     <div
         class="tag btn-transparent-background"
         :data-option="props.option"
-        :class="{ editable }"
-        :style="`background-color: ${color};`"
+        :class="{ editable, clickable }"
+        :style="`background-color: ${color.primary}; border-color: ${color.darker}`"
         @click.prevent.stop="onClick">
         <span :class="{ 'font-weight-bold': named }">
             {{ props.option }}
@@ -74,5 +75,22 @@ library.add(faTimes);
     &.editable {
         padding: 0 0.25rem;
     }
+
+    &.clickable {
+        position: relative;
+        &:hover {
+            &:before {
+                content: "";
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                position: absolute;
+                border: 2px solid;
+                border-color: inherit;
+                border-radius: inherit;
+            }
+        }
+    }
 }
 </style>

From 63652cbab51047291389593d86278805841c672e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 14:32:38 +0100
Subject: [PATCH 16/58] add keyboard navigation for history

---
 .../History/Content/ContentItem.vue           | 62 +++++++++----------
 .../History/Content/ContentOptions.vue        |  9 +++
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 595bdd36db0..a4a2244ccf7 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -3,37 +3,18 @@
         :id="contentId"
         :class="['content-item m-1 p-0 rounded btn-transparent-background', contentCls]"
         :data-hid="id"
-        :data-state="state">
-        <div
-            class="p-1 cursor-pointer"
-            draggable
-            tabindex="0"
-            @dragstart="onDragStart"
-            @click.stop="onClick"
-            @keypress="onClick">
+        :data-state="state"
+        tabindex="0"
+        role="button"
+        @keydown="onKeyDown">
+        <div class="p-1 cursor-pointer" draggable @dragstart="onDragStart" @click.stop="onClick">
             <div class="d-flex justify-content-between">
                 <span class="p-1 font-weight-bold">
-                    <span v-if="selectable" class="selector">
-                        <icon
-                            v-if="selected"
-                            fixed-width
-                            size="lg"
-                            :icon="['far', 'check-square']"
-                            @click.stop="$emit('update:selected', false)" />
-                        <icon
-                            v-else
-                            fixed-width
-                            size="lg"
-                            :icon="['far', 'square']"
-                            @click.stop="$emit('update:selected', true)" />
-                    </span>
-                    <span
-                        v-if="highlight == 'input'"
-                        v-b-tooltip.hover
-                        title="Input"
-                        tabindex="0"
-                        @click.stop="toggleHighlights"
-                        @keypress="toggleHighlights">
+                    <b-button v-if="selectable" class="selector p-0" @click.stop="$emit('update:selected', !selected)">
+                        <icon v-if="selected" fixed-width size="lg" :icon="['far', 'check-square']" />
+                        <icon v-else fixed-width size="lg" :icon="['far', 'square']" />
+                    </b-button>
+                    <span v-if="highlight == 'input'" v-b-tooltip.hover title="Input" @click.stop="toggleHighlights">
                         <font-awesome-icon class="text-info" icon="arrow-circle-up" />
                     </span>
                     <span
@@ -75,6 +56,7 @@
                     :is-visible="item.visible"
                     :state="state"
                     :item-urls="itemUrls"
+                    :keyboard-selectable="expandDataset"
                     @delete="$emit('delete')"
                     @display="onDisplay"
                     @showCollectionInfo="onShowCollectionInfo"
@@ -215,6 +197,15 @@ export default {
         },
     },
     methods: {
+        onKeyDown(event) {
+            if (!event.target.classList.contains("content-item")) {
+                return;
+            }
+
+            if (event.key === "Enter" || event.key === " ") {
+                this.onClick();
+            }
+        },
         onClick() {
             if (this.isDataset) {
                 this.$emit("update:expand-dataset", !this.expandDataset);
@@ -249,13 +240,18 @@ export default {
     },
 };
 </script>
-<style lang="scss">
-.content-item:hover {
-    //filter: brightness(105%);
-}
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
 .content-item {
     .name {
         word-break: break-all;
     }
+
+    // improve focus visibility
+    &:deep(.btn:focus) {
+        box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
+    }
 }
 </style>
diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index c2a9d8e4c49..d1b442cc73d 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -17,6 +17,7 @@
             v-if="isDataset"
             :disabled="displayDisabled"
             :title="displayButtonTitle"
+            :tabindex="tabindex"
             class="display-btn px-1"
             size="sm"
             variant="link"
@@ -28,6 +29,7 @@
             v-if="writable && isHistoryItem"
             :disabled="editDisabled"
             :title="editButtonTitle"
+            :tabindex="tabindex"
             class="edit-btn px-1"
             size="sm"
             variant="link"
@@ -37,6 +39,7 @@
         </b-button>
         <b-button
             v-if="writable && isHistoryItem && !isDeleted"
+            :tabindex="tabindex"
             class="delete-btn px-1"
             title="Delete"
             size="sm"
@@ -46,6 +49,7 @@
         </b-button>
         <b-button
             v-if="writable && isHistoryItem && isDeleted"
+            :tabindex="tabindex"
             class="undelete-btn px-1"
             title="Undelete"
             size="sm"
@@ -55,6 +59,7 @@
         </b-button>
         <b-button
             v-if="writable && isHistoryItem && !isVisible"
+            :tabindex="tabindex"
             class="unhide-btn px-1"
             title="Unhide"
             size="sm"
@@ -76,6 +81,7 @@ export default {
         isVisible: { type: Boolean, default: true },
         state: { type: String, default: "" },
         itemUrls: { type: Object, required: true },
+        keyboardSelectable: { type: Boolean, default: true },
     },
     computed: {
         displayButtonTitle() {
@@ -111,6 +117,9 @@ export default {
         showCollectionDetailsUrl() {
             return prependPath(this.itemUrls.showDetails);
         },
+        tabindex() {
+            return this.keyboardSelectable ? "0" : "-1";
+        },
     },
 };
 </script>

From 617b9ee6eaa8720bbae619404f8201fc5e40df4b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 16:13:13 +0100
Subject: [PATCH 17/58] fix selenium test history panel

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 1 -
 client/src/utils/navigation/navigation.yml              | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index bfad0e9b7bd..9bfd9735dfa 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -90,7 +90,6 @@ library.add(faTags, faCheck, faTimes, faPlus);
             v-if="!disabled"
             placeholder="Add Tags"
             ref="multiselectElement"
-            class=""
             :value="tags"
             :options="userTags"
             :multiple="true"
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 9ec0762b59a..8dba8b9c72c 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -188,7 +188,7 @@ history_panel:
       # Action buttons...
       download_button: '${_} .download-btn'
       info_button: '${_} .params-btn'
-      alltags: '${_} .alltags .ti-tags'
+      alltags: '${_} .stateless-tags .tags'
       metadata_file_download: '${_} [data-description="download ${metadata_name}"]'
 
       dataset_operations_dropdown: '${_}  .dataset-actions'
@@ -202,7 +202,7 @@ history_panel:
       form: '${_} [data-description="edit form"]'
       name_input: '${_} [data-description="name input"]'
       annotation_input: '${_} [data-description="annotation input"]'
-      tags_input: '${_} .tags input'
+      tags_input: '${_} .stateless-tags button'
       save_button: '${_} [data-description="editor save button"]'
 
   # history tags

From 40adc9f9a5416ff88087f1deb5bbb5847d2b80b1 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 16:19:16 +0100
Subject: [PATCH 18/58] only show pointer on clickable tags

---
 client/src/components/TagsMultiselect/Tag.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 97ec4bf0c3d..56fd4f1d990 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -69,7 +69,6 @@ library.add(faTimes);
     font-size: $font-size-base * 0.95;
     color: black;
     border-radius: 4px;
-    cursor: pointer;
 
     padding: 0 0.5rem;
     &.editable {
@@ -77,7 +76,9 @@ library.add(faTimes);
     }
 
     &.clickable {
+        cursor: pointer;
         position: relative;
+
         &:hover {
             &:before {
                 content: "";

From 7598a033cb79160b297745ce2d33b46802edad0d Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 16:23:35 +0100
Subject: [PATCH 19/58] fix tag delete button

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 ++--
 client/src/components/TagsMultiselect/Tag.vue           | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 9bfd9735dfa..5b0fdc828e2 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -38,8 +38,8 @@ function onInput(val) {
 }
 
 function onDelete(tag) {
-    const val = [...props.value];
-    const index = props.value.indexOf(tag.trim());
+    const val = [...tags.value];
+    const index = tags.value.indexOf(tag);
     val.splice(index, 1);
     emit("input", val);
 }
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 56fd4f1d990..f362fe30647 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -90,6 +90,7 @@ library.add(faTimes);
                 border: 2px solid;
                 border-color: inherit;
                 border-radius: inherit;
+                pointer-events: none;
             }
         }
     }

From 6ac6ef15b6e1267f8fcaa744f9276ed8c8432194 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Nov 2022 17:17:03 +0100
Subject: [PATCH 20/58] fix wrong sr annotations

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 5b0fdc828e2..b42c0572e72 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -127,13 +127,13 @@ library.add(faTags, faCheck, faTimes, faPlus);
 
                         <span class="info highlighted">
                             <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
-                            <span class="sr-only">add tag</span>
+                            <span class="sr-only">remove tag</span>
                         </span>
                     </span>
                     <span v-else class="float-right">
                         <span class="info highlighted">
                             <FontAwesomeIcon class="plus-icon" icon="fa-plus"></FontAwesomeIcon>
-                            <span class="sr-only">remove tag</span>
+                            <span class="sr-only">add tag</span>
                         </span>
                     </span>
                 </span>

From eb5a6aefafac82de0ed75048240f79bbc3c89a6a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 16 Nov 2022 16:26:05 +0100
Subject: [PATCH 21/58] remove never hit test route replace tag selectors

---
 client/src/components/TagsMultiselect/Tag.vue | 2 +-
 client/src/utils/navigation/navigation.yml    | 9 ++++-----
 lib/galaxy/selenium/navigates_galaxy.py       | 6 ------
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index f362fe30647..48c8621621c 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -48,7 +48,7 @@ library.add(faTimes);
             v-if="editable"
             size="sm"
             variant="link"
-            class="px-1 py-0"
+            class="px-1 py-0 tag-delete-button"
             tabindex="-1"
             @click.prevent.stop="onDelete">
             <FontAwesomeIcon icon="fa-times"></FontAwesomeIcon>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 8dba8b9c72c..a4238e17488 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -251,11 +251,10 @@ history_panel:
     contents: '.history-index .content-item'
     empty_message: '.empty-message'
     size: '.history-size'
-    tag_icon: '.actions .history-tag-btn'
-    tag_area: '.details .tags-display'
-    tag_area_input: '.details .tags-display .tags-input input'
-    tag_close_btn: '.tags-display .ti-icon-close'
-    tags: 'li.ti-tag.ti-valid .tag-name'
+    tag_area: '.details .stateless-tags'
+    tag_area_input: '.details .stateless-tags .multiselect button'
+    tag_close_btn: '.tags-display .tag-delete-button'
+    tags: '.tag span'
 
     annotation_icon: '.actions .history-annotate-btn'
     annotation_area: '.details .history-annotation'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index ebb40283497..913160870de 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1515,14 +1515,8 @@ class NavigatesGalaxy(HasDriver):
 
     @edit_details
     def history_panel_add_tags(self, tags):
-        tag_icon = self.components.history_panel.tag_icon
-        tag_area = self.components.history_panel.tag_area
         tag_area_input = self.components.history_panel.tag_area_input
 
-        # if the tag editor is not present but the tag_icon is, then click it
-        if not tag_icon.is_absent and (tag_area.is_absent or not tag_area.is_displayed):
-            tag_icon.wait_for_and_click()
-
         input_element = tag_area_input.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
 

From bc4a36ebf93c42f45865b07d7c429e43612b79e9 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 17 Nov 2022 16:28:29 +0100
Subject: [PATCH 22/58] add noFetch prop to user composable

---
 client/src/composables/user.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/composables/user.js b/client/src/composables/user.js
index 74b265926dc..4d2c42245e5 100644
--- a/client/src/composables/user.js
+++ b/client/src/composables/user.js
@@ -1,16 +1,19 @@
-import { computed, onMounted, inject, ref } from "vue";
+import { computed, onMounted, inject, ref, unref } from "vue";
 
 /**
  * composable user store wrapper
+ * @param { boolean | ref<boolean> } noFetch when true, the user will not be fetched from the server
  * @returns currentUser computed
  */
-export function useCurrentUser() {
+export function useCurrentUser(noFetch = false) {
     const store = inject("store");
 
     const currentUser = computed(() => store.getters["user/currentUser"]);
 
     onMounted(() => {
-        store.dispatch("user/loadUser");
+        if (!unref(noFetch)) {
+            store.dispatch("user/loadUser");
+        }
     });
 
     const addFavoriteTool = async (toolId) => await store.dispatch("user/addFavoriteTool", toolId);
@@ -26,7 +29,7 @@ const localTags = ref([]);
  * Keeps tracks of the tags the current user has used.
  */
 export function useUserTags() {
-    const { currentUser } = useCurrentUser();
+    const { currentUser } = useCurrentUser(true);
 
     const userTags = computed(() => {
         let tags;

From 7ed588a8d0d90cb2dc0b6b2be5c74ecf6f64e360 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 17 Nov 2022 17:07:39 +0100
Subject: [PATCH 23/58] add filterable prop fix multi-history-view tags
 filterable

---
 client/src/components/History/Content/ContentItem.vue      | 7 +++++--
 .../History/CurrentCollection/CollectionPanel.vue          | 2 ++
 .../src/components/History/CurrentHistory/HistoryPanel.vue | 2 ++
 client/src/components/History/Index.vue                    | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index a4a2244ccf7..40753abe8ea 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -76,7 +76,7 @@
             v-if="!tagsDisabled || hasTags"
             :value="tags"
             :disabled="tagsDisabled"
-            :clickable="true"
+            :clickable="filterable"
             @input="onTags"
             @tag-click="onTagClick" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
@@ -126,6 +126,7 @@ export default {
         name: { type: String, required: true },
         selected: { type: Boolean, default: false },
         selectable: { type: Boolean, default: false },
+        filterable: { type: Boolean, default: false },
     },
     computed: {
         jobState() {
@@ -232,7 +233,9 @@ export default {
             updateContentFields(this.item, { tags: newTags });
         },
         onTagClick(tag) {
-            this.$emit("tag-click", tag);
+            if (this.filterable) {
+                this.$emit("tag-click", tag);
+            }
         },
         toggleHighlights() {
             this.$emit("toggleHighlights", this.item);
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 68af5a016f4..eb69d0ee598 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -28,6 +28,7 @@
                                     :name="item.element_identifier"
                                     :expand-dataset="isExpanded(item)"
                                     :is-dataset="item.element_type == 'hda'"
+                                    :filterable="filterable"
                                     @update:expand-dataset="setExpanded(item, $event)"
                                     @view-collection="onViewSubCollection" />
                             </template>
@@ -63,6 +64,7 @@ export default {
         history: { type: Object, required: true },
         selectedCollections: { type: Array, required: true },
         showControls: { type: Boolean, default: true },
+        filterable: { type: Boolean, default: false },
     },
     data() {
         return {
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 45b4cafeb58..af66154bcd7 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -123,6 +123,7 @@
                                         :highlight="getHighlight(item)"
                                         :selected="isSelected(item)"
                                         :selectable="showSelection"
+                                        :filterable="filterable"
                                         @tag-click="onTagClick"
                                         @tag-change="onTagChange"
                                         @toggleHighlights="toggleHighlights"
@@ -194,6 +195,7 @@ export default {
         filter: { type: String, default: "" },
         writable: { type: Boolean, default: true },
         showControls: { type: Boolean, default: true },
+        filterable: { type: Boolean, default: false },
     },
     data() {
         return {
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index da6677092f2..91aff574db1 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -6,6 +6,7 @@
                     v-if="!breadcrumbs.length"
                     :list-offset="listOffset"
                     :history="currentHistory"
+                    :filterable="true"
                     v-on="handlers"
                     @view-collection="onViewCollection">
                     <template v-slot:navigation>

From 46ab32f19775cf5f418997d2a42afe03836b85dc Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 12:12:25 +0100
Subject: [PATCH 24/58] fix content-item test

---
 client/src/components/History/Content/ContentItem.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/History/Content/ContentItem.test.js b/client/src/components/History/Content/ContentItem.test.js
index a18c047cd55..ce8e4673233 100644
--- a/client/src/components/History/Content/ContentItem.test.js
+++ b/client/src/components/History/Content/ContentItem.test.js
@@ -30,6 +30,7 @@ describe("ContentItem", () => {
                 name: "name",
                 selected: false,
                 selectable: false,
+                filterable: true,
             },
             localVue,
             stubs: {

From 6589dd502ca86e81eaf6310ce25c12fa265a8c77 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 12:30:53 +0100
Subject: [PATCH 25/58] fix appearance for no options

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index b42c0572e72..10339849d31 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -108,7 +108,9 @@ library.add(faTags, faCheck, faTimes, faPlus);
                     @click="onTagClicked"></Tag>
             </template>
 
-            <template v-slot:noOptions> Type to add new tag </template>
+            <template v-slot:noOptions>
+                <span class="multiselect-option">Type to add new tag</span>
+            </template>
 
             <template v-slot:caret>
                 <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">

From 680d99ea1e26d55f0ae24bd23732c705e745131f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 13:23:32 +0100
Subject: [PATCH 26/58] fix selenium tag input

---
 client/src/utils/navigation/navigation.yml | 6 ++++--
 lib/galaxy/selenium/navigates_galaxy.py    | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index a4238e17488..73476258437 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -237,7 +237,8 @@ history_panel:
       title_input: '.dataset-collection-panel .controls .title input'
       subtitle: '.dataset-collection-panel .controls .title .subtitle'
       elements_warning: '.dataset-collection-panel .controls .elements-warning'
-      tag_area_input: '.controls .tags-display .tags-input input'
+      tag_area_button: '.details .stateless-tags .multiselect button'
+      tag_area_input: '.details .stateless-tags .multiselect input'
       list_items: '.dataset-collection-panel .listing .content-item'
 
   selectors:
@@ -252,7 +253,8 @@ history_panel:
     empty_message: '.empty-message'
     size: '.history-size'
     tag_area: '.details .stateless-tags'
-    tag_area_input: '.details .stateless-tags .multiselect button'
+    tag_area_button: '.details .stateless-tags .multiselect button'
+    tag_area_input: '.details .stateless-tags .multiselect input'
     tag_close_btn: '.tags-display .tag-delete-button'
     tags: '.tag span'
 
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 913160870de..127dad124b3 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1515,10 +1515,10 @@ class NavigatesGalaxy(HasDriver):
 
     @edit_details
     def history_panel_add_tags(self, tags):
-        tag_area_input = self.components.history_panel.tag_area_input
+        tag_area_button = self.components.history_panel.tag_area_button
 
-        input_element = tag_area_input.wait_for_and_click()
-        self.sleep_for(self.wait_types.UX_RENDER)
+        tag_area_button.wait_for_and_click()
+        input_element = self.components.history_panel.tag_area_input.wait_for_visible()
 
         for tag in tags:
             input_element.send_keys(tag)

From a42a5c6a237beee4c51cf94483c14ab2e6228870 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 13:49:36 +0100
Subject: [PATCH 27/58] fix input multiple tags at once

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 1 +
 lib/galaxy/selenium/navigates_galaxy.py                 | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 10339849d31..fa7cec725e2 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -94,6 +94,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             :options="userTags"
             :multiple="true"
             :taggable="true"
+            :closeOnSelect="false"
             @tag="onAddTag"
             @input="onInput"
             @open="onOpen"
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 127dad124b3..255acecda96 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1525,6 +1525,8 @@ class NavigatesGalaxy(HasDriver):
             self.send_enter(input_element)
             self.sleep_for(self.wait_types.UX_RENDER)
 
+        self.send_escape(input_element)
+
     @edit_details
     def history_panel_rename(self, new_name):
         editable_text_input_element = self.history_panel_name_input()

From 542711e1bbed648bd3fee860217cf967620e47d5 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:18:36 +0100
Subject: [PATCH 28/58] add hover brightness without filter

---
 .../History/Content/ContentItem.vue           | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 40753abe8ea..967189e3fc8 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -245,6 +245,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~bootstrap/scss/_functions.scss";
 @import "theme/blue.scss";
 
 .content-item {
@@ -256,5 +257,24 @@ export default {
     &:deep(.btn:focus) {
         box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
     }
+
+    $states: (
+        "success": $state-success-bg,
+        "info": $state-info-bg,
+        "danger": $state-danger-bg,
+        "warning": $state-warning-bg,
+    );
+
+    @each $state, $bg-color in $states {
+        &.alert-#{$state}:hover {
+            &:focus {
+                background-color: scale-color($bg-color, $lightness: -5%);
+            }
+
+            &:not(:focus) {
+                background-color: lighten($bg-color, 5%);
+            }
+        }
+    }
 }
 </style>

From 6e2e18ab23a90f32a78d5e7f6b64c5106d568dcc Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:57:30 +0100
Subject: [PATCH 29/58] darken chevron

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index fa7cec725e2..333c7773288 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -171,6 +171,10 @@ library.add(faTags, faCheck, faTimes, faPlus);
             padding: 0 0.25rem;
             z-index: 1;
             height: $font-size-base * 2;
+
+            &::before {
+                border-color: $text-color transparent transparent;
+            }
         }
 
         .multiselect__placeholder {

From 4dc8532ca032a810bbb279c19c86a2dbec0d2eab Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:58:27 +0100
Subject: [PATCH 30/58] fix hover brightness on focused items

---
 client/src/components/History/Content/ContentItem.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 967189e3fc8..0b26cddafe8 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -267,11 +267,12 @@ export default {
 
     @each $state, $bg-color in $states {
         &.alert-#{$state}:hover {
-            &:focus {
+            &:focus,
+            &:focus-within {
                 background-color: scale-color($bg-color, $lightness: -5%);
             }
 
-            &:not(:focus) {
+            &:not(:focus, :focus-within) {
                 background-color: lighten($bg-color, 5%);
             }
         }

From b00d152c47c1a133b877b2a6c39ef086a469765f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 18 Nov 2022 15:02:16 +0100
Subject: [PATCH 31/58] add warning when attempting to add invalid tag

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 333c7773288..2f9947ad9a5 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -4,6 +4,7 @@ import Tag from "./Tag.vue";
 import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useUserTags } from "composables/user";
+import { useToast } from "composables/toast";
 
 const props = defineProps({
     value: {
@@ -23,6 +24,7 @@ const props = defineProps({
 const emit = defineEmits(["input", "tag-click"]);
 
 const { userTags, addLocalTag } = useUserTags();
+const { warning } = useToast();
 
 function onAddTag(tag) {
     const newTag = tag.trim();
@@ -30,6 +32,8 @@ function onAddTag(tag) {
     if (isValid(newTag)) {
         addLocalTag(newTag);
         emit("input", [...props.value, newTag]);
+    } else {
+        warning(`"${newTag}" is not a valid tag.`, "Invalid Tag");
     }
 }
 

From 863a2ca4e05a2d9e51fdee55e3eb68deb71f7404 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 28 Nov 2022 12:49:54 +0100
Subject: [PATCH 32/58] fix selenium tag selectors

---
 client/src/utils/navigation/navigation.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 73476258437..461ddf620fc 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -158,7 +158,7 @@ history_panel:
       info_button: '${_} .params-btn'
       tool_help_button: '${_} .fa.fa-question'
       rerun_button: '${_} .rerun-btn'
-      alltags: '${_} .alltags .ti-tags'
+      alltags: '${_} .stateless-tags .tag'
 
   # history content item
   content_item:
@@ -188,7 +188,7 @@ history_panel:
       # Action buttons...
       download_button: '${_} .download-btn'
       info_button: '${_} .params-btn'
-      alltags: '${_} .stateless-tags .tags'
+      alltags: '${_} .stateless-tags .tag'
       metadata_file_download: '${_} [data-description="download ${metadata_name}"]'
 
       dataset_operations_dropdown: '${_}  .dataset-actions'

From c6388694de834277ee51fdd898305cd8aba4e96f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:24:53 +0100
Subject: [PATCH 33/58] reintroduce toggle-link

---
 .../History/Content/ContentItem.vue           |  1 +
 .../TagsMultiselect/StatelessTags.vue         | 58 ++++++++++++++++++-
 client/src/composables/utils/uid.js           | 14 +++++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 client/src/composables/utils/uid.js

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 0b26cddafe8..b8cf53d6e81 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -77,6 +77,7 @@
             :value="tags"
             :disabled="tagsDisabled"
             :clickable="filterable"
+            :useToggleLink="false"
             @input="onTags"
             @tag-click="onTagClick" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 2f9947ad9a5..2c7c036e253 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -5,6 +5,7 @@ import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useUserTags } from "composables/user";
 import { useToast } from "composables/toast";
+import { useUid } from "composables/utils/uid";
 
 const props = defineProps({
     value: {
@@ -19,6 +20,14 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    useToggleLink: {
+        type: Boolean,
+        default: true,
+    },
+    maxVisibleTags: {
+        type: Number,
+        default: 5,
+    },
 });
 
 const emit = defineEmits(["input", "tag-click"]);
@@ -66,6 +75,25 @@ function openMultiselect() {
 
 const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
 
+const toggledOpen = ref(false);
+const toggleButtonId = useUid("toggle-link-");
+
+const trimmedTags = computed(() => {
+    if (!props.useToggleLink || toggledOpen.value) {
+        return tags.value;
+    } else {
+        return tags.value.slice(0, props.maxVisibleTags);
+    }
+});
+
+const slicedTags = computed(() => {
+    if (!props.useToggleLink) {
+        return [];
+    } else {
+        return tags.value.slice(props.maxVisibleTags);
+    }
+});
+
 const invalidTagRegex = /([.:\s][.:\s])|(^[.:])|([.:]$)|(^[\s]*$)/;
 
 function isValid(tag) {
@@ -149,12 +177,30 @@ library.add(faTags, faCheck, faTimes, faPlus);
         <div v-else class="pl-1 pb-2">
             <div class="d-inline">
                 <Tag
-                    v-for="tag in tags"
+                    v-for="tag in trimmedTags"
                     :key="tag"
                     :option="tag"
                     :editable="false"
                     :clickable="props.clickable"
                     @click="onTagClicked"></Tag>
+                <b-button
+                    v-if="slicedTags.length > 0 && !toggledOpen"
+                    variant="link"
+                    class="toggle-link"
+                    :id="toggleButtonId"
+                    @click="() => (toggledOpen = true)">
+                    {{ slicedTags.length }} more...
+                </b-button>
+
+                <b-tooltip :target="toggleButtonId" placement="bottom">
+                    <Tag
+                        v-for="tag in slicedTags"
+                        :key="tag"
+                        :option="tag"
+                        :editable="false"
+                        :clickable="props.clickable"
+                        @click="onTagClicked"></Tag>
+                </b-tooltip>
             </div>
         </div>
     </div>
@@ -164,6 +210,16 @@ library.add(faTags, faCheck, faTimes, faPlus);
 @import "scss/theme/blue.scss";
 
 .stateless-tags {
+    .toggle-link {
+        padding: 0;
+        border: none;
+
+        &:hover {
+            background-color: transparent;
+            border: none;
+        }
+    }
+
     &:deep(.multiselect) {
         min-height: unset;
         display: flex;
diff --git a/client/src/composables/utils/uid.js b/client/src/composables/utils/uid.js
new file mode 100644
index 00000000000..812bc1edf7e
--- /dev/null
+++ b/client/src/composables/utils/uid.js
@@ -0,0 +1,14 @@
+import { computed, unref } from "vue";
+
+var idCounter = 0;
+
+/**
+ * Returns a page-unique id with and optional reactive prefix
+ */
+export function useUid(prefix = "") {
+    const id = idCounter;
+    idCounter += 1;
+
+    const uid = computed(() => `${unref(prefix)}${id}`);
+    return uid;
+}

From ffeb447f410aa1641a0e5db3e76813f1fd7da4f7 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:34:35 +0100
Subject: [PATCH 34/58] fix selenium selectors

---
 client/src/utils/navigation/navigation.yml     | 8 ++++----
 lib/galaxy_test/selenium/test_history_panel.py | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 461ddf620fc..81ff0f34969 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -208,12 +208,12 @@ history_panel:
   # history tags
   tag_editor:
     selectors:
-      _: '${scope} .details .tags'
+      _: '${scope} .details .stateless-tags'
       toggle: '${_} .toggle-link'
-      display: '${_} .tag-area .tag-name'
+      display: '${_} .tag span'
       input: '${_} input'
-      tag_area: '${_} .tag-area'
-      tag_close_btn: '${_} .ti-icon-close'
+      tag_area: '${_} .multiselect__tags'
+      tag_close_btn: '${_} .tag-delete-button'
 
   multi_operations:
     selectors:
diff --git a/lib/galaxy_test/selenium/test_history_panel.py b/lib/galaxy_test/selenium/test_history_panel.py
index 883022b028d..3e367ca2ac1 100644
--- a/lib/galaxy_test/selenium/test_history_panel.py
+++ b/lib/galaxy_test/selenium/test_history_panel.py
@@ -106,7 +106,7 @@ class TestHistoryPanel(SeleniumTestCase):
         assert_no_tags()
 
         # add new tags to empty tags area
-        tags_size = 5
+        tags_size = 6
         tags = add_tags(tags_size)
         assert_current_tags(tags)
 

From 7855a2a81f6800215dc222634c3437568ab93c61 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:52:06 +0100
Subject: [PATCH 35/58] fix js-lint errors

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 2c7c036e253..ef2bcc3edbb 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -120,8 +120,8 @@ library.add(faTags, faCheck, faTimes, faPlus);
     <div class="stateless-tags px-1">
         <Multiselect
             v-if="!disabled"
-            placeholder="Add Tags"
             ref="multiselectElement"
+            placeholder="Add Tags"
             :value="tags"
             :options="userTags"
             :multiple="true"
@@ -185,9 +185,9 @@ library.add(faTags, faCheck, faTimes, faPlus);
                     @click="onTagClicked"></Tag>
                 <b-button
                     v-if="slicedTags.length > 0 && !toggledOpen"
+                    :id="toggleButtonId"
                     variant="link"
                     class="toggle-link"
-                    :id="toggleButtonId"
                     @click="() => (toggledOpen = true)">
                     {{ slicedTags.length }} more...
                 </b-button>

From 0f6d410b5e1663e0945bd2b678ea3c72824ba5f7 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 30 Nov 2022 12:35:32 +0100
Subject: [PATCH 36/58] remove local style addition

---
 .../History/Content/ContentItem.vue           | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index b8cf53d6e81..b5d868eb50a 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -258,25 +258,5 @@ export default {
     &:deep(.btn:focus) {
         box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
     }
-
-    $states: (
-        "success": $state-success-bg,
-        "info": $state-info-bg,
-        "danger": $state-danger-bg,
-        "warning": $state-warning-bg,
-    );
-
-    @each $state, $bg-color in $states {
-        &.alert-#{$state}:hover {
-            &:focus,
-            &:focus-within {
-                background-color: scale-color($bg-color, $lightness: -5%);
-            }
-
-            &:not(:focus, :focus-within) {
-                background-color: lighten($bg-color, 5%);
-            }
-        }
-    }
 }
 </style>

From 206ed02b0294618cb431b72e3ac12e4bd96a3beb Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 30 Nov 2022 12:35:53 +0100
Subject: [PATCH 37/58] try alternative tag appearance

---
 client/src/components/TagsMultiselect/Tag.vue | 29 ++++++++++++-------
 client/src/utils/color.js                     |  2 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 48c8621621c..80c87c0fe14 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -75,22 +75,29 @@ library.add(faTimes);
         padding: 0 0.25rem;
     }
 
+    position: relative;
+
+    &:before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        border-color: inherit;
+        border-radius: inherit;
+        pointer-events: none;
+
+        border-style: solid;
+        border-width: 0 2px 1px 0;
+    }
+
     &.clickable {
         cursor: pointer;
-        position: relative;
 
         &:hover {
             &:before {
-                content: "";
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-                position: absolute;
-                border: 2px solid;
-                border-color: inherit;
-                border-radius: inherit;
-                pointer-events: none;
+                border-width: 0 3px 2px 0;
             }
         }
     }
diff --git a/client/src/utils/color.js b/client/src/utils/color.js
index 054f0429a37..a1e84f0ce64 100644
--- a/client/src/utils/color.js
+++ b/client/src/utils/color.js
@@ -18,7 +18,7 @@ export function keyedColorScheme(strKey) {
 
     const [r, g, b] = hsluvToRgb([hue, 100, lightness]);
     const primary = `rgb(${r * 255},${g * 255},${b * 255})`;
-    const darker = hsluvToHex([hue, 100, lightness - 20]);
+    const darker = hsluvToHex([hue, 100, lightness - 10]);
 
     return { primary, darker };
 }

From e6f4e61c882cbedce94aa89cdf92058440c5bca2 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 30 Nov 2022 15:56:39 +0100
Subject: [PATCH 38/58] further tweak tag mouseover appearance

---
 client/src/components/TagsMultiselect/Tag.vue | 11 ++++++-----
 client/src/utils/color.js                     |  5 +++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 80c87c0fe14..33d0bd3aaee 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -39,7 +39,7 @@ library.add(faTimes);
         class="tag btn-transparent-background"
         :data-option="props.option"
         :class="{ editable, clickable }"
-        :style="`background-color: ${color.primary}; border-color: ${color.darker}`"
+        :style="`--color-primary: ${color.primary}; --color-darker: ${color.darker}; --color-dimmed: ${color.dimmed}`"
         @click.prevent.stop="onClick">
         <span :class="{ 'font-weight-bold': named }">
             {{ props.option }}
@@ -70,6 +70,9 @@ library.add(faTimes);
     color: black;
     border-radius: 4px;
 
+    background-color: var(--color-primary);
+    transition: background-color 0.1s;
+
     padding: 0 0.5rem;
     &.editable {
         padding: 0 0.25rem;
@@ -84,7 +87,7 @@ library.add(faTimes);
         top: 0;
         left: 0;
         position: absolute;
-        border-color: inherit;
+        border-color: var(--color-darker);
         border-radius: inherit;
         pointer-events: none;
 
@@ -96,9 +99,7 @@ library.add(faTimes);
         cursor: pointer;
 
         &:hover {
-            &:before {
-                border-width: 0 3px 2px 0;
-            }
+            background-color: var(--color-dimmed);
         }
     }
 }
diff --git a/client/src/utils/color.js b/client/src/utils/color.js
index a1e84f0ce64..f75ff5ed6bd 100644
--- a/client/src/utils/color.js
+++ b/client/src/utils/color.js
@@ -18,7 +18,8 @@ export function keyedColorScheme(strKey) {
 
     const [r, g, b] = hsluvToRgb([hue, 100, lightness]);
     const primary = `rgb(${r * 255},${g * 255},${b * 255})`;
-    const darker = hsluvToHex([hue, 100, lightness - 10]);
+    const darker = hsluvToHex([hue, 100, lightness * 0.9]);
+    const dimmed = hsluvToHex([hue, 100, lightness * 0.95]);
 
-    return { primary, darker };
+    return { primary, darker, dimmed };
 }

From 645b40916580942827016183766d419d8617a46e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 1 Dec 2022 11:03:12 +0100
Subject: [PATCH 39/58] fix select cursor shown on entire content-item

---
 client/src/components/History/Content/ContentItem.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index b5d868eb50a..a99b3053ea0 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -250,6 +250,8 @@ export default {
 @import "theme/blue.scss";
 
 .content-item {
+    cursor: default;
+
     .name {
         word-break: break-all;
     }

From 6a74fea033965f0d2ac4dbb6a345e0c493e8da29 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 1 Dec 2022 11:36:13 +0100
Subject: [PATCH 40/58] properly sort tags in backend

---
 lib/galaxy/managers/taggable.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/galaxy/managers/taggable.py b/lib/galaxy/managers/taggable.py
index 196f1df7ac9..31b44574710 100644
--- a/lib/galaxy/managers/taggable.py
+++ b/lib/galaxy/managers/taggable.py
@@ -5,6 +5,7 @@ Mixins for Taggable model managers and serializers.
 # from galaxy import exceptions as galaxy_exceptions
 
 import logging
+import re
 from typing import Type
 
 from sqlalchemy import (
@@ -36,7 +37,9 @@ def _tag_str_gen(item):
 def _tags_to_strings(item):
     if not hasattr(item, "tags"):
         return None
-    return sorted(list(_tag_str_gen(item)))
+    tag_list = list(_tag_str_gen(item))
+    # consider named tags while sorting
+    return sorted(tag_list, key=lambda str: re.sub("^name:", "#", str))
 
 
 def _tags_from_strings(item, tag_handler, new_tags_list, user=None):

From 7115182a1f0a54c46b7b685f368dabc505b86d3e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 1 Dec 2022 11:46:29 +0100
Subject: [PATCH 41/58] sort tags for autocompletion

---
 lib/galaxy/managers/users.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/galaxy/managers/users.py b/lib/galaxy/managers/users.py
index f29aac5f002..a3b31ec8843 100644
--- a/lib/galaxy/managers/users.py
+++ b/lib/galaxy/managers/users.py
@@ -4,6 +4,7 @@ Manager and Serializer for Users.
 import hashlib
 import logging
 import random
+import re
 import socket
 import time
 from datetime import datetime
@@ -414,7 +415,8 @@ class UserManager(base.ModelManager, deletable.PurgableManagerMixin):
         # boil the tag tuples down into a sorted list of DISTINCT name:val strings
         tags = all_tags_query.distinct().all()
         tags = [(f"{name}:{val}" if val else name) for name, val in tags]
-        return sorted(tags)
+        # consider named tags while sorting
+        return sorted(tags, key=lambda str: re.sub("^name:", "#", str))
 
     def change_password(self, trans, password=None, confirm=None, token=None, id=None, current=None):
         """

From f80bab6ab8cac14d5cb63ac6990490381a1aefdd Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 12:33:49 +0100
Subject: [PATCH 42/58] fix tag collection from file tool test case

---
 lib/galaxy/tools/tag_collection_from_file.xml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/galaxy/tools/tag_collection_from_file.xml b/lib/galaxy/tools/tag_collection_from_file.xml
index 72bf1780b73..615684fed03 100644
--- a/lib/galaxy/tools/tag_collection_from_file.xml
+++ b/lib/galaxy/tools/tag_collection_from_file.xml
@@ -37,13 +37,13 @@
                     <assert_contents>
                         <has_text_matching expression="^This is a line of text.\n$" />
                     </assert_contents>
-                    <metadata name="tags" value="alias:f,alias:r1,group:sample1,name:forward,orientation:forward,zoo" />
+                    <metadata name="tags" value="name:forward,alias:f,alias:r1,group:sample1,orientation:forward,zoo" />
                 </element>
                 <element name="reverse">
                     <assert_contents>
                         <has_text_matching expression="^This is a different line of text.\n$" />
                     </assert_contents>
-                    <metadata name="tags" value="alias:r,alias:r2,group:sample2,name:reverse,orientation:reverse" />
+                    <metadata name="tags" value="name:reverse,alias:r,alias:r2,group:sample2,orientation:reverse" />
                 </element>
             </output_collection>
         </test>
@@ -66,13 +66,13 @@
                         <assert_contents>
                             <has_text_matching expression="^This is a line of text.\n$" />
                         </assert_contents>
-                        <metadata name="tags" value="alias:f,alias:r1,group:sample1,name:forward,orientation:forward" />
+                        <metadata name="tags" value="name:forward,alias:f,alias:r1,group:sample1,orientation:forward" />
                     </element>
                     <element name="reverse">
                         <assert_contents>
                             <has_text_matching expression="^This is a different line of text.\n$" />
                         </assert_contents>
-                        <metadata name="tags" value="alias:r,alias:r2,group:sample2,name:reverse,orientation:reverse" />
+                        <metadata name="tags" value="name:reverse,alias:r,alias:r2,group:sample2,orientation:reverse" />
                     </element>
                 </element>
             </output_collection>
@@ -92,7 +92,7 @@ Description
 
 The relationship between element names and tags is specified in a two column tab-delimited file. This file may contain less entries than elements in the collection. In that case only matching list identifiers will be tagged.
 
-To create name: or group: tags prepend them with ``#`` (you can also use ``name:``) or ``group:``, respectively. 
+To create name: or group: tags prepend them with ``#`` (you can also use ``name:``) or ``group:``, respectively.
 
 ===============
 More about tags
@@ -100,7 +100,7 @@ More about tags
 
 Galaxy allows tagging datasets to facilitate analyses. There are several types of tags including simple tags, name tags, and group tags. **Simple** tags allow you to attach an alternative label to a dataset, which will make it easier to find it later. **Name** tags allow you to track propagation of a dataset through the analyses: all datasets derived from the initial dataset labeled with a name tag will inherit it. Finally, **group** tags allow you to label group of datasets. This is useful. for example, for differential expression analysis where you can have two groups of datasets labeled as "treatment" and "control".
 
-To learn mote about tags go to `our training site`_. 
+To learn mote about tags go to `our training site`_.
 
 .. _our training site: https://training.galaxyproject.org/training-material/search?query=tags
 

From 9e450f657e09928850cb1d15fe48ff34ded52a28 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 12:55:51 +0100
Subject: [PATCH 43/58] remove opacity from tag preview

---
 .../src/components/TagsMultiselect/StatelessTags.vue  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index ef2bcc3edbb..b13138c239a 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -192,7 +192,10 @@ library.add(faTags, faCheck, faTimes, faPlus);
                     {{ slicedTags.length }} more...
                 </b-button>
 
-                <b-tooltip :target="toggleButtonId" placement="bottom">
+                <b-tooltip
+                    :target="toggleButtonId"
+                    custom-class="stateless-tags--tag-preview-tooltip"
+                    placement="bottom">
                     <Tag
                         v-for="tag in slicedTags"
                         :key="tag"
@@ -206,6 +209,12 @@ library.add(faTags, faCheck, faTimes, faPlus);
     </div>
 </template>
 
+<style lang="scss">
+.stateless-tags--tag-preview-tooltip {
+    opacity: 1 !important;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 

From 39d9272dbd77954838823d578318e430d8d03c3a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 13:02:40 +0100
Subject: [PATCH 44/58] remove unused prop

---
 client/src/components/TagsMultiselect/Tag.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 33d0bd3aaee..087a4005aa2 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -6,7 +6,6 @@ import { computed } from "vue";
 const props = defineProps({
     option: String,
     search: String,
-    remove: Function,
     editable: Boolean,
     focusable: Boolean,
     clickable: Boolean,

From b1645e17648bff9e2a8371d5bb2fb9ff3715bfe6 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 13:07:54 +0100
Subject: [PATCH 45/58] add highlighting for searched tags

---
 client/src/components/TagsMultiselect/Tag.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 087a4005aa2..b276c5be5cb 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -24,6 +24,7 @@ function onDelete() {
 }
 
 const named = computed(() => props.option.startsWith("#"));
+const searched = computed(() => props.option.toLowerCase() === props.search.toLowerCase());
 </script>
 
 <script>
@@ -37,7 +38,7 @@ library.add(faTimes);
     <div
         class="tag btn-transparent-background"
         :data-option="props.option"
-        :class="{ editable, clickable }"
+        :class="{ editable, clickable, searched }"
         :style="`--color-primary: ${color.primary}; --color-darker: ${color.darker}; --color-dimmed: ${color.dimmed}`"
         @click.prevent.stop="onClick">
         <span :class="{ 'font-weight-bold': named }">
@@ -101,5 +102,9 @@ library.add(faTimes);
             background-color: var(--color-dimmed);
         }
     }
+
+    &.searched {
+        outline: 2px solid $brand-danger;
+    }
 }
 </style>

From 1ebd58f18414d312fcfb132febf9ed1a1577ae90 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 13:08:40 +0100
Subject: [PATCH 46/58] remove unused prop

---
 client/src/components/TagsMultiselect/Tag.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index b276c5be5cb..eb14fde2e62 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -7,7 +7,6 @@ const props = defineProps({
     option: String,
     search: String,
     editable: Boolean,
-    focusable: Boolean,
     clickable: Boolean,
 });
 
@@ -24,7 +23,7 @@ function onDelete() {
 }
 
 const named = computed(() => props.option.startsWith("#"));
-const searched = computed(() => props.option.toLowerCase() === props.search.toLowerCase());
+const searched = computed(() => props.option.toLowerCase() === props.search?.toLowerCase());
 </script>
 
 <script>

From 12e497f27c00448aa27896a79d8bdbbcdb914e6f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 13:47:22 +0100
Subject: [PATCH 47/58] add unit test for tag component

---
 .../components/TagsMultiselect/Tag.test.js    | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 client/src/components/TagsMultiselect/Tag.test.js

diff --git a/client/src/components/TagsMultiselect/Tag.test.js b/client/src/components/TagsMultiselect/Tag.test.js
new file mode 100644
index 00000000000..e0d3bb99016
--- /dev/null
+++ b/client/src/components/TagsMultiselect/Tag.test.js
@@ -0,0 +1,104 @@
+import { getLocalVue } from "jest/helpers";
+import { mount } from "@vue/test-utils";
+import Tag from "./Tag";
+
+const localVue = getLocalVue();
+
+const mountWithProps = (props) => {
+    return mount(Tag, {
+        propsData: props,
+        localVue,
+    });
+};
+
+describe("Tag", () => {
+    it("displays it's option", () => {
+        {
+            const wrapper = mountWithProps({ option: "my_tag" });
+            const tag = wrapper.find(".tag");
+            expect(tag.text()).toBe("my_tag");
+        }
+
+        {
+            const wrapper = mountWithProps({ option: "a_longer_tag_name" });
+            const tag = wrapper.find(".tag");
+            expect(tag.text()).toBe("a_longer_tag_name");
+        }
+    });
+
+    it("shows it's clickable", async () => {
+        const wrapper = mountWithProps({ option: "my_tag" });
+        const tag = wrapper.find(".tag");
+
+        expect(tag.classes()).not.toContain("clickable");
+
+        tag.setProps({ clickable: true });
+        await wrapper.vm.$nextTick();
+
+        expect(tag.classes()).toContain("clickable");
+    });
+
+    it("can be clicked", async () => {
+        const wrapper = mountWithProps({ option: "my_tag", clickable: true });
+        const tag = wrapper.find(".tag");
+
+        expect(tag.classes()).toContain("clickable");
+
+        tag.trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(tag.emitted().click).toBeTruthy();
+        expect(tag.emitted().click.length).toBe(1);
+        expect(tag.emitted().click[0]).toEqual(["my_tag"]);
+
+        tag.trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(tag.emitted().click.length).toBe(2);
+        expect(tag.emitted().click).toStrictEqual([["my_tag"], ["my_tag"]]);
+    });
+
+    it("changes appearance when editable", async () => {
+        const wrapper = mountWithProps({ option: "my_tag" });
+        const tag = wrapper.find(".tag");
+
+        expect(tag.classes()).not.toContain("editable");
+        expect(tag.find(".tag-delete-button").exists()).not.toBe(true);
+
+        tag.setProps({ editable: true });
+        await wrapper.vm.$nextTick();
+
+        expect(tag.classes()).toContain("editable");
+        expect(tag.find(".tag-delete-button").exists()).toBe(true);
+    });
+
+    it("can be deleted", async () => {
+        const wrapper = mountWithProps({ option: "my_tag", editable: true });
+        const tag = wrapper.find(".tag");
+
+        expect(tag.find(".tag-delete-button").exists()).toBe(true);
+
+        tag.find(".tag-delete-button").trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(tag.emitted().deleted).toBeTruthy();
+        expect(tag.emitted().deleted.length).toBe(1);
+        expect(tag.emitted().deleted[0]).toEqual(["my_tag"]);
+
+        expect(tag.emitted().click).toBeFalsy();
+    });
+
+    it("displays named tags bold", () => {
+        {
+            const wrapper = mountWithProps({ option: "my_tag" });
+            const span = wrapper.find(".tag span");
+            expect(span.classes()).not.toContain("font-weight-bold");
+        }
+
+        {
+            const wrapper = mountWithProps({ option: "#named_tag" });
+            const span = wrapper.find(".tag span");
+            expect(span.classes()).toContain("font-weight-bold");
+        }
+    });
+});

From 1ccf7bdf1e5fbb13ab7fe4fb1ac6c6649cb6a395 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 14:14:33 +0100
Subject: [PATCH 48/58] expand and improve tag test

---
 .../components/TagsMultiselect/Tag.test.js    | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.test.js b/client/src/components/TagsMultiselect/Tag.test.js
index e0d3bb99016..3ed1c79c82b 100644
--- a/client/src/components/TagsMultiselect/Tag.test.js
+++ b/client/src/components/TagsMultiselect/Tag.test.js
@@ -14,72 +14,66 @@ const mountWithProps = (props) => {
 describe("Tag", () => {
     it("displays it's option", () => {
         {
-            const wrapper = mountWithProps({ option: "my_tag" });
-            const tag = wrapper.find(".tag");
+            const tag = mountWithProps({ option: "my_tag" });
             expect(tag.text()).toBe("my_tag");
         }
 
         {
-            const wrapper = mountWithProps({ option: "a_longer_tag_name" });
-            const tag = wrapper.find(".tag");
+            const tag = mountWithProps({ option: "a_longer_tag_name" });
             expect(tag.text()).toBe("a_longer_tag_name");
         }
     });
 
     it("shows it's clickable", async () => {
-        const wrapper = mountWithProps({ option: "my_tag" });
-        const tag = wrapper.find(".tag");
+        const tag = mountWithProps({ option: "my_tag" });
 
         expect(tag.classes()).not.toContain("clickable");
 
         tag.setProps({ clickable: true });
-        await wrapper.vm.$nextTick();
+        await tag.vm.$nextTick();
 
         expect(tag.classes()).toContain("clickable");
     });
 
     it("can be clicked", async () => {
-        const wrapper = mountWithProps({ option: "my_tag", clickable: true });
-        const tag = wrapper.find(".tag");
+        const tag = mountWithProps({ option: "my_tag", clickable: true });
 
         expect(tag.classes()).toContain("clickable");
 
         tag.trigger("click");
-        await wrapper.vm.$nextTick();
+        await tag.vm.$nextTick();
 
         expect(tag.emitted().click).toBeTruthy();
         expect(tag.emitted().click.length).toBe(1);
         expect(tag.emitted().click[0]).toEqual(["my_tag"]);
 
         tag.trigger("click");
-        await wrapper.vm.$nextTick();
+        await tag.vm.$nextTick();
 
         expect(tag.emitted().click.length).toBe(2);
         expect(tag.emitted().click).toStrictEqual([["my_tag"], ["my_tag"]]);
     });
 
     it("changes appearance when editable", async () => {
-        const wrapper = mountWithProps({ option: "my_tag" });
-        const tag = wrapper.find(".tag");
+        const tag = mountWithProps({ option: "my_tag" });
 
         expect(tag.classes()).not.toContain("editable");
         expect(tag.find(".tag-delete-button").exists()).not.toBe(true);
 
         tag.setProps({ editable: true });
-        await wrapper.vm.$nextTick();
+        await tag.vm.$nextTick();
 
         expect(tag.classes()).toContain("editable");
         expect(tag.find(".tag-delete-button").exists()).toBe(true);
     });
 
     it("can be deleted", async () => {
-        const wrapper = mountWithProps({ option: "my_tag", editable: true });
-        const tag = wrapper.find(".tag");
+        const tag = mountWithProps({ option: "my_tag", editable: true });
 
         expect(tag.find(".tag-delete-button").exists()).toBe(true);
 
         tag.find(".tag-delete-button").trigger("click");
-        await wrapper.vm.$nextTick();
+        await tag.vm.$nextTick();
 
         expect(tag.emitted().deleted).toBeTruthy();
         expect(tag.emitted().deleted.length).toBe(1);
@@ -101,4 +95,15 @@ describe("Tag", () => {
             expect(span.classes()).toContain("font-weight-bold");
         }
     });
+
+    it("highlights when searched", async () => {
+        const tag = mountWithProps({ option: "my_tag" });
+
+        expect(tag.classes()).not.toContain("searched");
+
+        tag.setProps({ search: "my_tag" });
+        await tag.vm.$nextTick();
+
+        expect(tag.classes()).toContain("searched");
+    });
 });

From 83869a23ddc11d996176916422a52d9e5499f71c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 2 Dec 2022 14:55:17 +0100
Subject: [PATCH 49/58] add unit test for stateless tags

---
 .../TagsMultiselect/StatelessTags.test.js     | 136 ++++++++++++++++++
 .../TagsMultiselect/StatelessTags.vue         |   2 +
 2 files changed, 138 insertions(+)
 create mode 100644 client/src/components/TagsMultiselect/StatelessTags.test.js

diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
new file mode 100644
index 00000000000..e00f500e141
--- /dev/null
+++ b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -0,0 +1,136 @@
+import { getLocalVue } from "jest/helpers";
+import { mount } from "@vue/test-utils";
+import { useUserTags } from "composables/user";
+import { useToast } from "composables/toast";
+import { computed } from "vue";
+import StatelessTags from "./StatelessTags";
+
+const autocompleteTags = ["#named_user_tag", "abc", "my_tag"];
+
+const localVue = getLocalVue();
+
+const mountWithProps = (props) => {
+    return mount(StatelessTags, {
+        propsData: props,
+        localVue,
+    });
+};
+
+jest.mock("composables/user");
+const addLocalTagMock = jest.fn((tag) => tag);
+useUserTags.mockReturnValue({
+    userTags: computed(() => autocompleteTags),
+    addLocalTag: addLocalTagMock,
+});
+
+jest.mock("composables/toast");
+const warningMock = jest.fn((message, title) => {
+    return { message, title };
+});
+useToast.mockReturnValue({
+    warning: warningMock,
+});
+
+describe("StatelessTags", () => {
+    it("shows tags", () => {
+        const wrapper = mountWithProps({
+            value: ["tag_1", "tag_2", "tags:tag_3"],
+            disabled: true,
+        });
+
+        expect(wrapper.find(".tag").exists()).toBe(true);
+
+        const tags = wrapper.findAll(".tag");
+        expect(tags.length).toBe(3);
+        expect(tags.at(0).text()).toBe("tag_1");
+        expect(tags.at(1).text()).toBe("tag_2");
+        expect(tags.at(2).text()).toBe("tags:tag_3");
+    });
+
+    it("formats named tags", () => {
+        const wrapper = mountWithProps({
+            value: ["name:tag_1", "tag_2", "name:tag_3"],
+            disabled: true,
+        });
+
+        const tags = wrapper.findAll(".tag");
+        expect(tags.at(0).text()).toBe("#tag_1");
+        expect(tags.at(1).text()).toBe("tag_2");
+        expect(tags.at(2).text()).toBe("#tag_3");
+    });
+
+    it("shows autocomplete options", async () => {
+        const wrapper = mountWithProps({
+            disabled: false,
+        });
+
+        const multiselect = wrapper.find(".multiselect");
+
+        multiselect.find("button").trigger("click");
+        await wrapper.vm.$nextTick();
+
+        const options = multiselect.findAll(".multiselect-option");
+        const visibleOptions = options.filter((option) => option.isVisible());
+
+        expect(visibleOptions.length).toBe(autocompleteTags.length);
+
+        visibleOptions.wrappers.forEach((option, i) => {
+            expect(option.text()).toContain(autocompleteTags[i]);
+        });
+    });
+
+    it("adds new tags", async () => {
+        const wrapper = mountWithProps({
+            disabled: false,
+        });
+
+        const multiselect = wrapper.find(".multiselect");
+
+        multiselect.find("button").trigger("click");
+        await wrapper.vm.$nextTick();
+        await multiselect.find("input").setValue("new_tag");
+        await wrapper.vm.$nextTick();
+        multiselect.find(".multiselect-option").trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(addLocalTagMock.mock.calls.length).toBe(1);
+        expect(addLocalTagMock.mock.results[0].value).toBe("new_tag");
+    });
+
+    it("warns about not allowed tags", async () => {
+        const wrapper = mountWithProps({
+            disabled: false,
+        });
+
+        const multiselect = wrapper.find(".multiselect");
+
+        multiselect.find("button").trigger("click");
+        await wrapper.vm.$nextTick();
+        await multiselect.find("input").setValue(":illegal_tag");
+        await wrapper.vm.$nextTick();
+
+        const option = multiselect.find(".multiselect-option");
+        expect(option.classes()).toContain("invalid");
+
+        option.trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(warningMock.mock.calls.length).toBe(1);
+        expect(warningMock.mock.results[0].value.title).toBe("Invalid Tag");
+    });
+
+    it("hides too many tags", async () => {
+        const wrapper = mountWithProps({
+            value: ["tag_1", "tag_2", "tag_3", "tag_4", "tag_5", "tag_6"],
+            disabled: true,
+            useToggleLing: true,
+            maxVisibleTags: 4,
+        });
+
+        const tags = wrapper.findAll(".tag");
+        expect(tags.length).toBe(4);
+
+        const showMoreLink = wrapper.find(".toggle-link");
+        expect(showMoreLink.text()).toContain("2");
+    });
+});
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index b13138c239a..d4769778c03 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -174,6 +174,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
                 </span>
             </template>
         </Multiselect>
+
         <div v-else class="pl-1 pb-2">
             <div class="d-inline">
                 <Tag
@@ -193,6 +194,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
                 </b-button>
 
                 <b-tooltip
+                    v-if="slicedTags.length > 0 && !toggledOpen"
                     :target="toggleButtonId"
                     custom-class="stateless-tags--tag-preview-tooltip"
                     placement="bottom">

From 6394ec6f9ca3ed52b652478f2ad9d038ce76eec1 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 5 Dec 2022 12:25:48 +0100
Subject: [PATCH 50/58] always open autocomplete below

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index d4769778c03..194b0232426 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -122,6 +122,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             v-if="!disabled"
             ref="multiselectElement"
             placeholder="Add Tags"
+            openDirection="bottom"
             :value="tags"
             :options="userTags"
             :multiple="true"
@@ -267,6 +268,8 @@ library.add(faTags, faCheck, faTimes, faPlus);
         .multiselect__content-wrapper {
             top: 100%;
             z-index: 800;
+            width: calc(100% - 8px);
+            left: 4px;
         }
 
         &.multiselect--above .multiselect__content-wrapper {

From fbff93102e6b105d60bfd09cbe020bac0accf780 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 5 Dec 2022 14:31:45 +0100
Subject: [PATCH 51/58] improved autocomplete visuals

---
 .../components/TagsMultiselect/StatelessTags.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 194b0232426..e4a9b47361b 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -149,7 +149,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             <template v-slot:caret>
                 <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">
                     Add Tags
-                    <FontAwesomeIcon icon="fa-tags"></FontAwesomeIcon>
+                    <FontAwesomeIcon icon="fa-tags" />
                 </b-button>
             </template>
 
@@ -158,17 +158,17 @@ library.add(faTags, faCheck, faTimes, faPlus);
                     <span>{{ option.label ?? option }}</span>
                     <span v-if="tags.includes(option)" class="float-right">
                         <span class="info">
-                            <FontAwesomeIcon class="check-icon" icon="fa-check"></FontAwesomeIcon>
+                            <FontAwesomeIcon class="check-icon" icon="fa-check" fixed-width />
                         </span>
 
                         <span class="info highlighted">
-                            <FontAwesomeIcon class="times-icon" icon="fa-times"></FontAwesomeIcon>
+                            <FontAwesomeIcon class="times-icon" icon="fa-times" fixed-width />
                             <span class="sr-only">remove tag</span>
                         </span>
                     </span>
                     <span v-else class="float-right">
                         <span class="info highlighted">
-                            <FontAwesomeIcon class="plus-icon" icon="fa-plus"></FontAwesomeIcon>
+                            <FontAwesomeIcon class="plus-icon" icon="fa-plus" fixed-width />
                             <span class="sr-only">add tag</span>
                         </span>
                     </span>
@@ -268,8 +268,10 @@ library.add(faTags, faCheck, faTimes, faPlus);
         .multiselect__content-wrapper {
             top: 100%;
             z-index: 800;
-            width: calc(100% - 8px);
-            left: 4px;
+            width: calc(100% - 4px);
+            left: 2px;
+
+            box-shadow: 0 0 6px 0 rgba(3, 0, 34, 0.048), 0 0 4px 0 rgba(3, 0, 34, 0.185);
         }
 
         &.multiselect--above .multiselect__content-wrapper {
@@ -309,7 +311,7 @@ library.add(faTags, faCheck, faTimes, faPlus);
             // custom option wrapper
             .multiselect-option {
                 font-size: $font-size-base;
-                padding: 0.5rem 1rem;
+                padding: 0.5rem;
                 display: inline-block;
                 width: 100%;
                 height: 100%;

From 67504330335c05bd78302d94038239016ff5110b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:42:53 +0100
Subject: [PATCH 52/58] convert StatelessTags to ts

---
 .../TagsMultiselect/StatelessTags.vue         | 57 +++++++++----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index e4a9b47361b..1923f19d93c 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import Multiselect from "vue-multiselect";
 import Tag from "./Tag.vue";
 import { ref, computed } from "vue";
@@ -7,27 +7,22 @@ import { useUserTags } from "composables/user";
 import { useToast } from "composables/toast";
 import { useUid } from "composables/utils/uid";
 
-const props = defineProps({
-    value: {
-        type: Array,
-        default: () => [],
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    clickable: {
-        type: Boolean,
-        default: false,
-    },
-    useToggleLink: {
-        type: Boolean,
-        default: true,
-    },
-    maxVisibleTags: {
-        type: Number,
-        default: 5,
-    },
+import type { Ref } from "vue";
+
+export interface StatelessTagsProps {
+    value: string[];
+    disabled: boolean;
+    clickable: boolean;
+    useToggleLink: boolean;
+    maxVisibleTags: number;
+}
+
+const props = withDefaults(defineProps<StatelessTagsProps>(), {
+    value: () => [],
+    disabled: false,
+    clickable: false,
+    useToggleLink: true,
+    maxVisibleTags: 5,
 });
 
 const emit = defineEmits(["input", "tag-click"]);
@@ -35,7 +30,7 @@ const emit = defineEmits(["input", "tag-click"]);
 const { userTags, addLocalTag } = useUserTags();
 const { warning } = useToast();
 
-function onAddTag(tag) {
+function onAddTag(tag: string) {
     const newTag = tag.trim();
 
     if (isValid(newTag)) {
@@ -46,11 +41,11 @@ function onAddTag(tag) {
     }
 }
 
-function onInput(val) {
+function onInput(val: string) {
     emit("input", val);
 }
 
-function onDelete(tag) {
+function onDelete(tag: string) {
     const val = [...tags.value];
     const index = tags.value.indexOf(tag);
     val.splice(index, 1);
@@ -67,10 +62,11 @@ function onClose() {
     editing.value = false;
 }
 
-const multiselectElement = ref(null);
+const multiselectElement: Ref<Multiselect | null> = ref(null);
 
 function openMultiselect() {
-    multiselectElement.value.activate();
+    //@ts-ignore bad library types
+    multiselectElement.value?.activate();
 }
 
 const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
@@ -96,7 +92,7 @@ const slicedTags = computed(() => {
 
 const invalidTagRegex = /([.:\s][.:\s])|(^[.:])|([.:]$)|(^[\s]*$)/;
 
-function isValid(tag) {
+function isValid(tag: string | { label: string }) {
     if (typeof tag === "string") {
         return !tag.match(invalidTagRegex);
     } else {
@@ -104,15 +100,16 @@ function isValid(tag) {
     }
 }
 
-function onTagClicked(tag) {
+function onTagClicked(tag: string) {
     emit("tag-click", tag);
 }
 </script>
 
-<script>
+<script lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
 
+//@ts-ignore bad library types
 library.add(faTags, faCheck, faTimes, faPlus);
 </script>
 

From 3fa968740a7715e0ff9f5a0f6a13372c09095948 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:52:18 +0100
Subject: [PATCH 53/58] convert Tag to ts

---
 client/src/components/TagsMultiselect/Tag.vue | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index eb14fde2e62..bd66cce921f 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -1,14 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { keyedColorScheme } from "utils/color";
 import { computed } from "vue";
 
-const props = defineProps({
-    option: String,
-    search: String,
-    editable: Boolean,
-    clickable: Boolean,
-});
+export interface TagProps {
+    option?: string;
+    search?: string;
+    editable?: boolean;
+    clickable?: boolean;
+}
+
+const props = defineProps<TagProps>();
 
 const emit = defineEmits(["click", "deleted"]);
 
@@ -22,14 +24,15 @@ function onDelete() {
     emit("deleted", props.option);
 }
 
-const named = computed(() => props.option.startsWith("#"));
-const searched = computed(() => props.option.toLowerCase() === props.search?.toLowerCase());
+const named = computed(() => props.option?.startsWith("#"));
+const searched = computed(() => props.option?.toLowerCase() === props.search?.toLowerCase());
 </script>
 
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
+//@ts-ignore bad library types
 library.add(faTimes);
 </script>
 

From 9f64af615d3abdb852e771d42801d8b7f8df1d94 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 6 Dec 2022 15:16:50 +0100
Subject: [PATCH 54/58] update and fix types

---
 client/src/components/TagsMultiselect/StatelessTags.vue | 7 +++++--
 client/src/components/TagsMultiselect/Tag.vue           | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 1923f19d93c..b3c15de2f4c 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -25,7 +25,10 @@ const props = withDefaults(defineProps<StatelessTagsProps>(), {
     maxVisibleTags: 5,
 });
 
-const emit = defineEmits(["input", "tag-click"]);
+const emit = defineEmits<{
+    (e: "input", tags: string[]): void;
+    (e: "tag-click", tag: string): void;
+}>();
 
 const { userTags, addLocalTag } = useUserTags();
 const { warning } = useToast();
@@ -41,7 +44,7 @@ function onAddTag(tag: string) {
     }
 }
 
-function onInput(val: string) {
+function onInput(val: string[]) {
     emit("input", val);
 }
 
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index bd66cce921f..f780aec3880 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -4,7 +4,7 @@ import { keyedColorScheme } from "utils/color";
 import { computed } from "vue";
 
 export interface TagProps {
-    option?: string;
+    option: string;
     search?: string;
     editable?: boolean;
     clickable?: boolean;
@@ -12,7 +12,10 @@ export interface TagProps {
 
 const props = defineProps<TagProps>();
 
-const emit = defineEmits(["click", "deleted"]);
+const emit = defineEmits<{
+    (e: "click", tag: string): void;
+    (e: "deleted", tag: string): void;
+}>();
 
 const color = computed(() => keyedColorScheme(props.option));
 

From e7a118425865dba2376f49eb203c543f858d72af Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 6 Dec 2022 18:32:43 +0100
Subject: [PATCH 55/58] use ts in script tag

---
 client/src/components/TagsMultiselect/Tag.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index f780aec3880..4de7a184bcc 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -31,7 +31,7 @@ const named = computed(() => props.option?.startsWith("#"));
 const searched = computed(() => props.option?.toLowerCase() === props.search?.toLowerCase());
 </script>
 
-<script>
+<script lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 

From 2235366ce35b33938d6952073825b59bb65f44cd Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 6 Dec 2022 19:06:29 +0100
Subject: [PATCH 56/58] convert user composable to ts

---
 client/src/composables/{user.js => user.ts} | 29 ++++++++++++++-------
 1 file changed, 20 insertions(+), 9 deletions(-)
 rename client/src/composables/{user.js => user.ts} (53%)

diff --git a/client/src/composables/user.js b/client/src/composables/user.ts
similarity index 53%
rename from client/src/composables/user.js
rename to client/src/composables/user.ts
index 4d2c42245e5..0f777bb36bc 100644
--- a/client/src/composables/user.js
+++ b/client/src/composables/user.ts
@@ -1,12 +1,16 @@
 import { computed, onMounted, inject, ref, unref } from "vue";
+import type { Ref } from "vue";
+import type { Store } from "vuex";
 
+// TODO: support computed for "noFetch"
 /**
  * composable user store wrapper
- * @param { boolean | ref<boolean> } noFetch when true, the user will not be fetched from the server
+ * @param noFetch when true, the user will not be fetched from the server
  * @returns currentUser computed
  */
-export function useCurrentUser(noFetch = false) {
-    const store = inject("store");
+export function useCurrentUser(noFetch: boolean | Ref<boolean> = false) {
+    // TODO: add store typing
+    const store = inject("store") as Store<unknown>;
 
     const currentUser = computed(() => store.getters["user/currentUser"]);
 
@@ -16,14 +20,19 @@ export function useCurrentUser(noFetch = false) {
         }
     });
 
-    const addFavoriteTool = async (toolId) => await store.dispatch("user/addFavoriteTool", toolId);
-    const removeFavoriteTool = async (toolId) => await store.dispatch("user/removeFavoriteTool", toolId);
+    const addFavoriteTool = async (toolId: string) => {
+        await store.dispatch("user/addFavoriteTool", toolId);
+    };
+
+    const removeFavoriteTool = async (toolId: string) => {
+        await store.dispatch("user/removeFavoriteTool", toolId);
+    };
 
     return { currentUser, addFavoriteTool, removeFavoriteTool };
 }
 
 // temporarily stores tags which have not yet been fetched from the backend
-const localTags = ref([]);
+const localTags = ref<string[]>([]);
 
 /**
  * Keeps tracks of the tags the current user has used.
@@ -32,7 +41,7 @@ export function useUserTags() {
     const { currentUser } = useCurrentUser(true);
 
     const userTags = computed(() => {
-        let tags;
+        let tags: string[];
 
         if (currentUser.value) {
             tags = [...currentUser.value.tags_used, ...localTags.value];
@@ -40,10 +49,12 @@ export function useUserTags() {
             tags = localTags.value;
         }
 
-        return tags.map((tag) => tag.replace(/^name:/, "#"));
+        const tagSet = new Set(tags);
+
+        return Array.from(tagSet).map((tag) => tag.replace(/^name:/, "#"));
     });
 
-    const addLocalTag = (tag) => {
+    const addLocalTag = (tag: string) => {
         localTags.value.push(tag);
     };
 

From 2c6f825c6d1be427bc029c84e3ccf2a879aaefbf Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 7 Dec 2022 13:13:36 +0100
Subject: [PATCH 57/58] remove component scope

---
 .../TagsMultiselect/StatelessTags.vue         | 23 ++++++++-----------
 client/src/components/TagsMultiselect/Tag.vue | 13 ++++-------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index b3c15de2f4c..3363fa524a8 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -6,15 +6,17 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useUserTags } from "composables/user";
 import { useToast } from "composables/toast";
 import { useUid } from "composables/utils/uid";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
 
 import type { Ref } from "vue";
 
 export interface StatelessTagsProps {
-    value: string[];
-    disabled: boolean;
-    clickable: boolean;
-    useToggleLink: boolean;
-    maxVisibleTags: number;
+    value?: string[];
+    disabled?: boolean;
+    clickable?: boolean;
+    useToggleLink?: boolean;
+    maxVisibleTags?: number;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -30,6 +32,9 @@ const emit = defineEmits<{
     (e: "tag-click", tag: string): void;
 }>();
 
+//@ts-ignore bad library types
+library.add(faTags, faCheck, faTimes, faPlus);
+
 const { userTags, addLocalTag } = useUserTags();
 const { warning } = useToast();
 
@@ -108,14 +113,6 @@ function onTagClicked(tag: string) {
 }
 </script>
 
-<script lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
-
-//@ts-ignore bad library types
-library.add(faTags, faCheck, faTimes, faPlus);
-</script>
-
 <template>
     <div class="stateless-tags px-1">
         <Multiselect
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 4de7a184bcc..87dd4396e1b 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -2,6 +2,8 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { keyedColorScheme } from "utils/color";
 import { computed } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
 export interface TagProps {
     option: string;
@@ -17,6 +19,9 @@ const emit = defineEmits<{
     (e: "deleted", tag: string): void;
 }>();
 
+//@ts-ignore bad types
+library.add(faTimes);
+
 const color = computed(() => keyedColorScheme(props.option));
 
 function onClick() {
@@ -31,14 +36,6 @@ const named = computed(() => props.option?.startsWith("#"));
 const searched = computed(() => props.option?.toLowerCase() === props.search?.toLowerCase());
 </script>
 
-<script lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-
-//@ts-ignore bad library types
-library.add(faTimes);
-</script>
-
 <template>
     <div
         class="tag btn-transparent-background"

From 81e43f534dd2fb6537bc7da2e9127caf25885972 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 8 Dec 2022 12:30:19 +0100
Subject: [PATCH 58/58] update test imports

---
 client/src/components/TagsMultiselect/StatelessTags.test.js | 2 +-
 client/src/components/TagsMultiselect/Tag.test.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
index e00f500e141..043220722c5 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.test.js
+++ b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -1,4 +1,4 @@
-import { getLocalVue } from "jest/helpers";
+import { getLocalVue } from "tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import { useUserTags } from "composables/user";
 import { useToast } from "composables/toast";
diff --git a/client/src/components/TagsMultiselect/Tag.test.js b/client/src/components/TagsMultiselect/Tag.test.js
index 3ed1c79c82b..bc507d45b20 100644
--- a/client/src/components/TagsMultiselect/Tag.test.js
+++ b/client/src/components/TagsMultiselect/Tag.test.js
@@ -1,4 +1,4 @@
-import { getLocalVue } from "jest/helpers";
+import { getLocalVue } from "tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import Tag from "./Tag";