From f8e1fd8c95b2baef19ca7268d6456aea279a90e8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 11 Jan 2024 15:09:31 +0100
Subject: [PATCH 1/4] make multiselect conditionally rendered

---
 .../History/Content/ContentItem.vue           |   1 +
 .../TagsMultiselect/StatelessTags.vue         | 179 +++++++++---------
 2 files changed, 94 insertions(+), 86 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index a4bf4c8c398b..aeae2c6bff83 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -84,6 +84,7 @@
             :elements-datatypes="item.elements_datatypes" />
         <StatelessTags
             v-if="!tagsDisabled || hasTags"
+            class="px-2"
             :value="tags"
             :disabled="tagsDisabled"
             :clickable="filterable"
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index a00f45bafcda..053ade18ace9 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -2,8 +2,9 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 import type { Ref } from "vue";
-import { computed, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useToast } from "@/composables/toast";
@@ -20,7 +21,6 @@ interface StatelessTagsProps {
     useToggleLink?: boolean;
     maxVisibleTags?: number;
     placeholder?: string;
-    noPadding?: boolean;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -68,8 +68,9 @@ const { editing, ariaExpanded, onOpen, onClose } = useMultiselect();
 
 const multiselectElement: Ref<Multiselect | null> = ref(null);
 
-function openMultiselect() {
-    //@ts-ignore bad library types
+async function openMultiselect() {
+    editing.value = true;
+    await nextTick();
     multiselectElement.value?.activate();
 }
 
@@ -110,67 +111,82 @@ function onTagClicked(tag: string) {
 </script>
 
 <template>
-    <div class="stateless-tags" :class="{ 'px-1': !props.noPadding }">
-        <Multiselect
-            v-if="!disabled"
-            ref="multiselectElement"
-            open-direction="bottom"
-            :placeholder="props.placeholder"
-            :value="tags"
-            :options="userTags"
-            :multiple="true"
-            :taggable="true"
-            :close-on-select="false"
-            :aria-expanded="ariaExpanded"
-            @tag="onAddTag"
-            @input="onInput"
-            @open="onOpen"
-            @close="onClose">
-            <template v-slot:tag="{ option, search }">
-                <Tag
-                    :option="option"
-                    :search="search"
-                    :editable="true"
-                    :clickable="props.clickable"
-                    @deleted="onDelete"
-                    @click="onTagClicked"></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">
+    <div class="stateless-tags">
+        <div v-if="!disabled">
+            <div v-if="!editing" class="tags-edit">
+                <div class="interactive-tags">
+                    <Tag
+                        v-for="tag in tags"
+                        :key="tag"
+                        :option="tag"
+                        :editable="true"
+                        :clickable="props.clickable"
+                        @deleted="onDelete"
+                        @click="onTagClicked"></Tag>
+                </div>
+                <button class="toggle-button" tabindex="-1" @click="openMultiselect">
                     {{ props.placeholder }}
                     <FontAwesomeIcon icon="fa-tags" />
-                </b-button>
-            </template>
-
-            <template v-slot:option="{ option }">
-                <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" fixed-width />
-                        </span>
-
-                        <span class="info highlighted">
-                            <FontAwesomeIcon class="times-icon" icon="fa-times" fixed-width />
-                            <span class="sr-only">remove tag</span>
+                </button>
+            </div>
+            <Multiselect
+                v-else
+                ref="multiselectElement"
+                open-direction="bottom"
+                :placeholder="props.placeholder"
+                :value="tags"
+                :options="userTags"
+                :multiple="true"
+                :taggable="true"
+                :close-on-select="false"
+                :aria-expanded="ariaExpanded"
+                @tag="onAddTag"
+                @input="onInput"
+                @open="onOpen"
+                @close="onClose">
+                <template v-slot:tag="{ option, search }">
+                    <Tag
+                        :option="option"
+                        :search="search"
+                        :editable="true"
+                        :clickable="props.clickable"
+                        @deleted="onDelete"
+                        @click="onTagClicked"></Tag>
+                </template>
+
+                <template v-slot:noOptions>
+                    <span class="multiselect-option">Type to add new tag</span>
+                </template>
+
+                <template v-slot:caret>
+                    <!-- render nothing -->
+                </template>
+
+                <template v-slot:option="{ option }">
+                    <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" fixed-width />
+                            </span>
+
+                            <span class="info highlighted">
+                                <FontAwesomeIcon class="times-icon" icon="fa-times" fixed-width />
+                                <span class="sr-only">remove tag</span>
+                            </span>
                         </span>
-                    </span>
-                    <span v-else class="float-right">
-                        <span class="info highlighted">
-                            <FontAwesomeIcon class="plus-icon" icon="fa-plus" fixed-width />
-                            <span class="sr-only">add tag</span>
+                        <span v-else class="float-right">
+                            <span class="info highlighted">
+                                <FontAwesomeIcon class="plus-icon" icon="fa-plus" fixed-width />
+                                <span class="sr-only">add tag</span>
+                            </span>
                         </span>
                     </span>
-                </span>
-            </template>
-        </Multiselect>
+                </template>
+            </Multiselect>
+        </div>
 
-        <div v-else :class="{ 'pl-1': !props.noPadding, 'pb-2': !props.noPadding }">
+        <div v-else>
             <div class="d-inline">
                 <Tag
                     v-for="tag in trimmedTags"
@@ -179,14 +195,14 @@ function onTagClicked(tag: string) {
                     :editable="false"
                     :clickable="props.clickable"
                     @click="onTagClicked"></Tag>
-                <b-button
+                <BButton
                     v-if="slicedTags.length > 0 && !toggledOpen"
                     :id="toggleButtonId"
                     variant="link"
                     class="toggle-link"
                     @click="() => (toggledOpen = true)">
                     {{ slicedTags.length }} more...
-                </b-button>
+                </BButton>
 
                 <b-tooltip
                     v-if="slicedTags.length > 0 && !toggledOpen"
@@ -226,6 +242,20 @@ function onTagClicked(tag: string) {
         }
     }
 
+    &:deep(.multiselect) .multiselect__input,
+    .toggle-button {
+        font-size: $font-size-base;
+        color: $text-color;
+        text-decoration: none;
+        padding: 0 0.25rem;
+        background: none;
+        cursor: text;
+        text-align: left;
+        margin: 0;
+        border: none;
+        width: 100%;
+    }
+
     &:deep(.multiselect) {
         min-height: unset;
         display: flex;
@@ -234,7 +264,7 @@ function onTagClicked(tag: string) {
         .multiselect__select {
             top: unset;
             bottom: 0;
-            padding: 0 0.25rem;
+            padding: 0;
             z-index: 1;
             height: $font-size-base * 2;
 
@@ -252,7 +282,7 @@ function onTagClicked(tag: string) {
         }
 
         .multiselect__tags {
-            padding: 0 0.25rem;
+            padding: 0;
             background: none;
             font-size: $font-size-base;
             border: none;
@@ -263,8 +293,6 @@ function onTagClicked(tag: string) {
             top: 100%;
             z-index: 800;
             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);
         }
 
@@ -272,27 +300,6 @@ function onTagClicked(tag: string) {
             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;
-        }
-
         // built in option class
         .multiselect__option {
             min-height: unset;

From 45f79d0fe3d07f27e240cab473aaf7d009955042 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 11 Jan 2024 15:35:16 +0100
Subject: [PATCH 2/4] fix component test

---
 .../TagsMultiselect/StatelessTags.test.js        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
index 5468a153a8e9..3d9cd1a9258f 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.test.js
+++ b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -7,6 +7,7 @@ import { computed } from "vue";
 import StatelessTags from "./StatelessTags";
 
 const autocompleteTags = ["#named_user_tag", "abc", "my_tag"];
+const toggleButton = ".toggle-button";
 
 const localVue = getLocalVue();
 
@@ -65,11 +66,12 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
+        wrapper.find(toggleButton).trigger("click");
+        await wrapper.vm.$nextTick();
+
         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());
 
@@ -85,10 +87,9 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
-        const multiselect = wrapper.find(".multiselect");
-
-        multiselect.find("button").trigger("click");
+        wrapper.find(toggleButton).trigger("click");
         await wrapper.vm.$nextTick();
+        const multiselect = wrapper.find(".multiselect");
         await multiselect.find("input").setValue("new_tag");
         await wrapper.vm.$nextTick();
         multiselect.find(".multiselect-option").trigger("click");
@@ -103,10 +104,9 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
-        const multiselect = wrapper.find(".multiselect");
-
-        multiselect.find("button").trigger("click");
+        wrapper.find(toggleButton).trigger("click");
         await wrapper.vm.$nextTick();
+        const multiselect = wrapper.find(".multiselect");
         await multiselect.find("input").setValue(":illegal_tag");
         await wrapper.vm.$nextTick();
 

From 201ac82c4af4ba4a0b47df810e8f146bdc286aa8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 15 Jan 2024 11:05:50 +0100
Subject: [PATCH 3/4] update selenium selector

---
 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 e1e473a59c75..5fbaeb6d37e2 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -262,7 +262,7 @@ 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_button: '.details .stateless-tags .multiselect button'
+      tag_area_button: '.details .stateless-tags .toggle-button'
       tag_area_input: '.details .stateless-tags .multiselect input'
       list_items: '.dataset-collection-panel .listing .content-item'
       back_to_history: svg[data-description="back to history"]
@@ -279,7 +279,7 @@ history_panel:
     empty_message: '.empty-message'
     size: '.history-size'
     tag_area: '.details .stateless-tags'
-    tag_area_button: '.details .stateless-tags .multiselect button'
+    tag_area_button: '.details .stateless-tags .toggle-button'
     tag_area_input: '.details .stateless-tags .multiselect input'
     tag_close_btn: '.tags-display .tag-delete-button'
     tags: '.tag span'

From 2f31bc371399b0ab4b81aff6ef76a962dbb0b676 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Jan 2024 12:47:48 +0100
Subject: [PATCH 4/4] fix test selector

---
 client/src/utils/navigation/navigation.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 5fbaeb6d37e2..5564051f95b0 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -234,7 +234,7 @@ history_panel:
   tag_editor:
     selectors:
       _: '${scope} .details .stateless-tags'
-      toggle: '${_} .toggle-link'
+      toggle: '${_} .toggle-button'
       display: '${_} .tag span'
       input: '${_} input'
       tag_area: '${_} .multiselect__tags'