From 705515096ec13cb67d735bd482935f079c4c25b3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 21 Jun 2023 12:48:09 +0200
Subject: [PATCH 1/4] add FormTags element

---
 .../src/components/Form/Elements/FormTags.vue | 23 +++++++++++++++++++
 client/src/components/Form/FormElement.vue    |  5 ++++
 .../src/components/Form/parameterTypes.d.ts   |  3 ++-
 .../TagsMultiselect/StatelessTags.vue         |  6 +++--
 .../Workflow/Editor/Forms/FormOutput.vue      |  6 +++--
 5 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormTags.vue

diff --git a/client/src/components/Form/Elements/FormTags.vue b/client/src/components/Form/Elements/FormTags.vue
new file mode 100644
index 00000000000..e4883d444d5
--- /dev/null
+++ b/client/src/components/Form/Elements/FormTags.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import { computed } from "vue";
+
+const props = defineProps<{
+    value?: string;
+    placeholder?: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+const valueArray = computed(() => props.value?.split(",").map((v) => v.trim()) ?? []);
+
+function onInput(tags: string[]) {
+    emit("input", tags.join(","));
+}
+</script>
+
+<template>
+    <StatelessTags :value="valueArray" :placeholder="props.placeholder" @input="onInput"></StatelessTags>
+</template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 7dc7dcffa28..f49bf72a1b0 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -12,6 +12,7 @@ import FormOptionalText from "./Elements/FormOptionalText.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
 import FormUpload from "./Elements/FormUpload.vue";
 import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
+import FormTags from "./Elements/FormTags.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, computed, useAttrs } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -285,6 +286,10 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :data-label="props.title"
                 :type="props.type ?? (attrs.options ? 'select' : 'text')"
                 :attributes="attrs" />
+            <FormTags
+                v-else-if="props.type === 'tags'"
+                v-model="currentValue"
+                :placeholder="props.attributes?.placeholder" />
             <FormInput v-else :id="props.id" v-model="currentValue" :area="attrs['area']" />
         </div>
 
diff --git a/client/src/components/Form/parameterTypes.d.ts b/client/src/components/Form/parameterTypes.d.ts
index e3c7ca53574..93f1a5406a5 100644
--- a/client/src/components/Form/parameterTypes.d.ts
+++ b/client/src/components/Form/parameterTypes.d.ts
@@ -27,4 +27,5 @@ export type FormParameterTypes =
     | "ftpfile"
     | "upload"
     | "rules"
-    | "data_dialog";
+    | "data_dialog"
+    | "tags";
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 66e57fb2f01..7cab63b018f 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -17,6 +17,7 @@ interface StatelessTagsProps {
     clickable?: boolean;
     useToggleLink?: boolean;
     maxVisibleTags?: number;
+    placeholder?: string;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<StatelessTagsProps>(), {
     clickable: false,
     useToggleLink: true,
     maxVisibleTags: 5,
+    placeholder: "Add Tags",
 });
 
 const emit = defineEmits<{
@@ -117,8 +119,8 @@ function onTagClicked(tag: string) {
         <Multiselect
             v-if="!disabled"
             ref="multiselectElement"
-            placeholder="Add Tags"
             open-direction="bottom"
+            :placeholder="props.placeholder"
             :value="tags"
             :options="userTags"
             :multiple="true"
@@ -145,7 +147,7 @@ function onTagClicked(tag: string) {
 
             <template v-slot:caret>
                 <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">
-                    Add Tags
+                    {{ props.placeholder }}
                     <FontAwesomeIcon icon="fa-tags" />
                 </b-button>
             </template>
diff --git a/client/src/components/Workflow/Editor/Forms/FormOutput.vue b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
index 1b6a10a257c..8d5bbf18cc8 100644
--- a/client/src/components/Workflow/Editor/Forms/FormOutput.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
@@ -21,15 +21,17 @@
             <FormElement
                 :id="actionNames.TagDatasetAction__tags"
                 :value="formData[actionNames.TagDatasetAction__tags]"
+                :attributes="{ placeholder: 'Enter Tags' }"
                 title="Add Tags"
-                type="text"
+                type="tags"
                 help="This action will set tags for the dataset."
                 @input="onInput" />
             <FormElement
                 :id="actionNames.RemoveTagDatasetAction__tags"
                 :value="formData[actionNames.RemoveTagDatasetAction__tags]"
+                :attributes="{ placeholder: 'Enter Tags' }"
                 title="Remove Tags"
-                type="text"
+                type="tags"
                 help="This action will remove tags for the dataset."
                 @input="onInput" />
             <FormCard title="Assign columns" collapsible :expanded.sync="expandedColumn">

From 9eae51fdf63e50d350c469f1e6b263192d9689b4 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 21 Jun 2023 12:48:39 +0200
Subject: [PATCH 2/4] fix tags component autocomplete rendering

---
 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 7cab63b018f..41607a2cb7a 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -329,6 +329,7 @@ function onTagClicked(tag: string) {
         .multiselect__option--selected {
             .multiselect-option {
                 color: $brand-primary;
+                background-color: $brand-secondary;
 
                 .info:not(.highlighted) {
                     display: inline-block;

From 84ac0bfb8ad70bc203113d5b6fbfa8d7195b702a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 21 Jun 2023 13:49:49 +0200
Subject: [PATCH 3/4] display tags on output node

---
 .../TagsMultiselect/StatelessTags.vue         |  5 +-
 .../components/Workflow/Editor/NodeOutput.vue | 76 ++++++++++++++-----
 client/src/style/scss/ui.scss                 |  4 +
 3 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 41607a2cb7a..96498452fc5 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -18,6 +18,7 @@ interface StatelessTagsProps {
     useToggleLink?: boolean;
     maxVisibleTags?: number;
     placeholder?: string;
+    noPadding?: boolean;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -115,7 +116,7 @@ function onTagClicked(tag: string) {
 </script>
 
 <template>
-    <div class="stateless-tags px-1">
+    <div class="stateless-tags" :class="{ 'px-1': !props.noPadding }">
         <Multiselect
             v-if="!disabled"
             ref="multiselectElement"
@@ -175,7 +176,7 @@ function onTagClicked(tag: string) {
             </template>
         </Multiselect>
 
-        <div v-else class="pl-1 pb-2">
+        <div v-else :class="{ 'pl-1': !props.noPadding, 'pb-2': !props.noPadding }">
             <div class="d-inline">
                 <Tag
                     v-for="tag in trimmedTags"
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 4ce69ff0484..0d522a1f583 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -16,9 +16,15 @@ import { assertDefined, ensureDefined } from "@/utils/assertions";
 import type { UseElementBoundingReturn, UseScrollReturn } from "@vueuse/core";
 import { useRelativePosition } from "./composables/relativePosition";
 import { NULL_COLLECTION_TYPE_DESCRIPTION, type CollectionTypeDescriptor } from "./modules/collectionTypeDescription";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 type ElementBounding = UnwrapRef<UseElementBoundingReturn>;
 
+library.add(faPlus, faMinus);
+
 const props = defineProps<{
     output: OutputTerminalSource;
     workflowOutputs: NonNullable<Step["workflow_outputs"]>;
@@ -266,28 +272,60 @@ const outputDetails = computed(() => {
 onBeforeUnmount(() => {
     stateStore.deleteOutputTerminalPosition(props.stepId, props.output.name);
 });
+
+const addTagsAction = computed(() => {
+    return props.postJobActions[`TagDatasetAction${props.output.name}`]?.action_arguments?.tags?.split(",") ?? [];
+});
+
+const removeTagsAction = computed(() => {
+    return props.postJobActions[`RemoveTagDatasetAction${props.output.name}`]?.action_arguments?.tags?.split(",") ?? [];
+});
 </script>
+
 <template>
-    <div :class="rowClass" :data-output-name="output.name">
-        <div
-            v-if="showCalloutActiveOutput"
-            v-b-tooltip
-            class="callout-terminal"
-            title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
-            @keyup="onToggleActive"
-            @click="onToggleActive">
-            <i :class="['mark-terminal', activeClass]" />
+    <div class="d-flex" :class="rowClass" :data-output-name="output.name">
+        <div class="d-flex flex-column w-100">
+            <div class="d-flex flex-row">
+                <div
+                    v-if="showCalloutActiveOutput"
+                    v-b-tooltip
+                    class="callout-terminal"
+                    title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
+                    @keyup="onToggleActive"
+                    @click="onToggleActive">
+                    <i :class="['mark-terminal', activeClass]" />
+                </div>
+                <div
+                    v-if="showCalloutVisible"
+                    v-b-tooltip
+                    class="callout-terminal"
+                    :title="visibleHint"
+                    @keyup="onToggleVisible"
+                    @click="onToggleVisible">
+                    <i :class="['mark-terminal', visibleClass]" />
+                </div>
+                {{ label }}
+            </div>
+
+            <div
+                v-if="addTagsAction.length > 0"
+                v-b-tooltip.left
+                class="d-flex align-items-center overflow-x-hidden"
+                title="These tags will be added to the output dataset">
+                <FontAwesomeIcon icon="fa-plus" class="mr-1" />
+                <StatelessTags disabled no-padding :value="addTagsAction" />
+            </div>
+
+            <div
+                v-if="removeTagsAction.length > 0"
+                v-b-tooltip.left
+                class="d-flex align-items-center overflow-x-hidden"
+                title="These tags will be removed from the output dataset">
+                <FontAwesomeIcon icon="fa-minus" class="mr-1" />
+                <StatelessTags disabled no-padding :value="removeTagsAction" />
+            </div>
         </div>
-        <div
-            v-if="showCalloutVisible"
-            v-b-tooltip
-            class="callout-terminal"
-            :title="visibleHint"
-            @keyup="onToggleVisible"
-            @click="onToggleVisible">
-            <i :class="['mark-terminal', visibleClass]" />
-        </div>
-        {{ label }}
+
         <draggable-wrapper
             :id="id"
             ref="el"
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index fe370727b92..a9761d8072a 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -436,3 +436,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
         text-decoration: underline;
     }
 }
+
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}

From b443b5306473bf0493750411aa30d7fc596f05bc Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 21 Jun 2023 15:30:07 +0200
Subject: [PATCH 4/4] fix selenium test

---
 client/src/utils/navigation/navigation.yml       | 12 ++++++++++--
 lib/galaxy_test/selenium/test_workflow_editor.py |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index f88d0981b59..d3895da7e72 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -744,11 +744,19 @@ workflow_editor:
       type: xpath
       selector: >
         //li[@class="multiselect__element"]//span[text()="${datatype}"]
-    add_tags:
+    add_tags_button:
+      type: xpath
+      selector: >
+        //div[@data-label='Add Tags']//button
+    add_tags_input:
       type: xpath
       selector: >
         //div[@data-label='Add Tags']//input
-    remove_tags:
+    remove_tags_button:
+      type: xpath
+      selector: >
+        //div[@data-label='Remove Tags']//button
+    remove_tags_input:
       type: xpath
       selector: >
         //div[@data-label='Remove Tags']//input
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index ad6a691d1a2..050d64879a8 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -688,8 +688,10 @@ steps:
         editor.change_datatype.wait_for_and_click()
         editor.select_datatype_text_search.wait_for_and_send_keys("bam")
         editor.select_datatype(datatype="bam").wait_for_and_click()
-        self.set_text_element(editor.add_tags, "#crazynewtag")
-        self.set_text_element(editor.remove_tags, "#oldboringtag")
+        editor.add_tags_button.wait_for_and_click()
+        editor.add_tags_input.wait_for_and_send_keys("#crazynewtag" + Keys.ENTER + Keys.ESCAPE)
+        editor.remove_tags_button.wait_for_and_click()
+        editor.remove_tags_input.wait_for_and_send_keys("#oldboringtag" + Keys.ENTER + Keys.ESCAPE)
         self.sleep_for(self.wait_types.UX_RENDER)
         cat_node.clone.wait_for_and_click()
         editor.label_input.wait_for_and_send_keys("cloned label")