From daae119ac497b5435220d710d6ad56416d67331b Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 25 Aug 2023 00:14:23 -0500
Subject: [PATCH] replace `IndexFilter` in `WorkflowList` with `FilterMenu`
 also: - create `WorkflowFilters.js` that exports reusable `Filtering` - allow
 `MultiTags` filter type for `FilterMenu`, which allows you to   add a
 `StatelessTags` field in the menu, allowing for array values   as filter -
 allow `is:filter` filters that are Boolean filters, except, they   only be
 set to true - apart from `q=filter1&qv=val&q=filter2&qv=val&...` query
 strings   for the backend, the `Filtering` class can now also create  
 `backendFormatted` strings in the form `filter1:val filter2:val`

---
 client/src/components/Common/DelayedInput.vue |   5 +
 client/src/components/Common/FilterMenu.vue   |  43 +++++-
 .../History/Modals/SelectorModal.vue          |   2 +-
 .../components/Indices/SharingIndicators.vue  |  12 +-
 client/src/components/Page/PageList.vue       |   2 +-
 .../components/Panels/Common/ToolSearch.vue   |   3 +-
 client/src/components/Panels/WorkflowBox.vue  |  71 +---------
 .../components/Workflow/WorkflowFilters.js    | 102 ++++++++++++++
 .../src/components/Workflow/WorkflowList.vue  | 126 ++++++++---------
 client/src/utils/filtering.ts                 | 130 ++++++++++++++----
 10 files changed, 321 insertions(+), 175 deletions(-)
 create mode 100644 client/src/components/Workflow/WorkflowFilters.js

diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index bb36d5f8fb92..090e2c57f292 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -80,6 +80,11 @@ export default {
             this.setQuery(queryNew);
         },
     },
+    created() {
+        if (this.query) {
+            this.setQuery(this.query);
+        }
+    },
     methods: {
         clearTimer() {
             if (this.queryTimer) {
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index d529aab49ce4..b0e8d1250eb7 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -7,6 +7,7 @@ import { type Alias, getOperatorForAlias } from "@/utils/filtering";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import FilterMenuBoolean from "@/components/Common/FilterMenuBoolean.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 interface BackendFilterError {
     err_msg: string;
@@ -26,6 +27,8 @@ const props = withDefaults(
         name?: string;
         /** A placeholder for the main search input */
         placeholder?: string;
+        /** The delay (in ms) before the main filter is applied */
+        debounceDelay?: number;
         /** The `Filtering` class to use */
         filterClass: Filtering<any>;
         /** The current filter text in the main field */
@@ -46,6 +49,7 @@ const props = withDefaults(
     {
         name: "Menu",
         placeholder: "search for items",
+        debounceDelay: 500,
         filterText: "",
         menuType: "linked",
         showAdvanced: false,
@@ -82,7 +86,8 @@ const showHelp = ref(false);
 
 /**
  * Reactively storing and getting all filters from validFilters which are `.type == Date`
- * (This was done to make the datepickers store values in the `filters` object)
+ * and .type == 'MultiTags'
+ * (This was done to make the datepickers and tags store values in the `filters` object)
  */
 const dateFilters: Ref<{ [key: string]: string }> = ref({});
 const dateKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.type == Date);
@@ -92,6 +97,15 @@ dateKeys.forEach((key: string) => {
         dateKeys.push(key + "_gt");
     }
 });
+const multiTagFilters: Ref<{ [key: string]: Ref<string[]> }> = ref({});
+const multiTagKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.type == "MultiTags");
+multiTagKeys.forEach((key: string) => {
+    if (filters.value[key] !== undefined) {
+        multiTagFilters.value[key] = ref(filters.value[key] as string[]);
+    } else {
+        multiTagFilters.value[key] = ref([]);
+    }
+});
 watch(
     () => filters.value,
     (newFilters: { [k: string]: any }) => {
@@ -102,6 +116,13 @@ watch(
                 delete dateFilters.value[key];
             }
         });
+        multiTagKeys.forEach((key: string) => {
+            if (newFilters[key]) {
+                (multiTagFilters.value[key] as Ref<string[]>).value = newFilters[key];
+            } else {
+                (multiTagFilters.value[key] as Ref<string[]>).value = [];
+            }
+        });
     }
 );
 
@@ -149,6 +170,9 @@ function onSearch() {
     Object.keys(dateFilters.value).forEach((key) => {
         onOption(key, dateFilters.value[key]);
     });
+    Object.keys(multiTagFilters.value).forEach((key) => {
+        onOption(key, (multiTagFilters.value[key] as Ref<string[]>).value);
+    });
     const newFilterText = props.filterClass.getFilterText(filters.value);
     if (props.menuType !== "linked") {
         emit("on-search", filters.value, newFilterText);
@@ -157,6 +181,10 @@ function onSearch() {
     }
 }
 
+function onTags(filter: string, tags: string[]) {
+    (multiTagFilters.value[filter] as Ref<string[]>).value = tags;
+}
+
 function onToggle() {
     emit("update:show-advanced", !props.showAdvanced);
 }
@@ -173,7 +201,7 @@ function updateFilterText(newFilterText: string) {
             v-show="props.menuType == 'linked' || (props.menuType == 'separate' && !props.showAdvanced)"
             :class="props.filterText && 'font-weight-bold'"
             :query="props.filterText"
-            :delay="400"
+            :delay="props.debounceDelay"
             :loading="props.loading"
             :show-advanced="props.showAdvanced"
             enable-advanced
@@ -187,7 +215,6 @@ function updateFilterText(newFilterText: string) {
             aria-haspopup="true"
             size="sm"
             :pressed="props.showAdvanced"
-            :variant="props.showAdvanced ? 'info' : 'secondary'"
             :title="`Toggle Advanced Search`"
             data-description="reset query"
             @click="onToggle">
@@ -273,6 +300,16 @@ function updateFilterText(newFilterText: string) {
                         </b-input-group>
                     </span>
 
+                    <!-- is a MultiTags filter -->
+                    <span v-else-if="validFilters[filter]?.type == 'MultiTags'">
+                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
+                        <b-input-group>
+                            <StatelessTags
+                                :value="multiTagFilters[filter]?.value"
+                                @input="(tags) => onTags(filter, tags)" />
+                        </b-input-group>
+                    </span>
+
                     <!-- is any other non-Ranged/non-Boolean filter -->
                     <span v-else>
                         <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 0f52deee8b02..9888c4c0fbef 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -240,7 +240,7 @@ async function loadMore(noScroll = false) {
             <BBadge v-if="filter && !validFilter" class="alert-danger w-100">Search string too short!</BBadge>
             <b-alert v-else-if="!busy && hasNoResults" variant="danger" show>No histories found.</b-alert>
 
-            <div ref="scrollableDiv" class="history-selector-modal-list">
+            <div v-show="!showAdvanced" ref="scrollableDiv" class="history-selector-modal-list">
                 <BListGroup>
                     <BListGroupItem
                         v-for="history in filtered"
diff --git a/client/src/components/Indices/SharingIndicators.vue b/client/src/components/Indices/SharingIndicators.vue
index ee34342592b5..b2f1cd3fdae2 100644
--- a/client/src/components/Indices/SharingIndicators.vue
+++ b/client/src/components/Indices/SharingIndicators.vue
@@ -16,32 +16,32 @@ const props = defineProps<SharingIndicatorsProps>();
     <span>
         <BButton
             v-if="props.object.published"
-            v-b-tooltip.hover
+            v-b-tooltip.hover.noninteractive
             class="sharing-indicator-published"
             size="sm"
             variant="link"
             :title="'Find all published items' | localize"
-            @click.prevent="$emit('filter', 'is:published')">
+            @click.prevent="$emit('filter', 'published')">
             <FontAwesomeIcon icon="globe" />
         </BButton>
         <BButton
             v-if="props.object.importable"
-            v-b-tooltip.hover
+            v-b-tooltip.hover.noninteractive
             class="sharing-indicator-importable"
             size="sm"
             variant="link"
             :title="'Find all importable items' | localize"
-            @click.prevent="$emit('filter', 'is:importable')">
+            @click.prevent="$emit('filter', 'importable')">
             <FontAwesomeIcon icon="link" />
         </BButton>
         <BButton
             v-if="props.object.shared"
-            v-b-tooltip.hover
+            v-b-tooltip.hover.noninteractive
             class="sharing-indicator-shared"
             size="sm"
             variant="link"
             :title="'Find all items shared with me' | localize"
-            @click.prevent="$emit('filter', 'is:shared_with_me')">
+            @click.prevent="$emit('filter', 'shared_with_me')">
             <FontAwesomeIcon icon="share-alt" />
         </BButton>
     </span>
diff --git a/client/src/components/Page/PageList.vue b/client/src/components/Page/PageList.vue
index ef446e41ea67..31acb3ae2a19 100644
--- a/client/src/components/Page/PageList.vue
+++ b/client/src/components/Page/PageList.vue
@@ -52,7 +52,7 @@
             </template>
             <template v-slot:cell(sharing)="row">
                 <span v-if="row.item.published || row.item.shared || row.item.importable">
-                    <SharingIndicators :object="row.item" @filter="(filter) => appendFilter(filter, true)" />
+                    <SharingIndicators :object="row.item" @filter="(filter) => appendFilter(`is:${filter}`, true)" />
                     <CopyToClipboard
                         :title="'Copy URL' | localize"
                         :text="copyUrl(row.item)"
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 8f67db2dd555..edd179e04c91 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -158,6 +158,7 @@ function onAdvancedSearch(filters: any, filterText?: string) {
             :class="!propShowAdvanced && 'mb-3'"
             name="Tool Search"
             :placeholder="props.placeholder"
+            :debounce-delay="200"
             :filter-class="ToolFilters"
             :filter-text.sync="localFilterText"
             has-help
@@ -218,7 +219,7 @@ function onAdvancedSearch(filters: any, filterText?: string) {
             v-else
             class="mb-3"
             :query="props.query"
-            :delay="100"
+            :delay="200"
             :loading="queryPending"
             :placeholder="placeholder"
             @change="checkQuery" />
diff --git a/client/src/components/Panels/WorkflowBox.vue b/client/src/components/Panels/WorkflowBox.vue
index 5c8b76912ddc..4980b2f337bf 100644
--- a/client/src/components/Panels/WorkflowBox.vue
+++ b/client/src/components/Panels/WorkflowBox.vue
@@ -5,8 +5,8 @@ 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 Filtering, { contains, type Converter, equals, toBool, type ValidFilter } from "@/utils/filtering";
 import { withPrefix } from "@/utils/redirect";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
@@ -16,45 +16,9 @@ const router = useRouter();
 // @ts-ignore bad library types
 library.add(faUpload, faGlobe);
 
-const validFilters: Record<string, ValidFilter<string | boolean>> = {
-    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
-    tag: { placeholder: "tag", type: String, handler: contains("tag"), menuItem: true },
-    published: {
-        placeholder: "Filter on published workflows",
-        type: Boolean,
-        boolType: "is",
-        handler: equals("published", "published", toBool as Converter<string | boolean>),
-        menuItem: true,
-    },
-    importable: {
-        placeholder: "Filter on importable workflows",
-        type: Boolean,
-        boolType: "is",
-        handler: equals("importable", "importable", toBool as Converter<string | boolean>),
-        menuItem: true,
-    },
-    shared_with_me: {
-        placeholder: "Filter on workflows shared with me",
-        type: Boolean,
-        boolType: "is",
-        handler: equals("shared_with_me", "shared_with_me", toBool as Converter<string | boolean>),
-        menuItem: true,
-    },
-    deleted: {
-        placeholder: "Filter on deleted workflows",
-        type: Boolean,
-        boolType: "is",
-        handler: equals("deleted", "deleted", toBool as Converter<string | boolean>),
-        menuItem: true,
-    },
-};
-
-const WorkflowFilters: Filtering<string | boolean> = new Filtering(validFilters, undefined, false);
-
 const isAnonymous = computed(() => useUserStore().isAnonymous);
 
-function onSearch(filters: Record<string, string | boolean>, filterText?: string) {
-    const query = filterText;
+function onSearch(filters: Record<string, string | boolean>, query?: string) {
     const path = "/workflows/list";
     const routerParams = query ? { path, query: { query } } : { path };
     router.push(routerParams);
@@ -123,36 +87,7 @@ function userTitle(title: string) {
                 menu-type="standalone"
                 @on-search="onSearch">
                 <template v-slot:menu-help-text>
-                    <div>
-                        <p>This menu can be used to filter workflows in <code>workflows/list</code>.</p>
-
-                        <p>
-                            Filters entered here will be searched against workflow names and workflow tags, along with
-                            the provided checkbox filters. 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>
-                            <dt><code>is:published</code></dt>
-                            <dd>Shows published workflows.</dd>
-                            <dt><code>is:importable</code></dt>
-                            <dd>Shows importable workflows (this also means they are URL generated).</dd>
-                            <dt><code>is:shared_with_me</code></dt>
-                            <dd>Shows workflows shared by another user directly with you.</dd>
-                            <dt><code>is:deleted</code></dt>
-                            <dd>Shows deleted workflows.</dd>
-                        </dl>
-                    </div>
+                    <div v-html="helpHtml"></div>
                 </template>
             </FilterMenu>
         </div>
diff --git a/client/src/components/Workflow/WorkflowFilters.js b/client/src/components/Workflow/WorkflowFilters.js
new file mode 100644
index 000000000000..4887a13f885c
--- /dev/null
+++ b/client/src/components/Workflow/WorkflowFilters.js
@@ -0,0 +1,102 @@
+import Filtering, { contains, equals, expandNameTagWithQuotes, toBool } from "utils/filtering";
+
+export 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>
+    <dt><code>is:published</code></dt>
+    <dd>
+        Shows published workflows.
+    </dd>
+    <dt><code>is:importable</code></dt>
+    <dd>
+        Shows importable workflows (this also means they are URL generated).
+    </dd>
+    <dt><code>is:shared_with_me</code></dt>
+    <dd>
+        Shows workflows shared by another user directly with you.
+    </dd>
+    <dt><code>is:deleted</code></dt>
+    <dd>Shows deleted workflows.</dd>
+</dl>
+</div>`;
+
+const validFilters = {
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    tag: {
+        placeholder: "tag",
+        type: "MultiTags",
+        handler: contains("tag", "tag", expandNameTagWithQuotes),
+        menuItem: true,
+    },
+    published: {
+        placeholder: "Filter on published workflows",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("published", "published", toBool),
+        menuItem: true,
+    },
+    importable: {
+        placeholder: "Filter on importable workflows",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("importable", "importable", toBool),
+        menuItem: true,
+    },
+    shared_with_me: {
+        placeholder: "Filter on workflows shared with me",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("shared_with_me", "shared_with_me", toBool),
+        menuItem: true,
+    },
+    deleted: {
+        placeholder: "Filter on deleted workflows",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("deleted", "deleted", toBool),
+        menuItem: true,
+    },
+};
+
+export const WorkflowFilters = new Filtering(validFilters, undefined, false);
+
+const validPublishedFilters = {
+    ...validFilters,
+    user: { placeholder: "owner", type: String, handler: contains("user"), menuItem: true },
+    published: {
+        type: Boolean,
+        boolType: "is",
+        handler: equals("published", "published", toBool),
+        default: true,
+    },
+    importable: {
+        menuItem: false,
+    },
+};
+
+export const PublishedWorkflowFilters = new Filtering(validPublishedFilters, undefined, false);
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index bb97bad57439..aeaae7e8c931 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -9,18 +9,32 @@
         </b-alert>
         <b-row class="mb-3">
             <b-col cols="6" class="m-1">
-                <IndexFilter v-bind="filterAttrs" id="workflow-search" v-model="filter" />
+                <FilterMenu
+                    name="Workflows"
+                    placeholder="search workflows"
+                    :filter-class="filterClass"
+                    :filter-text.sync="filterText"
+                    :loading="loading"
+                    :show-advanced.sync="showAdvanced"
+                    has-help>
+                    <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 }">
+        <b-table
+            v-show="!showAdvanced"
+            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="isFiltered">
-                        No matching entries found for: <span class="font-weight-bold">{{ filter }}</span
+                    <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>
@@ -44,13 +58,13 @@
                     :value="row.item.tags"
                     :disabled="row.item.deleted || published"
                     @input="(tags) => onTags(tags, row.index)"
-                    @tag-click="onTagClick" />
+                    @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) => appendFilter(filter, true)" />
+                    @filter="(filter) => applyFilter(filter, true)" />
                 <div v-else>&#8212;</div>
             </template>
             <template v-slot:cell(show_in_tool_panel)="row">
@@ -64,9 +78,9 @@
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
             <template v-slot:cell(owner)="data">
-                <a class="workflow-filter-link-owner" href="#" @click="appendTagFilter('user', data.value)">{{
-                    data.value
-                }}</a>
+                <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" />
@@ -79,7 +93,7 @@
             </template>
         </b-table>
         <b-pagination
-            v-show="rows >= perPage"
+            v-show="!showAdvanced && rows >= perPage"
             v-model="currentPage"
             class="gx-workflows-grid-pager"
             v-bind="paginationAttrs"></b-pagination>
@@ -87,7 +101,6 @@
 </template>
 <script>
 import { getGalaxyInstance } from "app";
-import filtersMixin from "components/Indices/filtersMixin";
 import SharingIndicators from "components/Indices/SharingIndicators";
 import { storedWorkflowsProvider } from "components/providers/StoredWorkflowsProvider";
 import UtcDate from "components/UtcDate";
@@ -98,56 +111,13 @@ 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 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>
-        <dt><code>is:published</code></dt>
-        <dd>
-            Shows published workflows.
-        </dd>
-        <dt><code>is:importable</code></dt>
-        <dd>
-            Shows importable workflows (this also means they are URL generated).
-        </dd>
-        <dt><code>is:shared_with_me</code></dt>
-        <dd>
-            Shows workflows shared by another user directly with you.
-        </dd>
-        <dt><code>is:deleted</code></dt>
-        <dd>Shows deleted workflows.</dd>
-    </dl>
-</div>`;
-
 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%" } };
@@ -166,6 +136,7 @@ const PUBLISHED_FIELDS = [NAME_FIELD, TAGS_FIELD, UPDATED_FIELD, OWNER_FIELD];
 
 export default {
     components: {
+        FilterMenu,
         UtcDate,
         StatelessTags,
         WorkflowDropdown,
@@ -174,7 +145,7 @@ export default {
         SharingIndicators,
         WorkflowRunButton,
     },
-    mixins: [paginationMixin, filtersMixin],
+    mixins: [paginationMixin],
     props: {
         inputDebounceDelay: {
             type: Number,
@@ -201,22 +172,32 @@ export default {
     },
     data() {
         const fields = this.published ? PUBLISHED_FIELDS : PERSONAL_FIELDS;
-        const implicitFilter = this.published ? "is:published" : null;
+        const filterClass = this.published ? PublishedWorkflowFilters : WorkflowFilters;
         return {
             tableId: "workflow-table",
             fields: fields,
+            filterClass: filterClass,
+            filterText: this.query,
             titleSearch: "search workflows",
             workflowItemsModel: [],
             helpHtml: helpHtml,
             perPage: this.rowsPerPage(this.defaultPerPage || 20),
             dataProvider: storedWorkflowsProvider,
-            implicitFilter: implicitFilter,
-            defaultTableAttrs: { "sort-by": "update_time", "sort-desc": true, "no-sort-reset": "", fields: fields },
+            defaultTableAttrs: {
+                "sort-by": "update_time",
+                "sort-desc": true,
+                "no-sort-reset": "",
+                fields: fields,
+            },
+            showAdvanced: false,
         };
     },
     computed: {
         dataProviderParameters() {
-            const extraParams = { search: this.normalizeTag(this.effectiveFilter), skip_step_counts: true };
+            const extraParams = {
+                search: this.filterClass.getFilterText(this.filters, true),
+                skip_step_counts: true,
+            };
             if (this.published) {
                 extraParams.show_published = true;
                 extraParams.show_shared = false;
@@ -226,18 +207,22 @@ export default {
         title() {
             return this.published ? `Published Workflows` : `Workflows`;
         },
+        filters() {
+            return Object.fromEntries(this.filterClass.getFiltersForText(this.filterText));
+        },
     },
     watch: {
-        filter(val) {
+        filterText(val) {
             this.refresh();
+            // clear out the query param if the filter text is cleared
+            if (val == "" && val !== this.query) {
+                this.$router.push("/workflows/list");
+            }
         },
     },
     created() {
         this.root = getAppRoot();
         this.services = new Services();
-        if (this.query) {
-            this.filter = this.query;
-        }
     },
     methods: {
         decorateData(item) {
@@ -282,9 +267,6 @@ export default {
                 });
             this.$emit("input", workflow.tags);
         },
-        onTagClick: function (tag) {
-            this.appendTagFilter("tag", tag);
-        },
         onAdd: function (workflow) {
             if (this.currentPage == 1) {
                 this.refresh();
@@ -301,8 +283,12 @@ export default {
         onRestore: function (id) {
             this.refresh();
         },
-        normalizeTag: function (tag) {
-            return tag.replace(/(tag:')#/g, "$1name:");
+        applyFilter: function (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);
+            }
         },
     },
 };
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index f8b0cf6a34f4..89146d293359 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -9,7 +9,7 @@
  * Comparison aliases are allowed converting e.g. '>' to '-gt' and '<' to '-lt'.
  */
 
-import { omit } from "lodash";
+import { isEqual, omit } from "lodash";
 import type { DefineComponent } from "vue";
 
 export type Converter<T> = (value: T) => T;
@@ -40,7 +40,7 @@ export type ValidFilter<T> = {
     /** The `FilterMenu` input field/tooltip/label placeholder */
     placeholder?: string;
     /** The data type of the `FilterMenu` input field */
-    type?: typeof String | typeof Number | typeof Boolean | typeof Date;
+    type?: typeof String | typeof Number | typeof Boolean | typeof Date | "MultiTags";
     /** If type: Boolean:
      * - booleanType: 'default' creates: `filter:true|false|any`
      * - booleanType: 'is' creates: `is:filter`
@@ -108,6 +108,22 @@ export function expandNameTag<T>(value: T): string {
     return toLower(value);
 }
 
+/** Converts name tags starting with "#" to "'name:...'"; forces quotation marks
+ * and **is also case-sensitive**
+ * @param value
+ * @returns Lowercase value with 'name:' replaced with '#'
+ */
+export function expandNameTagWithQuotes<T>(value: T): string {
+    if (value && typeof value === "string") {
+        if (value.startsWith("'#") && value.endsWith("'")) {
+            value = value.replace(/^'#/g, "'name:") as T;
+        } else if (value.startsWith("#")) {
+            value = `'name:${value.slice(1)}'` as T;
+        }
+    }
+    return value as string;
+}
+
 /** Converts string alias to string operator, e.g.: 'gt' to '>'
  * @param alias
  * @returns Arithmetic operator, e.g.: '>'
@@ -290,26 +306,29 @@ export default class Filtering<T> {
         );
     }
 
-    /** Build a text filter from filters {filter: "value", ...}
+    /** Build a text filter from filters {filter: "value", ...} => "filter:value"
      * @param filters Object containing filters
+     * @param backendFormatted If true, returns a string formatted for the backend
      * @returns Parsed filter text string
      * */
-    getFilterText(filters: Record<string, T>): string {
-        filters = this.getValidFilters(filters);
+    getFilterText(filters: Record<string, T>, backendFormatted = false): string {
+        filters = this.getValidFilters(filters, backendFormatted);
         const hasDefaults = this.containsDefaults(filters);
 
         let newFilterText = "";
         Object.entries(filters).forEach(([key, value]) => {
             // this is a default filter, skip it if ALL default filters have default values
-            const skipDefault = hasDefaults && this.defaultFilters[key] !== undefined;
+            const skipDefault = !backendFormatted && hasDefaults && this.defaultFilters[key] !== undefined;
             if (!skipDefault && value !== null && value !== undefined && value !== "") {
                 if (newFilterText) {
                     newFilterText += " ";
                 }
-                if (this.validFilters[key]?.type == Boolean && this.validFilters[key]?.boolType == "is") {
+                if (this.validFilters[key]?.type === Boolean && this.validFilters[key]?.boolType === "is") {
                     if (value === true) {
                         newFilterText += `is:${key}`;
                     }
+                } else if (this.validFilters[key]?.type == "MultiTags" && Array.isArray(value)) {
+                    newFilterText += `${value.map((v) => `${this.toAliasKey(key)}${v}`).join(" ")}`;
                 } else if (this.quoteStrings && String(value).includes(" ")) {
                     newFilterText += `${this.toAliasKey(key)}'${value}'`;
                 } else {
@@ -337,7 +356,9 @@ export default class Filtering<T> {
      * @returns Filters as 2D array of of [field, value] pairs
      * */
     getFiltersForText(filterText: string, removeAny = true): [string, T][] {
-        const pairSplitRE = /[^\s'"]+(?:['"][^'"]*['"][^\s'"]*)*|(?:['"][^'"]*['"][^\s'"]*)+/g;
+        const pairSplitRE = this.quoteStrings
+            ? /[^\s'"]+(?:['"][^'"]*['"][^\s'"]*)*|(?:['"][^'"]*['"][^\s'"]*)+/g
+            : /(\S+):(.*?)(?=\s+\S+:|$)/g;
         const matches = filterText.match(pairSplitRE);
         let result: Record<string, T> = {};
         let hasMatches = false;
@@ -358,9 +379,27 @@ export default class Filtering<T> {
                     }
                     // replaces dashes with underscores in query field names
                     const normalizedField = field?.split("-").join("_");
-                    if (normalizedField && this.validFilters[normalizedField]) {
+                    if (
+                        normalizedField &&
+                        this.validFilters[normalizedField] &&
+                        this.validFilters[normalizedField]?.boolType !== "is"
+                    ) {
                         // removes quotation and applies lower-case to filter value
-                        result[normalizedField] = toLowerNoQuotes(value) as T;
+                        const newVal = this.quoteStrings ? (toLowerNoQuotes(value) as T) : (value as T);
+                        // if the field is a MultiTags field, we need to push each value to an array
+                        if (this.validFilters[normalizedField]?.type === "MultiTags") {
+                            if (result[normalizedField] === undefined) {
+                                result[normalizedField] = [newVal] as T;
+                            } else {
+                                (result[normalizedField] as T[]).push(newVal);
+                            }
+                        } else {
+                            result[normalizedField] = newVal;
+                        }
+                        hasMatches = true;
+                    } else if (value && field === "is" && elg === ":" && this.validFilters[value]?.boolType === "is") {
+                        // handle `is:filter` syntax
+                        result[value] = true as T;
                         hasMatches = true;
                     }
                 }
@@ -412,14 +451,24 @@ export default class Filtering<T> {
     /** Takes a filters object and returns a new object with only valid filters
      *
      * @param filters A filters object (e.g.: {hid: "3", name: "test", invalid: "x"}})
+     * @param backendFormatted default: `false` Whether to convert the values to backend format
      * @returns valid filters object (e.g.: {hid: "3", name: "test"}})
      */
-    getValidFilters(filters: Record<string, T>) {
+    getValidFilters(filters: Record<string, T>, backendFormatted = false) {
         const validFilters: Record<string, T> = {};
         Object.entries(filters).forEach(([key, value]) => {
-            const validValue = this.getConvertedValue(key, value);
-            if (validValue !== undefined) {
-                validFilters[key] = validValue;
+            if (Array.isArray(value)) {
+                const validValues = value
+                    .map((v) => this.getConvertedValue(key, v, backendFormatted))
+                    .filter((v) => v !== undefined);
+                if (validValues.length > 0) {
+                    validFilters[key] = validValues as T;
+                }
+            } else {
+                const validValue = this.getConvertedValue(key, value, backendFormatted);
+                if (validValue !== undefined) {
+                    validFilters[key] = validValue;
+                }
             }
         });
         return validFilters;
@@ -481,13 +530,15 @@ export default class Filtering<T> {
      * @returns converted value if there is a converter, else `filterValue`
      */
     getConvertedValue(filterName: string, filterValue: T, backendFormatted = false): T | undefined {
-        if (this.validFilters[filterName]) {
+        if (this.validFilters[filterName] && !Array.isArray(filterValue)) {
             const { converter } = this.validFilters[filterName]?.handler as HandlerReturn<T>;
             if (converter) {
                 if (converter == toBool && filterValue == "any") {
                     return filterValue;
-                } else if (!backendFormatted && (converter == expandNameTag || converter == toDate)) {
+                } else if (!backendFormatted && ([expandNameTag, toDate] as Converter<T>[]).includes(converter)) {
                     return toLower(filterValue) as T;
+                } else if (!backendFormatted && converter == expandNameTagWithQuotes) {
+                    return (filterValue as string).startsWith("#") ? (`'${filterValue}'` as T) : filterValue;
                 }
                 return converter(filterValue);
             } else {
@@ -519,7 +570,13 @@ export default class Filtering<T> {
         const filters = Object.fromEntries(this.getFiltersForText(filterText));
         let filterVal = filters[filterName];
         const defaultFilterValue = this.defaultFilters[filterName];
-        if (filterVal !== undefined) {
+        // if filterVal is an array, convert each value
+        if (Array.isArray(filterVal)) {
+            filterVal = filterVal
+                .map((v) => this.getConvertedValue(filterName, v, backendFormatted))
+                .filter((v) => v !== undefined) as T;
+            return filterVal;
+        } else if (filterVal !== undefined) {
             filterVal = this.getConvertedValue(filterName, filterVal, backendFormatted);
             return filterVal;
         } else if (defaultFilterValue !== undefined && typeof defaultFilterValue == "boolean") {
@@ -544,12 +601,32 @@ export default class Filtering<T> {
     setFilterValue(filterText: string, newFilter: string, newVal: T) {
         let updatedText = "";
         const oldVal = this.getFilterValue(filterText, newFilter);
-        const convVal = this.getConvertedValue(newFilter, newVal);
-        if (convVal == undefined) {
+        let convVal = this.getConvertedValue(newFilter, newVal) as T;
+        if (convVal == undefined && !Array.isArray(newVal)) {
             return filterText;
         }
+        // for MultiTags filter
+        if (this.validFilters[newFilter]?.type === "MultiTags" || Array.isArray(oldVal)) {
+            // if newVal is an array, convert each value, else put already converted val in array
+            let valuesToAdd = Array.isArray(newVal)
+                ? newVal.map((v) => this.getConvertedValue(newFilter, v)).filter((v) => v !== undefined)
+                : [convVal];
+            // if oldVal is an array, convert new value(s), and only add ones that aren't already in oldVal
+            if (Array.isArray(oldVal)) {
+                const updatedArr = [...oldVal] as T[];
+                (valuesToAdd as T[]).forEach((value) => {
+                    if (!oldVal.includes(value)) {
+                        updatedArr.push(value);
+                    } else {
+                        updatedArr.splice(updatedArr.indexOf(value), 1);
+                    }
+                });
+                valuesToAdd = updatedArr.length !== 0 ? updatedArr : oldVal;
+            }
+            convVal = valuesToAdd as T;
+        }
         const settings = { [newFilter]: convVal };
-        if (oldVal == convVal) {
+        if (isEqual(oldVal, convVal) || oldVal == convVal) {
             updatedText = this.applyFiltersToText(settings, filterText, true);
         } else {
             updatedText = this.applyFiltersToText(settings, filterText);
@@ -567,11 +644,14 @@ export default class Filtering<T> {
             if (!(key in this.validFilters)) {
                 console.error(`Invalid filter ${key}`);
             } else {
-                const filterAttribute = this.validFilters[key]!.handler.attribute;
-                const filterHandler = this.validFilters[key]!.handler.handler;
-                const itemValue = item[filterAttribute];
-                if (itemValue === undefined || !filterHandler(itemValue, filterValue)) {
-                    return false;
+                const validFilter = this.validFilters[key];
+                if (validFilter) {
+                    const filterAttribute = validFilter.handler.attribute;
+                    const filterHandler = validFilter.handler.handler;
+                    const itemValue = item[filterAttribute];
+                    if (itemValue === undefined || !filterHandler(itemValue, filterValue)) {
+                        return false;
+                    }
                 }
             }
         }