From 861ac14ad2b8f1639579132eb0f07afba80f89ad Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 13:44:42 +1000
Subject: [PATCH 001/104] create AdvancedFilteringHelpModal generic component

---
 .../Common/AdvancedFilteringHelpModal.vue     | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 client/src/components/Common/AdvancedFilteringHelpModal.vue

diff --git a/client/src/components/Common/AdvancedFilteringHelpModal.vue b/client/src/components/Common/AdvancedFilteringHelpModal.vue
new file mode 100644
index 000000000000..e9c971679d0d
--- /dev/null
+++ b/client/src/components/Common/AdvancedFilteringHelpModal.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { BModal } from "bootstrap-vue";
+
+type FilterOption = {
+    filter: string;
+    description: string;
+};
+
+interface Props {
+    visible: boolean;
+    title: string;
+    filterOptions?: FilterOption[];
+}
+
+withDefaults(defineProps<Props>(), {
+    title: "",
+    filterOptions: () => [
+        { filter: "name", description: "Shows items with the given sequence of characters in their names." },
+    ],
+});
+
+defineEmits<{
+    (e: "close"): void;
+}>();
+</script>
+
+<template>
+    <BModal :visible="visible" :title="`Filtering Options Help - ${title}`" ok-only @ok="() => $emit('close')">
+        <div>
+            <p>This input can be used to filter the {{ title }} displayed.</p>
+
+            <p>
+                Text entered here will be searched against {{ title }}. Additionally, advanced filtering tags can be
+                used to refine the search more precisely. Filtering tags are of the form
+                <code>&lt;tag_name&gt;:&lt;tag_value&gt;</code> or <code>&lt;tag_name&gt;:'&lt;tag_value&gt;'</code>.
+                For instance to search just for RNAseq in the {{ title }} name, <code>name:rnsseq</code> can be used.
+                Notice by default the search is not case-sensitive. If the quoted version of tag is used, the search is
+                case sensitive and only full matches will be returned. So <code>name:'RNAseq'</code> would show only
+                {{ title }} named exactly <code>RNAseq</code>.
+            </p>
+
+            <p>The available filtering tags are:</p>
+            <dl>
+                <div v-for="(fo, index) in filterOptions" :key="index" class="mb-2">
+                    <dt>
+                        <code>{{ fo.filter }}</code>
+                    </dt>
+                    <dd>{{ fo.description }}</dd>
+                </div>
+            </dl>
+        </div>
+    </BModal>
+</template>

From a13e84c5bf4c2dc3a172234f155e2d26c990b520 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 14:39:04 +1000
Subject: [PATCH 002/104] update AsyncButton: add loading title prop, support
 object icons and create Props interface

---
 client/src/components/Common/AsyncButton.vue | 48 +++++++-------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index 2d6ccd4881e7..9487e2ddb781 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -3,39 +3,25 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { ref } from "vue";
 
-const loading = ref(false);
+interface Props {
+    icon: string | object;
+    title?: string;
+    disabled?: boolean;
+    loadingTitle?: string;
+    size?: "sm" | "md" | "lg";
+    action: () => Promise<void>;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+}
 
-const props = defineProps({
-    icon: {
-        type: String,
-        required: true,
-    },
-    title: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    action: {
-        type: Function,
-        required: true,
-    },
-    size: {
-        type: String,
-        required: false,
-        default: "md",
-    },
-    variant: {
-        type: String,
-        required: false,
-        default: "link",
-    },
-    disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-    },
+const props = withDefaults(defineProps<Props>(), {
+    title: "",
+    size: "md",
+    variant: "link",
+    loadingTitle: "Loading...",
 });
 
+const loading = ref(false);
+
 async function onClick() {
     loading.value = true;
     await props.action();
@@ -51,7 +37,7 @@ async function onClick() {
         :variant="variant"
         :disabled="loading || disabled"
         @click="onClick">
-        <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" title="loading"></span>
+        <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" :title="loadingTitle" />
         <FontAwesomeIcon v-else :icon="props.icon" @click="onClick" />
         <slot></slot>
     </BButton>

From ebd01a0ceb263ac7ce8c02382fc06cc76fe4bc6b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 17:36:34 +1000
Subject: [PATCH 003/104] update AdvancedFilteringHelpModal hide

---
 .../src/components/Common/AdvancedFilteringHelpModal.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/AdvancedFilteringHelpModal.vue b/client/src/components/Common/AdvancedFilteringHelpModal.vue
index e9c971679d0d..156239691cfa 100644
--- a/client/src/components/Common/AdvancedFilteringHelpModal.vue
+++ b/client/src/components/Common/AdvancedFilteringHelpModal.vue
@@ -25,7 +25,12 @@ defineEmits<{
 </script>
 
 <template>
-    <BModal :visible="visible" :title="`Filtering Options Help - ${title}`" ok-only @ok="() => $emit('close')">
+    <BModal
+        :visible="visible"
+        :title="`Filtering Options Help - ${title}`"
+        ok-only
+        @ok="() => $emit('close')"
+        @hide="() => $emit('close')">
         <div>
             <p>This input can be used to filter the {{ title }} displayed.</p>
 

From 30579788d1cd6179e1ecd89c03738554b468cfd8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:03:42 +1000
Subject: [PATCH 004/104] create generic AdvancedFiltering component, export
 HandlerReturn type from filtering utility

---
 .../components/Common/AdvancedFiltering.vue   | 151 ++++++++++++++++++
 client/src/utils/filtering.ts                 |   2 +-
 2 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Common/AdvancedFiltering.vue

diff --git a/client/src/components/Common/AdvancedFiltering.vue b/client/src/components/Common/AdvancedFiltering.vue
new file mode 100644
index 000000000000..70fbce083f68
--- /dev/null
+++ b/client/src/components/Common/AdvancedFiltering.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown, faAngleDoubleUp, faRedo, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import Filtering, { type HandlerReturn } from "@/utils/filtering";
+
+import AdvancedFilteringHelpModal from "@/components/Common/AdvancedFilteringHelpModal.vue";
+
+library.add(faAngleDoubleDown, faAngleDoubleUp, faRedo, faSearch);
+
+type FilterOption = {
+    filter: string;
+    description: string;
+};
+
+interface Props {
+    helpTitle?: string;
+    advancedMode?: boolean;
+    useDefaults?: boolean;
+    searchPlaceHolder: string;
+    filterOptions: FilterOption[];
+    advancedFilterFields?: string[];
+    validFilters: Record<string, HandlerReturn<unknown>>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    helpTitle: "",
+    useDefaults: false,
+    advancedMode: false,
+    searchPlaceHolder: "Search",
+    advancedFilterFields: () => ["name", "tag"],
+});
+
+const filters = new Filtering(props.validFilters, props.useDefaults);
+
+const filterText = ref("");
+const showHelp = ref(false);
+const showAdvanced = ref(false);
+
+const filterSettings = computed(() => filters.toAlias(filters.getFiltersForText(filterText.value)));
+const localFilter = computed({
+    get() {
+        return filterText.value;
+    },
+    set(newVal: string) {
+        if (newVal !== filterText.value) {
+            updateFilter(newVal);
+        }
+    },
+});
+
+function updateFilter(newVal: string) {
+    filterText.value = newVal.trim();
+}
+
+function onToggle() {
+    showAdvanced.value = !showAdvanced.value;
+}
+
+function onToggleHelp() {
+    showHelp.value = !showHelp.value;
+}
+
+function onSearch() {
+    onToggle();
+    updateFilter(filters.getFilterText(filterSettings.value));
+}
+
+defineExpose({
+    filters,
+    filterText,
+    updateFilter,
+});
+</script>
+
+<template>
+    <div>
+        <BInputGroup class="mb-2">
+            <BFormInput
+                id="filter-input"
+                v-model="localFilter"
+                debounce="500"
+                size="sm"
+                :class="filterText && 'font-weight-bold'"
+                :placeholder="searchPlaceHolder"
+                title="clear search (esc)"
+                data-description="filter text input"
+                @keyup.esc="updateFilter('')" />
+
+            <BInputGroupAppend>
+                <BButton
+                    v-if="advancedMode"
+                    v-b-tooltip.hover
+                    size="sm"
+                    aria-haspopup="true"
+                    title="Advanced Filtering Help"
+                    @click="onToggleHelp">
+                    <FontAwesomeIcon icon="question" />
+                </BButton>
+
+                <BButton
+                    v-if="advancedMode"
+                    v-b-tooltip.hover
+                    size="sm"
+                    :title="showAdvanced ? 'Hide advanced filter' : 'Show advanced filter'"
+                    :pressed="showAdvanced"
+                    :variant="showAdvanced ? 'info' : 'secondary'"
+                    @click="onToggle">
+                    <FontAwesomeIcon :icon="showAdvanced ? faAngleDoubleUp : faAngleDoubleDown" />
+                </BButton>
+
+                <BButton v-b-tooltip.hover size="sm" title="Clear filters (esc)" @click="updateFilter('')">
+                    <FontAwesomeIcon icon="times" />
+                </BButton>
+            </BInputGroupAppend>
+        </BInputGroup>
+
+        <div v-if="advancedMode && showAdvanced" fluid class="mb-2" @keyup.enter="onSearch">
+            <div v-for="fieldName in advancedFilterFields" :key="fieldName">
+                <small :for="`advanced-filter-${fieldName}`"> Filter by {{ fieldName }}: </small>
+                <BFormInput
+                    :id="`advanced-filter-${fieldName}`"
+                    v-model="filterSettings[`${fieldName}:`]"
+                    size="sm"
+                    :placeholder="`any ${fieldName}`" />
+            </div>
+
+            <div class="my-2">
+                <BButton size="sm" variant="primary" @click="onSearch">
+                    <FontAwesomeIcon :icon="faSearch" />
+                    Search
+                </BButton>
+
+                <BButton size="sm" variant="outline-primary" title="Close advanced filter" @click="onToggle">
+                    <FontAwesomeIcon :icon="faRedo" />
+                    Close
+                </BButton>
+            </div>
+        </div>
+
+        <AdvancedFilteringHelpModal
+            v-if="advancedMode"
+            :title="helpTitle"
+            :visible="showHelp"
+            :filter-options="filterOptions"
+            @close="onToggleHelp" />
+    </div>
+</template>
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index f4c3af41393e..48274bf58083 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -125,7 +125,7 @@ export function getOperatorForAlias(alias: Alias): Operator {
     return operatorForAlias[alias];
 }
 
-type HandlerReturn<T> = {
+export type HandlerReturn<T> = {
     attribute: string;
     converter?: Converter<T>;
     query: string;

From b407211d78d33e9c365ab31e4b2d46e1a132d058 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:10:37 +1000
Subject: [PATCH 005/104] create ListHeader component

---
 client/src/components/Common/ListHeader.vue | 114 ++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 client/src/components/Common/ListHeader.vue

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
new file mode 100644
index 000000000000..e534a7e3f2d2
--- /dev/null
+++ b/client/src/components/Common/ListHeader.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+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 { computed, ref } from "vue";
+
+import { useUserStore } from "@/stores/userStore";
+
+library.add(faAngleDown, faAngleUp, faBars, faGripVertical);
+
+type ListView = "grid" | "list";
+type SortBy = "create_time" | "update_time" | "name";
+
+interface Props {
+    showViewToggle?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    showViewToggle: false,
+});
+
+const userStore = useUserStore();
+
+const sortDesc = ref(true);
+const sortBy = ref<SortBy>("update_time");
+const listViewMode = computed<ListView>(() => (userStore.preferredListViewMode as ListView) || "grid");
+
+function onSort(newSortBy: SortBy) {
+    if (sortBy.value === newSortBy) {
+        sortDesc.value = !sortDesc.value;
+    } else {
+        sortBy.value = newSortBy;
+    }
+}
+
+function onToggleView(newView: ListView) {
+    userStore.setPreferredListViewMode(newView);
+}
+
+defineExpose({
+    sortBy,
+    sortDesc,
+    listViewMode,
+});
+</script>
+
+<template>
+    <BRow align-content="center" no-gutters>
+        <BCol class="align-items-center" no-gutters>
+            <BRow align-content="center" no-gutters>
+                <BCol>
+                    Sortby:
+                    <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>
+                </BCol>
+
+                <slot name="extra-filter" />
+            </BRow>
+        </BCol>
+
+        <BCol v-if="showViewToggle" class="text-right">
+            Display:
+            <BButtonGroup>
+                <BButton
+                    id="view-grid"
+                    v-b-tooltip
+                    title="Grid view"
+                    size="sm"
+                    :pressed="listViewMode === 'grid'"
+                    variant="outline-primary"
+                    @click="onToggleView('grid')">
+                    <FontAwesomeIcon :icon="faGripVertical" />
+                </BButton>
+
+                <BButton
+                    id="view-list"
+                    v-b-tooltip
+                    title="List view"
+                    size="sm"
+                    :pressed="listViewMode === 'list'"
+                    variant="outline-primary"
+                    @click="onToggleView('list')">
+                    <FontAwesomeIcon :icon="faBars" />
+                </BButton>
+            </BButtonGroup>
+        </BCol>
+    </BRow>
+</template>

From aec0fee32da57150d3a529326feb8d537b3af9a7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:16:29 +1000
Subject: [PATCH 006/104] update WorkflowRunButton to vue composition api

---
 .../components/Workflow/WorkflowRunButton.vue | 67 +++++++++----------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 26e40e8fe949..c5fd72f91e01 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -1,41 +1,34 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { useRouter } from "vue-router/composables";
+
+library.add(faPlay);
+
+interface Props {
+    id: string;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+function ExecuteWorkflow() {
+    router.push(`/workflows/run?id=${props.id}`);
+}
+</script>
+
 <template>
     <BButton
-        v-b-tooltip.hover.bottom
-        :title="title | localize"
+        id="workflow-run-button"
+        v-b-tooltip.hover.top
+        title="Run workflow"
         :data-workflow-run="id"
-        class="workflow-run btn-sm btn-primary fa fa-play"
-        @click.stop="executeWorkflow" />
+        variant="primary"
+        size="sm"
+        @click.stop="ExecuteWorkflow">
+        <FontAwesomeIcon :icon="faPlay" />
+    </BButton>
 </template>
-
-<script>
-import { BButton, VBTooltip } from "bootstrap-vue";
-
-export default {
-    components: {
-        BButton,
-    },
-    directives: {
-        VBTooltip,
-    },
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        root: {
-            type: String,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            return "Run workflow";
-        },
-    },
-    methods: {
-        executeWorkflow() {
-            this.$router.push(`/workflows/run?id=${this.id}`);
-        },
-    },
-};
-</script>

From a1592de7bb4650da373812b43cbffa3e7fb42469 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:20:51 +1000
Subject: [PATCH 007/104] create WorkflowRename component

---
 .../components/Workflow/WorkflowRename.vue    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowRename.vue

diff --git a/client/src/components/Workflow/WorkflowRename.vue b/client/src/components/Workflow/WorkflowRename.vue
new file mode 100644
index 000000000000..d131820096a8
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowRename.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { BForm, BFormInput, BModal } from "bootstrap-vue";
+import { ref } from "vue";
+
+import { updateWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+import localize from "@/utils/localization";
+
+import Heading from "@/components/Common/Heading.vue";
+
+interface Props {
+    id: string;
+    name: string;
+    show: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "onRename", name: string): void;
+}>();
+
+const nameModel = ref(props.name);
+const workflowNameInput = ref<HTMLInputElement | null>(null);
+
+async function onRename(newName: string) {
+    try {
+        await updateWorkflow(props.id, { name: newName });
+        Toast.success("Workflow renamed");
+    } catch (e) {
+        Toast.error("Failed to rename workflow");
+    } finally {
+        emit("close");
+    }
+}
+</script>
+
+<template>
+    <BModal :visible="show" @ok="onRename(nameModel)" @hide="$emit('close')">
+        <template v-slot:modal-title>
+            <Heading h2 inline size="sm"> Rename workflow: {{ localize(name) }}</Heading>
+        </template>
+
+        <BForm @submit.prevent="onRename(nameModel)">
+            <BFormInput
+                id="workflow-name-input"
+                ref="workflowNameInput"
+                v-model="nameModel"
+                type="text"
+                placeholder="Enter new name" />
+        </BForm>
+    </BModal>
+</template>

From 0a0f05795112041ff5f20a43a74ed7dab5717170 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:31:24 +1000
Subject: [PATCH 008/104] create WorkflowCreate component

---
 .../components/Workflow/WorkflowCreate.vue    | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowCreate.vue

diff --git a/client/src/components/Workflow/WorkflowCreate.vue b/client/src/components/Workflow/WorkflowCreate.vue
new file mode 100644
index 000000000000..4d47c48b6ff9
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowCreate.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { type AxiosError } from "axios";
+import { BFormInput } from "bootstrap-vue";
+import { ref } from "vue";
+
+import { createWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import Heading from "@/components/Common/Heading.vue";
+
+library.add(faCheck);
+
+interface Pros {
+    modalView: boolean;
+}
+
+defineProps<Pros>();
+
+const workflowAnnotation = ref("");
+const workflowName = ref("Unnamed workflow");
+const workflowNameInput = ref<HTMLInputElement | null>(null);
+
+async function onCreate() {
+    try {
+        await createWorkflow(workflowName.value, workflowAnnotation.value);
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        Toast.error(error.response?.data.err_msg ?? "Failed to create workflow");
+    }
+}
+</script>
+
+<template>
+    <div>
+        <Heading v-if="!modalView" h1 separator size="xl">Create workflow</Heading>
+
+        <label for="workflow-name-input" class="font-weight-bold"> Workflow name </label>
+        <BFormInput
+            id="workflow-name-input"
+            ref="workflowNameInput"
+            v-model="workflowName"
+            class="mb-2"
+            type="text"
+            placeholder="Enter workflow name"
+            description="Workflow name"
+            @keyup.enter="() => onCreate()" />
+
+        <label for="workflow-annotation-input" class="font-weight-bold"> Workflow annotation </label>
+        <BFormInput
+            id="workflow-annotation-input"
+            v-model="workflowAnnotation"
+            class="mb-2"
+            type="text"
+            placeholder="Enter workflow annotation">
+        </BFormInput>
+
+        <div class="float-right">
+            <AsyncButton
+                variant="primary"
+                :icon="faCheck"
+                title="Create workflow"
+                :disabled="workflowName.length === 0"
+                :action="() => onCreate()">
+                Create
+            </AsyncButton>
+        </div>
+    </div>
+</template>

From 51683ae5a740234b2a79ddcc55ec8ba2c678c9f0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Aug 2023 18:33:29 +1000
Subject: [PATCH 009/104] create WorkflowListActions component

---
 .../Workflow/WorkflowListActions.vue          | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowListActions.vue

diff --git a/client/src/components/Workflow/WorkflowListActions.vue b/client/src/components/Workflow/WorkflowListActions.vue
new file mode 100644
index 000000000000..aa6ada4ff5ab
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowListActions.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BModal } from "bootstrap-vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import WorkflowCreate from "@/components/Workflow/WorkflowCreate.vue";
+
+library.add(faPlus, faUpload);
+
+const router = useRouter();
+
+const showCreateModal = ref(false);
+
+function navigateToImport() {
+    router.push("/workflows/import");
+}
+</script>
+
+<template>
+    <div id="workflow-list-actions" class="d-flex justify-content-between">
+        <div>
+            <BButton
+                v-b-tooltip.hover
+                size="sm"
+                title="Create new workflow"
+                variant="secondary"
+                @click="showCreateModal = !showCreateModal">
+                <FontAwesomeIcon :icon="faPlus" />
+                Create
+            </BButton>
+
+            <BButton
+                v-b-tooltip.hover
+                size="sm"
+                title="Import workflow from URL or file"
+                variant="secondary"
+                @click="navigateToImport">
+                <FontAwesomeIcon :icon="faUpload" />
+                Import
+            </BButton>
+        </div>
+
+        <BModal v-model="showCreateModal" hide-footer centered>
+            <template v-slot:modal-title>
+                <h4 class="modal-title">Create new workflow</h4>
+            </template>
+
+            <WorkflowCreate modal-view />
+        </BModal>
+    </div>
+</template>

From 9a5c681847bc5c612885c99896866969592fe328 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 13:44:34 +1000
Subject: [PATCH 010/104] add full view to WorkflowRunButton

---
 client/src/components/Workflow/WorkflowRunButton.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index c5fd72f91e01..795e583bdb95 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -9,6 +9,7 @@ library.add(faPlay);
 
 interface Props {
     id: string;
+    full?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -30,5 +31,6 @@ function ExecuteWorkflow() {
         size="sm"
         @click.stop="ExecuteWorkflow">
         <FontAwesomeIcon :icon="faPlay" />
+        <span v-if="full">Run</span>
     </BButton>
 </template>

From 14473bf0f661ef6a9c19098f2905a55e6c2d6182 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:08:32 +1000
Subject: [PATCH 011/104] create WorkflowQuickView component

---
 .../components/Workflow/WorkflowQuickView.vue | 166 ++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowQuickView.vue

diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
new file mode 100644
index 000000000000..85cf9efee588
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { type AxiosError } from "axios";
+import { BAlert, BCard, BCol, BContainer, BRow } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { getWorkflowFull, getWorkflowInfo } from "@/components/Workflow/workflows.services";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import type { Workflow } from "@/stores/workflowStore";
+import { assertDefined } from "@/utils/assertions";
+
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
+import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
+import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
+import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
+
+const props = defineProps<{
+    id: string;
+}>();
+
+const { datatypesMapper } = useDatatypesMapper();
+
+const { stateStore } = provideScopedWorkflowStores(props.id);
+
+stateStore.setScale(0.75);
+
+const loading = ref(true);
+const errored = ref(false);
+const errorMessage = ref("");
+const workflow = ref<Workflow | null>(null);
+const workflowInfo = ref<
+    | {
+          name: string;
+          [key: string]: unknown;
+          license?: string;
+          tags?: string[];
+          update_time: string;
+      }
+    | undefined
+>();
+
+watch(
+    () => props.id,
+    async (id) => {
+        workflowInfo.value = undefined;
+        loading.value = true;
+        errored.value = false;
+        errorMessage.value = "";
+
+        try {
+            const [workflowInfoData, fullWorkflow] = await Promise.all([getWorkflowInfo(id), getWorkflowFull(id)]);
+
+            assertDefined(workflowInfoData.name);
+
+            workflowInfo.value = workflowInfoData;
+            workflow.value = fullWorkflow;
+
+            fromSimple(props.id, fullWorkflow);
+        } catch (e) {
+            const error = e as AxiosError<{ err_msg?: string }>;
+
+            if (error.response?.data.err_msg) {
+                errorMessage.value = error.response.data.err_msg;
+            }
+
+            errored.value = true;
+        } finally {
+            loading.value = false;
+        }
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <BContainer class="d-flex">
+        <BRow v-if="loading" class="w-100" no-gutters>
+            <BAlert class="w-100" show variant="info">
+                <LoadingSpan message="Loading workflow preview" />
+            </BAlert>
+        </BRow>
+
+        <BRow v-else class="flex-grow-1" no-gutters>
+            <BRow class="w-100" no-gutters>
+                <span class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-center align-items-center mb-2">
+                    <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0"> Workflow Preview </Heading>
+
+                    <WorkflowActions :workflow="workflowInfo" :button-size="'md'" show-controls />
+
+                    <WorkflowRunButton :id="props.id" full />
+                </span>
+            </BRow>
+
+            <BRow class="w-100">
+                <BCol v-if="errored" class="m-3 w-100 overflow-auto d-flex flex-column">
+                    <Heading h2 separator size="xl"> Failed to load workflow </Heading>
+
+                    <BAlert v-if="errorMessage" show variant="danger">
+                        {{ errorMessage }}
+                    </BAlert>
+
+                    <BAlert v-else show variant="danger"> Unknown Error </BAlert>
+                </BCol>
+
+                <BCol v-else-if="!loading && workflowInfo" cols="8" class="published-workflow">
+                    <div class="workflow-preview d-flex flex-column">
+                        <BCard class="workflow-graph">
+                            <WorkflowGraph
+                                v-if="workflow && datatypesMapper"
+                                :steps="workflow.steps"
+                                :datatypes-mapper="datatypesMapper"
+                                readonly />
+                        </BCard>
+                    </div>
+                </BCol>
+
+                <BCol v-if="!loading && workflowInfo" class="pl-2" cols="4">
+                    <WorkflowInformation :workflow-info="workflowInfo" />
+                </BCol>
+            </BRow>
+        </BRow>
+    </BContainer>
+</template>
+
+<style scoped lang="scss">
+.published-workflow {
+    display: flex;
+    flex-grow: 1;
+    gap: 1rem;
+    height: 100%;
+
+    .workflow-preview {
+        flex-grow: 1;
+
+        .workflow-graph {
+            flex-grow: 1;
+            min-width: 500px;
+        }
+    }
+
+    &:deep(.workflow-information) {
+        max-width: 500px;
+        height: 100%;
+    }
+
+    @media only screen and (max-width: 1100px) {
+        flex-direction: column;
+        height: unset;
+
+        .workflow-preview {
+            height: 450px;
+        }
+
+        &:deep(.workflow-information) {
+            max-width: unset;
+            height: unset;
+        }
+    }
+}
+</style>

From 8dc97887f309913d7952f8d4322ab2105b0c8fb5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:09:00 +1000
Subject: [PATCH 012/104] create WorkflowActions component

---
 .../components/Workflow/WorkflowActions.vue   | 190 ++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowActions.vue

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
new file mode 100644
index 000000000000..47ee6f99f4bb
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCopy,
+    faDownload,
+    faEye,
+    faFileExport,
+    faShareAlt,
+    faStar,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { copyWorkflow, deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+
+library.add(faCopy, faDownload, faEye, faFileExport, faShareAlt, farStar, faStar, faTrash);
+
+interface Props {
+    workflow: any;
+    showControls: boolean;
+    buttonSize?: "sm" | "md" | "lg";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    buttonSize: "sm",
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean): void;
+    (e: "toggleShowPreview", a?: boolean): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const { confirm } = useConfirmDialog();
+const { isAnonymous } = storeToRefs(useUserStore());
+
+const isGridView = computed(() => userStore.preferredListViewMode === "grid");
+const downloadUrl = computed(() => {
+    return `/api/workflows/${props.workflow.id}/download?format=json-download`;
+});
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+
+function onExport() {
+    router.push(`/workflows/export?id=${props.workflow.id}`);
+}
+
+function onShare() {
+    router.push(`/workflows/sharing?id=${props.workflow.id}`);
+}
+
+async function onCopy() {
+    const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
+
+    if (confirmed) {
+        await copyWorkflow(props.workflow.id, props.workflow.owner);
+        emit("refreshList", true);
+        Toast.success("Workflow copied");
+    }
+}
+
+async function onToggleBookmark(checked: boolean) {
+    await updateWorkflow(props.workflow.id, {
+        show_in_tool_panel: checked,
+    });
+    emit("refreshList", true);
+    Toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
+}
+
+async function onDelete() {
+    const confirmed = await confirm("Are you sure you want to delete this workflow?", "Delete workflow");
+
+    if (confirmed) {
+        await deleteWorkflow(props.workflow.id);
+        emit("refreshList", true);
+        Toast.info("Workflow deleted");
+    }
+}
+</script>
+
+<template>
+    <div v-if="!isGridView">
+        <AsyncButton
+            v-if="!shared && !workflow.deleted"
+            id="delete-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            :size="buttonSize"
+            title="Delete workflow"
+            :icon="faTrash"
+            :action="() => onDelete()" />
+
+        <AsyncButton
+            v-if="!isAnonymous && !workflow.deleted"
+            id="copy-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            :size="buttonSize"
+            title="Copy workflow"
+            :icon="faCopy"
+            :action="() => onCopy()" />
+
+        <BButton
+            v-if="!shared && !workflow.deleted"
+            id="export-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            variant="link"
+            :size="buttonSize"
+            title="Export workflow"
+            @click="onExport">
+            <FontAwesomeIcon :icon="faFileExport" />
+        </BButton>
+
+        <BButton
+            v-if="!workflow.deleted"
+            id="download-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            variant="link"
+            :size="buttonSize"
+            title="Download workflow"
+            :href="downloadUrl">
+            <FontAwesomeIcon :icon="faDownload" />
+        </BButton>
+
+        <BButton
+            v-if="!shared && !workflow.deleted"
+            id="share-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            variant="link"
+            :size="buttonSize"
+            title="Share workflow"
+            @click="onShare">
+            <FontAwesomeIcon :icon="faShareAlt" />
+        </BButton>
+
+        <BButton
+            id="view-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            variant="link"
+            :size="buttonSize"
+            title="View workflow"
+            @click="emit('toggleShowPreview', true)">
+            <FontAwesomeIcon :icon="faEye" />
+        </BButton>
+
+        <AsyncButton
+            v-if="workflow.show_in_tool_panel"
+            id="remove-bookmark-button"
+            title="Remove bookmark"
+            :class="{ 'mouse-out': !props.showControls }"
+            :icon="faStar"
+            :size="buttonSize"
+            :action="() => onToggleBookmark(false)" />
+
+        <AsyncButton
+            v-else
+            id="add-bookmark-button"
+            :class="{ 'mouse-out': !props.showControls }"
+            title="Add a bookmark. This workflow will appear in the left tool panel."
+            :icon="farStar"
+            :size="buttonSize"
+            :action="() => onToggleBookmark(true)" />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.mouse-out {
+    opacity: 0.5;
+}
+</style>

From 3037d44aaf5c2823937fefa7d542a40d34d25084 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:10:05 +1000
Subject: [PATCH 013/104] create WorkflowInvocationsCount component

---
 .../Workflow/WorkflowInvocationsCount.vue     | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowInvocationsCount.vue

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
new file mode 100644
index 000000000000..76462b922d7d
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge } from "bootstrap-vue";
+import { useRouter } from "vue-router/composables";
+
+import localize from "@/utils/localization";
+
+library.add(faSitemap);
+
+interface Props {
+    workflow: any;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+function onInvocations() {
+    router.push(`/workflows/${props.workflow.id}/invocations`);
+}
+</script>
+
+<template>
+    <div>
+        <span v-if="workflow.last_run_time">
+            <BBadge v-b-tooltip.hover.left pill :title="localize('Last run')" variant="primary">
+                <small>
+                    last run
+                    <UtcDate :date="workflow.last_run_time" mode="elapsed" />
+                </small>
+            </BBadge>
+        </span>
+
+        <BBadge
+            v-b-tooltip.hover.left
+            pill
+            :title="localize('View workflow invocations')"
+            href="#"
+            variant="secondary"
+            @click="onInvocations">
+            <FontAwesomeIcon :icon="faSitemap" />
+            <span v-if="workflow.run_count > 0"> workflow runs: {{ workflow.run_count }} </span>
+            <span v-else> workflow never run </span>
+        </BBadge>
+    </div>
+</template>

From fc022d6d5df6bf46f6e009a14fe291a52dd0db12 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:10:25 +1000
Subject: [PATCH 014/104] create WorkflowIndicators component

---
 .../Workflow/WorkflowIndicators.vue           | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowIndicators.vue

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
new file mode 100644
index 000000000000..86b84faed643
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faGlobe, faLink, faShieldAlt, faUser, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge, BButton } from "bootstrap-vue";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+import { copy } from "@/utils/clipboard";
+
+import UtcDate from "@/components/UtcDate.vue";
+
+library.add(faShieldAlt, faLink, faGlobe, faUsers, faUser);
+
+interface Props {
+    workflow: any;
+    publishedView: boolean;
+}
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const publishedTitle = computed(() => {
+    if (userStore.currentUser?.username === props.workflow.owner) {
+        return "Published by you. Click to view all published workflows by you";
+    } else {
+        return `Published by '${props.workflow.owner}'. Click to view all published workflows by '${props.workflow.owner}'`;
+    }
+});
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+const sourceType = computed(() => {
+    if (props.workflow.source_metadata?.url) {
+        return "url";
+    } else if (props.workflow.source_metadata?.trs_server) {
+        return `trs_${props.workflow.source_metadata?.trs_server}`;
+    } else {
+        return "";
+    }
+});
+const sourceTitle = computed(() => {
+    if (sourceType.value.includes("trs")) {
+        return `Imported from TRS ID (version: ${props.workflow.source_metadata.trs_version_id}). Click to copy ID`;
+    } else if (sourceType.value == "url") {
+        return `Imported from ${props.workflow.source_metadata.url}. Click to copy link`;
+    } else {
+        return `Imported from ${props.workflow.source_type}`;
+    }
+});
+
+function onCopyLink() {
+    if (sourceType.value == "url") {
+        copy(props.workflow.source_metadata.url);
+        Toast.success("URL copied");
+    } else if (sourceType.value.includes("trs")) {
+        copy(props.workflow.source_metadata.trs_tool_id);
+        Toast.success("TRS ID copied");
+    }
+}
+
+function onViewMySharedByUser() {
+    router.push(`/workflows/list_shared_with_me?owner=${props.workflow.owner}`);
+}
+
+function onViewUserPublished() {
+    router.push(`/workflows/list_published?owner=${props.workflow.owner}`);
+}
+</script>
+
+<template>
+    <div>
+        <span class="mr-1">
+            <small>
+                edited
+                <UtcDate :date="workflow.update_time" mode="elapsed" />
+            </small>
+        </span>
+
+        <BBadge
+            v-if="shared && !publishedView"
+            v-b-tooltip
+            class="cursor-pointer mx-1"
+            :title="`'${workflow.owner}' shared this workflow with you. Click to view all workflows shared with you by '${workflow.owner}'`"
+            @click="onViewMySharedByUser">
+            <FontAwesomeIcon :icon="faUsers" size="sm" />
+            <span class="font-weight-bold"> {{ workflow.owner }} </span>
+        </BBadge>
+
+        <BBadge
+            v-if="publishedView"
+            v-b-tooltip
+            class="cursor-pointer mx-1"
+            :title="publishedTitle"
+            @click="onViewUserPublished">
+            <FontAwesomeIcon :icon="faUser" size="sm" />
+            <span class="font-weight-bold"> {{ workflow.owner }} </span>
+        </BBadge>
+
+        <span
+            v-if="sourceType.includes('trs')"
+            id="source-indicator-trs"
+            v-b-tooltip.hover
+            class="info-icon"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faShieldAlt" @click="onCopyLink" />
+        </span>
+
+        <span
+            v-if="sourceType == 'url'"
+            id="source-indicator-url"
+            v-b-tooltip.hover
+            class="info-icon"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faLink" @click="onCopyLink" />
+        </span>
+
+        <BButton
+            v-if="workflow.published && !publishedView"
+            id="sharing-indicator-published"
+            v-b-tooltip
+            size="sm"
+            variant="link"
+            to="/workflows/list_published"
+            title="Published workflow. Click to view all published workflows">
+            <FontAwesomeIcon :icon="faGlobe" />
+        </BButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+.info-icon {
+    color: $brand_primary;
+    font-size: 0.8rem;
+    margin-right: 0.5rem;
+}
+</style>

From 898d7eeb32ec638c35e5711ba4cf84d59ed2cbf1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:11:51 +1000
Subject: [PATCH 015/104] create WorkflowCard component

---
 .../src/components/Workflow/WorkflowCard.vue  | 220 ++++++++++++++++++
 1 file changed, 220 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowCard.vue

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
new file mode 100644
index 000000000000..b68ddcf19980
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faEdit,
+    faEye,
+    faGlobe,
+    faLink,
+    faPen,
+    faShieldAlt,
+    faSitemap,
+    faUser,
+    faUsers,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { useUserStore } from "@/stores/userStore";
+
+import TextSummary from "@/components/Common/TextSummary.vue";
+import StatelessTags from "@/components/Tags/StatelessTags.vue";
+import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
+import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
+import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
+import WorkflowQuickView from "@/components/Workflow/WorkflowQuickView.vue";
+import WorkflowRename from "@/components/Workflow/WorkflowRename.vue";
+import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
+
+library.add(faEdit, faEye, faGlobe, faLink, faPen, faShieldAlt, faSitemap, faUser, faUsers);
+
+interface Props {
+    workflow: any;
+    gridView?: boolean;
+    publishedView?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    gridView: false,
+    publishedView: false,
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean): void;
+    (e: "tagClick", a: { text: string }): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+
+const showRename = ref(false);
+const showPreview = ref(false);
+const showControls = ref(false);
+
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+const description = computed(() => {
+    if (props.workflow.annotations && props.workflow.annotations.length > 0) {
+        return props.workflow.annotations[0].trim();
+    } else {
+        return null;
+    }
+});
+
+function onEdit() {
+    router.push(`/workflows/edit?id=${props.workflow.id}`);
+}
+
+function onRenameClose(newName: string) {
+    showRename.value = false;
+    emit("refreshList", true);
+}
+
+function toggleShowPreview(val: boolean = false) {
+    showPreview.value = val;
+}
+</script>
+
+<template>
+    <div class="workflow-card" @mouseenter="showControls = true" @mouseleave="showControls = false">
+        <BRow class="align-items-center" align-v="baseline" no-gutters>
+            <BCol cols="12" md="9">
+                <BRow align-v="center" no-gutters>
+                    <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
+                </BRow>
+
+                <BRow no-gutters>
+                    <span class="workflow-name font-weight-bold"> {{ workflow.name }} </span>
+
+                    <BButton
+                        v-if="!shared && !workflow.deleted"
+                        id="rename-button"
+                        v-b-tooltip.top
+                        :class="{ 'mouse-out': !showControls }"
+                        variant="link"
+                        size="sm"
+                        title="Rename workflow"
+                        @click="showRename = !showRename">
+                        <FontAwesomeIcon :icon="faPen" />
+                    </BButton>
+                </BRow>
+            </BCol>
+
+            <BCol>
+                <BRow align-h="end" justify="end" no-gutters>
+                    <BCol>
+                        <BRow align-h="end" no-gutters>
+                            <WorkflowActions
+                                :workflow="workflow"
+                                :show-controls="showControls"
+                                @refreshList="emit('refreshList', true)"
+                                @toggleShowPreview="toggleShowPreview" />
+                        </BRow>
+
+                        <BRow v-if="gridView" class="pb-2" align-h="end" no-gutters>
+                            <BButton
+                                id="view-button"
+                                v-b-tooltip.top
+                                :class="{ 'mouse-out': !showControls }"
+                                variant="link"
+                                size="sm"
+                                title="View workflow"
+                                @click="toggleShowPreview(true)">
+                                <FontAwesomeIcon :icon="faEye" />
+                            </BButton>
+                        </BRow>
+
+                        <BRow align-h="end" no-gutters>
+                            <WorkflowInvocationsCount :workflow="workflow" />
+                        </BRow>
+                    </BCol>
+                </BRow>
+            </BCol>
+        </BRow>
+
+        <BRow v-if="description" class="text-summary" no-gutters>
+            <TextSummary :description="description" :max-length="gridView ? 100 : 250" />
+        </BRow>
+
+        <BRow no-gutters>
+            <BCol class="d-flex align-items-center" sm="6" cols="8">
+                <BRow align-h="end" no-gutters>
+                    <StatelessTags
+                        clickable
+                        :value="workflow.tags"
+                        :disabled="workflow.deleted"
+                        :max-visible-tags="gridView ? 2 : 8"
+                        @tag-click="emit('tagClick', $event)" />
+                </BRow>
+            </BCol>
+
+            <BCol align-self="end" class="text-right" sm="6" cols="4">
+                <BButton
+                    v-if="!shared && !workflow.deleted"
+                    v-b-tooltip.hover
+                    size="sm"
+                    class="mx-2"
+                    title="Edit workflow"
+                    variant="outline-primary"
+                    @click="onEdit">
+                    <FontAwesomeIcon :icon="faEdit" />
+                    Edit
+                </BButton>
+
+                <WorkflowRunButton :id="workflow.id" />
+            </BCol>
+        </BRow>
+
+        <WorkflowRename
+            v-if="!shared && !workflow.deleted"
+            :id="workflow.id"
+            :show="showRename"
+            :name="workflow.name"
+            @close="onRenameClose" />
+
+        <BModal
+            v-model="showPreview"
+            ok-only
+            size="xl"
+            hide-header
+            modal-class="workflow-preview-modal"
+            dialog-class="workflow-preview-modal w-auto"
+            centered>
+            <WorkflowQuickView :id="workflow.id" :show="showPreview" @ok="toggleShowPreview(false)" />
+        </BModal>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-card {
+    background-color: white;
+    border: 1px solid #e5e5e5;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    margin: 0rem 0.5rem;
+
+    .text-summary {
+        height: inherit;
+    }
+
+    .workflow-name {
+        font-size: 1rem;
+    }
+
+    .mouse-out {
+        opacity: 0.5;
+    }
+
+    .workflow-preview-modal {
+        min-width: max-content;
+    }
+}
+</style>

From adad5feee52513bde8c65ef5f8a0f5aa776bcb23 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:12:34 +1000
Subject: [PATCH 016/104] create workflows.services

---
 .../components/Workflow/workflows.services.ts | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 client/src/components/Workflow/workflows.services.ts

diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
new file mode 100644
index 000000000000..b70a62646a3e
--- /dev/null
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -0,0 +1,85 @@
+import axios from "axios";
+
+import { fetcher } from "@/schema";
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+
+type SortBy = "create_time" | "update_time" | "name";
+
+type Workflow = Record<string, never>;
+
+interface LoadWorkflowsOptions {
+    sortBy: SortBy;
+    sortDesc: boolean;
+    limit: number;
+    offset: number;
+    filterText: string;
+    showPublished: boolean;
+    skipStepCounts: boolean;
+}
+
+const getWorkflows = fetcher.path("/api/workflows").method("get").create();
+export async function loadWorkflows({
+    sortBy = "update_time",
+    sortDesc = true,
+    limit = 20,
+    offset = 0,
+    filterText = "",
+    showPublished = false,
+    skipStepCounts = true,
+}: LoadWorkflowsOptions): Promise<Workflow[]> {
+    const { data } = await getWorkflows({
+        sort_by: sortBy,
+        sort_desc: sortDesc,
+        limit,
+        offset,
+        search: filterText,
+        show_published: showPublished,
+        skip_step_counts: skipStepCounts,
+    });
+    return data;
+}
+
+export async function updateWorkflow(id: string, changes: object): Promise<Workflow> {
+    const { data } = await axios.put(`/api/workflows/${id}`, changes);
+    return data;
+}
+
+export async function copyWorkflow(id: string, currentOwner: string): Promise<Workflow> {
+    const { data: workflowData } = await axios.get(withPrefix(`/api/workflows/${id}/download`));
+
+    workflowData.name = `Copy of ${workflowData.name}`;
+    const currentUsername = useUserStore().currentUser?.username;
+
+    if (currentUsername !== currentOwner) {
+        workflowData.name += ` shared by user ${currentOwner}`;
+    }
+
+    const { data } = await axios.post(withPrefix("/api/workflows"), { workflow: workflowData });
+    return data;
+}
+
+export async function deleteWorkflow(id: string): Promise<Workflow> {
+    const { data } = await axios.delete(withPrefix(`/api/workflows/${id}`));
+    return data;
+}
+
+export async function createWorkflow(workflowName: string, workflowAnnotation: string) {
+    const { data } = await axios.post(withPrefix("/api/workflows"), {
+        workflow: {
+            name: workflowName,
+            annotation: [workflowAnnotation],
+        },
+    });
+    return data;
+}
+
+export async function getWorkflowFull(workflowId: string) {
+    const { data } = await axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${workflowId}`));
+    return data;
+}
+
+export async function getWorkflowInfo(workflowId: string) {
+    const { data } = await axios.get(withPrefix(`/api/workflows/${workflowId}`));
+    return data;
+}

From 79a93dd5fff5d8835d27cf39f347c32b1a56c6c5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:21:38 +1000
Subject: [PATCH 017/104] temporary use old workflow create component until the
 API is migrated

---
 .../src/components/Workflow/WorkflowListActions.vue   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowListActions.vue b/client/src/components/Workflow/WorkflowListActions.vue
index aa6ada4ff5ab..5e4932d92fff 100644
--- a/client/src/components/Workflow/WorkflowListActions.vue
+++ b/client/src/components/Workflow/WorkflowListActions.vue
@@ -17,6 +17,10 @@ const showCreateModal = ref(false);
 function navigateToImport() {
     router.push("/workflows/import");
 }
+
+function navigateToOldCreate() {
+    router.push("/workflows/create_old");
+}
 </script>
 
 <template>
@@ -26,8 +30,9 @@ function navigateToImport() {
                 v-b-tooltip.hover
                 size="sm"
                 title="Create new workflow"
-                variant="secondary"
-                @click="showCreateModal = !showCreateModal">
+                variant="outline-primary"
+                @click="navigateToOldCreate">
+                <!-- @click="showCreateModal = !showCreateModal"> -->
                 <FontAwesomeIcon :icon="faPlus" />
                 Create
             </BButton>
@@ -36,7 +41,7 @@ function navigateToImport() {
                 v-b-tooltip.hover
                 size="sm"
                 title="Import workflow from URL or file"
-                variant="secondary"
+                variant="outline-primary"
                 @click="navigateToImport">
                 <FontAwesomeIcon :icon="faUpload" />
                 Import

From 4a9e2836c41d003180736891c3e1ff46166a53b0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:23:49 +1000
Subject: [PATCH 018/104] add preferredListViewMode in userStore and add
 missing username filed in user types

---
 client/src/stores/userStore.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 63b9032ba9b9..8aca856ed384 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -19,10 +19,12 @@ export interface User extends QuotaUsageResponse {
     tags_used: string[];
     isAnonymous: false;
     is_admin?: boolean;
+    username: string;
 }
 
 export interface AnonymousUser {
     isAnonymous: true;
+    username: string;
     is_admin?: false;
 }
 
@@ -33,7 +35,11 @@ interface Preferences {
     favorites: { tools: string[] };
 }
 
+type ListViewMode = "grid" | "list";
+
 export const useUserStore = defineStore("userStore", () => {
+    const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid");
+
     const currentUser = ref<User | AnonymousUser | null>(null);
     const currentPreferences = ref<Preferences | null>(null);
 
@@ -126,6 +132,10 @@ export const useUserStore = defineStore("userStore", () => {
         }
     }
 
+    function setPreferredListViewMode(view: ListViewMode) {
+        preferredListViewMode.value = view;
+    }
+
     function toggleActivityBar() {
         showActivityBar.value = !showActivityBar.value;
     }
@@ -146,9 +156,11 @@ export const useUserStore = defineStore("userStore", () => {
         currentFavorites,
         showActivityBar,
         toggledSideBar,
+        preferredListViewMode,
         loadUser,
         setCurrentUser,
         setCurrentTheme,
+        setPreferredListViewMode,
         addFavoriteTool,
         removeFavoriteTool,
         toggleActivityBar,

From 909600ddd0fa693c5ec62d5b56cab75f0b160e7d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:27:18 +1000
Subject: [PATCH 019/104] update WorkflowList with new components and use
 workflow cards

---
 .../src/components/Workflow/WorkflowList.vue  | 516 ++++++++----------
 1 file changed, 234 insertions(+), 282 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 10e1244d5ef0..bcf94b0a71b4 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -1,290 +1,242 @@
-<template>
-    <div class="workflows-list" aria-labelledby="workflows-title">
-        <h1 id="workflows-title" class="mb-3 h-lg">
-            {{ title }}
-        </h1>
-        <b-alert class="index-grid-message" :variant="messageVariant" :show="showMessage">{{ message }}</b-alert>
-        <b-alert class="index-grid-message" dismissible :variant="importStatus" :show="Boolean(importMessage)">
-            {{ importMessage }}
-        </b-alert>
-        <b-row class="mb-3">
-            <b-col cols="6" class="m-1">
-                <FilterMenu
-                    :name="title"
-                    :placeholder="titleSearch"
-                    :filter-class="filterClass"
-                    :filter-text.sync="filterText"
-                    :loading="loading"
-                    :show-advanced.sync="showAdvanced"
-                    has-help
-                    @on-backend-filter="onSearch">
-                    <template v-slot:menu-help-text>
-                        <div v-html="helpHtml"></div>
-                    </template>
-                </FilterMenu>
-            </b-col>
-            <b-col>
-                <WorkflowIndexActions :root="root" class="float-right"></WorkflowIndexActions>
-            </b-col>
-        </b-row>
-        <b-table v-model="workflowItemsModel" v-bind="{ ...defaultTableAttrs, ...indexTableAttrs }">
-            <template v-slot:empty>
-                <loading-span v-if="loading" message="Loading workflows" />
-                <b-alert v-else id="no-workflows" variant="info" show>
-                    <div v-if="filterText !== ''">
-                        No matching entries found for: <span class="font-weight-bold">{{ filterText }}</span
-                        >.
-                    </div>
-                    <div v-else>No workflows found. You may create or import new workflows.</div>
-                </b-alert>
-            </template>
-            <template v-slot:cell(name)="row">
-                <WorkflowDropdown
-                    :workflow="row.item"
-                    :details-showing="row.detailsShowing"
-                    @onAdd="onAdd"
-                    @onRemove="onRemove"
-                    @onUpdate="onUpdate"
-                    @onSuccess="onSuccess"
-                    @onError="onError"
-                    @onRestore="onRestore"
-                    @toggleDetails="row.toggleDetails" />
-            </template>
-            <template v-slot:cell(tags)="row">
-                <StatelessTags
-                    clickable
-                    :value="row.item.tags"
-                    :disabled="row.item.deleted || published"
-                    @input="(tags) => onTags(tags, row.index)"
-                    @tag-click="(tag) => applyFilter('tag', tag, true)" />
-            </template>
-            <template v-slot:cell(published)="row">
-                <SharingIndicators
-                    v-if="!row.item.deleted"
-                    :object="row.item"
-                    @filter="(filter) => applyFilter(filter, true)" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:cell(show_in_tool_panel)="row">
-                <WorkflowBookmark
-                    v-if="!row.item.deleted"
-                    :checked="row.item.show_in_tool_panel"
-                    @bookmark="(checked) => bookmarkWorkflow(row.item.id, checked)" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:cell(update_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-            <template v-slot:cell(owner)="data">
-                <a class="workflow-filter-link-owner" href="#" @click="applyFilter('user', data.value, true)">
-                    {{ data.value }}
-                </a>
-            </template>
-            <template v-slot:cell(execute)="row">
-                <WorkflowRunButton v-if="!row.item.deleted" :id="row.item.id" :root="root" />
-                <div v-else>&#8212;</div>
-            </template>
-            <template v-slot:row-details="data">
-                <b-card>
-                    <p class="workflow-dropdown-description">{{ data.item.description }}</p>
-                </b-card>
-            </template>
-        </b-table>
-        <b-pagination
-            v-show="rows >= perPage"
-            v-model="currentPage"
-            class="gx-workflows-grid-pager"
-            v-bind="paginationAttrs"></b-pagination>
-    </div>
-</template>
-<script>
-import { getGalaxyInstance } from "app";
-import SharingIndicators from "components/Indices/SharingIndicators";
-import { storedWorkflowsProvider } from "components/providers/StoredWorkflowsProvider";
-import UtcDate from "components/UtcDate";
-import { getAppRoot } from "onload/loadConfig";
-import _l from "utils/localization";
-
-import paginationMixin from "./paginationMixin";
-import { Services } from "./services";
-import WorkflowBookmark from "./WorkflowBookmark";
-import WorkflowDropdown from "./WorkflowDropdown";
-import { helpHtml, PublishedWorkflowFilters, WorkflowFilters } from "./WorkflowFilters";
-import WorkflowIndexActions from "./WorkflowIndexActions";
-
-import WorkflowRunButton from "./WorkflowRunButton.vue";
-import FilterMenu from "@/components/Common/FilterMenu.vue";
-import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
-
-const NAME_FIELD = { key: "name", label: _l("Name"), sortable: true };
-const TAGS_FIELD = { key: "tags", label: _l("Tags"), sortable: false, thStyle: { width: "20%" } };
-const UPDATED_FIELD = { label: _l("Updated"), key: "update_time", sortable: true, thStyle: { width: "15%" } };
-const SHARING_FIELD = { label: _l("Sharing"), key: "published", sortable: false, thStyle: { width: "10%" } };
-const BOOKMARKED_FIELD = {
-    label: _l("Bookmarked"),
-    key: "show_in_tool_panel",
-    sortable: false,
-    thStyle: { width: "10%" },
-};
-const EXECUTE_FIELD = { key: "execute", label: "Run", thStyle: { width: "10%" } };
-const OWNER_FIELD = { key: "owner", label: _l("Owner"), sortable: false, thStyle: { width: "15%" } };
-
-const PERSONAL_FIELDS = [NAME_FIELD, TAGS_FIELD, UPDATED_FIELD, SHARING_FIELD, BOOKMARKED_FIELD, EXECUTE_FIELD];
-const PUBLISHED_FIELDS = [NAME_FIELD, TAGS_FIELD, UPDATED_FIELD, OWNER_FIELD, EXECUTE_FIELD];
-
-export default {
-    components: {
-        FilterMenu,
-        UtcDate,
-        StatelessTags,
-        WorkflowDropdown,
-        WorkflowBookmark,
-        WorkflowIndexActions,
-        SharingIndicators,
-        WorkflowRunButton,
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, ref, watch } from "vue";
+
+import { loadWorkflows } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+import { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
+
+import AdvancedFiltering from "@/components/Common/AdvancedFiltering.vue";
+import Heading from "@/components/Common/Heading.vue";
+import ListHeader from "@/components/Common/ListHeader.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
+import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
+
+library.add(faTrash);
+
+const filterOptions = [
+    {
+        filter: "name",
+        description: "Shows workflows with the given sequence of characters in their names.",
     },
-    mixins: [paginationMixin],
-    props: {
-        inputDebounceDelay: {
-            type: Number,
-            default: 500,
-        },
-        importMessage: {
-            type: String,
-            default: null,
-        },
-        importStatus: {
-            type: String,
-            default: "success",
-        },
-        published: {
-            // Render the published workflows version of this grid.
-            type: Boolean,
-            default: false,
-        },
-        query: {
-            type: String,
-            required: false,
-            default: "",
-        },
+    {
+        filter: "tag",
+        description:
+            "Shows workflows with the given workflow tag. You may also click on a tag to filter on that tag directly.",
     },
-    data() {
-        const fields = this.published ? PUBLISHED_FIELDS : PERSONAL_FIELDS;
-        const filterClass = this.published ? PublishedWorkflowFilters : WorkflowFilters;
-        return {
-            tableId: "workflow-table",
-            fields: fields,
-            filterClass: filterClass,
-            filterText: this.query,
-            searchQuery: this.published ? "is:published" : this.query,
-            titleSearch: _l("search workflows"),
-            workflowItemsModel: [],
-            helpHtml: helpHtml,
-            perPage: this.rowsPerPage(this.defaultPerPage || 20),
-            dataProvider: storedWorkflowsProvider,
-            defaultTableAttrs: {
-                "sort-by": "update_time",
-                "sort-desc": true,
-                "no-sort-reset": "",
-                fields: fields,
-            },
-            showAdvanced: false,
-        };
+    {
+        filter: "is:published",
+        description: "Shows published workflows.",
     },
-    computed: {
-        dataProviderParameters() {
-            const extraParams = {
-                search: this.searchQuery,
-                skip_step_counts: true,
-            };
-            if (this.published) {
-                extraParams.show_published = true;
-                extraParams.show_shared = false;
-            }
-            return extraParams;
-        },
-        title() {
-            return this.published ? _l(`Published Workflows`) : _l(`Workflows`);
-        },
+    {
+        filter: "is:importable",
+        description: "Shows importable workflows (this also means they have URL generated).",
     },
-    created() {
-        this.root = getAppRoot();
-        this.services = new Services();
+    {
+        filter: "is:shared_with_me",
+        description: "Shows workflows shared by another user directly with you.",
     },
-    methods: {
-        decorateData(item) {
-            this.services._addAttributes(item);
-        },
-        bookmarkWorkflow: function (id, checked) {
-            const data = {
-                show_in_tool_panel: checked,
-            };
-            this.services
-                .updateWorkflow(id, data)
-                .then(({ id, name }) => {
-                    if (checked) {
-                        getGalaxyInstance().config.stored_workflow_menu_entries.push({ id: id, name: name });
-                    } else {
-                        const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
-                            (workflow) => workflow.id === id
-                        );
-                        getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
-                    }
-
-                    this.items.find((workflow) => {
-                        if (workflow.id === id) {
-                            workflow.show_in_tool_panel = checked;
-                            return true;
-                        }
-                    });
-                })
-                .catch((error) => {
-                    this.onError(error);
-                });
-        },
-        onTags: function (tags, index) {
-            const workflow = this.workflowItemsModel[index];
-            workflow.tags = tags;
-            this.services
-                .updateWorkflow(workflow.id, {
-                    tags: workflow.tags,
-                })
-                .catch((error) => {
-                    this.onError(error);
-                });
-            this.$emit("input", workflow.tags);
-        },
-        onAdd: function (workflow) {
-            if (this.currentPage == 1) {
-                this.refresh();
-            } else {
-                this.currentPage = 1;
-            }
-        },
-        onRemove: function (id) {
-            this.refresh();
-        },
-        onUpdate: function (id, data) {
-            this.refresh();
-        },
-        onRestore: function (id) {
-            this.refresh();
-        },
-        onSearch(searchQuery) {
-            this.searchQuery = searchQuery;
-            // clear out the query param if the filter text is cleared
-            if (searchQuery == "" && searchQuery !== this.query) {
-                this.$router.push("/workflows/list");
-            }
-            this.refresh();
-        },
-        applyFilter(filter, value, quoted = false) {
-            if (quoted) {
-                this.filterText = this.filterClass.setFilterValue(this.filterText, filter, `'${value}'`);
-            } else {
-                this.filterText = this.filterClass.setFilterValue(this.filterText, filter, value);
-            }
-        },
+    {
+        filter: "is:deleted",
+        description: "Shows deleted workflows.",
     },
+];
+
+type ListView = "grid" | "list";
+type WorkflowsList = Record<string, never>[];
+
+interface Props {
+    activeList?: "my" | "shared_with_me" | "published";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    activeList: "my",
+});
+
+const userStore = useUserStore();
+
+const validFilters = {
+    name: contains("name"),
+    tag: contains("tags", "tag", expandNameTag),
+    deleted: contains("deleted", "true", toBool),
+    published: equals("published", "true", toBool),
+    importable: contains("importable", "true", toBool),
+    shared_with_me: contains("shared_with_me", "true", toBool),
 };
+
+const limit = ref(50);
+const offset = ref(0);
+const loading = ref(true);
+const overlay = ref(false);
+const showDeleted = ref(false);
+const listHeader = ref<any>(null);
+const workflows = ref<WorkflowsList>([]);
+const advancedFiltering = ref<any>(null);
+
+const searchPlaceHolder = computed(() => {
+    let placeHolder = "Search my workflows";
+
+    if (published.value) {
+        placeHolder = "Search published workflows";
+    } else if (sharedWithMe.value) {
+        placeHolder = "Search workflows shared with me";
+    }
+
+    placeHolder += " by name or use the advanced filtering options";
+
+    return placeHolder;
+});
+
+const filters = computed(() => advancedFiltering.value.filters);
+const published = computed(() => props.activeList === "published");
+const sharedWithMe = computed(() => props.activeList === "shared_with_me");
+const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
+const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) || true);
+const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
+const filterText = computed(() => advancedFiltering.value && advancedFiltering.value.filterText);
+const noItems = computed(() => !loading.value && workflows.value.length === 0 && !filterText.value);
+const noResults = computed(() => !loading.value && workflows.value.length === 0 && filterText.value);
+
+function updateFilter(newVal: string) {
+    advancedFiltering.value.updateFilter(newVal.trim());
+}
+
+function onTagClick(tag: { text: string }) {
+    updateFilter(filters.value.setFilterValue(filterText.value, "tag", tag.text));
+}
+
+async function load(overlayLoading = false) {
+    if (overlayLoading) {
+        overlay.value = true;
+    } else {
+        loading.value = true;
+    }
+
+    let search = filterText.value;
+
+    if (published.value) {
+        search += " is:published";
+    }
+
+    if (sharedWithMe.value) {
+        search += " is:shared_with_me";
+    }
+
+    if (showDeleted.value) {
+        search += " is:deleted";
+    }
+
+    try {
+        workflows.value = await loadWorkflows({
+            sortBy: sortBy.value,
+            sortDesc: sortDesc.value,
+            limit: limit.value,
+            offset: offset.value,
+            filterText: search?.trim(),
+            showPublished: published.value,
+            skipStepCounts: true,
+        });
+    } catch (e) {
+        Toast.error(`Failed to load workflows: ${e}`);
+    } finally {
+        loading.value = false;
+        overlay.value = false;
+    }
+}
+
+load();
+
+watch([filterText, sortBy, sortDesc, showDeleted], () => {
+    load(true);
+});
 </script>
+
+<template>
+    <div id="workflows-list" class="workflows-list">
+        <div id="workflows-list-header" class="mb-2">
+            <div class="d-flex">
+                <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
+
+                <WorkflowListActions />
+            </div>
+
+            <BNav tabs fill>
+                <BNavItem :active="activeList === 'my'" to="/workflows/list">My workflows</BNavItem>
+                <BNavItem :active="sharedWithMe" to="/workflows/list_shared_with_me">
+                    Workflows shared with me
+                </BNavItem>
+                <BNavItem :active="published" to="/workflows/list_published"> Public workflows </BNavItem>
+            </BNav>
+
+            <AdvancedFiltering
+                ref="advancedFiltering"
+                advanced-mode
+                help-title="Workflows"
+                :filter-options="filterOptions"
+                :valid-filters="validFilters"
+                :search-place-holder="searchPlaceHolder" />
+
+            <ListHeader ref="listHeader" show-view-toggle>
+                <template v-slot:extra-filter>
+                    <BCol v-if="activeList === 'my'">
+                        Filter:
+                        <BButton
+                            id="show-deleted"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="showDeleted ? 'Show deleted workflows' : 'Hide deleted workflows'"
+                            :pressed="showDeleted"
+                            variant="outline-primary"
+                            @click="showDeleted = !showDeleted">
+                            <FontAwesomeIcon :icon="faTrash" />
+                            Show deleted
+                        </BButton>
+                    </BCol>
+                </template>
+            </ListHeader>
+        </div>
+
+        <BAlert v-if="loading" variant="info" show>
+            <LoadingSpan />
+        </BAlert>
+
+        <BAlert v-else-if="!loading && noItems" variant="info" show>
+            No workflows found. You may create or import new workflows using the buttons above.
+        </BAlert>
+
+        <BAlert v-else-if="!loading && noResults" variant="info" show>
+            No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
+        </BAlert>
+
+        <BOverlay v-else :show="overlay" rounded="sm" class="cards-list mt-2">
+            <BCol v-for="workflow in workflows" :key="workflow.id" :cols="view === 'grid' ? 4 : 12" class="mb-2 px-0">
+                <WorkflowCard
+                    :class="view === 'grid' ? 'grid-view h-100 ' : ''"
+                    :workflow="workflow"
+                    :published-view="published"
+                    :grid-view="view === 'grid'"
+                    @refreshList="load"
+                    @tagClick="onTagClick" />
+            </BCol>
+        </BOverlay>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.workflows-list {
+    .cards-list {
+        display: flex;
+        flex-flow: wrap;
+
+        .grid-view {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+    }
+}
+</style>

From d237b3fcea0aca6baa2f5c46a1be5f5b12c49a8c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:32:09 +1000
Subject: [PATCH 020/104] update workflows lists routes

---
 client/src/entry/analysis/router.js   | 24 ++++++++++++++++++------
 lib/galaxy/webapps/galaxy/buildapp.py |  2 ++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index e8312f3814c0..62703a10aa4d 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -46,6 +46,7 @@ import TrsSearch from "components/Workflow/Import/TrsSearch";
 import InvocationReport from "components/Workflow/InvocationReport";
 import StoredWorkflowInvocations from "components/Workflow/StoredWorkflowInvocations";
 import UserInvocations from "components/Workflow/UserInvocations";
+import WorkflowCreate from "components/Workflow/WorkflowCreate";
 import WorkflowExport from "components/Workflow/WorkflowExport";
 import WorkflowImport from "components/Workflow/WorkflowImport";
 import WorkflowList from "components/Workflow/WorkflowList";
@@ -499,7 +500,7 @@ export function getRouter(Galaxy) {
                         component: NewUserWelcome,
                     },
                     {
-                        path: "workflows/create",
+                        path: "workflows/create_old",
                         component: FormGeneric,
                         props: {
                             url: "/workflow/create",
@@ -510,6 +511,11 @@ export function getRouter(Galaxy) {
                             cancelRedirect: "/workflows/list",
                         },
                     },
+                    {
+                        path: "workflows/create",
+                        component: WorkflowCreate,
+                        redirect: redirectAnon(),
+                    },
                     {
                         path: "workflows/export",
                         component: WorkflowExport,
@@ -532,21 +538,27 @@ export function getRouter(Galaxy) {
                             invocationId: route.query.id,
                         }),
                     },
+                    {
+                        path: "workflows/list",
+                        component: WorkflowList,
+                        redirect: redirectAnon(),
+                    },
                     {
                         path: "workflows/list_published",
                         component: WorkflowList,
+                        redirect: redirectAnon(),
                         props: (route) => ({
-                            published: true,
+                            activeList: "published",
+                            query: { ...route.query },
                         }),
                     },
                     {
-                        path: "workflows/list",
+                        path: "workflows/list_shared_with_me",
                         component: WorkflowList,
                         redirect: redirectAnon(),
                         props: (route) => ({
-                            importMessage: route.query["message"],
-                            importStatus: route.query["status"],
-                            query: route.query["query"],
+                            activeList: "shared_with_me",
+                            query: { ...route.query },
                         }),
                     },
                     {
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index 511ae3f6f6c9..02ca983cc752 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -262,7 +262,9 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/jobs/submission/success")
     webapp.add_client_route("/jobs/{job_id}/view")
     webapp.add_client_route("/workflows/list")
+    webapp.add_client_route("/workflows/create_old")
     webapp.add_client_route("/workflows/list_published")
+    webapp.add_client_route("/workflows/list_shared_with_me")
     webapp.add_client_route("/workflows/edit")
     webapp.add_client_route("/workflows/export")
     webapp.add_client_route("/workflows/create")

From 7409ed96c82c24257dff118d367abd4b1e2cc1f9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 14:51:00 +1000
Subject: [PATCH 021/104] add workflow restore button in WorkflowActions

---
 .../components/Workflow/WorkflowActions.vue   | 32 +++++++++++++++++--
 .../components/Workflow/workflows.services.ts |  5 +++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index 47ee6f99f4bb..3981bf5f1acd 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -9,6 +9,7 @@ import {
     faShareAlt,
     faStar,
     faTrash,
+    faTrashRestore,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
@@ -16,14 +17,19 @@ import { storeToRefs } from "pinia";
 import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { copyWorkflow, deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
+import {
+    copyWorkflow,
+    deleteWorkflow,
+    undeleteWorkflow,
+    updateWorkflow,
+} from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 
-library.add(faCopy, faDownload, faEye, faFileExport, faShareAlt, farStar, faStar, faTrash);
+library.add(faCopy, faDownload, faEye, faFileExport, faShareAlt, farStar, faStar, faTrash, faTrashRestore);
 
 interface Props {
     workflow: any;
@@ -92,6 +98,16 @@ async function onDelete() {
         Toast.info("Workflow deleted");
     }
 }
+
+async function onRestore() {
+    const confirmed = await confirm("Are you sure you want to restore this workflow?", "Restore workflow");
+
+    if (confirmed) {
+        await undeleteWorkflow(props.workflow.id);
+        emit("refreshList", true);
+        Toast.info("Workflow restored");
+    }
+}
 </script>
 
 <template>
@@ -152,6 +168,18 @@ async function onDelete() {
             <FontAwesomeIcon :icon="faShareAlt" />
         </BButton>
 
+        <BButton
+            v-if="workflow.deleted"
+            id="restore-button"
+            v-b-tooltip.top
+            :class="{ 'mouse-out': !props.showControls }"
+            variant="link"
+            :size="buttonSize"
+            title="Restore workflow"
+            @click="onRestore">
+            <FontAwesomeIcon :icon="faTrashRestore" />
+        </BButton>
+
         <BButton
             id="view-button"
             v-b-tooltip.top
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index b70a62646a3e..f47f872bcfd9 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -64,6 +64,11 @@ export async function deleteWorkflow(id: string): Promise<Workflow> {
     return data;
 }
 
+export async function undeleteWorkflow(id: string): Promise<Workflow> {
+    const { data } = await axios.post(withPrefix(`/api/workflows/${id}/undelete`));
+    return data;
+}
+
 export async function createWorkflow(workflowName: string, workflowAnnotation: string) {
     const { data } = await axios.post(withPrefix("/api/workflows"), {
         workflow: {

From 7ef450b75bb65001648c02d395b5cb6d6bf12d1a Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 31 Aug 2023 09:33:47 +0000
Subject: [PATCH 022/104] update `TextSummary` to match with workflow card

---
 client/src/components/Common/TextSummary.vue | 59 ++++++--------------
 1 file changed, 18 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
index 277a46e07007..cd5cfc9bcc8b 100644
--- a/client/src/components/Common/TextSummary.vue
+++ b/client/src/components/Common/TextSummary.vue
@@ -2,63 +2,40 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-const props = defineProps({
-    description: {
-        type: String,
-        required: true,
-    },
-    showDetails: {
-        type: Boolean,
-        default: false,
-    },
-    maxLength: {
-        type: Number,
-        default: 150,
-    },
-});
+library.add(faChevronUp, faChevronDown);
 
-const emit = defineEmits<{
-    (e: "update:show-details", showDetails: boolean): void;
-}>();
+interface Props {
+    maxLength?: number;
+    description: string;
+}
 
-const propShowDetails = computed({
-    get: () => {
-        return props.showDetails;
-    },
-    set: (val) => {
-        emit("update:show-details", val);
-    },
+const props = withDefaults(defineProps<Props>(), {
+    maxLength: 150,
 });
 
-library.add(faChevronUp, faChevronDown);
-const collapsedEnableIcon = "fas fa-chevron-down";
-const collapsedDisableIcon = "fas fa-chevron-up";
+const showDetails = ref(false);
 
 // summarized length
 const x = Math.round(props.maxLength - props.maxLength / 2);
 
-const summary = computed(() => props.description.length > props.maxLength);
+const textTooLong = computed(() => props.description.length > props.maxLength);
 const text = computed(() =>
-    props.description.length > props.maxLength ? props.description.slice(0, x) : props.description
+    textTooLong.value && !showDetails.value ? props.description.slice(0, x) + "..." : props.description
 );
 </script>
 
 <template>
     <div>
         {{ text }}
-        <span v-if="summary">
-            <a
-                v-if="!propShowDetails"
-                class="text-summary-expand"
-                href="javascript:void(0)"
-                @click.stop="propShowDetails = true">
-                ... <FontAwesomeIcon :icon="collapsedEnableIcon" />
-            </a>
-            <a v-else href="javascript:void(0)" @click.stop="propShowDetails = false">
-                ... <FontAwesomeIcon :icon="collapsedDisableIcon" />
-            </a>
+        <span
+            v-if="textTooLong"
+            v-b-tooltip.hover
+            class="info-icon cursor-pointer"
+            :title="textTooLong ? 'Show more' : 'Show less'"
+            @click="showDetails = !showDetails">
+            <FontAwesomeIcon :icon="showDetails ? 'chevron-up' : 'chevron-down'" />
         </span>
     </div>
 </template>

From d0867bc24f105126a57a1cf8ba7bfe180bb792de Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 31 Aug 2023 09:54:26 +0000
Subject: [PATCH 023/104] touch up workflows list and card UI with @container

---
 .../components/Workflow/WorkflowActions.vue   |   9 +-
 .../src/components/Workflow/WorkflowCard.vue  | 239 ++++++++++--------
 .../Workflow/WorkflowInvocationsCount.vue     |  26 +-
 .../src/components/Workflow/WorkflowList.vue  |  49 ++--
 4 files changed, 185 insertions(+), 138 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index 3981bf5f1acd..197b3869dbcf 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -51,7 +51,6 @@ const userStore = useUserStore();
 const { confirm } = useConfirmDialog();
 const { isAnonymous } = storeToRefs(useUserStore());
 
-const isGridView = computed(() => userStore.preferredListViewMode === "grid");
 const downloadUrl = computed(() => {
     return `/api/workflows/${props.workflow.id}/download?format=json-download`;
 });
@@ -111,7 +110,7 @@ async function onRestore() {
 </script>
 
 <template>
-    <div v-if="!isGridView">
+    <div class="workflow-actions d-flex align-items-baseline flex-wrap justify-content-end">
         <AsyncButton
             v-if="!shared && !workflow.deleted"
             id="delete-button"
@@ -212,7 +211,9 @@ async function onRestore() {
 </template>
 
 <style scoped lang="scss">
-.mouse-out {
-    opacity: 0.5;
+.workflow-actions {
+    .mouse-out {
+        opacity: 0.5;
+    }
 }
 </style>
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index b68ddcf19980..5cf031ac3f1e 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -16,6 +16,7 @@ import { BButton } from "bootstrap-vue";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useUserStore } from "@/stores/userStore";
 
 import TextSummary from "@/components/Common/TextSummary.vue";
@@ -52,23 +53,24 @@ const showRename = ref(false);
 const showPreview = ref(false);
 const showControls = ref(false);
 
+const workflow = computed(() => props.workflow);
 const shared = computed(() => {
     if (userStore.currentUser) {
-        return userStore.currentUser.username !== props.workflow.owner;
+        return userStore.currentUser.username !== workflow.value.owner;
     } else {
         return false;
     }
 });
 const description = computed(() => {
-    if (props.workflow.annotations && props.workflow.annotations.length > 0) {
-        return props.workflow.annotations[0].trim();
+    if (workflow.value.annotations && workflow.value.annotations.length > 0) {
+        return workflow.value.annotations[0].trim();
     } else {
         return null;
     }
 });
 
 function onEdit() {
-    router.push(`/workflows/edit?id=${props.workflow.id}`);
+    router.push(`/workflows/edit?id=${workflow.value.id}`);
 }
 
 function onRenameClose(newName: string) {
@@ -79,17 +81,20 @@ function onRenameClose(newName: string) {
 function toggleShowPreview(val: boolean = false) {
     showPreview.value = val;
 }
+
+function onTagsUpdate(tags: string[]) {
+    workflow.value.tags = tags;
+    updateWorkflow(workflow.value.id, { tags });
+}
 </script>
 
 <template>
     <div class="workflow-card" @mouseenter="showControls = true" @mouseleave="showControls = false">
-        <BRow class="align-items-center" align-v="baseline" no-gutters>
-            <BCol cols="12" md="9">
-                <BRow align-v="center" no-gutters>
+        <div class="workflow-card-container d-flex flex-column justify-content-between">
+            <div class="d-flex justify-content-between">
+                <div>
                     <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
-                </BRow>
 
-                <BRow no-gutters>
                     <span class="workflow-name font-weight-bold"> {{ workflow.name }} </span>
 
                     <BButton
@@ -103,91 +108,86 @@ function toggleShowPreview(val: boolean = false) {
                         @click="showRename = !showRename">
                         <FontAwesomeIcon :icon="faPen" />
                     </BButton>
-                </BRow>
-            </BCol>
-
-            <BCol>
-                <BRow align-h="end" justify="end" no-gutters>
-                    <BCol>
-                        <BRow align-h="end" no-gutters>
-                            <WorkflowActions
-                                :workflow="workflow"
-                                :show-controls="showControls"
-                                @refreshList="emit('refreshList', true)"
-                                @toggleShowPreview="toggleShowPreview" />
-                        </BRow>
-
-                        <BRow v-if="gridView" class="pb-2" align-h="end" no-gutters>
-                            <BButton
-                                id="view-button"
-                                v-b-tooltip.top
-                                :class="{ 'mouse-out': !showControls }"
-                                variant="link"
-                                size="sm"
-                                title="View workflow"
-                                @click="toggleShowPreview(true)">
-                                <FontAwesomeIcon :icon="faEye" />
-                            </BButton>
-                        </BRow>
-
-                        <BRow align-h="end" no-gutters>
-                            <WorkflowInvocationsCount :workflow="workflow" />
-                        </BRow>
-                    </BCol>
-                </BRow>
-            </BCol>
-        </BRow>
-
-        <BRow v-if="description" class="text-summary" no-gutters>
-            <TextSummary :description="description" :max-length="gridView ? 100 : 250" />
-        </BRow>
-
-        <BRow no-gutters>
-            <BCol class="d-flex align-items-center" sm="6" cols="8">
-                <BRow align-h="end" no-gutters>
-                    <StatelessTags
-                        clickable
-                        :value="workflow.tags"
-                        :disabled="workflow.deleted"
-                        :max-visible-tags="gridView ? 2 : 8"
-                        @tag-click="emit('tagClick', $event)" />
-                </BRow>
-            </BCol>
-
-            <BCol align-self="end" class="text-right" sm="6" cols="4">
+                </div>
+
+                <div>
+                    <WorkflowActions
+                        class="workflow-actions"
+                        :workflow="workflow"
+                        :show-controls="showControls"
+                        @refreshList="emit('refreshList', true)"
+                        @toggleShowPreview="toggleShowPreview" />
+                </div>
+            </div>
+
+            <div class="workflow-count-view d-flex">
+                <WorkflowInvocationsCount :workflow="workflow" />
+
                 <BButton
-                    v-if="!shared && !workflow.deleted"
-                    v-b-tooltip.hover
+                    v-show="gridView"
+                    id="view-button"
+                    v-b-tooltip.top
+                    class="workflow-preview-button"
                     size="sm"
-                    class="mx-2"
-                    title="Edit workflow"
-                    variant="outline-primary"
-                    @click="onEdit">
-                    <FontAwesomeIcon :icon="faEdit" />
-                    Edit
+                    title="View workflow"
+                    variant="link"
+                    @click="toggleShowPreview(true)">
+                    <FontAwesomeIcon :icon="faEye" />
                 </BButton>
+            </div>
+
+            <BRow v-if="description" class="text-summary" no-gutters>
+                <TextSummary :description="description" :max-length="gridView ? 100 : 250" />
+            </BRow>
+
+            <BRow no-gutters>
+                <BCol class="d-flex align-items-center" sm="6" cols="8">
+                    <BRow align-h="end" no-gutters>
+                        <StatelessTags
+                            clickable
+                            :value="workflow.tags"
+                            :disabled="workflow.deleted"
+                            :max-visible-tags="gridView ? 2 : 8"
+                            @input="(tags) => onTagsUpdate(tags)"
+                            @tag-click="emit('tagClick', $event)" />
+                    </BRow>
+                </BCol>
+
+                <BCol align-self="end" class="text-right" sm="6" cols="4">
+                    <BButton
+                        v-if="!shared && !workflow.deleted"
+                        v-b-tooltip.hover
+                        size="sm"
+                        class="mx-2"
+                        title="Edit workflow"
+                        variant="outline-primary"
+                        @click="onEdit">
+                        <FontAwesomeIcon :icon="faEdit" />
+                        Edit
+                    </BButton>
 
-                <WorkflowRunButton :id="workflow.id" />
-            </BCol>
-        </BRow>
-
-        <WorkflowRename
-            v-if="!shared && !workflow.deleted"
-            :id="workflow.id"
-            :show="showRename"
-            :name="workflow.name"
-            @close="onRenameClose" />
-
-        <BModal
-            v-model="showPreview"
-            ok-only
-            size="xl"
-            hide-header
-            modal-class="workflow-preview-modal"
-            dialog-class="workflow-preview-modal w-auto"
-            centered>
-            <WorkflowQuickView :id="workflow.id" :show="showPreview" @ok="toggleShowPreview(false)" />
-        </BModal>
+                    <WorkflowRunButton :id="workflow.id" />
+                </BCol>
+            </BRow>
+
+            <WorkflowRename
+                v-if="!shared && !workflow.deleted"
+                :id="workflow.id"
+                :show="showRename"
+                :name="workflow.name"
+                @close="onRenameClose" />
+
+            <BModal
+                v-model="showPreview"
+                ok-only
+                size="xl"
+                hide-header
+                modal-class="workflow-preview-modal"
+                dialog-class="workflow-preview-modal w-auto"
+                centered>
+                <WorkflowQuickView :id="workflow.id" :show="showPreview" @ok="toggleShowPreview(false)" />
+            </BModal>
+        </div>
     </div>
 </template>
 
@@ -195,26 +195,55 @@ function toggleShowPreview(val: boolean = false) {
 @import "theme/blue.scss";
 
 .workflow-card {
-    background-color: white;
-    border: 1px solid #e5e5e5;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    margin: 0rem 0.5rem;
-
-    .text-summary {
-        height: inherit;
+    container-type: inline-size;
+
+    .workflow-card-container {
+        background-color: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+
+        .workflow-count-view {
+            margin-left: auto;
+        }
+
+        .text-summary {
+            height: inherit;
+        }
+
+        .workflow-name {
+            font-size: 1rem;
+        }
+
+        .mouse-out {
+            opacity: 0.5;
+        }
+
+        .workflow-preview-modal {
+            min-width: max-content;
+        }
     }
 
-    .workflow-name {
-        font-size: 1rem;
-    }
+    @container (max-width: 768px) {
+        .workflow-card-container {
+            margin: 0 0.5rem 0.5rem 0.5rem;
+        }
+
+        .workflow-actions {
+            display: none !important;
+        }
 
-    .mouse-out {
-        opacity: 0.5;
+        .workflow-count-view {
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+        }
     }
 
-    .workflow-preview-modal {
-        min-width: max-content;
+    @container (min-width: 768px) {
+        .workflow-preview-button {
+            display: none;
+        }
     }
 }
 </style>
diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 76462b922d7d..6b7572250895 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faEye, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
 import localize from "@/utils/localization";
 
-library.add(faSitemap);
+import UtcDate from "@/components/UtcDate.vue";
+
+library.add(faEye, faSitemap);
 
 interface Props {
     workflow: any;
@@ -23,18 +25,9 @@ function onInvocations() {
 </script>
 
 <template>
-    <div>
-        <span v-if="workflow.last_run_time">
-            <BBadge v-b-tooltip.hover.left pill :title="localize('Last run')" variant="primary">
-                <small>
-                    last run
-                    <UtcDate :date="workflow.last_run_time" mode="elapsed" />
-                </small>
-            </BBadge>
-        </span>
-
+    <div class="d-flex align-items-center flex-gapx-1">
         <BBadge
-            v-b-tooltip.hover.left
+            v-b-tooltip.hover
             pill
             :title="localize('View workflow invocations')"
             href="#"
@@ -44,5 +37,12 @@ function onInvocations() {
             <span v-if="workflow.run_count > 0"> workflow runs: {{ workflow.run_count }} </span>
             <span v-else> workflow never run </span>
         </BBadge>
+
+        <BBadge v-if="workflow.last_run_time" v-b-tooltip.hover pill :title="localize('Last run')" variant="primary">
+            <small>
+                last run
+                <UtcDate :date="workflow.last_run_time" mode="elapsed" />
+            </small>
+        </BBadge>
     </div>
 </template>
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index bcf94b0a71b4..e0dddfab1d8b 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BCol, BNav, BNavItem, BOverlay } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
@@ -212,30 +213,46 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
             No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
         </BAlert>
 
-        <BOverlay v-else :show="overlay" rounded="sm" class="cards-list mt-2">
-            <BCol v-for="workflow in workflows" :key="workflow.id" :cols="view === 'grid' ? 4 : 12" class="mb-2 px-0">
-                <WorkflowCard
-                    :class="view === 'grid' ? 'grid-view h-100 ' : ''"
-                    :workflow="workflow"
-                    :published-view="published"
-                    :grid-view="view === 'grid'"
-                    @refreshList="load"
-                    @tagClick="onTagClick" />
-            </BCol>
+        <BOverlay
+            v-else
+            :show="overlay"
+            rounded="sm"
+            class="cards-list mt-2"
+            :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
+            <WorkflowCard
+                v-for="workflow in workflows"
+                :key="workflow.id"
+                :class="view === 'grid' ? 'grid-view ' : ''"
+                :workflow="workflow"
+                :published-view="published"
+                :grid-view="view === 'grid'"
+                @refreshList="load"
+                @tagClick="onTagClick" />
         </BOverlay>
     </div>
 </template>
 
 <style scoped lang="scss">
 .workflows-list {
-    .cards-list {
-        display: flex;
-        flex-flow: wrap;
+    container-type: inline-size;
+    overflow: auto;
 
+    .grid-view {
+        width: calc(100% / 3);
+        display: inline-grid;
+    }
+
+    @container (max-width: 1200px) {
+        .grid-view {
+            width: calc(100% / 2);
+            display: inline-grid;
+        }
+    }
+
+    @container (max-width: 576px) {
         .grid-view {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
+            width: 100%;
+            display: inline-grid;
         }
     }
 }

From 5f9e79426efa3fe65dfea95614d4892d2cd6120a Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 1 Sep 2023 04:17:06 +0000
Subject: [PATCH 024/104] add WorkflowList header bottom highlight on scroll

---
 .../src/components/Workflow/WorkflowList.vue  | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index e0dddfab1d8b..e58a020e27eb 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -3,9 +3,11 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BCol, BNav, BNavItem, BOverlay } from "bootstrap-vue";
-import { computed, ref, watch } from "vue";
+import { computed, type Ref, ref, watch } from "vue";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
+import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 import { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
@@ -74,9 +76,16 @@ const offset = ref(0);
 const loading = ref(true);
 const overlay = ref(false);
 const showDeleted = ref(false);
+const isScrollable = ref(false);
 const listHeader = ref<any>(null);
 const workflows = ref<WorkflowsList>([]);
 const advancedFiltering = ref<any>(null);
+const scrollContainer: Ref<HTMLElement | null> = ref(null);
+
+const { arrived } = useAnimationFrameScroll(scrollContainer);
+useAnimationFrameResizeObserver(scrollContainer, ({ clientSize, scrollSize }) => {
+    isScrollable.value = scrollSize.height >= clientSize.height + 1;
+});
 
 const searchPlaceHolder = computed(() => {
     let placeHolder = "Search my workflows";
@@ -94,6 +103,7 @@ const searchPlaceHolder = computed(() => {
 
 const filters = computed(() => advancedFiltering.value.filters);
 const published = computed(() => props.activeList === "published");
+const scrolledTop = computed(() => !isScrollable.value || arrived.top);
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
 const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) || true);
@@ -157,8 +167,8 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
 </script>
 
 <template>
-    <div id="workflows-list" class="workflows-list">
-        <div id="workflows-list-header" class="mb-2">
+    <div id="workflows-list" ref="scrollContainer" class="workflows-list">
+        <div id="workflows-list-header" class="workflows-list-header mb-2" :class="{ 'scrolled-top': scrolledTop }">
             <div class="d-flex">
                 <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
 
@@ -237,6 +247,38 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
     container-type: inline-size;
     overflow: auto;
 
+    .workflows-list-header {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: white;
+
+        &:after {
+            position: absolute;
+            content: "";
+            opacity: 0;
+            z-index: 10;
+            width: 100%;
+            height: 20px;
+            bottom: -25px;
+            pointer-events: none;
+            border-radius: 0.5rem;
+            transition: opacity 0.4s;
+            background-repeat: no-repeat;
+        }
+
+        &:after {
+            right: 0;
+            background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+        }
+
+        &:not(.scrolled-top) {
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
+
     .grid-view {
         width: calc(100% / 3);
         display: inline-grid;

From d2107bc488506f84ecaab3449fd76c2b82d72b7f Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:44:52 +0000
Subject: [PATCH 025/104] fx ListHeader typo and CSS

---
 client/src/components/Common/ListHeader.vue | 90 +++++++++++----------
 1 file changed, 49 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index e534a7e3f2d2..4440aa3a8e21 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -46,45 +46,39 @@ defineExpose({
 </script>
 
 <template>
-    <BRow align-content="center" no-gutters>
-        <BCol class="align-items-center" no-gutters>
-            <BRow align-content="center" no-gutters>
-                <BCol>
-                    Sortby:
-                    <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>
-                </BCol>
-
-                <slot name="extra-filter" />
-            </BRow>
-        </BCol>
-
-        <BCol v-if="showViewToggle" class="text-right">
+    <div class="list-header">
+        <div class="list-header-sort">
+            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>
+
+            <slot name="extra-filter" />
+        </div>
+
+        <div v-if="showViewToggle">
             Display:
             <BButtonGroup>
                 <BButton
@@ -109,6 +103,20 @@ defineExpose({
                     <FontAwesomeIcon :icon="faBars" />
                 </BButton>
             </BButtonGroup>
-        </BCol>
-    </BRow>
+        </div>
+    </div>
 </template>
+
+<style scoped lang="scss">
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .list-header-sort {
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+    }
+}
+</style>

From a324e68afa249855c5a3762f218f783912d3ea23 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:47:04 +0000
Subject: [PATCH 026/104] WorkflowActions: add menu mode and add dynamics
 actions

---
 .../components/Workflow/WorkflowActions.vue   | 277 ++++++++++++------
 1 file changed, 181 insertions(+), 96 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index 197b3869dbcf..fc20642aebb3 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -33,10 +33,36 @@ library.add(faCopy, faDownload, faEye, faFileExport, faShareAlt, farStar, faStar
 
 interface Props {
     workflow: any;
+    menu?: boolean;
+    published?: boolean;
     showControls: boolean;
     buttonSize?: "sm" | "md" | "lg";
 }
 
+type BaseAction = {
+    if?: boolean;
+    id: string;
+    title: string;
+    tooltip: string;
+    icon: any;
+    href?: string;
+    size: "sm" | "md" | "lg";
+    component: "async" | "button";
+    variant: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+    onClick?: () => Promise<void> | void;
+};
+
+interface AAction extends BaseAction {
+    component: "async";
+    action: () => Promise<void>;
+}
+
+interface BAction extends BaseAction {
+    component: "button";
+    href?: string;
+    onClick?: () => Promise<void> | void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
     buttonSize: "sm",
 });
@@ -107,111 +133,170 @@ async function onRestore() {
         Toast.info("Workflow restored");
     }
 }
+
+const actions: (AAction | BAction)[] = [
+    {
+        if: !shared.value && !props.workflow.deleted,
+        id: "delete-button",
+        component: "button",
+        title: "Delete workflow",
+        tooltip: "Delete workflow",
+        icon: faTrash,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => onDelete(),
+    },
+    {
+        if: !isAnonymous.value && !props.workflow.deleted,
+        id: "copy-button",
+        component: "button",
+        title: "Copy workflow",
+        tooltip: "Copy workflow",
+        icon: faCopy,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => onCopy(),
+    },
+    {
+        if: !props.workflow.deleted,
+        id: "export-button",
+        component: "button",
+        title: "Export workflow",
+        tooltip: "Export workflow",
+        icon: faFileExport,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => onExport(),
+    },
+    {
+        if: !props.workflow.deleted,
+        id: "download-button",
+        component: "button",
+        title: "Download workflow",
+        tooltip: "Download workflow",
+        href: downloadUrl.value,
+        icon: faDownload,
+        size: props.buttonSize,
+        variant: "link",
+    },
+    {
+        if: !shared.value && !props.workflow.deleted,
+        id: "share-button",
+        component: "button",
+        title: "Share workflow",
+        tooltip: "Share workflow",
+        icon: faShareAlt,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => onShare(),
+    },
+    {
+        if: props.workflow.deleted,
+        id: "restore-button",
+        component: "button",
+        title: "Restore workflow",
+        tooltip: "Restore workflow",
+        icon: faTrashRestore,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => onRestore(),
+    },
+    {
+        if: !props.published && props.workflow.show_in_tool_panel,
+        id: "remove-bookmark-button",
+        component: "async",
+        title: "Remove bookmark",
+        tooltip: "Remove bookmark",
+        icon: faStar,
+        size: props.buttonSize,
+        variant: "link",
+        action: () => onToggleBookmark(false),
+    },
+    {
+        if: !props.published && !props.workflow.show_in_tool_panel,
+        id: "add-bookmark-button",
+        component: "async",
+        title: "Add bookmark",
+        tooltip: "Add a bookmark. This workflow will appear in the left tool panel.",
+        icon: farStar,
+        size: props.buttonSize,
+        variant: "link",
+        action: () => onToggleBookmark(true),
+    },
+    {
+        if: true,
+        id: "view-button",
+        component: "button",
+        title: "View workflow",
+        tooltip: "View workflow",
+        icon: faEye,
+        size: props.buttonSize,
+        variant: "link",
+        onClick: () => emit("toggleShowPreview", true),
+    },
+];
 </script>
 
 <template>
-    <div class="workflow-actions d-flex align-items-baseline flex-wrap justify-content-end">
-        <AsyncButton
-            v-if="!shared && !workflow.deleted"
-            id="delete-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            :size="buttonSize"
-            title="Delete workflow"
-            :icon="faTrash"
-            :action="() => onDelete()" />
-
-        <AsyncButton
-            v-if="!isAnonymous && !workflow.deleted"
-            id="copy-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            :size="buttonSize"
-            title="Copy workflow"
-            :icon="faCopy"
-            :action="() => onCopy()" />
-
-        <BButton
-            v-if="!shared && !workflow.deleted"
-            id="export-button"
+    <div class="workflow-actions">
+        <BDropdown
+            v-if="menu"
+            id="workflow-actions-dropdown"
             v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            variant="link"
-            :size="buttonSize"
-            title="Export workflow"
-            @click="onExport">
-            <FontAwesomeIcon :icon="faFileExport" />
-        </BButton>
-
-        <BButton
-            v-if="!workflow.deleted"
-            id="download-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            variant="link"
-            :size="buttonSize"
-            title="Download workflow"
-            :href="downloadUrl">
-            <FontAwesomeIcon :icon="faDownload" />
-        </BButton>
-
-        <BButton
-            v-if="!shared && !workflow.deleted"
-            id="share-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            variant="link"
-            :size="buttonSize"
-            title="Share workflow"
-            @click="onShare">
-            <FontAwesomeIcon :icon="faShareAlt" />
-        </BButton>
-
-        <BButton
-            v-if="workflow.deleted"
-            id="restore-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            variant="link"
-            :size="buttonSize"
-            title="Restore workflow"
-            @click="onRestore">
-            <FontAwesomeIcon :icon="faTrashRestore" />
-        </BButton>
-
-        <BButton
-            id="view-button"
-            v-b-tooltip.top
-            :class="{ 'mouse-out': !props.showControls }"
-            variant="link"
-            :size="buttonSize"
-            title="View workflow"
-            @click="emit('toggleShowPreview', true)">
-            <FontAwesomeIcon :icon="faEye" />
-        </BButton>
-
-        <AsyncButton
-            v-if="workflow.show_in_tool_panel"
-            id="remove-bookmark-button"
-            title="Remove bookmark"
-            :class="{ 'mouse-out': !props.showControls }"
-            :icon="faStar"
-            :size="buttonSize"
-            :action="() => onToggleBookmark(false)" />
-
-        <AsyncButton
-            v-else
-            id="add-bookmark-button"
-            :class="{ 'mouse-out': !props.showControls }"
-            title="Add a bookmark. This workflow will appear in the left tool panel."
-            :icon="farStar"
-            :size="buttonSize"
-            :action="() => onToggleBookmark(true)" />
+            right
+            class="show-in-card"
+            title="Workflow actions"
+            variant="link">
+            <BDropdownItem
+                v-for="action in actions.filter((a) => a.if)"
+                :id="action.id"
+                :key="action.id"
+                :href="action.href ?? undefined"
+                :title="action.tooltip"
+                @click="action.component === 'button' ? action.onClick?.() : action.action()">
+                <FontAwesomeIcon :icon="action.icon" />
+                <span class="ml-1">{{ action.title }}</span>
+            </BDropdownItem>
+        </BDropdown>
+
+        <div v-else class="d-flex">
+            <div v-for="action in actions" :key="action.id">
+                <AsyncButton
+                    v-if="action.if && action.component === 'async'"
+                    :id="action.id"
+                    v-b-tooltip.hover
+                    :class="{ 'mouse-out': !showControls }"
+                    :variant="action.variant"
+                    :size="action.size"
+                    :title="action.tooltip"
+                    :icon="action.icon"
+                    :action="action.action" />
+
+                <BButton
+                    v-if="action.if && action.component === 'button'"
+                    :id="action.id"
+                    v-b-tooltip.hover
+                    :class="{ 'mouse-out': !showControls }"
+                    :variant="action.variant"
+                    :size="action.size"
+                    :title="action.tooltip"
+                    :icon="action.icon"
+                    :href="action.href"
+                    @click="action.onClick">
+                    <FontAwesomeIcon :icon="action.icon" />
+                </BButton>
+            </div>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
 .workflow-actions {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+
     .mouse-out {
         opacity: 0.5;
     }

From a5f40fffdd9e3fb7b4665bc26b2e0c5c89133f32 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:48:21 +0000
Subject: [PATCH 027/104] WorkflowCard: update CSS and breakpoints

---
 .../src/components/Workflow/WorkflowCard.vue  | 190 +++++++++++-------
 1 file changed, 119 insertions(+), 71 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 5cf031ac3f1e..732653d49b1f 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -90,70 +90,97 @@ function onTagsUpdate(tags: string[]) {
 
 <template>
     <div class="workflow-card" @mouseenter="showControls = true" @mouseleave="showControls = false">
-        <div class="workflow-card-container d-flex flex-column justify-content-between">
-            <div class="d-flex justify-content-between">
-                <div>
-                    <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
-
-                    <span class="workflow-name font-weight-bold"> {{ workflow.name }} </span>
-
-                    <BButton
-                        v-if="!shared && !workflow.deleted"
-                        id="rename-button"
-                        v-b-tooltip.top
-                        :class="{ 'mouse-out': !showControls }"
-                        variant="link"
-                        size="sm"
-                        title="Rename workflow"
-                        @click="showRename = !showRename">
-                        <FontAwesomeIcon :icon="faPen" />
-                    </BButton>
+        <div class="workflow-card-container">
+            <div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
+
+                        <span class="workflow-name hide-in-card font-weight-bold">
+                            {{ workflow.name }}
+                            <BButton
+                                v-if="!shared && !workflow.deleted"
+                                id="rename-button"
+                                v-b-tooltip.top
+                                :class="{ 'mouse-out': !showControls }"
+                                variant="link"
+                                size="sm"
+                                title="Rename workflow"
+                                @click="showRename = !showRename">
+                                <FontAwesomeIcon :icon="faPen" />
+                            </BButton>
+                        </span>
+                    </div>
+
+                    <div class="workflow-count-actions">
+                        <WorkflowActions
+                            class="hide-in-card"
+                            :workflow="workflow"
+                            :published="publishedView"
+                            :show-controls="showControls"
+                            @refreshList="emit('refreshList', true)"
+                            @toggleShowPreview="toggleShowPreview" />
+
+                        <WorkflowInvocationsCount :workflow="workflow" />
+
+                        <BButton
+                            id="view-button"
+                            v-b-tooltip.top
+                            class="show-in-card"
+                            size="sm"
+                            title="View workflow"
+                            variant="link"
+                            @click="toggleShowPreview(true)">
+                            <FontAwesomeIcon :icon="faEye" />
+                        </BButton>
+
+                        <WorkflowActions
+                            class="show-in-card"
+                            menu
+                            :workflow="workflow"
+                            :published="publishedView"
+                            :show-controls="showControls"
+                            @refreshList="emit('refreshList', true)"
+                            @toggleShowPreview="toggleShowPreview" />
+                    </div>
                 </div>
 
                 <div>
-                    <WorkflowActions
-                        class="workflow-actions"
-                        :workflow="workflow"
-                        :show-controls="showControls"
-                        @refreshList="emit('refreshList', true)"
-                        @toggleShowPreview="toggleShowPreview" />
+                    <span class="workflow-name show-in-card">
+                        {{ workflow.name }}
+                        <BButton
+                            v-if="!shared && !workflow.deleted"
+                            id="rename-button"
+                            v-b-tooltip.top
+                            :class="{ 'mouse-out': !showControls }"
+                            variant="link"
+                            size="sm"
+                            title="Rename workflow"
+                            @click="showRename = !showRename">
+                            <FontAwesomeIcon :icon="faPen" />
+                        </BButton>
+                    </span>
                 </div>
-            </div>
 
-            <div class="workflow-count-view d-flex">
-                <WorkflowInvocationsCount :workflow="workflow" />
-
-                <BButton
-                    v-show="gridView"
-                    id="view-button"
-                    v-b-tooltip.top
-                    class="workflow-preview-button"
-                    size="sm"
-                    title="View workflow"
-                    variant="link"
-                    @click="toggleShowPreview(true)">
-                    <FontAwesomeIcon :icon="faEye" />
-                </BButton>
+                <TextSummary
+                    v-if="description"
+                    class="my-1"
+                    :description="description"
+                    :max-length="gridView ? 100 : 250" />
             </div>
 
-            <BRow v-if="description" class="text-summary" no-gutters>
-                <TextSummary :description="description" :max-length="gridView ? 100 : 250" />
-            </BRow>
-
-            <BRow no-gutters>
-                <BCol class="d-flex align-items-center" sm="6" cols="8">
-                    <BRow align-h="end" no-gutters>
-                        <StatelessTags
-                            clickable
-                            :value="workflow.tags"
-                            :disabled="workflow.deleted"
-                            :max-visible-tags="gridView ? 2 : 8"
-                            @input="(tags) => onTagsUpdate(tags)"
-                            @tag-click="emit('tagClick', $event)" />
-                    </BRow>
-                </BCol>
-
-                <BCol align-self="end" class="text-right" sm="6" cols="4">
+            <div class="workflow-card-footer">
+                <div>
+                    <StatelessTags
+                        clickable
+                        :value="workflow.tags"
+                        :disabled="workflow.deleted"
+                        :max-visible-tags="gridView ? 2 : 8"
+                        @input="(tags) => onTagsUpdate(tags)"
+                        @tag-click="emit('tagClick', $event)" />
+                </div>
+
+                <div class="d-flex justify-content-end">
                     <BButton
                         v-if="!shared && !workflow.deleted"
                         v-b-tooltip.hover
@@ -167,8 +194,8 @@ function onTagsUpdate(tags: string[]) {
                     </BButton>
 
                     <WorkflowRunButton :id="workflow.id" />
-                </BCol>
-            </BRow>
+                </div>
+            </div>
 
             <WorkflowRename
                 v-if="!shared && !workflow.deleted"
@@ -198,14 +225,17 @@ function onTagsUpdate(tags: string[]) {
     container-type: inline-size;
 
     .workflow-card-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         background-color: white;
         border: 1px solid #e5e5e5;
         border-radius: 0.5rem;
         padding: 0.5rem;
-        margin-bottom: 0.5rem;
+        margin: 0 0.25rem 0.5rem 0.25rem;
 
-        .workflow-count-view {
-            margin-left: auto;
+        .workflow-count-actions {
+            display: flex;
         }
 
         .text-summary {
@@ -214,6 +244,7 @@ function onTagsUpdate(tags: string[]) {
 
         .workflow-name {
             font-size: 1rem;
+            font-weight: bold;
         }
 
         .mouse-out {
@@ -223,26 +254,43 @@ function onTagsUpdate(tags: string[]) {
         .workflow-preview-modal {
             min-width: max-content;
         }
+
+        @container (min-width: 576px) {
+            .workflow-card-footer {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
     }
 
     @container (max-width: 768px) {
-        .workflow-card-container {
-            margin: 0 0.5rem 0.5rem 0.5rem;
+        .hide-in-card {
+            display: none !important;
         }
 
-        .workflow-actions {
-            display: none !important;
+        .show-in-card {
+            display: inline-block !important;
         }
 
-        .workflow-count-view {
-            justify-content: space-between;
-            margin-bottom: 0.5rem;
+        .workflow-count-actions {
+            align-items: baseline;
         }
     }
 
     @container (min-width: 768px) {
-        .workflow-preview-button {
-            display: none;
+        .workflow-count-actions {
+            align-items: end;
+            flex-direction: column;
+        }
+
+        .hide-in-card {
+            display: inline-block !important;
+        }
+
+        .show-in-card {
+            display: none !important;
         }
     }
 }

From a9c345604775fa62215e0a41b9749dd4d74fd925 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:50:03 +0000
Subject: [PATCH 028/104] WorkflowInvocationsCount: add compact view

---
 .../Workflow/WorkflowInvocationsCount.vue     | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 6b7572250895..1f58cc90b342 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -25,7 +25,7 @@ function onInvocations() {
 </script>
 
 <template>
-    <div class="d-flex align-items-center flex-gapx-1">
+    <div class="workflow-invocations-count d-flex align-items-center flex-gapx-1">
         <BBadge
             v-b-tooltip.hover
             pill
@@ -34,8 +34,13 @@ function onInvocations() {
             variant="secondary"
             @click="onInvocations">
             <FontAwesomeIcon :icon="faSitemap" />
-            <span v-if="workflow.run_count > 0"> workflow runs: {{ workflow.run_count }} </span>
-            <span v-else> workflow never run </span>
+            <span v-if="workflow.run_count > 0">
+                <span class="compact-view">workflow runs:</span>
+                {{ workflow.run_count }}
+            </span>
+            <span v-else>
+                <span class="compact-view">workflow never run</span>
+            </span>
         </BBadge>
 
         <BBadge v-if="workflow.last_run_time" v-b-tooltip.hover pill :title="localize('Last run')" variant="primary">
@@ -46,3 +51,11 @@ function onInvocations() {
         </BBadge>
     </div>
 </template>
+
+<style scoped lang="scss">
+@container (max-width: 376px) {
+    .compact-view {
+        display: none;
+    }
+}
+</style>

From a976690323a5e55cc840356b6325d99b4f66bf91 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:52:12 +0000
Subject: [PATCH 029/104] WorkflowList: add owner query search, sync deleted
 button with filter text

---
 .../src/components/Workflow/WorkflowList.vue  | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index e58a020e27eb..144a3595c74c 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -2,8 +2,9 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BCol, BNav, BNavItem, BOverlay } from "bootstrap-vue";
-import { computed, type Ref, ref, watch } from "vue";
+import { BAlert, BButton, BNav, BNavItem, BOverlay } from "bootstrap-vue";
+import { computed, onMounted, type Ref, ref, watch } from "vue";
+import { useRouter } from "vue-router/composables";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
@@ -31,18 +32,10 @@ const filterOptions = [
         description:
             "Shows workflows with the given workflow tag. You may also click on a tag to filter on that tag directly.",
     },
-    {
-        filter: "is:published",
-        description: "Shows published workflows.",
-    },
     {
         filter: "is:importable",
         description: "Shows importable workflows (this also means they have URL generated).",
     },
-    {
-        filter: "is:shared_with_me",
-        description: "Shows workflows shared by another user directly with you.",
-    },
     {
         filter: "is:deleted",
         description: "Shows deleted workflows.",
@@ -60,6 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
     activeList: "my",
 });
 
+const router = useRouter();
 const userStore = useUserStore();
 
 const validFilters = {
@@ -75,7 +69,6 @@ const limit = ref(50);
 const offset = ref(0);
 const loading = ref(true);
 const overlay = ref(false);
-const showDeleted = ref(false);
 const isScrollable = ref(false);
 const listHeader = ref<any>(null);
 const workflows = ref<WorkflowsList>([]);
@@ -105,12 +98,13 @@ const filters = computed(() => advancedFiltering.value.filters);
 const published = computed(() => props.activeList === "published");
 const scrolledTop = computed(() => !isScrollable.value || arrived.top);
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
+const showDeleted = computed(() => filterText.value.includes("is:deleted"));
 const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
-const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) || true);
+const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
 const filterText = computed(() => advancedFiltering.value && advancedFiltering.value.filterText);
-const noItems = computed(() => !loading.value && workflows.value.length === 0 && !filterText.value);
-const noResults = computed(() => !loading.value && workflows.value.length === 0 && filterText.value);
+const noItems = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && !filterText.value);
+const noResults = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && filterText.value);
 
 function updateFilter(newVal: string) {
     advancedFiltering.value.updateFilter(newVal.trim());
@@ -137,10 +131,6 @@ async function load(overlayLoading = false) {
         search += " is:shared_with_me";
     }
 
-    if (showDeleted.value) {
-        search += " is:deleted";
-    }
-
     try {
         workflows.value = await loadWorkflows({
             sortBy: sortBy.value,
@@ -159,11 +149,25 @@ async function load(overlayLoading = false) {
     }
 }
 
-load();
+function onToggleDeleted() {
+    if (!showDeleted.value) {
+        updateFilter(`${filterText.value} is:deleted`);
+    } else {
+        updateFilter(filterText.value.replace("is:deleted", "").trim());
+    }
+}
 
-watch([filterText, sortBy, sortDesc, showDeleted], () => {
+watch([filterText, sortBy, sortDesc], () => {
     load(true);
 });
+
+onMounted(() => {
+    if (router.currentRoute.query.owner) {
+        advancedFiltering.value.updateFilter(`${filterText.value} user:${router.currentRoute.query.owner}`.trim());
+    }
+
+    load();
+});
 </script>
 
 <template>
@@ -193,20 +197,20 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
 
             <ListHeader ref="listHeader" show-view-toggle>
                 <template v-slot:extra-filter>
-                    <BCol v-if="activeList === 'my'">
+                    <div v-if="activeList === 'my'">
                         Filter:
                         <BButton
                             id="show-deleted"
                             v-b-tooltip.hover
                             size="sm"
-                            :title="showDeleted ? 'Show deleted workflows' : 'Hide deleted workflows'"
+                            :title="!showDeleted ? 'Show deleted workflows' : 'Hide deleted workflows'"
                             :pressed="showDeleted"
                             variant="outline-primary"
-                            @click="showDeleted = !showDeleted">
+                            @click="onToggleDeleted">
                             <FontAwesomeIcon :icon="faTrash" />
                             Show deleted
                         </BButton>
-                    </BCol>
+                    </div>
                 </template>
             </ListHeader>
         </div>
@@ -215,11 +219,11 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
             <LoadingSpan />
         </BAlert>
 
-        <BAlert v-else-if="!loading && noItems" variant="info" show>
+        <BAlert v-else-if="!loading && !overlay && noItems" variant="info" show>
             No workflows found. You may create or import new workflows using the buttons above.
         </BAlert>
 
-        <BAlert v-else-if="!loading && noResults" variant="info" show>
+        <BAlert v-else-if="!loading && !overlay && noResults" variant="info" show>
             No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
         </BAlert>
 
@@ -250,7 +254,7 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
     .workflows-list-header {
         position: sticky;
         top: 0;
-        z-index: 1;
+        z-index: 100;
         background-color: white;
 
         &:after {
@@ -279,6 +283,10 @@ watch([filterText, sortBy, sortDesc, showDeleted], () => {
         }
     }
 
+    .cards-list {
+        min-height: 100px;
+    }
+
     .grid-view {
         width: calc(100% / 3);
         display: inline-grid;

From 502fea9583ce30b63570eb08b4853a8c7f83c722 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Mon, 4 Sep 2023 08:52:48 +0000
Subject: [PATCH 030/104] WorkflowQuickView: improve Ui

---
 .../components/Workflow/WorkflowQuickView.vue | 86 ++++++++++---------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
index 85cf9efee588..25430abfb3c5 100644
--- a/client/src/components/Workflow/WorkflowQuickView.vue
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type AxiosError } from "axios";
-import { BAlert, BCard, BCol, BContainer, BRow } from "bootstrap-vue";
+import { BAlert, BCard } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
@@ -15,7 +15,6 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
 import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
-import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
 import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
 const props = defineProps<{
@@ -79,74 +78,77 @@ watch(
 </script>
 
 <template>
-    <BContainer class="d-flex">
-        <BRow v-if="loading" class="w-100" no-gutters>
+    <div class="workflow-quick-view">
+        <div v-if="loading" class="w-100">
             <BAlert class="w-100" show variant="info">
                 <LoadingSpan message="Loading workflow preview" />
             </BAlert>
-        </BRow>
+        </div>
 
-        <BRow v-else class="flex-grow-1" no-gutters>
-            <BRow class="w-100" no-gutters>
-                <span class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-center align-items-center mb-2">
+        <div v-else class="workflow-preview-container">
+            <div class="w-100">
+                <span class="d-flex mb-2">
                     <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0"> Workflow Preview </Heading>
 
-                    <WorkflowActions :workflow="workflowInfo" :button-size="'md'" show-controls />
+                    <WorkflowActions :workflow="workflowInfo" button-size="md" show-controls />
 
                     <WorkflowRunButton :id="props.id" full />
                 </span>
-            </BRow>
-
-            <BRow class="w-100">
-                <BCol v-if="errored" class="m-3 w-100 overflow-auto d-flex flex-column">
-                    <Heading h2 separator size="xl"> Failed to load workflow </Heading>
+            </div>
 
+            <div class="d-flex w-100">
+                <div v-if="errored" class="w-100">
                     <BAlert v-if="errorMessage" show variant="danger">
+                        Failed to load workflow:
                         {{ errorMessage }}
                     </BAlert>
 
                     <BAlert v-else show variant="danger"> Unknown Error </BAlert>
-                </BCol>
-
-                <BCol v-else-if="!loading && workflowInfo" cols="8" class="published-workflow">
-                    <div class="workflow-preview d-flex flex-column">
-                        <BCard class="workflow-graph">
-                            <WorkflowGraph
-                                v-if="workflow && datatypesMapper"
-                                :steps="workflow.steps"
-                                :datatypes-mapper="datatypesMapper"
-                                readonly />
-                        </BCard>
-                    </div>
-                </BCol>
-
-                <BCol v-if="!loading && workflowInfo" class="pl-2" cols="4">
+                </div>
+
+                <div v-else-if="!loading && workflowInfo" class="workflow-preview d-flex flex-column">
+                    <BCard class="workflow-graph">
+                        <WorkflowGraph
+                            v-if="workflow && datatypesMapper"
+                            :steps="workflow.steps"
+                            :datatypes-mapper="datatypesMapper"
+                            readonly />
+                    </BCard>
+                </div>
+
+                <div v-if="!loading && !errored && workflowInfo" class="pl-2">
                     <WorkflowInformation :workflow-info="workflowInfo" />
-                </BCol>
-            </BRow>
-        </BRow>
-    </BContainer>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <style scoped lang="scss">
-.published-workflow {
-    display: flex;
-    flex-grow: 1;
-    gap: 1rem;
-    height: 100%;
+.workflow-quick-view {
+    .workflow-preview-container {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+    }
 
     .workflow-preview {
         flex-grow: 1;
 
+        display: flex;
+        flex-grow: 1;
+        gap: 1rem;
+        height: 100%;
+
         .workflow-graph {
             flex-grow: 1;
             min-width: 500px;
         }
-    }
 
-    &:deep(.workflow-information) {
-        max-width: 500px;
-        height: 100%;
+        &:deep(.workflow-information) {
+            max-width: 500px;
+            height: 100%;
+        }
     }
 
     @media only screen and (max-width: 1100px) {

From e8c17573903159c7d94b8e41f578c31b56596410 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:08:09 +0000
Subject: [PATCH 031/104] fix double click on AsyncButton

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

diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index 9487e2ddb781..1c8ea86c0a88 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -38,7 +38,7 @@ async function onClick() {
         :disabled="loading || disabled"
         @click="onClick">
         <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" :title="loadingTitle" />
-        <FontAwesomeIcon v-else :icon="props.icon" @click="onClick" />
+        <FontAwesomeIcon v-else :icon="props.icon" />
         <slot></slot>
     </BButton>
 </template>

From 1825f75719a40758628b9122b9424172fefdd52e Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:37:12 +0000
Subject: [PATCH 032/104] drop `AdvancedFiltering` component

---
 .../components/Common/AdvancedFiltering.vue   | 151 ------------------
 1 file changed, 151 deletions(-)
 delete mode 100644 client/src/components/Common/AdvancedFiltering.vue

diff --git a/client/src/components/Common/AdvancedFiltering.vue b/client/src/components/Common/AdvancedFiltering.vue
deleted file mode 100644
index 70fbce083f68..000000000000
--- a/client/src/components/Common/AdvancedFiltering.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleDown, faAngleDoubleUp, faRedo, faSearch } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
-import { computed, ref } from "vue";
-
-import Filtering, { type HandlerReturn } from "@/utils/filtering";
-
-import AdvancedFilteringHelpModal from "@/components/Common/AdvancedFilteringHelpModal.vue";
-
-library.add(faAngleDoubleDown, faAngleDoubleUp, faRedo, faSearch);
-
-type FilterOption = {
-    filter: string;
-    description: string;
-};
-
-interface Props {
-    helpTitle?: string;
-    advancedMode?: boolean;
-    useDefaults?: boolean;
-    searchPlaceHolder: string;
-    filterOptions: FilterOption[];
-    advancedFilterFields?: string[];
-    validFilters: Record<string, HandlerReturn<unknown>>;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    helpTitle: "",
-    useDefaults: false,
-    advancedMode: false,
-    searchPlaceHolder: "Search",
-    advancedFilterFields: () => ["name", "tag"],
-});
-
-const filters = new Filtering(props.validFilters, props.useDefaults);
-
-const filterText = ref("");
-const showHelp = ref(false);
-const showAdvanced = ref(false);
-
-const filterSettings = computed(() => filters.toAlias(filters.getFiltersForText(filterText.value)));
-const localFilter = computed({
-    get() {
-        return filterText.value;
-    },
-    set(newVal: string) {
-        if (newVal !== filterText.value) {
-            updateFilter(newVal);
-        }
-    },
-});
-
-function updateFilter(newVal: string) {
-    filterText.value = newVal.trim();
-}
-
-function onToggle() {
-    showAdvanced.value = !showAdvanced.value;
-}
-
-function onToggleHelp() {
-    showHelp.value = !showHelp.value;
-}
-
-function onSearch() {
-    onToggle();
-    updateFilter(filters.getFilterText(filterSettings.value));
-}
-
-defineExpose({
-    filters,
-    filterText,
-    updateFilter,
-});
-</script>
-
-<template>
-    <div>
-        <BInputGroup class="mb-2">
-            <BFormInput
-                id="filter-input"
-                v-model="localFilter"
-                debounce="500"
-                size="sm"
-                :class="filterText && 'font-weight-bold'"
-                :placeholder="searchPlaceHolder"
-                title="clear search (esc)"
-                data-description="filter text input"
-                @keyup.esc="updateFilter('')" />
-
-            <BInputGroupAppend>
-                <BButton
-                    v-if="advancedMode"
-                    v-b-tooltip.hover
-                    size="sm"
-                    aria-haspopup="true"
-                    title="Advanced Filtering Help"
-                    @click="onToggleHelp">
-                    <FontAwesomeIcon icon="question" />
-                </BButton>
-
-                <BButton
-                    v-if="advancedMode"
-                    v-b-tooltip.hover
-                    size="sm"
-                    :title="showAdvanced ? 'Hide advanced filter' : 'Show advanced filter'"
-                    :pressed="showAdvanced"
-                    :variant="showAdvanced ? 'info' : 'secondary'"
-                    @click="onToggle">
-                    <FontAwesomeIcon :icon="showAdvanced ? faAngleDoubleUp : faAngleDoubleDown" />
-                </BButton>
-
-                <BButton v-b-tooltip.hover size="sm" title="Clear filters (esc)" @click="updateFilter('')">
-                    <FontAwesomeIcon icon="times" />
-                </BButton>
-            </BInputGroupAppend>
-        </BInputGroup>
-
-        <div v-if="advancedMode && showAdvanced" fluid class="mb-2" @keyup.enter="onSearch">
-            <div v-for="fieldName in advancedFilterFields" :key="fieldName">
-                <small :for="`advanced-filter-${fieldName}`"> Filter by {{ fieldName }}: </small>
-                <BFormInput
-                    :id="`advanced-filter-${fieldName}`"
-                    v-model="filterSettings[`${fieldName}:`]"
-                    size="sm"
-                    :placeholder="`any ${fieldName}`" />
-            </div>
-
-            <div class="my-2">
-                <BButton size="sm" variant="primary" @click="onSearch">
-                    <FontAwesomeIcon :icon="faSearch" />
-                    Search
-                </BButton>
-
-                <BButton size="sm" variant="outline-primary" title="Close advanced filter" @click="onToggle">
-                    <FontAwesomeIcon :icon="faRedo" />
-                    Close
-                </BButton>
-            </div>
-        </div>
-
-        <AdvancedFilteringHelpModal
-            v-if="advancedMode"
-            :title="helpTitle"
-            :visible="showHelp"
-            :filter-options="filterOptions"
-            @close="onToggleHelp" />
-    </div>
-</template>

From 1e283c347db21efe60cc896160c66adde40be0d0 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:40:33 +0000
Subject: [PATCH 033/104] update `WorkflowActions`

`show` and `bookmark` always visible, `export` and `delete`, `export` and ``externalLink` in drop down
---
 .../components/Workflow/WorkflowActions.vue   | 321 ++++++++----------
 1 file changed, 138 insertions(+), 183 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index fc20642aebb3..d0409d4ae2bf 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -2,40 +2,31 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 import {
-    faCopy,
-    faDownload,
+    faCaretDown,
+    faExternalLinkAlt,
     faEye,
     faFileExport,
-    faShareAlt,
     faStar,
     faTrash,
-    faTrashRestore,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
-import { computed } from "vue";
+import { computed, type ComputedRef } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import {
-    copyWorkflow,
-    deleteWorkflow,
-    undeleteWorkflow,
-    updateWorkflow,
-} from "@/components/Workflow/workflows.services";
+import { deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 
-library.add(faCopy, faDownload, faEye, faFileExport, faShareAlt, farStar, faStar, faTrash, faTrashRestore);
+library.add(faCaretDown, faExternalLinkAlt, faEye, faFileExport, farStar, faStar, faTrash);
 
 interface Props {
     workflow: any;
     menu?: boolean;
     published?: boolean;
-    showControls: boolean;
     buttonSize?: "sm" | "md" | "lg";
 }
 
@@ -43,9 +34,10 @@ type BaseAction = {
     if?: boolean;
     id: string;
     title: string;
-    tooltip: string;
+    tooltip?: string;
     icon: any;
     href?: string;
+    target?: "_blank";
     size: "sm" | "md" | "lg";
     component: "async" | "button";
     variant: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
@@ -75,11 +67,7 @@ const emit = defineEmits<{
 const router = useRouter();
 const userStore = useUserStore();
 const { confirm } = useConfirmDialog();
-const { isAnonymous } = storeToRefs(useUserStore());
 
-const downloadUrl = computed(() => {
-    return `/api/workflows/${props.workflow.id}/download?format=json-download`;
-});
 const shared = computed(() => {
     if (userStore.currentUser) {
         return userStore.currentUser.username !== props.workflow.owner;
@@ -87,25 +75,20 @@ const shared = computed(() => {
         return false;
     }
 });
+const sourceType = computed(() => {
+    if (props.workflow.source_metadata?.url) {
+        return "url";
+    } else if (props.workflow.source_metadata?.trs_server) {
+        return `trs_${props.workflow.source_metadata?.trs_server}`;
+    } else {
+        return "";
+    }
+});
 
 function onExport() {
     router.push(`/workflows/export?id=${props.workflow.id}`);
 }
 
-function onShare() {
-    router.push(`/workflows/sharing?id=${props.workflow.id}`);
-}
-
-async function onCopy() {
-    const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
-
-    if (confirmed) {
-        await copyWorkflow(props.workflow.id, props.workflow.owner);
-        emit("refreshList", true);
-        Toast.success("Workflow copied");
-    }
-}
-
 async function onToggleBookmark(checked: boolean) {
     await updateWorkflow(props.workflow.id, {
         show_in_tool_panel: checked,
@@ -116,7 +99,6 @@ async function onToggleBookmark(checked: boolean) {
 
 async function onDelete() {
     const confirmed = await confirm("Are you sure you want to delete this workflow?", "Delete workflow");
-
     if (confirmed) {
         await deleteWorkflow(props.workflow.id);
         emit("refreshList", true);
@@ -124,169 +106,146 @@ async function onDelete() {
     }
 }
 
-async function onRestore() {
-    const confirmed = await confirm("Are you sure you want to restore this workflow?", "Restore workflow");
-
-    if (confirmed) {
-        await undeleteWorkflow(props.workflow.id);
-        emit("refreshList", true);
-        Toast.info("Workflow restored");
-    }
-}
+const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
+    return [
+        {
+            if: !shared.value && !props.workflow.show_in_tool_panel,
+            id: "add-bookmark-button",
+            component: "async",
+            title: "Add bookmarks",
+            tooltip: "Add to bookmarks. This workflow will appear in the left tool panel.",
+            icon: farStar,
+            size: props.buttonSize,
+            variant: "link",
+            action: () => onToggleBookmark(true),
+        },
+        {
+            if: !shared.value && props.workflow.show_in_tool_panel,
+            id: "remove-bookmark-button",
+            component: "async",
+            title: "Remove bookmark",
+            tooltip: "Remove bookmark",
+            icon: faStar,
+            size: props.buttonSize,
+            variant: "link",
+            action: () => onToggleBookmark(false),
+        },
+        {
+            if: true,
+            id: "view-button",
+            component: "button",
+            title: "View workflow",
+            tooltip: "View workflow",
+            icon: faEye,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => emit("toggleShowPreview", true),
+        },
+    ];
+});
 
-const actions: (AAction | BAction)[] = [
-    {
-        if: !shared.value && !props.workflow.deleted,
-        id: "delete-button",
-        component: "button",
-        title: "Delete workflow",
-        tooltip: "Delete workflow",
-        icon: faTrash,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => onDelete(),
-    },
-    {
-        if: !isAnonymous.value && !props.workflow.deleted,
-        id: "copy-button",
-        component: "button",
-        title: "Copy workflow",
-        tooltip: "Copy workflow",
-        icon: faCopy,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => onCopy(),
-    },
-    {
-        if: !props.workflow.deleted,
-        id: "export-button",
-        component: "button",
-        title: "Export workflow",
-        tooltip: "Export workflow",
-        icon: faFileExport,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => onExport(),
-    },
-    {
-        if: !props.workflow.deleted,
-        id: "download-button",
-        component: "button",
-        title: "Download workflow",
-        tooltip: "Download workflow",
-        href: downloadUrl.value,
-        icon: faDownload,
-        size: props.buttonSize,
-        variant: "link",
-    },
-    {
-        if: !shared.value && !props.workflow.deleted,
-        id: "share-button",
-        component: "button",
-        title: "Share workflow",
-        tooltip: "Share workflow",
-        icon: faShareAlt,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => onShare(),
-    },
-    {
-        if: props.workflow.deleted,
-        id: "restore-button",
-        component: "button",
-        title: "Restore workflow",
-        tooltip: "Restore workflow",
-        icon: faTrashRestore,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => onRestore(),
-    },
-    {
-        if: !props.published && props.workflow.show_in_tool_panel,
-        id: "remove-bookmark-button",
-        component: "async",
-        title: "Remove bookmark",
-        tooltip: "Remove bookmark",
-        icon: faStar,
-        size: props.buttonSize,
-        variant: "link",
-        action: () => onToggleBookmark(false),
-    },
-    {
-        if: !props.published && !props.workflow.show_in_tool_panel,
-        id: "add-bookmark-button",
-        component: "async",
-        title: "Add bookmark",
-        tooltip: "Add a bookmark. This workflow will appear in the left tool panel.",
-        icon: farStar,
-        size: props.buttonSize,
-        variant: "link",
-        action: () => onToggleBookmark(true),
-    },
-    {
-        if: true,
-        id: "view-button",
-        component: "button",
-        title: "View workflow",
-        tooltip: "View workflow",
-        icon: faEye,
-        size: props.buttonSize,
-        variant: "link",
-        onClick: () => emit("toggleShowPreview", true),
-    },
-];
+const menuActions: ComputedRef<BAction[]> = computed(() => {
+    return [
+        {
+            if: !shared.value && !props.workflow.deleted,
+            id: "delete-button",
+            component: "button",
+            title: "Delete workflow",
+            tooltip: "Delete workflow",
+            icon: faTrash,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => onDelete(),
+        },
+        {
+            if: sourceType.value.includes("trs"),
+            id: "source-trs-button",
+            component: "button",
+            title: `View on ${props.workflow.source_metadata?.trs_server}`,
+            href: `https://dockstore.org/workflows${props.workflow?.source_metadata?.trs_tool_id?.slice(9)}`,
+            target: "_blank",
+            icon: faExternalLinkAlt,
+            size: props.buttonSize,
+            variant: "link",
+        },
+        {
+            if: sourceType.value == "url",
+            id: "source-url-button",
+            component: "button",
+            title: "View external link",
+            href: props.workflow.source_metadata?.url,
+            target: "_blank",
+            icon: faExternalLinkAlt,
+            size: props.buttonSize,
+            variant: "link",
+        },
+        {
+            if: !props.workflow.deleted,
+            id: "export-button",
+            component: "button",
+            title: "Export",
+            icon: faFileExport,
+            size: props.buttonSize,
+            variant: "link",
+            onClick: () => onExport(),
+        },
+    ];
+});
 </script>
 
 <template>
-    <div class="workflow-actions">
+    <div class="workflow-actions flex-gapx-1">
+        <div v-for="action in actions" :key="action.id">
+            <AsyncButton
+                v-if="action.if && action.component === 'async'"
+                :id="action.id"
+                v-b-tooltip.hover
+                class="inline-icon-button"
+                :variant="action.variant"
+                :size="action.size"
+                :title="action.tooltip"
+                :icon="action.icon"
+                :action="action.action" />
+
+            <BButton
+                v-if="action.if && action.component === 'button'"
+                :id="action.id"
+                v-b-tooltip.hover
+                class="inline-icon-button"
+                :variant="action.variant"
+                :size="action.size"
+                :title="action.tooltip"
+                :href="action.href"
+                @click="action.onClick">
+                <FontAwesomeIcon :icon="action.icon" />
+            </BButton>
+        </div>
+
         <BDropdown
-            v-if="menu"
             id="workflow-actions-dropdown"
             v-b-tooltip.top
             right
+            no-caret
             class="show-in-card"
+            toggle-class="inline-icon-button"
             title="Workflow actions"
             variant="link">
+            <template v-slot:button-content>
+                <FontAwesomeIcon :icon="faCaretDown" fixed-width />
+            </template>
+
             <BDropdownItem
-                v-for="action in actions.filter((a) => a.if)"
+                v-for="action in menuActions.filter((a) => a.if).reverse()"
                 :id="action.id"
                 :key="action.id"
                 :href="action.href ?? undefined"
-                :title="action.tooltip"
-                @click="action.component === 'button' ? action.onClick?.() : action.action()">
+                :title="action.title"
+                :target="action.target"
+                @click="action.onClick?.()">
                 <FontAwesomeIcon :icon="action.icon" />
-                <span class="ml-1">{{ action.title }}</span>
+                <span>{{ action.title }}</span>
             </BDropdownItem>
         </BDropdown>
-
-        <div v-else class="d-flex">
-            <div v-for="action in actions" :key="action.id">
-                <AsyncButton
-                    v-if="action.if && action.component === 'async'"
-                    :id="action.id"
-                    v-b-tooltip.hover
-                    :class="{ 'mouse-out': !showControls }"
-                    :variant="action.variant"
-                    :size="action.size"
-                    :title="action.tooltip"
-                    :icon="action.icon"
-                    :action="action.action" />
-
-                <BButton
-                    v-if="action.if && action.component === 'button'"
-                    :id="action.id"
-                    v-b-tooltip.hover
-                    :class="{ 'mouse-out': !showControls }"
-                    :variant="action.variant"
-                    :size="action.size"
-                    :title="action.tooltip"
-                    :icon="action.icon"
-                    :href="action.href"
-                    @click="action.onClick">
-                    <FontAwesomeIcon :icon="action.icon" />
-                </BButton>
-            </div>
-        </div>
     </div>
 </template>
 
@@ -296,9 +255,5 @@ const actions: (AAction | BAction)[] = [
     align-items: baseline;
     flex-wrap: wrap;
     justify-content: flex-end;
-
-    .mouse-out {
-        opacity: 0.5;
-    }
 }
 </style>

From 0026c2ea66822805805b3108e603147b29393569 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:41:28 +0000
Subject: [PATCH 034/104] add `WorkflowActionsExtend`: always show most used
 actions `share`, `download` and `copy`

---
 .../Workflow/WorkflowActionsExtend.vue        | 149 ++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 client/src/components/Workflow/WorkflowActionsExtend.vue

diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
new file mode 100644
index 000000000000..0fcd393da6ca
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCaretDown,
+    faCopy,
+    faDownload,
+    faFileExport,
+    faShareAlt,
+    faStar,
+    faTrashRestore,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { copyWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+
+library.add(faCaretDown, faCopy, faDownload, faFileExport, faShareAlt, farStar, faStar, faTrashRestore);
+
+interface Props {
+    workflow: any;
+    menu?: boolean;
+    published?: boolean;
+    buttonSize?: "sm" | "md" | "lg";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    buttonSize: "sm",
+});
+
+const emit = defineEmits<{
+    (e: "refreshList", a?: boolean): void;
+}>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const { confirm } = useConfirmDialog();
+const { isAnonymous } = storeToRefs(useUserStore());
+
+const downloadUrl = computed(() => {
+    return `/api/workflows/${props.workflow.id}/download?format=json-download`;
+});
+const shared = computed(() => {
+    if (userStore.currentUser) {
+        return userStore.currentUser.username !== props.workflow.owner;
+    } else {
+        return false;
+    }
+});
+
+function onShare() {
+    router.push(`/workflows/sharing?id=${props.workflow.id}`);
+}
+
+async function onCopy() {
+    const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
+
+    if (confirmed) {
+        await copyWorkflow(props.workflow.id, props.workflow.owner);
+        emit("refreshList", true);
+        Toast.success("Workflow copied");
+    }
+}
+
+async function onRestore() {
+    const confirmed = await confirm("Are you sure you want to restore this workflow?", "Restore workflow");
+
+    if (confirmed) {
+        await undeleteWorkflow(props.workflow.id);
+        emit("refreshList", true);
+        Toast.info("Workflow restored");
+    }
+}
+</script>
+
+<template>
+    <div class="workflow-actions flex-gapx-1">
+        <BButtonGroup>
+            <BButton
+                v-if="!isAnonymous && !shared && !workflow.deleted"
+                id="copy-button"
+                v-b-tooltip.hover
+                :size="buttonSize"
+                title="Copy"
+                variant="outline-primary"
+                @click="onCopy">
+                <FontAwesomeIcon :icon="faCopy" fixed-width />
+                <span class="compact-view">Copy</span>
+            </BButton>
+
+            <BButton
+                v-if="!workflow.deleted"
+                id="download-button"
+                v-b-tooltip.hover
+                :size="buttonSize"
+                title="Download workflow in .ga format"
+                variant="outline-primary"
+                :href="downloadUrl">
+                <FontAwesomeIcon :icon="faDownload" fixed-width />
+                <span class="compact-view">Download</span>
+            </BButton>
+
+            <BButton
+                v-if="!shared && !workflow.deleted"
+                id="share-button"
+                v-b-tooltip.hover
+                :size="buttonSize"
+                title="Share"
+                variant="outline-primary"
+                @click="onShare">
+                <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+                <span class="compact-view">Share</span>
+            </BButton>
+
+            <BButton
+                v-if="workflow.deleted"
+                id="restore-button"
+                v-b-tooltip.hover
+                :size="buttonSize"
+                title="Restore"
+                variant="outline-primary"
+                @click="onRestore">
+                <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
+                <span class="compact-view">Restore</span>
+            </BButton>
+        </BButtonGroup>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.workflow-actions {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+
+    @container (max-width: 576px) {
+        .compact-view {
+            display: none;
+        }
+    }
+}
+</style>

From 6573db062025f983ff4a31a615d09408ee86f297 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:42:29 +0000
Subject: [PATCH 035/104] add `outline-badge` css class for badges

---
 client/src/style/scss/ui.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 35501d175c55..93d37fd755bd 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -459,6 +459,17 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
+.outline-badge {
+    border: 1px solid $brand-primary;
+    color: $brand-primary;
+    background-color: white;
+
+    &:hover {
+        background-color: $brand-primary !important;
+        color: white !important;
+    }
+}
+
 .card-container {
     padding: 0.7rem;
     margin-bottom: 0.5rem;

From 2189e30dfc33746d77311e2fa135341d63af20a4 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:43:09 +0000
Subject: [PATCH 036/104] update `WorkflowIndicators` style

---
 .../Workflow/WorkflowIndicators.vue           | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index 86b84faed643..ce8c32616841 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -88,7 +88,7 @@ function onViewUserPublished() {
         <BBadge
             v-if="shared && !publishedView"
             v-b-tooltip
-            class="cursor-pointer mx-1"
+            class="outline-badge cursor-pointer mx-1"
             :title="`'${workflow.owner}' shared this workflow with you. Click to view all workflows shared with you by '${workflow.owner}'`"
             @click="onViewMySharedByUser">
             <FontAwesomeIcon :icon="faUsers" size="sm" />
@@ -98,37 +98,39 @@ function onViewUserPublished() {
         <BBadge
             v-if="publishedView"
             v-b-tooltip
-            class="cursor-pointer mx-1"
+            class="outline-badge cursor-pointer mx-1"
             :title="publishedTitle"
             @click="onViewUserPublished">
             <FontAwesomeIcon :icon="faUser" size="sm" />
             <span class="font-weight-bold"> {{ workflow.owner }} </span>
         </BBadge>
 
-        <span
+        <BButton
             v-if="sourceType.includes('trs')"
             id="source-indicator-trs"
-            v-b-tooltip.hover
-            class="info-icon"
+            v-b-tooltip
+            size="sm"
+            class="inline-icon-button"
             :title="sourceTitle">
-            <FontAwesomeIcon :icon="faShieldAlt" @click="onCopyLink" />
-        </span>
+            <FontAwesomeIcon :icon="faShieldAlt" fixed-width @click="onCopyLink" />
+        </BButton>
 
-        <span
+        <BButton
             v-if="sourceType == 'url'"
             id="source-indicator-url"
-            v-b-tooltip.hover
-            class="info-icon"
+            v-b-tooltip
+            size="sm"
+            class="inline-icon-button"
             :title="sourceTitle">
-            <FontAwesomeIcon :icon="faLink" @click="onCopyLink" />
-        </span>
+            <FontAwesomeIcon :icon="faLink" fixed-width @click="onCopyLink" />
+        </BButton>
 
         <BButton
             v-if="workflow.published && !publishedView"
             id="sharing-indicator-published"
             v-b-tooltip
             size="sm"
-            variant="link"
+            class="inline-icon-button"
             to="/workflows/list_published"
             title="Published workflow. Click to view all published workflows">
             <FontAwesomeIcon :icon="faGlobe" />
@@ -138,9 +140,15 @@ function onViewUserPublished() {
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
-.info-icon {
-    color: $brand_primary;
-    font-size: 0.8rem;
-    margin-right: 0.5rem;
+
+.workflow-badge {
+    background: white;
+    color: $brand-primary;
+    border: 1px solid $brand-primary;
+
+    &:hover {
+        color: white;
+        background: $brand-primary;
+    }
 }
 </style>

From 9cca5ce2bb792e96202be2b65d223b01f490067b Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:46:48 +0000
Subject: [PATCH 037/104] update `WorkflowInvocationsCount` style

---
 .../Workflow/WorkflowInvocationsCount.vue     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 1f58cc90b342..9748dd29e957 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEye, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faClock, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
+import { formatDistanceToNow, parseISO } from "date-fns";
 import { useRouter } from "vue-router/composables";
 
 import localize from "@/utils/localization";
 
 import UtcDate from "@/components/UtcDate.vue";
 
-library.add(faEye, faSitemap);
+library.add(faClock, faSitemap);
 
 interface Props {
     workflow: any;
@@ -30,8 +31,7 @@ function onInvocations() {
             v-b-tooltip.hover
             pill
             :title="localize('View workflow invocations')"
-            href="#"
-            variant="secondary"
+            class="outline-badge cursor-pointer"
             @click="onInvocations">
             <FontAwesomeIcon :icon="faSitemap" />
             <span v-if="workflow.run_count > 0">
@@ -43,11 +43,17 @@ function onInvocations() {
             </span>
         </BBadge>
 
-        <BBadge v-if="workflow.last_run_time" v-b-tooltip.hover pill :title="localize('Last run')" variant="primary">
-            <small>
-                last run
-                <UtcDate :date="workflow.last_run_time" mode="elapsed" />
-            </small>
+        <BBadge
+            v-if="workflow.last_run_time"
+            v-b-tooltip.hover
+            pill
+            :title="`Last run: ${formatDistanceToNow(parseISO(`${workflow.last_run_time}Z`), {
+                addSuffix: true,
+            })}. Click to view details.`"
+            class="outline-badge cursor-pointer">
+            <FontAwesomeIcon :icon="faClock" />
+            <span class="compact-view">last run:</span>
+            <UtcDate :date="workflow.last_run_time" mode="elapsed" />
         </BBadge>
     </div>
 </template>

From 696795fcf38b7059520b40ddede35d9b6bbdc261 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:47:43 +0000
Subject: [PATCH 038/104] `WorkflowRename`: update confirm button text and
 disable on empty name

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

diff --git a/client/src/components/Workflow/WorkflowRename.vue b/client/src/components/Workflow/WorkflowRename.vue
index d131820096a8..1f9253bc8bd2 100644
--- a/client/src/components/Workflow/WorkflowRename.vue
+++ b/client/src/components/Workflow/WorkflowRename.vue
@@ -37,7 +37,12 @@ async function onRename(newName: string) {
 </script>
 
 <template>
-    <BModal :visible="show" @ok="onRename(nameModel)" @hide="$emit('close')">
+    <BModal
+        :visible="show"
+        :ok-disabled="!nameModel"
+        :ok-title="localize('Rename')"
+        @ok="onRename(nameModel)"
+        @hide="$emit('close')">
         <template v-slot:modal-title>
             <Heading h2 inline size="sm"> Rename workflow: {{ localize(name) }}</Heading>
         </template>

From 53f0e48566f1b172852ef951c79970cf62ab2d21 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:48:17 +0000
Subject: [PATCH 039/104] `WorkflowInformation`: fix publishedByUser url query

---
 .../src/components/Workflow/Published/WorkflowInformation.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
index f923021b5782..7ced76b94df7 100644
--- a/client/src/components/Workflow/Published/WorkflowInformation.vue
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -31,7 +31,7 @@ const gravatarSource = computed(
     () => `https://secure.gravatar.com/avatar/${props.workflowInfo?.email_hash}?d=identicon`
 );
 
-const publishedByUser = computed(() => `/workflows/list_published?f-username=${props.workflowInfo?.owner}`);
+const publishedByUser = computed(() => `/workflows/list_published?owner=${props.workflowInfo?.owner}`);
 </script>
 
 <template>

From 003eda605e6a746fca03801fa526446825b18ece Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:53:14 +0000
Subject: [PATCH 040/104] update `WorkflowCard`: use `WorkflowActionsExtend`,
 `Import` button for not owned workflows and style updates

---
 .../src/components/Workflow/WorkflowCard.vue  | 166 ++++++++++--------
 1 file changed, 96 insertions(+), 70 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 732653d49b1f..7d67f69719ad 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -1,34 +1,26 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faEdit,
-    faEye,
-    faGlobe,
-    faLink,
-    faPen,
-    faShieldAlt,
-    faSitemap,
-    faUser,
-    faUsers,
-} from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faEye, faPen, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { updateWorkflow } from "@/components/Workflow/workflows.services";
+import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
+import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/Tags/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
+import WorkflowActionsExtend from "@/components/Workflow/WorkflowActionsExtend.vue";
 import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
 import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
 import WorkflowQuickView from "@/components/Workflow/WorkflowQuickView.vue";
 import WorkflowRename from "@/components/Workflow/WorkflowRename.vue";
 import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
-library.add(faEdit, faEye, faGlobe, faLink, faPen, faShieldAlt, faSitemap, faUser, faUsers);
+library.add(faEdit, faEye, faPen, faUpload);
 
 interface Props {
     workflow: any;
@@ -42,7 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-    (e: "refreshList", a?: boolean): void;
+    (e: "refreshList", a?: boolean, b?: boolean): void;
     (e: "tagClick", a: { text: string }): void;
 }>();
 
@@ -51,7 +43,6 @@ const userStore = useUserStore();
 
 const showRename = ref(false);
 const showPreview = ref(false);
-const showControls = ref(false);
 
 const workflow = computed(() => props.workflow);
 const shared = computed(() => {
@@ -73,7 +64,12 @@ function onEdit() {
     router.push(`/workflows/edit?id=${workflow.value.id}`);
 }
 
-function onRenameClose(newName: string) {
+async function onImport() {
+    await copyWorkflow(workflow.value.id, workflow.value.owner);
+    Toast.success("Workflow imported successfully");
+}
+
+function onRenameClose(e: any) {
     showRename.value = false;
     emit("refreshList", true);
 }
@@ -82,14 +78,15 @@ function toggleShowPreview(val: boolean = false) {
     showPreview.value = val;
 }
 
-function onTagsUpdate(tags: string[]) {
+async function onTagsUpdate(tags: string[]) {
     workflow.value.tags = tags;
-    updateWorkflow(workflow.value.id, { tags });
+    await updateWorkflow(workflow.value.id, { tags });
+    emit("refreshList", false, true);
 }
 </script>
 
 <template>
-    <div class="workflow-card" @mouseenter="showControls = true" @mouseleave="showControls = false">
+    <div class="workflow-card">
         <div class="workflow-card-container">
             <div>
                 <div class="d-flex justify-content-between align-items-center">
@@ -102,44 +99,22 @@ function onTagsUpdate(tags: string[]) {
                                 v-if="!shared && !workflow.deleted"
                                 id="rename-button"
                                 v-b-tooltip.top
-                                :class="{ 'mouse-out': !showControls }"
+                                class="inline-icon-button workflow-rename"
                                 variant="link"
                                 size="sm"
-                                title="Rename workflow"
+                                title="Rename"
                                 @click="showRename = !showRename">
-                                <FontAwesomeIcon :icon="faPen" />
+                                <FontAwesomeIcon :icon="faPen" fixed-width />
                             </BButton>
                         </span>
                     </div>
 
                     <div class="workflow-count-actions">
-                        <WorkflowActions
-                            class="hide-in-card"
-                            :workflow="workflow"
-                            :published="publishedView"
-                            :show-controls="showControls"
-                            @refreshList="emit('refreshList', true)"
-                            @toggleShowPreview="toggleShowPreview" />
-
-                        <WorkflowInvocationsCount :workflow="workflow" />
-
-                        <BButton
-                            id="view-button"
-                            v-b-tooltip.top
-                            class="show-in-card"
-                            size="sm"
-                            title="View workflow"
-                            variant="link"
-                            @click="toggleShowPreview(true)">
-                            <FontAwesomeIcon :icon="faEye" />
-                        </BButton>
+                        <WorkflowInvocationsCount class="ml-1" :workflow="workflow" />
 
                         <WorkflowActions
-                            class="show-in-card"
-                            menu
                             :workflow="workflow"
                             :published="publishedView"
-                            :show-controls="showControls"
                             @refreshList="emit('refreshList', true)"
                             @toggleShowPreview="toggleShowPreview" />
                     </div>
@@ -152,12 +127,12 @@ function onTagsUpdate(tags: string[]) {
                             v-if="!shared && !workflow.deleted"
                             id="rename-button"
                             v-b-tooltip.top
-                            :class="{ 'mouse-out': !showControls }"
                             variant="link"
                             size="sm"
-                            title="Rename workflow"
+                            class="inline-icon-button workflow-rename"
+                            title="Rename"
                             @click="showRename = !showRename">
-                            <FontAwesomeIcon :icon="faPen" />
+                            <FontAwesomeIcon :icon="faPen" fixed-width />
                         </BButton>
                     </span>
                 </div>
@@ -180,20 +155,41 @@ function onTagsUpdate(tags: string[]) {
                         @tag-click="emit('tagClick', $event)" />
                 </div>
 
-                <div class="d-flex justify-content-end">
-                    <BButton
-                        v-if="!shared && !workflow.deleted"
-                        v-b-tooltip.hover
-                        size="sm"
-                        class="mx-2"
-                        title="Edit workflow"
-                        variant="outline-primary"
-                        @click="onEdit">
-                        <FontAwesomeIcon :icon="faEdit" />
-                        Edit
-                    </BButton>
-
-                    <WorkflowRunButton :id="workflow.id" />
+                <div class="workflow-card-actions">
+                    <WorkflowActionsExtend
+                        class="mr-2"
+                        :workflow="workflow"
+                        :published="publishedView"
+                        @refreshList="emit('refreshList', true)" />
+
+                    <div class="workflow-edit-run-buttons">
+                        <BButton
+                            v-if="!shared"
+                            v-b-tooltip.hover
+                            :disabled="workflow.deleted"
+                            size="sm"
+                            class="mr-2"
+                            :title="workflow.deleted ? 'You cannot edit a deleted workflow' : 'Edit'"
+                            variant="outline-primary"
+                            @click="onEdit">
+                            <FontAwesomeIcon :icon="faEdit" />
+                            Edit
+                        </BButton>
+
+                        <BButton
+                            v-else
+                            v-b-tooltip.hover
+                            size="sm"
+                            class="mr-2"
+                            title="Import this workflow to edit"
+                            variant="outline-primary"
+                            @click="onImport">
+                            <FontAwesomeIcon :icon="faUpload" />
+                            Import
+                        </BButton>
+
+                        <WorkflowRunButton :id="workflow.id" />
+                    </div>
                 </div>
             </div>
 
@@ -222,10 +218,21 @@ function onTagsUpdate(tags: string[]) {
 @import "theme/blue.scss";
 
 .workflow-card {
-    container-type: inline-size;
+    container: workflow-card / inline-size;
+
+    .workflow-rename {
+        display: none;
+    }
+
+    &:hover {
+        .workflow-rename {
+            display: inline-block;
+        }
+    }
 
     .workflow-card-container {
         display: flex;
+        gap: 0.5rem;
         flex-direction: column;
         justify-content: space-between;
         background-color: white;
@@ -236,6 +243,8 @@ function onTagsUpdate(tags: string[]) {
 
         .workflow-count-actions {
             display: flex;
+            align-self: baseline;
+            gap: 0.5rem;
         }
 
         .text-summary {
@@ -247,21 +256,36 @@ function onTagsUpdate(tags: string[]) {
             font-weight: bold;
         }
 
-        .mouse-out {
-            opacity: 0.5;
-        }
-
         .workflow-preview-modal {
             min-width: max-content;
         }
 
-        @container (min-width: 576px) {
+        .workflow-card-actions {
+            display: flex;
+            margin-top: 0.5rem;
+            justify-content: end;
+        }
+
+        @container (max-width: 576px) {
             .workflow-card-footer {
-                display: flex;
+                gap: 0.5rem;
                 flex-wrap: wrap;
                 align-items: center;
                 justify-content: space-between;
             }
+
+            .workflow-card-actions {
+                display: flex;
+                gap: 0.5rem;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+
+        @container (min-width: 576px, max-width: 768px) {
+            .workflow-card-actions {
+                justify-content: end;
+            }
         }
     }
 
@@ -275,14 +299,16 @@ function onTagsUpdate(tags: string[]) {
         }
 
         .workflow-count-actions {
+            width: 100%;
             align-items: baseline;
+            justify-content: end;
         }
     }
 
     @container (min-width: 768px) {
         .workflow-count-actions {
             align-items: end;
-            flex-direction: column;
+            flex-direction: column-reverse;
         }
 
         .hide-in-card {

From d24934b407848aa9f1d48e6c907aafd122a33e6f Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 11:55:11 +0000
Subject: [PATCH 041/104] update `WorkflowList`: replace dropped
 `AdvanceFiltering` wit `FilterMenu` and add `Show Bookmarked` filter

---
 .../src/components/Workflow/WorkflowList.vue  | 119 ++++++++++--------
 1 file changed, 67 insertions(+), 52 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 144a3595c74c..7290608415a9 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay } from "bootstrap-vue";
+import { filter } from "underscore";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -11,36 +12,16 @@ import { useAnimationFrameResizeObserver } from "@/composables/sensors/animation
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
-import { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
+import Filtering, { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
 
-import AdvancedFiltering from "@/components/Common/AdvancedFiltering.vue";
+import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
 
-library.add(faTrash);
-
-const filterOptions = [
-    {
-        filter: "name",
-        description: "Shows workflows with the given sequence of characters in their names.",
-    },
-    {
-        filter: "tag",
-        description:
-            "Shows workflows with the given workflow tag. You may also click on a tag to filter on that tag directly.",
-    },
-    {
-        filter: "is:importable",
-        description: "Shows importable workflows (this also means they have URL generated).",
-    },
-    {
-        filter: "is:deleted",
-        description: "Shows deleted workflows.",
-    },
-];
+library.add(faStar, faTrash);
 
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
@@ -56,14 +37,18 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter();
 const userStore = useUserStore();
 
-const validFilters = {
-    name: contains("name"),
-    tag: contains("tags", "tag", expandNameTag),
-    deleted: contains("deleted", "true", toBool),
-    published: equals("published", "true", toBool),
-    importable: contains("importable", "true", toBool),
-    shared_with_me: contains("shared_with_me", "true", toBool),
-};
+const validFilters = computed(() => {
+    return {
+        name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+        tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+        deleted: {
+            placeholder: "Filter on deleted workflows",
+            type: Boolean,
+            handler: equals("deleted", "deleted", toBool),
+            menuItem: false,
+        },
+    };
+});
 
 const limit = ref(50);
 const offset = ref(0);
@@ -94,7 +79,10 @@ const searchPlaceHolder = computed(() => {
     return placeHolder;
 });
 
-const filters = computed(() => advancedFiltering.value.filters);
+const filterText = ref("");
+const showAdvanced = ref(false);
+const showBookmarked = ref(false);
+const WorkflowFilters = new Filtering(validFilters.value);
 const published = computed(() => props.activeList === "published");
 const scrolledTop = computed(() => !isScrollable.value || arrived.top);
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
@@ -102,7 +90,6 @@ const showDeleted = computed(() => filterText.value.includes("is:deleted"));
 const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
-const filterText = computed(() => advancedFiltering.value && advancedFiltering.value.filterText);
 const noItems = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && !filterText.value);
 const noResults = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && filterText.value);
 
@@ -111,13 +98,13 @@ function updateFilter(newVal: string) {
 }
 
 function onTagClick(tag: { text: string }) {
-    updateFilter(filters.value.setFilterValue(filterText.value, "tag", tag.text));
+    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", tag.text);
 }
 
-async function load(overlayLoading = false) {
+async function load(overlayLoading = false, silentLoading = false) {
     if (overlayLoading) {
         overlay.value = true;
-    } else {
+    } else if (!silentLoading) {
         loading.value = true;
     }
 
@@ -132,7 +119,7 @@ async function load(overlayLoading = false) {
     }
 
     try {
-        workflows.value = await loadWorkflows({
+        const tmp = await loadWorkflows({
             sortBy: sortBy.value,
             sortDesc: sortDesc.value,
             limit: limit.value,
@@ -141,6 +128,16 @@ async function load(overlayLoading = false) {
             showPublished: published.value,
             skipStepCounts: true,
         });
+
+        let filteredWorkflows = showBookmarked.value
+            ? filter(tmp, (workflow: any) => workflow.show_in_tool_panel)
+            : tmp;
+
+        if (props.activeList === "my") {
+            filteredWorkflows = filter(filteredWorkflows, (w: any) => w.owner === userStore.currentUser?.username);
+        }
+
+        workflows.value = filteredWorkflows;
     } catch (e) {
         Toast.error(`Failed to load workflows: ${e}`);
     } finally {
@@ -151,19 +148,23 @@ async function load(overlayLoading = false) {
 
 function onToggleDeleted() {
     if (!showDeleted.value) {
-        updateFilter(`${filterText.value} is:deleted`);
+        filterText.value = `${filterText.value} is:deleted`;
     } else {
-        updateFilter(filterText.value.replace("is:deleted", "").trim());
+        filterText.value = filterText.value.replace("is:deleted", "").trim();
     }
 }
 
-watch([filterText, sortBy, sortDesc], () => {
+function onToggleBookmarked() {
+    showBookmarked.value = !showBookmarked.value;
+}
+
+watch([filterText, sortBy, sortDesc, showBookmarked], () => {
     load(true);
 });
 
 onMounted(() => {
     if (router.currentRoute.query.owner) {
-        advancedFiltering.value.updateFilter(`${filterText.value} user:${router.currentRoute.query.owner}`.trim());
+        filterText.value = `${filterText.value} user:${router.currentRoute.query.owner}`.trim();
     }
 
     load();
@@ -179,21 +180,23 @@ onMounted(() => {
                 <WorkflowListActions />
             </div>
 
-            <BNav tabs fill>
-                <BNavItem :active="activeList === 'my'" to="/workflows/list">My workflows</BNavItem>
+            <BNav pills justified class="mb-2">
+                <BNavItem :active="activeList === 'my'" to="/workflows/list"> My workflows </BNavItem>
                 <BNavItem :active="sharedWithMe" to="/workflows/list_shared_with_me">
                     Workflows shared with me
                 </BNavItem>
                 <BNavItem :active="published" to="/workflows/list_published"> Public workflows </BNavItem>
             </BNav>
 
-            <AdvancedFiltering
-                ref="advancedFiltering"
-                advanced-mode
-                help-title="Workflows"
-                :filter-options="filterOptions"
-                :valid-filters="validFilters"
-                :search-place-holder="searchPlaceHolder" />
+            <FilterMenu
+                class="mb-2"
+                :filter-class="WorkflowFilters"
+                :filter-text.sync="filterText"
+                :loading="loading"
+                has-help
+                :placeholder="searchPlaceHolder"
+                :show-advanced.sync="showAdvanced"
+                @updateFilter="updateFilter" />
 
             <ListHeader ref="listHeader" show-view-toggle>
                 <template v-slot:extra-filter>
@@ -210,6 +213,18 @@ onMounted(() => {
                             <FontAwesomeIcon :icon="faTrash" />
                             Show deleted
                         </BButton>
+
+                        <BButton
+                            id="show-bookmarked"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="!showBookmarked ? 'Show bookmarked workflows' : 'Hide bookmarked workflows'"
+                            :pressed="showBookmarked"
+                            variant="outline-primary"
+                            @click="onToggleBookmarked">
+                            <FontAwesomeIcon :icon="faStar" />
+                            Show bookmarked
+                        </BButton>
                     </div>
                 </template>
             </ListHeader>
@@ -248,7 +263,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .workflows-list {
-    container-type: inline-size;
+    container: workflow-list / inline-size;
     overflow: auto;
 
     .workflows-list-header {

From 137874bc4c822d56f3efc642dbd1afc7b5743344 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Fri, 27 Oct 2023 12:01:02 +0000
Subject: [PATCH 042/104] fix `WorkflowCard` style

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

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 7d67f69719ad..8d0243f5c311 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -89,7 +89,7 @@ async function onTagsUpdate(tags: string[]) {
     <div class="workflow-card">
         <div class="workflow-card-container">
             <div>
-                <div class="d-flex justify-content-between align-items-center">
+                <div class="d-flex justify-content-between align-items-center mb-1">
                     <div>
                         <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
 
@@ -299,7 +299,6 @@ async function onTagsUpdate(tags: string[]) {
         }
 
         .workflow-count-actions {
-            width: 100%;
             align-items: baseline;
             justify-content: end;
         }

From 139cc4791ee17d4866695237354e94349d29151b Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:38:41 +0000
Subject: [PATCH 043/104] update `WorkflowRunButton` unit test with typescript

---
 .../Workflow/WorkflowRunButton.test.js        | 30 ------------
 .../Workflow/WorkflowRunButton.test.ts        | 47 +++++++++++++++++++
 .../components/Workflow/WorkflowRunButton.vue |  2 +-
 3 files changed, 48 insertions(+), 31 deletions(-)
 delete mode 100644 client/src/components/Workflow/WorkflowRunButton.test.js
 create mode 100644 client/src/components/Workflow/WorkflowRunButton.test.ts

diff --git a/client/src/components/Workflow/WorkflowRunButton.test.js b/client/src/components/Workflow/WorkflowRunButton.test.js
deleted file mode 100644
index 97ac7ddcdcfc..000000000000
--- a/client/src/components/Workflow/WorkflowRunButton.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import "jest-location-mock";
-
-import { shallowMount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-
-import WorkflowRunButton from "./WorkflowRunButton";
-
-const localVue = getLocalVue(true);
-const WORKFLOW_ID = "workflow_id123";
-
-describe("WorkflowRunButton.vue", () => {
-    let wrapper;
-
-    beforeEach(async () => {
-        const propsData = {
-            root: "/root/",
-            id: WORKFLOW_ID,
-        };
-        wrapper = shallowMount(WorkflowRunButton, {
-            propsData,
-            localVue,
-        });
-    });
-
-    it("should localize title text", async () => {
-        const selector = ROOT_COMPONENT.workflows.run_button({ id: WORKFLOW_ID }).selector;
-        expect(wrapper.find(selector).attributes("title")).toBeLocalizationOf("Run workflow");
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowRunButton.test.ts b/client/src/components/Workflow/WorkflowRunButton.test.ts
new file mode 100644
index 000000000000..5af0608d0ff5
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowRunButton.test.ts
@@ -0,0 +1,47 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+
+import { generateRandomString } from "./test-utils";
+
+import WorkflowRunButton from "./WorkflowRunButton.vue";
+
+const localVue = getLocalVue();
+
+const WORKFLOW_ID = generateRandomString();
+const WORKFLOW_RUN_BUTTON_SELECTOR = `[data-workflow-run="${WORKFLOW_ID}"]`;
+
+async function mountWorkflowRunButton(props?: { id: string; full?: boolean }) {
+    const mockRouter = {
+        push: jest.fn(),
+    };
+
+    const wrapper = shallowMount(WorkflowRunButton as object, {
+        propsData: { ...props },
+        localVue,
+        mocks: {
+            $router: mockRouter,
+        },
+    });
+
+    return { wrapper };
+}
+
+describe("WorkflowRunButton.vue", () => {
+    it("should render button with icon", async () => {
+        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
+
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).exists()).toBeTruthy();
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).attributes("title")).toBe("Run workflow");
+        expect(wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).text()).toBe("");
+    });
+
+    it("should redirect to workflow run page", async () => {
+        const { wrapper } = await mountWorkflowRunButton({ id: WORKFLOW_ID });
+
+        await wrapper.find(WORKFLOW_RUN_BUTTON_SELECTOR).trigger("click");
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.$router.push).toHaveBeenCalledWith(`/workflows/run?id=${WORKFLOW_ID}`);
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
index 795e583bdb95..fb1b20ff219d 100644
--- a/client/src/components/Workflow/WorkflowRunButton.vue
+++ b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -31,6 +31,6 @@ function ExecuteWorkflow() {
         size="sm"
         @click.stop="ExecuteWorkflow">
         <FontAwesomeIcon :icon="faPlay" />
-        <span v-if="full">Run</span>
+        <span v-if="full" v-localize>Run</span>
     </BButton>
 </template>

From 6a8a0cfa30e7c043bc2422f65dd08de279dcc231 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:39:02 +0000
Subject: [PATCH 044/104] fix `InvocationsList` unit test

---
 .../Workflow/InvocationsList.test.js          | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index 9799dbbb17c3..389035e52c31 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -6,20 +6,16 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import { getLocalVue } from "tests/jest/helpers";
-import VueRouter from "vue-router";
 
 import InvocationsList from "./InvocationsList";
 import mockInvocationData from "./test/json/invocation.json";
 
 const localVue = getLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
 
 const pinia = createTestingPinia();
 describe("InvocationsList.vue", () => {
     let axiosMock;
     let wrapper;
-    let $router;
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
@@ -138,6 +134,9 @@ describe("InvocationsList.vue", () => {
             axiosMock
                 .onGet("/api/invocations", { params: { limit: 50, offset: 0, include_terminal: false } })
                 .reply(200, [mockInvocationData], { total_matches: "1" });
+            const mockRouter = {
+                push: jest.fn(),
+            };
             const propsData = {
                 ownerGrid: false,
                 loading: false,
@@ -164,9 +163,10 @@ describe("InvocationsList.vue", () => {
                 },
                 localVue,
                 pinia,
-                router,
+                mocks: {
+                    $router: mockRouter,
+                },
             });
-            $router = wrapper.vm.$router;
         });
 
         it("renders one row", async () => {
@@ -202,10 +202,9 @@ describe("InvocationsList.vue", () => {
         });
 
         it("calls executeWorkflow", async () => {
-            const mockMethod = jest.fn();
-            $router.push = mockMethod;
-            await wrapper.find(".workflow-run").trigger("click");
-            expect(mockMethod).toHaveBeenCalledWith("/workflows/run?id=workflowId");
+            await wrapper.find('[data-workflow-run="workflowId"').trigger("click");
+            expect(wrapper.vm.$router.push).toHaveBeenCalledTimes(1);
+            expect(wrapper.vm.$router.push).toHaveBeenCalledWith("/workflows/run?id=workflowId");
         });
 
         it("should not render pager", async () => {

From 19140c7c92637e36148ab9ace2c74256efd589aa Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:40:40 +0000
Subject: [PATCH 045/104] update `WorkflowList` unit test with typescript

---
 .../components/Workflow/WorkflowList.test.js  | 264 ------------------
 .../components/Workflow/WorkflowList.test.ts  | 110 ++++++++
 .../src/components/Workflow/WorkflowList.vue  |   7 +-
 3 files changed, 114 insertions(+), 267 deletions(-)
 delete mode 100644 client/src/components/Workflow/WorkflowList.test.js
 create mode 100644 client/src/components/Workflow/WorkflowList.test.ts

diff --git a/client/src/components/Workflow/WorkflowList.test.js b/client/src/components/Workflow/WorkflowList.test.js
deleted file mode 100644
index 4b07236eb091..000000000000
--- a/client/src/components/Workflow/WorkflowList.test.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import { createTestingPinia } from "@pinia/testing";
-import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import { formatDistanceToNow, parseISO } from "date-fns";
-import flushPromises from "flush-promises";
-import { PiniaVuePlugin } from "pinia";
-import { getLocalVue, wait } from "tests/jest/helpers";
-import { computed } from "vue";
-
-import { useUserTagsStore } from "@/stores/userTagsStore";
-
-import Tag from "../TagsMultiselect/Tag";
-import Workflows from "../Workflow/WorkflowList";
-
-const localVue = getLocalVue();
-localVue.use(PiniaVuePlugin);
-
-const autocompleteTags = ["#named_user_tags", "abc", "my_tag"];
-jest.mock("@/stores/userTagsStore");
-useUserTagsStore.mockReturnValue({
-    userTags: computed(() => autocompleteTags),
-    addLocalTag: jest.fn(),
-});
-
-jest.mock("app");
-
-const sampleLongAnnotation =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\
-    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,\
-    sunt in culpa qui officia deserunt mollit anim id est laborum.";
-
-const mockWorkflowsData = [
-    {
-        id: "5f1915bcf9f35612",
-        update_time: "2021-01-04T17:40:58.604118",
-        create_time: "2021-01-04T17:40:58.407793",
-        name: "workflow name",
-        tags: ["tagmoo", "tagcow"],
-        annotations: [sampleLongAnnotation],
-        published: true,
-        show_in_tool_panel: true,
-        owner: "test",
-    },
-];
-
-const defaultApiParams = {
-    limit: 20,
-    offset: 0,
-    skip_step_counts: true,
-    sort_by: "update_time",
-    sort_desc: true,
-};
-
-const debounceDelay = 500; // in ms - see FilterMenu.props.debounceDelay
-
-describe("WorkflowList.vue", () => {
-    let axiosMock;
-    let wrapper;
-
-    beforeEach(async () => {
-        axiosMock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-        axiosMock.restore();
-    });
-
-    describe(" with empty workflow list", () => {
-        beforeEach(async () => {
-            axiosMock.onAny().reply(200, [], { total_matches: "0" });
-            const propsData = {};
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-        });
-
-        it("no invocations message should be shown when not loading", async () => {
-            expect(wrapper.find("#no-workflows").exists()).toBe(true);
-        });
-    });
-
-    describe(" with server error", () => {
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", { params: { search: "", ...defaultApiParams } })
-                .reply(403, { err_msg: "this is a problem" });
-            const propsData = {};
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("renders error message", async () => {
-            expect(wrapper.find(".index-grid-message").text()).toContain("this is a problem");
-        });
-    });
-
-    describe(" with single workflow", () => {
-        function findSearchBar(wrapper) {
-            return wrapper.find("[data-description='filter text input']");
-        }
-
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", { params: { search: "", ...defaultApiParams } })
-                .reply(200, mockWorkflowsData, { total_matches: "1" });
-            const propsData = {
-                inputDebounceDelay: 0,
-            };
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("no workflows message is gone", async () => {
-            expect(wrapper.find("#no-workflows").exists()).toBe(false);
-        });
-
-        it("renders one row", async () => {
-            let rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(1);
-            const row = rows[0];
-            const columns = row.findAll("td");
-            expect(columns.at(0).text()).toContain("workflow name");
-            expect(columns.at(1).text()).toContain("tagmoo");
-            expect(columns.at(1).text()).toContain("tagcow");
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(row.find(".sharing-indicator-published").exists()).toBe(true);
-
-            // test expand summary button for longer annotations
-            const annotationHead = sampleLongAnnotation.substr(0, 75);
-            const annotationTail = sampleLongAnnotation.substr(sampleLongAnnotation.length - 50);
-            expect(columns.at(0).text()).toContain(annotationHead);
-            expect(columns.at(0).text()).not.toContain(annotationTail);
-            expect(columns.at(0).find("a > .fa-chevron-down").exists()).toBe(true);
-            // click Down Arrow: full annotation should be visible in a b-card
-            await columns.at(0).find("a.text-summary-expand").trigger("click");
-            expect(columns.at(0).find("a > .fa-chevron-down").exists()).toBe(false);
-            rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(3);
-            const descriptionCard = rows[2].find("td");
-            expect(descriptionCard.text()).toContain(annotationTail);
-            expect(columns.at(0).find("a > .fa-chevron-up").exists()).toBe(true);
-        });
-
-        it("starts with an empty filter", async () => {
-            expect(findSearchBar(wrapper).element.value).toBe("");
-        });
-
-        it("fetched filtered results when search filter is used", async () => {
-            await findSearchBar(wrapper).setValue("mytext");
-            expect(findSearchBar(wrapper).element.value).toBe("mytext");
-            await wait(debounceDelay);
-            expect(wrapper.vm.filterText).toBe("mytext");
-        });
-
-        it("update filter when a tag is clicked", async () => {
-            const tags = wrapper.findAllComponents(Tag).wrappers;
-            expect(tags.length).toBe(2);
-            tags[0].trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
-        });
-
-        it("update filter when a tag is clicked only happens on first click", async () => {
-            const tags = wrapper.findAllComponents(Tag).wrappers;
-            expect(tags.length).toBe(2);
-            tags[0].trigger("click");
-            tags[0].trigger("click");
-            tags[0].trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
-        });
-
-        it("update filter when published icon is clicked", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            const row = rows[0];
-            row.find(".sharing-indicator-published").trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("is:published");
-        });
-
-        it("update filter when shared with me icon is clicked", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            const row = rows[0];
-            row.find(".fa-share-alt").trigger("click");
-            flushPromises();
-            expect(wrapper.vm.filterText).toBe("is:shared_with_me");
-        });
-    });
-
-    describe("published grid", () => {
-        beforeEach(async () => {
-            axiosMock
-                .onGet("/api/workflows", {
-                    params: {
-                        search: "is:published",
-                        show_published: true,
-                        show_shared: false,
-                        ...defaultApiParams,
-                    },
-                })
-                .reply(200, mockWorkflowsData, { total_matches: "1" });
-            const propsData = {
-                inputDebounceDelay: 0,
-                published: true,
-            };
-            wrapper = mount(Workflows, {
-                propsData,
-                localVue,
-                pinia: createTestingPinia(),
-                stubs: {
-                    icon: { template: "<div></div>" },
-                },
-            });
-            flushPromises();
-        });
-
-        it("should be error free", async () => {
-            const errorDiv = wrapper.find(".index-grid-message");
-            expect(errorDiv.text()).toBeFalsy();
-        });
-
-        it("renders one row", async () => {
-            const rows = wrapper.findAll("tbody > tr").wrappers;
-            expect(rows.length).toBe(1);
-            const row = rows[0];
-            const columns = row.findAll("td");
-            expect(columns.at(0).text()).toContain("workflow name");
-            expect(columns.at(1).text()).toContain("tagmoo");
-            expect(columns.at(1).text()).toContain("tagcow");
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-            expect(columns.at(2).text()).toBe(
-                formatDistanceToNow(parseISO(`${mockWorkflowsData[0].update_time}Z`), { addSuffix: true })
-            );
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowList.test.ts b/client/src/components/Workflow/WorkflowList.test.ts
new file mode 100644
index 000000000000..bb0b8e741471
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowList.test.ts
@@ -0,0 +1,110 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, shallowMount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { setActivePinia } from "pinia";
+
+import { mockFetcher } from "@/schema/__mocks__";
+import { useUserStore } from "@/stores/userStore";
+
+import { generateRandomWorkflowList } from "./test-utils";
+
+import WorkflowList from "./WorkflowList.vue";
+
+jest.mock("@/schema");
+
+const localVue = getLocalVue();
+
+const FAKE_USER_ID = "fake_user_id";
+const FAKE_USERNAME = "fake_username";
+const FAKE_USER_EMAIL = "fake_user_email";
+const FAKE_USER = {
+    id: FAKE_USER_ID,
+    email: FAKE_USER_EMAIL,
+    tags_used: [],
+    isAnonymous: false,
+    username: FAKE_USERNAME,
+    total_disk_usage: 0,
+};
+
+async function mountWorkflowList() {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const mockRouter = {
+        push: jest.fn(),
+        currentRoute: {
+            query: {},
+        },
+    };
+
+    const wrapper = mount(WorkflowList as object, {
+        localVue,
+        pinia,
+        mocks: {
+            $router: mockRouter,
+        },
+    });
+
+    const userStore = useUserStore();
+    userStore.currentUser = FAKE_USER;
+
+    await flushPromises();
+
+    return wrapper;
+}
+
+describe("WorkflowList", () => {
+    afterEach(() => {
+        mockFetcher.clearMocks();
+    });
+
+    it("render empty workflow list", async () => {
+        mockFetcher.path("/api/workflows").method("get").mock({ data: [] });
+
+        const wrapper = await mountWorkflowList();
+
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(0);
+        expect(wrapper.find("#workflow-list-empty").exists()).toBe(true);
+    });
+
+    it("render workflow list", async () => {
+        const FAKE_WORKFLOWS = generateRandomWorkflowList(FAKE_USERNAME, 10);
+
+        mockFetcher.path("/api/workflows").method("get").mock({ data: FAKE_WORKFLOWS });
+
+        const wrapper = await mountWorkflowList();
+
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(10);
+        expect(wrapper.find("#workflow-list-empty").exists()).toBe(false);
+
+        const nonDeletedWorkflows = FAKE_WORKFLOWS.filter((w) => !w.deleted);
+        expect(wrapper.findAll(".workflow-card")).toHaveLength(nonDeletedWorkflows.length);
+    });
+
+    it("toggle show deleted workflows", async () => {
+        const FAKE_WORKFLOWS = generateRandomWorkflowList(FAKE_USERNAME, 10);
+        FAKE_WORKFLOWS.forEach((w) => (w.deleted = true));
+
+        mockFetcher.path("/api/workflows").method("get").mock({ data: FAKE_WORKFLOWS });
+
+        const wrapper = await mountWorkflowList();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("");
+
+        const showDeletedButton = wrapper.find("#show-deleted");
+        expect(showDeletedButton.exists()).toBe(true);
+        showDeletedButton.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("is:deleted");
+
+        expect(showDeletedButton.exists()).toBe(true);
+        showDeletedButton.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        expect((wrapper.find("#workflow-list-filter input").element as HTMLInputElement).value).toBe("");
+    });
+});
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 7290608415a9..14051cc7d2e6 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -148,7 +148,7 @@ async function load(overlayLoading = false, silentLoading = false) {
 
 function onToggleDeleted() {
     if (!showDeleted.value) {
-        filterText.value = `${filterText.value} is:deleted`;
+        filterText.value = `${filterText.value} is:deleted`.trim();
     } else {
         filterText.value = filterText.value.replace("is:deleted", "").trim();
     }
@@ -189,6 +189,7 @@ onMounted(() => {
             </BNav>
 
             <FilterMenu
+                id="workflow-list-filter"
                 class="mb-2"
                 :filter-class="WorkflowFilters"
                 :filter-text.sync="filterText"
@@ -234,11 +235,11 @@ onMounted(() => {
             <LoadingSpan />
         </BAlert>
 
-        <BAlert v-else-if="!loading && !overlay && noItems" variant="info" show>
+        <BAlert v-else-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>
 
-        <BAlert v-else-if="!loading && !overlay && noResults" variant="info" show>
+        <BAlert v-else-if="!loading && !overlay && noResults" id="no-workflow-found" variant="info" show>
             No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
         </BAlert>
 

From e05c467019713e578028ed85adedf6d91349e7c9 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:41:14 +0000
Subject: [PATCH 046/104] fix `userStore` unit test error on `username` field

---
 client/src/stores/userStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 8aca856ed384..c454b2d0aeff 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -19,12 +19,12 @@ export interface User extends QuotaUsageResponse {
     tags_used: string[];
     isAnonymous: false;
     is_admin?: boolean;
-    username: string;
+    username?: string;
 }
 
 export interface AnonymousUser {
     isAnonymous: true;
-    username: string;
+    username?: string;
     is_admin?: false;
 }
 

From 22e555bf75d3264148d31ff61237e32941d6484b Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:41:55 +0000
Subject: [PATCH 047/104] use danger variant button on delete `Workflow`

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

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index d0409d4ae2bf..82ab28ce7418 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -98,7 +98,12 @@ async function onToggleBookmark(checked: boolean) {
 }
 
 async function onDelete() {
-    const confirmed = await confirm("Are you sure you want to delete this workflow?", "Delete workflow");
+    const confirmed = await confirm("Are you sure you want to delete this workflow?", {
+        title: "Delete workflow",
+        okTitle: "Delete",
+        okVariant: "danger",
+    });
+
     if (confirmed) {
         await deleteWorkflow(props.workflow.id);
         emit("refreshList", true);

From 31d9e574a2cd22d9707427e20ccddd8343c55d85 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:43:26 +0000
Subject: [PATCH 048/104] create `test-utils` for `Workflow`

---
 client/src/components/Workflow/test-utils.ts | 39 ++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 client/src/components/Workflow/test-utils.ts

diff --git a/client/src/components/Workflow/test-utils.ts b/client/src/components/Workflow/test-utils.ts
new file mode 100644
index 000000000000..2d766649b4be
--- /dev/null
+++ b/client/src/components/Workflow/test-utils.ts
@@ -0,0 +1,39 @@
+interface Workflow {
+    id: string;
+    name: string;
+    owner: string;
+    tags: string[];
+    deleted: boolean;
+    published: boolean;
+    description: string;
+    create_time: string;
+    update_time: string;
+    annotations: string[];
+    show_in_tool_panel: boolean;
+    latest_workflow_uuid: string;
+}
+
+export function generateRandomString() {
+    return Math.random().toString(36).substring(7) as string;
+}
+
+export function generateRandomWorkflow(owner: string): Workflow {
+    return {
+        id: "workflow-" + Math.floor(Math.random() * 1000000),
+        name: generateRandomString(),
+        owner: owner,
+        tags: Array.from({ length: Math.floor(Math.random() * 10) }, () => generateRandomString()),
+        deleted: false,
+        published: Math.random() > 0.5,
+        description: generateRandomString(),
+        create_time: new Date(Date.now() + 1).toISOString(),
+        update_time: new Date(Date.now() + 2).toISOString(),
+        annotations: Array.from({ length: Math.floor(Math.random() * 2) }, () => generateRandomString()),
+        show_in_tool_panel: Math.random() > 0.5,
+        latest_workflow_uuid: generateRandomString(),
+    };
+}
+
+export function generateRandomWorkflowList(owner: string, count: number): Workflow[] {
+    return Array.from({ length: count }, () => generateRandomWorkflow(owner));
+}

From 82e142eb9984f12f0c5448c8d31bc552c808d9ab Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:44:48 +0000
Subject: [PATCH 049/104] drop unused components: `WorkflowBookmark`,
 `WorkflowDropdown` and `WorkflowActions`

---
 .../components/Workflow/WorkflowBookmark.vue  |  45 ---
 .../Workflow/WorkflowDropdown.test.js         | 145 ---------
 .../components/Workflow/WorkflowDropdown.vue  | 276 ------------------
 .../Workflow/WorkflowIndexActions.test.js     |  51 ----
 .../Workflow/WorkflowIndexActions.vue         |  64 ----
 5 files changed, 581 deletions(-)
 delete mode 100644 client/src/components/Workflow/WorkflowBookmark.vue
 delete mode 100644 client/src/components/Workflow/WorkflowDropdown.test.js
 delete mode 100644 client/src/components/Workflow/WorkflowDropdown.vue
 delete mode 100644 client/src/components/Workflow/WorkflowIndexActions.test.js
 delete mode 100644 client/src/components/Workflow/WorkflowIndexActions.vue

diff --git a/client/src/components/Workflow/WorkflowBookmark.vue b/client/src/components/Workflow/WorkflowBookmark.vue
deleted file mode 100644
index 0a58b0028f40..000000000000
--- a/client/src/components/Workflow/WorkflowBookmark.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <BLink v-b-tooltip.hover :title="title" class="workflow-bookmark-link" @click="onClick">
-        <FontAwesomeIcon v-if="checked" :icon="['fas', 'star']" />
-        <FontAwesomeIcon v-else :icon="['far', 'star']" />
-    </BLink>
-</template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
-import { faStar } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BLink, VBTooltip } from "bootstrap-vue";
-
-library.add(faStar, farStar);
-
-const CHECKED_DESCRIPTION = "Remove bookmark";
-const UNCHECKED_DESCRIPTION = "Add a bookmark. This workflow will appear in the left tool panel.";
-
-export default {
-    components: {
-        BLink,
-        FontAwesomeIcon,
-    },
-    directives: {
-        VBTooltip,
-    },
-    props: {
-        checked: {
-            type: Boolean,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            return this.checked ? CHECKED_DESCRIPTION : UNCHECKED_DESCRIPTION;
-        },
-    },
-    methods: {
-        onClick() {
-            this.$emit("bookmark", !this.checked);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Workflow/WorkflowDropdown.test.js b/client/src/components/Workflow/WorkflowDropdown.test.js
deleted file mode 100644
index 374127218fc2..000000000000
--- a/client/src/components/Workflow/WorkflowDropdown.test.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import flushPromises from "flush-promises";
-import { createPinia, PiniaVuePlugin } from "pinia";
-import { useUserStore } from "stores/userStore";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-
-import WorkflowDropdown from "./WorkflowDropdown";
-
-const localVue = getLocalVue(true);
-localVue.use(PiniaVuePlugin);
-
-const TEST_WORKFLOW_NAME = "my workflow";
-const TEST_WORKFLOW_DESCRIPTION = "my cool workflow description";
-const TEST_WORKFLOW_ID = "workflowid123";
-const TEST_WORKFLOW_OWNER = "test";
-
-const descriptionlessWorkflow = {
-    name: TEST_WORKFLOW_NAME,
-    id: TEST_WORKFLOW_ID,
-    owner: TEST_WORKFLOW_OWNER,
-};
-const basicWorkflow = { description: TEST_WORKFLOW_DESCRIPTION, ...descriptionlessWorkflow };
-const sharedWorkflow = { shared: true, ...basicWorkflow };
-
-describe("WorkflowDropdown.vue", () => {
-    let wrapper;
-    let propsData;
-
-    function initWrapperForWorkflow(workflow, isAnonymous = true) {
-        propsData = {
-            root: "/root/",
-            workflow: workflow,
-        };
-        wrapper = mount(WorkflowDropdown, {
-            propsData,
-            localVue,
-            pinia: createPinia(),
-        });
-        if (!isAnonymous) {
-            const userStore = useUserStore();
-            userStore.currentUser = { email: "my@email", id: 1 };
-        }
-    }
-
-    function workflowOptions() {
-        return wrapper.findAll(".dropdown-menu .dropdown-item");
-    }
-
-    describe("for workflows owned by user", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(basicWorkflow);
-        });
-
-        it("should not display source metadata if not present", async () => {
-            expect(wrapper.find(ROOT_COMPONENT.workflows.trs_icon.selector).exists()).toBeFalsy();
-            expect(wrapper.find(ROOT_COMPONENT.workflows.external_link.selector).exists()).toBeFalsy();
-        });
-
-        it("should display name and description", async () => {
-            expect(wrapper.find(".workflow-dropdown-name").text()).toBe(TEST_WORKFLOW_NAME);
-            expect(wrapper.find(".workflow-dropdown-description").text()).toBe(TEST_WORKFLOW_DESCRIPTION);
-        });
-
-        it("should provide all owner workflow options", () => {
-            expect(workflowOptions().length).toBeGreaterThan(2);
-        });
-    });
-
-    describe("workflows without annotations", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(descriptionlessWorkflow);
-        });
-
-        it("should display name but not description", async () => {
-            expect(wrapper.find(".workflow-dropdown-name").text()).toBe(TEST_WORKFLOW_NAME);
-            expect(wrapper.find(".workflow-dropdown-description").exists()).toBeFalsy();
-        });
-    });
-
-    describe("for shared workflows", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(sharedWorkflow);
-        });
-
-        it("should provide a specific options to anon users", () => {
-            expect(workflowOptions().length).toBe(2);
-            expect(workflowOptions().at(0).text()).toBeLocalizationOf("Download");
-            expect(workflowOptions().at(1).text()).toBeLocalizationOf("View");
-        });
-    });
-
-    describe("for shared workflows", () => {
-        beforeEach(async () => {
-            initWrapperForWorkflow(sharedWorkflow, false);
-        });
-
-        it("should provide a specific options to logged in users", () => {
-            expect(workflowOptions().length).toBe(3);
-            expect(workflowOptions().at(0).text()).toBeLocalizationOf("Copy");
-            expect(workflowOptions().at(1).text()).toBeLocalizationOf("Download");
-            expect(workflowOptions().at(2).text()).toBeLocalizationOf("View");
-        });
-    });
-
-    describe("workflow clicking workflow deletion", () => {
-        let axiosMock;
-
-        async function mountAndDelete() {
-            initWrapperForWorkflow(basicWorkflow);
-            await wrapper.vm.onDelete();
-            await flushPromises();
-        }
-
-        beforeEach(async () => {
-            axiosMock = new MockAdapter(axios);
-            axiosMock.onDelete("/api/workflows/workflowid123").reply(202, "deleted...");
-            axiosMock.onPost("/api/workflows/workflowid123/undelete").reply(204, "restored...");
-        });
-
-        afterEach(() => {
-            axiosMock.restore();
-        });
-
-        it("should fire deletion API request upon remove action", async () => {
-            await mountAndDelete();
-            const emitted = wrapper.emitted();
-            expect(emitted["onRemove"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][0][0]).toEqual("deleted...");
-        });
-
-        it("should restore previously deleted workflows", async () => {
-            await mountAndDelete();
-            const emitted = wrapper.emitted();
-            expect(emitted["onRemove"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][0][0]).toEqual("deleted...");
-            await wrapper.vm.onRestore();
-            await flushPromises();
-            expect(emitted["onRestore"][0][0]).toEqual(TEST_WORKFLOW_ID);
-            expect(emitted["onSuccess"][1][0]).toEqual("restored...");
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowDropdown.vue b/client/src/components/Workflow/WorkflowDropdown.vue
deleted file mode 100644
index d308a1aea524..000000000000
--- a/client/src/components/Workflow/WorkflowDropdown.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-    <div>
-        <b-link
-            aria-expanded="false"
-            class="workflow-dropdown font-weight-bold"
-            data-toggle="dropdown"
-            :data-workflow-dropdown="workflow.id"
-            draggable
-            @dragstart="onDragStart"
-            @dragend="onDragEnd">
-            <Icon icon="caret-down" class="fa-lg" />
-            <span class="workflow-dropdown-name">{{ workflow.name }}</span>
-            <span
-                v-if="sourceType.includes('trs')"
-                v-b-tooltip.hover
-                aria-haspopup="true"
-                :title="getWorkflowTooltip(sourceType, workflow)">
-                <Icon fixed-width icon="check" class="mr-1 workflow-trs-icon" />
-            </span>
-            <span
-                v-if="sourceType == 'url'"
-                v-b-tooltip.hover
-                aria-haspopup="true"
-                :title="getWorkflowTooltip(sourceType, workflow)">
-                <Icon fixed-width icon="link" class="mr-1 workflow-external-link" />
-            </span>
-        </b-link>
-        <p v-if="workflow.description" class="workflow-dropdown-description">
-            <TextSummary :description="workflow.description" :show-details.sync="showDetails" />
-        </p>
-        <div class="dropdown-menu" aria-labelledby="workflow-dropdown">
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlEdit)"
-                @click.prevent="$router.push(urlEdit)">
-                <Icon fixed-width icon="edit" class="mr-1" />
-                <span v-localize>Edit</span>
-            </a>
-            <a v-if="!isDeleted && !isAnonymous" class="dropdown-item" href="#" @click.prevent="onCopy">
-                <Icon fixed-width icon="copy" class="mr-1" />
-                <span v-localize>Copy</span>
-            </a>
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlInvocations)"
-                @click.prevent="$router.push(urlInvocations)">
-                <Icon fixed-width icon="sitemap" class="fa-rotate-270 mr-1" />
-                <span v-localize>Invocations</span>
-            </a>
-            <a v-if="!isDeleted" class="dropdown-item" :href="urlDownload">
-                <Icon fixed-width icon="download" class="mr-1" />
-                <span v-localize>Download</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" href="#" @click.prevent="onRename">
-                <Icon fixed-width icon="signature" class="mr-1" />
-                <span v-localize>Rename</span>
-            </a>
-            <a
-                v-if="!readOnly && !isDeleted"
-                class="dropdown-item"
-                href="#"
-                @keypress="$router.push(urlShare)"
-                @click.prevent="$router.push(urlShare)">
-                <Icon fixed-width icon="share-alt" class="mr-1" />
-                <span v-localize>Share</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" :href="urlExport">
-                <Icon fixed-width icon="file-export" class="mr-1" />
-                <span v-localize>Export</span>
-            </a>
-            <a v-if="!isDeleted" class="dropdown-item" :href="urlView">
-                <Icon fixed-width icon="eye" class="mr-1" />
-                <span v-localize>View</span>
-            </a>
-            <a v-if="sourceLabel && !isDeleted" class="dropdown-item" target="_blank" :href="sourceUrl">
-                <Icon fixed-width icon="external-link-alt" class="mr-1" />
-                <span v-localize>{{ sourceLabel }}</span>
-            </a>
-            <a v-if="!readOnly && !isDeleted" class="dropdown-item" href="#" @click.prevent="onDelete">
-                <Icon fixed-width icon="trash" class="mr-1" />
-                <span v-localize>Delete</span>
-            </a>
-            <a v-if="isDeleted" class="dropdown-item" href="#" @click.prevent="onRestore">
-                <Icon fixed-width icon="trash-restore" class="mr-1" />
-                <span v-localize>Restore</span>
-            </a>
-        </div>
-    </div>
-</template>
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faEdit, faSignature, faTimes } from "@fortawesome/free-solid-svg-icons";
-import TextSummary from "components/Common/TextSummary";
-import { mapState } from "pinia";
-import { withPrefix } from "utils/redirect";
-
-import { useUserStore } from "@/stores/userStore";
-import { clearDrag, setDrag } from "@/utils/setDrag.js";
-
-import { Services } from "./services";
-
-library.add(faCaretDown);
-library.add(faSignature);
-library.add(faTimes);
-library.add(faEdit);
-
-export default {
-    components: {
-        TextSummary,
-    },
-    props: {
-        workflow: { type: Object, required: true },
-        detailsShowing: { type: Boolean, default: false },
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        showDetails: {
-            get() {
-                return this.detailsShowing;
-            },
-            set() {
-                this.$emit("toggleDetails");
-            },
-        },
-        urlEdit() {
-            return `/workflows/edit?id=${this.workflow.id}`;
-        },
-        urlDownload() {
-            return withPrefix(`/api/workflows/${this.workflow.id}/download?format=json-download`);
-        },
-        urlShare() {
-            return `/workflows/sharing?id=${this.workflow.id}`;
-        },
-        urlExport() {
-            return withPrefix(`/workflows/export?id=${this.workflow.id}`);
-        },
-        urlView() {
-            return withPrefix(`/published/workflow?id=${this.workflow.id}`);
-        },
-        urlInvocations() {
-            return `/workflows/${this.workflow.id}/invocations`;
-        },
-        urlViewShared() {
-            return withPrefix(
-                `/workflow/display_by_username_and_slug?username=${this.workflow.owner}&slug=${encodeURIComponent(
-                    this.workflow.slug
-                )}`
-            );
-        },
-        readOnly() {
-            return !!this.workflow.shared;
-        },
-        isDeleted() {
-            return this.workflow.deleted;
-        },
-        sourceUrl() {
-            if (this.workflow.source_metadata?.url) {
-                return this.workflow.source_metadata.url;
-            } else if (this.workflow.source_metadata?.trs_server) {
-                if (this.workflow.source_metadata?.trs_server == "dockstore") {
-                    return `https://dockstore.org/workflows${this.workflow.source_metadata.trs_tool_id.slice(9)}`;
-                } else {
-                    // TODO: add WorkflowHub
-                    return null;
-                }
-            } else {
-                return null;
-            }
-        },
-        sourceLabel() {
-            if (this.workflow.source_metadata?.url) {
-                return "View external link";
-            } else if (this.workflow.source_metadata?.trs_server == "dockstore") {
-                return "View on Dockstore";
-            } else {
-                // TODO: add WorkflowHub
-                return null;
-            }
-        },
-        sourceType() {
-            if (this.workflow.source_metadata?.url) {
-                return "url";
-            } else if (this.workflow.source_metadata?.trs_server) {
-                return `trs_${this.workflow.source_metadata?.trs_server}`;
-            } else {
-                return "";
-            }
-        },
-    },
-    created() {
-        this.services = new Services();
-    },
-    methods: {
-        onCopy: function () {
-            this.services
-                .copyWorkflow(this.workflow)
-                .then((newWorkflow) => {
-                    this.$emit("onAdd", newWorkflow);
-                    this.$emit(
-                        "onSuccess",
-                        `Successfully copied workflow '${this.workflow.name}' to '${newWorkflow.name}'.`
-                    );
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        onDelete: function () {
-            const id = this.workflow.id;
-            this.services
-                .deleteWorkflow(id)
-                .then((message) => {
-                    this.$emit("onRemove", id);
-                    this.$emit("onSuccess", message);
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        onDragStart: function (evt) {
-            setDrag(evt, this.workflow);
-        },
-        onDragEnd: function () {
-            clearDrag();
-        },
-        onRename: function () {
-            const id = this.workflow.id;
-            const name = this.workflow.name;
-            const newName = window.prompt(`Enter a new name for workflow '${name}'`, name);
-            if (newName) {
-                const data = { name: newName };
-                this.services
-                    .updateWorkflow(id, data)
-                    .then(() => {
-                        this.$emit("onUpdate", id, data);
-                        this.$emit("onSuccess", `Successfully changed name of workflow '${name}' to '${newName}'.`);
-                    })
-                    .catch((error) => {
-                        this.$emit("onError", error);
-                    });
-            }
-        },
-        onRestore: function () {
-            const id = this.workflow.id;
-            this.services
-                .undeleteWorkflow(id)
-                .then((message) => {
-                    this.$emit("onRestore", id);
-                    this.$emit("onSuccess", message);
-                })
-                .catch((error) => {
-                    this.$emit("onError", error);
-                });
-        },
-        getWorkflowTooltip: function (sourceType, workflow) {
-            let tooltip = "";
-            if (sourceType.includes("trs")) {
-                tooltip = `Imported from TRS ID (version: ${workflow.source_metadata.trs_version_id})`;
-            } else if (sourceType == "url") {
-                tooltip = `Imported from ${workflow.source_metadata.url}`;
-            }
-            return tooltip;
-        },
-    },
-};
-</script>
-
-<style scoped>
-.workflow-trs-icon {
-    color: green;
-}
-</style>
diff --git a/client/src/components/Workflow/WorkflowIndexActions.test.js b/client/src/components/Workflow/WorkflowIndexActions.test.js
deleted file mode 100644
index 9704a168c3db..000000000000
--- a/client/src/components/Workflow/WorkflowIndexActions.test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import "jest-location-mock";
-
-import { createTestingPinia } from "@pinia/testing";
-import { shallowMount } from "@vue/test-utils";
-import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
-import { ROOT_COMPONENT } from "utils/navigation";
-import VueRouter from "vue-router";
-
-import WorkflowIndexActions from "./WorkflowIndexActions";
-
-const localVue = getLocalVue(true);
-localVue.use(VueRouter);
-localVue.use(PiniaVuePlugin);
-
-const router = new VueRouter();
-
-function getCurrentPath($router) {
-    return $router.history.current.path;
-}
-
-describe("WorkflowIndexActions", () => {
-    let wrapper;
-    let $router;
-
-    beforeEach(async () => {
-        wrapper = shallowMount(WorkflowIndexActions, {
-            localVue,
-            router,
-            pinia: createTestingPinia(),
-        });
-        $router = wrapper.vm.$router;
-    });
-
-    describe("naviation", () => {
-        it("should create a workflow when create is clicked", async () => {
-            await wrapper.find(ROOT_COMPONENT.workflows.new_button.selector).trigger("click");
-            expect(getCurrentPath($router)).toBe("/workflows/edit");
-        });
-
-        it("should import a workflow when create is clicked", async () => {
-            await wrapper.find(ROOT_COMPONENT.workflows.import_button.selector).trigger("click");
-            expect(getCurrentPath($router)).toBe("/workflows/import");
-        });
-
-        it("should localize button text", async () => {
-            expect(wrapper.find(ROOT_COMPONENT.workflows.new_button.selector).text()).toBeLocalizationOf("Create");
-            expect(wrapper.find(ROOT_COMPONENT.workflows.import_button.selector).text()).toBeLocalizationOf("Import");
-        });
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowIndexActions.vue b/client/src/components/Workflow/WorkflowIndexActions.vue
deleted file mode 100644
index c067b483dcf7..000000000000
--- a/client/src/components/Workflow/WorkflowIndexActions.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <span>
-        <BButton
-            id="workflow-create"
-            v-b-tooltip.hover
-            aria-haspopup="true"
-            :title="createTitle"
-            :disabled="isAnonymous"
-            class="m-1"
-            @click="navigateToCreate">
-            <FontAwesomeIcon icon="plus" />
-            {{ "Create" | localize }}
-        </BButton>
-        <BButton
-            id="workflow-import"
-            v-b-tooltip.hover
-            aria-haspopup="true"
-            :title="importTitle"
-            :disabled="isAnonymous"
-            class="m-1"
-            @click="navigateToImport">
-            <FontAwesomeIcon icon="upload" />
-            {{ "Import" | localize }}
-        </BButton>
-    </span>
-</template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
-import { mapState } from "pinia";
-
-import { useUserStore } from "@/stores/userStore";
-
-library.add(faPlus, faUpload);
-
-export default {
-    components: {
-        BButton,
-        FontAwesomeIcon,
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        createTitle() {
-            return this.isAnonymous ? "Please log in or register to use this feature" : "Create a new workflow";
-        },
-        importTitle() {
-            return this.isAnonymous
-                ? "Please log in or register to use this feature"
-                : "Import a workflow from URL or registry";
-        },
-    },
-    methods: {
-        navigateToCreate: function () {
-            this.$router.push("/workflows/edit");
-        },
-        navigateToImport: function () {
-            this.$router.push("/workflows/import");
-        },
-    },
-};
-</script>

From 5bcfad6a2c7242397f255ac015cf271e49c1a66a Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 12:45:42 +0000
Subject: [PATCH 050/104] add left border for shared or trs workflows in
 `WorkflowCard`

---
 client/src/components/Workflow/WorkflowCard.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 8d0243f5c311..0333e9b25759 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -86,8 +86,10 @@ async function onTagsUpdate(tags: string[]) {
 </script>
 
 <template>
-    <div class="workflow-card">
-        <div class="workflow-card-container">
+    <div class="workflow-card" :data-workflow-id="workflow.id">
+        <div
+            class="workflow-card-container"
+            :class="{ 'workflow-shared-trs': !publishedView && (workflow.source_metadata || workflow.published) }">
             <div>
                 <div class="d-flex justify-content-between align-items-center mb-1">
                     <div>
@@ -289,6 +291,10 @@ async function onTagsUpdate(tags: string[]) {
         }
     }
 
+    .workflow-shared-trs {
+        border-left: 0.25rem solid $brand-primary;
+    }
+
     @container (max-width: 768px) {
         .hide-in-card {
             display: none !important;

From 7d306c6c5c4c75d9aca405785bff167e03e79318 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 13:51:48 +0000
Subject: [PATCH 051/104] fix `WorkflowList` unit test

---
 client/src/components/Workflow/WorkflowList.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.test.ts b/client/src/components/Workflow/WorkflowList.test.ts
index bb0b8e741471..b3a8bc915448 100644
--- a/client/src/components/Workflow/WorkflowList.test.ts
+++ b/client/src/components/Workflow/WorkflowList.test.ts
@@ -1,17 +1,17 @@
 import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
-import { mount, shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { setActivePinia } from "pinia";
 
-import { mockFetcher } from "@/schema/__mocks__";
+import { mockFetcher } from "@/api/schema/__mocks__";
 import { useUserStore } from "@/stores/userStore";
 
 import { generateRandomWorkflowList } from "./test-utils";
 
 import WorkflowList from "./WorkflowList.vue";
 
-jest.mock("@/schema");
+jest.mock("@/api/schema");
 
 const localVue = getLocalVue();
 

From 2347e7ad9b20878fc50bc76a1ea77ba07483182c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 14:57:39 +0100
Subject: [PATCH 052/104] fix import path error

---
 client/src/components/Workflow/workflows.services.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index f47f872bcfd9..3b291dab0453 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { fetcher } from "@/schema";
+import { fetcher } from "@/api/schema";
 import { useUserStore } from "@/stores/userStore";
 import { withPrefix } from "@/utils/redirect";
 

From a8ae824930a998a3ef5596b3932f81f9b015a1fd Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 16:07:12 +0000
Subject: [PATCH 053/104] create `LoginRequired` component

---
 .../src/components/Common/LoginRequired.vue   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 client/src/components/Common/LoginRequired.vue

diff --git a/client/src/components/Common/LoginRequired.vue b/client/src/components/Common/LoginRequired.vue
new file mode 100644
index 000000000000..c96c9b091491
--- /dev/null
+++ b/client/src/components/Common/LoginRequired.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { BPopover } from "bootstrap-vue";
+
+import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
+
+defineProps<{
+    title: string;
+    target: string;
+}>();
+
+const userStore = useUserStore();
+</script>
+
+<template>
+    <BPopover v-if="userStore.isAnonymous" :target="target" triggers="hover focus" placement="bottom">
+        <template v-slot:title> {{ title }} </template>
+        Please <a :href="withPrefix('/login')">log in or register</a> to use this feature.
+    </BPopover>
+</template>

From 8bcbd7c95e97d4851f6fbdb6f20f94841bf22902 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Thu, 9 Nov 2023 16:07:46 +0000
Subject: [PATCH 054/104] use `LoginRequired` in `WorkflowList` for my and
 shared with me tabs

---
 .../src/components/Workflow/WorkflowList.vue  | 19 ++++++++++++++++---
 client/src/entry/analysis/router.js           |  1 -
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 14051cc7d2e6..c1323f58b627 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -17,6 +17,7 @@ import Filtering, { contains, equals, expandNameTag, toBool } from "@/utils/filt
 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 LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
@@ -181,11 +182,23 @@ onMounted(() => {
             </div>
 
             <BNav pills justified class="mb-2">
-                <BNavItem :active="activeList === 'my'" to="/workflows/list"> My workflows </BNavItem>
-                <BNavItem :active="sharedWithMe" to="/workflows/list_shared_with_me">
+                <BNavItem id="my" :active="activeList === 'my'" :disabled="userStore.isAnonymous" to="/workflows/list">
+                    My workflows
+                    <LoginRequired v-if="userStore.isAnonymous" target="my" title="Manage your workflows" />
+                </BNavItem>
+
+                <BNavItem
+                    id="shared-with-me"
+                    :active="sharedWithMe"
+                    :disabled="userStore.isAnonymous"
+                    to="/workflows/list_shared_with_me">
                     Workflows shared with me
+                    <LoginRequired v-if="userStore.isAnonymous" target="shared-with-me" title="Manage your workflows" />
+                </BNavItem>
+
+                <BNavItem id="published" :active="published" to="/workflows/list_published">
+                    Public workflows
                 </BNavItem>
-                <BNavItem :active="published" to="/workflows/list_published"> Public workflows </BNavItem>
             </BNav>
 
             <FilterMenu
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 62703a10aa4d..ca2316718999 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -546,7 +546,6 @@ export function getRouter(Galaxy) {
                     {
                         path: "workflows/list_published",
                         component: WorkflowList,
-                        redirect: redirectAnon(),
                         props: (route) => ({
                             activeList: "published",
                             query: { ...route.query },

From 5f5e6b540d746beabe4e03ed98b94a3350af3104 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 15 Nov 2023 18:02:31 +0100
Subject: [PATCH 055/104] fix workflow bookmark showing in tools and update ids

---
 .../src/components/Workflow/WorkflowActions.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index 82ab28ce7418..ca5b72ee7859 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -14,6 +14,7 @@ import { BButton } from "bootstrap-vue";
 import { computed, type ComputedRef } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { getGalaxyInstance } from "@/app";
 import { deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
@@ -95,6 +96,17 @@ async function onToggleBookmark(checked: boolean) {
     });
     emit("refreshList", true);
     Toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
+    if (checked) {
+        getGalaxyInstance().config.stored_workflow_menu_entries.push({
+            id: props.workflow.id,
+            name: props.workflow.name,
+        });
+    } else {
+        const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
+            (w: any) => w.id === props.workflow.id
+        );
+        getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
+    }
 }
 
 async function onDelete() {
@@ -115,7 +127,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
     return [
         {
             if: !shared.value && !props.workflow.show_in_tool_panel,
-            id: "add-bookmark-button",
+            id: "workflow-bookmark-button",
             component: "async",
             title: "Add bookmarks",
             tooltip: "Add to bookmarks. This workflow will appear in the left tool panel.",
@@ -126,7 +138,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
         },
         {
             if: !shared.value && props.workflow.show_in_tool_panel,
-            id: "remove-bookmark-button",
+            id: "workflow-bookmark-button",
             component: "async",
             title: "Remove bookmark",
             tooltip: "Remove bookmark",
@@ -229,6 +241,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         <BDropdown
             id="workflow-actions-dropdown"
             v-b-tooltip.top
+            :data-workflow-actions-dropdown="workflow.id"
             right
             no-caret
             class="show-in-card"

From bc36b879a4496060f2e487966e467db78c3476d2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 15 Nov 2023 18:10:10 +0100
Subject: [PATCH 056/104] update workflow components ids

---
 client/src/components/Workflow/WorkflowActionsExtend.vue | 6 +++---
 client/src/components/Workflow/WorkflowCard.vue          | 1 +
 client/src/components/Workflow/WorkflowList.vue          | 1 +
 client/src/components/Workflow/WorkflowListActions.vue   | 4 +++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
index 0fcd393da6ca..f711230a9fa3 100644
--- a/client/src/components/Workflow/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -84,7 +84,7 @@ async function onRestore() {
         <BButtonGroup>
             <BButton
                 v-if="!isAnonymous && !shared && !workflow.deleted"
-                id="copy-button"
+                id="workflow-copy-button"
                 v-b-tooltip.hover
                 :size="buttonSize"
                 title="Copy"
@@ -96,7 +96,7 @@ async function onRestore() {
 
             <BButton
                 v-if="!workflow.deleted"
-                id="download-button"
+                id="workflow-download-button"
                 v-b-tooltip.hover
                 :size="buttonSize"
                 title="Download workflow in .ga format"
@@ -108,7 +108,7 @@ async function onRestore() {
 
             <BButton
                 v-if="!shared && !workflow.deleted"
-                id="share-button"
+                id="workflow-share-button"
                 v-b-tooltip.hover
                 :size="buttonSize"
                 title="Share"
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 0333e9b25759..76475b2ffd15 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -167,6 +167,7 @@ async function onTagsUpdate(tags: string[]) {
                     <div class="workflow-edit-run-buttons">
                         <BButton
                             v-if="!shared"
+                            id="workflow-edit-button"
                             v-b-tooltip.hover
                             :disabled="workflow.deleted"
                             size="sm"
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index c1323f58b627..1598faef5dcf 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -258,6 +258,7 @@ onMounted(() => {
 
         <BOverlay
             v-else
+            id="workflow-cards"
             :show="overlay"
             rounded="sm"
             class="cards-list mt-2"
diff --git a/client/src/components/Workflow/WorkflowListActions.vue b/client/src/components/Workflow/WorkflowListActions.vue
index 5e4932d92fff..fdd7402a534b 100644
--- a/client/src/components/Workflow/WorkflowListActions.vue
+++ b/client/src/components/Workflow/WorkflowListActions.vue
@@ -19,7 +19,7 @@ function navigateToImport() {
 }
 
 function navigateToOldCreate() {
-    router.push("/workflows/create_old");
+    router.push("/workflows/edit");
 }
 </script>
 
@@ -27,6 +27,7 @@ function navigateToOldCreate() {
     <div id="workflow-list-actions" class="d-flex justify-content-between">
         <div>
             <BButton
+                id="workflow-create"
                 v-b-tooltip.hover
                 size="sm"
                 title="Create new workflow"
@@ -38,6 +39,7 @@ function navigateToOldCreate() {
             </BButton>
 
             <BButton
+                id="workflow-import"
                 v-b-tooltip.hover
                 size="sm"
                 title="Import workflow from URL or file"

From dca644aedc1bb959b196b42bf39e75b65d787119 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 15 Nov 2023 18:12:36 +0100
Subject: [PATCH 057/104] fix some workflow tests

---
 lib/galaxy/selenium/navigates_galaxy.py       | 12 ++++++-
 lib/galaxy_test/selenium/framework.py         |  3 +-
 .../selenium/test_workflow_editor.py          | 18 +++++-----
 .../selenium/test_workflow_management.py      | 36 +------------------
 .../selenium/test_workflow_sharing.py         | 10 +++---
 5 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index b16bd8e9ba71..e3ab9537c4d0 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1397,11 +1397,18 @@ def workflow_index_open(self):
         self.home()
         self.click_masthead_workflow()
 
+    def workflow_shared_with_me_open(self):
+        self.workflow_index_open()
+        self.components.workflows.shared_with_me_tab.wait_for_and_click()
+
     def workflow_index_table_elements(self):
         workflows = self.components.workflows
         workflows.workflow_table.wait_for_visible()
         return workflows.workflow_rows.all()
 
+    def workflow_cards(self):
+        return self.components.workflows.workflow_card.all()
+
     def workflow_index_table_row(self, workflow_index=0):
         self.components.workflows.workflow_rows.wait_for_element_count_of_at_least(workflow_index + 1)
         return self.workflow_index_table_elements()[workflow_index]
@@ -1464,6 +1471,9 @@ def workflow_index_click_option(self, option_title, workflow_index=0):
         if not self.select_dropdown_item(option_title):
             raise AssertionError(f"Failed to find workflow action option with title [{option_title}]")
 
+    def workflow_share_click(self):
+        self.components.workflows.share_button.wait_for_and_click()
+
     def workflow_index_click_tag_display(self, workflow_index=0):
         workflow_row_element = self.workflow_index_table_row(workflow_index)
         tag_display = workflow_row_element.find_element(By.CSS_SELECTOR, ".stateless-tags")
@@ -1522,7 +1532,7 @@ def tagging_add(self, tags, auto_closes=True, parent_selector=""):
     def workflow_run_with_name(self, name: str):
         self.workflow_index_open()
         self.workflow_index_search_for(name)
-        self.workflow_click_option(".workflow-run")
+        self.components.workflows.run_button.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
 
     def workflow_run_specify_inputs(self, inputs: Dict[str, Any]):
diff --git a/lib/galaxy_test/selenium/framework.py b/lib/galaxy_test/selenium/framework.py
index 7fc13f447204..c85811c67835 100644
--- a/lib/galaxy_test/selenium/framework.py
+++ b/lib/galaxy_test/selenium/framework.py
@@ -587,7 +587,8 @@ def assert_item_hid_text(self, hid):
 class UsesWorkflowAssertions(NavigatesGalaxyMixin):
     @retry_assertion_during_transitions
     def _assert_showing_n_workflows(self, n):
-        if (actual_count := len(self.workflow_index_table_elements())) != n:
+        actual_count = len(self.workflow_cards())
+        if actual_count != n:
             message = f"Expected {n} workflows to be displayed, based on DOM found {actual_count} workflow rows."
             raise AssertionError(message)
 
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index d8bdd2c34018..03f04b95fd0d 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -115,7 +115,7 @@ def test_optional_select_data_field(self):
         editor = self.components.workflow_editor
         workflow_id = self.workflow_populator.upload_yaml_workflow(WORKFLOW_SELECT_FROM_OPTIONAL_DATASET)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         node = editor.node._(label="select_from_dataset_optional")
         node.title.wait_for_and_click()
@@ -492,7 +492,7 @@ def test_editor_tool_upgrade(self):
             exact_tools=True,
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.node._(label="multiple_versions").wait_for_and_click()
         editor.tool_version_button.wait_for_and_click()
@@ -516,7 +516,7 @@ def test_editor_tool_upgrade_message(self):
         workflow_populator = self.workflow_populator
         workflow_populator.upload_yaml_workflow(WORKFLOW_WITH_OLD_TOOL_VERSION, exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.screenshot("workflow_editor_tool_upgrade")
         self.components.workflow_editor.modal_button_continue.wait_for_and_click()
@@ -543,7 +543,7 @@ def test_editor_subworkflow_tool_upgrade_message(self):
         outer_workflow["steps"]["nested_workflow"]["run"] = embedded_workflow
         workflow_populator.upload_yaml_workflow(json.dumps(outer_workflow), exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.assert_modal_has_text("parameter 'inttest': an integer or workflow parameter is required")
@@ -681,7 +681,7 @@ def test_edit_subworkflow(self):
     def test_editor_duplicate_node(self):
         workflow_id = self.workflow_populator.upload_yaml_workflow(WORKFLOW_SIMPLE_CAT_TWICE)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         cat_node = editor.node._(label="first_cat")
         cat_node.wait_for_and_click()
@@ -741,7 +741,7 @@ def setup_subworkflow(self):
         """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.canvas_body.wait_for_visible()
         editor.tool_menu.wait_for_visible()
@@ -864,7 +864,7 @@ def test_editor_invalid_tool_state(self):
         workflow_populator = self.workflow_populator
         workflow_populator.upload_yaml_workflow(WORKFLOW_WITH_INVALID_STATE, exact_tools=True)
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.2' instead of version '0.0.1'")
         self.assert_modal_has_text("Using default: '1'")
         self.screenshot("workflow_editor_invalid_state")
@@ -885,7 +885,7 @@ def test_missing_tools(self):
 """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Tool is not installed")
         self.screenshot("workflow_editor_missing_tool")
 
@@ -1402,7 +1402,7 @@ def assert_input_not_mapped(self, sink):
     def workflow_index_open_with_name(self, name):
         self.workflow_index_open()
         self.workflow_index_search_for(name)
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
 
     def workflow_upload_yaml_with_random_name(self, content):
         workflow_populator = self.workflow_populator
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 235eff452d83..afd0a08e1d6e 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -94,7 +94,7 @@ def test_download(self):
         self._workflow_import_from_url()
         # TODO: fill this test out - getting downloaded files in general through Selenium is a bit tough,
         # going through the motions though should catch a couple potential problems.
-        self.workflow_index_click_option("Download")
+        self.components.workflows.download_button.wait_for_and_click()
 
     @selenium_test
     def test_tagging(self):
@@ -224,37 +224,3 @@ def test_workflow_delete(self):
 
         self.workflow_index_open()
         self._assert_showing_n_workflows(0)
-
-    @selenium_test
-    def test_pagination(self):
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-        self._workflow_import_from_url()
-        self.workflow_index_open()
-
-        self._assert_showing_n_workflows(4)
-
-        # by default the pager only appears when there are too many workflows
-        # for one page - so verify it is absent and then swap to showing just
-        # one workflow per page.
-        workflows = self.components.workflows
-        workflows.pager.wait_for_absent_or_hidden()
-        self.re_get_with_query_params("rows_per_page=1")
-        self._assert_showing_n_workflows(1)
-        self.screenshot("workflows_paginated_first_page")
-        self._assert_current_page_is(workflows, 1)
-        self._next_page(workflows)
-        self._assert_current_page_is(workflows, 2)
-        self.screenshot("workflows_paginated_next_page")
-        self._previous_page(workflows)
-        self._assert_current_page_is(workflows, 1)
-        self._last_page(workflows)
-        self._assert_current_page_is(workflows, 4)
-        self.screenshot("workflows_paginated_last_page")
-        self._first_page(workflows)
-        self._assert_current_page_is(workflows, 1)
diff --git a/lib/galaxy_test/selenium/test_workflow_sharing.py b/lib/galaxy_test/selenium/test_workflow_sharing.py
index 81793a35d6a3..a823303cdbf5 100644
--- a/lib/galaxy_test/selenium/test_workflow_sharing.py
+++ b/lib/galaxy_test/selenium/test_workflow_sharing.py
@@ -40,7 +40,7 @@ class TestWorkflowSharing(SeleniumTestCase, UsesWorkflowAssertions):
     def test_sharing_workflow_by_email(self):
         _, user2_email = self.setup_two_users_with_one_shared_workflow(screenshot=True)
         self.submit_login(user2_email)
-        self.workflow_index_open()
+        self.workflow_shared_with_me_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
         self.screenshot("workflow_shared_workflow")
@@ -49,8 +49,8 @@ def test_sharing_workflow_by_email(self):
     def test_sharing_workflow_by_id(self):
         _, user2_email = self.setup_two_users_with_one_shared_workflow(share_by_id=True)
         self.submit_login(user2_email)
-        self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
+        self.workflow_shared_with_me_open()
         self._assert_showing_n_workflows(1)
 
     @selenium_test
@@ -60,7 +60,7 @@ def test_unsharing_workflow(self):
         self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()
 
         sharing = self.components.histories.sharing
         self.share_unshare_with_user(sharing, user2_email)
@@ -69,7 +69,7 @@ def test_unsharing_workflow(self):
         self.workflow_index_open()
         # refine this to restrict checking for that workflow so published workflow don't break this test
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()
 
         self.share_ensure_by_user_available(sharing)
         unshare_user_button = sharing.unshare_with_user_button(email=user2_email)
@@ -143,4 +143,4 @@ def _share_workflow_with_user(self, user_id=None, user_email=None, assert_valid=
     def _import_workflow_open_sharing(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_click_option("Share")
+        self.workflow_share_click()

From 7587f95a9c7a1133ccfd6e561b92e9000afdee66 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 15 Nov 2023 18:22:42 +0100
Subject: [PATCH 058/104] update workflows navigation

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

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 70af6d07d63f..4af31122ae0a 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -582,6 +582,7 @@ tool_form:
 
 workflows:
   selectors:
+    shared_with_me_tab: '#shared-with-me'
     new_button: '#workflow-create'
     import_button: '#workflow-import'
     save_button: '#workflow-save-button'
@@ -591,8 +592,9 @@ workflows:
     advanced_search_name_input: '#workflows-advanced-filter-name'
     advanced_search_tag_input: '#workflows-advanced-filter-tag .stateless-tags'
     advanced_search_submit: '#workflows-advanced-filter-submit'
-    workflow_table: "#workflow-table"
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
+    workflow_card: '[data-workflow-id]'
+    workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
     trs_icon: '.workflow-trs-icon'
     pager: '.gx-workflows-grid-pager'
@@ -602,9 +604,12 @@ workflows:
     pager_page_last: '.gx-workflows-grid-pager .gx-grid-pager-last button'
     pager_page_previous: '.gx-workflows-grid-pager .gx-grid-pager-prev button'
     pager_page_active: '.gx-workflows-grid-pager .gx-grid-pager-page.active button'
-    dropdown: '[data-workflow-dropdown*="${id}"]'
-    run_button: '[data-workflow-run*="${id}"]'
-    bookmark_link: '.workflow-bookmark-link'
+    dropdown: '[data-workflow-actions-dropdown="${id}"]'
+    share_button: '#workflow-share-button'
+    download_button: '#workflow-download-button'
+    run_button: '[data-workflow-run]'
+    edit_button: '#workflow-edit-button'
+    bookmark_link: '#workflow-bookmark-button'
     import_file: '.workflow-import-file'
     import_trs_search: '.workflow-import-trs-search'
     import_trs_id: '.workflow-import-trs-id'

From a247f402bde3de1b7cc24e819cc96e8cfade0e50 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 21 Nov 2023 13:08:34 +0100
Subject: [PATCH 059/104] update workflow selenium navigation selectors and
 methods

---
 client/src/utils/navigation/navigation.yml | 15 +++++++++-
 lib/galaxy/selenium/navigates_galaxy.py    | 34 +++++++++++++++++-----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 4af31122ae0a..ffa46d5ee713 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -18,6 +18,10 @@ _:  # global stuff
     right_panel_collapse: '.collapse-button.right'
     by_attribute: '${scope} [${name}="${value}"]'
 
+    confirm_button:
+      type: xpath
+      selector: '//button[contains(text(), "${name}")]'
+
   messages:
     selectors:
       all: '[class*="alert"]'
@@ -593,6 +597,7 @@ workflows:
     advanced_search_tag_input: '#workflows-advanced-filter-tag .stateless-tags'
     advanced_search_submit: '#workflows-advanced-filter-submit'
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
+    workflows_list: '#workflows-list'
     workflow_card: '[data-workflow-id]'
     workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
@@ -609,7 +614,15 @@ workflows:
     download_button: '#workflow-download-button'
     run_button: '[data-workflow-run]'
     edit_button: '#workflow-edit-button'
-    bookmark_link: '#workflow-bookmark-button'
+    rename_button: '[data-workflow-rename]'
+    rename_input: '#workflow-name-input'
+    workflow_drop_down: '[data-workflow-actions-dropdown]'
+    delete_button: '.workflow-delete-button'
+    view_button: '.workflow-view-button'
+    workflow_preview_container: '.workflow-preview-container'
+    workflow_preview_information: '.workflow-information'
+    view_external_link: ".workflow-view-external-link-button"
+    bookmark_link: '.workflow-bookmark-button-${action}'
     import_file: '.workflow-import-file'
     import_trs_search: '.workflow-import-trs-search'
     import_trs_id: '.workflow-import-trs-id'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index e3ab9537c4d0..87f2a192fee3 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1406,9 +1406,12 @@ def workflow_index_table_elements(self):
         workflows.workflow_table.wait_for_visible()
         return workflows.workflow_rows.all()
 
-    def workflow_cards(self):
+    def workflow_card_elements(self):
         return self.components.workflows.workflow_card.all()
 
+    def workflow_card_element(self, workflow_index=0):
+        return self.workflow_card_elements()[workflow_index]
+
     def workflow_index_table_row(self, workflow_index=0):
         self.components.workflows.workflow_rows.wait_for_element_count_of_at_least(workflow_index + 1)
         return self.workflow_index_table_elements()[workflow_index]
@@ -1445,12 +1448,23 @@ def workflow_index_rename(self, new_name, workflow_index=0):
         alert.accept()
         self.components.workflows.workflow_with_name(workflow_name=new_name).wait_for_visible()
 
+    def workflow_rename(self, new_name):
+        self.components.workflows.rename_button.wait_for_and_click()
+        self.components.workflows.rename_input.wait_for_visible().clear()
+        self.components.workflows.rename_input.wait_for_and_send_keys(new_name)
+        self.components.workflows.rename_input.wait_for_and_send_keys(self.keys.ENTER)
+
+    def workflow_delete_by_name(self, name):
+        self.workflow_index_search_for(name)
+        self.components.workflows.workflow_drop_down.wait_for_and_click()
+        self.components.workflows.delete_button.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+        self.components._.confirm_button(name="Delete").wait_for_and_click()
+
     @retry_during_transitions
     def workflow_index_name(self, workflow_index=0):
-        """Get workflow name for workflow_index'th row."""
-        row_element = self.workflow_index_table_row(workflow_index=workflow_index)
-        workflow_button = row_element.find_element(By.CSS_SELECTOR, ".workflow-dropdown")
-        return workflow_button.text
+        workflow = self.workflow_card_element(workflow_index=workflow_index)
+        return workflow.find_element(By.CSS_SELECTOR, ".workflow-name").text
 
     @retry_during_transitions
     def workflow_click_option(self, workflow_selector, workflow_index=0):
@@ -1474,10 +1488,13 @@ def workflow_index_click_option(self, option_title, workflow_index=0):
     def workflow_share_click(self):
         self.components.workflows.share_button.wait_for_and_click()
 
+    def workflow_index_view_external_link(self, workflow_index=0):
+        self.components.workflows.workflow_drop_down.wait_for_and_click()
+        self.components.workflows.view_external_link.wait_for_and_click()
+
     def workflow_index_click_tag_display(self, workflow_index=0):
-        workflow_row_element = self.workflow_index_table_row(workflow_index)
-        tag_display = workflow_row_element.find_element(By.CSS_SELECTOR, ".stateless-tags")
-        tag_display.click()
+        workflow_element = self.workflow_card_element(workflow_index=workflow_index)
+        workflow_element.find_element(By.CSS_SELECTOR, ".stateless-tags").click()
 
     def workflow_index_add_tag(self, tag: str, workflow_index: int = 0):
         self.workflow_index_click_tag_display(workflow_index=workflow_index)
@@ -1528,6 +1545,7 @@ def tagging_add(self, tags, auto_closes=True, parent_selector=""):
 
             tag_area.send_keys(tag)
             self.send_enter(tag_area)
+        self.send_escape(tag_area)
 
     def workflow_run_with_name(self, name: str):
         self.workflow_index_open()

From be93e9444b36d00a06b18b346e5cc88649e48825 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 21 Nov 2023 13:41:20 +0100
Subject: [PATCH 060/104] update workflow actions and indicators classes

---
 .../components/Workflow/WorkflowActions.vue   | 29 +++++++++----------
 .../Workflow/WorkflowIndicators.vue           |  3 +-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index ca5b72ee7859..5463c7227fbd 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -33,7 +33,7 @@ interface Props {
 
 type BaseAction = {
     if?: boolean;
-    id: string;
+    class?: string;
     title: string;
     tooltip?: string;
     icon: any;
@@ -127,7 +127,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
     return [
         {
             if: !shared.value && !props.workflow.show_in_tool_panel,
-            id: "workflow-bookmark-button",
+            class: "workflow-bookmark-button-add",
             component: "async",
             title: "Add bookmarks",
             tooltip: "Add to bookmarks. This workflow will appear in the left tool panel.",
@@ -138,7 +138,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
         },
         {
             if: !shared.value && props.workflow.show_in_tool_panel,
-            id: "workflow-bookmark-button",
+            class: "workflow-bookmark-button-remove",
             component: "async",
             title: "Remove bookmark",
             tooltip: "Remove bookmark",
@@ -149,7 +149,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
         },
         {
             if: true,
-            id: "view-button",
+            class: "workflow-view-button",
             component: "button",
             title: "View workflow",
             tooltip: "View workflow",
@@ -165,7 +165,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
     return [
         {
             if: !shared.value && !props.workflow.deleted,
-            id: "delete-button",
+            class: "workflow-delete-button",
             component: "button",
             title: "Delete workflow",
             tooltip: "Delete workflow",
@@ -176,7 +176,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         },
         {
             if: sourceType.value.includes("trs"),
-            id: "source-trs-button",
+            class: "source-trs-button",
             component: "button",
             title: `View on ${props.workflow.source_metadata?.trs_server}`,
             href: `https://dockstore.org/workflows${props.workflow?.source_metadata?.trs_tool_id?.slice(9)}`,
@@ -187,7 +187,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         },
         {
             if: sourceType.value == "url",
-            id: "source-url-button",
+            class: "workflow-view-external-link-button",
             component: "button",
             title: "View external link",
             href: props.workflow.source_metadata?.url,
@@ -198,7 +198,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         },
         {
             if: !props.workflow.deleted,
-            id: "export-button",
+            class: "workflow-export-button",
             component: "button",
             title: "Export",
             icon: faFileExport,
@@ -212,11 +212,11 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 
 <template>
     <div class="workflow-actions flex-gapx-1">
-        <div v-for="action in actions" :key="action.id">
+        <div v-for="action in actions" :key="action.class">
             <AsyncButton
                 v-if="action.if && action.component === 'async'"
-                :id="action.id"
                 v-b-tooltip.hover
+                :class="action.class"
                 class="inline-icon-button"
                 :variant="action.variant"
                 :size="action.size"
@@ -226,8 +226,8 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 
             <BButton
                 v-if="action.if && action.component === 'button'"
-                :id="action.id"
                 v-b-tooltip.hover
+                :class="action.class"
                 class="inline-icon-button"
                 :variant="action.variant"
                 :size="action.size"
@@ -239,12 +239,11 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         </div>
 
         <BDropdown
-            id="workflow-actions-dropdown"
             v-b-tooltip.top
             :data-workflow-actions-dropdown="workflow.id"
             right
             no-caret
-            class="show-in-card"
+            class="workflow-actions-dropdown show-in-card"
             toggle-class="inline-icon-button"
             title="Workflow actions"
             variant="link">
@@ -254,8 +253,8 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 
             <BDropdownItem
                 v-for="action in menuActions.filter((a) => a.if).reverse()"
-                :id="action.id"
-                :key="action.id"
+                :key="action.class"
+                :class="action.class"
                 :href="action.href ?? undefined"
                 :title="action.title"
                 :target="action.target"
diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index ce8c32616841..eb490aa4e5db 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -117,10 +117,9 @@ function onViewUserPublished() {
 
         <BButton
             v-if="sourceType == 'url'"
-            id="source-indicator-url"
             v-b-tooltip
             size="sm"
-            class="inline-icon-button"
+            class="workflow-external-link inline-icon-button"
             :title="sourceTitle">
             <FontAwesomeIcon :icon="faLink" fixed-width @click="onCopyLink" />
         </BButton>

From 94e798c6d78a8aae9e6f43af44618a42ea2faa48 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 21 Nov 2023 13:41:53 +0100
Subject: [PATCH 061/104] use MultiTag filter menu for WorkflowList

---
 .../src/components/Workflow/WorkflowList.vue   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 1598faef5dcf..4ef6ed0a838d 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -4,7 +4,7 @@ import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay } from "bootstrap-vue";
 import { filter } from "underscore";
-import { computed, onMounted, type Ref, ref, watch } from "vue";
+import { computed, type ComputedRef, onMounted, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
@@ -12,7 +12,7 @@ import { useAnimationFrameResizeObserver } from "@/composables/sensors/animation
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
-import Filtering, { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
+import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -38,10 +38,15 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter();
 const userStore = useUserStore();
 
-const validFilters = computed(() => {
+const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
     return {
         name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
-        tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+        tag: {
+            placeholder: "tag",
+            type: "MultiTags",
+            handler: contains("tags", "tag", expandNameTag),
+            menuItem: true,
+        },
         deleted: {
             placeholder: "Filter on deleted workflows",
             type: Boolean,
@@ -98,8 +103,8 @@ function updateFilter(newVal: string) {
     advancedFiltering.value.updateFilter(newVal.trim());
 }
 
-function onTagClick(tag: { text: string }) {
-    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", tag.text);
+function onTagClick(tag: string) {
+    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", tag);
 }
 
 async function load(overlayLoading = false, silentLoading = false) {
@@ -203,6 +208,7 @@ onMounted(() => {
 
             <FilterMenu
                 id="workflow-list-filter"
+                name="workflows"
                 class="mb-2"
                 :filter-class="WorkflowFilters"
                 :filter-text.sync="filterText"

From 9f5a85eb5b31a2866b2cebdf91c74bc008eeff61 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 21 Nov 2023 13:42:34 +0100
Subject: [PATCH 062/104] use TagsMultiselect in WorkflowCard and more
 improvements

---
 .../src/components/Workflow/WorkflowCard.vue  | 35 ++++++-------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 76475b2ffd15..bb85283b28cf 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -11,7 +11,7 @@ import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
 import TextSummary from "@/components/Common/TextSummary.vue";
-import StatelessTags from "@/components/Tags/StatelessTags.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
 import WorkflowActionsExtend from "@/components/Workflow/WorkflowActionsExtend.vue";
 import WorkflowIndicators from "@/components/Workflow/WorkflowIndicators.vue";
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
     (e: "refreshList", a?: boolean, b?: boolean): void;
-    (e: "tagClick", a: { text: string }): void;
+    (e: "tagClick", a: string): void;
 }>();
 
 const router = useRouter();
@@ -83,6 +83,10 @@ async function onTagsUpdate(tags: string[]) {
     await updateWorkflow(workflow.value.id, { tags });
     emit("refreshList", false, true);
 }
+
+async function onTagClick(tag: string) {
+    emit("tagClick", tag);
+}
 </script>
 
 <template>
@@ -95,12 +99,12 @@ async function onTagsUpdate(tags: string[]) {
                     <div>
                         <WorkflowIndicators :workflow="workflow" :published-view="publishedView" />
 
-                        <span class="workflow-name hide-in-card font-weight-bold">
+                        <span class="workflow-name font-weight-bold">
                             {{ workflow.name }}
                             <BButton
                                 v-if="!shared && !workflow.deleted"
-                                id="rename-button"
-                                v-b-tooltip.top
+                                v-b-tooltip.hover
+                                :data-workflow-rename="workflow.id"
                                 class="inline-icon-button workflow-rename"
                                 variant="link"
                                 size="sm"
@@ -122,23 +126,6 @@ async function onTagsUpdate(tags: string[]) {
                     </div>
                 </div>
 
-                <div>
-                    <span class="workflow-name show-in-card">
-                        {{ workflow.name }}
-                        <BButton
-                            v-if="!shared && !workflow.deleted"
-                            id="rename-button"
-                            v-b-tooltip.top
-                            variant="link"
-                            size="sm"
-                            class="inline-icon-button workflow-rename"
-                            title="Rename"
-                            @click="showRename = !showRename">
-                            <FontAwesomeIcon :icon="faPen" fixed-width />
-                        </BButton>
-                    </span>
-                </div>
-
                 <TextSummary
                     v-if="description"
                     class="my-1"
@@ -153,8 +140,8 @@ async function onTagsUpdate(tags: string[]) {
                         :value="workflow.tags"
                         :disabled="workflow.deleted"
                         :max-visible-tags="gridView ? 2 : 8"
-                        @input="(tags) => onTagsUpdate(tags)"
-                        @tag-click="emit('tagClick', $event)" />
+                        @input="onTagsUpdate($event)"
+                        @tag-click="onTagClick($event)" />
                 </div>
 
                 <div class="workflow-card-actions">

From 362fe07467a76adcd2f89238e9dcb088336cdcc3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 21 Nov 2023 13:43:33 +0100
Subject: [PATCH 063/104] fix some workflow selenium tests

---
 lib/galaxy_test/selenium/framework.py         |  2 +-
 .../selenium/test_workflow_editor.py          |  2 +-
 .../selenium/test_workflow_management.py      | 38 ++++++-------------
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/lib/galaxy_test/selenium/framework.py b/lib/galaxy_test/selenium/framework.py
index c85811c67835..5b919286dbc3 100644
--- a/lib/galaxy_test/selenium/framework.py
+++ b/lib/galaxy_test/selenium/framework.py
@@ -587,7 +587,7 @@ def assert_item_hid_text(self, hid):
 class UsesWorkflowAssertions(NavigatesGalaxyMixin):
     @retry_assertion_during_transitions
     def _assert_showing_n_workflows(self, n):
-        actual_count = len(self.workflow_cards())
+        actual_count = len(self.workflow_card_elements())
         if actual_count != n:
             message = f"Expected {n} workflows to be displayed, based on DOM found {actual_count} workflow rows."
             raise AssertionError(message)
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 03f04b95fd0d..c6dc4c5ad527 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -908,7 +908,7 @@ def assert_workflow_bookmarked_status(target_status):
 
         self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
         self.sleep_for(self.wait_types.UX_RENDER)
-        self.components.workflows.bookmark_link.wait_for_and_click()
+        self.components.workflows.bookmark_link(action="add").wait_for_and_click()
         self.components.masthead.workflow.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_TRANSITION)
 
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index afd0a08e1d6e..83321faaf8d9 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -41,37 +41,23 @@ def test_import_accessibility(self):
     def test_view(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_click_option("View external link")
+        self.workflow_index_view_external_link()
         self.driver.switch_to.window(self.driver.window_handles[1])
         assert self.driver.current_url == EXAMPLE_WORKFLOW_URL_1
         self.driver.close()
         self.driver.switch_to.window(self.driver.window_handles[0])
         self.components.workflows.external_link.wait_for_visible()
-        # font-awesome title handling broken... https://github.com/FortAwesome/vue-fontawesome/issues/63
-        # title_element = external_link_icon.find_element(By.TAG_NAME, "title")
-        # assert EXAMPLE_WORKFLOW_URL_1 in title_element.text
-        self.workflow_index_click_option("View")
-        workflow_show = self.components.workflow_show
 
-        @retry_assertion_during_transitions
-        def check_title():
-            title_item = self.components.workflow_show.title.wait_for_visible()
-            assert "TestWorkflow1" in title_item.text
-
-        check_title()
-        # Since the workflow view now uses the workflow editor, axe violations need to be fixed there first
-        # TODO: fix axe violations in workflow editor
-        # workflow_show._.assert_no_axe_violations_with_impact_of_at_least("moderate")
-        import_link = workflow_show.import_link.wait_for_visible()
-        assert "Import Workflow" in import_link.get_attribute("title")
-        self.screenshot("workflow_manage_view")
-        # TODO: Test display of steps...
+        self.components.workflows.view_button.wait_for_and_click()
+
+        workflow_preview = self.components.workflows.workflow_preview_container.wait_for_visible()
+        assert "TestWorkflow1" in workflow_preview.text
 
     @selenium_test
     def test_rename(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("CoolNewName")
+        self.workflow_rename("CoolNewName")
 
         @retry_assertion_during_transitions
         def check_name():
@@ -83,7 +69,7 @@ def check_name():
     @selenium_test
     def test_workflow_index_accessibility(self):
         self.workflow_index_open()
-        index_table = self.components.workflows.workflow_table
+        index_table = self.components.workflows.workflows_list
         # The selenium_test decorator will check for critical axe violations,
         # this test will be more rigorous but test only a specific component.
         index_table.assert_no_axe_violations_with_impact_of_at_least("critical")
@@ -142,7 +128,7 @@ def test_tag_filtering(self):
     def test_index_search(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
         self.screenshot("workflow_manage_search")
 
@@ -159,7 +145,7 @@ def test_index_search(self):
     def test_index_search_filters(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
 
         self.workflow_index_search_for("name:doesnotmatch")
@@ -185,7 +171,7 @@ def test_index_search_filters(self):
     def test_index_advanced_search(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("searchforthis")
+        self.workflow_rename("searchforthis")
         self._assert_showing_n_workflows(1)
 
         self.workflow_index_add_tag("mytag")
@@ -217,9 +203,9 @@ def test_index_advanced_search(self):
     def test_workflow_delete(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
-        self.workflow_index_rename("fordelete")
+        self.workflow_rename("fordelete")
         self._assert_showing_n_workflows(1)
-        self.workflow_index_click_option("Delete")
+        self.workflow_delete_by_name("fordelete")
         self._assert_showing_n_workflows(0)
 
         self.workflow_index_open()

From 4c4e83a1d52f4b499d434654bdf9cb356edd4084 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 22 Nov 2023 15:18:45 +0100
Subject: [PATCH 064/104] fix Selenium and Integration Selenium tests

---
 client/src/components/Workflow/WorkflowList.vue  |  2 +-
 client/src/utils/navigation/navigation.yml       |  3 ++-
 lib/galaxy/selenium/navigates_galaxy.py          | 16 ++++------------
 .../selenium/test_workflow_management.py         | 13 ++++++++-----
 test/integration_selenium/test_trs_import.py     |  4 ++--
 .../test_workflow_repository_tool_update.py      |  4 ++--
 6 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 4ef6ed0a838d..24fade6e7e9a 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -104,7 +104,7 @@ function updateFilter(newVal: string) {
 }
 
 function onTagClick(tag: string) {
-    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", tag);
+    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
 }
 
 async function load(overlayLoading = false, silentLoading = false) {
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index ffa46d5ee713..7368d551add5 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -598,7 +598,8 @@ workflows:
     advanced_search_submit: '#workflows-advanced-filter-submit'
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
     workflows_list: '#workflows-list'
-    workflow_card: '[data-workflow-id]'
+    workflow_not_found_message: '#no-workflow-found'
+    workflow_card: '.workflow-card'
     workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
     trs_icon: '.workflow-trs-icon'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 87f2a192fee3..491dc6e7d1e8 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1401,24 +1401,16 @@ def workflow_shared_with_me_open(self):
         self.workflow_index_open()
         self.components.workflows.shared_with_me_tab.wait_for_and_click()
 
-    def workflow_index_table_elements(self):
-        workflows = self.components.workflows
-        workflows.workflow_table.wait_for_visible()
-        return workflows.workflow_rows.all()
-
     def workflow_card_elements(self):
+        self.components.workflows.workflow_cards.wait_for_visible()
         return self.components.workflows.workflow_card.all()
 
     def workflow_card_element(self, workflow_index=0):
         return self.workflow_card_elements()[workflow_index]
 
-    def workflow_index_table_row(self, workflow_index=0):
-        self.components.workflows.workflow_rows.wait_for_element_count_of_at_least(workflow_index + 1)
-        return self.workflow_index_table_elements()[workflow_index]
-
     @retry_during_transitions
     def workflow_index_column_text(self, column_index, workflow_index=0):
-        row_element = self.workflow_index_table_row(workflow_index=workflow_index)
+        row_element = self.workflow_card_element(workflow_index=workflow_index)
         columns = row_element.find_elements(By.CSS_SELECTOR, "td")
         return columns[column_index].text
 
@@ -1468,7 +1460,7 @@ def workflow_index_name(self, workflow_index=0):
 
     @retry_during_transitions
     def workflow_click_option(self, workflow_selector, workflow_index=0):
-        workflow_row = self.workflow_index_table_row(workflow_index=workflow_index)
+        workflow_row = self.workflow_card_element(workflow_index=workflow_index)
         workflow_button = workflow_row.find_element(By.CSS_SELECTOR, workflow_selector)
         workflow_button.click()
 
@@ -1510,7 +1502,7 @@ def workflow_index_tags(self, workflow_index=0):
 
     @retry_during_transitions
     def workflow_index_tag_elements(self, workflow_index=0):
-        workflow_row_element = self.workflow_index_table_row(workflow_index)
+        workflow_row_element = self.workflow_card_element(workflow_index)
         tag_display = workflow_row_element.find_element(By.CSS_SELECTOR, ".stateless-tags")
         tag_spans = tag_display.find_elements(By.CSS_SELECTOR, ".tag")
         return tag_spans
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 83321faaf8d9..4fc7bf54cf92 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -18,11 +18,11 @@ def test_import_from_url(self):
         self.workflow_index_open()
         self._workflow_import_from_url()
 
-        table_elements = self.workflow_index_table_elements()
-        assert len(table_elements) == 1
+        workflow_cards = self.workflow_card_elements()
+        assert len(workflow_cards) == 1
 
-        new_workflow = table_elements[0].find_element(By.CSS_SELECTOR, ".workflow-dropdown")
-        assert "TestWorkflow1 (imported from URL)" in new_workflow.text, new_workflow.text
+        first_workflow_card = workflow_cards[0].find_element(By.CSS_SELECTOR, ".workflow-name")
+        assert "TestWorkflow1 (imported from URL)" in first_workflow_card.text, first_workflow_card.text
 
     @selenium_test
     def test_import_accessibility(self):
@@ -102,16 +102,19 @@ def test_tag_filtering(self):
         self._workflow_import_from_url()
         self.workflow_index_add_tag("mytag")
         self._workflow_import_from_url()
+        self.workflow_index_open()
         self.workflow_index_add_tag("mytag")
         self._workflow_import_from_url()
+        self.workflow_index_open()
         self.workflow_index_add_tag("mytaglonger")
         self._workflow_import_from_url()
+        self.workflow_index_open()
 
         self.workflow_index_search_for("mytag")
         self._assert_showing_n_workflows(3)
         self.screenshot("workflow_manage_search_by_tag_freetext")
         self.workflow_index_search_for("thisisnotatag")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_search_for()
         self._assert_showing_n_workflows(4)
diff --git a/test/integration_selenium/test_trs_import.py b/test/integration_selenium/test_trs_import.py
index 0b5d5be293f3..7d6f4395227a 100644
--- a/test/integration_selenium/test_trs_import.py
+++ b/test/integration_selenium/test_trs_import.py
@@ -50,7 +50,7 @@ def trs_config_dir(cls):
 
     def assert_workflow_imported(self, name):
         self.workflow_index_search_for(name)
-        assert len(self.workflow_index_table_elements()) == 1, f"workflow ${name} not imported"
+        assert len(self.workflow_card_elements()) == 1, f"workflow ${name} not imported"
 
     def test_import_workflow_by_url_dockstore(self):
         import_url = f"workflows/trs_import?trs_server=dockstore.org&trs_version={TRS_VERSION_DOCKSTORE}&trs_id=%23{TRS_ID_DOCKSTORE}"
@@ -63,7 +63,7 @@ def test_import_workflow_by_url_workflowhub(self):
     def _import_workflow_by_url(self, import_url):
         full_url = self.build_url(import_url)
         self.driver.get(full_url)
-        self.components.workflows.workflow_table.wait_for_visible()
+        self.components.workflows.workflow_cards.wait_for_visible()
         self.assert_workflow_imported(WORKFLOW_NAME)
 
     def test_import_by_search_dockstore(self):
diff --git a/test/integration_selenium/test_workflow_repository_tool_update.py b/test/integration_selenium/test_workflow_repository_tool_update.py
index db046e39c691..b81f6935beb4 100644
--- a/test/integration_selenium/test_workflow_repository_tool_update.py
+++ b/test/integration_selenium/test_workflow_repository_tool_update.py
@@ -36,7 +36,7 @@ def test_tool_shed_tool_update_in_workflow_editor(self):
             exact_tools=True,
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.node._(label="compose_text_param").wait_for_and_click()
         editor.tool_version_button.wait_for_and_click()
@@ -65,7 +65,7 @@ def test_tool_shed_unmatched_version_upgrade(self):
         """
         )
         self.workflow_index_open()
-        self.workflow_index_click_option("Edit")
+        self.components.workflows.edit_button.wait_for_and_click()
         self.assert_modal_has_text("Using version '0.1.1' instead of version '0.0.0'")
         self.screenshot("workflow_editor_tool_repository_upgrade")
         self.components.workflow_editor.modal_button_continue.wait_for_and_click()

From ab906370220becd27c895fe5bd0f43a97516f2d8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 23 Nov 2023 15:31:12 +0100
Subject: [PATCH 065/104] change workflow rename icon to be invisible instead
 of none display

---
 client/src/components/Workflow/WorkflowCard.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index bb85283b28cf..06996b32f0b1 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -154,11 +154,10 @@ async function onTagClick(tag: string) {
                     <div class="workflow-edit-run-buttons">
                         <BButton
                             v-if="!shared"
-                            id="workflow-edit-button"
                             v-b-tooltip.hover
                             :disabled="workflow.deleted"
                             size="sm"
-                            class="mr-2"
+                            class="workflow-edit-button mr-2"
                             :title="workflow.deleted ? 'You cannot edit a deleted workflow' : 'Edit'"
                             variant="outline-primary"
                             @click="onEdit">
@@ -211,12 +210,12 @@ async function onTagClick(tag: string) {
     container: workflow-card / inline-size;
 
     .workflow-rename {
-        display: none;
+        opacity: 0;
     }
 
     &:hover {
         .workflow-rename {
-            display: inline-block;
+            opacity: 1;
         }
     }
 

From f2b13e33a5fd2b9b2731679fcf63dca0f9012b79 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 23 Nov 2023 15:35:02 +0100
Subject: [PATCH 066/104] fix workflow related selenium tests

---
 .../Workflow/WorkflowIndicators.vue           |  6 ++---
 client/src/utils/navigation/navigation.yml    |  4 ++--
 lib/galaxy/selenium/navigates_galaxy.py       | 23 +++----------------
 .../selenium/test_workflow_editor.py          |  2 +-
 .../selenium/test_workflow_management.py      | 12 +++++-----
 .../selenium/test_workflow_sharing.py         |  2 +-
 6 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index eb490aa4e5db..8b5b36f6df49 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -107,10 +107,9 @@ function onViewUserPublished() {
 
         <BButton
             v-if="sourceType.includes('trs')"
-            id="source-indicator-trs"
             v-b-tooltip
             size="sm"
-            class="inline-icon-button"
+            class="workflow-trs-icon inline-icon-button"
             :title="sourceTitle">
             <FontAwesomeIcon :icon="faShieldAlt" fixed-width @click="onCopyLink" />
         </BButton>
@@ -126,10 +125,9 @@ function onViewUserPublished() {
 
         <BButton
             v-if="workflow.published && !publishedView"
-            id="sharing-indicator-published"
             v-b-tooltip
             size="sm"
-            class="inline-icon-button"
+            class="workflow-published-icon inline-icon-button"
             to="/workflows/list_published"
             title="Published workflow. Click to view all published workflows">
             <FontAwesomeIcon :icon="faGlobe" />
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 7368d551add5..88975e457fb6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -598,6 +598,7 @@ workflows:
     advanced_search_submit: '#workflows-advanced-filter-submit'
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
     workflows_list: '#workflows-list'
+    workflows_list_empty: '#workflow-list-empty'
     workflow_not_found_message: '#no-workflow-found'
     workflow_card: '.workflow-card'
     workflow_cards: '#workflow-cards'
@@ -614,8 +615,7 @@ workflows:
     share_button: '#workflow-share-button'
     download_button: '#workflow-download-button'
     run_button: '[data-workflow-run]'
-    edit_button: '#workflow-edit-button'
-    rename_button: '[data-workflow-rename]'
+    edit_button: '.workflow-edit-button'
     rename_input: '#workflow-name-input'
     workflow_drop_down: '[data-workflow-actions-dropdown]'
     delete_button: '.workflow-delete-button'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 491dc6e7d1e8..541ca5f63e36 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1433,15 +1433,9 @@ def workflow_index_search_for(self, search_term=None):
     def workflow_index_click_import(self):
         return self.components.workflows.import_button.wait_for_and_click()
 
-    def workflow_index_rename(self, new_name, workflow_index=0):
-        self.workflow_index_click_option("Rename", workflow_index=workflow_index)
-        alert = self.driver.switch_to.alert
-        alert.send_keys(new_name)
-        alert.accept()
-        self.components.workflows.workflow_with_name(workflow_name=new_name).wait_for_visible()
-
-    def workflow_rename(self, new_name):
-        self.components.workflows.rename_button.wait_for_and_click()
+    def workflow_rename(self, new_name, workflow_index=0):
+        workflow = self.workflow_card_element(workflow_index=workflow_index)
+        workflow.find_element(By.CSS_SELECTOR, "[data-workflow-rename]").click()
         self.components.workflows.rename_input.wait_for_visible().clear()
         self.components.workflows.rename_input.wait_for_and_send_keys(new_name)
         self.components.workflows.rename_input.wait_for_and_send_keys(self.keys.ENTER)
@@ -1458,12 +1452,6 @@ def workflow_index_name(self, workflow_index=0):
         workflow = self.workflow_card_element(workflow_index=workflow_index)
         return workflow.find_element(By.CSS_SELECTOR, ".workflow-name").text
 
-    @retry_during_transitions
-    def workflow_click_option(self, workflow_selector, workflow_index=0):
-        workflow_row = self.workflow_card_element(workflow_index=workflow_index)
-        workflow_button = workflow_row.find_element(By.CSS_SELECTOR, workflow_selector)
-        workflow_button.click()
-
     def select_dropdown_item(self, option_title):
         menu_element = self.wait_for_selector_visible(".dropdown-menu.show")
         menu_options = menu_element.find_elements(By.CSS_SELECTOR, "a.dropdown-item")
@@ -1472,11 +1460,6 @@ def select_dropdown_item(self, option_title):
                 menu_option.click()
                 return True
 
-    def workflow_index_click_option(self, option_title, workflow_index=0):
-        self.workflow_click_option(".workflow-dropdown", workflow_index)
-        if not self.select_dropdown_item(option_title):
-            raise AssertionError(f"Failed to find workflow action option with title [{option_title}]")
-
     def workflow_share_click(self):
         self.components.workflows.share_button.wait_for_and_click()
 
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index c6dc4c5ad527..f50377591006 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -906,7 +906,6 @@ def assert_workflow_bookmarked_status(target_status):
         self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
         self.components.masthead.workflow.wait_for_and_click()
 
-        self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.components.workflows.bookmark_link(action="add").wait_for_and_click()
         self.components.masthead.workflow.wait_for_and_click()
@@ -914,6 +913,7 @@ def assert_workflow_bookmarked_status(target_status):
 
         # search for bookmark in tools menu
         self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
+        self.sleep_for(self.wait_types.UX_RENDER)
         assert_workflow_bookmarked_status(True)
 
     def tab_to(self, accessible_name, direction="forward"):
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 4fc7bf54cf92..7ce0aac51245 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -136,7 +136,7 @@ def test_index_search(self):
         self.screenshot("workflow_manage_search")
 
         self.workflow_index_search_for("doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_search_for()
         self._assert_showing_n_workflows(1)
@@ -152,7 +152,7 @@ def test_index_search_filters(self):
         self._assert_showing_n_workflows(1)
 
         self.workflow_index_search_for("name:doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
         self.screenshot("workflow_manage_search_no_matches")
 
         self.workflow_index_search_for()
@@ -167,7 +167,7 @@ def test_index_search_filters(self):
         self.screenshot("workflow_manage_search_name_alias")
 
         self.workflow_index_search_for("n:doesnotmatch")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
         self.screenshot("workflow_manage_search_name_alias")
 
     @selenium_test
@@ -200,7 +200,7 @@ def test_index_advanced_search(self):
         self.components.workflows.advanced_search_submit.wait_for_and_click()
         curr_value = self.workflow_index_get_current_filter()
         assert curr_value == "tag:'mytag' tag:'DNEtag'", curr_value
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
     @selenium_test
     def test_workflow_delete(self):
@@ -209,7 +209,7 @@ def test_workflow_delete(self):
         self.workflow_rename("fordelete")
         self._assert_showing_n_workflows(1)
         self.workflow_delete_by_name("fordelete")
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflow_not_found_message.wait_for_visible()
 
         self.workflow_index_open()
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflows_list_empty.wait_for_visible()
diff --git a/lib/galaxy_test/selenium/test_workflow_sharing.py b/lib/galaxy_test/selenium/test_workflow_sharing.py
index a823303cdbf5..bd93e14f004f 100644
--- a/lib/galaxy_test/selenium/test_workflow_sharing.py
+++ b/lib/galaxy_test/selenium/test_workflow_sharing.py
@@ -78,7 +78,7 @@ def test_unsharing_workflow(self):
         self.logout_if_needed()
         self.submit_login(user2_email)
         self.workflow_index_open()
-        self._assert_showing_n_workflows(0)
+        self.components.workflows.workflows_list_empty.wait_for_visible()
 
     @selenium_test
     def test_sharing_with_invalid_user(self):

From 3031013188b40f20ee9d21f0e00fd6be92a00fc2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 27 Nov 2023 17:24:48 +0100
Subject: [PATCH 067/104] create `breakpoints.scss`

---
 client/src/style/scss/breakpoints.scss | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 client/src/style/scss/breakpoints.scss

diff --git a/client/src/style/scss/breakpoints.scss b/client/src/style/scss/breakpoints.scss
new file mode 100644
index 000000000000..641b39ff9d2b
--- /dev/null
+++ b/client/src/style/scss/breakpoints.scss
@@ -0,0 +1,5 @@
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;

From c3e29dce104925e15ded0b82bed046cab6ed2e29 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 27 Nov 2023 17:38:40 +0100
Subject: [PATCH 068/104] update breakpoints and fix styles

---
 client/src/components/Common/ListHeader.vue   |  5 +-
 .../components/Workflow/WorkflowActions.vue   |  2 +-
 .../Workflow/WorkflowActionsExtend.vue        |  8 ++-
 .../src/components/Workflow/WorkflowCard.vue  | 42 ++++++++++----
 .../Workflow/WorkflowInvocationsCount.vue     |  4 +-
 .../src/components/Workflow/WorkflowList.vue  | 55 +++++++++++--------
 .../components/Workflow/WorkflowQuickView.vue |  4 +-
 7 files changed, 77 insertions(+), 43 deletions(-)

diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 4440aa3a8e21..e2e16cce18e1 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -47,7 +47,7 @@ defineExpose({
 
 <template>
     <div class="list-header">
-        <div class="list-header-sort">
+        <div class="list-header-filters">
             Sort by:
             <BButtonGroup>
                 <BButton
@@ -113,9 +113,10 @@ defineExpose({
     justify-content: space-between;
     align-items: center;
 
-    .list-header-sort {
+    .list-header-filters {
         display: flex;
         gap: 0.25rem;
+        flex-wrap: wrap;
         align-items: center;
     }
 }
diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index 5463c7227fbd..f53d7bcb7327 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -270,7 +270,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 .workflow-actions {
     display: flex;
     align-items: baseline;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     justify-content: flex-end;
 }
 </style>
diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
index f711230a9fa3..adddc383d110 100644
--- a/client/src/components/Workflow/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -80,7 +80,7 @@ async function onRestore() {
 </script>
 
 <template>
-    <div class="workflow-actions flex-gapx-1">
+    <div class="workflow-actions-extend flex-gapx-1">
         <BButtonGroup>
             <BButton
                 v-if="!isAnonymous && !shared && !workflow.deleted"
@@ -134,13 +134,15 @@ async function onRestore() {
 </template>
 
 <style scoped lang="scss">
-.workflow-actions {
+@import "breakpoints.scss";
+
+.workflow-actions-extend {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
     justify-content: flex-end;
 
-    @container (max-width: 576px) {
+    @container (max-width: #{$breakpoint-md}) {
         .compact-view {
             display: none;
         }
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 06996b32f0b1..3e10bc670a76 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -134,7 +134,7 @@ async function onTagClick(tag: string) {
             </div>
 
             <div class="workflow-card-footer">
-                <div>
+                <div class="workflow-card-tags">
                     <StatelessTags
                         clickable
                         :value="workflow.tags"
@@ -157,8 +157,12 @@ async function onTagClick(tag: string) {
                             v-b-tooltip.hover
                             :disabled="workflow.deleted"
                             size="sm"
-                            class="workflow-edit-button mr-2"
-                            :title="workflow.deleted ? 'You cannot edit a deleted workflow' : 'Edit'"
+                            class="workflow-edit-button"
+                            :title="
+                                workflow.deleted
+                                    ? 'You cannot edit a deleted workflow. Restore it first.'
+                                    : 'Edit workflow'
+                            "
                             variant="outline-primary"
                             @click="onEdit">
                             <FontAwesomeIcon :icon="faEdit" />
@@ -169,7 +173,6 @@ async function onTagClick(tag: string) {
                             v-else
                             v-b-tooltip.hover
                             size="sm"
-                            class="mr-2"
                             title="Import this workflow to edit"
                             variant="outline-primary"
                             @click="onImport">
@@ -205,6 +208,7 @@ async function onTagClick(tag: string) {
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
+@import "breakpoints.scss";
 
 .workflow-card {
     container: workflow-card / inline-size;
@@ -234,6 +238,7 @@ async function onTagClick(tag: string) {
             display: flex;
             align-self: baseline;
             gap: 0.5rem;
+            flex-direction: row;
         }
 
         .text-summary {
@@ -255,14 +260,27 @@ async function onTagClick(tag: string) {
             justify-content: end;
         }
 
-        @container (max-width: 576px) {
+        .workflow-card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: end;
+        }
+
+        .workflow-card-tags {
+            max-width: 60%;
+        }
+
+        @container (max-width: #{$breakpoint-sm}) {
             .workflow-card-footer {
-                gap: 0.5rem;
-                flex-wrap: wrap;
-                align-items: center;
-                justify-content: space-between;
+                display: inline-block;
             }
 
+            .workflow-card-tags {
+                max-width: 100%;
+            }
+        }
+
+        @container (max-width: #{$breakpoint-sm}) {
             .workflow-card-actions {
                 display: flex;
                 gap: 0.5rem;
@@ -271,7 +289,7 @@ async function onTagClick(tag: string) {
             }
         }
 
-        @container (min-width: 576px, max-width: 768px) {
+        @container (min-width: #{$breakpoint-sm}, max-width: #{$breakpoint-md}) {
             .workflow-card-actions {
                 justify-content: end;
             }
@@ -282,7 +300,7 @@ async function onTagClick(tag: string) {
         border-left: 0.25rem solid $brand-primary;
     }
 
-    @container (max-width: 768px) {
+    @container (max-width: #{$breakpoint-md}) {
         .hide-in-card {
             display: none !important;
         }
@@ -297,7 +315,7 @@ async function onTagClick(tag: string) {
         }
     }
 
-    @container (min-width: 768px) {
+    @container (min-width: #{$breakpoint-md}) {
         .workflow-count-actions {
             align-items: end;
             flex-direction: column-reverse;
diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 9748dd29e957..bea2c910d69d 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -59,7 +59,9 @@ function onInvocations() {
 </template>
 
 <style scoped lang="scss">
-@container (max-width: 376px) {
+@import "breakpoints.scss";
+
+@container (max-width: #{$breakpoint-md}) {
     .compact-view {
         display: none;
     }
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 24fade6e7e9a..4ebb7d910115 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -283,38 +283,47 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+@import "breakpoints.scss";
+
 .workflows-list {
     container: workflow-list / inline-size;
     overflow: auto;
 
     .workflows-list-header {
-        position: sticky;
         top: 0;
         z-index: 100;
         background-color: white;
 
-        &:after {
-            position: absolute;
-            content: "";
-            opacity: 0;
-            z-index: 10;
-            width: 100%;
-            height: 20px;
-            bottom: -25px;
-            pointer-events: none;
-            border-radius: 0.5rem;
-            transition: opacity 0.4s;
-            background-repeat: no-repeat;
-        }
-
-        &:after {
-            right: 0;
-            background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-        }
+        @container (min-width: #{$breakpoint-sm}) {
+            position: sticky;
+            &:after {
+                position: absolute;
+                content: "";
+                opacity: 0;
+                z-index: 10;
+                width: 100%;
+                height: 20px;
+                bottom: -25px;
+                pointer-events: none;
+                border-radius: 0.5rem;
+                transition: opacity 0.4s;
+                background-repeat: no-repeat;
+            }
 
-        &:not(.scrolled-top) {
             &:after {
-                opacity: 1;
+                right: 0;
+                background-image: linear-gradient(
+                    to bottom,
+                    rgba(3, 0, 48, 0.1),
+                    rgba(3, 0, 48, 0.02),
+                    rgba(3, 0, 48, 0)
+                );
+            }
+
+            &:not(.scrolled-top) {
+                &:after {
+                    opacity: 1;
+                }
             }
         }
     }
@@ -328,14 +337,14 @@ onMounted(() => {
         display: inline-grid;
     }
 
-    @container (max-width: 1200px) {
+    @container (max-width: #{$breakpoint-xl}) {
         .grid-view {
             width: calc(100% / 2);
             display: inline-grid;
         }
     }
 
-    @container (max-width: 576px) {
+    @container (max-width: #{$breakpoint-sm}) {
         .grid-view {
             width: 100%;
             display: inline-grid;
diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
index 25430abfb3c5..1bf8d5b4330e 100644
--- a/client/src/components/Workflow/WorkflowQuickView.vue
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -125,6 +125,8 @@ watch(
 </template>
 
 <style scoped lang="scss">
+@import "breakpoints.scss";
+
 .workflow-quick-view {
     .workflow-preview-container {
         display: flex;
@@ -151,7 +153,7 @@ watch(
         }
     }
 
-    @media only screen and (max-width: 1100px) {
+    @media only screen and (max-width: $breakpoint-xl) {
         flex-direction: column;
         height: unset;
 

From ccf0910896705f903e969d7dc89c7bacff556ce5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 27 Nov 2023 17:39:04 +0100
Subject: [PATCH 069/104] add `Highlights` toggle for imported and shared
 workflows

---
 .../src/components/Workflow/WorkflowCard.vue  | 16 +++++-
 .../src/components/Workflow/WorkflowList.vue  | 49 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 3e10bc670a76..4fdb394339d1 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -25,12 +25,14 @@ library.add(faEdit, faEye, faPen, faUpload);
 interface Props {
     workflow: any;
     gridView?: boolean;
+    showHighlight?: string;
     publishedView?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     gridView: false,
     publishedView: false,
+    showHighlight: "",
 });
 
 const emit = defineEmits<{
@@ -59,6 +61,16 @@ const description = computed(() => {
         return null;
     }
 });
+const showHighlightComputed = computed(() => {
+    if (!props.publishedView && props.showHighlight) {
+        if (props.showHighlight === "published") {
+            return workflow.value.published;
+        } else if (props.showHighlight === "imported") {
+            return workflow.value.source_metadata;
+        }
+    }
+    return false;
+});
 
 function onEdit() {
     router.push(`/workflows/edit?id=${workflow.value.id}`);
@@ -93,7 +105,9 @@ async function onTagClick(tag: string) {
     <div class="workflow-card" :data-workflow-id="workflow.id">
         <div
             class="workflow-card-container"
-            :class="{ 'workflow-shared-trs': !publishedView && (workflow.source_metadata || workflow.published) }">
+            :class="{
+                'workflow-shared-trs': showHighlightComputed,
+            }">
             <div>
                 <div class="d-flex justify-content-between align-items-center mb-1">
                     <div>
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 4ebb7d910115..d23bcb813607 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/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 { faGlobe, faStar, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay } from "bootstrap-vue";
 import { filter } from "underscore";
@@ -22,7 +22,7 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
 
-library.add(faStar, faTrash);
+library.add(faGlobe, faStar, faTrash, faUpload);
 
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
@@ -89,6 +89,7 @@ const filterText = ref("");
 const showAdvanced = ref(false);
 const showBookmarked = ref(false);
 const WorkflowFilters = new Filtering(validFilters.value);
+const showHighlight = ref<"published" | "imported" | "">("");
 const published = computed(() => props.activeList === "published");
 const scrolledTop = computed(() => !isScrollable.value || arrived.top);
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
@@ -164,6 +165,14 @@ function onToggleBookmarked() {
     showBookmarked.value = !showBookmarked.value;
 }
 
+function onToggleShowHighlight(h: "published" | "imported") {
+    if (showHighlight.value === h) {
+        showHighlight.value = "";
+    } else {
+        showHighlight.value = h;
+    }
+}
+
 watch([filterText, sortBy, sortDesc, showBookmarked], () => {
     load(true);
 });
@@ -246,6 +255,41 @@ onMounted(() => {
                             Show bookmarked
                         </BButton>
                     </div>
+
+                    <div v-if="activeList !== 'published'">
+                        Highlights:
+                        <BButton
+                            id="highlight-published-workflows"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="
+                                showHighlight === 'published'
+                                    ? 'Highlight published workflows'
+                                    : 'Hide published workflows highlight'
+                            "
+                            :pressed="showHighlight === 'published'"
+                            variant="outline-primary"
+                            @click="onToggleShowHighlight('published')">
+                            <FontAwesomeIcon :icon="faGlobe" />
+                            Published
+                        </BButton>
+
+                        <BButton
+                            id="highlight-imported-workflows"
+                            v-b-tooltip.hover
+                            size="sm"
+                            :title="
+                                showHighlight === 'imported'
+                                    ? 'Highlight imported workflows'
+                                    : 'Hide imported workflows highlight'
+                            "
+                            :pressed="showHighlight === 'imported'"
+                            variant="outline-primary"
+                            @click="onToggleShowHighlight('imported')">
+                            <FontAwesomeIcon :icon="faUpload" />
+                            Imported
+                        </BButton>
+                    </div>
                 </template>
             </ListHeader>
         </div>
@@ -274,6 +318,7 @@ onMounted(() => {
                 :key="workflow.id"
                 :class="view === 'grid' ? 'grid-view ' : ''"
                 :workflow="workflow"
+                :show-highlight="showHighlight"
                 :published-view="published"
                 :grid-view="view === 'grid'"
                 @refreshList="load"

From 21f77511b3efdc25f2ff2716070f21893723365e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 27 Nov 2023 17:58:18 +0100
Subject: [PATCH 070/104] fix `WorkflowQuickView` styles

---
 client/src/components/Workflow/WorkflowActions.vue   | 4 +---
 client/src/components/Workflow/WorkflowCard.vue      | 1 +
 client/src/components/Workflow/WorkflowQuickView.vue | 3 ---
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index f53d7bcb7327..cff313b2c668 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -269,8 +269,6 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 <style scoped lang="scss">
 .workflow-actions {
     display: flex;
-    align-items: baseline;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
+    align-items: center;
 }
 </style>
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 4fdb394339d1..84fa51abddb0 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -251,6 +251,7 @@ async function onTagClick(tag: string) {
         .workflow-count-actions {
             display: flex;
             align-self: baseline;
+            align-items: center;
             gap: 0.5rem;
             flex-direction: row;
         }
diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
index 1bf8d5b4330e..1204d9959176 100644
--- a/client/src/components/Workflow/WorkflowQuickView.vue
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -14,7 +14,6 @@ import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
-import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
 import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
 const props = defineProps<{
@@ -90,8 +89,6 @@ watch(
                 <span class="d-flex mb-2">
                     <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0"> Workflow Preview </Heading>
 
-                    <WorkflowActions :workflow="workflowInfo" button-size="md" show-controls />
-
                     <WorkflowRunButton :id="props.id" full />
                 </span>
             </div>

From 390d78e643d565e6d090967bb70d0e8551e16ff8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 30 Nov 2023 15:58:40 +0100
Subject: [PATCH 071/104] update workflow import message to use Toast

---
 client/src/components/Workflow/redirectPath.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Workflow/redirectPath.ts b/client/src/components/Workflow/redirectPath.ts
index 4bf9dfd79e23..1cc3db96a6e2 100644
--- a/client/src/components/Workflow/redirectPath.ts
+++ b/client/src/components/Workflow/redirectPath.ts
@@ -1,9 +1,6 @@
 import type { RawLocation } from "vue-router";
 
-const statusMap = new Map([
-    ["error", "danger"],
-    ["success", "success"],
-]);
+import { Toast } from "@/composables/toast";
 
 export function getRedirectOnImportPath(
     response: { id?: string; message?: string; status?: string },
@@ -12,12 +9,14 @@ export function getRedirectOnImportPath(
     if (isRunFormRedirect) {
         return { path: "/workflows/run", query: { id: response.id } };
     } else {
+        if (response.status === "error") {
+            Toast.error(response.message ?? "Import Failed");
+        } else {
+            Toast.success(response.message ?? "Import Successful");
+        }
+
         return {
             path: "/workflows/list",
-            query: {
-                message: response.message ?? "Import Successful",
-                status: statusMap.get(response.status ?? "") ?? "success",
-            },
         };
     }
 }

From 193e851fe66584ee085a30a1dd555a7efa3c0b42 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 11 Dec 2023 16:35:56 +0100
Subject: [PATCH 072/104] disable `tags` edit due to performance issues in
 rendering

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

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 84fa51abddb0..2e1abfccd387 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -152,7 +152,7 @@ async function onTagClick(tag: string) {
                     <StatelessTags
                         clickable
                         :value="workflow.tags"
-                        :disabled="workflow.deleted"
+                        :disabled="true"
                         :max-visible-tags="gridView ? 2 : 8"
                         @input="onTagsUpdate($event)"
                         @tag-click="onTagClick($event)" />

From 2c83e8af99617c04a6d4a9d0b9111030d728a892 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 11 Dec 2023 16:36:21 +0100
Subject: [PATCH 073/104] use name css container in `WorkflowCard`

---
 client/src/components/Workflow/WorkflowCard.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 2e1abfccd387..b27ae0465e18 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -226,6 +226,7 @@ async function onTagClick(tag: string) {
 
 .workflow-card {
     container: workflow-card / inline-size;
+    margin: 0 0.25rem 0.5rem 0.25rem;
 
     .workflow-rename {
         opacity: 0;
@@ -238,6 +239,7 @@ async function onTagClick(tag: string) {
     }
 
     .workflow-card-container {
+        height: 100%;
         display: flex;
         gap: 0.5rem;
         flex-direction: column;
@@ -246,7 +248,6 @@ async function onTagClick(tag: string) {
         border: 1px solid #e5e5e5;
         border-radius: 0.5rem;
         padding: 0.5rem;
-        margin: 0 0.25rem 0.5rem 0.25rem;
 
         .workflow-count-actions {
             display: flex;
@@ -285,7 +286,7 @@ async function onTagClick(tag: string) {
             max-width: 60%;
         }
 
-        @container (max-width: #{$breakpoint-sm}) {
+        @container workflow-card (max-width: #{$breakpoint-sm}) {
             .workflow-card-footer {
                 display: inline-block;
             }
@@ -295,7 +296,7 @@ async function onTagClick(tag: string) {
             }
         }
 
-        @container (max-width: #{$breakpoint-sm}) {
+        @container workflow-card (max-width: #{$breakpoint-sm}) {
             .workflow-card-actions {
                 display: flex;
                 gap: 0.5rem;
@@ -304,7 +305,7 @@ async function onTagClick(tag: string) {
             }
         }
 
-        @container (min-width: #{$breakpoint-sm}, max-width: #{$breakpoint-md}) {
+        @container workflow-card (min-width: #{$breakpoint-sm}, max-width: #{$breakpoint-md}) {
             .workflow-card-actions {
                 justify-content: end;
             }
@@ -315,7 +316,7 @@ async function onTagClick(tag: string) {
         border-left: 0.25rem solid $brand-primary;
     }
 
-    @container (max-width: #{$breakpoint-md}) {
+    @container workflow-card (max-width: #{$breakpoint-md}) {
         .hide-in-card {
             display: none !important;
         }
@@ -330,7 +331,7 @@ async function onTagClick(tag: string) {
         }
     }
 
-    @container (min-width: #{$breakpoint-md}) {
+    @container workflow-card (min-width: #{$breakpoint-md}) {
         .workflow-count-actions {
             align-items: end;
             flex-direction: column-reverse;

From c2d1446623fab7519b31cb36eb844e28c6c18002 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 11 Dec 2023 16:36:54 +0100
Subject: [PATCH 074/104] update `loadWorkflows` service: return header and
 data

---
 client/src/components/Workflow/workflows.services.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index 3b291dab0453..caadf22aa5ab 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -27,8 +27,8 @@ export async function loadWorkflows({
     filterText = "",
     showPublished = false,
     skipStepCounts = true,
-}: LoadWorkflowsOptions): Promise<Workflow[]> {
-    const { data } = await getWorkflows({
+}: LoadWorkflowsOptions): Promise<{ data: Workflow[]; headers: Headers }> {
+    const { data, headers } = await getWorkflows({
         sort_by: sortBy,
         sort_desc: sortDesc,
         limit,
@@ -37,7 +37,7 @@ export async function loadWorkflows({
         show_published: showPublished,
         skip_step_counts: skipStepCounts,
     });
-    return data;
+    return { data, headers };
 }
 
 export async function updateWorkflow(id: string, changes: object): Promise<Workflow> {

From 3104f2acd04881a0ca9418d5caa59b52baa12631 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 11 Dec 2023 16:46:09 +0100
Subject: [PATCH 075/104] `WorkflowList`: add infinite load, update css

---
 .../src/components/Workflow/WorkflowList.vue  | 275 +++++++++---------
 1 file changed, 144 insertions(+), 131 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index d23bcb813607..842ec7a6a105 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -2,14 +2,14 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faGlobe, faStar, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNav, BNavItem, BOverlay } from "bootstrap-vue";
+import { BAlert, BButton, BNav, BNavItem } from "bootstrap-vue";
 import { filter } from "underscore";
-import { computed, type ComputedRef, onMounted, type Ref, ref, watch } from "vue";
+import { computed, type ComputedRef, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
+//@ts-ignore missing typedefs
+import VirtualList from "vue-virtual-scroll-list";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
-import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
-import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
@@ -38,6 +38,18 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter();
 const userStore = useUserStore();
 
+const limit = ref(70);
+const offset = ref(0);
+const loading = ref(true);
+const filterText = ref("");
+const showAdvanced = ref(false);
+const showBookmarked = ref(false);
+const listHeader = ref<any>(null);
+const advancedFiltering = ref<any>(null);
+const workflowsLoaded = ref<WorkflowsList>([]);
+const totalWorkflows = ref<number | null>(null);
+const showHighlight = ref<"published" | "imported" | "">("");
+
 const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
     return {
         name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
@@ -56,20 +68,7 @@ const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | un
     };
 });
 
-const limit = ref(50);
-const offset = ref(0);
-const loading = ref(true);
-const overlay = ref(false);
-const isScrollable = ref(false);
-const listHeader = ref<any>(null);
-const workflows = ref<WorkflowsList>([]);
-const advancedFiltering = ref<any>(null);
-const scrollContainer: Ref<HTMLElement | null> = ref(null);
-
-const { arrived } = useAnimationFrameScroll(scrollContainer);
-useAnimationFrameResizeObserver(scrollContainer, ({ clientSize, scrollSize }) => {
-    isScrollable.value = scrollSize.height >= clientSize.height + 1;
-});
+const WorkflowFilters = new Filtering(validFilters.value);
 
 const searchPlaceHolder = computed(() => {
     let placeHolder = "Search my workflows";
@@ -85,20 +84,14 @@ const searchPlaceHolder = computed(() => {
     return placeHolder;
 });
 
-const filterText = ref("");
-const showAdvanced = ref(false);
-const showBookmarked = ref(false);
-const WorkflowFilters = new Filtering(validFilters.value);
-const showHighlight = ref<"published" | "imported" | "">("");
 const published = computed(() => props.activeList === "published");
-const scrolledTop = computed(() => !isScrollable.value || arrived.top);
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
 const showDeleted = computed(() => filterText.value.includes("is:deleted"));
 const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
-const noItems = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && !filterText.value);
-const noResults = computed(() => !loading.value && !overlay.value && workflows.value.length === 0 && filterText.value);
+const noItems = computed(() => !loading.value && workflowsLoaded.value.length === 0 && !filterText.value);
+const noResults = computed(() => !loading.value && workflowsLoaded.value.length === 0 && filterText.value);
 
 function updateFilter(newVal: string) {
     advancedFiltering.value.updateFilter(newVal.trim());
@@ -108,12 +101,30 @@ function onTagClick(tag: string) {
     filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
 }
 
-async function load(overlayLoading = false, silentLoading = false) {
-    if (overlayLoading) {
-        overlay.value = true;
-    } else if (!silentLoading) {
-        loading.value = true;
+function onToggleDeleted() {
+    if (!showDeleted.value) {
+        filterText.value = `${filterText.value} is:deleted`.trim();
+    } else {
+        filterText.value = filterText.value.replace("is:deleted", "").trim();
+    }
+}
+
+function onToggleBookmarked() {
+    showBookmarked.value = !showBookmarked.value;
+}
+
+function onToggleShowHighlight(h: "published" | "imported") {
+    if (showHighlight.value === h) {
+        showHighlight.value = "";
+    } else {
+        showHighlight.value = h;
     }
+}
+
+async function load(reset = false) {
+    totalWorkflows.value = 0;
+
+    loading.value = true;
 
     let search = filterText.value;
 
@@ -126,7 +137,7 @@ async function load(overlayLoading = false, silentLoading = false) {
     }
 
     try {
-        const tmp = await loadWorkflows({
+        const { data, headers } = await loadWorkflows({
             sortBy: sortBy.value,
             sortDesc: sortDesc.value,
             limit: limit.value,
@@ -137,58 +148,56 @@ async function load(overlayLoading = false, silentLoading = false) {
         });
 
         let filteredWorkflows = showBookmarked.value
-            ? filter(tmp, (workflow: any) => workflow.show_in_tool_panel)
-            : tmp;
+            ? filter(data, (workflow: any) => workflow.show_in_tool_panel)
+            : data;
 
         if (props.activeList === "my") {
             filteredWorkflows = filter(filteredWorkflows, (w: any) => w.owner === userStore.currentUser?.username);
         }
 
-        workflows.value = filteredWorkflows;
+        if (reset) {
+            workflowsLoaded.value = filteredWorkflows;
+        } else {
+            workflowsLoaded.value.push(...filteredWorkflows);
+        }
+
+        if (showBookmarked.value) {
+            totalWorkflows.value = filteredWorkflows.length;
+        } else {
+            totalWorkflows.value = parseInt(headers.get("Total_matches") || "0", 10) || null;
+        }
     } catch (e) {
         Toast.error(`Failed to load workflows: ${e}`);
     } finally {
         loading.value = false;
-        overlay.value = false;
     }
 }
 
-function onToggleDeleted() {
-    if (!showDeleted.value) {
-        filterText.value = `${filterText.value} is:deleted`.trim();
-    } else {
-        filterText.value = filterText.value.replace("is:deleted", "").trim();
+async function onToBottom() {
+    if (workflowsLoaded.value.length < totalWorkflows.value!) {
+        offset.value += limit.value;
+        await load();
     }
 }
 
-function onToggleBookmarked() {
-    showBookmarked.value = !showBookmarked.value;
-}
-
-function onToggleShowHighlight(h: "published" | "imported") {
-    if (showHighlight.value === h) {
-        showHighlight.value = "";
-    } else {
-        showHighlight.value = h;
-    }
-}
-
-watch([filterText, sortBy, sortDesc, showBookmarked], () => {
-    load(true);
+watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
+    console.log("filterText changed", filterText.value, sortBy.value, sortDesc.value, showBookmarked.value);
+    offset.value = 0;
+    workflowsLoaded.value = [];
+    await load(true);
 });
 
 onMounted(() => {
     if (router.currentRoute.query.owner) {
         filterText.value = `${filterText.value} user:${router.currentRoute.query.owner}`.trim();
     }
-
     load();
 });
 </script>
 
 <template>
-    <div id="workflows-list" ref="scrollContainer" class="workflows-list">
-        <div id="workflows-list-header" class="workflows-list-header mb-2" :class="{ 'scrolled-top': scrolledTop }">
+    <div id="workflows-list" class="workflows-list">
+        <div id="workflows-list-header" class="workflows-list-header mb-2">
             <div class="d-flex">
                 <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
 
@@ -294,106 +303,110 @@ onMounted(() => {
             </ListHeader>
         </div>
 
-        <BAlert v-if="loading" variant="info" show>
-            <LoadingSpan />
-        </BAlert>
-
-        <BAlert v-else-if="!loading && !overlay && noItems" id="workflow-list-empty" variant="info" show>
+        <BAlert v-if="!loading && noItems" id="workflow-list-empty" variant="info" show>
             No workflows found. You may create or import new workflows using the buttons above.
         </BAlert>
 
-        <BAlert v-else-if="!loading && !overlay && noResults" id="no-workflow-found" variant="info" show>
+        <BAlert v-else-if="!loading && noResults" id="no-workflow-found" variant="info" show>
             No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
         </BAlert>
 
-        <BOverlay
-            v-else
-            id="workflow-cards"
-            :show="overlay"
-            rounded="sm"
-            class="cards-list mt-2"
-            :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
-            <WorkflowCard
-                v-for="workflow in workflows"
-                :key="workflow.id"
-                :class="view === 'grid' ? 'grid-view ' : ''"
-                :workflow="workflow"
-                :show-highlight="showHighlight"
-                :published-view="published"
-                :grid-view="view === 'grid'"
-                @refreshList="load"
-                @tagClick="onTagClick" />
-        </BOverlay>
+        <div class="listing-layout position-relative">
+            <VirtualList
+                id="workflow-cards"
+                role="list"
+                class="listing"
+                :data-key="'id'"
+                :wrap-class="'cards-list'"
+                :data-component="{}"
+                :item-class="view === 'grid' ? 'grid-view' : 'list-view'"
+                :data-sources="workflowsLoaded"
+                @tobottom="onToBottom">
+                <template v-slot:item="{ item }">
+                    <WorkflowCard
+                        :key="item.id"
+                        :workflow="item"
+                        :show-highlight="showHighlight"
+                        :published-view="published"
+                        :grid-view="view === 'grid'"
+                        @refreshList="load"
+                        @tagClick="onTagClick" />
+                </template>
+
+                <template v-slot:footer>
+                    <BAlert v-if="loading" variant="info" show class="mt-2">
+                        <LoadingSpan message="Loading workflows..." />
+                    </BAlert>
+
+                    <span v-if="totalWorkflows" class="workflow-total">
+                        --- {{ workflowsLoaded.length }} workflows loaded out of {{ totalWorkflows }} ---
+                    </span>
+                </template>
+            </VirtualList>
+        </div>
     </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
+@import "scss/mixins.scss";
 @import "breakpoints.scss";
 
 .workflows-list {
-    container: workflow-list / inline-size;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .listing-layout {
+        height: 100%;
+
+        .listing {
+            @include absfill();
+            scroll-behavior: smooth;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+    }
+
+    .workflow-total {
+        display: grid;
+        text-align: center;
+        margin-top: 1rem;
+    }
 
     .workflows-list-header {
         top: 0;
         z-index: 100;
         background-color: white;
-
-        @container (min-width: #{$breakpoint-sm}) {
-            position: sticky;
-            &:after {
-                position: absolute;
-                content: "";
-                opacity: 0;
-                z-index: 10;
-                width: 100%;
-                height: 20px;
-                bottom: -25px;
-                pointer-events: none;
-                border-radius: 0.5rem;
-                transition: opacity 0.4s;
-                background-repeat: no-repeat;
-            }
-
-            &:after {
-                right: 0;
-                background-image: linear-gradient(
-                    to bottom,
-                    rgba(3, 0, 48, 0.1),
-                    rgba(3, 0, 48, 0.02),
-                    rgba(3, 0, 48, 0)
-                );
-            }
-
-            &:not(.scrolled-top) {
-                &:after {
-                    opacity: 1;
-                }
-            }
-        }
     }
 
     .cards-list {
-        min-height: 100px;
-    }
+        container: card-list / inline-size;
+        scroll-behavior: smooth;
 
-    .grid-view {
-        width: calc(100% / 3);
-        display: inline-grid;
-    }
+        display: flex;
+        flex-wrap: wrap;
 
-    @container (max-width: #{$breakpoint-xl}) {
-        .grid-view {
-            width: calc(100% / 2);
-            display: inline-grid;
+        .list-view {
+            width: 100%;
         }
-    }
 
-    @container (max-width: #{$breakpoint-sm}) {
         .grid-view {
-            width: 100%;
+            width: calc(100% / 3);
             display: inline-grid;
         }
+
+        @container card-list (max-width: #{$breakpoint-xl}) {
+            .grid-view {
+                width: calc(100% / 2);
+                display: inline-grid;
+            }
+        }
+
+        @container card-list (max-width: #{$breakpoint-sm}) {
+            .grid-view {
+                width: 100%;
+                display: inline-grid;
+            }
+        }
     }
 }
 </style>

From ceaf04f7e6b2ff2e4798b151a47fbf3a1a09556a Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 15:41:51 +0000
Subject: [PATCH 076/104] WorkflowList: fix click on a tag for the second time
 to remove

---
 client/src/components/Workflow/WorkflowList.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 842ec7a6a105..0001bb37bc9f 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -98,7 +98,11 @@ function updateFilter(newVal: string) {
 }
 
 function onTagClick(tag: string) {
-    filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
+    if (filterText.value.includes(tag)) {
+        filterText.value = filterText.value.replace(`tag:'${tag}'`, "").trim();
+    } else {
+        filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
+    }
 }
 
 function onToggleDeleted() {
@@ -181,7 +185,6 @@ async function onToBottom() {
 }
 
 watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
-    console.log("filterText changed", filterText.value, sortBy.value, sortDesc.value, showBookmarked.value);
     offset.value = 0;
     workflowsLoaded.value = [];
     await load(true);

From b55f8350fd2a4ca3d1dcd5a2179df634b95144e7 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 15:43:03 +0000
Subject: [PATCH 077/104] TextSummary: fix reactivity on `maxLength` changes

---
 client/src/components/Common/TextSummary.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
index cd5cfc9bcc8b..9f0ba44c566d 100644
--- a/client/src/components/Common/TextSummary.vue
+++ b/client/src/components/Common/TextSummary.vue
@@ -17,12 +17,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const showDetails = ref(false);
 
-// summarized length
-const x = Math.round(props.maxLength - props.maxLength / 2);
-
 const textTooLong = computed(() => props.description.length > props.maxLength);
 const text = computed(() =>
-    textTooLong.value && !showDetails.value ? props.description.slice(0, x) + "..." : props.description
+    textTooLong.value && !showDetails.value
+        ? props.description.slice(0, Math.round(props.maxLength - props.maxLength / 2)) + "..."
+        : props.description
 );
 </script>
 

From f14dc815a7aad75f2ea89c91752b04ea6e62b528 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 15:44:41 +0000
Subject: [PATCH 078/104] WorkflowCard: use `AsyncButton` for `Import` button

---
 client/src/components/Common/AsyncButton.vue    | 13 ++++++++++++-
 client/src/components/Workflow/WorkflowCard.vue |  9 +++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index 1c8ea86c0a88..efff4b401266 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -10,7 +10,18 @@ interface Props {
     loadingTitle?: string;
     size?: "sm" | "md" | "lg";
     action: () => Promise<void>;
-    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+
+    variant?:
+        | "outline-primary"
+        | "primary"
+        | "secondary"
+        | "success"
+        | "danger"
+        | "warning"
+        | "info"
+        | "light"
+        | "dark"
+        | "link";
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index b27ae0465e18..9618a01132f5 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -10,6 +10,7 @@ import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.se
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
+import AsyncButton from "@/components/Common/AsyncButton.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
@@ -183,16 +184,16 @@ async function onTagClick(tag: string) {
                             Edit
                         </BButton>
 
-                        <BButton
+                        <AsyncButton
                             v-else
                             v-b-tooltip.hover
                             size="sm"
                             title="Import this workflow to edit"
+                            :icon="faUpload"
                             variant="outline-primary"
-                            @click="onImport">
-                            <FontAwesomeIcon :icon="faUpload" />
+                            :action="onImport">
                             Import
-                        </BButton>
+                        </AsyncButton>
 
                         <WorkflowRunButton :id="workflow.id" />
                     </div>

From d103231992bd2f0cefd4a6c42052b9800b1723c4 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 15:55:51 +0000
Subject: [PATCH 079/104] WorkflowCard: add `focus-within` css for the rename
 button

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

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 9618a01132f5..6eb563f95230 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -233,7 +233,8 @@ async function onTagClick(tag: string) {
         opacity: 0;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         .workflow-rename {
             opacity: 1;
         }
@@ -252,9 +253,9 @@ async function onTagClick(tag: string) {
 
         .workflow-count-actions {
             display: flex;
+            gap: 0.25rem;
             align-self: baseline;
             align-items: center;
-            gap: 0.5rem;
             flex-direction: row;
         }
 

From ec527829911e9d904a6b4ac9cac449eadf03263e Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 16:24:46 +0000
Subject: [PATCH 080/104] WorkflowListActions: delete unused codes in

---
 .../components/Workflow/WorkflowListActions.vue  | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowListActions.vue b/client/src/components/Workflow/WorkflowListActions.vue
index fdd7402a534b..1c03e3c31ca9 100644
--- a/client/src/components/Workflow/WorkflowListActions.vue
+++ b/client/src/components/Workflow/WorkflowListActions.vue
@@ -2,18 +2,13 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BModal } from "bootstrap-vue";
-import { ref } from "vue";
+import { BButton } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
-import WorkflowCreate from "@/components/Workflow/WorkflowCreate.vue";
-
 library.add(faPlus, faUpload);
 
 const router = useRouter();
 
-const showCreateModal = ref(false);
-
 function navigateToImport() {
     router.push("/workflows/import");
 }
@@ -33,7 +28,6 @@ function navigateToOldCreate() {
                 title="Create new workflow"
                 variant="outline-primary"
                 @click="navigateToOldCreate">
-                <!-- @click="showCreateModal = !showCreateModal"> -->
                 <FontAwesomeIcon :icon="faPlus" />
                 Create
             </BButton>
@@ -49,13 +43,5 @@ function navigateToOldCreate() {
                 Import
             </BButton>
         </div>
-
-        <BModal v-model="showCreateModal" hide-footer centered>
-            <template v-slot:modal-title>
-                <h4 class="modal-title">Create new workflow</h4>
-            </template>
-
-            <WorkflowCreate modal-view />
-        </BModal>
     </div>
 </template>

From 3de912d8c6bf4f83c13e3d3da2f932df7d1bdf73 Mon Sep 17 00:00:00 2001
From: Alireza Heidri <itisalirh@gmail.com>
Date: Tue, 12 Dec 2023 16:28:25 +0000
Subject: [PATCH 081/104] rename `client/src/components/Workflow/test-utils.ts`
 to `testUtils`

---
 client/src/components/Workflow/WorkflowList.test.ts            | 2 +-
 client/src/components/Workflow/WorkflowRunButton.test.ts       | 2 +-
 client/src/components/Workflow/{test-utils.ts => testUtils.ts} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename client/src/components/Workflow/{test-utils.ts => testUtils.ts} (100%)

diff --git a/client/src/components/Workflow/WorkflowList.test.ts b/client/src/components/Workflow/WorkflowList.test.ts
index b3a8bc915448..6d98ef33714d 100644
--- a/client/src/components/Workflow/WorkflowList.test.ts
+++ b/client/src/components/Workflow/WorkflowList.test.ts
@@ -7,7 +7,7 @@ import { setActivePinia } from "pinia";
 import { mockFetcher } from "@/api/schema/__mocks__";
 import { useUserStore } from "@/stores/userStore";
 
-import { generateRandomWorkflowList } from "./test-utils";
+import { generateRandomWorkflowList } from "./testUtils";
 
 import WorkflowList from "./WorkflowList.vue";
 
diff --git a/client/src/components/Workflow/WorkflowRunButton.test.ts b/client/src/components/Workflow/WorkflowRunButton.test.ts
index 5af0608d0ff5..8672154e1b01 100644
--- a/client/src/components/Workflow/WorkflowRunButton.test.ts
+++ b/client/src/components/Workflow/WorkflowRunButton.test.ts
@@ -1,7 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
-import { generateRandomString } from "./test-utils";
+import { generateRandomString } from "./testUtils";
 
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 
diff --git a/client/src/components/Workflow/test-utils.ts b/client/src/components/Workflow/testUtils.ts
similarity index 100%
rename from client/src/components/Workflow/test-utils.ts
rename to client/src/components/Workflow/testUtils.ts

From a672ae7491d69625a9d6aaf4d8dcd838a9eb1db7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:27:11 +0100
Subject: [PATCH 082/104] drop `AdvancedFilteringHelpModal`

---
 .../Common/AdvancedFilteringHelpModal.vue     | 58 -------------------
 1 file changed, 58 deletions(-)
 delete mode 100644 client/src/components/Common/AdvancedFilteringHelpModal.vue

diff --git a/client/src/components/Common/AdvancedFilteringHelpModal.vue b/client/src/components/Common/AdvancedFilteringHelpModal.vue
deleted file mode 100644
index 156239691cfa..000000000000
--- a/client/src/components/Common/AdvancedFilteringHelpModal.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { BModal } from "bootstrap-vue";
-
-type FilterOption = {
-    filter: string;
-    description: string;
-};
-
-interface Props {
-    visible: boolean;
-    title: string;
-    filterOptions?: FilterOption[];
-}
-
-withDefaults(defineProps<Props>(), {
-    title: "",
-    filterOptions: () => [
-        { filter: "name", description: "Shows items with the given sequence of characters in their names." },
-    ],
-});
-
-defineEmits<{
-    (e: "close"): void;
-}>();
-</script>
-
-<template>
-    <BModal
-        :visible="visible"
-        :title="`Filtering Options Help - ${title}`"
-        ok-only
-        @ok="() => $emit('close')"
-        @hide="() => $emit('close')">
-        <div>
-            <p>This input can be used to filter the {{ title }} displayed.</p>
-
-            <p>
-                Text entered here will be searched against {{ title }}. Additionally, advanced filtering tags can be
-                used to refine the search more precisely. Filtering tags are of the form
-                <code>&lt;tag_name&gt;:&lt;tag_value&gt;</code> or <code>&lt;tag_name&gt;:'&lt;tag_value&gt;'</code>.
-                For instance to search just for RNAseq in the {{ title }} name, <code>name:rnsseq</code> can be used.
-                Notice by default the search is not case-sensitive. If the quoted version of tag is used, the search is
-                case sensitive and only full matches will be returned. So <code>name:'RNAseq'</code> would show only
-                {{ title }} named exactly <code>RNAseq</code>.
-            </p>
-
-            <p>The available filtering tags are:</p>
-            <dl>
-                <div v-for="(fo, index) in filterOptions" :key="index" class="mb-2">
-                    <dt>
-                        <code>{{ fo.filter }}</code>
-                    </dt>
-                    <dd>{{ fo.description }}</dd>
-                </div>
-            </dl>
-        </div>
-    </BModal>
-</template>

From c902501ada7e0f43aee162615c83a88d3b3aa4ca Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:38:33 +0100
Subject: [PATCH 083/104] `WorkflowActions`: rename `if` to `condition`

---
 .../components/Workflow/WorkflowActions.vue   | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index cff313b2c668..fa1bb5050f49 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -32,7 +32,7 @@ interface Props {
 }
 
 type BaseAction = {
-    if?: boolean;
+    condition?: boolean;
     class?: string;
     title: string;
     tooltip?: string;
@@ -126,7 +126,7 @@ async function onDelete() {
 const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
     return [
         {
-            if: !shared.value && !props.workflow.show_in_tool_panel,
+            condition: !shared.value && !props.workflow.show_in_tool_panel,
             class: "workflow-bookmark-button-add",
             component: "async",
             title: "Add bookmarks",
@@ -137,7 +137,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
             action: () => onToggleBookmark(true),
         },
         {
-            if: !shared.value && props.workflow.show_in_tool_panel,
+            condition: !shared.value && props.workflow.show_in_tool_panel,
             class: "workflow-bookmark-button-remove",
             component: "async",
             title: "Remove bookmark",
@@ -148,7 +148,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
             action: () => onToggleBookmark(false),
         },
         {
-            if: true,
+            condition: true,
             class: "workflow-view-button",
             component: "button",
             title: "View workflow",
@@ -164,7 +164,7 @@ const actions: ComputedRef<(AAction | BAction)[]> = computed(() => {
 const menuActions: ComputedRef<BAction[]> = computed(() => {
     return [
         {
-            if: !shared.value && !props.workflow.deleted,
+            condition: !shared.value && !props.workflow.deleted,
             class: "workflow-delete-button",
             component: "button",
             title: "Delete workflow",
@@ -175,7 +175,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
             onClick: () => onDelete(),
         },
         {
-            if: sourceType.value.includes("trs"),
+            condition: sourceType.value.includes("trs"),
             class: "source-trs-button",
             component: "button",
             title: `View on ${props.workflow.source_metadata?.trs_server}`,
@@ -186,7 +186,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
             variant: "link",
         },
         {
-            if: sourceType.value == "url",
+            condition: sourceType.value == "url",
             class: "workflow-view-external-link-button",
             component: "button",
             title: "View external link",
@@ -197,7 +197,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
             variant: "link",
         },
         {
-            if: !props.workflow.deleted,
+            condition: !props.workflow.deleted,
             class: "workflow-export-button",
             component: "button",
             title: "Export",
@@ -214,7 +214,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
     <div class="workflow-actions flex-gapx-1">
         <div v-for="action in actions" :key="action.class">
             <AsyncButton
-                v-if="action.if && action.component === 'async'"
+                v-if="action.condition && action.component === 'async'"
                 v-b-tooltip.hover
                 :class="action.class"
                 class="inline-icon-button"
@@ -225,7 +225,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 :action="action.action" />
 
             <BButton
-                v-if="action.if && action.component === 'button'"
+                v-else-if="action.condition && action.component === 'button'"
                 v-b-tooltip.hover
                 :class="action.class"
                 class="inline-icon-button"
@@ -252,7 +252,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
             </template>
 
             <BDropdownItem
-                v-for="action in menuActions.filter((a) => a.if).reverse()"
+                v-for="action in menuActions.filter((a) => a.condition).reverse()"
                 :key="action.class"
                 :class="action.class"
                 :href="action.href ?? undefined"

From eeae4b4013dea9ec85c569905c969a9d35e61850 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:42:27 +0100
Subject: [PATCH 084/104] fix `WorkflowCreate` issue

---
 client/src/components/Workflow/WorkflowCreate.vue   | 13 ++++++++++---
 .../src/components/Workflow/workflows.services.ts   |  8 +++-----
 client/src/entry/analysis/router.js                 | 12 ------------
 lib/galaxy/webapps/galaxy/buildapp.py               |  1 -
 4 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCreate.vue b/client/src/components/Workflow/WorkflowCreate.vue
index 4d47c48b6ff9..f207e9617a49 100644
--- a/client/src/components/Workflow/WorkflowCreate.vue
+++ b/client/src/components/Workflow/WorkflowCreate.vue
@@ -4,6 +4,7 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { type AxiosError } from "axios";
 import { BFormInput } from "bootstrap-vue";
 import { ref } from "vue";
+import { useRouter } from "vue-router/composables";
 
 import { createWorkflow } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
@@ -14,18 +15,24 @@ import Heading from "@/components/Common/Heading.vue";
 library.add(faCheck);
 
 interface Pros {
-    modalView: boolean;
+    showHeading: boolean;
 }
 
 defineProps<Pros>();
 
+const router = useRouter();
+
 const workflowAnnotation = ref("");
 const workflowName = ref("Unnamed workflow");
 const workflowNameInput = ref<HTMLInputElement | null>(null);
 
 async function onCreate() {
     try {
-        await createWorkflow(workflowName.value, workflowAnnotation.value);
+        const data = await createWorkflow(workflowName.value, workflowAnnotation.value);
+
+        Toast.success(data.message);
+
+        router.push(`/workflows/edit?id=${data.id}`);
     } catch (e) {
         const error = e as AxiosError<{ err_msg?: string }>;
 
@@ -36,7 +43,7 @@ async function onCreate() {
 
 <template>
     <div>
-        <Heading v-if="!modalView" h1 separator size="xl">Create workflow</Heading>
+        <Heading v-if="!showHeading" h1 separator size="xl">Create workflow</Heading>
 
         <label for="workflow-name-input" class="font-weight-bold"> Workflow name </label>
         <BFormInput
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index caadf22aa5ab..b8d21a8112d4 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -70,11 +70,9 @@ export async function undeleteWorkflow(id: string): Promise<Workflow> {
 }
 
 export async function createWorkflow(workflowName: string, workflowAnnotation: string) {
-    const { data } = await axios.post(withPrefix("/api/workflows"), {
-        workflow: {
-            name: workflowName,
-            annotation: [workflowAnnotation],
-        },
+    const { data } = await axios.put(withPrefix("/workflow/create"), {
+        workflow_name: workflowName,
+        workflow_annotation: workflowAnnotation,
     });
     return data;
 }
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index ca2316718999..21ff320e7ce1 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -499,18 +499,6 @@ export function getRouter(Galaxy) {
                         path: "welcome/new",
                         component: NewUserWelcome,
                     },
-                    {
-                        path: "workflows/create_old",
-                        component: FormGeneric,
-                        props: {
-                            url: "/workflow/create",
-                            redirect: "/workflows/edit",
-                            active_tab: "workflow",
-                            submitTitle: "Create",
-                            submitIcon: "fa-check",
-                            cancelRedirect: "/workflows/list",
-                        },
-                    },
                     {
                         path: "workflows/create",
                         component: WorkflowCreate,
diff --git a/lib/galaxy/webapps/galaxy/buildapp.py b/lib/galaxy/webapps/galaxy/buildapp.py
index 02ca983cc752..2ff3ea8c2e1e 100644
--- a/lib/galaxy/webapps/galaxy/buildapp.py
+++ b/lib/galaxy/webapps/galaxy/buildapp.py
@@ -262,7 +262,6 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/jobs/submission/success")
     webapp.add_client_route("/jobs/{job_id}/view")
     webapp.add_client_route("/workflows/list")
-    webapp.add_client_route("/workflows/create_old")
     webapp.add_client_route("/workflows/list_published")
     webapp.add_client_route("/workflows/list_shared_with_me")
     webapp.add_client_route("/workflows/edit")

From 63002ef6d186e124688b5f2e1f77c6250294b722 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:45:19 +0100
Subject: [PATCH 085/104] `WorkflowList`: add filtering menu help modal

---
 .../src/components/Workflow/WorkflowList.vue  | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 0001bb37bc9f..242992ec159c 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -24,6 +24,37 @@ import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
 
 library.add(faGlobe, faStar, faTrash, faUpload);
 
+const helpHtml = `<div>
+<p>This input can be used to filter the workflows displayed.</p>
+
+<p>
+    Text entered here will be searched against workflow names and workflow
+    tags. Additionally, advanced filtering tags can be used to refine the
+    search more precisely. Filtering tags are of the form
+    <code>&lt;tag_name&gt;:&lt;tag_value&gt;</code> or
+    <code>&lt;tag_name&gt;:'&lt;tag_value&gt;'</code>. For instance to
+    search just for RNAseq in the workflow name,
+    <code>name:rnsseq</code> can be used. Notice by default the search is
+    not case-sensitive. If the quoted version of tag is used, the search is
+    case sensitive and only full matches will be returned. So
+    <code>name:'RNAseq'</code> would show only workflows named exactly
+    <code>RNAseq</code>.
+</p>
+
+<p>The available filtering tags are:</p>
+<dl>
+    <dt><code>name</code></dt>
+    <dd>
+        Shows workflows with the given sequence of characters in their names.
+    </dd>
+    <dt><code>tag</code></dt>
+    <dd>
+        Shows workflows with the given workflow tag. You may also click
+        on a tag to filter on that tag directly.
+    </dd>
+</dl>
+</div>`;
+
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
 
@@ -233,11 +264,15 @@ onMounted(() => {
                 class="mb-2"
                 :filter-class="WorkflowFilters"
                 :filter-text.sync="filterText"
-                :loading="loading"
+                :loading="loading || overlay"
                 has-help
                 :placeholder="searchPlaceHolder"
                 :show-advanced.sync="showAdvanced"
-                @updateFilter="updateFilter" />
+                @updateFilter="updateFilter">
+                <template v-slot:menu-help-text>
+                    <div v-html="helpHtml"></div>
+                </template>
+            </FilterMenu>
 
             <ListHeader ref="listHeader" show-view-toggle>
                 <template v-slot:extra-filter>

From d3003ac9cc14cd287bb6911a7ba57731c817c81c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:48:04 +0100
Subject: [PATCH 086/104] fix user store error for preferredListViewMode

---
 client/src/stores/userStore.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index c454b2d0aeff..e5296255d9ac 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -38,14 +38,13 @@ interface Preferences {
 type ListViewMode = "grid" | "list";
 
 export const useUserStore = defineStore("userStore", () => {
-    const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid");
-
     const currentUser = ref<User | AnonymousUser | null>(null);
     const currentPreferences = ref<Preferences | null>(null);
 
     // explicitly pass current User, because userStore might not exist yet
     const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools", currentUser);
     const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", false, currentUser);
+    const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
 
     let loadPromise: Promise<void> | null = null;
 

From 5ecaa349999ccd934676157f4f149e32c7465eb2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:49:35 +0100
Subject: [PATCH 087/104] improve `workflow-count-actions` icons styling

---
 client/src/components/Workflow/WorkflowActions.vue | 6 +++---
 client/src/components/Workflow/WorkflowCard.vue    | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index fa1bb5050f49..cb7f4646aac0 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -211,13 +211,13 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 </script>
 
 <template>
-    <div class="workflow-actions flex-gapx-1">
+    <div class="workflow-actions">
         <div v-for="action in actions" :key="action.class">
             <AsyncButton
                 v-if="action.condition && action.component === 'async'"
                 v-b-tooltip.hover
                 :class="action.class"
-                class="inline-icon-button"
+                class="inline-icon-button mr-1"
                 :variant="action.variant"
                 :size="action.size"
                 :title="action.tooltip"
@@ -228,7 +228,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 v-else-if="action.condition && action.component === 'button'"
                 v-b-tooltip.hover
                 :class="action.class"
-                class="inline-icon-button"
+                class="inline-icon-button mr-1"
                 :variant="action.variant"
                 :size="action.size"
                 :title="action.tooltip"
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 6eb563f95230..1710c737a553 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -131,7 +131,7 @@ async function onTagClick(tag: string) {
                     </div>
 
                     <div class="workflow-count-actions">
-                        <WorkflowInvocationsCount class="ml-1" :workflow="workflow" />
+                        <WorkflowInvocationsCount class="mx-1" :workflow="workflow" />
 
                         <WorkflowActions
                             :workflow="workflow"
@@ -227,7 +227,7 @@ async function onTagClick(tag: string) {
 
 .workflow-card {
     container: workflow-card / inline-size;
-    margin: 0 0.25rem 0.5rem 0.25rem;
+    padding: 0 0.25rem 0.5rem 0.25rem;
 
     .workflow-rename {
         opacity: 0;
@@ -253,7 +253,6 @@ async function onTagClick(tag: string) {
 
         .workflow-count-actions {
             display: flex;
-            gap: 0.25rem;
             align-self: baseline;
             align-items: center;
             flex-direction: row;

From fad43397a04f4816d73b7bcf8a1a08f483ba9532 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Jan 2024 15:52:56 +0100
Subject: [PATCH 088/104] `WorkflowList`: add overlay loading and pagination

---
 .../src/components/Workflow/WorkflowList.vue  | 108 ++++++++----------
 1 file changed, 46 insertions(+), 62 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 242992ec159c..95326c10ebb2 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -2,12 +2,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faGlobe, faStar, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNav, BNavItem } from "bootstrap-vue";
+import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
 import { filter } from "underscore";
 import { computed, type ComputedRef, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
-//@ts-ignore missing typedefs
-import VirtualList from "vue-virtual-scroll-list";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
@@ -69,16 +67,17 @@ const props = withDefaults(defineProps<Props>(), {
 const router = useRouter();
 const userStore = useUserStore();
 
-const limit = ref(70);
+const limit = ref(24);
 const offset = ref(0);
 const loading = ref(true);
+const overlay = ref(false);
 const filterText = ref("");
+const totalWorkflows = ref(0);
 const showAdvanced = ref(false);
 const showBookmarked = ref(false);
 const listHeader = ref<any>(null);
 const advancedFiltering = ref<any>(null);
 const workflowsLoaded = ref<WorkflowsList>([]);
-const totalWorkflows = ref<number | null>(null);
 const showHighlight = ref<"published" | "imported" | "">("");
 
 const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
@@ -118,6 +117,7 @@ const searchPlaceHolder = computed(() => {
 const published = computed(() => props.activeList === "published");
 const sharedWithMe = computed(() => props.activeList === "shared_with_me");
 const showDeleted = computed(() => filterText.value.includes("is:deleted"));
+const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
 const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
@@ -156,10 +156,12 @@ function onToggleShowHighlight(h: "published" | "imported") {
     }
 }
 
-async function load(reset = false) {
-    totalWorkflows.value = 0;
-
+async function load(overlayLoading = false) {
+    if (overlayLoading) {
+        overlay.value = true;
+    } else {
     loading.value = true;
+    }
 
     let search = filterText.value;
 
@@ -190,34 +192,28 @@ async function load(reset = false) {
             filteredWorkflows = filter(filteredWorkflows, (w: any) => w.owner === userStore.currentUser?.username);
         }
 
-        if (reset) {
             workflowsLoaded.value = filteredWorkflows;
-        } else {
-            workflowsLoaded.value.push(...filteredWorkflows);
-        }
 
         if (showBookmarked.value) {
             totalWorkflows.value = filteredWorkflows.length;
         } else {
-            totalWorkflows.value = parseInt(headers.get("Total_matches") || "0", 10) || null;
+            totalWorkflows.value = parseInt(headers.get("Total_matches") || "0", 10) || 0;
         }
     } catch (e) {
         Toast.error(`Failed to load workflows: ${e}`);
     } finally {
+        overlay.value = false;
         loading.value = false;
     }
 }
 
-async function onToBottom() {
-    if (workflowsLoaded.value.length < totalWorkflows.value!) {
-        offset.value += limit.value;
-        await load();
-    }
+async function onPageChange(page: number) {
+    offset.value = (page - 1) * limit.value;
+    await load(true);
 }
 
 watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
     offset.value = 0;
-    workflowsLoaded.value = [];
     await load(true);
 });
 
@@ -341,47 +337,47 @@ onMounted(() => {
             </ListHeader>
         </div>
 
-        <BAlert v-if="!loading && noItems" id="workflow-list-empty" variant="info" show>
+        <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>
 
-        <BAlert v-else-if="!loading && noResults" id="no-workflow-found" variant="info" show>
+        <BAlert v-else-if="!loading && !overlay && noResults" id="no-workflow-found" variant="info" show>
             No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
         </BAlert>
 
-        <div class="listing-layout position-relative">
-            <VirtualList
+        <BOverlay
+            v-else
                 id="workflow-cards"
-                role="list"
-                class="listing"
-                :data-key="'id'"
-                :wrap-class="'cards-list'"
-                :data-component="{}"
-                :item-class="view === 'grid' ? 'grid-view' : 'list-view'"
-                :data-sources="workflowsLoaded"
-                @tobottom="onToBottom">
-                <template v-slot:item="{ item }">
+            :show="overlay"
+            rounded="sm"
+            class="cards-list mt-2"
+            :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
                     <WorkflowCard
-                        :key="item.id"
-                        :workflow="item"
+                v-for="w in workflowsLoaded"
+                :key="w.id"
+                :workflow="w"
                         :show-highlight="showHighlight"
                         :published-view="published"
                         :grid-view="view === 'grid'"
+                :class="view === 'grid' ? 'grid-view' : 'list-view'"
                         @refreshList="load"
                         @tagClick="onTagClick" />
-                </template>
-
-                <template v-slot:footer>
-                    <BAlert v-if="loading" variant="info" show class="mt-2">
-                        <LoadingSpan message="Loading workflows..." />
-                    </BAlert>
 
-                    <span v-if="totalWorkflows" class="workflow-total">
-                        --- {{ workflowsLoaded.length }} workflows loaded out of {{ totalWorkflows }} ---
-                    </span>
-                </template>
-            </VirtualList>
-        </div>
+            <BPagination
+                v-if="!loading && totalWorkflows > limit"
+                class="mt-2 w-100"
+                :value="currentPage"
+                :total-rows="totalWorkflows"
+                :per-page="limit"
+                align="center"
+                first-number
+                last-number
+                @change="onPageChange" />
+        </BOverlay>
     </div>
 </template>
 
@@ -390,20 +386,10 @@ onMounted(() => {
 @import "breakpoints.scss";
 
 .workflows-list {
+    overflow: auto;
     display: flex;
     flex-direction: column;
 
-    .listing-layout {
-        height: 100%;
-
-        .listing {
-            @include absfill();
-            scroll-behavior: smooth;
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-    }
-
     .workflow-total {
         display: grid;
         text-align: center;
@@ -419,9 +405,10 @@ onMounted(() => {
     .cards-list {
         container: card-list / inline-size;
         scroll-behavior: smooth;
+        min-height: 150px;
 
-        display: flex;
-        flex-wrap: wrap;
+        overflow-y: auto;
+        overflow-x: hidden;
 
         .list-view {
             width: 100%;
@@ -429,20 +416,17 @@ onMounted(() => {
 
         .grid-view {
             width: calc(100% / 3);
-            display: inline-grid;
         }
 
         @container card-list (max-width: #{$breakpoint-xl}) {
             .grid-view {
                 width: calc(100% / 2);
-                display: inline-grid;
             }
         }
 
         @container card-list (max-width: #{$breakpoint-sm}) {
             .grid-view {
                 width: 100%;
-                display: inline-grid;
             }
         }
     }

From 21130b9479973af7225195fe1d031ec33f5c3f0b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 16:44:26 +0100
Subject: [PATCH 089/104] use fixed-width for icons and update styles

---
 client/src/components/Common/AsyncButton.vue        |  2 +-
 client/src/components/Workflow/WorkflowActions.vue  |  4 ++--
 client/src/components/Workflow/WorkflowCard.vue     | 13 +++++--------
 .../src/components/Workflow/WorkflowIndicators.vue  |  4 ++--
 client/src/components/Workflow/WorkflowList.vue     |  5 ++---
 client/src/style/scss/ui.scss                       |  2 +-
 6 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index efff4b401266..75265c6f2dad 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -49,7 +49,7 @@ async function onClick() {
         :disabled="loading || disabled"
         @click="onClick">
         <span v-if="loading" class="loading-icon fa fa-spinner fa-spin" :title="loadingTitle" />
-        <FontAwesomeIcon v-else :icon="props.icon" />
+        <FontAwesomeIcon v-else :icon="props.icon" fixed-width />
         <slot></slot>
     </BButton>
 </template>
diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
index cb7f4646aac0..fe3fce8c7f53 100644
--- a/client/src/components/Workflow/WorkflowActions.vue
+++ b/client/src/components/Workflow/WorkflowActions.vue
@@ -234,7 +234,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 :title="action.tooltip"
                 :href="action.href"
                 @click="action.onClick">
-                <FontAwesomeIcon :icon="action.icon" />
+                <FontAwesomeIcon :icon="action.icon" fixed-width />
             </BButton>
         </div>
 
@@ -259,7 +259,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
                 :title="action.title"
                 :target="action.target"
                 @click="action.onClick?.()">
-                <FontAwesomeIcon :icon="action.icon" />
+                <FontAwesomeIcon :icon="action.icon" fixed-width />
                 <span>{{ action.title }}</span>
             </BDropdownItem>
         </BDropdown>
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 1710c737a553..e9d4aea88d85 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -161,7 +161,6 @@ async function onTagClick(tag: string) {
 
                 <div class="workflow-card-actions">
                     <WorkflowActionsExtend
-                        class="mr-2"
                         :workflow="workflow"
                         :published="publishedView"
                         @refreshList="emit('refreshList', true)" />
@@ -180,7 +179,7 @@ async function onTagClick(tag: string) {
                             "
                             variant="outline-primary"
                             @click="onEdit">
-                            <FontAwesomeIcon :icon="faEdit" />
+                            <FontAwesomeIcon :icon="faEdit" fixed-width />
                             Edit
                         </BButton>
 
@@ -246,8 +245,7 @@ async function onTagClick(tag: string) {
         gap: 0.5rem;
         flex-direction: column;
         justify-content: space-between;
-        background-color: white;
-        border: 1px solid #e5e5e5;
+        border: 1px solid $brand-secondary;
         border-radius: 0.5rem;
         padding: 0.5rem;
 
@@ -273,7 +271,9 @@ async function onTagClick(tag: string) {
 
         .workflow-card-actions {
             display: flex;
-            margin-top: 0.5rem;
+            gap: 0.25rem;
+            margin-top: 0.25rem;
+            align-items: center;
             justify-content: end;
         }
 
@@ -299,9 +299,6 @@ async function onTagClick(tag: string) {
 
         @container workflow-card (max-width: #{$breakpoint-sm}) {
             .workflow-card-actions {
-                display: flex;
-                gap: 0.5rem;
-                align-items: center;
                 justify-content: space-between;
             }
         }
diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index 8b5b36f6df49..6ab02512ddb1 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -139,12 +139,12 @@ function onViewUserPublished() {
 @import "theme/blue.scss";
 
 .workflow-badge {
-    background: white;
+    background: $brand-secondary;
     color: $brand-primary;
     border: 1px solid $brand-primary;
 
     &:hover {
-        color: white;
+        color: $brand-secondary;
         background: $brand-primary;
     }
 }
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 95326c10ebb2..5971c85771c5 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -282,7 +282,7 @@ onMounted(() => {
                             :pressed="showDeleted"
                             variant="outline-primary"
                             @click="onToggleDeleted">
-                            <FontAwesomeIcon :icon="faTrash" />
+                            <FontAwesomeIcon :icon="faTrash" fixed-width />
                             Show deleted
                         </BButton>
 
@@ -294,7 +294,7 @@ onMounted(() => {
                             :pressed="showBookmarked"
                             variant="outline-primary"
                             @click="onToggleBookmarked">
-                            <FontAwesomeIcon :icon="faStar" />
+                            <FontAwesomeIcon :icon="faStar" fixed-width />
                             Show bookmarked
                         </BButton>
                     </div>
@@ -399,7 +399,6 @@ onMounted(() => {
     .workflows-list-header {
         top: 0;
         z-index: 100;
-        background-color: white;
     }
 
     .cards-list {
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 93d37fd755bd..ec436450cb75 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -462,7 +462,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .outline-badge {
     border: 1px solid $brand-primary;
     color: $brand-primary;
-    background-color: white;
+    background-color: transparent;
 
     &:hover {
         background-color: $brand-primary !important;

From 790b329d64b2f48952978cd0e21ad0d6a59dbd5b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 16:45:51 +0100
Subject: [PATCH 090/104] relocate workflow indicators

---
 .../Workflow/WorkflowIndicators.vue           | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index 6ab02512ddb1..2137b5e35ebf 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -78,6 +78,34 @@ function onViewUserPublished() {
 
 <template>
     <div>
+        <BButton
+            v-if="workflow.published && !publishedView"
+            v-b-tooltip
+            size="sm"
+            class="workflow-published-icon inline-icon-button"
+            to="/workflows/list_published"
+            title="Published workflow. Click to view all published workflows">
+            <FontAwesomeIcon :icon="faGlobe" fixed-width />
+        </BButton>
+
+        <BButton
+            v-if="sourceType.includes('trs')"
+            v-b-tooltip
+            size="sm"
+            class="workflow-trs-icon inline-icon-button"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faShieldAlt" fixed-width @click="onCopyLink" />
+        </BButton>
+
+        <BButton
+            v-if="sourceType == 'url'"
+            v-b-tooltip
+            size="sm"
+            class="workflow-external-link inline-icon-button"
+            :title="sourceTitle">
+            <FontAwesomeIcon :icon="faLink" fixed-width @click="onCopyLink" />
+        </BButton>
+
         <span class="mr-1">
             <small>
                 edited
@@ -91,7 +119,7 @@ function onViewUserPublished() {
             class="outline-badge cursor-pointer mx-1"
             :title="`'${workflow.owner}' shared this workflow with you. Click to view all workflows shared with you by '${workflow.owner}'`"
             @click="onViewMySharedByUser">
-            <FontAwesomeIcon :icon="faUsers" size="sm" />
+            <FontAwesomeIcon :icon="faUsers" size="sm" fixed-width />
             <span class="font-weight-bold"> {{ workflow.owner }} </span>
         </BBadge>
 
@@ -101,37 +129,9 @@ function onViewUserPublished() {
             class="outline-badge cursor-pointer mx-1"
             :title="publishedTitle"
             @click="onViewUserPublished">
-            <FontAwesomeIcon :icon="faUser" size="sm" />
+            <FontAwesomeIcon :icon="faUser" size="sm" fixed-width />
             <span class="font-weight-bold"> {{ workflow.owner }} </span>
         </BBadge>
-
-        <BButton
-            v-if="sourceType.includes('trs')"
-            v-b-tooltip
-            size="sm"
-            class="workflow-trs-icon inline-icon-button"
-            :title="sourceTitle">
-            <FontAwesomeIcon :icon="faShieldAlt" fixed-width @click="onCopyLink" />
-        </BButton>
-
-        <BButton
-            v-if="sourceType == 'url'"
-            v-b-tooltip
-            size="sm"
-            class="workflow-external-link inline-icon-button"
-            :title="sourceTitle">
-            <FontAwesomeIcon :icon="faLink" fixed-width @click="onCopyLink" />
-        </BButton>
-
-        <BButton
-            v-if="workflow.published && !publishedView"
-            v-b-tooltip
-            size="sm"
-            class="workflow-published-icon inline-icon-button"
-            to="/workflows/list_published"
-            title="Published workflow. Click to view all published workflows">
-            <FontAwesomeIcon :icon="faGlobe" />
-        </BButton>
     </div>
 </template>
 

From 568104642c63c32835300927048795db70b712a9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 16:47:17 +0100
Subject: [PATCH 091/104] drop highlight filter for workflow

---
 .../src/components/Workflow/WorkflowCard.vue  | 18 +----
 .../src/components/Workflow/WorkflowList.vue  | 71 ++++---------------
 2 files changed, 17 insertions(+), 72 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index e9d4aea88d85..5910a405057e 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -26,14 +26,12 @@ library.add(faEdit, faEye, faPen, faUpload);
 interface Props {
     workflow: any;
     gridView?: boolean;
-    showHighlight?: string;
     publishedView?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     gridView: false,
     publishedView: false,
-    showHighlight: "",
 });
 
 const emit = defineEmits<{
@@ -62,16 +60,6 @@ const description = computed(() => {
         return null;
     }
 });
-const showHighlightComputed = computed(() => {
-    if (!props.publishedView && props.showHighlight) {
-        if (props.showHighlight === "published") {
-            return workflow.value.published;
-        } else if (props.showHighlight === "imported") {
-            return workflow.value.source_metadata;
-        }
-    }
-    return false;
-});
 
 function onEdit() {
     router.push(`/workflows/edit?id=${workflow.value.id}`);
@@ -94,7 +82,7 @@ function toggleShowPreview(val: boolean = false) {
 async function onTagsUpdate(tags: string[]) {
     workflow.value.tags = tags;
     await updateWorkflow(workflow.value.id, { tags });
-    emit("refreshList", false, true);
+    emit("refreshList", true, true);
 }
 
 async function onTagClick(tag: string) {
@@ -107,7 +95,7 @@ async function onTagClick(tag: string) {
         <div
             class="workflow-card-container"
             :class="{
-                'workflow-shared-trs': showHighlightComputed,
+                'workflow-shared': workflow.published,
             }">
             <div>
                 <div class="d-flex justify-content-between align-items-center mb-1">
@@ -310,7 +298,7 @@ async function onTagClick(tag: string) {
         }
     }
 
-    .workflow-shared-trs {
+    .workflow-shared {
         border-left: 0.25rem solid $brand-primary;
     }
 
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 5971c85771c5..56f4bba6ecb2 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -78,7 +78,6 @@ const showBookmarked = ref(false);
 const listHeader = ref<any>(null);
 const advancedFiltering = ref<any>(null);
 const workflowsLoaded = ref<WorkflowsList>([]);
-const showHighlight = ref<"published" | "imported" | "">("");
 
 const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
     return {
@@ -148,19 +147,13 @@ function onToggleBookmarked() {
     showBookmarked.value = !showBookmarked.value;
 }
 
-function onToggleShowHighlight(h: "published" | "imported") {
-    if (showHighlight.value === h) {
-        showHighlight.value = "";
-    } else {
-        showHighlight.value = h;
-    }
-}
-
-async function load(overlayLoading = false) {
-    if (overlayLoading) {
-        overlay.value = true;
-    } else {
-    loading.value = true;
+async function load(overlayLoading = false, silent = false) {
+    if (!silent) {
+        if (overlayLoading) {
+            overlay.value = true;
+        } else {
+            loading.value = true;
+        }
     }
 
     let search = filterText.value;
@@ -192,7 +185,7 @@ async function load(overlayLoading = false) {
             filteredWorkflows = filter(filteredWorkflows, (w: any) => w.owner === userStore.currentUser?.username);
         }
 
-            workflowsLoaded.value = filteredWorkflows;
+        workflowsLoaded.value = filteredWorkflows;
 
         if (showBookmarked.value) {
             totalWorkflows.value = filteredWorkflows.length;
@@ -298,41 +291,6 @@ onMounted(() => {
                             Show bookmarked
                         </BButton>
                     </div>
-
-                    <div v-if="activeList !== 'published'">
-                        Highlights:
-                        <BButton
-                            id="highlight-published-workflows"
-                            v-b-tooltip.hover
-                            size="sm"
-                            :title="
-                                showHighlight === 'published'
-                                    ? 'Highlight published workflows'
-                                    : 'Hide published workflows highlight'
-                            "
-                            :pressed="showHighlight === 'published'"
-                            variant="outline-primary"
-                            @click="onToggleShowHighlight('published')">
-                            <FontAwesomeIcon :icon="faGlobe" />
-                            Published
-                        </BButton>
-
-                        <BButton
-                            id="highlight-imported-workflows"
-                            v-b-tooltip.hover
-                            size="sm"
-                            :title="
-                                showHighlight === 'imported'
-                                    ? 'Highlight imported workflows'
-                                    : 'Hide imported workflows highlight'
-                            "
-                            :pressed="showHighlight === 'imported'"
-                            variant="outline-primary"
-                            @click="onToggleShowHighlight('imported')">
-                            <FontAwesomeIcon :icon="faUpload" />
-                            Imported
-                        </BButton>
-                    </div>
                 </template>
             </ListHeader>
         </div>
@@ -351,21 +309,20 @@ onMounted(() => {
 
         <BOverlay
             v-else
-                id="workflow-cards"
+            id="workflow-cards"
             :show="overlay"
             rounded="sm"
             class="cards-list mt-2"
             :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
-                    <WorkflowCard
+            <WorkflowCard
                 v-for="w in workflowsLoaded"
                 :key="w.id"
                 :workflow="w"
-                        :show-highlight="showHighlight"
-                        :published-view="published"
-                        :grid-view="view === 'grid'"
+                :published-view="published"
+                :grid-view="view === 'grid'"
                 :class="view === 'grid' ? 'grid-view' : 'list-view'"
-                        @refreshList="load"
-                        @tagClick="onTagClick" />
+                @refreshList="load"
+                @tagClick="onTagClick" />
 
             <BPagination
                 v-if="!loading && totalWorkflows > limit"

From 7512177e0d7b8915490db2f4881f625dba0469ed Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 16:47:56 +0100
Subject: [PATCH 092/104] change workflow invocation count style in card view

---
 .../Workflow/WorkflowInvocationsCount.vue     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index bea2c910d69d..023644f03359 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -31,18 +31,26 @@ function onInvocations() {
             v-b-tooltip.hover
             pill
             :title="localize('View workflow invocations')"
-            class="outline-badge cursor-pointer"
+            class="outline-badge cursor-pointer list-view"
             @click="onInvocations">
             <FontAwesomeIcon :icon="faSitemap" />
             <span v-if="workflow.run_count > 0">
-                <span class="compact-view">workflow runs:</span>
+                workflow runs:
                 {{ workflow.run_count }}
             </span>
-            <span v-else>
-                <span class="compact-view">workflow never run</span>
-            </span>
+            <span v-else> workflow never run </span>
         </BBadge>
 
+        <BButton
+            v-b-tooltip.hover
+            :title="localize('View workflow invocations')"
+            class="inline-icon-button card-view"
+            variant="link"
+            size="sm"
+            @click="onInvocations">
+            <FontAwesomeIcon :icon="faSitemap" fixed-width />
+        </BButton>
+
         <BBadge
             v-if="workflow.last_run_time"
             v-b-tooltip.hover
@@ -50,9 +58,9 @@ function onInvocations() {
             :title="`Last run: ${formatDistanceToNow(parseISO(`${workflow.last_run_time}Z`), {
                 addSuffix: true,
             })}. Click to view details.`"
-            class="outline-badge cursor-pointer">
+            class="outline-badge cursor-pointer card-view">
             <FontAwesomeIcon :icon="faClock" />
-            <span class="compact-view">last run:</span>
+            last run:
             <UtcDate :date="workflow.last_run_time" mode="elapsed" />
         </BBadge>
     </div>
@@ -61,8 +69,14 @@ function onInvocations() {
 <style scoped lang="scss">
 @import "breakpoints.scss";
 
+@container (min-width: #{$breakpoint-md}) {
+    .card-view {
+        display: none;
+    }
+}
+
 @container (max-width: #{$breakpoint-md}) {
-    .compact-view {
+    .list-view {
         display: none;
     }
 }

From 76edbf158803ce07fe4020312cbee9484419eb38 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 17:10:04 +0100
Subject: [PATCH 093/104] fix stateStore setScale

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

diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
index 1204d9959176..70955b91a0d8 100644
--- a/client/src/components/Workflow/WorkflowQuickView.vue
+++ b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -24,7 +24,7 @@ const { datatypesMapper } = useDatatypesMapper();
 
 const { stateStore } = provideScopedWorkflowStores(props.id);
 
-stateStore.setScale(0.75);
+stateStore.scale = 0.75;
 
 const loading = ref(true);
 const errored = ref(false);

From 3948d88483c3b52c7c94610ffb1d4806ea2dc040 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 18 Jan 2024 17:36:23 +0100
Subject: [PATCH 094/104] enable tags edit

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

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index 5910a405057e..a8d73b0e97bd 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -141,7 +141,7 @@ async function onTagClick(tag: string) {
                     <StatelessTags
                         clickable
                         :value="workflow.tags"
-                        :disabled="true"
+                        :disabled="workflow.deleted"
                         :max-visible-tags="gridView ? 2 : 8"
                         @input="onTagsUpdate($event)"
                         @tag-click="onTagClick($event)" />

From 46e8a312ed83d0f98fafb96589ff9ed6fd3f1f27 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 13 Feb 2024 03:53:59 -0500
Subject: [PATCH 095/104] Add prefix to workflow update request

---
 client/src/components/Workflow/workflows.services.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index b8d21a8112d4..775d6d193d59 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -41,7 +41,7 @@ export async function loadWorkflows({
 }
 
 export async function updateWorkflow(id: string, changes: object): Promise<Workflow> {
-    const { data } = await axios.put(`/api/workflows/${id}`, changes);
+    const { data } = await axios.put(withPrefix(`/api/workflows/${id}`), changes);
     return data;
 }
 

From 4b3ca4c512d165a64017bcb46f25db80e3a97018 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:13:34 +0100
Subject: [PATCH 096/104] update bounds when modal opens

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

diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index 6cd518e8bb73..fb10c4567ea9 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -9,7 +9,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faChevronUp, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useElementBounding } from "@vueuse/core";
+import { useElementBounding, whenever } from "@vueuse/core";
 import { computed, nextTick, ref, watch } from "vue";
 // @ts-ignore missing types
 import Vue2Teleport from "vue2-teleport";
@@ -254,6 +254,11 @@ watch(
         bounds.update();
     }
 );
+
+whenever(isOpen, async () => {
+    await nextTick();
+    bounds.update();
+});
 </script>
 
 <template>

From 7e1c6f8feb3379770d4651ab4b62ca2668272bb0 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:14:23 +0100
Subject: [PATCH 097/104] fix background color leaking

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

diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index fb10c4567ea9..3a07de33a790 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -419,6 +419,8 @@ whenever(isOpen, async () => {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 
+    background-color: $white;
+
     .headless-multiselect__option {
         padding: 0.4rem 0.5rem;
         display: inline-block;

From 060960c8711713ce715227dae261219a7be19515 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 13 Feb 2024 15:15:17 +0100
Subject: [PATCH 098/104] fix input tag selector in
 `workflow_index_click_tag_display` with the new headless tag component
 selector

---
 lib/galaxy/selenium/navigates_galaxy.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 541ca5f63e36..f5a250853ecb 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1469,7 +1469,7 @@ def workflow_index_view_external_link(self, workflow_index=0):
 
     def workflow_index_click_tag_display(self, workflow_index=0):
         workflow_element = self.workflow_card_element(workflow_index=workflow_index)
-        workflow_element.find_element(By.CSS_SELECTOR, ".stateless-tags").click()
+        workflow_element.find_element(By.CSS_SELECTOR, ".stateless-tags .headless-multiselect .toggle-button").click()
 
     def workflow_index_add_tag(self, tag: str, workflow_index: int = 0):
         self.workflow_index_click_tag_display(workflow_index=workflow_index)

From 1b1f082591a7d924236cb2a33980fe04c83c95b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 13 Feb 2024 18:08:37 -0500
Subject: [PATCH 099/104] Add prefix to download url

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

diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
index adddc383d110..728f74ff1d9c 100644
--- a/client/src/components/Workflow/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -20,6 +20,7 @@ import { copyWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
+import { withPrefix } from "@/utils/redirect";
 
 library.add(faCaretDown, faCopy, faDownload, faFileExport, faShareAlt, farStar, faStar, faTrashRestore);
 
@@ -44,7 +45,7 @@ const { confirm } = useConfirmDialog();
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const downloadUrl = computed(() => {
-    return `/api/workflows/${props.workflow.id}/download?format=json-download`;
+    return withPrefix(`/api/workflows/${props.workflow.id}/download?format=json-download`);
 });
 const shared = computed(() => {
     if (userStore.currentUser) {

From fcc82deb9b483598e66df906e22718c6d5147142 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 14 Feb 2024 10:45:17 +0100
Subject: [PATCH 100/104] fix selenium issue with tooltips on
 `WorkflowActionsExtend`

---
 client/src/components/Workflow/WorkflowActionsExtend.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowActionsExtend.vue b/client/src/components/Workflow/WorkflowActionsExtend.vue
index 728f74ff1d9c..d5f823dd5004 100644
--- a/client/src/components/Workflow/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/WorkflowActionsExtend.vue
@@ -86,7 +86,7 @@ async function onRestore() {
             <BButton
                 v-if="!isAnonymous && !shared && !workflow.deleted"
                 id="workflow-copy-button"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :size="buttonSize"
                 title="Copy"
                 variant="outline-primary"
@@ -98,7 +98,7 @@ async function onRestore() {
             <BButton
                 v-if="!workflow.deleted"
                 id="workflow-download-button"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :size="buttonSize"
                 title="Download workflow in .ga format"
                 variant="outline-primary"
@@ -110,7 +110,7 @@ async function onRestore() {
             <BButton
                 v-if="!shared && !workflow.deleted"
                 id="workflow-share-button"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :size="buttonSize"
                 title="Share"
                 variant="outline-primary"
@@ -122,7 +122,7 @@ async function onRestore() {
             <BButton
                 v-if="workflow.deleted"
                 id="restore-button"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :size="buttonSize"
                 title="Restore"
                 variant="outline-primary"

From 10358909f518896b089d1021687fd3dc45e97ce9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 14 Feb 2024 12:16:37 +0100
Subject: [PATCH 101/104] remove unused icons in `WorkflowList`

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

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 56f4bba6ecb2..9877cd8105ab 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGlobe, faStar, faTrash, faUpload } from "@fortawesome/free-solid-svg-icons";
+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 { filter } from "underscore";
@@ -20,7 +20,7 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowCard from "@/components/Workflow/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
 
-library.add(faGlobe, faStar, faTrash, faUpload);
+library.add(faStar, faTrash);
 
 const helpHtml = `<div>
 <p>This input can be used to filter the workflows displayed.</p>

From ffe383d73705a172bf1d88a07894c9eff8bcc96d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 14 Feb 2024 12:19:57 +0100
Subject: [PATCH 102/104] always show shared icon in `WorkflowIndicators`

Co-authored-by: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
---
 client/src/components/Workflow/WorkflowIndicators.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index 2137b5e35ebf..e0f5bcbb2edc 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -79,7 +79,7 @@ function onViewUserPublished() {
 <template>
     <div>
         <BButton
-            v-if="workflow.published && !publishedView"
+            v-if="workflow.published"
             v-b-tooltip
             size="sm"
             class="workflow-published-icon inline-icon-button"

From 3548c1218bf25b1540d3308b8c1f1b5932a80207 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 15 Feb 2024 11:24:17 +0100
Subject: [PATCH 103/104] drop 'workflow invocations count'

---
 .../Workflow/WorkflowInvocationsCount.vue     | 49 +------------------
 1 file changed, 1 insertion(+), 48 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 023644f03359..16c150ab605e 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -2,14 +2,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faClock, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge } from "bootstrap-vue";
-import { formatDistanceToNow, parseISO } from "date-fns";
 import { useRouter } from "vue-router/composables";
 
 import localize from "@/utils/localization";
 
-import UtcDate from "@/components/UtcDate.vue";
-
 library.add(faClock, faSitemap);
 
 interface Props {
@@ -27,57 +23,14 @@ function onInvocations() {
 
 <template>
     <div class="workflow-invocations-count d-flex align-items-center flex-gapx-1">
-        <BBadge
-            v-b-tooltip.hover
-            pill
-            :title="localize('View workflow invocations')"
-            class="outline-badge cursor-pointer list-view"
-            @click="onInvocations">
-            <FontAwesomeIcon :icon="faSitemap" />
-            <span v-if="workflow.run_count > 0">
-                workflow runs:
-                {{ workflow.run_count }}
-            </span>
-            <span v-else> workflow never run </span>
-        </BBadge>
-
         <BButton
             v-b-tooltip.hover
             :title="localize('View workflow invocations')"
-            class="inline-icon-button card-view"
+            class="inline-icon-button"
             variant="link"
             size="sm"
             @click="onInvocations">
             <FontAwesomeIcon :icon="faSitemap" fixed-width />
         </BButton>
-
-        <BBadge
-            v-if="workflow.last_run_time"
-            v-b-tooltip.hover
-            pill
-            :title="`Last run: ${formatDistanceToNow(parseISO(`${workflow.last_run_time}Z`), {
-                addSuffix: true,
-            })}. Click to view details.`"
-            class="outline-badge cursor-pointer card-view">
-            <FontAwesomeIcon :icon="faClock" />
-            last run:
-            <UtcDate :date="workflow.last_run_time" mode="elapsed" />
-        </BBadge>
     </div>
 </template>
-
-<style scoped lang="scss">
-@import "breakpoints.scss";
-
-@container (min-width: #{$breakpoint-md}) {
-    .card-view {
-        display: none;
-    }
-}
-
-@container (max-width: #{$breakpoint-md}) {
-    .list-view {
-        display: none;
-    }
-}
-</style>

From cf95c389d4c7842778d12db8c981a5099ec1495f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 15 Feb 2024 17:53:42 +0100
Subject: [PATCH 104/104] remove workflow search in sidebar

---
 .../components/ActivityBar/ActivityBar.vue    |  4 +-
 .../src/components/Panels/WorkflowPanel.vue   | 95 -------------------
 2 files changed, 1 insertion(+), 98 deletions(-)
 delete mode 100644 client/src/components/Panels/WorkflowPanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 7f12bc1545aa..345be2ad2178 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -19,7 +19,6 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
 const { config, isConfigLoaded } = useConfig();
 
@@ -151,7 +150,7 @@ function onToggleSidebar(toggle: string) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows', 'visualizations'].includes(activity.id)"
+                                v-else-if="['tools', 'visualizations'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -193,7 +192,6 @@ function onToggleSidebar(toggle: string) {
         </div>
         <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
-            <WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
             <SettingsPanel v-else-if="isActiveSideBar('settings')" />
diff --git a/client/src/components/Panels/WorkflowPanel.vue b/client/src/components/Panels/WorkflowPanel.vue
deleted file mode 100644
index bef5d682603d..000000000000
--- a/client/src/components/Panels/WorkflowPanel.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGlobe, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
-
-import { helpHtml, WorkflowFilters } from "@/components/Workflow/WorkflowFilters";
-import { useUserStore } from "@/stores/userStore";
-import { withPrefix } from "@/utils/redirect";
-
-import FilterMenu from "@/components/Common/FilterMenu.vue";
-
-const router = useRouter();
-
-// @ts-ignore bad library types
-library.add(faUpload, faGlobe);
-
-const isAnonymous = computed(() => useUserStore().isAnonymous);
-
-function onSearch(filters: Record<string, string | boolean>, filterText?: string, query?: string) {
-    const path = "/workflows/list";
-    const routerParams = query ? { path, query: { query } } : { path };
-    router.push(routerParams);
-}
-
-function userTitle(title: string) {
-    if (isAnonymous.value == true) {
-        return `Log in to ${title}`;
-    } else {
-        return title;
-    }
-}
-</script>
-
-<template>
-    <div class="unified-panel" aria-labelledby="workflowbox-heading">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-localize class="m-1 h-sm">Workflows</h2>
-                    <b-button-group>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="create new workflow"
-                            size="sm"
-                            variant="link"
-                            :title="userTitle('Create new workflow')"
-                            :disabled="isAnonymous"
-                            @click="$router.push('/workflows/edit')">
-                            <Icon fixed-width icon="plus" />
-                        </b-button>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="import workflow"
-                            size="sm"
-                            variant="link"
-                            :title="userTitle('Import workflow')"
-                            :disabled="isAnonymous"
-                            @click="$router.push('/workflows/import')">
-                            <FontAwesomeIcon icon="upload" />
-                        </b-button>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="published workflows"
-                            size="sm"
-                            variant="link"
-                            title="Published workflows"
-                            @click="$router.push('/workflows/list_published')">
-                            <FontAwesomeIcon icon="fa-globe" />
-                        </b-button>
-                    </b-button-group>
-                </nav>
-            </div>
-        </div>
-        <div class="unified-panel-controls">
-            <div v-if="isAnonymous">
-                <b-badge class="alert-info w-100">
-                    Please <a :href="withPrefix('/login')">log in or register</a> to create workflows.
-                </b-badge>
-            </div>
-            <FilterMenu
-                v-else
-                name="Workflows"
-                :filter-class="WorkflowFilters"
-                has-help
-                menu-type="standalone"
-                @on-search="onSearch">
-                <template v-slot:menu-help-text>
-                    <div v-html="helpHtml"></div>
-                </template>
-            </FilterMenu>
-        </div>
-    </div>
-</template>