From ebfb7b9ba7ff6cd012efda846a44f85caa826232 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:05:21 +0100
Subject: [PATCH 01/12] Adds selectable workflow cards

Introduces `selected` and `selectable` props to `WorkflowCard`
Adds checkbox for bulk actions
Updates styles for selected cards
---
 .../components/Workflow/List/WorkflowCard.vue | 46 +++++++++++++++----
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index 953ac58ee5aa..4b300d0ae6d7 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BLink } from "bootstrap-vue";
+import { BButton, BFormCheckbox, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -23,6 +23,8 @@ interface Props {
     publishedView?: boolean;
     editorView?: boolean;
     current?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,9 +34,12 @@ const props = withDefaults(defineProps<Props>(), {
     filterable: true,
     editorView: false,
     current: false,
+    selected: false,
+    selectable: false,
 });
 
 const emit = defineEmits<{
+    (e: "select", workflow: any): void;
     (e: "tagClick", tag: string): void;
     (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
     (e: "updateFilter", key: string, value: any): void;
@@ -85,8 +90,17 @@ const dropdownOpen = ref(false);
             class="workflow-card-container"
             :class="{
                 'workflow-shared': workflow.published,
+                'workflow-card-selected': props.selected,
             }">
             <div class="workflow-card-header">
+                <BFormCheckbox
+                    v-if="props.selectable && !shared"
+                    v-b-tooltip.hover.noninteractive
+                    :checked="props.selected"
+                    class="workflow-card-select-checkbox"
+                    title="Select for bulk actions"
+                    @change="emit('select', workflow)" />
+
                 <WorkflowIndicators
                     class="workflow-card-indicators"
                     :workflow="workflow"
@@ -117,6 +131,7 @@ const dropdownOpen = ref(false);
                         @click.stop.prevent="emit('preview', props.workflow.id)">
                         {{ workflow.name }}
                     </BLink>
+
                     <BButton
                         v-if="!props.current && !shared && !workflow.deleted"
                         v-b-tooltip.hover.noninteractive
@@ -190,7 +205,13 @@ const dropdownOpen = ref(false);
         gap: 0.5rem;
         flex-direction: column;
         justify-content: space-between;
-        border: 1px solid $brand-secondary;
+        border: 0.1rem solid $brand-secondary;
+
+        &.workflow-card-selected {
+            background-color: $brand-light;
+            border: 0.1rem solid $brand-primary;
+        }
+
         border-radius: 0.5rem;
         padding: 0.5rem;
 
@@ -203,21 +224,28 @@ const dropdownOpen = ref(false);
             position: relative;
             align-items: start;
             grid-template-areas:
-                "i b"
-                "n n"
-                "s s";
+                "i d b"
+                "n n n"
+                "s s s";
+
+            grid-template-columns: auto 1fr auto;
 
             &:has(.invocations-count) {
                 @container workflow-card (max-width: #{$breakpoint-xs}) {
                     grid-template-areas:
-                        "i b"
-                        "n b"
-                        "s s";
+                        "i d b"
+                        "n n b"
+                        "s s s";
                 }
             }
 
-            .workflow-card-indicators {
+            .workflow-card-select-checkbox {
                 grid-area: i;
+                margin: 0%;
+            }
+
+            .workflow-card-indicators {
+                grid-area: d;
             }
 
             .workflow-count-actions {

From a4d528d21addedafc38fe6e56a1a06c0efefc14d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:13:58 +0100
Subject: [PATCH 02/12] Enhances WorkflowCardList component props and
 functionality to support select

Adds default values to props and new prop for selected workflows
Introduces 'select' event emission and updates CSS for grid view
---
 .../Workflow/List/WorkflowCardList.vue        | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowCardList.vue b/client/src/components/Workflow/List/WorkflowCardList.vue
index a4ed88d3a193..ee425885aaff 100644
--- a/client/src/components/Workflow/List/WorkflowCardList.vue
+++ b/client/src/components/Workflow/List/WorkflowCardList.vue
@@ -16,11 +16,21 @@ interface Props {
     publishedView?: boolean;
     editorView?: boolean;
     currentWorkflowId?: string;
+    selectedWorkflowIds?: Workflow[];
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    gridView: false,
+    hideRuns: false,
+    filterable: true,
+    publishedView: false,
+    editorView: false,
+    currentWorkflowId: "",
+    selectedWorkflowIds: () => [],
+});
 
 const emit = defineEmits<{
+    (e: "select", workflow: Workflow): void;
     (e: "tagClick", tag: string): void;
     (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
     (e: "updateFilter", key: string, value: any): void;
@@ -39,6 +49,7 @@ const modalOptions = reactive({
 });
 
 const showRename = ref(false);
+const showPreview = ref(false);
 
 function onRenameClose() {
     showRename.value = false;
@@ -51,8 +62,6 @@ function onRename(id: string, name: string) {
     showRename.value = true;
 }
 
-const showPreview = ref(false);
-
 function onPreview(id: string) {
     modalOptions.preview.id = id;
     showPreview.value = true;
@@ -74,6 +83,8 @@ function onInsertSteps(workflow: Workflow) {
             v-for="workflow in props.workflows"
             :key="workflow.id"
             :workflow="workflow"
+            :selectable="!publishedView && !editorView"
+            :selected="props.selectedWorkflowIds.some((w) => w.id === workflow.id)"
             :grid-view="props.gridView"
             :hide-runs="props.hideRuns"
             :filterable="props.filterable"
@@ -81,6 +92,7 @@ function onInsertSteps(workflow: Workflow) {
             :editor-view="props.editorView"
             :current="workflow.id === props.currentWorkflowId"
             class="workflow-card"
+            @select="(...args) => emit('select', ...args)"
             @tagClick="(...args) => emit('tagClick', ...args)"
             @refreshList="(...args) => emit('refreshList', ...args)"
             @updateFilter="(...args) => emit('updateFilter', ...args)"
@@ -130,15 +142,20 @@ function onInsertSteps(workflow: Workflow) {
         width: 100%;
     }
 
-    &.grid .workflow-card {
-        width: calc(100% / 3);
+    &.grid {
+        // it is overwriting the base non used css for the grid class
+        padding-top: 0 !important;
 
-        @container card-list (max-width: #{$breakpoint-xl}) {
-            width: calc(100% / 2);
-        }
+        .workflow-card {
+            width: calc(100% / 3);
+
+            @container card-list (max-width: #{$breakpoint-xl}) {
+                width: calc(100% / 2);
+            }
 
-        @container card-list (max-width: #{$breakpoint-sm}) {
-            width: 100%;
+            @container card-list (max-width: #{$breakpoint-sm}) {
+                width: 100%;
+            }
         }
     }
 }

From 892faf751273874677bac2b6a235f1ebeb417f6e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:20:50 +0100
Subject: [PATCH 03/12] Adds workflow selection functionality

Introduces a temporary interface for selected workflows
Implements logic to select and deselect workflows
Clears selected workflows when showing deleted workflows
Passes selected workflow IDs to child components
---
 .../components/Workflow/List/WorkflowList.vue | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 327c514bd495..7082179a956d 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -26,6 +26,13 @@ library.add(faStar, faTrash);
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
 
+// Temporary interface to match the `Workflow` interface from `WorkflowCard`
+interface SelectedWorkflow {
+    id: string;
+    name: string;
+    published: boolean;
+}
+
 interface Props {
     activeList?: "my" | "shared_with_me" | "published";
 }
@@ -46,6 +53,7 @@ const totalWorkflows = ref(0);
 const showAdvanced = ref(false);
 const listHeader = ref<any>(null);
 const workflowsLoaded = ref<WorkflowsList>([]);
+const selectedWorkflowIds = ref<SelectedWorkflow[]>([]);
 
 const searchPlaceHolder = computed(() => {
     let placeHolder = "Search my workflows";
@@ -178,8 +186,24 @@ function validatedFilterText() {
     return workflowFilters.value.getFilterText(validFilters.value, true);
 }
 
+function onSelectWorkflow(w: SelectedWorkflow) {
+    const index = selectedWorkflowIds.value.findIndex((selected) => selected.id === w.id);
+
+    if (index === -1) {
+        selectedWorkflowIds.value.push(w);
+    } else {
+        selectedWorkflowIds.value.splice(index, 1);
+    }
+}
+
+
 watch([filterText, sortBy, sortDesc], async () => {
     offset.value = 0;
+
+    if (showDeleted.value) {
+        selectedWorkflowIds.value = [];
+    }
+
     await load(true);
 });
 
@@ -310,6 +334,8 @@ onMounted(() => {
                 :workflows="workflowsLoaded"
                 :published-view="published"
                 :grid-view="view === 'grid'"
+                :selected-workflow-ids="selectedWorkflowIds"
+                @select="onSelectWorkflow"
                 @refreshList="load"
                 @tagClick="(tag) => updateFilterValue('tag', `'${tag}'`)"
                 @updateFilter="updateFilterValue" />

From 3c8735f0ccb2c3ed733bdfc5a71a9f1f67f90bc2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:22:34 +0100
Subject: [PATCH 04/12] Adds select-all functionality to ListHeader component

Introduces props and emits for select-all feature
Includes checkbox for selecting all items with indeterminate state support
---
 client/src/components/Common/ListHeader.vue | 28 ++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index e2e16cce18e1..691af42da3f7 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
+import { BButton, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
@@ -13,13 +13,25 @@ type ListView = "grid" | "list";
 type SortBy = "create_time" | "update_time" | "name";
 
 interface Props {
+    allSelected?: boolean;
+    showSelectAll?: boolean;
     showViewToggle?: boolean;
+    selectAllDisabled?: boolean;
+    indeterminateSelected?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
+    allSelected: false,
+    showSelectAll: false,
     showViewToggle: false,
+    selectAllDisabled: false,
+    indeterminateSelected: false,
 });
 
+const emit = defineEmits<{
+    (e: "select-all"): void;
+}>();
+
 const userStore = useUserStore();
 
 const sortDesc = ref(true);
@@ -47,6 +59,20 @@ defineExpose({
 
 <template>
     <div class="list-header">
+        <div class="list-header-select-all">
+            <slot name="select-all">
+                <BFormCheckbox
+                    v-if="showSelectAll"
+                    id="list-header-select-all"
+                    :disabled="selectAllDisabled"
+                    :checked="allSelected"
+                    :indeterminate="indeterminateSelected"
+                    @change="emit('select-all')">
+                    Select all
+                </BFormCheckbox>
+            </slot>
+        </div>
+
         <div class="list-header-filters">
             Sort by:
             <BButtonGroup>

From ee153d2b211a30cb0de11ec71c7f2ba2e83286c4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:31:34 +0100
Subject: [PATCH 05/12] Adds select all functionality to WorkflowList

Introduces computed properties for tracking selection state
Implements method to select/deselect all workflows
Updates ListHeader component to support select all feature
---
 .../components/Workflow/List/WorkflowList.vue | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 7082179a956d..2eb50e24bef9 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -93,6 +93,10 @@ const validFilters = computed(() => workflowFilters.value.getValidFilters(rawFil
 const invalidFilters = computed(() => workflowFilters.value.getValidFilters(rawFilters.value, true).invalidFilters);
 const isSurroundedByQuotes = computed(() => /^["'].*["']$/.test(filterText.value));
 const hasInvalidFilters = computed(() => !isSurroundedByQuotes.value && Object.keys(invalidFilters.value).length > 0);
+const indeterminateSelected = computed(() => selectedWorkflowIds.value.length > 0 && !allSelected.value);
+const allSelected = computed(
+    () => selectedWorkflowIds.value.length !== 0 && selectedWorkflowIds.value.length === workflowsLoaded.value.length
+);
 
 function updateFilterValue(filterKey: string, newValue: any) {
     const currentFilterText = filterText.value;
@@ -196,6 +200,20 @@ function onSelectWorkflow(w: SelectedWorkflow) {
     }
 }
 
+function onSelectAllWorkflows() {
+    if (selectedWorkflowIds.value.length === workflowsLoaded.value.length) {
+        selectedWorkflowIds.value = [];
+    } else {
+        selectedWorkflowIds.value = workflowsLoaded.value.map((w: any) => {
+            return {
+                id: w.id,
+                name: w.name,
+                published: w.published,
+            };
+        });
+    }
+}
+
 
 watch([filterText, sortBy, sortDesc], async () => {
     offset.value = 0;
@@ -260,7 +278,14 @@ onMounted(() => {
                 </template>
             </FilterMenu>
 
-            <ListHeader ref="listHeader" show-view-toggle>
+            <ListHeader
+                ref="listHeader"
+                show-view-toggle
+                :show-select-all="!published && !sharedWithMe"
+                :select-all-disabled="loading || overlay || noItems || noResults"
+                :all-selected="allSelected"
+                :indeterminate-selected="indeterminateSelected"
+                @select-all="onSelectAllWorkflows">
                 <template v-slot:extra-filter>
                     <div v-if="activeList === 'my'">
                         Filter:

From 05a53f7051097dff2e7aa5ac9e2466c2d900dd52 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:51:25 +0100
Subject: [PATCH 06/12] Adds bulk delete and restore functionality for
 workflows

Implements bulk delete and restore actions with confirmation dialogs
Adds loading indicators and success/error toasts for user feedback
Updates UI to include bulk action buttons in the workflow list footer
---
 .../components/Workflow/List/WorkflowList.vue | 142 +++++++++++++++++-
 1 file changed, 139 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 2eb50e24bef9..59d55de3cdf3 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -3,12 +3,15 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
+import { faTrashRestore } from "font-awesome-6";
 import { filter } from "underscore";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { GalaxyApi } from "@/api";
 import { getWorkflowFilters, helpHtml } from "@/components/Workflow/List/workflowFilters";
+import { deleteWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 import { rethrowSimple } from "@/utils/simple-error";
@@ -43,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const router = useRouter();
 const userStore = useUserStore();
+const { confirm } = useConfirmDialog();
 
 const limit = ref(24);
 const offset = ref(0);
@@ -52,6 +56,7 @@ const filterText = ref("");
 const totalWorkflows = ref(0);
 const showAdvanced = ref(false);
 const listHeader = ref<any>(null);
+const bulkDeleteOrRestoreLoading = ref(false);
 const workflowsLoaded = ref<WorkflowsList>([]);
 const selectedWorkflowIds = ref<SelectedWorkflow[]>([]);
 
@@ -214,6 +219,89 @@ function onSelectAllWorkflows() {
     }
 }
 
+async function onBulkDelete() {
+    const totalSelected = selectedWorkflowIds.value.length;
+    const hasPublished = selectedWorkflowIds.value.some((w) => w.published);
+
+    const confirmed = await confirm(
+        `${hasPublished ? "Some of the selected workflows are published and will be removed from public view. " : ""}
+            Are you sure you want to delete ${totalSelected} workflows?`,
+        {
+            title: "Delete workflows",
+            okTitle: "Delete workflows",
+            okVariant: "danger",
+        }
+    );
+
+    if (confirmed) {
+        const tmpSelected = [...selectedWorkflowIds.value];
+
+        try {
+            overlay.value = true;
+            bulkDeleteOrRestoreLoading.value = true;
+
+            for (const w of selectedWorkflowIds.value) {
+                await deleteWorkflow(w.id);
+
+                tmpSelected.splice(
+                    tmpSelected.findIndex((s) => s.id === w.id),
+                    1
+                );
+            }
+
+            Toast.success(`Deleted ${totalSelected} workflows.`);
+
+            selectedWorkflowIds.value = [];
+        } catch (e) {
+            Toast.error(`Failed to delete some workflows.`);
+        } finally {
+            bulkDeleteOrRestoreLoading.value = false;
+
+            selectedWorkflowIds.value = tmpSelected;
+
+            await load(true);
+        }
+    }
+}
+
+async function onBulkRestore() {
+    const totalSelected = selectedWorkflowIds.value.length;
+
+    const confirmed = await confirm(`Are you sure you want to restore ${totalSelected} workflows?`, {
+        okTitle: "Restore workflows",
+        okVariant: "primary",
+    });
+
+    if (confirmed) {
+        const tmpSelected = [...selectedWorkflowIds.value];
+
+        try {
+            overlay.value = true;
+            bulkDeleteOrRestoreLoading.value = true;
+
+            for (const w of selectedWorkflowIds.value) {
+                await undeleteWorkflow(w.id);
+
+                tmpSelected.splice(
+                    tmpSelected.findIndex((s) => s.id === w.id),
+                    1
+                );
+            }
+
+            Toast.success(`Restored ${totalSelected} workflows.`);
+
+            selectedWorkflowIds.value = [];
+        } catch (e) {
+            Toast.error(`Failed to restore some workflows.`);
+        } finally {
+            bulkDeleteOrRestoreLoading.value = false;
+
+            selectedWorkflowIds.value = tmpSelected;
+
+            await load(true);
+        }
+    }
+}
 
 watch([filterText, sortBy, sortDesc], async () => {
     offset.value = 0;
@@ -353,8 +441,7 @@ onMounted(() => {
                 </a>
             </BAlert>
         </span>
-
-        <BOverlay v-else id="workflow-cards" :show="overlay" rounded="sm" class="cards-list mt-2">
+        <BOverlay v-else id="workflow-cards" :show="overlay" rounded="sm" class="cards-list">
             <WorkflowCardList
                 :workflows="workflowsLoaded"
                 :published-view="published"
@@ -364,6 +451,43 @@ onMounted(() => {
                 @refreshList="load"
                 @tagClick="(tag) => updateFilterValue('tag', `'${tag}'`)"
                 @updateFilter="updateFilterValue" />
+        </BOverlay>
+
+        <div class="workflow-list-footer">
+            <div
+                v-if="!published && !sharedWithMe && selectedWorkflowIds.length"
+                class="workflow-list-footer-bulk-actions">
+                <BButton
+                    v-if="!showDeleted"
+                    id="workflow-list-footer-bulk-delete-button"
+                    v-b-tooltip.hover
+                    :title="bulkDeleteOrRestoreLoading ? 'Deleting workflows' : 'Delete selected workflows'"
+                    :disabled="bulkDeleteOrRestoreLoading"
+                    size="sm"
+                    variant="primary"
+                    @click="onBulkDelete">
+                    <span v-if="!bulkDeleteOrRestoreLoading">
+                        <FontAwesomeIcon :icon="faTrash" fixed-width />
+                        Delete ({{ selectedWorkflowIds.length }})
+                    </span>
+                    <LoadingSpan v-else message="Deleting" />
+                </BButton>
+                <BButton
+                    v-else
+                    id="workflow-list-footer-bulk-restore-button"
+                    v-b-tooltip.hover
+                    :title="bulkDeleteOrRestoreLoading ? 'Restoring workflows' : 'Restore selected workflows'"
+                    :disabled="bulkDeleteOrRestoreLoading"
+                    size="sm"
+                    variant="primary"
+                    @click="onBulkRestore">
+                    <span v-if="!bulkDeleteOrRestoreLoading">
+                        <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
+                        Restore ({{ selectedWorkflowIds.length }})
+                    </span>
+                    <LoadingSpan v-else message="Restoring" />
+                </BButton>
+            </div>
 
             <BPagination
                 v-if="!loading && totalWorkflows > limit"
@@ -375,7 +499,7 @@ onMounted(() => {
                 first-number
                 last-number
                 @change="onPageChange" />
-        </BOverlay>
+        </div>
     </div>
 </template>
 
@@ -405,5 +529,17 @@ onMounted(() => {
         overflow-y: auto;
         overflow-x: hidden;
     }
+
+    .workflow-list-footer {
+        display: flex;
+        margin-top: 0.5rem;
+
+        .workflow-list-footer-bulk-actions {
+            display: flex;
+            gap: 0.5rem;
+            width: 100%;
+            position: absolute;
+        }
+    }
 }
 </style>

From db3303163eaaa04d3b1fae654c957f3ece6a6864 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:55:43 +0100
Subject: [PATCH 07/12] Adds TagsSelectionDialog component

Introduces a new modal component for selecting tags
Includes props for title and initial tags, and emits events for cancel and ok actions
---
 .../components/Common/TagsSelectionDialog.vue | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 client/src/components/Common/TagsSelectionDialog.vue

diff --git a/client/src/components/Common/TagsSelectionDialog.vue b/client/src/components/Common/TagsSelectionDialog.vue
new file mode 100644
index 000000000000..5b286baace4c
--- /dev/null
+++ b/client/src/components/Common/TagsSelectionDialog.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { BModal } from "bootstrap-vue";
+import { ref } from "vue";
+
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+
+interface Props {
+    title?: string;
+    initialTags?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: "Select tags to add",
+    initialTags: () => [],
+});
+
+const tags = ref(props.initialTags);
+
+const emit = defineEmits<{
+    (e: "cancel"): void;
+    (e: "ok", tags: string[]): void;
+}>();
+
+function onTagsChange(newTags: string[]) {
+    tags.value = newTags;
+}
+</script>
+
+<template>
+    <BModal visible centered size="lg" :title="title" @ok="emit('ok', tags)" @hide="emit('cancel')">
+        <StatelessTags :value="tags" @input="onTagsChange($event)" />
+    </BModal>
+</template>

From c2548d6faa8201c0374d1b849ada83dc69192213 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:54:40 +0100
Subject: [PATCH 08/12] Adds bulk tag management to WorkflowList

Introduces functionality to add tags to multiple workflows at once.
Includes UI elements and supporting logic for bulk tag addition.
Enhances workflow management by allowing bulk tag updates.
---
 .../components/Workflow/List/WorkflowList.vue | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 59d55de3cdf3..94e71087dcc4 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faStar, faTags, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
 import { faTrashRestore } from "font-awesome-6";
@@ -10,7 +10,7 @@ import { useRouter } from "vue-router/composables";
 
 import { GalaxyApi } from "@/api";
 import { getWorkflowFilters, helpHtml } from "@/components/Workflow/List/workflowFilters";
-import { deleteWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
+import { deleteWorkflow, undeleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
@@ -21,6 +21,7 @@ import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
 import LoginRequired from "@/components/Common/LoginRequired.vue";
+import TagsSelectionDialog from "@/components/Common/TagsSelectionDialog.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowListActions from "@/components/Workflow/List/WorkflowListActions.vue";
 
@@ -56,6 +57,8 @@ const filterText = ref("");
 const totalWorkflows = ref(0);
 const showAdvanced = ref(false);
 const listHeader = ref<any>(null);
+const showBulkAddTagsModal = ref(false);
+const bulkTagsLoading = ref(false);
 const bulkDeleteOrRestoreLoading = ref(false);
 const workflowsLoaded = ref<WorkflowsList>([]);
 const selectedWorkflowIds = ref<SelectedWorkflow[]>([]);
@@ -303,6 +306,41 @@ async function onBulkRestore() {
     }
 }
 
+async function onToggleBulkTags() {
+    showBulkAddTagsModal.value = !showBulkAddTagsModal.value;
+}
+
+async function onBulkTagsAdd(tags: string[]) {
+    const tmpSelected = [...selectedWorkflowIds.value];
+    const totalSelected = selectedWorkflowIds.value.length;
+
+    try {
+        overlay.value = true;
+        bulkTagsLoading.value = true;
+
+        for (const w of selectedWorkflowIds.value) {
+            const prevTags = workflowsLoaded.value.find((workflow) => workflow.id === w.id)?.tags || [];
+
+            await updateWorkflow(w.id, { tags: [...new Set([...prevTags, ...tags])] });
+
+            tmpSelected.splice(
+                tmpSelected.findIndex((s) => s.id === w.id),
+                1
+            );
+        }
+
+        Toast.success(`Added tag(s) to ${totalSelected} workflows.`);
+    } catch (e) {
+        Toast.error(`Failed to add tag(s) to some workflows. ${e}`);
+    } finally {
+        bulkTagsLoading.value = false;
+
+        selectedWorkflowIds.value = tmpSelected;
+
+        await load(true);
+    }
+}
+
 watch([filterText, sortBy, sortDesc], async () => {
     offset.value = 0;
 
@@ -487,6 +525,22 @@ onMounted(() => {
                     </span>
                     <LoadingSpan v-else message="Restoring" />
                 </BButton>
+
+                <BButton
+                    v-if="!showDeleted"
+                    id="workflow-list-footer-bulk-add-tags-button"
+                    v-b-tooltip.hover
+                    :title="bulkTagsLoading ? 'Adding tags' : 'Add tags to selected workflows'"
+                    :disabled="bulkTagsLoading"
+                    size="sm"
+                    variant="primary"
+                    @click="onToggleBulkTags">
+                    <span v-if="!bulkTagsLoading">
+                        <FontAwesomeIcon :icon="faTags" fixed-width />
+                        Add tags ({{ selectedWorkflowIds.length }})
+                    </span>
+                    <LoadingSpan v-else message="Adding tags" />
+                </BButton>
             </div>
 
             <BPagination
@@ -500,6 +554,14 @@ onMounted(() => {
                 last-number
                 @change="onPageChange" />
         </div>
+
+        <TagsSelectionDialog
+            v-if="showBulkAddTagsModal"
+            :title="`Add tags to ${selectedWorkflowIds.length} selected workflow${
+                selectedWorkflowIds.length > 1 ? 's' : ''
+            }`"
+            @cancel="onToggleBulkTags"
+            @ok="onBulkTagsAdd" />
     </div>
 </template>
 

From 502aa740b70fb2b562ecbf1d318e13aec24c1cd5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:58:58 +0100
Subject: [PATCH 09/12] Refactors WorkflowList component and improves UI

Removes unused FontAwesome library import
Simplifies computed property logic for noResults
Improve alerts logic
Enhances alert and pagination styling for better UI consistency
---
 .../components/Workflow/List/WorkflowList.vue | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 94e71087dcc4..fed60581f6ae 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar, faTags, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
@@ -25,8 +24,6 @@ import TagsSelectionDialog from "@/components/Common/TagsSelectionDialog.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowListActions from "@/components/Workflow/List/WorkflowListActions.vue";
 
-library.add(faStar, faTrash);
-
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
 
@@ -86,13 +83,12 @@ const view = computed(() => (userStore.preferredListViewMode as ListView) || "gr
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
 const noItems = computed(() => !loading.value && workflowsLoaded.value.length === 0 && !filterText.value);
-const noResults = computed(() => !loading.value && workflowsLoaded.value.length === 0 && filterText.value);
+const noResults = computed(() => !loading.value && workflowsLoaded.value.length === 0 && Boolean(filterText.value));
 const deleteButtonTitle = computed(() => (showDeleted.value ? "Hide deleted workflows" : "Show deleted workflows"));
 const bookmarkButtonTitle = computed(() =>
     showBookmarked.value ? "Hide bookmarked workflows" : "Show bookmarked workflows"
 );
 
-// Filtering computed refs
 const workflowFilters = computed(() => getWorkflowFilters(props.activeList));
 const rawFilters = computed(() =>
     Object.fromEntries(workflowFilters.value.getFiltersForText(filterText.value, true, false))
@@ -127,7 +123,9 @@ async function load(overlayLoading = false, silent = false) {
             loading.value = true;
         }
     }
+
     let search;
+
     if (!hasInvalidFilters.value) {
         search = validatedFilterText();
 
@@ -443,16 +441,17 @@ onMounted(() => {
             </ListHeader>
         </div>
 
-        <BAlert v-if="loading" variant="info" show>
-            <LoadingSpan message="Loading workflows..." />
-        </BAlert>
-
-        <BAlert v-if="!loading && !overlay && noItems" id="workflow-list-empty" variant="info" show>
-            No workflows found. You may create or import new workflows using the buttons above.
-        </BAlert>
-
-        <!-- There are either `noResults` or `invalidFilters` -->
-        <span v-else-if="!loading && !overlay && (noResults || hasInvalidFilters)">
+        <div v-if="loading" class="workflow-list-alert">
+            <BAlert variant="info" show>
+                <LoadingSpan message="Loading workflows" />
+            </BAlert>
+        </div>
+        <div v-else-if="!loading && !overlay && noItems" class="workflow-list-alert">
+            <BAlert id="workflow-list-empty" variant="info" show>
+                No workflows found. You may create or import new workflows using the buttons above.
+            </BAlert>
+        </div>
+        <span v-else-if="!loading && !overlay && (noResults || hasInvalidFilters)" class="workflow-list-alert">
             <BAlert v-if="!hasInvalidFilters" id="no-workflow-found" variant="info" show>
                 No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
             </BAlert>
@@ -544,8 +543,7 @@ onMounted(() => {
             </div>
 
             <BPagination
-                v-if="!loading && totalWorkflows > limit"
-                class="mt-2 w-100"
+                class="workflow-list-footer-pagination"
                 :value="currentPage"
                 :total-rows="totalWorkflows"
                 :per-page="limit"
@@ -582,6 +580,10 @@ onMounted(() => {
         z-index: 100;
     }
 
+    .workflow-list-alert {
+        height: 100%;
+    }
+
     .cards-list {
         scroll-behavior: smooth;
         min-height: 150px;
@@ -602,6 +604,11 @@ onMounted(() => {
             width: 100%;
             position: absolute;
         }
+
+        .workflow-list-footer-pagination {
+            margin: 0 auto;
+            width: 100%;
+        }
     }
 }
 </style>

From 606c3e6a3d0d89d6271bcd6676710d2cd5121dff Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 19:59:35 +0100
Subject: [PATCH 10/12] Updates workflow type and improves null safety

Changes workflow prop type to StoredWorkflowDetailed for better type safety
Adds optional chaining to prevent potential null reference errors
---
 client/src/components/Workflow/List/WorkflowCard.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index 4b300d0ae6d7..18a230d45a9a 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -5,6 +5,7 @@ import { BButton, BFormCheckbox, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
+import { type StoredWorkflowDetailed } from "@/api/workflows";
 import { updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useUserStore } from "@/stores/userStore";
 
@@ -16,7 +17,7 @@ import WorkflowIndicators from "@/components/Workflow/List/WorkflowIndicators.vu
 import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
 
 interface Props {
-    workflow: any;
+    workflow: StoredWorkflowDetailed;
     gridView?: boolean;
     hideRuns?: boolean;
     filterable?: boolean;
@@ -61,7 +62,7 @@ const shared = computed(() => {
 
 const description = computed(() => {
     if (workflow.value.annotations && workflow.value.annotations.length > 0) {
-        return workflow.value.annotations[0].trim();
+        return workflow.value.annotations[0]?.trim();
     } else {
         return null;
     }

From c5750e846f1bad0be0682e2e9938174a66b51a6f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 20:00:05 +0100
Subject: [PATCH 11/12] Improves list header sorting UI

Adds missing BButtonGroup import from Bootstrap
Increases gap between filter elements for improved layout
---
 client/src/components/Common/ListHeader.vue | 58 +++++++++++----------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 691af42da3f7..de4f1d0f8755 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
@@ -74,32 +74,34 @@ defineExpose({
         </div>
 
         <div class="list-header-filters">
-            Sort by:
-            <BButtonGroup>
-                <BButton
-                    id="sortby-name"
-                    v-b-tooltip.hover
-                    size="sm"
-                    :title="sortDesc ? 'Sort by name ascending' : 'Sort by name descending'"
-                    :pressed="sortBy === 'name'"
-                    variant="outline-primary"
-                    @click="onSort('name')">
-                    <FontAwesomeIcon v-show="sortBy === 'name'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                    Name
-                </BButton>
-
-                <BButton
-                    id="sortby-update-time"
-                    v-b-tooltip.hover
-                    size="sm"
-                    :title="sortDesc ? 'Sort by update time ascending' : 'Sort by update time descending'"
-                    :pressed="sortBy === 'update_time'"
-                    variant="outline-primary"
-                    @click="onSort('update_time')">
-                    <FontAwesomeIcon v-show="sortBy === 'update_time'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                    Update time
-                </BButton>
-            </BButtonGroup>
+            <div>
+                Sort by:
+                <BButtonGroup>
+                    <BButton
+                        id="sortby-name"
+                        v-b-tooltip.hover
+                        size="sm"
+                        :title="sortDesc ? 'Sort by name ascending' : 'Sort by name descending'"
+                        :pressed="sortBy === 'name'"
+                        variant="outline-primary"
+                        @click="onSort('name')">
+                        <FontAwesomeIcon v-show="sortBy === 'name'" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                        Name
+                    </BButton>
+
+                    <BButton
+                        id="sortby-update-time"
+                        v-b-tooltip.hover
+                        size="sm"
+                        :title="sortDesc ? 'Sort by update time ascending' : 'Sort by update time descending'"
+                        :pressed="sortBy === 'update_time'"
+                        variant="outline-primary"
+                        @click="onSort('update_time')">
+                        <FontAwesomeIcon v-show="sortBy === 'update_time'" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                        Update time
+                    </BButton>
+                </BButtonGroup>
+            </div>
 
             <slot name="extra-filter" />
         </div>
@@ -141,7 +143,7 @@ defineExpose({
 
     .list-header-filters {
         display: flex;
-        gap: 0.25rem;
+        gap: 1rem;
         flex-wrap: wrap;
         align-items: center;
     }

From a1b0c25bf63b4a761719a759d41dec42acbe3ffe Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Dec 2024 21:11:54 +0100
Subject: [PATCH 12/12] Fix workflow card list overlay css

Adds overflow auto to the  WorkflowCardList to fix overlay not covering the list
---
 client/src/components/Workflow/List/WorkflowCardList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Workflow/List/WorkflowCardList.vue b/client/src/components/Workflow/List/WorkflowCardList.vue
index ee425885aaff..306cb7290b01 100644
--- a/client/src/components/Workflow/List/WorkflowCardList.vue
+++ b/client/src/components/Workflow/List/WorkflowCardList.vue
@@ -134,6 +134,7 @@ function onInsertSteps(workflow: Workflow) {
 @import "_breakpoints.scss";
 
 .workflow-card-list {
+    overflow: auto;
     container: card-list / inline-size;
     display: flex;
     flex-wrap: wrap;