From 161c26098ec039c9129b77fba9f117ff8bfa6457 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Sat, 5 Aug 2023 19:57:24 -0500
Subject: [PATCH 01/12] Create reusable `FilterMenu` with advanced options
 Instead of creating a new filter/search with an advanced filtering menu for
 each item, this `FilterMenu` component, along with the `Filtering` class can
 be used in each case. Also modified the `Filtering` class so that we never
 need to create a `filterSettings = { "name:": "x", "create_time>": "2023" }`
 object and can instead just use: `filters = { name: "x", create_time_gt:
 "2023" }`

---
 client/src/components/Common/FilterMenu.vue   | 394 ++++++++++++++++++
 .../src/components/Common/FilterMenuRadio.vue |  42 ++
 .../History/Content/model/StatesInfo.vue      |  22 +-
 .../History/CurrentHistory/HistoryPanel.vue   |  25 +-
 .../src/components/History/HistoryFilters.js  |  81 +++-
 .../History/HistoryPublishedList.vue          | 118 ++----
 .../History/Modals/SelectorModal.vue          |  57 ++-
 client/src/stores/historyStore.ts             |   2 +-
 client/src/style/scss/ui.scss                 |   4 -
 client/src/utils/filtering.ts                 | 185 ++++----
 10 files changed, 676 insertions(+), 254 deletions(-)
 create mode 100644 client/src/components/Common/FilterMenu.vue
 create mode 100644 client/src/components/Common/FilterMenuRadio.vue

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
new file mode 100644
index 000000000000..4d1c8dbe538a
--- /dev/null
+++ b/client/src/components/Common/FilterMenu.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import { capitalize, kebabCase } from "lodash";
+import { computed, type Ref, ref, watch } from "vue";
+
+import type { Alias, ValidFilter } from "@/utils/filtering";
+import type Filtering from "@/utils/filtering";
+import { getOperatorForAlias } from "@/utils/filtering";
+
+import FilterMenuRadio from "@/components/Common/FilterMenuRadio.vue";
+
+interface BackendFilterError {
+    err_msg: string;
+    err_code: number;
+    column?: string;
+    col?: string;
+    operation?: Alias;
+    op?: Alias;
+    value?: string;
+    val?: string;
+    ValueError?: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        name?: string;
+        placeholder: string;
+        filterClass: Filtering<any>;
+        filterText: string;
+        hasHelp?: boolean;
+        searchError?: BackendFilterError;
+        showAdvanced?: boolean;
+    }>(),
+    {
+        name: "Menu",
+        placeholder: "search for items",
+        filterText: "",
+        showAdvanced: false,
+        searchError: undefined,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "update:show-advanced", showAdvanced: boolean): void;
+    (e: "update:filter-text", filter: string): void;
+    (e: "show-help", filter: string, show: boolean): void;
+}>();
+
+const defaultBoolOptions = [
+    { text: "Yes", value: true },
+    { text: "No", value: false },
+];
+
+const localFilterText = computed({
+    get: () => {
+        return props.filterText;
+    },
+    set: (newVal: any) => {
+        if (newVal !== props.filterText) {
+            updateFilterText(newVal as string);
+        }
+    },
+});
+
+const validFilters = computed(() => props.filterClass.validFilters);
+
+const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersForText(localFilterText.value)));
+
+const identifier = kebabCase(props.name);
+
+// all filters that have help info
+const helpEntries: [string, any][] = Object.entries(validFilters.value).filter(
+    ([, value]) => (value as ValidFilter<any>).helpInfo !== undefined
+);
+const helpClass: { [k: string]: ValidFilter<any> } = Object.fromEntries(helpEntries);
+const helpKeys = Object.keys(helpClass);
+const defaultHelpModalsVal = helpKeys.reduce((acc: { [k: string]: boolean }, item: string) => {
+    acc[item] = false;
+    return acc;
+}, {});
+/**
+ * An object of booleans that are used to show/hide the help modals for
+ * each filter that has them
+ */
+const helpModals: Ref<{ [k: string]: boolean }> = ref({ ...defaultHelpModalsVal });
+
+// Boolean for showing the help modal for the whole filter menu (if provided)
+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)
+ */
+const dateFilters: Ref<{ [key: string]: string }> = ref({});
+const dateEntries: [string, any][] = Object.entries(validFilters.value).filter(
+    ([, value]) => (value as ValidFilter<any>).type == Date
+);
+const dateClass: { [k: string]: ValidFilter<any> } = Object.fromEntries(dateEntries);
+const dateKeys = Object.keys(dateClass);
+for (const key in dateClass) {
+    if (dateClass[key]?.isRangeInput) {
+        dateKeys.push(key + "_lt");
+        dateKeys.push(key + "_gt");
+    }
+}
+watch(
+    () => filters.value,
+    (newFilters: { [k: string]: any }) => {
+        dateKeys.forEach((key: string) => {
+            if (newFilters[key]) {
+                dateFilters.value[key] = newFilters[key] as string;
+            } else {
+                delete dateFilters.value[key];
+            }
+        });
+    }
+);
+
+const formattedSearchError = computed(() => {
+    if (props.searchError) {
+        const { column, col, operation, op, value, val, err_msg, ValueError } = props.searchError;
+        const alias = operation || op;
+        const operator = alias ? getOperatorForAlias(alias) : ":";
+        const formatted = {
+            filter: `${column || col}${operator}`,
+            index: alias && alias !== "eq" ? `${column || col}_${alias}` : column || col,
+            value: value || val,
+            msg: err_msg,
+            typeError: ValueError,
+        };
+        return formatted;
+    } else {
+        return null;
+    }
+});
+
+function hasError(field: string) {
+    if (formattedSearchError.value && formattedSearchError.value.index == field) {
+        return formattedSearchError.value.typeError || formattedSearchError.value.msg;
+    }
+    return "";
+}
+
+/** Explicitly sets a filter: value
+ * (also closes help modal for this filter if it exists)
+ * @param filter the filter to set
+ * @param value the value to set it to
+ */
+function onOption(filter: string, value: any) {
+    filters.value[filter] = value;
+    if (helpModals.value[filter]) {
+        helpModals.value[filter] = false;
+    }
+}
+
+function onSearch() {
+    onToggle();
+    Object.keys(dateFilters.value).forEach((key) => {
+        onOption(key, dateFilters.value[key]);
+    });
+    updateFilterText(props.filterClass.getFilterText(filters.value));
+}
+
+function onToggle() {
+    emit("update:show-advanced", !props.showAdvanced);
+}
+
+function updateFilterText(newFilterText: string) {
+    emit("update:filter-text", newFilterText);
+}
+</script>
+
+<template>
+    <div>
+        <b-input-group>
+            <b-form-input
+                :id="`${identifier}-filter`"
+                v-model="localFilterText"
+                size="sm"
+                :class="filterText && 'font-weight-bold'"
+                :placeholder="props.placeholder"
+                data-description="filter text input"
+                debounce="400"
+                @keyup.esc="updateFilterText('')" />
+            <b-input-group-append>
+                <b-button
+                    :id="`${identifier}-advanced-filter-toggle`"
+                    v-b-tooltip.hover
+                    aria-haspopup="true"
+                    size="sm"
+                    :pressed="showAdvanced"
+                    :variant="showAdvanced ? 'info' : 'secondary'"
+                    data-description="show advanced filter toggle"
+                    title="Show Advanced Filter"
+                    aria-label="Show advanced filter"
+                    @click="onToggle">
+                    <icon v-if="showAdvanced" icon="angle-double-up" />
+                    <icon v-else icon="angle-double-down" />
+                </b-button>
+                <b-button
+                    v-b-tooltip.hover
+                    aria-haspopup="true"
+                    size="sm"
+                    title="Clear Filters (esc)"
+                    aria-label="Clear filters"
+                    data-description="clear filters"
+                    @click="updateFilterText('')">
+                    <icon icon="times" />
+                </b-button>
+            </b-input-group-append>
+        </b-input-group>
+        <div
+            v-if="showAdvanced"
+            class="mt-2"
+            description="advanced filters"
+            @keyup.enter="onSearch"
+            @keyup.esc="onToggle">
+            <div v-for="filter in Object.keys(validFilters)" :key="filter">
+                <span v-if="validFilters[filter]?.menuItem">
+                    <!-- is a Boolean filter -->
+                    <span v-if="validFilters[filter]?.type == Boolean">
+                        <small>{{ validFilters[filter]?.placeholder }}:</small>
+                        <FilterMenuRadio
+                            v-if="validFilters[filter]?.options"
+                            :filter="filter"
+                            :options="validFilters[filter]?.options"
+                            :settings="filters"
+                            @change="onOption" />
+                        <b-form-group v-else class="m-0">
+                            <b-form-radio-group
+                                v-model="filters[filter]"
+                                :options="defaultBoolOptions"
+                                size="sm"
+                                buttons
+                                :description="`filter ${validFilters[filter]?.placeholder}`" />
+                        </b-form-group>
+                    </span>
+
+                    <!-- is a Ranged filter -->
+                    <span v-else-if="validFilters[filter]?.isRangeInput" class="m-0">
+                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
+                        <b-input-group>
+                            <!---------------------------- GREATER THAN ---------------------------->
+                            <!-- is type: other than Date -->
+                            <b-form-input
+                                v-if="validFilters[filter]?.type != Date"
+                                :id="`${identifier}-advanced-filter-${filter}_gt`"
+                                v-model="filters[`${filter}_gt`]"
+                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
+                                size="sm"
+                                :state="hasError(`${filter}_gt`) ? false : null"
+                                :placeholder="`${validFilters[filter]?.placeholder} greater`" />
+                            <!-- is type: Date -->
+                            <b-form-input
+                                v-else-if="validFilters[filter]?.type == Date"
+                                :id="`${identifier}-advanced-filter-${filter}_gt`"
+                                v-model="dateFilters[`${filter}_gt`]"
+                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
+                                size="sm"
+                                :state="hasError(`${filter}_gt`) ? false : null"
+                                :placeholder="`${validFilters[filter]?.placeholder} after`" />
+                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
+                                <b-form-datepicker
+                                    v-model="dateFilters[`${filter}_gt`]"
+                                    reset-button
+                                    button-only
+                                    size="sm" />
+                            </b-input-group-append>
+                            <!--------------------------------------------------------------------->
+
+                            <!---------------------------- LESSER THAN ---------------------------->
+                            <!-- is type: other than Date -->
+                            <b-form-input
+                                v-if="validFilters[filter]?.type != Date"
+                                :id="`${identifier}-advanced-filter-${filter}_lt`"
+                                v-model="filters[`${filter}_lt`]"
+                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
+                                size="sm"
+                                :state="hasError(`${filter}_lt`) ? false : null"
+                                :placeholder="`${validFilters[filter]?.placeholder} lower`" />
+                            <!-- is type: Date -->
+                            <b-form-input
+                                v-else-if="validFilters[filter]?.type == Date"
+                                :id="`${identifier}-advanced-filter-${filter}_lt`"
+                                v-model="dateFilters[`${filter}_lt`]"
+                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
+                                size="sm"
+                                :state="hasError(`${filter}_lt`) ? false : null"
+                                :placeholder="`${validFilters[filter]?.placeholder} before`" />
+                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
+                                <b-form-datepicker
+                                    v-model="dateFilters[`${filter}_lt`]"
+                                    reset-button
+                                    button-only
+                                    size="sm" />
+                            </b-input-group-append>
+                            <!--------------------------------------------------------------------->
+                        </b-input-group>
+                    </span>
+
+                    <!-- is any other non-Ranged/non-Boolean filter -->
+                    <span v-else>
+                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
+                        <b-input-group>
+                            <!-- has a datalist -->
+                            <b-form-input
+                                v-if="validFilters[filter]?.datalist"
+                                :id="`${identifier}-advanced-filter-${filter}`"
+                                v-model="filters[filter]"
+                                v-b-tooltip.focus.v-danger="hasError(filter)"
+                                size="sm"
+                                :state="hasError(filter) ? false : null"
+                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
+                                list="selectList" />
+                            <b-form-datalist
+                                v-if="validFilters[filter]?.datalist"
+                                id="selectList"
+                                :options="validFilters[filter]?.datalist"></b-form-datalist>
+                            <!-- is type: Date -->
+                            <b-form-input
+                                v-else-if="validFilters[filter]?.type == Date"
+                                :id="`${identifier}-advanced-filter-${filter}`"
+                                v-model="dateFilters[filter]"
+                                v-b-tooltip.focus.v-danger="hasError(filter)"
+                                size="sm"
+                                :state="hasError(filter) ? false : null"
+                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
+                            <!-- is type: other than Date -->
+                            <b-form-input
+                                v-else
+                                :id="`${identifier}-advanced-filter-${filter}`"
+                                v-model="filters[filter]"
+                                v-b-tooltip.focus.v-danger="hasError(filter)"
+                                size="sm"
+                                :state="hasError(filter) ? false : null"
+                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
+                            <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
+                            <b-input-group-append>
+                                <b-button
+                                    v-if="validFilters[filter]?.helpInfo"
+                                    :title="`${validFilters[filter]?.placeholder} Help`"
+                                    size="sm"
+                                    @click="helpModals[filter] = true">
+                                    <icon icon="question" />
+                                </b-button>
+                                <b-form-datepicker
+                                    v-if="validFilters[filter]?.type == Date"
+                                    v-model="dateFilters[filter]"
+                                    reset-button
+                                    button-only
+                                    size="sm" />
+                            </b-input-group-append>
+                        </b-input-group>
+                    </span>
+
+                    <!-- if a filter has help component, place it within a modal -->
+                    <span v-if="validFilters[filter]?.helpInfo">
+                        <b-modal
+                            v-model="helpModals[filter]"
+                            :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
+                            ok-only>
+                            <component :is="validFilters[filter]?.helpInfo" @set-filter="onOption" />
+                        </b-modal>
+                    </span>
+                </span>
+            </div>
+
+            <!-- Perform search or cancel out (or open help modal for Menu if exists) -->
+            <div class="mt-3">
+                <b-button
+                    :id="`${identifier}-advanced-filter-submit`"
+                    class="mr-1"
+                    size="sm"
+                    variant="primary"
+                    description="apply filters"
+                    @click="onSearch">
+                    <icon icon="search" />
+                    <span v-localize>Search</span>
+                </b-button>
+                <b-button size="sm" @click="onToggle">
+                    <icon icon="redo" />
+                    <span v-localize>Cancel</span>
+                </b-button>
+                <b-button v-if="props.hasHelp" title="Search Help" size="sm" @click="showHelp = true">
+                    <icon icon="question" />
+                </b-button>
+                <span> </span>
+                <b-modal v-if="props.hasHelp" v-model="showHelp" :title="`${props.name} Advanced Search Help`" ok-only>
+                    <!-- Slot for Menu help section -->
+                    <slot name="menu-help-text"></slot>
+                </b-modal>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Common/FilterMenuRadio.vue b/client/src/components/Common/FilterMenuRadio.vue
new file mode 100644
index 000000000000..7acffeb6b774
--- /dev/null
+++ b/client/src/components/Common/FilterMenuRadio.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+    filter: { type: String, required: true },
+    options: {
+        type: Array<Object>,
+        default: () => [
+            { text: "Any", value: "any" },
+            { text: "Yes", value: true },
+            { text: "No", value: false },
+        ],
+    },
+    settings: { type: Object, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: boolean | string | undefined): void;
+}>();
+
+const value = computed({
+    get: () => {
+        const value = props.settings[props.filter];
+        return value !== undefined ? value : "any";
+    },
+    set: (newVal: boolean | string | undefined) => {
+        const value = newVal !== null ? newVal : "any";
+        emit("change", props.filter, value);
+    },
+});
+</script>
+
+<template>
+    <b-form-group class="m-0">
+        <b-form-radio-group
+            v-model="value"
+            :options="options"
+            size="sm"
+            buttons
+            :data-description="`filter ${props.filter}`" />
+    </b-form-group>
+</template>
diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
index c12f5644326b..43d3a718af35 100644
--- a/client/src/components/History/Content/model/StatesInfo.vue
+++ b/client/src/components/History/Content/model/StatesInfo.vue
@@ -1,28 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
 import { STATES } from "./states";
 import type { HelpText, States } from "./stateTypes";
 
 const props = defineProps({
-    showHelp: { type: Boolean, default: false },
-    excludeStates: { type: Array<keyof typeof STATES>, required: false, default: () => [] },
+    excludeStates: { type: Array<keyof typeof STATES>, required: false, default: () => ["empty", "failed", "upload"] },
 });
 
 const emit = defineEmits<{
-    (e: "update:show-help", showHelp: boolean): void;
     (e: "set-filter", filter: string, value: string): void;
 }>();
 
-const propShowHelp = computed({
-    get: () => {
-        return props.showHelp;
-    },
-    set: (val) => {
-        emit("update:show-help", val);
-    },
-});
-
 const states = STATES as States;
 const helpText: HelpText = {
     failed: "The job failed to run.",
@@ -36,13 +23,12 @@ if (props.excludeStates) {
 }
 
 function onFilter(value: string) {
-    propShowHelp.value = false;
-    emit("set-filter", `state:`, value);
+    emit("set-filter", `state`, value);
 }
 </script>
 
 <template>
-    <b-modal v-model="propShowHelp" title="History Item States Help" ok-only>
+    <div>
         <p>Here are all available item states in Galaxy:</p>
         <p><i>(Note that the colors for each state correspond to content item state colors in the history)</i></p>
         <dl v-for="(state, key, index) in states" :key="index">
@@ -56,5 +42,5 @@ function onFilter(value: string) {
                 <dd>{{ helpText[key] || state.text }}</dd>
             </div>
         </dl>
-    </b-modal>
+    </div>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 601f039c92e9..4609f3d2365e 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -27,12 +27,15 @@
                 @dragover.prevent
                 @dragleave.prevent="onDragLeave">
                 <slot name="navigation" :history="history" />
-                <HistoryFilters
+                <FilterMenu
                     v-if="filterable"
                     class="content-operations-filters mx-3"
+                    name="History Items"
+                    placeholder="search datasets"
+                    :filter-class="filterClass"
                     :filter-text.sync="filterText"
-                    :show-advanced.sync="showAdvanced"
-                    :search-error="formattedSearchError" />
+                    :search-error="searchError"
+                    :show-advanced.sync="showAdvanced" />
                 <section v-if="!showAdvanced">
                     <HistoryDetails :history="history" :writeable="writable" @update:history="updateHistory($event)" />
                     <HistoryMessages :history="history" />
@@ -121,7 +124,7 @@
                                     :selected="isSelected(item)"
                                     :selectable="showSelection"
                                     :filterable="filterable"
-                                    @tag-click="onTagClick"
+                                    @tag-click="updateFilterVal('tag', $event)"
                                     @tag-change="onTagChange"
                                     @toggleHighlights="updateFilterVal('related', item.hid)"
                                     @update:expand-dataset="setExpanded(item, $event)"
@@ -140,11 +143,12 @@
 </template>
 
 <script>
+import FilterMenu from "components/Common/FilterMenu";
 import { copyDataset } from "components/Dataset/services";
 import ContentItem from "components/History/Content/ContentItem";
 import ExpandedItems from "components/History/Content/ExpandedItems";
 import SelectedItems from "components/History/Content/SelectedItems";
-import { HistoryFilters as FilterClass } from "components/History/HistoryFilters";
+import { HistoryFilters } from "components/History/HistoryFilters";
 import ListingLayout from "components/History/Layout/ListingLayout";
 import { deleteContent, updateContentFields } from "components/History/model/queries";
 import LoadingSpan from "components/LoadingSpan";
@@ -160,7 +164,6 @@ import HistoryCounter from "./HistoryCounter";
 import HistoryDetails from "./HistoryDetails";
 import HistoryDropZone from "./HistoryDropZone";
 import HistoryEmpty from "./HistoryEmpty";
-import HistoryFilters from "./HistoryFilters/HistoryFilters";
 import HistoryMessages from "./HistoryMessages";
 import HistoryOperations from "./HistoryOperations/HistoryOperations";
 import OperationErrorDialog from "./HistoryOperations/OperationErrorDialog";
@@ -172,12 +175,12 @@ export default {
     components: {
         ContentItem,
         ExpandedItems,
+        FilterMenu,
         HistoryCounter,
         HistoryMessages,
         HistoryDetails,
         HistoryDropZone,
         HistoryEmpty,
-        HistoryFilters,
         HistoryOperations,
         HistorySelectionOperations,
         HistorySelectionStatus,
@@ -198,6 +201,7 @@ export default {
     data() {
         return {
             filterText: "",
+            filterClass: HistoryFilters,
             invisible: {},
             loading: false,
             offset: 0,
@@ -323,7 +327,7 @@ export default {
         ...mapActions(useHistoryStore, ["loadHistoryById", "setFilterText", "updateHistory"]),
         ...mapActions(useHistoryItemsStore, ["fetchHistoryItems"]),
         getHighlight(item) {
-            const highlightsKey = FilterClass.getFilterValue(this.filterText, "related");
+            const highlightsKey = this.filterClass.getFilterValue(this.filterText, "related");
             if (highlightsKey == item.hid) {
                 return "active";
             } else if (highlightsKey) {
@@ -387,9 +391,6 @@ export default {
         onTagChange(item, newTags) {
             item.tags = newTags;
         },
-        onTagClick(tag) {
-            this.updateFilterVal("tag", tag);
-        },
         onOperationError(error) {
             console.debug("HistoryPanel - Operation error.", error);
             this.operationError = error;
@@ -433,7 +434,7 @@ export default {
             Toast.error(`${error}`);
         },
         updateFilterVal(newFilter, newVal) {
-            this.filterText = FilterClass.setFilterValue(this.filterText, newFilter, newVal);
+            this.filterText = this.filterClass.setFilterValue(this.filterText, newFilter, newVal);
         },
     },
 };
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 4f9c48a639c1..fbfb3d67e219 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -1,29 +1,64 @@
+import { STATES } from "components/History/Content/model/states";
+import StatesInfo from "components/History/Content/model/StatesInfo";
 import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } from "utils/filtering";
 
+const excludeStates = ["empty", "failed", "upload"];
+const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
+const options = [
+    { text: "Any", value: "any" },
+    { text: "Yes", value: true },
+    { text: "No", value: false },
+];
+
 export const validFilters = {
-    hid: equals("hid"),
-    state: equals("state"),
-    name: contains("name"),
-    extension: equals("extension"),
-    genome_build: contains("genome_build"),
-    hid_ge: compare("hid", "ge"),
-    hid_gt: compare("hid", "gt"),
-    hid_le: compare("hid", "le"),
-    hid_lt: compare("hid", "lt"),
-    related: equals("related"),
-    tag: contains("tags", "tag", expandNameTag),
-    visible: equals("visible", "visible", toBool),
-    deleted: equals("deleted", "deleted", toBool),
-    create_time: compare("create_time", "le", toDate),
-    create_time_ge: compare("create_time", "ge", toDate),
-    create_time_gt: compare("create_time", "gt", toDate),
-    create_time_le: compare("create_time", "le", toDate),
-    create_time_lt: compare("create_time", "lt", toDate),
-    update_time: compare("update_time", "le", toDate),
-    update_time_ge: compare("update_time", "ge", toDate),
-    update_time_gt: compare("update_time", "gt", toDate),
-    update_time_le: compare("update_time", "le", toDate),
-    update_time_lt: compare("update_time", "lt", toDate),
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    extension: { placeholder: "extension", type: String, handler: equals("extension"), menuItem: true },
+    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+    state: {
+        placeholder: "state",
+        type: String,
+        handler: equals("state"),
+        datalist: states,
+        helpInfo: StatesInfo,
+        menuItem: true,
+    },
+    genome_build: { placeholder: "database", type: String, handler: contains("genome_build"), menuItem: true },
+    related: { placeholder: "related", type: Number, handler: equals("related"), menuItem: true },
+    hid: { placeholder: "index", type: Number, handler: equals("hid"), isRangeInput: true, menuItem: true },
+    hid_ge: { handler: compare("hid", "ge"), menuItem: false },
+    hid_gt: { handler: compare("hid", "gt"), menuItem: false },
+    hid_le: { handler: compare("hid", "le"), menuItem: false },
+    hid_lt: { handler: compare("hid", "lt"), menuItem: false },
+    create_time: {
+        placeholder: "creation time",
+        type: Date,
+        handler: compare("create_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    create_time_ge: { handler: compare("create_time", "ge", toDate), menuItem: false },
+    create_time_gt: { handler: compare("create_time", "gt", toDate), menuItem: false },
+    create_time_le: { handler: compare("create_time", "le", toDate), menuItem: false },
+    create_time_lt: { handler: compare("create_time", "lt", toDate), menuItem: false },
+    deleted: {
+        placeholder: "Deleted",
+        type: Boolean,
+        options: options,
+        handler: equals("deleted", "deleted", toBool),
+        menuItem: true,
+    },
+    visible: {
+        placeholder: "Visible",
+        type: Boolean,
+        options: options,
+        handler: equals("visible", "visible", toBool),
+        menuItem: true,
+    },
+    update_time: { handler: compare("update_time", "le", toDate), menuItem: false },
+    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
+    update_time_gt: { handler: compare("update_time", "gt", toDate), menuItem: false },
+    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
+    update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 
 export const HistoryFilters = new Filtering(validFilters, true);
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index 16522e086504..897ede63fe8d 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -1,13 +1,13 @@
 <script setup>
 import { useInfiniteScroll } from "@vueuse/core";
+import FilterMenu from "components/Common/FilterMenu";
 import Heading from "components/Common/Heading";
-import DebouncedInput from "components/DebouncedInput";
 import LoadingSpan from "components/LoadingSpan";
 import StatelessTags from "components/TagsMultiselect/StatelessTags";
 import ScrollToTopButton from "components/ToolsList/ScrollToTopButton";
 import UtcDate from "components/UtcDate";
 import { useAnimationFrameScroll } from "composables/sensors/animationFrameScroll";
-import Filtering, { contains, equals, expandNameTag } from "utils/filtering";
+import Filtering, { compare, contains, equals, expandNameTag, toDate } from "utils/filtering";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { getPublishedHistories, updateTags } from "./services";
@@ -15,11 +15,22 @@ import { getPublishedHistories, updateTags } from "./services";
 const LIMIT = 50;
 
 const validFilters = {
-    name: contains("name"),
-    annotation: contains("annotation"),
-    tag: contains("tags", "tag", expandNameTag),
-    user: contains("username"),
-    user_eq: equals("username"),
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    annotation: { placeholder: "annotation", type: String, handler: contains("annotation"), menuItem: true },
+    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+    user: { placeholder: "user name", type: String, handler: contains("username"), menuItem: true },
+    user_eq: { handler: equals("username"), menuItem: false },
+    update_time: {
+        placeholder: "updated time",
+        type: Date,
+        handler: compare("update_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
+    update_time_gt: { handler: compare("update_time", "gt", toDate), menuItem: false },
+    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
+    update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 
 const filters = new Filtering(validFilters, false);
@@ -59,19 +70,6 @@ const fields = computed(() => [
     { label: "Last Updated", key: "update_time", sortable: !loading.value },
 ]);
 
-const localFilter = computed({
-    get() {
-        return filterText.value;
-    },
-    set(newVal) {
-        if (newVal !== filterText.value) {
-            updateFilter(newVal);
-        }
-    },
-});
-
-const filterSettings = computed(() => filters.toAlias(filters.getFiltersForText(filterText.value)));
-
 const updateFilter = (newVal) => {
     filterText.value = newVal.trim();
 };
@@ -213,80 +211,12 @@ watch([filterText, sortBy, sortDesc], async () => {
         <b-alert v-if="noItems" variant="info" show>No published histories found.</b-alert>
 
         <div v-else>
-            <b-input-group class="mb-2">
-                <DebouncedInput v-slot="{ value, input }" v-model="localFilter">
-                    <b-form-input
-                        id="published-histories-filter"
-                        size="sm"
-                        :class="filterText && 'font-weight-bold'"
-                        :value="value"
-                        :placeholder="'Search by name or use the advanced filtering options' | localize"
-                        title="clear search (esc)"
-                        data-description="filter text input"
-                        @input="input"
-                        @keyup.esc="updateFilter('')" />
-                </DebouncedInput>
-                <b-input-group-append>
-                    <b-button
-                        id="published-histories-advanced-filter-toggle"
-                        size="sm"
-                        :pressed="showAdvanced"
-                        :variant="showAdvanced ? 'info' : 'secondary'"
-                        title="show advanced filter"
-                        data-description="show advanced filter toggle"
-                        aria-label="Show advanced filter"
-                        @click="onToggle">
-                        <icon v-if="showAdvanced" icon="angle-double-up" />
-                        <icon v-else icon="angle-double-down" />
-                    </b-button>
-                    <b-button
-                        size="sm"
-                        aria-label="Clear filters"
-                        data-description="clear filters"
-                        @click="updateFilter('')">
-                        <icon icon="times" />
-                    </b-button>
-                </b-input-group-append>
-            </b-input-group>
-
-            <div v-if="showAdvanced" class="mt-2" @keyup.esc="onToggle" @keyup.enter="onSearch">
-                <small>Filter by name:</small>
-                <b-form-input
-                    id="published-histories-advanced-filter-name"
-                    v-model="filterSettings['name:']"
-                    size="sm"
-                    placeholder="any name" />
-                <small class="mt-1">Filter by annotation:</small>
-                <b-form-input v-model="filterSettings['annotation:']" size="sm" placeholder="any annotation" />
-                <small class="mt-1">Filter by community tag:</small>
-                <b-form-input
-                    id="published-histories-advanced-filter-tag"
-                    v-model="filterSettings['tag:']"
-                    size="sm"
-                    placeholder="any community tag" />
-                <small class="mt-1">Filter by owner:</small>
-                <b-form-input
-                    id="published-histories-advanced-filter-username"
-                    v-model="filterSettings['user:']"
-                    size="sm"
-                    placeholder="any username" />
-                <div class="mt-3">
-                    <b-button
-                        id="published-histories-advanced-filter-submit"
-                        class="mr-1"
-                        size="sm"
-                        variant="primary"
-                        description="apply filters"
-                        @click="onSearch">
-                        <icon icon="search" />
-                        <span>{{ "Search" | localize }}</span>
-                    </b-button>
-                    <b-button size="sm" @click="onToggle">
-                        <icon icon="redo" />
-                        <span>{{ "Cancel" | localize }}</span>
-                    </b-button>
-                </div>
-            </div>
+            <FilterMenu
+                name="Published Histories"
+                :placeholder="'Search by name or use the advanced filtering options' | localize"
+                :filter-class="filters"
+                :filter-text.sync="filterText"
+                :show-advanced.sync="showAdvanced" />
 
             <b-alert v-if="noResults || error" :variant="error ? 'danger' : 'info'" show>
                 <div>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 7d960c501fd3..b40046fdf74d 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -4,16 +4,7 @@ import { faListAlt } from "@fortawesome/free-regular-svg-icons";
 import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
-import {
-    BBadge,
-    BButton,
-    BButtonGroup,
-    BFormGroup,
-    BFormInput,
-    BListGroup,
-    BListGroupItem,
-    BModal,
-} from "bootstrap-vue";
+import { BBadge, BButton, BButtonGroup, BFormGroup, BListGroup, BListGroupItem, BModal } from "bootstrap-vue";
 import isEqual from "lodash.isequal";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
@@ -22,17 +13,29 @@ import { useRouter } from "vue-router/composables";
 import type { components } from "@/schema";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
-import Filtering, { contains, expandNameTag } from "@/utils/filtering";
+import Filtering, { compare, contains, expandNameTag, toDate } from "@/utils/filtering";
 import localize from "@/utils/localization";
 
+import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
 const validFilters = {
-    name: contains("name"),
-    tag: contains("tags", "tag", expandNameTag),
-    annotation: contains("annotation"),
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
+    annotation: { placeholder: "annotation", type: String, handler: contains("annotation"), menuItem: true },
+    update_time: {
+        placeholder: "updated time",
+        type: Date,
+        handler: compare("update_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
+    update_time_gt: { handler: compare("update_time", "gt", toDate), menuItem: false },
+    update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
+    update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 const HistoriesFilters = new Filtering(validFilters, false);
 
@@ -60,7 +63,7 @@ const propShowModal = computed({
     get: () => {
         return props.showModal;
     },
-    set: (val) => {
+    set: (val: boolean) => {
         emit("update:show-modal", val);
     },
 });
@@ -68,6 +71,7 @@ const propShowModal = computed({
 const selectedHistories: Ref<{ id: string }[]> = ref([]);
 const filter = ref("");
 const busy = ref(false);
+const showAdvanced = ref(false);
 const modal: Ref<BModal | null> = ref(null);
 const scrollableDiv: Ref<HTMLElement | null> = ref(null);
 
@@ -87,7 +91,7 @@ onMounted(async () => {
 // retain previously selected histories when you reopen the modal in multi view
 watch(
     () => propShowModal.value,
-    (show) => {
+    (show: boolean) => {
         if (props.multiple && show) {
             selectedHistories.value = [...pinnedHistories.value];
         }
@@ -104,7 +108,7 @@ onUnmounted(() => {
 
 watch(
     () => filter.value,
-    async (newVal, oldVal) => {
+    async (newVal: string, oldVal: string) => {
         if (newVal !== "" && validFilter.value && newVal !== oldVal) {
             await loadMore(true);
         }
@@ -117,7 +121,7 @@ watch(
 const historiesProxy: Ref<HistorySummary[]> = ref([]);
 watch(
     () => props.histories as HistoryDetailed[],
-    (h) => {
+    (h: HistoryDetailed[]) => {
         historiesProxy.value = h.filter(
             (h) => !h.user_id || (!currentUser.value?.isAnonymous && h.user_id === currentUser.value?.id)
         );
@@ -133,7 +137,7 @@ const filtered: Ref<HistorySummary[]> = computed(() => {
         filteredHistories = historiesProxy.value;
     } else {
         const filters = HistoriesFilters.getFiltersForText(filter.value);
-        filteredHistories = historiesProxy.value.filter((history) => {
+        filteredHistories = historiesProxy.value.filter((history: HistorySummary) => {
             if (!HistoriesFilters.testFilters(filters, history)) {
                 return false;
             }
@@ -187,6 +191,10 @@ function setCenterPanelHistory(history: HistorySummary) {
     modal.value?.hide();
 }
 
+function setFilterValue(newFilter: string, newValue: string) {
+    filter.value = HistoriesFilters.setFilterValue(filter.value, newFilter, newValue);
+}
+
 function openInMulti(history: HistorySummary) {
     router.push("/histories/view_multiple");
     historyStore.pinHistory(history.id);
@@ -221,7 +229,13 @@ async function loadMore(noScroll = false) {
             </template>
 
             <BFormGroup :description="localize('Filter histories')">
-                <BFormInput v-model="filter" type="search" debounce="400" :placeholder="localize('Search Filter')" />
+                <FilterMenu
+                    ref="filterMenuRef"
+                    name="Histories"
+                    placeholder="search datasets"
+                    :filter-class="HistoriesFilters"
+                    :filter-text.sync="filter"
+                    :show-advanced.sync="showAdvanced" />
             </BFormGroup>
 
             <BBadge v-if="filter && !validFilter" class="alert-danger w-100">Search string too short!</BBadge>
@@ -260,7 +274,8 @@ async function loadMore(noScroll = false) {
                             class="my-1"
                             :value="history.tags"
                             :disabled="true"
-                            :max-visible-tags="10" />
+                            :max-visible-tags="10"
+                            @tag-click="setFilterValue('tag', $event)" />
 
                         <div
                             v-if="props.additionalOptions.length > 0"
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 112f0ebee168..a0cc1a47e8e2 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -151,7 +151,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
         if (currentHistoryId.value !== historyId) {
             await setCurrentHistory(historyId);
         }
-        const filterText = HistoryFilters.getFilterText(HistoryFilters.getValidFilterSettings(filters));
+        const filterText = HistoryFilters.getFilterText(filters);
         setFilterText(historyId, filterText);
     }
 
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index c45fd5b9876c..30f090bd5ac2 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -218,10 +218,6 @@ $ui-margin-horizontal-large: $margin-v * 2;
     }
 }
 
-.ui-input-error {
-    border-color: $brand-danger;
-}
-
 .ui-textarea {
     @extend .ui-input;
     height: 100px !important;
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 85e266038d47..a6cd90e6ab8f 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -7,11 +7,10 @@
  * for values that contain spaces.
  * Each query key has a default suffix defined e.g. name:foo will be converted to name-eq:foo.
  * Comparison aliases are allowed converting e.g. '>' to '-gt' and '<' to '-lt'.
- *
- * TODO: Reduce usage of `filterText` as a param in several functions
  */
 
 import { omit } from "lodash";
+import type { DefineComponent } from "vue";
 
 type Converter<T> = (value: T) => T;
 type Handler<T> = (v: T, q: T) => boolean;
@@ -31,9 +30,37 @@ const operatorForAlias = {
 } as const satisfies Record<string, string>;
 
 type OperatorForAlias = typeof operatorForAlias;
-type Alias = keyof OperatorForAlias;
+export type Alias = keyof OperatorForAlias;
 type Operator = OperatorForAlias[Alias];
 
+interface RadioOption {
+    text: string;
+    value: string | number | boolean | Date | undefined;
+}
+
+/** A ValidFilter<T> for the Filtering<T> class, with its properties */
+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;
+    /** The handler function for this filter */
+    handler: HandlerReturn<T>;
+    /** Is this an filter to include as a field in `FilterMenu`? */
+    menuItem?: boolean;
+    /** Is there a datalist of values for this field */
+    datalist?: string[];
+    /** Is this a `FilterMenu` range filter?
+     * (if yes, the `filter` key is taken and aliased into 2 input
+     * fields: `filter-gt` & `filter-lt`)
+     */
+    isRangeInput?: boolean;
+    /** The help info component to append to the `FilterMenu` input field */
+    helpInfo?: DefineComponent | HTMLElement | string;
+    /** The radio options if filter is a `FilterMenu` radio input */
+    options?: RadioOption[];
+};
+
 /** Converts user input to backend compatible date
  * @param value
  * @returns seconds since epoch
@@ -167,7 +194,7 @@ export function compare<T>(attribute: string, variant: string, converter?: Conve
 }
 
 export default class Filtering<T> {
-    validFilters: Record<string, HandlerReturn<T>>;
+    validFilters: Record<string, ValidFilter<T>>;
     validAliases: Array<[string, string]>;
     useDefaultFilters: boolean;
     defaultFilters: Record<string, T> = {
@@ -176,7 +203,7 @@ export default class Filtering<T> {
     };
 
     constructor(
-        validFilters: Record<string, HandlerReturn<T>>,
+        validFilters: Record<string, ValidFilter<T>>,
         useDefaultFilters = true,
         validAliases?: Array<[string, string]>
     ) {
@@ -185,27 +212,18 @@ export default class Filtering<T> {
         this.validAliases = validAliases || defaultValidAliases;
     }
 
-    /** Returns normalize defaults by adding the operator to the key identifier
-     * @returns Dictionary with query key and values for default filters
-     * */
-    getDefaults(): Record<string, T> {
-        const normalized: Record<string, T> = {};
-        Object.entries(this.defaultFilters).forEach(([key, value]) => {
-            normalized[`${key}:`] = value;
-        });
-        return normalized;
-    }
-
     /** Returns true if default filter values are not changed
-     * @param filterSettings Object containing filter settings
+     * @param filters Object containing filters
      * @returns true if default filter values are not changed
      * **/
-    containsDefaults(filterSettings: Record<string, T>): boolean {
-        const normalized = this.getDefaults();
+    containsDefaults(filters: Record<string, T>): boolean {
+        if (this.useDefaultFilters === false) {
+            return false;
+        }
         let hasDefaults = true;
-        for (const key in normalized) {
-            const value = String(filterSettings[key]).toLowerCase();
-            const normalizedValue = String(normalized[key]).toLowerCase();
+        for (const key in this.defaultFilters) {
+            const value = String(filters[key]).toLowerCase();
+            const normalizedValue = String(this.defaultFilters[key]).toLowerCase();
             if (value !== normalizedValue) {
                 hasDefaults = false;
                 break;
@@ -220,20 +238,24 @@ export default class Filtering<T> {
      * @returns true if all default __keys__ are found in `filters`
      */
     hasAllDefaultKeys(filters: Record<string, T>): boolean {
-        return Object.keys(this.defaultFilters).every((def) => Object.keys(filters).includes(def));
+        return (
+            this.useDefaultFilters &&
+            Object.keys(this.defaultFilters).every((def) => Object.keys(filters).includes(def))
+        );
     }
 
-    /** Build a text filter from filter settings (with aliases: `{"filter:": "value", ...}`)
-     * @param filterSettings Object containing filter settings
+    /** Build a text filter from filters {filter: "value", ...}
+     * @param filters Object containing filters
      * @returns Parsed filter text string
      * */
-    getFilterText(filterSettings: Record<string, T>): string {
-        const normalized = this.getDefaults();
-        const hasDefaults = this.containsDefaults(filterSettings);
+    getFilterText(filters: Record<string, T>): string {
+        filters = this.getValidFilters(filters);
+        const hasDefaults = this.containsDefaults(filters);
 
         let newFilterText = "";
-        Object.entries(filterSettings).forEach(([key, value]) => {
-            const skipDefault = hasDefaults && normalized[key] !== undefined;
+        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;
             if (!skipDefault && value !== null && value !== undefined && value !== "") {
                 if (newFilterText) {
                     newFilterText += " ";
@@ -241,9 +263,20 @@ export default class Filtering<T> {
                 if (String(value).includes(" ")) {
                     value = `'${value}'` as T;
                 }
-                newFilterText += `${key}${value}`;
+                newFilterText += `${this.toAliasKey(key)}${value}`;
             }
         });
+        // enforce `filter:any` for any default *boolean* filters missing in filters object
+        if (!hasDefaults && this.useDefaultFilters) {
+            Object.entries(this.defaultFilters).forEach(([key, value]) => {
+                if (filters[key] == undefined && typeof value === "boolean") {
+                    if (newFilterText) {
+                        newFilterText += " ";
+                    }
+                    newFilterText += `${this.toAliasKey(key)}any`;
+                }
+            });
+        }
         return newFilterText;
     }
 
@@ -262,9 +295,9 @@ export default class Filtering<T> {
                 const elgRE = /(\S+)([:><])(.+)/g;
                 const elgMatch = elgRE.exec(pair);
                 if (elgMatch) {
-                    let field = elgMatch[1]!;
-                    const elg = elgMatch[2]!;
-                    const value = elgMatch[3]!;
+                    let field = elgMatch[1];
+                    const elg = elgMatch[2];
+                    const value = elgMatch[3];
                     // replace alias for less and greater symbol
                     for (const [alias, substitute] of this.validAliases) {
                         if (elg === alias) {
@@ -273,8 +306,8 @@ export default class Filtering<T> {
                         }
                     }
                     // replaces dashes with underscores in query field names
-                    const normalizedField = field.split("-").join("_");
-                    if (this.validFilters[normalizedField]) {
+                    const normalizedField = field?.split("-").join("_");
+                    if (normalizedField && this.validFilters[normalizedField]) {
                         // removes quotation and applies lower-case to filter value
                         result[normalizedField] = toLowerNoQuotes(value) as T;
                         hasMatches = true;
@@ -313,16 +346,21 @@ export default class Filtering<T> {
      * @returns Parsed `filterText` string with added/removed filter(s)
      */
     applyFiltersToText(filters: Record<string, T>, existingText: string, remove = false) {
-        let validSettings = this.getValidFilterSettings(filters);
-        const existingSettings = this.toAlias(this.getFiltersForText(existingText, false));
+        let validFilters = this.getValidFilters(filters);
+        const existingFilters = Object.fromEntries(this.getFiltersForText(existingText, false));
         if (remove) {
-            validSettings = omit(existingSettings, Object.keys(validSettings));
+            validFilters = omit(existingFilters, Object.keys(validFilters));
         } else {
-            validSettings = Object.assign(existingSettings, validSettings);
+            validFilters = Object.assign(existingFilters, validFilters);
         }
-        return this.getFilterText(validSettings);
+        return this.getFilterText(validFilters);
     }
 
+    /** 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"}})
+     * @returns valid filters object (e.g.: {hid: "3", name: "test"}})
+     */
     getValidFilters(filters: Record<string, T>) {
         const validFilters: Record<string, T> = {};
         Object.entries(filters).forEach(([key, value]) => {
@@ -334,39 +372,21 @@ export default class Filtering<T> {
         return validFilters;
     }
 
-    /** Returns a dictionary resembling filterSettings (for HistoryFilters):
-     * e.g.: Unlike getFiltersForText or getQueryDict, this maintains "hid>":"3" instead
-     *       of changing it to "hid-gt":"3"
-     * (Used to sync filterSettings in HistoryFilters)
-     * @param filters Parsed filters object from getFiltersForText()
-     * @returns `filterSettings` as dict of {"field:": "value"} pairs
+    /** Convert a valid filter key (`filter`/`filter-gt`) to alias filter key (`filter:`/`filter>`)
+     *  to use in creating `filterText` string.
+     *
+     * e.g.: filter = "hid-gt" becomes "hid>", filter = "hid" becomes "hid:"
+     * @param filter Parsed filters object from getFiltersForText()
+     * @returns filter key
      */
-    toAlias(filters: [string, T][]) {
-        const result: Record<string, T> = {};
-        for (const [key, value] of filters) {
-            let hasAlias = false;
-            for (const [alias, substitute] of this.validAliases) {
-                if (key.endsWith(substitute)) {
-                    const keyPrefix = key.slice(0, -substitute.length);
-                    result[`${keyPrefix}${alias}`] = value;
-                    hasAlias = true;
-                    break;
-                }
-            }
-            if (!hasAlias) {
-                result[`${key}:`] = value;
+    toAliasKey(filter: string) {
+        for (const [alias, substitute] of this.validAliases) {
+            if (filter.endsWith(substitute)) {
+                const keyPrefix = filter.slice(0, -substitute.length);
+                return `${keyPrefix}${alias}`;
             }
         }
-        return result;
-    }
-
-    /** Returns valid filters with valid keys and values.
-     * @param filters Raw dictionary with **(potentially invalid)** filters and keys
-     * @returns **Valid** `filterSettings` as dict of {"field:": "value"} pairs
-     */
-    getValidFilterSettings(filters: Record<string, T>) {
-        const validFilters = this.getValidFilters(filters);
-        return this.toAlias(Object.entries(validFilters));
+        return `${filter}:`;
     }
 
     /** Returns a dictionary with query key and values.
@@ -377,9 +397,11 @@ export default class Filtering<T> {
         const queryDict: Record<string, T> = {};
         const filters = this.getFiltersForText(filterText);
         for (const [key, value] of filters) {
-            const query = this.validFilters[key]!.query;
-            const converter = this.validFilters[key]!.converter;
-            queryDict[query] = converter ? converter(value) : value;
+            const query = this.validFilters[key]?.handler.query;
+            const converter = this.validFilters[key]?.handler.converter;
+            if (query) {
+                queryDict[query] = converter ? converter(value) : value;
+            }
         }
         return queryDict;
     }
@@ -407,7 +429,7 @@ export default class Filtering<T> {
      */
     getConvertedValue(filterName: string, filterValue: T, backendFormatted = false): T | undefined {
         if (this.validFilters[filterName]) {
-            const { converter } = this.validFilters[filterName] as HandlerReturn<T>;
+            const { converter } = this.validFilters[filterName]?.handler as HandlerReturn<T>;
             if (converter) {
                 if (converter == toBool && filterValue == "any") {
                     return filterValue;
@@ -443,10 +465,11 @@ export default class Filtering<T> {
     getFilterValue(filterText: string, filterName: string, backendFormatted = false): T | undefined {
         const filters = Object.fromEntries(this.getFiltersForText(filterText));
         let filterVal = filters[filterName];
+        const defaultFilterValue = this.defaultFilters[filterName];
         if (filterVal !== undefined) {
             filterVal = this.getConvertedValue(filterName, filterVal, backendFormatted);
             return filterVal;
-        } else if (Object.keys(this.defaultFilters).includes(filterName)) {
+        } else if (defaultFilterValue !== undefined && typeof defaultFilterValue == "boolean") {
             filterVal = this.getConvertedValue(filterName, "any" as T, backendFormatted);
             return filterVal;
         }
@@ -455,7 +478,7 @@ export default class Filtering<T> {
             return filters[filterName];
         }
 
-        return this.defaultFilters[filterName];
+        return defaultFilterValue;
     }
 
     /**
@@ -491,10 +514,10 @@ export default class Filtering<T> {
             if (!(key in this.validFilters)) {
                 console.error(`Invalid filter ${key}`);
             } else {
-                const filterAttribute = this.validFilters[key]!.attribute;
-                const filterHandler = this.validFilters[key]!.handler;
-                const itemValue = item[filterAttribute];
-                if (itemValue === undefined || !filterHandler(itemValue, filterValue)) {
+                const filterAttribute = this.validFilters[key]?.handler.attribute;
+                const filterHandler = this.validFilters[key]?.handler.handler;
+                const itemValue = filterAttribute && item[filterAttribute];
+                if (itemValue === undefined || (filterHandler && itemValue && !filterHandler(itemValue, filterValue))) {
                     return false;
                 }
             }

From f882ac41174c68702a9d9cea83cb2c7d17a6906a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 7 Aug 2023 22:12:18 -0500
Subject: [PATCH 02/12] add jest for `FilterMenu` also add a `'Radio'` type in
 addition to the existing `typeof Boolean` also add a function to `Filtering`
 class: `addRangedFiltersIfNotPresent()`

---
 .../src/components/Common/FilterMenu.test.js  | 293 ++++++++++++++++++
 client/src/components/Common/FilterMenu.vue   |  30 +-
 .../HistoryFilters/HistoryFilters.test.js     | 168 ----------
 .../HistoryFilters/HistoryFilters.vue         | 218 -------------
 .../HistoryFilters/HistoryFiltersDefault.vue  |  57 ----
 .../src/components/History/HistoryFilters.js  |   8 +-
 .../History/HistoryPublishedList.vue          |   2 -
 .../History/Modals/SelectorModal.vue          |   2 -
 client/src/utils/filtering.ts                 |  44 ++-
 9 files changed, 355 insertions(+), 467 deletions(-)
 create mode 100644 client/src/components/Common/FilterMenu.test.js
 delete mode 100644 client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.test.js
 delete mode 100644 client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue
 delete mode 100644 client/src/components/History/CurrentHistory/HistoryFilters/HistoryFiltersDefault.vue

diff --git a/client/src/components/Common/FilterMenu.test.js b/client/src/components/Common/FilterMenu.test.js
new file mode 100644
index 000000000000..047691f8d3f4
--- /dev/null
+++ b/client/src/components/Common/FilterMenu.test.js
@@ -0,0 +1,293 @@
+import { mount } from "@vue/test-utils";
+import { HistoryFilters } from "components/History/HistoryFilters";
+import { getLocalVue } from "tests/jest/helpers";
+import Filtering, { compare, contains, equals, toBool, toDate } from "utils/filtering";
+
+import FilterMenu from "./FilterMenu";
+
+const localVue = getLocalVue();
+const options = [
+    { text: "Any", value: "any" },
+    { text: "Yes", value: true },
+    { text: "No", value: false },
+];
+const validTestFilters = {
+    /** A basic name filter (with same placeholder as the key) */
+    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    /** A filter with different key and placeholder */
+    filter_key: { placeholder: "item", type: String, handler: contains("filter_key"), menuItem: true },
+    /** A filter with help component */
+    has_help: {
+        placeholder: "value",
+        type: String,
+        handler: equals("has_help"),
+        helpInfo: "Some test help info",
+        menuItem: true,
+    },
+    /** A filter with datalist */
+    list_item: {
+        placeholder: "list item",
+        type: Number,
+        handler: equals("list_item"),
+        datalist: ["option1", "option2"],
+        menuItem: true,
+    },
+    /** A ranged date filter */
+    create_time: {
+        placeholder: "creation time",
+        type: Date,
+        handler: compare("create_time", "le", toDate),
+        isRangeInput: true,
+        menuItem: true,
+    },
+    /** A ranged number filter */
+    number: { placeholder: "index", type: Number, handler: equals("number"), isRangeInput: true, menuItem: true },
+    /** A radio filter */
+    radio: {
+        placeholder: "Radio Option",
+        type: "Radio",
+        options: options,
+        handler: equals("radio", "radio", toBool),
+        menuItem: true,
+    },
+    /** A boolean filter */
+    bool: {
+        placeholder: "Boolean Select",
+        type: Boolean,
+        handler: equals("bool", "bool", toBool),
+        menuItem: true,
+    },
+    /** A valid filter, just not included in menu */
+    not_included: { handler: contains("not_included"), menuItem: false },
+};
+const TestFilters = new Filtering(validTestFilters, false);
+
+describe("FilterMenu", () => {
+    let wrapper;
+
+    function setUpWrapper(name, placeholder, filterClass) {
+        wrapper = mount(FilterMenu, {
+            propsData: {
+                name: name,
+                placeholder: placeholder,
+                filterClass: filterClass,
+                filterText: "",
+                showAdvanced: false,
+            },
+            localVue,
+            stubs: {
+                icon: { template: "<div></div>" },
+            },
+        });
+    }
+
+    async function performSearch() {
+        // Test: search button (should toggle the view out)
+        const searchButton = wrapper.find("[data-description='apply filters']");
+        await searchButton.trigger("click");
+    }
+
+    async function expectCorrectEmits(showAdvanced, filterText, filterClass) {
+        const filterEmit = wrapper.emitted()["update:filter-text"].length - 1;
+        const toggleEmit = wrapper.emitted()["update:show-advanced"].length - 1;
+        expect(wrapper.emitted()["update:show-advanced"][toggleEmit][0]).toEqual(showAdvanced);
+        await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"][toggleEmit][0] });
+        const receivedText = wrapper.emitted()["update:filter-text"][filterEmit][0];
+        const receivedDict = filterClass.getQueryDict(receivedText);
+        const parsedDict = filterClass.getQueryDict(filterText);
+        expect(receivedDict).toEqual(parsedDict);
+    }
+
+    it("test generic test items filter panel search", async () => {
+        setUpWrapper("Test Items", "search test items", TestFilters);
+        const validFilters = wrapper.vm.$props.filterClass.validFilters;
+
+        await wrapper.setProps({ showAdvanced: true });
+
+        const expectedFilters = [
+            {
+                label: "Filter by name:",
+                placeholder: "any name",
+                value: "name-filter",
+            },
+            {
+                label: "Filter by item:",
+                placeholder: "any item",
+                value: "item-filter",
+            },
+            {
+                label: "Filter by value:",
+                placeholder: "any value",
+                value: "has-help-filter",
+            },
+            {
+                label: "Filter by list item:",
+                placeholder: "any list item",
+                value: "1234",
+            },
+        ];
+
+        expect(Object.keys(validFilters).length).toBe(13);
+        // find all labels for the filters
+        const labels = wrapper.findAll("small");
+        expect(labels.length).toBe(8);
+        // 8 labels, but 15 valid filters
+        // more valid filters than labels because not all all `menuItem:true`
+
+        /**
+         * Now add filters in all input fields in the advanced menu
+         * and check that the correct query is emitted
+         * */
+
+        // First 4 filters are normal, non ranged input fields
+        expectedFilters.forEach((expectedFilter, i) => {
+            const label = labels.at(i);
+            expect(label.text()).toBe(expectedFilter.label);
+            if (i < 4) {
+                const filterInput = wrapper.find(`[placeholder='${expectedFilter.placeholder}']`);
+                expect(filterInput.exists()).toBe(true);
+                filterInput.setValue(expectedFilter.value);
+            }
+        });
+        // `has_help` filter should have help modal button
+        expect(wrapper.find("[title='Value Help']").classes().includes("btn")).toBe(true);
+        // ranged time field (has 2 datepickers)
+        const createdGtInput = wrapper.find("[placeholder='creation time after']");
+        const createdLtInput = wrapper.find("[placeholder='creation time before']");
+        createdGtInput.setValue("January 1, 2022");
+        createdLtInput.setValue("January 1, 2023");
+        expect(wrapper.findAll(".b-form-datepicker").length).toBe(2);
+        // ranged number field (has different placeholder: greater instead of after...)
+        const indexGtInput = wrapper.find("[placeholder='index greater']");
+        const indexLtInput = wrapper.find("[placeholder='index lower']");
+        indexGtInput.setValue("1234");
+        indexLtInput.setValue("5678");
+        // radio filter
+        const radioBtnGrp = wrapper.find("[data-description='filter radio']").findAll(".btn-secondary");
+        expect(radioBtnGrp.length).toBe(options.length);
+        for (let i = 0; i < options.length; i++) {
+            expect(radioBtnGrp.at(i).text()).toBe(options[i].text);
+            expect(radioBtnGrp.at(i).props().value).toBe(options[i].value);
+            expect(radioBtnGrp.at(i).props().checked).toBe(null);
+        }
+        await radioBtnGrp.at(1).find("input").setChecked(); // click "Yes"
+        // boolean filter
+        const boolBtnGrp = wrapper.find("[data-description='filter bool']").findAll(".btn-secondary");
+        expect(boolBtnGrp.length).toBe(2);
+        expect(boolBtnGrp.at(0).text()).toBe("Yes");
+        expect(boolBtnGrp.at(0).props().value).toBe(true);
+        expect(boolBtnGrp.at(1).text()).toBe("No");
+        expect(boolBtnGrp.at(1).props().value).toBe(false);
+        await boolBtnGrp.at(1).find("input").setChecked(); // click "No"
+
+        // perform search
+        await performSearch();
+        await expectCorrectEmits(
+            false,
+            "create_time>'January 1, 2022' create_time<'January 1, 2023' " +
+                "filter_key:item-filter has_help:has-help-filter list_item:1234 " +
+                "number>1234 number<5678 name:name-filter radio:true bool:false",
+            TestFilters
+        );
+    });
+
+    it("test buttons that navigate menu and keyup.enter/esc events", async () => {
+        setUpWrapper("Test Items", "search test items", TestFilters);
+
+        expect(wrapper.find("[data-description='advanced filters']").exists()).toBe(false);
+        await wrapper.setProps({ showAdvanced: true });
+        expect(wrapper.find("[data-description='advanced filters']").exists()).toBe(true);
+
+        // only add name filter in the advanced menu
+        let filterName = wrapper.find("[placeholder='any name']");
+        if (filterName.vm && filterName.props().type == "text") {
+            filterName.setValue("sample name");
+        }
+
+        // -------- Test keyup.enter key:  ---------
+        // toggles view out and performs a search
+        await filterName.trigger("keyup.enter");
+        await expectCorrectEmits(false, "name:'sample name'", TestFilters);
+
+        // Test: clearing the filterText
+        const clearButton = wrapper.find("[data-description='clear filters']");
+        await clearButton.trigger("click");
+        await expectCorrectEmits(false, "", TestFilters);
+
+        // Test: toggling view back in
+        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
+        await toggleButton.trigger("click");
+        await expectCorrectEmits(true, "", TestFilters);
+
+        // -------- Test keyup.esc key:  ---------
+        // toggles view out only (doesn't cause a new search / doesn't emulate enter)
+
+        // find name field again (destroyed because of toggling out) and set value
+        filterName = wrapper.find("[placeholder='any name']");
+        if (filterName.vm && filterName.props().type == "text") {
+            filterName.setValue("newnamefilter");
+        }
+
+        // press esc key from name field (should not change emitted filterText unlike enter key)
+        await filterName.trigger("keyup.esc");
+        await expectCorrectEmits(false, "", TestFilters);
+    });
+
+    /**
+     * Testing the default values of the filters defined in the HistoryFilters: Filtering
+     * class, ensuring the default values are reflected in the radio-group buttons
+     */
+    it("test radio-group default filters on HistoryFilters", async () => {
+        setUpWrapper("History Items", "search datasets", HistoryFilters);
+        // -------- Testing deleted filter first:  ---------
+
+        await wrapper.setProps({ showAdvanced: true });
+        const deletedFilterBtnGrp = wrapper.find("[data-description='filter deleted']");
+        const deletedFilterAnyBtn = deletedFilterBtnGrp.find(".btn-secondary");
+        expect(deletedFilterAnyBtn.text()).toBe("Any");
+
+        // current active button for deleted filter should be "No"
+        let deletedFilterActiveBtn = deletedFilterBtnGrp.find(".btn-secondary.active");
+        expect(deletedFilterActiveBtn.text()).toBe("No");
+
+        await deletedFilterAnyBtn.find("input").setChecked();
+
+        // now active button for deleted filter should be "Any"
+        deletedFilterActiveBtn = deletedFilterBtnGrp.find(".btn-secondary.active");
+        expect(deletedFilterActiveBtn.text()).toBe("Any");
+
+        // expect "deleted = any" filter to be applied
+        await performSearch();
+        await expectCorrectEmits(false, "visible:true", HistoryFilters);
+
+        // -------- Testing visible filter now:  ---------
+
+        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
+        await toggleButton.trigger("click");
+        await expectCorrectEmits(true, "visible:true", HistoryFilters);
+        const visibleFilterBtnGrp = wrapper.find("[data-description='filter visible']");
+        const visibleFilterAnyBtn = visibleFilterBtnGrp.find(".btn-secondary");
+        expect(visibleFilterAnyBtn.text()).toBe("Any");
+
+        // current active button for visible filter should be "Yes"
+        let visibleFilterActiveBtn = visibleFilterBtnGrp.find(".btn-secondary.active");
+        expect(visibleFilterActiveBtn.text()).toBe("Yes");
+
+        await visibleFilterAnyBtn.find("input").setChecked();
+
+        // now active button for visible filter should be "Any"
+        visibleFilterActiveBtn = visibleFilterBtnGrp.find(".btn-secondary.active");
+        expect(visibleFilterActiveBtn.text()).toBe("Any");
+
+        // expect "visible = any" filter to be applied
+        await performSearch();
+        await expectCorrectEmits(false, "deleted:any visible:any", HistoryFilters);
+
+        // -------- Testing repeated search if it prevents bug:  ---------
+        // (bug reported here: https://github.com/galaxyproject/galaxy/issues/16211)
+        await toggleButton.trigger("click");
+        await expectCorrectEmits(true, "deleted:any visible:any", HistoryFilters);
+        await performSearch();
+        await expectCorrectEmits(false, "deleted:any visible:any", HistoryFilters);
+    });
+});
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 4d1c8dbe538a..43792867d77d 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -23,7 +23,7 @@ interface BackendFilterError {
 const props = withDefaults(
     defineProps<{
         name?: string;
-        placeholder: string;
+        placeholder?: string;
         filterClass: Filtering<any>;
         filterText: string;
         hasHelp?: boolean;
@@ -208,16 +208,17 @@ function updateFilterText(newFilterText: string) {
                 </b-button>
             </b-input-group-append>
         </b-input-group>
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
             v-if="showAdvanced"
             class="mt-2"
-            description="advanced filters"
+            data-description="advanced filters"
             @keyup.enter="onSearch"
             @keyup.esc="onToggle">
             <div v-for="filter in Object.keys(validFilters)" :key="filter">
                 <span v-if="validFilters[filter]?.menuItem">
-                    <!-- is a Boolean filter -->
-                    <span v-if="validFilters[filter]?.type == Boolean">
+                    <!-- is a Radio filter -->
+                    <span v-if="validFilters[filter]?.type == 'Radio'">
                         <small>{{ validFilters[filter]?.placeholder }}:</small>
                         <FilterMenuRadio
                             v-if="validFilters[filter]?.options"
@@ -225,13 +226,18 @@ function updateFilterText(newFilterText: string) {
                             :options="validFilters[filter]?.options"
                             :settings="filters"
                             @change="onOption" />
-                        <b-form-group v-else class="m-0">
+                    </span>
+
+                    <!-- is a Boolean filter -->
+                    <span v-else-if="validFilters[filter]?.type == Boolean">
+                        <small>{{ validFilters[filter]?.placeholder }}:</small>
+                        <b-form-group class="m-0">
                             <b-form-radio-group
                                 v-model="filters[filter]"
                                 :options="defaultBoolOptions"
                                 size="sm"
                                 buttons
-                                :description="`filter ${validFilters[filter]?.placeholder}`" />
+                                :data-description="`filter ${filter}`" />
                         </b-form-group>
                     </span>
 
@@ -337,7 +343,7 @@ function updateFilterText(newFilterText: string) {
                             <b-input-group-append>
                                 <b-button
                                     v-if="validFilters[filter]?.helpInfo"
-                                    :title="`${validFilters[filter]?.placeholder} Help`"
+                                    :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
                                     size="sm"
                                     @click="helpModals[filter] = true">
                                     <icon icon="question" />
@@ -358,7 +364,13 @@ function updateFilterText(newFilterText: string) {
                             v-model="helpModals[filter]"
                             :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
                             ok-only>
-                            <component :is="validFilters[filter]?.helpInfo" @set-filter="onOption" />
+                            <component
+                                :is="validFilters[filter]?.helpInfo"
+                                v-if="typeof validFilters[filter]?.helpInfo == 'object'"
+                                @set-filter="onOption" />
+                            <div v-else-if="typeof validFilters[filter]?.helpInfo == 'string'">
+                                <p>{{ validFilters[filter]?.helpInfo }}</p>
+                            </div>
                         </b-modal>
                     </span>
                 </span>
@@ -371,7 +383,7 @@ function updateFilterText(newFilterText: string) {
                     class="mr-1"
                     size="sm"
                     variant="primary"
-                    description="apply filters"
+                    data-description="apply filters"
                     @click="onSearch">
                     <icon icon="search" />
                     <span v-localize>Search</span>
diff --git a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.test.js b/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.test.js
deleted file mode 100644
index 0f52db49dd5d..000000000000
--- a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.test.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { HistoryFilters as HistoryFiltering } from "components/History/HistoryFilters";
-import { getLocalVue } from "tests/jest/helpers";
-
-import HistoryFilters from "./HistoryFilters";
-
-const localVue = getLocalVue();
-
-describe("HistoryFilters", () => {
-    let wrapper;
-
-    async function expectCorrectEmits(showAdvanced, filterText) {
-        // count how many times filterText and toggles are emitted
-        const filterEmit = wrapper.emitted()["update:filter-text"].length - 1;
-        const toggleEmit = wrapper.emitted()["update:show-advanced"].length - 1;
-        expect(wrapper.emitted()["update:show-advanced"][toggleEmit][0]).toEqual(showAdvanced);
-        await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"][toggleEmit][0] });
-        const receivedText = wrapper.emitted()["update:filter-text"][filterEmit][0];
-        const receivedDict = HistoryFiltering.getQueryDict(receivedText);
-        const parsedDict = HistoryFiltering.getQueryDict(filterText);
-        expect(receivedDict).toEqual(parsedDict);
-    }
-
-    beforeEach(() => {
-        wrapper = mount(HistoryFilters, {
-            propsData: {
-                filterText: "",
-                showAdvanced: false,
-            },
-            localVue,
-            stubs: {
-                icon: { template: "<div></div>" },
-            },
-        });
-    });
-
-    it("test history items filter panel", async () => {
-        expect(wrapper.find("[description='advanced filters']").exists()).toBe(false);
-        await wrapper.setProps({ showAdvanced: true });
-        expect(wrapper.find("[description='advanced filters']").exists()).toBe(true);
-        expect(wrapper.find("[description='advanced filters']").exists()).toBe(true);
-        const filterInputs = {
-            "[placeholder='any name']": "name-filter",
-            "[placeholder='any extension']": "ext-filter",
-            "[placeholder='any tag']": "tag filter",
-            "[placeholder='any state']": "state-filter",
-            "[placeholder='any database']": "db-filter",
-            "[placeholder='index equals']": "hid-related",
-            "[placeholder='index greater']": "hid-greater",
-            "[placeholder='index lower']": "hid-lower",
-            "[placeholder='created after']": "January 1, 2022",
-            "[placeholder='created before']": "January 1, 2023",
-        };
-
-        // only add name filter in the advanced menu
-        let filterName = wrapper.find("[placeholder='any name']");
-        if (filterName.vm && filterName.props().type == "text") {
-            filterName.setValue(filterInputs["[placeholder='any name']"]);
-        }
-
-        // Test: keyup.enter search (should toggle the view out)
-        await filterName.trigger("keyup.enter");
-        await expectCorrectEmits(false, "name:name-filter");
-
-        // Test: clearing the filterText
-        const clearButton = wrapper.find("[data-description='clear filters']");
-        await clearButton.trigger("click");
-        await expectCorrectEmits(false, "");
-
-        // Test: toggling view back in
-        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
-        await toggleButton.trigger("click");
-        await expectCorrectEmits(true, "");
-
-        // Now add filters in all input fields in the advanced menu
-        Object.entries(filterInputs).forEach(([selector, value]) => {
-            const filterInput = wrapper.find(selector);
-            if (filterInput.vm && filterInput.props().type == "text") {
-                filterInput.setValue(value);
-            }
-        });
-
-        // Test: search button (should toggle the view out)
-        const searchButton = wrapper.find("[description='apply filters']");
-        await searchButton.trigger("click");
-
-        await expectCorrectEmits(
-            false,
-            "create_time>'January 1, 2022' create_time<'January 1, 2023' extension:ext-filter genome_build:db-filter related:hid-related hid>hid-greater hid<hid-lower name:name-filter state:state-filter tag:'tag filter'"
-        );
-
-        // -------- Test esc key:  ---------
-        // toggles view out only (doesn't cause a new search / doesn't emulate enter)
-
-        // clear the filterText
-        await clearButton.trigger("click");
-
-        // toggle view back in
-        await toggleButton.trigger("click");
-        await expectCorrectEmits(true, "");
-
-        // find name field again (could be destroyed beacause of toggling out)
-        filterName = wrapper.find("[placeholder='any name']");
-        if (filterName.vm && filterName.props().type == "text") {
-            filterName.setValue("newnamefilter");
-        }
-
-        // press esc key from name field (should not change emitted filterText unlike enter key)
-        await filterName.trigger("keyup.esc");
-        await expectCorrectEmits(false, "");
-    });
-
-    it("test radio-group default filters", async () => {
-        // -------- Testing deleted filter first:  ---------
-
-        await wrapper.setProps({ showAdvanced: true });
-        const deletedFilterBtnGrp = wrapper.find("[description='filter deleted']");
-        const deletedFilterAnyBtn = deletedFilterBtnGrp.find(".btn-secondary");
-        expect(deletedFilterAnyBtn.text()).toBe("Any");
-
-        // current active button for deleted filter should be "No"
-        let deletedFilterActiveBtn = deletedFilterBtnGrp.find(".btn-secondary.active");
-        expect(deletedFilterActiveBtn.text()).toBe("No");
-
-        await deletedFilterAnyBtn.find("input").setChecked();
-
-        // now active button for deleted filter should be "Any"
-        deletedFilterActiveBtn = deletedFilterBtnGrp.find(".btn-secondary.active");
-        expect(deletedFilterActiveBtn.text()).toBe("Any");
-
-        // expect "deleted = any" filter to be applied
-        let searchButton = wrapper.find("[description='apply filters']");
-        await searchButton.trigger("click");
-        await expectCorrectEmits(false, "visible:true");
-
-        // -------- Testing visible filter now:  ---------
-
-        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
-        await toggleButton.trigger("click");
-        await expectCorrectEmits(true, "visible:true");
-        const visibleFilterBtnGrp = wrapper.find("[description='filter visible']");
-        const visibleFilterAnyBtn = visibleFilterBtnGrp.find(".btn-secondary");
-        expect(visibleFilterAnyBtn.text()).toBe("Any");
-
-        // current active button for visible filter should be "Yes"
-        let visibleFilterActiveBtn = visibleFilterBtnGrp.find(".btn-secondary.active");
-        expect(visibleFilterActiveBtn.text()).toBe("Yes");
-
-        await visibleFilterAnyBtn.find("input").setChecked();
-
-        // now active button for visible filter should be "Any"
-        visibleFilterActiveBtn = visibleFilterBtnGrp.find(".btn-secondary.active");
-        expect(visibleFilterActiveBtn.text()).toBe("Any");
-
-        // expect "visible = any" filter to be applied
-        searchButton = wrapper.find("[description='apply filters']");
-        await searchButton.trigger("click");
-        await expectCorrectEmits(false, "deleted:any visible:any");
-
-        // -------- Testing repeated search if it prevents bug:  ---------
-        // (bug reported here: https://github.com/galaxyproject/galaxy/issues/16211)
-        await toggleButton.trigger("click");
-        await expectCorrectEmits(true, "deleted:any visible:any");
-        searchButton = wrapper.find("[description='apply filters']");
-        await searchButton.trigger("click");
-        await expectCorrectEmits(false, "deleted:any visible:any");
-    });
-});
diff --git a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue b/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue
deleted file mode 100644
index 2b281c673637..000000000000
--- a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFilters.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-    <div>
-        <b-input-group>
-            <DebouncedInput v-slot="{ value, input }" v-model="localFilter">
-                <b-form-input
-                    size="sm"
-                    :class="filterText && 'font-weight-bold'"
-                    :value="value"
-                    :placeholder="'search datasets' | localize"
-                    data-description="filter text input"
-                    @input="input"
-                    @keyup.esc="updateFilter('')" />
-            </DebouncedInput>
-            <b-input-group-append>
-                <b-button
-                    v-b-tooltip.hover.bottom.noninteractive
-                    aria-haspopup="true"
-                    size="sm"
-                    :pressed="showAdvanced"
-                    :variant="showAdvanced ? 'info' : 'secondary'"
-                    data-description="show advanced filter toggle"
-                    title="Show Advanced Filter"
-                    aria-label="Show advanced filter"
-                    @click="onToggle">
-                    <icon v-if="showAdvanced" fixed-width icon="angle-double-up" />
-                    <icon v-else fixed-width icon="angle-double-down" />
-                </b-button>
-                <b-button
-                    v-b-tooltip.hover.bottom.noninteractive
-                    aria-haspopup="true"
-                    size="sm"
-                    title="Clear Filters (esc)"
-                    aria-label="Clear filters"
-                    data-description="clear filters"
-                    @click="updateFilter('')">
-                    <icon fixed-width icon="times" />
-                </b-button>
-            </b-input-group-append>
-        </b-input-group>
-        <div
-            v-if="showAdvanced"
-            class="mt-2"
-            description="advanced filters"
-            @keyup.enter="onSearch"
-            @keyup.esc="onToggle">
-            <small>Filter by name:</small>
-            <b-form-input v-model="filterSettings['name:']" size="sm" placeholder="any name" />
-            <small class="mt-1">Filter by extension:</small>
-            <b-form-input v-model="filterSettings['extension:']" size="sm" placeholder="any extension" />
-            <small class="mt-1">Filter by tag:</small>
-            <b-form-input v-model="filterSettings['tag:']" size="sm" placeholder="any tag" />
-            <small class="mt-1">Filter by state:</small>
-            <b-input-group>
-                <b-form-input
-                    v-model="filterSettings['state:']"
-                    v-b-tooltip.focus.v-danger="hasError('state:')"
-                    :class="hasError('state:') && 'ui-input-error'"
-                    size="sm"
-                    placeholder="any state"
-                    list="stateSelect" />
-                <b-form-datalist id="stateSelect" :options="states"></b-form-datalist>
-                <b-input-group-append>
-                    <b-button title="States Help" size="sm" @click="showHelp = true">
-                        <icon icon="question" />
-                    </b-button>
-                </b-input-group-append>
-                <StatesInfo :show-help.sync="showHelp" :exclude-states="excludeStates" @set-filter="onOption" />
-            </b-input-group>
-            <small>Filter by database:</small>
-            <b-form-input v-model="filterSettings['genome_build:']" size="sm" placeholder="any database" />
-            <small class="mt-1">Filter by related to item index:</small>
-            <b-form-input
-                v-model="filterSettings['related:']"
-                v-b-tooltip.focus.v-danger="hasError('related:')"
-                :class="hasError('related:') && 'ui-input-error'"
-                size="sm"
-                placeholder="index equals" />
-            <small class="mt-1">Filter by item index:</small>
-            <b-form-group class="m-0">
-                <b-input-group>
-                    <b-form-input
-                        v-model="filterSettings['hid>']"
-                        v-b-tooltip.focus.v-danger="hasError('hid>')"
-                        :class="hasError('hid>') && 'ui-input-error'"
-                        size="sm"
-                        placeholder="index greater" />
-                    <b-form-input
-                        v-model="filterSettings['hid<']"
-                        v-b-tooltip.focus.v-danger="hasError('hid<')"
-                        :class="hasError('hid<') && 'ui-input-error'"
-                        size="sm"
-                        placeholder="index lower" />
-                </b-input-group>
-            </b-form-group>
-            <small class="mt-1">Filter by creation time:</small>
-            <b-form-group class="m-0">
-                <b-input-group>
-                    <b-form-input
-                        v-model="create_time_gt"
-                        v-b-tooltip.focus.v-danger="hasError('create_time>')"
-                        :class="hasError('create_time>') && 'ui-input-error'"
-                        size="sm"
-                        placeholder="created after" />
-                    <b-input-group-append>
-                        <b-form-datepicker v-model="create_time_gt" reset-button button-only size="sm" />
-                    </b-input-group-append>
-                    <b-form-input
-                        v-model="create_time_lt"
-                        v-b-tooltip.focus.v-danger="hasError('create_time<')"
-                        :class="hasError('create_time<') && 'ui-input-error'"
-                        size="sm"
-                        placeholder="created before" />
-                    <b-input-group-append>
-                        <b-form-datepicker v-model="create_time_lt" reset-button button-only size="sm" />
-                    </b-input-group-append>
-                </b-input-group>
-            </b-form-group>
-            <HistoryFiltersDefault :settings="filterSettings" @change="onOption" />
-            <div class="mt-3">
-                <b-button class="mr-1" size="sm" variant="primary" description="apply filters" @click="onSearch">
-                    <icon icon="search" />
-                    <span>{{ "Search" | localize }}</span>
-                </b-button>
-                <b-button size="sm" @click="onToggle">
-                    <icon icon="redo" />
-                    <span>{{ "Cancel" | localize }}</span>
-                </b-button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import DebouncedInput from "components/DebouncedInput";
-import { STATES } from "components/History/Content/model/states";
-import StatesInfo from "components/History/Content/model/StatesInfo";
-import { HistoryFilters } from "components/History/HistoryFilters";
-
-import HistoryFiltersDefault from "./HistoryFiltersDefault";
-
-export default {
-    components: {
-        DebouncedInput,
-        HistoryFiltersDefault,
-        StatesInfo,
-    },
-    props: {
-        filterText: { type: String, default: null },
-        showAdvanced: { type: Boolean, default: false },
-        searchError: { type: Object, default: null },
-    },
-    data() {
-        return {
-            create_time_gt: "",
-            create_time_lt: "",
-            excludeStates: ["empty", "failed", "upload"],
-            showHelp: false,
-        };
-    },
-    computed: {
-        filterSettings() {
-            return HistoryFilters.toAlias(HistoryFilters.getFiltersForText(this.filterText));
-        },
-        localFilter: {
-            get() {
-                return this.filterText;
-            },
-            set(newVal) {
-                if (newVal !== this.filterText) {
-                    this.updateFilter(newVal);
-                }
-            },
-        },
-        states() {
-            return Object.keys(STATES).filter((state) => !this.excludeStates.includes(state));
-        },
-    },
-    watch: {
-        filterSettings() {
-            this.create_time_gt = this.filterSettings["create_time>"];
-            this.create_time_lt = this.filterSettings["create_time<"];
-        },
-        showAdvanced(newVal) {
-            this.showHelp = !newVal ? false : this.showHelp;
-        },
-    },
-    methods: {
-        hasError(field) {
-            if (this.searchError && this.searchError.filter == field) {
-                return this.searchError.typeError || this.searchError.msg;
-            }
-            return "";
-        },
-        onOption(name, value) {
-            this.filterSettings[name] = value;
-        },
-        onSearch() {
-            this.onToggle();
-            this.filterSettings["create_time>"] = this.create_time_gt;
-            this.filterSettings["create_time<"] = this.create_time_lt;
-            // set values for deleted and visible => any, if removed previously
-            if (this.filterSettings["deleted:"] === undefined) {
-                this.filterSettings["deleted:"] = "any";
-            }
-            if (this.filterSettings["visible:"] === undefined) {
-                this.filterSettings["visible:"] = "any";
-            }
-            this.updateFilter(HistoryFilters.getFilterText(this.filterSettings));
-        },
-        onToggle() {
-            this.$emit("update:show-advanced", !this.showAdvanced);
-        },
-        updateFilter(newFilterText) {
-            this.$emit("update:filter-text", newFilterText);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFiltersDefault.vue b/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFiltersDefault.vue
deleted file mode 100644
index 4eed0b96ab6a..000000000000
--- a/client/src/components/History/CurrentHistory/HistoryFilters/HistoryFiltersDefault.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <div>
-        <small>Deleted:</small>
-        <b-form-group class="m-0">
-            <b-form-radio-group v-model="deleted" :options="options" size="sm" buttons description="filter deleted" />
-        </b-form-group>
-        <small>Visible:</small>
-        <b-form-group class="m-0">
-            <b-form-radio-group v-model="visible" :options="options" size="sm" buttons description="filter visible" />
-        </b-form-group>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        settings: { type: Object, required: true },
-    },
-    data() {
-        return {
-            options: [
-                { text: "Any", value: "any" },
-                { text: "Yes", value: true },
-                { text: "No", value: false },
-            ],
-        };
-    },
-    computed: {
-        deleted: {
-            get() {
-                return this.getValue("deleted");
-            },
-            set(value) {
-                this.onChange("deleted", value);
-            },
-        },
-        visible: {
-            get() {
-                return this.getValue("visible");
-            },
-            set(value) {
-                this.onChange("visible", value);
-            },
-        },
-    },
-    methods: {
-        getValue(name) {
-            const value = this.settings[`${name}:`];
-            return value !== undefined ? value : "any";
-        },
-        onChange(name, value) {
-            value = value !== null ? value : undefined;
-            this.$emit("change", `${name}:`, value);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index fbfb3d67e219..49079ef62355 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -26,9 +26,7 @@ export const validFilters = {
     related: { placeholder: "related", type: Number, handler: equals("related"), menuItem: true },
     hid: { placeholder: "index", type: Number, handler: equals("hid"), isRangeInput: true, menuItem: true },
     hid_ge: { handler: compare("hid", "ge"), menuItem: false },
-    hid_gt: { handler: compare("hid", "gt"), menuItem: false },
     hid_le: { handler: compare("hid", "le"), menuItem: false },
-    hid_lt: { handler: compare("hid", "lt"), menuItem: false },
     create_time: {
         placeholder: "creation time",
         type: Date,
@@ -37,19 +35,17 @@ export const validFilters = {
         menuItem: true,
     },
     create_time_ge: { handler: compare("create_time", "ge", toDate), menuItem: false },
-    create_time_gt: { handler: compare("create_time", "gt", toDate), menuItem: false },
     create_time_le: { handler: compare("create_time", "le", toDate), menuItem: false },
-    create_time_lt: { handler: compare("create_time", "lt", toDate), menuItem: false },
     deleted: {
         placeholder: "Deleted",
-        type: Boolean,
+        type: "Radio",
         options: options,
         handler: equals("deleted", "deleted", toBool),
         menuItem: true,
     },
     visible: {
         placeholder: "Visible",
-        type: Boolean,
+        type: "Radio",
         options: options,
         handler: equals("visible", "visible", toBool),
         menuItem: true,
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index 897ede63fe8d..c54b6801a32a 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -28,9 +28,7 @@ const validFilters = {
         menuItem: true,
     },
     update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
-    update_time_gt: { handler: compare("update_time", "gt", toDate), menuItem: false },
     update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
-    update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 
 const filters = new Filtering(validFilters, false);
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index b40046fdf74d..8c1b4cf9088f 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -33,9 +33,7 @@ const validFilters = {
         menuItem: true,
     },
     update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
-    update_time_gt: { handler: compare("update_time", "gt", toDate), menuItem: false },
     update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
-    update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 const HistoriesFilters = new Filtering(validFilters, false);
 
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index a6cd90e6ab8f..162e19b8f99e 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -38,16 +38,20 @@ interface RadioOption {
     value: string | number | boolean | Date | undefined;
 }
 
-/** A ValidFilter<T> for the Filtering<T> class, with its properties */
+/** A ValidFilter<T> with a `handler` for the `Filtering<T>` class,
+ * and remaining properties for the `FilterMenu` component
+ * */
 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 | "Radio" | typeof Date;
     /** The handler function for this filter */
     handler: HandlerReturn<T>;
-    /** Is this an filter to include as a field in `FilterMenu`? */
-    menuItem?: boolean;
+    /** Is this a filter to include as a field in `FilterMenu`?
+     * (if `false` the filter is still valid for the search bar `filterText`)
+     */
+    menuItem: boolean;
     /** Is there a datalist of values for this field */
     datalist?: string[];
     /** Is this a `FilterMenu` range filter?
@@ -56,7 +60,7 @@ export type ValidFilter<T> = {
      */
     isRangeInput?: boolean;
     /** The help info component to append to the `FilterMenu` input field */
-    helpInfo?: DefineComponent | HTMLElement | string;
+    helpInfo?: DefineComponent | string;
     /** The radio options if filter is a `FilterMenu` radio input */
     options?: RadioOption[];
 };
@@ -210,6 +214,36 @@ export default class Filtering<T> {
         this.validFilters = validFilters;
         this.useDefaultFilters = useDefaultFilters;
         this.validAliases = validAliases || defaultValidAliases;
+        // Add `name` filter if not present
+        if (this.validFilters["name"] === undefined) {
+            this.validFilters["name"] = {
+                handler: contains("name"),
+                menuItem: false,
+            };
+        }
+        this.addRangedFiltersIfNotPresent();
+    }
+
+    /** For `FilterMenu` validFilters, if `isRangeInput`, then adds handlers
+     * for the `lt` & `gt` filters if not included in `validFilters` already
+     */
+    addRangedFiltersIfNotPresent() {
+        Object.entries(this.validFilters).forEach(([key, filter]) => {
+            if (filter.isRangeInput) {
+                if (this.validFilters[`${key}_gt`] === undefined) {
+                    this.validFilters[`${key}_gt`] = {
+                        handler: compare(key, "gt"),
+                        menuItem: false,
+                    };
+                }
+                if (this.validFilters[`${key}_lt`] === undefined) {
+                    this.validFilters[`${key}_lt`] = {
+                        handler: compare(key, "lt"),
+                        menuItem: false,
+                    };
+                }
+            }
+        });
     }
 
     /** Returns true if default filter values are not changed

From 259cc1e1d152a32033ce0524cca764ffcafb7a19 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 8 Aug 2023 11:17:33 -0500
Subject: [PATCH 03/12] refactor creation of `dateKeys` and `helpModals` in
 `FilterMenu`

---
 client/src/components/Common/FilterMenu.vue | 18 +++++-------------
 client/src/utils/filtering.ts               |  8 ++++----
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 43792867d77d..77b59bfe286e 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -68,11 +68,7 @@ const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersFo
 const identifier = kebabCase(props.name);
 
 // all filters that have help info
-const helpEntries: [string, any][] = Object.entries(validFilters.value).filter(
-    ([, value]) => (value as ValidFilter<any>).helpInfo !== undefined
-);
-const helpClass: { [k: string]: ValidFilter<any> } = Object.fromEntries(helpEntries);
-const helpKeys = Object.keys(helpClass);
+const helpKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.helpInfo !== undefined);
 const defaultHelpModalsVal = helpKeys.reduce((acc: { [k: string]: boolean }, item: string) => {
     acc[item] = false;
     return acc;
@@ -91,17 +87,13 @@ const showHelp = ref(false);
  * (This was done to make the datepickers store values in the `filters` object)
  */
 const dateFilters: Ref<{ [key: string]: string }> = ref({});
-const dateEntries: [string, any][] = Object.entries(validFilters.value).filter(
-    ([, value]) => (value as ValidFilter<any>).type == Date
-);
-const dateClass: { [k: string]: ValidFilter<any> } = Object.fromEntries(dateEntries);
-const dateKeys = Object.keys(dateClass);
-for (const key in dateClass) {
-    if (dateClass[key]?.isRangeInput) {
+const dateKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.type == Date);
+dateKeys.forEach((key: string) => {
+    if (validFilters.value[key]?.isRangeInput) {
         dateKeys.push(key + "_lt");
         dateKeys.push(key + "_gt");
     }
-}
+});
 watch(
     () => filters.value,
     (newFilters: { [k: string]: any }) => {
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 162e19b8f99e..22fd733117e2 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -548,10 +548,10 @@ 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 = filterAttribute && item[filterAttribute];
-                if (itemValue === undefined || (filterHandler && itemValue && !filterHandler(itemValue, filterValue))) {
+                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;
                 }
             }

From 22acc06e0dbb6f256c362947bed783c741cc13f0 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 10 Aug 2023 14:36:35 -0500
Subject: [PATCH 04/12] use `FilterMenu` in `ToolSearch` and `WorkflowBox` Add
 functionailty for 3 types of menus. E.g.s: - `HistoryPanel` has default
 `linked` menu   i.e.: `filters` object is reactive to `filterText` -
 `ToolSearch` has `separate` menu (not reactive,   since `filterText` is for
 side panel search and menu   is for advanced search in center panel) -
 `WorkflowBox` has a `standalone` menu (no `filterText`

---
 client/src/components/Common/FilterMenu.vue   | 146 +++++-------
 .../components/Common/FilterMenuBoolean.vue   |  52 +++++
 .../src/components/Common/FilterMenuRadio.vue |  42 ----
 .../History/CurrentHistory/HistoryPanel.vue   |   1 +
 .../src/components/History/HistoryFilters.js  |  17 +-
 .../History/HistoryPublishedList.vue          |   3 +-
 .../History/Modals/SelectorModal.vue          |   3 +-
 .../components/Panels/Common/ToolSearch.vue   | 219 +++++++++---------
 client/src/components/Panels/WorkflowBox.vue  |  89 ++++++-
 client/src/components/Panels/utilities.js     |  18 --
 .../src/components/Workflow/WorkflowList.vue  |   2 +-
 .../components/Workflow/WorkflowSearch.vue    |  78 -------
 client/src/utils/filtering.ts                 |  89 ++++---
 13 files changed, 371 insertions(+), 388 deletions(-)
 create mode 100644 client/src/components/Common/FilterMenuBoolean.vue
 delete mode 100644 client/src/components/Common/FilterMenuRadio.vue
 delete mode 100644 client/src/components/Workflow/WorkflowSearch.vue

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 77b59bfe286e..d529aab49ce4 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -2,11 +2,11 @@
 import { capitalize, kebabCase } from "lodash";
 import { computed, type Ref, ref, watch } from "vue";
 
-import type { Alias, ValidFilter } from "@/utils/filtering";
 import type Filtering from "@/utils/filtering";
-import { getOperatorForAlias } from "@/utils/filtering";
+import { type Alias, getOperatorForAlias } from "@/utils/filtering";
 
-import FilterMenuRadio from "@/components/Common/FilterMenuRadio.vue";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
+import FilterMenuBoolean from "@/components/Common/FilterMenuBoolean.vue";
 
 interface BackendFilterError {
     err_msg: string;
@@ -22,48 +22,46 @@ interface BackendFilterError {
 
 const props = withDefaults(
     defineProps<{
+        /** A name for the menu */
         name?: string;
+        /** A placeholder for the main search input */
         placeholder?: string;
+        /** The `Filtering` class to use */
         filterClass: Filtering<any>;
-        filterText: string;
+        /** The current filter text in the main field */
+        filterText?: string;
+        /** Whether a help `<template>` has been provided for the `<slot>` */
         hasHelp?: boolean;
+        /** Whether to replace default Cancel (toggle) button with Clear */
+        hasClearBtn?: boolean;
+        /** Triggers the loading icon */
+        loading?: boolean;
+        /** Default `linked`: filters react to current `filterText` */
+        menuType?: "linked" | "separate" | "standalone";
+        /** A `BackendFilterError` if provided */
         searchError?: BackendFilterError;
+        /** Whether the advanced menu is currently expanded */
         showAdvanced?: boolean;
     }>(),
     {
         name: "Menu",
         placeholder: "search for items",
         filterText: "",
+        menuType: "linked",
         showAdvanced: false,
         searchError: undefined,
     }
 );
 
 const emit = defineEmits<{
-    (e: "update:show-advanced", showAdvanced: boolean): void;
     (e: "update:filter-text", filter: string): void;
-    (e: "show-help", filter: string, show: boolean): void;
+    (e: "update:show-advanced", showAdvanced: boolean): void;
+    (e: "on-search", filters: Record<string, string | boolean>, filterText?: string): void;
 }>();
 
-const defaultBoolOptions = [
-    { text: "Yes", value: true },
-    { text: "No", value: false },
-];
-
-const localFilterText = computed({
-    get: () => {
-        return props.filterText;
-    },
-    set: (newVal: any) => {
-        if (newVal !== props.filterText) {
-            updateFilterText(newVal as string);
-        }
-    },
-});
-
 const validFilters = computed(() => props.filterClass.validFilters);
 
-const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersForText(localFilterText.value)));
+const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersForText(props.filterText)));
 
 const identifier = kebabCase(props.name);
 
@@ -145,11 +143,18 @@ function onOption(filter: string, value: any) {
 }
 
 function onSearch() {
-    onToggle();
+    if (props.menuType === "linked") {
+        onToggle();
+    }
     Object.keys(dateFilters.value).forEach((key) => {
         onOption(key, dateFilters.value[key]);
     });
-    updateFilterText(props.filterClass.getFilterText(filters.value));
+    const newFilterText = props.filterClass.getFilterText(filters.value);
+    if (props.menuType !== "linked") {
+        emit("on-search", filters.value, newFilterText);
+    } else {
+        updateFilterText(newFilterText);
+    }
 }
 
 function onToggle() {
@@ -163,76 +168,49 @@ function updateFilterText(newFilterText: string) {
 
 <template>
     <div>
-        <b-input-group>
-            <b-form-input
-                :id="`${identifier}-filter`"
-                v-model="localFilterText"
-                size="sm"
-                :class="filterText && 'font-weight-bold'"
-                :placeholder="props.placeholder"
-                data-description="filter text input"
-                debounce="400"
-                @keyup.esc="updateFilterText('')" />
-            <b-input-group-append>
-                <b-button
-                    :id="`${identifier}-advanced-filter-toggle`"
-                    v-b-tooltip.hover
-                    aria-haspopup="true"
-                    size="sm"
-                    :pressed="showAdvanced"
-                    :variant="showAdvanced ? 'info' : 'secondary'"
-                    data-description="show advanced filter toggle"
-                    title="Show Advanced Filter"
-                    aria-label="Show advanced filter"
-                    @click="onToggle">
-                    <icon v-if="showAdvanced" icon="angle-double-up" />
-                    <icon v-else icon="angle-double-down" />
-                </b-button>
-                <b-button
-                    v-b-tooltip.hover
-                    aria-haspopup="true"
-                    size="sm"
-                    title="Clear Filters (esc)"
-                    aria-label="Clear filters"
-                    data-description="clear filters"
-                    @click="updateFilterText('')">
-                    <icon icon="times" />
-                </b-button>
-            </b-input-group-append>
-        </b-input-group>
-        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+        <DelayedInput
+            v-if="props.menuType !== 'standalone'"
+            v-show="props.menuType == 'linked' || (props.menuType == 'separate' && !props.showAdvanced)"
+            :class="props.filterText && 'font-weight-bold'"
+            :query="props.filterText"
+            :delay="400"
+            :loading="props.loading"
+            :show-advanced="props.showAdvanced"
+            enable-advanced
+            :placeholder="props.placeholder"
+            @change="updateFilterText"
+            @onToggle="onToggle" />
+        <b-button
+            v-if="props.menuType == 'separate' && props.showAdvanced"
+            v-b-tooltip.hover.noninteractive
+            class="w-100"
+            aria-haspopup="true"
+            size="sm"
+            :pressed="props.showAdvanced"
+            :variant="props.showAdvanced ? 'info' : 'secondary'"
+            :title="`Toggle Advanced Search`"
+            data-description="reset query"
+            @click="onToggle">
+            <icon fixed-width icon="angle-double-up" />
+        </b-button>
         <div
-            v-if="showAdvanced"
+            v-if="props.menuType == 'standalone' || props.showAdvanced"
             class="mt-2"
             data-description="advanced filters"
             @keyup.enter="onSearch"
             @keyup.esc="onToggle">
             <div v-for="filter in Object.keys(validFilters)" :key="filter">
                 <span v-if="validFilters[filter]?.menuItem">
-                    <!-- is a Radio filter -->
-                    <span v-if="validFilters[filter]?.type == 'Radio'">
+                    <!-- is a Boolean filter -->
+                    <span v-if="validFilters[filter]?.type == Boolean">
                         <small>{{ validFilters[filter]?.placeholder }}:</small>
-                        <FilterMenuRadio
-                            v-if="validFilters[filter]?.options"
-                            :filter="filter"
-                            :options="validFilters[filter]?.options"
+                        <FilterMenuBoolean
+                            :name="filter"
+                            :filter="validFilters[filter]"
                             :settings="filters"
                             @change="onOption" />
                     </span>
 
-                    <!-- is a Boolean filter -->
-                    <span v-else-if="validFilters[filter]?.type == Boolean">
-                        <small>{{ validFilters[filter]?.placeholder }}:</small>
-                        <b-form-group class="m-0">
-                            <b-form-radio-group
-                                v-model="filters[filter]"
-                                :options="defaultBoolOptions"
-                                size="sm"
-                                buttons
-                                :data-description="`filter ${filter}`" />
-                        </b-form-group>
-                    </span>
-
                     <!-- is a Ranged filter -->
                     <span v-else-if="validFilters[filter]?.isRangeInput" class="m-0">
                         <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
@@ -380,7 +358,7 @@ function updateFilterText(newFilterText: string) {
                     <icon icon="search" />
                     <span v-localize>Search</span>
                 </b-button>
-                <b-button size="sm" @click="onToggle">
+                <b-button v-if="props.menuType !== 'standalone'" size="sm" @click="onToggle">
                     <icon icon="redo" />
                     <span v-localize>Cancel</span>
                 </b-button>
diff --git a/client/src/components/Common/FilterMenuBoolean.vue b/client/src/components/Common/FilterMenuBoolean.vue
new file mode 100644
index 000000000000..7990159cbf66
--- /dev/null
+++ b/client/src/components/Common/FilterMenuBoolean.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/**
+ * REFACTOR CODE HERE, `ANY` FILTER SHOULD BE SET TO UNDEFINED ...
+ */
+import { computed } from "vue";
+
+const props = defineProps({
+    filter: { type: Object, required: true },
+    name: { type: String, required: true },
+    settings: { type: Object, required: true },
+});
+
+const boolType = computed(() => props.filter.boolType || "default");
+
+const options =
+    boolType.value == "default"
+        ? [
+              { text: "Any", value: "any" },
+              { text: "Yes", value: true },
+              { text: "No", value: false },
+          ]
+        : [
+              { text: "Yes", value: true },
+              { text: "No", value: "any" },
+          ];
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: boolean | string | undefined): void;
+}>();
+
+const value = computed({
+    get: () => {
+        const value = props.settings[props.name];
+        return value !== undefined ? value : "any";
+    },
+    set: (newVal: boolean | string | undefined) => {
+        const value = newVal !== null ? newVal : "any";
+        emit("change", props.name, value);
+    },
+});
+</script>
+
+<template>
+    <b-form-group class="m-0">
+        <b-form-radio-group
+            v-model="value"
+            :options="options"
+            size="sm"
+            buttons
+            :data-description="`filter ${props.name}`" />
+    </b-form-group>
+</template>
diff --git a/client/src/components/Common/FilterMenuRadio.vue b/client/src/components/Common/FilterMenuRadio.vue
deleted file mode 100644
index 7acffeb6b774..000000000000
--- a/client/src/components/Common/FilterMenuRadio.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps({
-    filter: { type: String, required: true },
-    options: {
-        type: Array<Object>,
-        default: () => [
-            { text: "Any", value: "any" },
-            { text: "Yes", value: true },
-            { text: "No", value: false },
-        ],
-    },
-    settings: { type: Object, required: true },
-});
-
-const emit = defineEmits<{
-    (e: "change", name: string, value: boolean | string | undefined): void;
-}>();
-
-const value = computed({
-    get: () => {
-        const value = props.settings[props.filter];
-        return value !== undefined ? value : "any";
-    },
-    set: (newVal: boolean | string | undefined) => {
-        const value = newVal !== null ? newVal : "any";
-        emit("change", props.filter, value);
-    },
-});
-</script>
-
-<template>
-    <b-form-group class="m-0">
-        <b-form-radio-group
-            v-model="value"
-            :options="options"
-            size="sm"
-            buttons
-            :data-description="`filter ${props.filter}`" />
-    </b-form-group>
-</template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 4609f3d2365e..7704b82e70a8 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -34,6 +34,7 @@
                     placeholder="search datasets"
                     :filter-class="filterClass"
                     :filter-text.sync="filterText"
+                    :loading="loading"
                     :search-error="searchError"
                     :show-advanced.sync="showAdvanced" />
                 <section v-if="!showAdvanced">
diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
index 49079ef62355..2cca93b7337d 100644
--- a/client/src/components/History/HistoryFilters.js
+++ b/client/src/components/History/HistoryFilters.js
@@ -4,13 +4,8 @@ import Filtering, { compare, contains, equals, expandNameTag, toBool, toDate } f
 
 const excludeStates = ["empty", "failed", "upload"];
 const states = Object.keys(STATES).filter((state) => !excludeStates.includes(state));
-const options = [
-    { text: "Any", value: "any" },
-    { text: "Yes", value: true },
-    { text: "No", value: false },
-];
 
-export const validFilters = {
+const validFilters = {
     name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
     extension: { placeholder: "extension", type: String, handler: equals("extension"), menuItem: true },
     tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
@@ -38,16 +33,16 @@ export const validFilters = {
     create_time_le: { handler: compare("create_time", "le", toDate), menuItem: false },
     deleted: {
         placeholder: "Deleted",
-        type: "Radio",
-        options: options,
+        type: Boolean,
         handler: equals("deleted", "deleted", toBool),
+        default: false,
         menuItem: true,
     },
     visible: {
         placeholder: "Visible",
-        type: "Radio",
-        options: options,
+        type: Boolean,
         handler: equals("visible", "visible", toBool),
+        default: true,
         menuItem: true,
     },
     update_time: { handler: compare("update_time", "le", toDate), menuItem: false },
@@ -57,4 +52,4 @@ export const validFilters = {
     update_time_lt: { handler: compare("update_time", "lt", toDate), menuItem: false },
 };
 
-export const HistoryFilters = new Filtering(validFilters, true);
+export const HistoryFilters = new Filtering(validFilters);
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index c54b6801a32a..f176407cb7bc 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -31,7 +31,7 @@ const validFilters = {
     update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
 };
 
-const filters = new Filtering(validFilters, false);
+const filters = new Filtering(validFilters);
 
 const props = defineProps({
     fUsername: {
@@ -214,6 +214,7 @@ watch([filterText, sortBy, sortDesc], async () => {
                 :placeholder="'Search by name or use the advanced filtering options' | localize"
                 :filter-class="filters"
                 :filter-text.sync="filterText"
+                :loading="loading"
                 :show-advanced.sync="showAdvanced" />
 
             <b-alert v-if="noResults || error" :variant="error ? 'danger' : 'info'" show>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 8c1b4cf9088f..0f52deee8b02 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -35,7 +35,7 @@ const validFilters = {
     update_time_ge: { handler: compare("update_time", "ge", toDate), menuItem: false },
     update_time_le: { handler: compare("update_time", "le", toDate), menuItem: false },
 };
-const HistoriesFilters = new Filtering(validFilters, false);
+const HistoriesFilters = new Filtering(validFilters);
 
 type AdditionalOptions = "set-current" | "multi" | "center";
 type HistorySummary = components["schemas"]["HistorySummary"];
@@ -233,6 +233,7 @@ async function loadMore(noScroll = false) {
                     placeholder="search datasets"
                     :filter-class="HistoriesFilters"
                     :filter-text.sync="filter"
+                    :loading="busy"
                     :show-advanced.sync="showAdvanced" />
             </BFormGroup>
 
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 7c1d679bd4d2..8f67db2dd555 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
+import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { getGalaxyInstance } from "@/app";
-import _l from "@/utils/localization";
+import Filtering, { contains, type ValidFilter } from "@/utils/filtering";
 
 import { flattenTools } from "../utilities.js";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
+import FilterMenu from "@/components/Common/FilterMenu.vue";
 
 const router = useRouter();
 
@@ -18,13 +19,6 @@ const MIN_QUERY_LENGTH = 3;
 interface Tool {
     name?: string;
 }
-interface FilterSettings {
-    [key: string]: any;
-    name?: string;
-    section?: string;
-    id?: string;
-    help?: string;
-}
 
 const props = defineProps({
     currentPanelView: {
@@ -63,21 +57,49 @@ const emit = defineEmits<{
     (e: "onQuery", query: string): void;
 }>();
 
-const filterSettings: Ref<FilterSettings> = ref({});
-const showHelp: Ref<boolean> = ref(false);
 const searchWorker: Ref<Worker | undefined> = ref(undefined);
 
+const localFilterText = computed({
+    get: () => {
+        return props.query !== null ? props.query : "";
+    },
+    set: (newVal: any) => {
+        checkQuery(newVal);
+    },
+});
+
+const propShowAdvanced = computed({
+    get: () => {
+        return props.showAdvanced;
+    },
+    set: (val: boolean) => {
+        emit("update:show-advanced", val);
+    },
+});
 const sectionNames = computed(() => {
     return props.toolbox.map((section) =>
         section.name !== undefined && section.name !== "Uncategorized" ? section.name : ""
     );
 });
-const sectionLabel = computed(() => {
-    return props.currentPanelView === "default" ? "section" : "ontology";
-});
 const toolsList = computed(() => {
     return flattenTools(props.toolbox);
 });
+const validFilters: ComputedRef<Record<string, ValidFilter<string>>> = computed(() => {
+    return {
+        name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+        section: {
+            placeholder: props.currentPanelView === "default" ? "section" : "ontology",
+            type: String,
+            handler: contains("section"),
+            datalist: sectionNames.value,
+            menuItem: true,
+        },
+        id: { placeholder: "id", type: String, handler: contains("id"), menuItem: true },
+        owner: { placeholder: "repository owner", type: String, handler: contains("owner"), menuItem: true },
+        help: { placeholder: "help text", type: String, handler: contains("help"), menuItem: true },
+    };
+});
+const ToolFilters: ComputedRef<Filtering<string>> = computed(() => new Filtering(validFilters.value));
 
 onMounted(() => {
     searchWorker.value = new Worker(new URL("../toolSearch.worker.js", import.meta.url));
@@ -101,7 +123,6 @@ onUnmounted(() => {
 });
 
 function checkQuery(q: string) {
-    filterSettings.value["name"] = q;
     emit("onQuery", q);
     if (q && q.length >= MIN_QUERY_LENGTH) {
         if (FAVORITES.includes(q)) {
@@ -125,113 +146,81 @@ function post(message: object) {
     searchWorker.value?.postMessage(message);
 }
 
-function onSearch() {
-    for (const [filter, value] of Object.entries(filterSettings.value)) {
-        if (!value) {
-            delete filterSettings.value[filter];
-        }
-    }
-    router.push({ path: "/tools/list", query: filterSettings.value });
-}
-
-function onToggle(toggleAdvanced: boolean) {
-    emit("update:show-advanced", toggleAdvanced);
+function onAdvancedSearch(filters: any, filterText?: string) {
+    router.push({ path: "/tools/list", query: filters });
 }
 </script>
 
 <template>
     <div>
-        <small v-if="showAdvanced">Filter by name:</small>
+        <FilterMenu
+            v-if="props.enableAdvanced"
+            :class="!propShowAdvanced && 'mb-3'"
+            name="Tool Search"
+            :placeholder="props.placeholder"
+            :filter-class="ToolFilters"
+            :filter-text.sync="localFilterText"
+            has-help
+            :loading="props.queryPending"
+            :show-advanced.sync="propShowAdvanced"
+            menu-type="separate"
+            @on-search="onAdvancedSearch">
+            <template v-slot:menu-help-text>
+                <div>
+                    <p>
+                        You can use this Advanced Tool Search Panel to find tools by applying search filters, with the
+                        results showing up in the center panel.
+                    </p>
+
+                    <p>
+                        <i>
+                            (Clicking on the Section, Repo or Owner labels in the Search Results will activate the
+                            according filter)
+                        </i>
+                    </p>
+
+                    <p>The available tool search filters are:</p>
+                    <dl>
+                        <dt><code>name</code></dt>
+                        <dd>The tool name (stored as tool.name + tool.description in the XML)</dd>
+                        <dt><code>section</code></dt>
+                        <dd>
+                            The tool section is based on the current view you have selected for the panel. <br />
+                            When this field is active, you will be able to see a datalist showing the available sections
+                            you can filter from. <br />
+                            By default, Galaxy tool panel sections are filterable if you are currently on the
+                            <i>Full Tool Panel</i> view, and it will show EDAM ontologies or EDAM topics if you have
+                            either of those options selected. <br />
+                            Change panel views by clicking on the
+                            <icon icon="caret-down" />
+                            icon at the top right of the tool panel.
+                        </dd>
+                        <dt><code>id</code></dt>
+                        <dd>The tool id (taken from its XML)</dd>
+                        <dt><code>owner</code></dt>
+                        <dd>
+                            For the tools that have been installed from the
+                            <a href="https://toolshed.g2.bx.psu.edu/" target="_blank">ToolShed</a>
+                            , this <i>owner</i> filter allows you to search for tools from a specific ToolShed
+                            repository <b>owner</b>.
+                        </dd>
+                        <dt><code>help text</code></dt>
+                        <dd>
+                            This is like a keyword search: you can search for keywords that might exist in a tool's help
+                            text. An example input:
+                            <i>"genome, RNA, minimap"</i>
+                        </dd>
+                    </dl>
+                </div>
+            </template>
+        </FilterMenu>
         <DelayedInput
-            :class="!showAdvanced && 'mb-3'"
-            :query="query"
+            v-else
+            class="mb-3"
+            :query="props.query"
             :delay="100"
             :loading="queryPending"
-            :show-advanced="showAdvanced"
-            :enable-advanced="enableAdvanced"
-            :placeholder="showAdvanced ? 'any name' : placeholder"
-            @change="checkQuery"
-            @onToggle="onToggle" />
-        <div
-            v-if="showAdvanced"
-            description="advanced tool filters"
-            @keyup.enter="onSearch"
-            @keyup.esc="onToggle(false)">
-            <small class="mt-1">Filter by {{ sectionLabel }}:</small>
-            <b-form-input
-                v-model="filterSettings['section']"
-                autocomplete="off"
-                size="sm"
-                :placeholder="`any ${sectionLabel}`"
-                list="sectionSelect" />
-            <b-form-datalist id="sectionSelect" :options="sectionNames"></b-form-datalist>
-            <small class="mt-1">Filter by id:</small>
-            <b-form-input v-model="filterSettings['id']" size="sm" placeholder="any id" />
-            <small class="mt-1">Filter by repository owner:</small>
-            <b-form-input v-model="filterSettings['owner']" size="sm" placeholder="any owner" />
-            <small class="mt-1">Filter by help text:</small>
-            <b-form-input v-model="filterSettings['help']" size="sm" placeholder="any help text" />
-            <div class="mt-3">
-                <b-button class="mr-1 filter-search-btn" size="sm" variant="primary" @click="onSearch">
-                    <icon icon="search" />
-                    <span>{{ _l("Search") }}</span>
-                </b-button>
-                <b-button size="sm" @click="onToggle(false)">
-                    <icon icon="redo" />
-                    <span>{{ _l("Cancel") }}</span>
-                </b-button>
-                <b-button title="Search Help" size="sm" @click="showHelp = true">
-                    <icon icon="question" />
-                </b-button>
-                <b-modal v-model="showHelp" title="Tool Advanced Search Help" ok-only>
-                    <div>
-                        <p>
-                            You can use this Advanced Tool Search Panel to find tools by applying search filters, with
-                            the results showing up in the center panel.
-                        </p>
-
-                        <p>
-                            <i>
-                                (Clicking on the Section, Repo or Owner labels in the Search Results will activate the
-                                according filter)
-                            </i>
-                        </p>
-
-                        <p>The available tool search filters are:</p>
-                        <dl>
-                            <dt><code>name</code></dt>
-                            <dd>The tool name (stored as tool.name + tool.description in the XML)</dd>
-                            <dt><code>section</code></dt>
-                            <dd>
-                                The tool section is based on the current view you have selected for the panel. <br />
-                                When this field is active, you will be able to see a datalist showing the available
-                                sections you can filter from. <br />
-                                By default, Galaxy tool panel sections are filterable if you are currently on the
-                                <i>Full Tool Panel</i> view, and it will show EDAM ontologies or EDAM topics if you have
-                                either of those options selected. <br />
-                                Change panel views by clicking on the
-                                <icon icon="caret-down" />
-                                icon at the top right of the tool panel.
-                            </dd>
-                            <dt><code>id</code></dt>
-                            <dd>The tool id (taken from its XML)</dd>
-                            <dt><code>owner</code></dt>
-                            <dd>
-                                For the tools that have been installed from the
-                                <a href="https://toolshed.g2.bx.psu.edu/" target="_blank">ToolShed</a>
-                                , this <i>owner</i> filter allows you to search for tools from a specific ToolShed
-                                repository <b>owner</b>.
-                            </dd>
-                            <dt><code>help text</code></dt>
-                            <dd>
-                                This is like a keyword search: you can search for keywords that might exist in a tool's
-                                help text. An example input:
-                                <i>"genome, RNA, minimap"</i>
-                            </dd>
-                        </dl>
-                    </div>
-                </b-modal>
-            </div>
-        </div>
+            :placeholder="placeholder"
+            @change="checkQuery" />
     </div>
 </template>
diff --git a/client/src/components/Panels/WorkflowBox.vue b/client/src/components/Panels/WorkflowBox.vue
index a26197a184b4..5c8b76912ddc 100644
--- a/client/src/components/Panels/WorkflowBox.vue
+++ b/client/src/components/Panels/WorkflowBox.vue
@@ -3,17 +3,63 @@ 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 { useUserStore } from "@/stores/userStore";
+import Filtering, { contains, type Converter, equals, toBool, type ValidFilter } from "@/utils/filtering";
 import { withPrefix } from "@/utils/redirect";
 
-import WorkflowSearch from "@/components/Workflow/WorkflowSearch.vue";
+import FilterMenu from "@/components/Common/FilterMenu.vue";
+
+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;
+    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}`;
@@ -69,7 +115,46 @@ function userTitle(title: string) {
                     Please <a :href="withPrefix('/login')">log in or register</a> to create workflows.
                 </b-badge>
             </div>
-            <WorkflowSearch v-else />
+            <FilterMenu
+                v-else
+                name="Workflows"
+                :filter-class="WorkflowFilters"
+                has-help
+                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>
+                </template>
+            </FilterMenu>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Panels/utilities.js b/client/src/components/Panels/utilities.js
index 26e7823adc76..bc9aebc069e7 100644
--- a/client/src/components/Panels/utilities.js
+++ b/client/src/components/Panels/utilities.js
@@ -9,24 +9,6 @@ const TOOLS_RESULTS_SORT_LABEL = "apiSort";
 const TOOLS_RESULTS_SECTIONS_HIDE = ["Expression Tools"];
 const STRING_REPLACEMENTS = [" ", "-", "(", ")", "'", ":", `"`];
 
-// Converts filterSettings { key: value } to query = "key:value"
-export function createWorkflowQuery(filterSettings) {
-    let query = "";
-    query = Object.entries(filterSettings)
-        .filter(([filter, value]) => value)
-        .map(([filter, value]) => {
-            if (value === true) {
-                return `is:${filter}`;
-            }
-            return `${filter}:${value}`;
-        })
-        .join(" ");
-    if (Object.keys(filterSettings).length == 1 && filterSettings.name) {
-        return filterSettings.name;
-    }
-    return query;
-}
-
 /** Converts filters into tool search backend whoosh query.
  * @param {Object} filterSettings e.g.: {"name": "Tool Name", "section": "Collection", ...}
  * @param {String} panelView (if not `default`, does ontology search at backend)
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 0501c31c6e78..bb97bad57439 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -137,7 +137,7 @@ const helpHtml = `<div>
         </dd>
         <dt><code>is:importable</code></dt>
         <dd>
-            Shows importable workflows (this also means they have URL generated).
+            Shows importable workflows (this also means they are URL generated).
         </dd>
         <dt><code>is:shared_with_me</code></dt>
         <dd>
diff --git a/client/src/components/Workflow/WorkflowSearch.vue b/client/src/components/Workflow/WorkflowSearch.vue
deleted file mode 100644
index 25a7f5d1bfe5..000000000000
--- a/client/src/components/Workflow/WorkflowSearch.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { type Ref, ref } from "vue";
-import { useRouter } from "vue-router/composables";
-
-import { createWorkflowQuery } from "@/components/Panels/utilities";
-import _l from "@/utils/localization";
-
-const router = useRouter();
-
-type FilterSettings = {
-    name?: string;
-    tag?: string;
-    published?: boolean;
-    shared_with_me?: boolean;
-    deleted?: boolean;
-};
-
-const options = [
-    { text: "Yes", value: true },
-    { text: "No", value: false },
-];
-
-const filterSettings: Ref<FilterSettings> = ref({
-    published: false,
-    shared_with_me: false,
-    deleted: false,
-});
-
-function onSearch() {
-    const query = createWorkflowQuery(filterSettings.value);
-    const path = "/workflows/list";
-    const routerParams = query ? { path, query: { query } } : { path };
-    router.push(routerParams);
-}
-</script>
-<template>
-    <div>
-        <div description="advanced workflow filters" @keyup.enter="onSearch">
-            <small class="mt-1">Filter by name:</small>
-            <b-form-input v-model="filterSettings.name" size="sm" placeholder="any name" />
-            <small class="mt-1">Filter by tag:</small>
-            <b-form-input v-model="filterSettings.tag" size="sm" placeholder="any tag" />
-            <small>Search published workflows:</small>
-            <b-form-group class="m-0">
-                <b-form-radio-group
-                    v-model="filterSettings.published"
-                    :options="options"
-                    size="sm"
-                    buttons
-                    description="filter published" />
-            </b-form-group>
-            <small>Search shared workflows:</small>
-            <b-form-group class="m-0">
-                <b-form-radio-group
-                    v-model="filterSettings.shared_with_me"
-                    :options="options"
-                    size="sm"
-                    buttons
-                    description="filter shared" />
-            </b-form-group>
-            <small>Search deleted workflows:</small>
-            <b-form-group class="m-0">
-                <b-form-radio-group
-                    v-model="filterSettings.deleted"
-                    :options="options"
-                    size="sm"
-                    buttons
-                    description="filter deleted" />
-            </b-form-group>
-            <div class="mt-3">
-                <b-button class="mr-1" size="sm" variant="primary" @click="onSearch">
-                    <icon icon="search" />
-                    <span>{{ _l("Search") }}</span>
-                </b-button>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 22fd733117e2..f8b0cf6a34f4 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -12,7 +12,7 @@
 import { omit } from "lodash";
 import type { DefineComponent } from "vue";
 
-type Converter<T> = (value: T) => T;
+export type Converter<T> = (value: T) => T;
 type Handler<T> = (v: T, q: T) => boolean;
 
 /** Add comparison aliases i.e. '*>value' is converted to '*_gt=value' */
@@ -33,11 +33,6 @@ type OperatorForAlias = typeof operatorForAlias;
 export type Alias = keyof OperatorForAlias;
 type Operator = OperatorForAlias[Alias];
 
-interface RadioOption {
-    text: string;
-    value: string | number | boolean | Date | undefined;
-}
-
 /** A ValidFilter<T> with a `handler` for the `Filtering<T>` class,
  * and remaining properties for the `FilterMenu` component
  * */
@@ -45,7 +40,12 @@ 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 | "Radio" | typeof Date;
+    type?: typeof String | typeof Number | typeof Boolean | typeof Date;
+    /** If type: Boolean:
+     * - booleanType: 'default' creates: `filter:true|false|any`
+     * - booleanType: 'is' creates: `is:filter`
+     */
+    boolType?: "default" | "is";
     /** The handler function for this filter */
     handler: HandlerReturn<T>;
     /** Is this a filter to include as a field in `FilterMenu`?
@@ -61,8 +61,8 @@ export type ValidFilter<T> = {
     isRangeInput?: boolean;
     /** The help info component to append to the `FilterMenu` input field */
     helpInfo?: DefineComponent | string;
-    /** The radio options if filter is a `FilterMenu` radio input */
-    options?: RadioOption[];
+    /** A default value (will make this a default filter for an empty `filterText`) */
+    default?: T;
 };
 
 /** Converts user input to backend compatible date
@@ -200,20 +200,17 @@ export function compare<T>(attribute: string, variant: string, converter?: Conve
 export default class Filtering<T> {
     validFilters: Record<string, ValidFilter<T>>;
     validAliases: Array<[string, string]>;
-    useDefaultFilters: boolean;
-    defaultFilters: Record<string, T> = {
-        deleted: false as T,
-        visible: true as T,
-    };
+    defaultFilters: Record<string, T>;
+    quoteStrings: boolean;
 
     constructor(
         validFilters: Record<string, ValidFilter<T>>,
-        useDefaultFilters = true,
-        validAliases?: Array<[string, string]>
+        validAliases?: Array<[string, string]>,
+        quoteStrings = true
     ) {
         this.validFilters = validFilters;
-        this.useDefaultFilters = useDefaultFilters;
         this.validAliases = validAliases || defaultValidAliases;
+        this.quoteStrings = quoteStrings;
         // Add `name` filter if not present
         if (this.validFilters["name"] === undefined) {
             this.validFilters["name"] = {
@@ -221,6 +218,7 @@ export default class Filtering<T> {
                 menuItem: false,
             };
         }
+        this.defaultFilters = this.createDefaultFiltersIfPresent();
         this.addRangedFiltersIfNotPresent();
     }
 
@@ -246,12 +244,26 @@ export default class Filtering<T> {
         });
     }
 
+    /** If any `validFilters` are given the `default` key, a `defaultFilters`
+     * object is created with provided values, that an empty `filterText`
+     * corresponds to.
+     * */
+    createDefaultFiltersIfPresent(): Record<string, T> {
+        const defaultFilters: Record<string, T> = {};
+        Object.entries(this.validFilters).forEach(([key, filter]) => {
+            if (filter.default !== undefined) {
+                defaultFilters[key] = filter.default;
+            }
+        });
+        return defaultFilters;
+    }
+
     /** Returns true if default filter values are not changed
      * @param filters Object containing filters
      * @returns true if default filter values are not changed
      * **/
     containsDefaults(filters: Record<string, T>): boolean {
-        if (this.useDefaultFilters === false) {
+        if (this.defaultFilters === undefined) {
             return false;
         }
         let hasDefaults = true;
@@ -273,7 +285,7 @@ export default class Filtering<T> {
      */
     hasAllDefaultKeys(filters: Record<string, T>): boolean {
         return (
-            this.useDefaultFilters &&
+            this.defaultFilters !== undefined &&
             Object.keys(this.defaultFilters).every((def) => Object.keys(filters).includes(def))
         );
     }
@@ -294,14 +306,19 @@ export default class Filtering<T> {
                 if (newFilterText) {
                     newFilterText += " ";
                 }
-                if (String(value).includes(" ")) {
-                    value = `'${value}'` as T;
+                if (this.validFilters[key]?.type == Boolean && this.validFilters[key]?.boolType == "is") {
+                    if (value === true) {
+                        newFilterText += `is:${key}`;
+                    }
+                } else if (this.quoteStrings && String(value).includes(" ")) {
+                    newFilterText += `${this.toAliasKey(key)}'${value}'`;
+                } else {
+                    newFilterText += `${this.toAliasKey(key)}${value}`;
                 }
-                newFilterText += `${this.toAliasKey(key)}${value}`;
             }
         });
         // enforce `filter:any` for any default *boolean* filters missing in filters object
-        if (!hasDefaults && this.useDefaultFilters) {
+        if (!hasDefaults && this.defaultFilters !== undefined) {
             Object.entries(this.defaultFilters).forEach(([key, value]) => {
                 if (filters[key] == undefined && typeof value === "boolean") {
                     if (newFilterText) {
@@ -353,20 +370,22 @@ export default class Filtering<T> {
         if (!hasMatches && filterText.length > 0) {
             result["name"] = filterText as T;
         }
-        // check if any default filter keys have been used
-        let hasDefaults = false;
-        Object.keys(this.defaultFilters).forEach((defaultKey) => {
-            const value = result[defaultKey];
-            if (value !== undefined) {
-                if (value == "any" && removeAny) {
-                    delete result[defaultKey];
+        // check if any default filter keys have been used in the filter text
+        if (this.defaultFilters !== undefined) {
+            let hasDefaults = false;
+            Object.keys(this.defaultFilters).forEach((defaultKey) => {
+                const value = result[defaultKey];
+                if (value !== undefined) {
+                    if (value == "any" && removeAny) {
+                        delete result[defaultKey];
+                    }
+                    hasDefaults = true;
                 }
-                hasDefaults = true;
+            });
+            // use default filters if none of the default filters has been explicitly specified
+            if (!hasDefaults) {
+                result = { ...result, ...this.defaultFilters };
             }
-        });
-        // use default filters if none of the default filters has been explicitly specified
-        if (!hasDefaults && this.useDefaultFilters) {
-            result = { ...result, ...this.defaultFilters };
         }
 
         return Object.entries(result);

From fea0f88f56b622e7fd2527891ed720c6046efe5d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 25 Aug 2023 00:14:23 -0500
Subject: [PATCH 05/12] 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 50456f7688d2..f331c20151ae 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 e0d3d8ebaca5..ac934cde8f44 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;
+                    }
                 }
             }
         }

From 3f19332bc5d3b8ef8306526168d93271b04fcac1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 29 Aug 2023 20:53:03 -0500
Subject: [PATCH 06/12] add `FilterMenu` to `PageList` and fix some jests and
 seleniums

---
 client/src/components/Common/DelayedInput.vue |   1 +
 .../src/components/Common/FilterMenu.test.js  |  36 ++---
 client/src/components/Common/FilterMenu.vue   |  34 ++++-
 .../History/Modals/SelectorModal.vue          |   2 +-
 .../Indices/SharingIndicators.test.js         |   4 +-
 client/src/components/Page/PageList.test.js   |  43 ++++--
 client/src/components/Page/PageList.vue       | 114 ++++++++++++---
 .../Panels/Common/ToolSearch.test.js          |  21 ++-
 .../components/Panels/Common/ToolSearch.vue   |   4 +-
 client/src/components/Panels/WorkflowBox.vue  |   2 +-
 .../src/components/Panels/utilities.test.js   |  15 --
 .../components/Workflow/WorkflowFilters.js    |  27 +++-
 .../components/Workflow/WorkflowList.test.js  |  38 +++--
 .../src/components/Workflow/WorkflowList.vue  |  43 +++---
 client/src/utils/filterConversion.test.js     | 134 ++++++++++++++----
 client/src/utils/filtering.test.js            |  44 +++---
 client/src/utils/filtering.ts                 |  49 +++++--
 client/src/utils/navigation/navigation.yml    |  12 +-
 lib/galaxy/selenium/navigates_galaxy.py       |   2 +-
 19 files changed, 428 insertions(+), 197 deletions(-)

diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index f331c20151ae..641b206e7da5 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -7,6 +7,7 @@
             size="sm"
             autocomplete="off"
             :placeholder="placeholder"
+            data-description="filter text input"
             @input="delayQuery"
             @change="setQuery"
             @keydown.esc="setQuery('')" />
diff --git a/client/src/components/Common/FilterMenu.test.js b/client/src/components/Common/FilterMenu.test.js
index 047691f8d3f4..254efe75bedc 100644
--- a/client/src/components/Common/FilterMenu.test.js
+++ b/client/src/components/Common/FilterMenu.test.js
@@ -42,20 +42,20 @@ const validTestFilters = {
     },
     /** A ranged number filter */
     number: { placeholder: "index", type: Number, handler: equals("number"), isRangeInput: true, menuItem: true },
-    /** A radio filter */
-    radio: {
-        placeholder: "Radio Option",
-        type: "Radio",
-        options: options,
-        handler: equals("radio", "radio", toBool),
+    /** A boolean filter with default boolType */
+    bool_def: {
+        placeholder: "Filter by option (any/yes/no)",
+        type: Boolean,
+        handler: equals("bool_def", "bool_def", toBool),
         menuItem: true,
     },
-    /** A boolean filter */
-    bool: {
-        placeholder: "Boolean Select",
+    /** A boolean filter with is:filter boolType */
+    bool_is: {
+        placeholder: "Filter by option (yes/no)",
         type: Boolean,
-        handler: equals("bool", "bool", toBool),
+        handler: equals("bool_is", "bool_is", toBool),
         menuItem: true,
+        boolType: "is",
     },
     /** A valid filter, just not included in menu */
     not_included: { handler: contains("not_included"), menuItem: false },
@@ -162,8 +162,8 @@ describe("FilterMenu", () => {
         const indexLtInput = wrapper.find("[placeholder='index lower']");
         indexGtInput.setValue("1234");
         indexLtInput.setValue("5678");
-        // radio filter
-        const radioBtnGrp = wrapper.find("[data-description='filter radio']").findAll(".btn-secondary");
+        // default bool filter
+        const radioBtnGrp = wrapper.find("[data-description='filter bool_def']").findAll(".btn-secondary");
         expect(radioBtnGrp.length).toBe(options.length);
         for (let i = 0; i < options.length; i++) {
             expect(radioBtnGrp.at(i).text()).toBe(options[i].text);
@@ -172,12 +172,12 @@ describe("FilterMenu", () => {
         }
         await radioBtnGrp.at(1).find("input").setChecked(); // click "Yes"
         // boolean filter
-        const boolBtnGrp = wrapper.find("[data-description='filter bool']").findAll(".btn-secondary");
+        const boolBtnGrp = wrapper.find("[data-description='filter bool_is']").findAll(".btn-secondary");
         expect(boolBtnGrp.length).toBe(2);
         expect(boolBtnGrp.at(0).text()).toBe("Yes");
         expect(boolBtnGrp.at(0).props().value).toBe(true);
         expect(boolBtnGrp.at(1).text()).toBe("No");
-        expect(boolBtnGrp.at(1).props().value).toBe(false);
+        expect(boolBtnGrp.at(1).props().value).toBe("any");
         await boolBtnGrp.at(1).find("input").setChecked(); // click "No"
 
         // perform search
@@ -186,7 +186,7 @@ describe("FilterMenu", () => {
             false,
             "create_time>'January 1, 2022' create_time<'January 1, 2023' " +
                 "filter_key:item-filter has_help:has-help-filter list_item:1234 " +
-                "number>1234 number<5678 name:name-filter radio:true bool:false",
+                "number>1234 number<5678 name:name-filter radio:true bool_def:true",
             TestFilters
         );
     });
@@ -210,12 +210,12 @@ describe("FilterMenu", () => {
         await expectCorrectEmits(false, "name:'sample name'", TestFilters);
 
         // Test: clearing the filterText
-        const clearButton = wrapper.find("[data-description='clear filters']");
+        const clearButton = wrapper.find("[data-description='reset query']");
         await clearButton.trigger("click");
         await expectCorrectEmits(false, "", TestFilters);
 
         // Test: toggling view back in
-        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
+        const toggleButton = wrapper.find("[data-description='toggle advanced search']");
         await toggleButton.trigger("click");
         await expectCorrectEmits(true, "", TestFilters);
 
@@ -262,7 +262,7 @@ describe("FilterMenu", () => {
 
         // -------- Testing visible filter now:  ---------
 
-        const toggleButton = wrapper.find("[data-description='show advanced filter toggle']");
+        const toggleButton = wrapper.find("[data-description='toggle advanced search']");
         await toggleButton.trigger("click");
         await expectCorrectEmits(true, "visible:true", HistoryFilters);
         const visibleFilterBtnGrp = wrapper.find("[data-description='filter visible']");
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index b0e8d1250eb7..477cf789c1c9 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -59,8 +59,9 @@ const props = withDefaults(
 
 const emit = defineEmits<{
     (e: "update:filter-text", filter: string): void;
+    (e: "on-backend-filter", filter: string): void;
     (e: "update:show-advanced", showAdvanced: boolean): void;
-    (e: "on-search", filters: Record<string, string | boolean>, filterText?: string): void;
+    (e: "on-search", filters: Record<string, string | boolean>, filterText?: string, backendFilter?: string): void;
 }>();
 
 const validFilters = computed(() => props.filterClass.validFilters);
@@ -164,9 +165,6 @@ function onOption(filter: string, value: any) {
 }
 
 function onSearch() {
-    if (props.menuType === "linked") {
-        onToggle();
-    }
     Object.keys(dateFilters.value).forEach((key) => {
         onOption(key, dateFilters.value[key]);
     });
@@ -174,10 +172,12 @@ function onSearch() {
         onOption(key, (multiTagFilters.value[key] as Ref<string[]>).value);
     });
     const newFilterText = props.filterClass.getFilterText(filters.value);
+    const newBackendFilter = props.filterClass.getFilterText(filters.value, true);
     if (props.menuType !== "linked") {
-        emit("on-search", filters.value, newFilterText);
+        emit("on-search", filters.value, newFilterText, newBackendFilter);
     } else {
         updateFilterText(newFilterText);
+        onToggle();
     }
 }
 
@@ -192,6 +192,25 @@ function onToggle() {
 function updateFilterText(newFilterText: string) {
     emit("update:filter-text", newFilterText);
 }
+
+// as the filterText changes, emit a backend-filter that can be used as a query
+watch(
+    () => props.filterText,
+    (newFilterText: string) => {
+        const defaultBackendFilter = props.filterClass.getFilterText(props.filterClass.defaultFilters, true);
+        const currentBackendFilter = props.filterClass.getFilterText(filters.value, true);
+
+        const backendFilter =
+            defaultBackendFilter === currentBackendFilter
+                ? `${
+                      defaultBackendFilter && !newFilterText.includes(defaultBackendFilter)
+                          ? defaultBackendFilter + " "
+                          : ""
+                  }` + newFilterText
+                : props.filterClass.getFilterText(filters.value, true);
+        emit("on-backend-filter", backendFilter);
+    }
+);
 </script>
 
 <template>
@@ -215,8 +234,8 @@ function updateFilterText(newFilterText: string) {
             aria-haspopup="true"
             size="sm"
             :pressed="props.showAdvanced"
-            :title="`Toggle Advanced Search`"
-            data-description="reset query"
+            title="Toggle Advanced Search"
+            data-description="wide toggle advanced search"
             @click="onToggle">
             <icon fixed-width icon="angle-double-up" />
         </b-button>
@@ -306,6 +325,7 @@ function updateFilterText(newFilterText: string) {
                         <b-input-group>
                             <StatelessTags
                                 :value="multiTagFilters[filter]?.value"
+                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
                                 @input="(tags) => onTags(filter, tags)" />
                         </b-input-group>
                     </span>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 9888c4c0fbef..400dc12bc743 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -230,7 +230,7 @@ async function loadMore(noScroll = false) {
                 <FilterMenu
                     ref="filterMenuRef"
                     name="Histories"
-                    placeholder="search datasets"
+                    placeholder="search histories"
                     :filter-class="HistoriesFilters"
                     :filter-text.sync="filter"
                     :loading="busy"
diff --git a/client/src/components/Indices/SharingIndicators.test.js b/client/src/components/Indices/SharingIndicators.test.js
index bf06e1ad58ec..2faa1013934b 100644
--- a/client/src/components/Indices/SharingIndicators.test.js
+++ b/client/src/components/Indices/SharingIndicators.test.js
@@ -48,13 +48,13 @@ describe("SharingIndicators.vue", () => {
         it("should fire a is:published filter on published click", async () => {
             await wrapper.find(".sharing-indicator-published").trigger("click");
             const emitted = wrapper.emitted("filter");
-            expect(emitted[0][0]).toBe("is:published");
+            expect(emitted[0][0]).toBe("published");
         });
 
         it("should fire a is:shared_with_me filter on shared click", async () => {
             await wrapper.find(".sharing-indicator-shared").trigger("click");
             const emitted = wrapper.emitted("filter");
-            expect(emitted[0][0]).toBe("is:shared_with_me");
+            expect(emitted[0][0]).toBe("shared_with_me");
         });
     });
 });
diff --git a/client/src/components/Page/PageList.test.js b/client/src/components/Page/PageList.test.js
index d86af44fa3e8..5bbce2dc08e4 100644
--- a/client/src/components/Page/PageList.test.js
+++ b/client/src/components/Page/PageList.test.js
@@ -5,7 +5,7 @@ import MockAdapter from "axios-mock-adapter";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import flushPromises from "flush-promises";
 import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue, wait } from "tests/jest/helpers";
 
 import PageList from "./PageList.vue";
 
@@ -14,6 +14,8 @@ jest.mock("app");
 const localVue = getLocalVue();
 localVue.use(PiniaVuePlugin);
 
+const debounceDelay = 500; // in ms - see FilterMenu.props.debounceDelay
+
 describe("PgeList.vue", () => {
     let axiosMock;
     let wrapper;
@@ -100,6 +102,9 @@ describe("PgeList.vue", () => {
         wrapper = mount(PageList, {
             propsData: propsDataPersonalGrid,
             localVue,
+            stubs: {
+                icon: { template: "<div></div>" },
+            },
         });
     }
 
@@ -129,6 +134,10 @@ describe("PgeList.vue", () => {
     });
 
     describe("with single private page", () => {
+        function findSearchBar(wrapper) {
+            return wrapper.find("[data-description='filter text input']");
+        }
+
         beforeEach(async () => {
             axiosMock
                 .onGet("/api/pages", { params: { search: "", ...personalGridApiParams } })
@@ -140,6 +149,9 @@ describe("PgeList.vue", () => {
                 propsData: propsDataPersonalGrid,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             await flushPromises();
         });
@@ -167,14 +179,14 @@ describe("PgeList.vue", () => {
         });
 
         it("starts with an empty filter", async () => {
-            expect(wrapper.find("#page-search").element.value).toBe("");
+            expect(findSearchBar(wrapper).element.value).toBe("");
         });
 
         it("fetches filtered results when search filter is used", async () => {
-            await wrapper.find("#page-search").setValue("mytext");
-            await flushPromises();
-            expect(wrapper.find("#page-search").element.value).toBe("mytext");
-            expect(wrapper.vm.filter).toBe("mytext");
+            await findSearchBar(wrapper).setValue("mytext");
+            expect(findSearchBar(wrapper).element.value).toBe("mytext");
+            await wait(debounceDelay);
+            expect(wrapper.vm.filterText).toBe("mytext");
         });
 
         it("updates filter when a tag is clicked", async () => {
@@ -182,7 +194,7 @@ describe("PgeList.vue", () => {
             expect(tags.length).toBe(3);
             tags[0].trigger("click");
             await flushPromises();
-            expect(wrapper.vm.filter).toBe("tag:'tagThis'");
+            expect(wrapper.vm.filterText).toBe("tag:'tagThis'");
         });
 
         it("updates filter when a tag is clicked only on the first click", async () => {
@@ -192,7 +204,7 @@ describe("PgeList.vue", () => {
             tags[0].trigger("click");
             tags[0].trigger("click");
             await flushPromises();
-            expect(wrapper.vm.filter).toBe("tag:'tagThis'");
+            expect(wrapper.vm.filterText).toBe("tag:'tagThis'");
         });
     });
     describe("with single published and importable page on personal grid", () => {
@@ -207,6 +219,9 @@ describe("PgeList.vue", () => {
                 propsData: propsDataPersonalGrid,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             await flushPromises();
         });
@@ -215,7 +230,7 @@ describe("PgeList.vue", () => {
             const row = rows[0];
             row.find(".sharing-indicator-published").trigger("click");
             await flushPromises();
-            expect(wrapper.vm.filter).toBe("is:published");
+            expect(wrapper.vm.filterText).toBe("is:published");
         });
 
         it("updates filter when shared with me icon is clicked", async () => {
@@ -223,7 +238,7 @@ describe("PgeList.vue", () => {
             const row = rows[0];
             row.find(".sharing-indicator-shared").trigger("click");
             await flushPromises();
-            expect(wrapper.vm.filter).toBe("is:shared_with_me");
+            expect(wrapper.vm.filterText).toBe("is:shared_with_me");
         });
 
         it("updates filter when importable icon is clicked", async () => {
@@ -231,7 +246,7 @@ describe("PgeList.vue", () => {
             const row = rows[0];
             row.find(".sharing-indicator-importable").trigger("click");
             await flushPromises();
-            expect(wrapper.vm.filter).toBe("is:importable");
+            expect(wrapper.vm.filterText).toBe("is:importable");
         });
     });
     describe("with single page on published grid", () => {
@@ -246,6 +261,9 @@ describe("PgeList.vue", () => {
                 propsData: propsDataPublishedGrid,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             await flushPromises();
         });
@@ -287,6 +305,9 @@ describe("PgeList.vue", () => {
                 propsData: propsDataPublishedGrid,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             await flushPromises();
         });
diff --git a/client/src/components/Page/PageList.vue b/client/src/components/Page/PageList.vue
index ac934cde8f44..8f8c66380b8e 100644
--- a/client/src/components/Page/PageList.vue
+++ b/client/src/components/Page/PageList.vue
@@ -6,7 +6,19 @@
         <b-alert v-bind="alertAttrs">{{ message }}</b-alert>
         <b-row class="mb-3">
             <b-col cols="6">
-                <IndexFilter v-bind="filterAttrs" id="page-search" v-model="filter" />
+                <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>
                 <PageIndexActions class="float-right" />
@@ -16,8 +28,8 @@
             <template v-slot:empty>
                 <loading-span v-if="loading" message="Loading pages" />
                 <b-alert v-else id="no-pages" 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 pages found. You may create a new page.</div>
@@ -35,24 +47,25 @@
             </template>
             <template v-slot:cell(tags)="row">
                 <StatelessTags
+                    clickable
                     :value="row.item.tags"
                     :index="row.index"
                     :disabled="published"
                     @input="(tags) => onTags(tags, row.index)"
-                    @tag-click="onTagClick" />
+                    @tag-click="(tag) => applyFilter('tag', tag, true)" />
             </template>
             <template v-slot:cell(username)="row">
                 <a
                     class="page-filter-link-owner"
                     href="#"
                     :title="'Search more from ' + row.item.username"
-                    @click="appendTagFilter('user', row.item.username)">
+                    @click="applyFilter('user', row.item.username, true)">
                     {{ row.item.username }}
                 </a>
             </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(`is:${filter}`, true)" />
+                    <SharingIndicators :object="row.item" @filter="(filter) => applyFilter(filter, true)" />
                     <CopyToClipboard
                         :title="'Copy URL' | localize"
                         :text="copyUrl(row.item)"
@@ -79,15 +92,15 @@
 </template>
 <script>
 import { getGalaxyInstance } from "app";
+import FilterMenu from "components/Common/FilterMenu";
 import CopyToClipboard from "components/CopyToClipboard";
-import filtersMixin from "components/Indices/filtersMixin";
-import IndexFilter from "components/Indices/IndexFilter";
 import SharingIndicators from "components/Indices/SharingIndicators";
 import { pagesProvider } from "components/providers/PageProvider";
 import StatelessTags from "components/TagsMultiselect/StatelessTags";
 import UtcDate from "components/UtcDate";
 import paginationMixin from "components/Workflow/paginationMixin";
 import { getAppRoot } from "onload/loadConfig";
+import Filtering, { contains, equals, expandNameTagWithQuotes, toBool } from "utils/filtering";
 import _l from "utils/localization";
 import { useRouter } from "vue-router/composables";
 
@@ -136,6 +149,61 @@ const OWNER_FIELD = { key: "username", label: _l("Owner"), sortable: false, thSt
 const PERSONAL_FIELDS = [TITLE_FIELD, TAGS_FIELD, SHARING_FIELD, UPDATED_FIELD];
 const PUBLISHED_FIELDS = [TITLE_FIELD, TAGS_FIELD, OWNER_FIELD, UPDATED_FIELD];
 
+const validFilters = {
+    title: { placeholder: "title", type: String, handler: contains("title"), menuItem: true },
+    user: { placeholder: "owner", type: String, handler: contains("user"), menuItem: false },
+    tag: {
+        placeholder: "tag(s)",
+        type: "MultiTags",
+        handler: contains("tag", "tag", expandNameTagWithQuotes),
+        menuItem: true,
+    },
+    published: {
+        placeholder: "Filter on published pages",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("published", "published", toBool),
+        menuItem: true,
+    },
+    importable: {
+        placeholder: "Filter on importable pages",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("importable", "importable", toBool),
+        menuItem: true,
+    },
+    shared_with_me: {
+        placeholder: "Filter on pages shared with me",
+        type: Boolean,
+        boolType: "is",
+        handler: equals("shared_with_me", "shared_with_me", toBool),
+        menuItem: true,
+    },
+};
+const PageFilters = new Filtering(validFilters, undefined, false, false);
+
+const validPublishedFilters = {
+    ...validFilters,
+    published: {
+        ...validFilters.published,
+        default: true,
+        menuItem: false,
+    },
+    user: {
+        ...validFilters.user,
+        menuItem: true,
+    },
+    shared_with_me: {
+        ...validFilters.shared_with_me,
+        menuItem: false,
+    },
+    importable: {
+        ...validFilters.importable,
+        menuItem: false,
+    },
+};
+const PublishedPageFilters = new Filtering(validPublishedFilters, undefined, false, false);
+
 export default {
     components: {
         UtcDate,
@@ -143,10 +211,10 @@ export default {
         PageIndexActions,
         SharingIndicators,
         PageDropdown,
-        IndexFilter,
+        FilterMenu,
         CopyToClipboard,
     },
-    mixins: [paginationMixin, filtersMixin],
+    mixins: [paginationMixin],
     props: {
         published: {
             // Render the published pages version of this grid.
@@ -162,16 +230,19 @@ export default {
     },
     data() {
         const fields = this.published ? PUBLISHED_FIELDS : PERSONAL_FIELDS;
-        const implicitFilter = this.published ? "is:published" : null;
+        const filterClass = this.published ? PublishedPageFilters : PageFilters;
         return {
             tableId: "page-table",
             fields: fields,
+            filterText: "",
+            searchQuery: this.published ? "is:published" : "",
+            filterClass: filterClass,
+            showAdvanced: false,
             titleSearch: _l("search pages"),
             pageItemsModel: [],
             helpHtml: helpHtml,
             perPage: this.rowsPerPage(this.defaultPerPage || 20),
             dataProvider: pagesProvider,
-            implicitFilter: implicitFilter,
             defaultTableAttrs: { "sort-by": "update_time", "sort-desc": true, "no-sort-reset": "", fields: fields },
         };
     },
@@ -192,15 +263,17 @@ export default {
             return this.published ? `Published Pages` : `Pages`;
         },
     },
-    watch: {
-        filter(val) {
-            this.refresh();
-        },
-    },
     created() {
         this.root = getAppRoot();
     },
     methods: {
+        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);
+            }
+        },
         copyUrl: function (item) {
             return absPath(`/u/${item.owner}/p/${item.slug}`);
         },
@@ -211,9 +284,6 @@ export default {
                 this.onError(error);
             });
         },
-        onTagClick: function (tag) {
-            this.appendTagFilter("tag", tag);
-        },
         onAdd: function (page) {
             if (this.currentPage == 1) {
                 this.refresh();
@@ -224,6 +294,10 @@ export default {
         onRemove: function (id) {
             this.refresh();
         },
+        onSearch(searchQuery) {
+            this.searchQuery = searchQuery;
+            this.refresh();
+        },
         onUpdate: function (id, data) {
             this.refresh();
         },
diff --git a/client/src/components/Panels/Common/ToolSearch.test.js b/client/src/components/Panels/Common/ToolSearch.test.js
index 4762ce0ec931..b0fe88c49b15 100644
--- a/client/src/components/Panels/Common/ToolSearch.test.js
+++ b/client/src/components/Panels/Common/ToolSearch.test.js
@@ -1,7 +1,6 @@
 import "jest-location-mock";
 
 import { mount } from "@vue/test-utils";
-import DelayedInput from "components/Common/DelayedInput";
 import { getLocalVue } from "tests/jest/helpers";
 import VueRouter from "vue-router";
 
@@ -29,10 +28,10 @@ describe("ToolSearch", () => {
         const $router = wrapper.vm.$router;
 
         expect(wrapper.find("[data-description='toggle advanced search']").exists()).toBe(false);
-        expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(false);
+        expect(wrapper.find("[description='advanced filters']").exists()).toBe(false);
         await wrapper.setProps({ enableAdvanced: true, showAdvanced: true });
-        expect(wrapper.find("[data-description='toggle advanced search']").exists()).toBe(true);
-        expect(wrapper.find("[description='advanced tool filters']").exists()).toBe(true);
+        expect(wrapper.find("[data-description='wide toggle advanced search']").exists()).toBe(true);
+        expect(wrapper.find("[data-description='advanced filters']").exists()).toBe(true);
 
         // Test: changing panel view should change search by section field to search by ontology
         expect(wrapper.find("[placeholder='any section']").exists()).toBe(true);
@@ -48,19 +47,17 @@ describe("ToolSearch", () => {
         expect(wrapper.emitted()["update:show-advanced"].length - 1).toBeFalsy();
 
         // Add filters to fields
-        await wrapper.setProps({ showAdvanced: true });
+        await wrapper.find("[data-description='toggle advanced search']").trigger("click");
+        // await wrapper.setProps({ showAdvanced: true });
         const filterInputs = {
-            name: "name-filter",
+            "[placeholder='any name']": "name-filter",
             "[placeholder='any section']": "section-filter",
             "[placeholder='any id']": "id-filter",
-            "[placeholder='any owner']": "owner-filter",
+            "[placeholder='any repository owner']": "owner-filter",
             "[placeholder='any help text']": "help-filter",
         };
 
-        // Add name filter (comes from DelayedInput emitting the query prop)
-        wrapper.findComponent(DelayedInput).vm.$emit("change", filterInputs["name"]);
-
-        // Now add remaining filters (other than name) in the advanced menu
+        // Now add all filters in the advanced menu
         Object.entries(filterInputs).forEach(([selector, value]) => {
             const filterInput = wrapper.find(selector);
             if (filterInput.vm && filterInput.props().type == "text") {
@@ -71,7 +68,7 @@ describe("ToolSearch", () => {
         // Test: we route to the list with filters
         const mockMethod = jest.fn();
         $router.push = mockMethod;
-        wrapper.find(".filter-search-btn").trigger("click");
+        wrapper.find("[data-description='apply filters']").trigger("click");
         const filterSettings = {
             name: "name-filter",
             section: "section-filter",
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index edd179e04c91..898a2d575e2f 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -146,7 +146,7 @@ function post(message: object) {
     searchWorker.value?.postMessage(message);
 }
 
-function onAdvancedSearch(filters: any, filterText?: string) {
+function onAdvancedSearch(filters: any) {
     router.push({ path: "/tools/list", query: filters });
 }
 </script>
@@ -156,7 +156,7 @@ function onAdvancedSearch(filters: any, filterText?: string) {
         <FilterMenu
             v-if="props.enableAdvanced"
             :class="!propShowAdvanced && 'mb-3'"
-            name="Tool Search"
+            name="Tools"
             :placeholder="props.placeholder"
             :debounce-delay="200"
             :filter-class="ToolFilters"
diff --git a/client/src/components/Panels/WorkflowBox.vue b/client/src/components/Panels/WorkflowBox.vue
index 4980b2f337bf..e36a3b018227 100644
--- a/client/src/components/Panels/WorkflowBox.vue
+++ b/client/src/components/Panels/WorkflowBox.vue
@@ -18,7 +18,7 @@ library.add(faUpload, faGlobe);
 
 const isAnonymous = computed(() => useUserStore().isAnonymous);
 
-function onSearch(filters: Record<string, string | boolean>, query?: string) {
+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);
diff --git a/client/src/components/Panels/utilities.test.js b/client/src/components/Panels/utilities.test.js
index 11c921b9f2aa..0d0a984cb245 100644
--- a/client/src/components/Panels/utilities.test.js
+++ b/client/src/components/Panels/utilities.test.js
@@ -2,7 +2,6 @@ import toolsList from "components/ToolsView/testData/toolsList";
 
 import {
     createWhooshQuery,
-    createWorkflowQuery,
     determineWidth,
     filterTools,
     filterToolSections,
@@ -167,17 +166,3 @@ describe("test helpers in tool searching utilities", () => {
         expect(filterTools(toolsList, ids)).toHaveLength(2);
     });
 });
-
-describe("test helpers in workflow searching utilities", () => {
-    it("test helper that creates workflow query given filters", async () => {
-        const settings = {
-            name: "extract",
-            tag: "Genomic",
-            published: null,
-            shared_with_me: true,
-            deleted: false,
-        };
-        const q = createWorkflowQuery(settings);
-        expect(q).toEqual("name:extract tag:Genomic is:shared_with_me");
-    });
-});
diff --git a/client/src/components/Workflow/WorkflowFilters.js b/client/src/components/Workflow/WorkflowFilters.js
index 4887a13f885c..cc25891fafef 100644
--- a/client/src/components/Workflow/WorkflowFilters.js
+++ b/client/src/components/Workflow/WorkflowFilters.js
@@ -47,8 +47,14 @@ export const helpHtml = `<div>
 
 const validFilters = {
     name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+    user: {
+        placeholder: "owner",
+        type: String,
+        handler: contains("user"),
+        menuItem: false,
+    },
     tag: {
-        placeholder: "tag",
+        placeholder: "tag(s)",
         type: "MultiTags",
         handler: contains("tag", "tag", expandNameTagWithQuotes),
         menuItem: true,
@@ -83,20 +89,27 @@ const validFilters = {
     },
 };
 
-export const WorkflowFilters = new Filtering(validFilters, undefined, false);
+export const WorkflowFilters = new Filtering(validFilters, undefined, false, false);
 
 const validPublishedFilters = {
     ...validFilters,
-    user: { placeholder: "owner", type: String, handler: contains("user"), menuItem: true },
+    user: {
+        ...validFilters.user,
+        menuItem: true,
+    },
     published: {
-        type: Boolean,
-        boolType: "is",
-        handler: equals("published", "published", toBool),
+        ...validFilters.published,
         default: true,
+        menuItem: false,
+    },
+    shared_with_me: {
+        ...validFilters.shared_with_me,
+        menuItem: false,
     },
     importable: {
+        ...validFilters.importable,
         menuItem: false,
     },
 };
 
-export const PublishedWorkflowFilters = new Filtering(validPublishedFilters, undefined, false);
+export const PublishedWorkflowFilters = new Filtering(validPublishedFilters, undefined, false, false);
diff --git a/client/src/components/Workflow/WorkflowList.test.js b/client/src/components/Workflow/WorkflowList.test.js
index 3e764df23617..6bb58612251a 100644
--- a/client/src/components/Workflow/WorkflowList.test.js
+++ b/client/src/components/Workflow/WorkflowList.test.js
@@ -6,7 +6,7 @@ import { useUserTags } from "composables/user";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import flushPromises from "flush-promises";
 import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue, wait } from "tests/jest/helpers";
 import { computed } from "vue";
 
 import Tag from "../TagsMultiselect/Tag";
@@ -52,6 +52,8 @@ const defaultApiParams = {
     sort_desc: true,
 };
 
+const debounceDelay = 500; // in ms - see FilterMenu.props.debounceDelay
+
 describe("WorkflowList.vue", () => {
     let axiosMock;
     let wrapper;
@@ -72,6 +74,9 @@ describe("WorkflowList.vue", () => {
                 propsData,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
         });
 
@@ -90,6 +95,9 @@ describe("WorkflowList.vue", () => {
                 propsData,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             flushPromises();
         });
@@ -100,6 +108,10 @@ describe("WorkflowList.vue", () => {
     });
 
     describe(" with single workflow", () => {
+        function findSearchBar(wrapper) {
+            return wrapper.find("[data-description='filter text input']");
+        }
+
         beforeEach(async () => {
             axiosMock
                 .onGet("/api/workflows", { params: { search: "", ...defaultApiParams } })
@@ -111,6 +123,9 @@ describe("WorkflowList.vue", () => {
                 propsData,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             flushPromises();
         });
@@ -152,14 +167,14 @@ describe("WorkflowList.vue", () => {
         });
 
         it("starts with an empty filter", async () => {
-            expect(wrapper.find("#workflow-search").element.value).toBe("");
+            expect(findSearchBar(wrapper).element.value).toBe("");
         });
 
         it("fetched filtered results when search filter is used", async () => {
-            await wrapper.find("#workflow-search").setValue("mytext");
-            flushPromises();
-            expect(wrapper.find("#workflow-search").element.value).toBe("mytext");
-            expect(wrapper.vm.filter).toBe("mytext");
+            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 () => {
@@ -167,7 +182,7 @@ describe("WorkflowList.vue", () => {
             expect(tags.length).toBe(2);
             tags[0].trigger("click");
             flushPromises();
-            expect(wrapper.vm.filter).toBe("tag:'tagmoo'");
+            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
         });
 
         it("update filter when a tag is clicked only happens on first click", async () => {
@@ -177,7 +192,7 @@ describe("WorkflowList.vue", () => {
             tags[0].trigger("click");
             tags[0].trigger("click");
             flushPromises();
-            expect(wrapper.vm.filter).toBe("tag:'tagmoo'");
+            expect(wrapper.vm.filterText).toBe("tag:'tagmoo'");
         });
 
         it("update filter when published icon is clicked", async () => {
@@ -185,7 +200,7 @@ describe("WorkflowList.vue", () => {
             const row = rows[0];
             row.find(".sharing-indicator-published").trigger("click");
             flushPromises();
-            expect(wrapper.vm.filter).toBe("is:published");
+            expect(wrapper.vm.filterText).toBe("is:published");
         });
 
         it("update filter when shared with me icon is clicked", async () => {
@@ -193,7 +208,7 @@ describe("WorkflowList.vue", () => {
             const row = rows[0];
             row.find(".fa-share-alt").trigger("click");
             flushPromises();
-            expect(wrapper.vm.filter).toBe("is:shared_with_me");
+            expect(wrapper.vm.filterText).toBe("is:shared_with_me");
         });
     });
 
@@ -217,6 +232,9 @@ describe("WorkflowList.vue", () => {
                 propsData,
                 localVue,
                 pinia: createTestingPinia(),
+                stubs: {
+                    icon: { template: "<div></div>" },
+                },
             });
             flushPromises();
         });
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index aeaae7e8c931..8bf4f9797579 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -10,13 +10,14 @@
         <b-row class="mb-3">
             <b-col cols="6" class="m-1">
                 <FilterMenu
-                    name="Workflows"
-                    placeholder="search workflows"
+                    :name="title"
+                    :placeholder="titleSearch"
                     :filter-class="filterClass"
                     :filter-text.sync="filterText"
                     :loading="loading"
                     :show-advanced.sync="showAdvanced"
-                    has-help>
+                    has-help
+                    @on-backend-filter="onSearch">
                     <template v-slot:menu-help-text>
                         <div v-html="helpHtml"></div>
                     </template>
@@ -26,10 +27,7 @@
                 <WorkflowIndexActions :root="root" class="float-right"></WorkflowIndexActions>
             </b-col>
         </b-row>
-        <b-table
-            v-show="!showAdvanced"
-            v-model="workflowItemsModel"
-            v-bind="{ ...defaultTableAttrs, ...indexTableAttrs }">
+        <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>
@@ -93,7 +91,7 @@
             </template>
         </b-table>
         <b-pagination
-            v-show="!showAdvanced && rows >= perPage"
+            v-show="rows >= perPage"
             v-model="currentPage"
             class="gx-workflows-grid-pager"
             v-bind="paginationAttrs"></b-pagination>
@@ -178,7 +176,8 @@ export default {
             fields: fields,
             filterClass: filterClass,
             filterText: this.query,
-            titleSearch: "search workflows",
+            searchQuery: this.published ? "is:published" : this.query,
+            titleSearch: _l("search workflows"),
             workflowItemsModel: [],
             helpHtml: helpHtml,
             perPage: this.rowsPerPage(this.defaultPerPage || 20),
@@ -195,7 +194,7 @@ export default {
     computed: {
         dataProviderParameters() {
             const extraParams = {
-                search: this.filterClass.getFilterText(this.filters, true),
+                search: this.searchQuery,
                 skip_step_counts: true,
             };
             if (this.published) {
@@ -205,19 +204,7 @@ export default {
             return extraParams;
         },
         title() {
-            return this.published ? `Published Workflows` : `Workflows`;
-        },
-        filters() {
-            return Object.fromEntries(this.filterClass.getFiltersForText(this.filterText));
-        },
-    },
-    watch: {
-        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");
-            }
+            return this.published ? _l(`Published Workflows`) : _l(`Workflows`);
         },
     },
     created() {
@@ -283,7 +270,15 @@ export default {
         onRestore: function (id) {
             this.refresh();
         },
-        applyFilter: function (filter, value, quoted = false) {
+        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 {
diff --git a/client/src/utils/filterConversion.test.js b/client/src/utils/filterConversion.test.js
index 164e5e7db576..6437d64802ac 100644
--- a/client/src/utils/filterConversion.test.js
+++ b/client/src/utils/filterConversion.test.js
@@ -1,40 +1,120 @@
 import { HistoryFilters } from "components/History/HistoryFilters";
+import { PublishedWorkflowFilters } from "components/Workflow/WorkflowFilters";
 
-describe("test filtering helpers to convert settings to filter text", () => {
-    it("conversion from settings to new filter text", async () => {
-        const normalized = HistoryFilters.getDefaults();
+describe("test filtering helpers to convert filters to filter text", () => {
+    it("conversion from filters to new filter text", async () => {
+        const normalized = HistoryFilters.defaultFilters;
         expect(Object.keys(normalized).length).toBe(2);
-        expect(normalized["deleted:"]).toBe(false);
-        expect(normalized["visible:"]).toBe(true);
+        expect(normalized["deleted"]).toBe(false);
+        expect(normalized["visible"]).toBe(true);
     });
 
     it("verify the existence of defaults", async () => {
-        const settings = {};
+        let filters = {};
         Object.entries(HistoryFilters.defaultFilters).forEach(([key, value]) => {
-            settings[`${key}:`] = value;
+            filters[key] = value;
         });
-        expect(HistoryFilters.containsDefaults(settings)).toBe(true);
-        settings["deleted:"] = !HistoryFilters.defaultFilters.deleted;
-        expect(HistoryFilters.containsDefaults(settings)).toBe(false);
-        settings["deleted:"] = HistoryFilters.defaultFilters.deleted;
-        settings["visible:"] = !HistoryFilters.defaultFilters.visible;
-        expect(HistoryFilters.containsDefaults(settings)).toBe(false);
-        settings["visible:"] = String(HistoryFilters.defaultFilters.visible).toUpperCase();
-        expect(HistoryFilters.containsDefaults(settings)).toBe(true);
+        expect(HistoryFilters.containsDefaults(filters)).toBe(true);
+        filters["deleted"] = !HistoryFilters.defaultFilters.deleted;
+        expect(HistoryFilters.containsDefaults(filters)).toBe(false);
+        filters["deleted"] = HistoryFilters.defaultFilters.deleted;
+        filters["visible"] = !HistoryFilters.defaultFilters.visible;
+        expect(HistoryFilters.containsDefaults(filters)).toBe(false);
+        filters["visible"] = String(HistoryFilters.defaultFilters.visible).toUpperCase();
+        expect(HistoryFilters.containsDefaults(filters)).toBe(true);
+        filters = {};
+        Object.entries(PublishedWorkflowFilters.defaultFilters).forEach(([key, value]) => {
+            filters[key] = value;
+        });
+        expect(PublishedWorkflowFilters.containsDefaults(filters)).toBe(true);
+        filters["published"] = !PublishedWorkflowFilters.defaultFilters.published;
+        expect(PublishedWorkflowFilters.containsDefaults(filters)).toBe(false);
+    });
+
+    it("verify correct conversion of filters", async () => {
+        const filters = {
+            deleted: HistoryFilters.defaultFilters.deleted,
+            visible: HistoryFilters.defaultFilters.visible,
+            name: "name",
+            other: "other",
+            tag: ["tag1", "tag2"],
+            genome_build: "",
+            published: PublishedWorkflowFilters.defaultFilters.published,
+        };
+        const validHistFilters = HistoryFilters.getValidFilters(filters);
+        expect(Object.keys(validHistFilters)).toEqual(["deleted", "visible", "name"]);
+        const validWfFilters = PublishedWorkflowFilters.getValidFilters(filters);
+        expect(Object.keys(validWfFilters)).toEqual(["deleted", "name", "tag", "published"]);
+
+        expect(HistoryFilters.getFilterText(filters)).toBe("name:name");
+        filters["visible"] = !HistoryFilters.defaultFilters.visible;
+        expect(HistoryFilters.getFilterText(filters)).toBe("deleted:false visible:false name:name");
+        filters["visible"] = HistoryFilters.defaultFilters.visible;
+        expect(HistoryFilters.getFilterText(filters)).toBe("name:name");
+
+        expect(PublishedWorkflowFilters.getFilterText(filters, true)).toBe("name:name tag:tag1 tag:tag2 is:published");
+        delete filters["published"];
+        expect(PublishedWorkflowFilters.getFilterText(filters, true)).toBe("name:name tag:tag1 tag:tag2");
+    });
+});
+
+describe("test filtering helpers to convert filter text to filters", () => {
+    function getFilters(filteringClass, filterText) {
+        return filteringClass.getValidFilters(Object.fromEntries(filteringClass.getFiltersForText(filterText)));
+    }
+
+    it("verify the existence of defaults", async () => {
+        let filterText = "";
+        expect(HistoryFilters.containsDefaults(getFilters(HistoryFilters, filterText))).toBe(true);
+        filterText = "deleted:true";
+        expect(HistoryFilters.containsDefaults(getFilters(HistoryFilters, filterText))).toBe(false);
+        filterText = "visible:false";
+        expect(HistoryFilters.containsDefaults(getFilters(HistoryFilters, filterText))).toBe(false);
+        filterText = "deleted:any";
+        expect(HistoryFilters.containsDefaults(getFilters(HistoryFilters, filterText))).toBe(false);
+        filterText = "deleted:false visible:true";
+        expect(HistoryFilters.containsDefaults(getFilters(HistoryFilters, filterText))).toBe(true);
+
+        filterText = "";
+        expect(PublishedWorkflowFilters.containsDefaults(getFilters(PublishedWorkflowFilters, filterText))).toBe(true);
+        filterText = "is:published is:deleted";
+        expect(PublishedWorkflowFilters.containsDefaults(getFilters(PublishedWorkflowFilters, filterText))).toBe(true);
+    });
+
+    it("verify correct conversion of filterText (HistoryFilters)", async () => {
+        const filters = {
+            deleted: HistoryFilters.defaultFilters.deleted,
+            visible: HistoryFilters.defaultFilters.visible,
+            name: "name",
+        };
+        let filterText = "name:name";
+        expect(getFilters(HistoryFilters, filterText)).toEqual(filters);
+        filterText = "visible:false name:name";
+        filters["visible"] = !HistoryFilters.defaultFilters.visible;
+        delete filters["deleted"];
+        expect(getFilters(HistoryFilters, filterText)).toEqual(filters);
+        filterText = "visible:false deleted:any name:name";
+        expect(getFilters(HistoryFilters, filterText)).toEqual(filters);
+        filterText = "visible:false deleted:true name:name";
+        filters["deleted"] = true;
+        expect(getFilters(HistoryFilters, filterText)).toEqual(filters);
+        filterText = "visible:false deleted:true name:name invalid:invalid";
+        expect(getFilters(HistoryFilters, filterText)).toEqual(filters);
     });
 
-    it("verify correct conversion of settings", async () => {
-        const settings = {
-            "deleted:": HistoryFilters.defaultFilters.deleted,
-            "visible:": HistoryFilters.defaultFilters.visible,
-            "other:": "other",
-            "anything:": undefined,
-            "value:": "",
+    it("verify correct conversion of filterText (PublishedWorkflowFilters)", async () => {
+        const filters = {
+            published: PublishedWorkflowFilters.defaultFilters.published,
+            name: "name",
         };
-        expect(HistoryFilters.getFilterText(settings)).toBe("other:other");
-        settings["visible:"] = !HistoryFilters.defaultFilters.visible;
-        expect(HistoryFilters.getFilterText(settings)).toBe("deleted:false visible:false other:other");
-        settings["visible:"] = HistoryFilters.defaultFilters.visible;
-        expect(HistoryFilters.getFilterText(settings)).toBe("other:other");
+        let filterText = "name:name";
+        expect(getFilters(PublishedWorkflowFilters, filterText)).toEqual(filters);
+        filterText = "published:false name:name";
+        // filters["visible"] = !PublishedWorkflowFilters.defaultFilters.visible;
+        // delete filters["deleted"];
+        expect(getFilters(PublishedWorkflowFilters, filterText)).toEqual(filters);
+        filterText = "name:name invalid:invalid is:deleted";
+        filters["deleted"] = true;
+        expect(getFilters(PublishedWorkflowFilters, filterText)).toEqual(filters);
     });
 });
diff --git a/client/src/utils/filtering.test.js b/client/src/utils/filtering.test.js
index 7313a782f681..16afb6f2cda7 100644
--- a/client/src/utils/filtering.test.js
+++ b/client/src/utils/filtering.test.js
@@ -14,9 +14,7 @@ const sampleFilters = [
         validFilters: {
             deleted: true,
         },
-        validSettings: {
-            "deleted:": true,
-        },
+        validText: "deleted:true visible:any",
     },
     {
         filters: {
@@ -30,11 +28,7 @@ const sampleFilters = [
             related: 10,
             hid_gt: 5,
         },
-        validSettings: {
-            "deleted:": "any",
-            "related:": 10,
-            "hid>": 5,
-        },
+        validText: "deleted:any related:10 hid>5 visible:any",
     },
 ];
 
@@ -95,7 +89,7 @@ describe("filtering", () => {
     test("parse get valid filters and settings", () => {
         sampleFilters.forEach((sample) => {
             expect(HistoryFilters.getValidFilters(sample.filters)).toEqual(sample.validFilters);
-            expect(HistoryFilters.getValidFilterSettings(sample.filters)).toEqual(sample.validSettings);
+            expect(HistoryFilters.getFilterText(sample.filters)).toEqual(sample.validText);
         });
     });
     test("parse filter text as entries", () => {
@@ -160,7 +154,7 @@ describe("filtering", () => {
             "deleted:any visible:true"
         );
         expect(HistoryFilters.applyFiltersToText({ deleted: "any" }, "deleted:any visible:true", true)).toEqual(
-            "visible:true"
+            "visible:true deleted:any"
         );
     });
     test("set a single valid filter to existing filterText", () => {
@@ -204,23 +198,23 @@ describe("filtering", () => {
             expect(HistoryFilters.testFilters(filters, { ...item, deleted: "nottrue" })).toBe(true);
         });
     });
-    test("Parsing & sync of filter settings", () => {
-        // Expected parsed settings
-        const parsedFilterSettings = {
-            "name:": "name of item",
-            "hid>": "10",
-            "hid<": "100",
-            "create_time>": "2021-01-01",
-            "update_time<": "2022-01-01",
-            "state:": "success",
-            "extension:": "ext",
-            "tag:": "first",
-            "deleted:": "false",
-            "visible:": "true",
+    test("Parsing & sync of filters", () => {
+        // Expected parsed filters
+        const parsedFilters = {
+            name: "name of item",
+            hid_gt: "10",
+            hid_lt: "100",
+            create_time_gt: "2021-01-01",
+            update_time_lt: "2022-01-01",
+            state: "success",
+            extension: "ext",
+            tag: "first",
+            deleted: "false",
+            visible: "true",
         };
-        // iterate through filterTexts and compare with parsedFilterSettings
+        // iterate through filterTexts and compare with parsedFilters
         filterTexts.forEach((filterText) => {
-            expect(HistoryFilters.toAlias(HistoryFilters.getFiltersForText(filterText))).toEqual(parsedFilterSettings);
+            expect(Object.fromEntries(HistoryFilters.getFiltersForText(filterText))).toEqual(parsedFilters);
         });
     });
     test("named tag (hash) conversion", () => {
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 89146d293359..bda59ef9c0c6 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -213,22 +213,36 @@ export function compare<T>(attribute: string, variant: string, converter?: Conve
     };
 }
 
+/**
+ * Class for filtering (menus). Handles user input as one string filterText
+ * or multiple filters (e.g. 'name:foo type:bar'), with appropriate functions.
+ * @param validFilters: Record of valid filters with their handlers,
+ *                      and FilterMenu properties (if menuItem = true)
+ * @param validAliases: Array of valid aliases for filters
+ * @param quoteStrings: Whether to auto quote filter strings in the query
+ * @param nameMatching: Whether to apply name filter for unspecified filterText
+ *                      (e.g. filterText = 'foo' -> 'name:foo')
+ * @returns Filtering object
+ * */
 export default class Filtering<T> {
     validFilters: Record<string, ValidFilter<T>>;
     validAliases: Array<[string, string]>;
     defaultFilters: Record<string, T>;
     quoteStrings: boolean;
+    nameMatching: boolean;
 
     constructor(
         validFilters: Record<string, ValidFilter<T>>,
         validAliases?: Array<[string, string]>,
-        quoteStrings = true
+        quoteStrings = true,
+        nameMatching = true
     ) {
         this.validFilters = validFilters;
         this.validAliases = validAliases || defaultValidAliases;
         this.quoteStrings = quoteStrings;
-        // Add `name` filter if not present
-        if (this.validFilters["name"] === undefined) {
+        this.nameMatching = nameMatching;
+        // If (default) we are nameMatching, add `name` filter if not present
+        if (this.nameMatching && this.validFilters["name"] === undefined) {
             this.validFilters["name"] = {
                 handler: contains("name"),
                 menuItem: false,
@@ -244,15 +258,18 @@ export default class Filtering<T> {
     addRangedFiltersIfNotPresent() {
         Object.entries(this.validFilters).forEach(([key, filter]) => {
             if (filter.isRangeInput) {
+                const { converter } = filter.handler as HandlerReturn<T>;
                 if (this.validFilters[`${key}_gt`] === undefined) {
                     this.validFilters[`${key}_gt`] = {
-                        handler: compare(key, "gt"),
+                        ...filter,
+                        handler: compare(key, "gt", converter),
                         menuItem: false,
                     };
                 }
                 if (this.validFilters[`${key}_lt`] === undefined) {
                     this.validFilters[`${key}_lt`] = {
-                        handler: compare(key, "lt"),
+                        ...filter,
+                        handler: compare(key, "lt", converter),
                         menuItem: false,
                     };
                 }
@@ -319,7 +336,7 @@ export default class Filtering<T> {
         Object.entries(filters).forEach(([key, value]) => {
             // this is a default filter, skip it if ALL default filters have default values
             const skipDefault = !backendFormatted && hasDefaults && this.defaultFilters[key] !== undefined;
-            if (!skipDefault && value !== null && value !== undefined && value !== "") {
+            if (!skipDefault) {
                 if (newFilterText) {
                     newFilterText += " ";
                 }
@@ -327,7 +344,7 @@ export default class Filtering<T> {
                     if (value === true) {
                         newFilterText += `is:${key}`;
                     }
-                } else if (this.validFilters[key]?.type == "MultiTags" && Array.isArray(value)) {
+                } else if (this.validFilters[key]?.type == "MultiTags" && Array.isArray(value) && value.length > 0) {
                     newFilterText += `${value.map((v) => `${this.toAliasKey(key)}${v}`).join(" ")}`;
                 } else if (this.quoteStrings && String(value).includes(" ")) {
                     newFilterText += `${this.toAliasKey(key)}'${value}'`;
@@ -339,7 +356,11 @@ export default class Filtering<T> {
         // enforce `filter:any` for any default *boolean* filters missing in filters object
         if (!hasDefaults && this.defaultFilters !== undefined) {
             Object.entries(this.defaultFilters).forEach(([key, value]) => {
-                if (filters[key] == undefined && typeof value === "boolean") {
+                if (
+                    filters[key] == undefined &&
+                    typeof value === "boolean" &&
+                    this.validFilters[key]?.boolType !== "is"
+                ) {
                     if (newFilterText) {
                         newFilterText += " ";
                     }
@@ -406,7 +427,7 @@ export default class Filtering<T> {
             });
         }
         // assume name matching if no filter key has been matched
-        if (!hasMatches && filterText.length > 0) {
+        if (this.nameMatching && !hasMatches && filterText.length > 0) {
             result["name"] = filterText as T;
         }
         // check if any default filter keys have been used in the filter text
@@ -457,7 +478,7 @@ export default class Filtering<T> {
     getValidFilters(filters: Record<string, T>, backendFormatted = false) {
         const validFilters: Record<string, T> = {};
         Object.entries(filters).forEach(([key, value]) => {
-            if (Array.isArray(value)) {
+            if (this.validFilters[key]?.type === "MultiTags" && Array.isArray(value)) {
                 const validValues = value
                     .map((v) => this.getConvertedValue(key, v, backendFormatted))
                     .filter((v) => v !== undefined);
@@ -530,7 +551,13 @@ 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] && !Array.isArray(filterValue)) {
+        if (
+            this.validFilters[filterName] &&
+            !Array.isArray(filterValue) &&
+            filterValue !== null &&
+            filterValue !== undefined &&
+            filterValue !== ""
+        ) {
             const { converter } = this.validFilters[filterName]?.handler as HandlerReturn<T>;
             if (converter) {
                 if (converter == toBool && filterValue == "any") {
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 84a1d2e7f8ad..94f088eef51d 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -398,8 +398,12 @@ multi_history_panel:
 published_histories:
   selectors:
     histories: '#published-histories-table tbody tr'
-    search_input: '#published-histories-filter'
-    advanced_search_toggle: '#published-histories-advanced-filter-toggle'
+    search_input:
+      selector: 'filter text input'
+      type: data-description
+    advanced_search_toggle:
+      selector: 'toggle advanced search'
+      type: data-description
     advanced_search_name_input: '#published-histories-advanced-filter-name'
     advanced_search_tag_input: '#published-histories-advanced-filter-tag'
     advanced_search_submit: '#published-histories-advanced-filter-submit'
@@ -578,7 +582,9 @@ workflows:
     new_button: '#workflow-create'
     import_button: '#workflow-import'
     save_button: '#workflow-save-button'
-    search_box: "#workflow-search"
+    search_box:
+      selector: 'filter text input'
+      type: data-description
     workflow_table: "#workflow-table"
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
     external_link: '.workflow-external-link'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 398e53abaabc..571f6c1db772 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1380,7 +1380,7 @@ def workflow_index_column_text(self, column_index, workflow_index=0):
         return columns[column_index].text
 
     def workflow_index_click_search(self):
-        return self.wait_for_and_click_selector("#workflow-search")
+        return self.wait_for_and_click_selector('[data-description="filter text input"]')
 
     def workflow_index_search_for(self, search_term=None):
         return self._inline_search_for(

From f3969612c81351059b3668b838f164a2bad54094 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 1 Sep 2023 18:19:03 -0500
Subject: [PATCH 07/12] fix seleniums and adjust navigation.yml for FilterMenu
 changes

---
 client/src/components/Common/FilterMenu.vue   |  2 +-
 client/src/utils/navigation/navigation.yml    | 16 +++++------
 config/plugins/tours/core.history.yaml        |  4 +--
 lib/galaxy/selenium/navigates_galaxy.py       | 17 ++++++++++-
 .../selenium/test_collection_builders.py      |  4 ++-
 .../selenium/test_history_related_filter.py   |  4 ++-
 .../selenium/test_workflow_management.py      | 28 +++++++++++++++++++
 7 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 477cf789c1c9..90e5889f19d7 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -322,7 +322,7 @@ watch(
                     <!-- is a MultiTags filter -->
                     <span v-else-if="validFilters[filter]?.type == 'MultiTags'">
                         <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
-                        <b-input-group>
+                        <b-input-group :id="`${identifier}-advanced-filter-${filter}`">
                             <StatelessTags
                                 :value="multiTagFilters[filter]?.value"
                                 :placeholder="`any ${validFilters[filter]?.placeholder}`"
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 94f088eef51d..e1d0afd669a1 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -398,12 +398,8 @@ multi_history_panel:
 published_histories:
   selectors:
     histories: '#published-histories-table tbody tr'
-    search_input:
-      selector: 'filter text input'
-      type: data-description
-    advanced_search_toggle:
-      selector: 'toggle advanced search'
-      type: data-description
+    search_input: '#published-histories input.search-query[data-description="filter text input"]'
+    advanced_search_toggle: '#published-histories [data-description="toggle advanced search"]'
     advanced_search_name_input: '#published-histories-advanced-filter-name'
     advanced_search_tag_input: '#published-histories-advanced-filter-tag'
     advanced_search_submit: '#published-histories-advanced-filter-submit'
@@ -582,9 +578,11 @@ workflows:
     new_button: '#workflow-create'
     import_button: '#workflow-import'
     save_button: '#workflow-save-button'
-    search_box:
-      selector: 'filter text input'
-      type: data-description
+    search_box: '.workflows-list input.search-query[data-description="filter text input"]'
+    clear_filter: '.workflows-list [data-description="reset query"]'
+    advanced_search_toggle: '.workflows-list [data-description="toggle advanced search"]'
+    advanced_search_name_input: '#workflows-advanced-filter-name'
+    advanced_search_tag_input: '#workflows-advanced-filter-tag .stateless-tags'
     workflow_table: "#workflow-table"
     workflow_rows: "#workflow-table > tbody > tr:not(.b-table-empty-row, [style*='display: none'])"
     external_link: '.workflow-external-link'
diff --git a/config/plugins/tours/core.history.yaml b/config/plugins/tours/core.history.yaml
index a7ab5c393f1b..d0c1ecce2f54 100644
--- a/config/plugins/tours/core.history.yaml
+++ b/config/plugins/tours/core.history.yaml
@@ -71,7 +71,7 @@ steps:
       intro: "You can remove a dataset from the history with the trash can symbol."
       postclick: true
 
-    - element: "#current-history-panel input[data-description='filter text input']"
+    - element: "#current-history-panel .content-operations-filters input[data-description='filter text input']"
       title: "Filter your datasets"
       intro: "By default your history will hide all deleted datasets from you. You can visualize them by filtering."
       textinsert: "deleted:true"
@@ -83,7 +83,7 @@ steps:
             Please note that datasets marked as deleted can be purged by your administrator at any time.
       postclick: true
 
-    - element: "#current-history-panel [data-description='filter text input']"
+    - element: "#current-history-panel .content-operations-filters input[data-description='filter text input']"
       title: "Search your History"
       intro: "You can filter your history by typing your search term in here. Galaxy supports more advanced filters that can be seen here."
       textinsert: ""
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 571f6c1db772..cb8b939d004a 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -17,6 +17,7 @@
     Any,
     cast,
     Dict,
+    List,
     NamedTuple,
     Optional,
     Union,
@@ -1380,7 +1381,13 @@ def workflow_index_column_text(self, column_index, workflow_index=0):
         return columns[column_index].text
 
     def workflow_index_click_search(self):
-        return self.wait_for_and_click_selector('[data-description="filter text input"]')
+        return self.wait_for_and_click_selector(
+            '.workflows-list input.search-query[data-description="filter text input"]'
+        )
+
+    def workflow_index_get_current_filter(self):
+        filter_element = self.components.workflows.search_box.wait_for_and_click()
+        return filter_element.get_attribute("value")
 
     def workflow_index_search_for(self, search_term=None):
         return self._inline_search_for(
@@ -1389,6 +1396,14 @@ def workflow_index_search_for(self, search_term=None):
             escape_to_clear=True,
         )
 
+    def workflow_index_add_advanced_tag_filter(self, tags: List[str]):
+        for tag in tags:
+            tag_display = self.components.workflows.advanced_search_tag_input
+            if tag_display.is_absent:
+                self.components.workflows.advanced_search_toggle.wait_for_and_click()
+            tag_display.wait_for_and_click()
+            self.tagging_add([tag])
+
     def workflow_index_click_import(self):
         return self.components.workflows.import_button.wait_for_and_click()
 
diff --git a/lib/galaxy_test/selenium/test_collection_builders.py b/lib/galaxy_test/selenium/test_collection_builders.py
index 40de27bab006..bf2265e72e21 100644
--- a/lib/galaxy_test/selenium/test_collection_builders.py
+++ b/lib/galaxy_test/selenium/test_collection_builders.py
@@ -126,6 +126,8 @@ def _wait_for_and_select(self, hids):
     def _show_hidden_content(self):
         """Switches the hidden filter toggle on"""
         self.sleep_for(self.wait_types.UX_RENDER)
-        filter_element = self.history_element("filter text input").wait_for_and_click()
+        filter_element = self.history_element(
+            attribute_value="filter text input", scope=".content-operations-filters"
+        ).wait_for_and_click()
         filter_element.send_keys("visible:false")
         self.sleep_for(self.wait_types.UX_RENDER)
diff --git a/lib/galaxy_test/selenium/test_history_related_filter.py b/lib/galaxy_test/selenium/test_history_related_filter.py
index e167e9801d57..d61482cc57e2 100644
--- a/lib/galaxy_test/selenium/test_history_related_filter.py
+++ b/lib/galaxy_test/selenium/test_history_related_filter.py
@@ -31,7 +31,9 @@ def test_history_related_filter(self):
         unrelated_hda.assert_absent_or_hidden()
 
         # test related filter on unrelated item using filterText: only unrelated item shows
-        filter_element = self.history_element("filter text input").wait_for_and_click()
+        filter_element = self.history_element(
+            attribute_value="filter text input", scope=".content-operations-filters"
+        ).wait_for_and_click()
         initial_value = filter_element.get_attribute("value")
         assert initial_value == f"related:{CURRENT_HID}", initial_value
         self.history_element("clear filters").wait_for_and_click()
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 68cf13354990..ffb6ac8e12a3 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -181,6 +181,34 @@ def test_index_search_filters(self):
         self._assert_showing_n_workflows(0)
         self.screenshot("workflow_manage_search_name_alias")
 
+    @selenium_test
+    def test_index_advanced_search(self):
+        self.workflow_index_open()
+        self._workflow_import_from_url()
+        self.workflow_index_rename("searchforthis")
+        self._assert_showing_n_workflows(1)
+
+        self.workflow_index_add_tag("mytag")
+        self.components.workflows.advanced_search_toggle.wait_for_and_click()
+        # search by tag and name
+        self.components.workflows.advanced_search_name_input.wait_for_and_send_keys("searchforthis")
+        self.workflow_index_add_advanced_tag_filter(["mytag"])
+        self._assert_showing_n_workflows(1)
+        curr_value = self.workflow_index_get_current_filter()
+        assert curr_value == f"name:searchforthis tag:mytag", curr_value
+
+        # clear filter
+        self.components.workflows.clear_filter.wait_for_and_click()
+        curr_value = self.workflow_index_get_current_filter()
+        assert curr_value == f"", curr_value
+
+        self.components.workflows.advanced_search_toggle.wait_for_and_click()
+        # search by 2 tags, one of which is not present
+        self.workflow_index_add_advanced_tag_filter(["mytag", "DNEtag"])
+        curr_value = self.workflow_index_get_current_filter()
+        assert curr_value == f"tag:mytag tag:DNEtag", curr_value
+        self._assert_showing_n_workflows(0)
+
     @selenium_test
     def test_workflow_delete(self):
         self.workflow_index_open()

From 619ad66d52baccc7a86b94561d0cef9c0a57c8bf Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 1 Sep 2023 18:21:46 -0500
Subject: [PATCH 08/12] fix lint error for workflow advanced search selenium

---
 lib/galaxy_test/selenium/test_workflow_management.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index ffb6ac8e12a3..fc9e811036df 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -195,18 +195,18 @@ def test_index_advanced_search(self):
         self.workflow_index_add_advanced_tag_filter(["mytag"])
         self._assert_showing_n_workflows(1)
         curr_value = self.workflow_index_get_current_filter()
-        assert curr_value == f"name:searchforthis tag:mytag", curr_value
+        assert curr_value == "name:searchforthis tag:mytag", curr_value
 
         # clear filter
         self.components.workflows.clear_filter.wait_for_and_click()
         curr_value = self.workflow_index_get_current_filter()
-        assert curr_value == f"", curr_value
+        assert curr_value == "", curr_value
 
         self.components.workflows.advanced_search_toggle.wait_for_and_click()
         # search by 2 tags, one of which is not present
         self.workflow_index_add_advanced_tag_filter(["mytag", "DNEtag"])
         curr_value = self.workflow_index_get_current_filter()
-        assert curr_value == f"tag:mytag tag:DNEtag", curr_value
+        assert curr_value == "tag:mytag tag:DNEtag", curr_value
         self._assert_showing_n_workflows(0)
 
     @selenium_test

From 79e2054f35ed01daae5b80e9c361b802921799b2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 9 Oct 2023 19:11:38 -0500
Subject: [PATCH 09/12] separate `FilterMenu` elements into separate components

---
 client/src/components/Common/FilterMenu.vue   | 287 ++++--------------
 .../components/Common/FilterMenuBoolean.vue   |  29 +-
 .../src/components/Common/FilterMenuInput.vue | 100 ++++++
 .../components/Common/FilterMenuMultiTags.vue |  41 +++
 .../components/Common/FilterMenuRanged.vue    | 104 +++++++
 5 files changed, 312 insertions(+), 249 deletions(-)
 create mode 100644 client/src/components/Common/FilterMenuInput.vue
 create mode 100644 client/src/components/Common/FilterMenuMultiTags.vue
 create mode 100644 client/src/components/Common/FilterMenuRanged.vue

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 90e5889f19d7..226c61c06a31 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { capitalize, kebabCase } from "lodash";
-import { computed, type Ref, ref, watch } from "vue";
+import { kebabCase } from "lodash";
+import { computed, ref, watch } from "vue";
 
 import type Filtering from "@/utils/filtering";
 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";
+import FilterMenuInput from "@/components/Common/FilterMenuInput.vue";
+import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
+import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
 interface BackendFilterError {
     err_msg: string;
@@ -70,63 +72,9 @@ const filters = computed(() => Object.fromEntries(props.filterClass.getFiltersFo
 
 const identifier = kebabCase(props.name);
 
-// all filters that have help info
-const helpKeys = Object.keys(validFilters.value).filter((key) => validFilters.value[key]?.helpInfo !== undefined);
-const defaultHelpModalsVal = helpKeys.reduce((acc: { [k: string]: boolean }, item: string) => {
-    acc[item] = false;
-    return acc;
-}, {});
-/**
- * An object of booleans that are used to show/hide the help modals for
- * each filter that has them
- */
-const helpModals: Ref<{ [k: string]: boolean }> = ref({ ...defaultHelpModalsVal });
-
 // Boolean for showing the help modal for the whole filter menu (if provided)
 const showHelp = ref(false);
 
-/**
- * Reactively storing and getting all filters from validFilters which are `.type == Date`
- * 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);
-dateKeys.forEach((key: string) => {
-    if (validFilters.value[key]?.isRangeInput) {
-        dateKeys.push(key + "_lt");
-        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 }) => {
-        dateKeys.forEach((key: string) => {
-            if (newFilters[key]) {
-                dateFilters.value[key] = newFilters[key] as string;
-            } else {
-                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 = [];
-            }
-        });
-    }
-);
-
 const formattedSearchError = computed(() => {
     if (props.searchError) {
         const { column, col, operation, op, value, val, err_msg, ValueError } = props.searchError;
@@ -145,13 +93,6 @@ const formattedSearchError = computed(() => {
     }
 });
 
-function hasError(field: string) {
-    if (formattedSearchError.value && formattedSearchError.value.index == field) {
-        return formattedSearchError.value.typeError || formattedSearchError.value.msg;
-    }
-    return "";
-}
-
 /** Explicitly sets a filter: value
  * (also closes help modal for this filter if it exists)
  * @param filter the filter to set
@@ -159,18 +100,9 @@ function hasError(field: string) {
  */
 function onOption(filter: string, value: any) {
     filters.value[filter] = value;
-    if (helpModals.value[filter]) {
-        helpModals.value[filter] = false;
-    }
 }
 
 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);
     const newBackendFilter = props.filterClass.getFilterText(filters.value, true);
     if (props.menuType !== "linked") {
@@ -181,10 +113,6 @@ function onSearch() {
     }
 }
 
-function onTags(filter: string, tags: string[]) {
-    (multiTagFilters.value[filter] as Ref<string[]>).value = tags;
-}
-
 function onToggle() {
     emit("update:show-advanced", !props.showAdvanced);
 }
@@ -193,11 +121,14 @@ function updateFilterText(newFilterText: string) {
     emit("update:filter-text", newFilterText);
 }
 
-// as the filterText changes, emit a backend-filter that can be used as a query
+// as the filterText changes, emit a backend-filter that can be used as a backend query
 watch(
     () => props.filterText,
     (newFilterText: string) => {
-        const defaultBackendFilter = props.filterClass.getFilterText(props.filterClass.defaultFilters, true);
+        const defaultBackendFilter = props.filterClass.getFilterText(
+            props.filterClass.defaultFilters,
+            true
+        );
         const currentBackendFilter = props.filterClass.getFilterText(filters.value, true);
 
         const backendFilter =
@@ -242,168 +173,52 @@ watch(
         <div
             v-if="props.menuType == 'standalone' || props.showAdvanced"
             class="mt-2"
-            data-description="advanced filters"
-            @keyup.enter="onSearch"
-            @keyup.esc="onToggle">
+            data-description="advanced filters">
             <div v-for="filter in Object.keys(validFilters)" :key="filter">
                 <span v-if="validFilters[filter]?.menuItem">
-                    <!-- is a Boolean filter -->
-                    <span v-if="validFilters[filter]?.type == Boolean">
-                        <small>{{ validFilters[filter]?.placeholder }}:</small>
-                        <FilterMenuBoolean
-                            :name="filter"
-                            :filter="validFilters[filter]"
-                            :settings="filters"
-                            @change="onOption" />
-                    </span>
-
-                    <!-- is a Ranged filter -->
-                    <span v-else-if="validFilters[filter]?.isRangeInput" class="m-0">
-                        <small>Filter by {{ validFilters[filter]?.placeholder }}:</small>
-                        <b-input-group>
-                            <!---------------------------- GREATER THAN ---------------------------->
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.type != Date"
-                                :id="`${identifier}-advanced-filter-${filter}_gt`"
-                                v-model="filters[`${filter}_gt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_gt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} greater`" />
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}_gt`"
-                                v-model="dateFilters[`${filter}_gt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_gt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_gt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} after`" />
-                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
-                                <b-form-datepicker
-                                    v-model="dateFilters[`${filter}_gt`]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                            <!--------------------------------------------------------------------->
-
-                            <!---------------------------- LESSER THAN ---------------------------->
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.type != Date"
-                                :id="`${identifier}-advanced-filter-${filter}_lt`"
-                                v-model="filters[`${filter}_lt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_lt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} lower`" />
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}_lt`"
-                                v-model="dateFilters[`${filter}_lt`]"
-                                v-b-tooltip.focus.v-danger="hasError(`${filter}_lt`)"
-                                size="sm"
-                                :state="hasError(`${filter}_lt`) ? false : null"
-                                :placeholder="`${validFilters[filter]?.placeholder} before`" />
-                            <b-input-group-append v-if="validFilters[filter]?.type == Date">
-                                <b-form-datepicker
-                                    v-model="dateFilters[`${filter}_lt`]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                            <!--------------------------------------------------------------------->
-                        </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 :id="`${identifier}-advanced-filter-${filter}`">
-                            <StatelessTags
-                                :value="multiTagFilters[filter]?.value"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
-                                @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>
-                        <b-input-group>
-                            <!-- has a datalist -->
-                            <b-form-input
-                                v-if="validFilters[filter]?.datalist"
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="filters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`"
-                                list="selectList" />
-                            <b-form-datalist
-                                v-if="validFilters[filter]?.datalist"
-                                id="selectList"
-                                :options="validFilters[filter]?.datalist"></b-form-datalist>
-                            <!-- is type: Date -->
-                            <b-form-input
-                                v-else-if="validFilters[filter]?.type == Date"
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="dateFilters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
-                            <!-- is type: other than Date -->
-                            <b-form-input
-                                v-else
-                                :id="`${identifier}-advanced-filter-${filter}`"
-                                v-model="filters[filter]"
-                                v-b-tooltip.focus.v-danger="hasError(filter)"
-                                size="sm"
-                                :state="hasError(filter) ? false : null"
-                                :placeholder="`any ${validFilters[filter]?.placeholder}`" />
-                            <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
-                            <b-input-group-append>
-                                <b-button
-                                    v-if="validFilters[filter]?.helpInfo"
-                                    :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
-                                    size="sm"
-                                    @click="helpModals[filter] = true">
-                                    <icon icon="question" />
-                                </b-button>
-                                <b-form-datepicker
-                                    v-if="validFilters[filter]?.type == Date"
-                                    v-model="dateFilters[filter]"
-                                    reset-button
-                                    button-only
-                                    size="sm" />
-                            </b-input-group-append>
-                        </b-input-group>
-                    </span>
-
-                    <!-- if a filter has help component, place it within a modal -->
-                    <span v-if="validFilters[filter]?.helpInfo">
-                        <b-modal
-                            v-model="helpModals[filter]"
-                            :title="`${capitalize(validFilters[filter]?.placeholder)} Help`"
-                            ok-only>
-                            <component
-                                :is="validFilters[filter]?.helpInfo"
-                                v-if="typeof validFilters[filter]?.helpInfo == 'object'"
-                                @set-filter="onOption" />
-                            <div v-else-if="typeof validFilters[filter]?.helpInfo == 'string'">
-                                <p>{{ validFilters[filter]?.helpInfo }}</p>
-                            </div>
-                        </b-modal>
-                    </span>
+                    <FilterMenuBoolean
+                        v-if="validFilters[filter]?.type == Boolean"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
+
+                    <FilterMenuRanged
+                        v-else-if="validFilters[filter]?.isRangeInput"
+                        class="m-0"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :error="formattedSearchError"
+                        :identifier="identifier"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
+
+                    <FilterMenuMultiTags
+                        v-else-if="validFilters[filter]?.type == 'MultiTags'"
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :identifier="identifier"
+                        @change="onOption" />
+
+                    <FilterMenuInput
+                        v-else
+                        :name="filter"
+                        :filter="validFilters[filter]"
+                        :filters="filters"
+                        :error="formattedSearchError"
+                        :identifier="identifier"
+                        @change="onOption"
+                        @on-enter="onSearch"
+                        @on-esc="onToggle" />
                 </span>
             </div>
 
-            <!-- Perform search or cancel out (or open help modal for Menu if exists) -->
+            <!-- Perform search or cancel out (or open help modal for whole Menu if exists) -->
             <div class="mt-3">
                 <b-button
                     :id="`${identifier}-advanced-filter-submit`"
diff --git a/client/src/components/Common/FilterMenuBoolean.vue b/client/src/components/Common/FilterMenuBoolean.vue
index 7990159cbf66..8c54665d8a9b 100644
--- a/client/src/components/Common/FilterMenuBoolean.vue
+++ b/client/src/components/Common/FilterMenuBoolean.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-/**
- * REFACTOR CODE HERE, `ANY` FILTER SHOULD BE SET TO UNDEFINED ...
- */
 import { computed } from "vue";
 
 const props = defineProps({
     filter: { type: Object, required: true },
     name: { type: String, required: true },
-    settings: { type: Object, required: true },
+    filters: { type: Object, required: true },
 });
 
 const boolType = computed(() => props.filter.boolType || "default");
@@ -26,11 +23,13 @@ const options =
 
 const emit = defineEmits<{
     (e: "change", name: string, value: boolean | string | undefined): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
 }>();
 
 const value = computed({
     get: () => {
-        const value = props.settings[props.name];
+        const value = props.filters[props.name];
         return value !== undefined ? value : "any";
     },
     set: (newVal: boolean | string | undefined) => {
@@ -41,12 +40,16 @@ const value = computed({
 </script>
 
 <template>
-    <b-form-group class="m-0">
-        <b-form-radio-group
-            v-model="value"
-            :options="options"
-            size="sm"
-            buttons
-            :data-description="`filter ${props.name}`" />
-    </b-form-group>
+    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+    <div @keyup.enter="emit('on-enter')" @keyup.esc="emit('on-esc')">
+        <small>{{ props.filter.placeholder }}:</small>
+        <b-form-group class="m-0">
+            <b-form-radio-group
+                v-model="value"
+                :options="options"
+                size="sm"
+                buttons
+                :data-description="`filter ${props.name}`" />
+        </b-form-group>
+    </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
new file mode 100644
index 000000000000..265997f5a2d6
--- /dev/null
+++ b/client/src/components/Common/FilterMenuInput.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { capitalize } from "lodash";
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    error: { type: Object, default: null },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
+}>();
+
+const propValue = computed(() => props.filters[props.name]);
+
+const localValue = ref(propValue.value);
+
+const helpToggle = ref(false);
+const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
+
+watch(() => localValue.value, (newFilter: string) => {
+    emit("change", props.name, newFilter);
+});
+watch(() => propValue.value, (newFilter: string) => {
+    localValue.value = newFilter;
+});
+
+function hasError(field: string) {
+    if (props.error && props.error.index == field) {
+        return props.error.typeError || props.error.msg;
+    }
+    return "";
+}
+
+function onHelp(_: string, value: string) {
+    helpToggle.value = false;
+    localValue.value = value;
+}
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group>
+            <b-form-input
+                :id="`${identifier}-advanced-filter-${props.name}`"
+                ref="filterMenuInput"
+                v-model="localValue"
+                v-b-tooltip.focus.v-danger="hasError(props.name)"
+                size="sm"
+                :state="hasError(props.name) ? false : null"
+                :placeholder="`any ${props.filter.placeholder}`"
+                :list="props.filter.datalist ? `${identifier}-${props.name}-selectList` : null"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-form-datalist
+                v-if="props.filter.datalist"
+                :id="`${identifier}-${props.name}-selectList`"
+                :options="props.filter.datalist"></b-form-datalist>
+            <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
+            <b-input-group-append>
+                <b-button
+                    v-if="props.filter.helpInfo"
+                    :title="modalTitle"
+                    size="sm"
+                    @click="helpToggle = true">
+                    <icon icon="question" />
+                </b-button>
+                <b-form-datepicker
+                    v-if="props.filter.type == Date"
+                    v-model="localValue"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+        </b-input-group>
+        <!-- if a filter has help component, place it within a modal -->
+        <span v-if="props.filter.helpInfo">
+            <b-modal
+                v-model="helpToggle"
+                :title="modalTitle"
+                ok-only>
+                <component
+                    :is="props.filter.helpInfo"
+                    v-if="typeof props.filter.helpInfo == 'object'"
+                    @set-filter="onHelp" />
+                <div v-else-if="typeof props.filter.helpInfo == 'string'">
+                    <p>{{ props.filter.helpInfo }}</p>
+                </div>
+            </b-modal>
+        </span>
+    </div>
+</template>
diff --git a/client/src/components/Common/FilterMenuMultiTags.vue b/client/src/components/Common/FilterMenuMultiTags.vue
new file mode 100644
index 000000000000..923534f5c837
--- /dev/null
+++ b/client/src/components/Common/FilterMenuMultiTags.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+import StatelessTags from "../Tags/StatelessTags.vue";
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+}>();
+
+const propValue = computed(() => props.filters[props.name]);
+
+const localValue = ref(propValue.value);
+
+watch(() => localValue.value, (newFilter: string) => {
+    emit("change", props.name, newFilter);
+});
+watch(() => propValue.value, (newFilter: string) => {
+    localValue.value = newFilter;
+});
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group :id="`${identifier}-advanced-filter-${props.name}`">
+            <StatelessTags
+                :value="localValue"
+                :placeholder="`any ${props.filter.placeholder}`"
+                @input="(tags) => localValue = tags" />
+        </b-input-group>
+    </div>
+</template>
diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
new file mode 100644
index 000000000000..1860ee3599a4
--- /dev/null
+++ b/client/src/components/Common/FilterMenuRanged.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, type PropType, ref, watch } from 'vue';
+
+import { ValidFilter } from '@/utils/filtering';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
+    filters: { type: Object, required: true },
+    error: { type: Object, default: null },
+    identifier: { type: String, required: true },
+});
+
+const emit = defineEmits<{
+    (e: "change", name: string, value: string): void;
+    (e: "on-enter"): void;
+    (e: "on-esc"): void;
+}>();
+
+const localNameLt = computed(() => `${props.name}_lt`);
+const localNameGt = computed(() => `${props.name}_gt`);
+const valueLt = computed(() => props.filters[localNameLt.value]);
+const valueGt = computed(() => props.filters[localNameGt.value]);
+
+const localValueGt = ref(valueGt.value);
+const localValueLt = ref(valueLt.value);
+
+watch(() => localValueGt.value, (newFilter: string) => {
+    emit("change", localNameGt.value, newFilter);
+});
+watch(() => localValueLt.value, (newFilter: string) => {
+    emit("change", localNameLt.value, newFilter);
+});
+watch(() => valueGt.value, (newFilter: string) => {
+    localValueGt.value = newFilter;
+});
+watch(() => valueLt.value, (newFilter: string) => {
+    localValueLt.value = newFilter;
+});
+
+const isDateType = computed(() => props.filter.type == Date);
+
+function hasError(field: string) {
+    if (props.error && props.error.index == field) {
+        return props.error.typeError || props.error.msg;
+    }
+    return "";
+}
+
+function localPlaceholder(comp: 'gt' | 'lt') {
+    if (comp == 'gt') {
+        const field = isDateType.value ? 'after' : 'greater';
+        return `${props.filter.placeholder} ${field}`;
+    } else {
+        const field = isDateType.value ? 'before' : 'lower';
+        return `${props.filter.placeholder} ${field}`;
+    }
+}
+</script>
+
+<template>
+    <div>
+        <small>Filter by {{ props.filter.placeholder }}:</small>
+        <b-input-group>
+            <!---------------------------- GREATER THAN ---------------------------->
+            <b-form-input
+                :id="`${props.identifier}-advanced-filter-${localNameGt}`"
+                v-model="localValueGt"
+                v-b-tooltip.focus.v-danger="hasError(localNameGt)"
+                size="sm"
+                :state="hasError(localNameGt) ? false : null"
+                :placeholder="localPlaceholder('gt')"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-input-group-append v-if="isDateType">
+                <b-form-datepicker
+                    v-model="localValueGt"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+            <!--------------------------------------------------------------------->
+
+            <!---------------------------- LESSER THAN ---------------------------->
+            <b-form-input
+                :id="`${props.identifier}-advanced-filter-${localNameLt}`"
+                v-model="localValueLt"
+                v-b-tooltip.focus.v-danger="hasError(localNameLt)"
+                size="sm"
+                :state="hasError(localNameLt) ? false : null"
+                :placeholder="localPlaceholder('lt')"
+                @keyup.enter="emit('on-enter')"
+                @keyup.esc="emit('on-esc')" />
+            <b-input-group-append v-if="isDateType">
+                <b-form-datepicker
+                    v-model="localValueLt"
+                    reset-button
+                    button-only
+                    size="sm" />
+            </b-input-group-append>
+            <!--------------------------------------------------------------------->
+        </b-input-group>
+    </div>
+</template>

From 1201ea0f754f27f8f988f14babbe2d9e77344470 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 9 Oct 2023 19:18:26 -0500
Subject: [PATCH 10/12] prettier fixes

---
 client/src/components/Common/FilterMenu.vue   |  5 +-
 .../src/components/Common/FilterMenuInput.vue | 33 +++++-----
 .../components/Common/FilterMenuMultiTags.vue | 24 +++++---
 .../components/Common/FilterMenuRanged.vue    | 60 ++++++++++---------
 4 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 226c61c06a31..72e59bba3cd3 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -125,10 +125,7 @@ function updateFilterText(newFilterText: string) {
 watch(
     () => props.filterText,
     (newFilterText: string) => {
-        const defaultBackendFilter = props.filterClass.getFilterText(
-            props.filterClass.defaultFilters,
-            true
-        );
+        const defaultBackendFilter = props.filterClass.getFilterText(props.filterClass.defaultFilters, true);
         const currentBackendFilter = props.filterClass.getFilterText(filters.value, true);
 
         const backendFilter =
diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
index 265997f5a2d6..3c889a1800c9 100644
--- a/client/src/components/Common/FilterMenuInput.vue
+++ b/client/src/components/Common/FilterMenuInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { capitalize } from "lodash";
-import { computed, type PropType, ref, watch } from 'vue';
+import { computed, type PropType, ref, watch } from "vue";
 
-import { ValidFilter } from '@/utils/filtering';
+import { ValidFilter } from "@/utils/filtering";
 
 const props = defineProps({
     name: { type: String, required: true },
@@ -25,12 +25,18 @@ const localValue = ref(propValue.value);
 const helpToggle = ref(false);
 const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
 
-watch(() => localValue.value, (newFilter: string) => {
-    emit("change", props.name, newFilter);
-});
-watch(() => propValue.value, (newFilter: string) => {
-    localValue.value = newFilter;
-});
+watch(
+    () => localValue.value,
+    (newFilter: string) => {
+        emit("change", props.name, newFilter);
+    }
+);
+watch(
+    () => propValue.value,
+    (newFilter: string) => {
+        localValue.value = newFilter;
+    }
+);
 
 function hasError(field: string) {
     if (props.error && props.error.index == field) {
@@ -66,11 +72,7 @@ function onHelp(_: string, value: string) {
                 :options="props.filter.datalist"></b-form-datalist>
             <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
             <b-input-group-append>
-                <b-button
-                    v-if="props.filter.helpInfo"
-                    :title="modalTitle"
-                    size="sm"
-                    @click="helpToggle = true">
+                <b-button v-if="props.filter.helpInfo" :title="modalTitle" size="sm" @click="helpToggle = true">
                     <icon icon="question" />
                 </b-button>
                 <b-form-datepicker
@@ -83,10 +85,7 @@ function onHelp(_: string, value: string) {
         </b-input-group>
         <!-- if a filter has help component, place it within a modal -->
         <span v-if="props.filter.helpInfo">
-            <b-modal
-                v-model="helpToggle"
-                :title="modalTitle"
-                ok-only>
+            <b-modal v-model="helpToggle" :title="modalTitle" ok-only>
                 <component
                     :is="props.filter.helpInfo"
                     v-if="typeof props.filter.helpInfo == 'object'"
diff --git a/client/src/components/Common/FilterMenuMultiTags.vue b/client/src/components/Common/FilterMenuMultiTags.vue
index 923534f5c837..c8b570559375 100644
--- a/client/src/components/Common/FilterMenuMultiTags.vue
+++ b/client/src/components/Common/FilterMenuMultiTags.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type PropType, ref, watch } from 'vue';
+import { computed, type PropType, ref, watch } from "vue";
 
-import { ValidFilter } from '@/utils/filtering';
+import { ValidFilter } from "@/utils/filtering";
 
 import StatelessTags from "../Tags/StatelessTags.vue";
 
@@ -20,12 +20,18 @@ const propValue = computed(() => props.filters[props.name]);
 
 const localValue = ref(propValue.value);
 
-watch(() => localValue.value, (newFilter: string) => {
-    emit("change", props.name, newFilter);
-});
-watch(() => propValue.value, (newFilter: string) => {
-    localValue.value = newFilter;
-});
+watch(
+    () => localValue.value,
+    (newFilter: string) => {
+        emit("change", props.name, newFilter);
+    }
+);
+watch(
+    () => propValue.value,
+    (newFilter: string) => {
+        localValue.value = newFilter;
+    }
+);
 </script>
 
 <template>
@@ -35,7 +41,7 @@ watch(() => propValue.value, (newFilter: string) => {
             <StatelessTags
                 :value="localValue"
                 :placeholder="`any ${props.filter.placeholder}`"
-                @input="(tags) => localValue = tags" />
+                @input="(tags) => (localValue = tags)" />
         </b-input-group>
     </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
index 1860ee3599a4..25308df252f5 100644
--- a/client/src/components/Common/FilterMenuRanged.vue
+++ b/client/src/components/Common/FilterMenuRanged.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type PropType, ref, watch } from 'vue';
+import { computed, type PropType, ref, watch } from "vue";
 
-import { ValidFilter } from '@/utils/filtering';
+import { ValidFilter } from "@/utils/filtering";
 
 const props = defineProps({
     name: { type: String, required: true },
@@ -25,18 +25,30 @@ const valueGt = computed(() => props.filters[localNameGt.value]);
 const localValueGt = ref(valueGt.value);
 const localValueLt = ref(valueLt.value);
 
-watch(() => localValueGt.value, (newFilter: string) => {
-    emit("change", localNameGt.value, newFilter);
-});
-watch(() => localValueLt.value, (newFilter: string) => {
-    emit("change", localNameLt.value, newFilter);
-});
-watch(() => valueGt.value, (newFilter: string) => {
-    localValueGt.value = newFilter;
-});
-watch(() => valueLt.value, (newFilter: string) => {
-    localValueLt.value = newFilter;
-});
+watch(
+    () => localValueGt.value,
+    (newFilter: string) => {
+        emit("change", localNameGt.value, newFilter);
+    }
+);
+watch(
+    () => localValueLt.value,
+    (newFilter: string) => {
+        emit("change", localNameLt.value, newFilter);
+    }
+);
+watch(
+    () => valueGt.value,
+    (newFilter: string) => {
+        localValueGt.value = newFilter;
+    }
+);
+watch(
+    () => valueLt.value,
+    (newFilter: string) => {
+        localValueLt.value = newFilter;
+    }
+);
 
 const isDateType = computed(() => props.filter.type == Date);
 
@@ -47,12 +59,12 @@ function hasError(field: string) {
     return "";
 }
 
-function localPlaceholder(comp: 'gt' | 'lt') {
-    if (comp == 'gt') {
-        const field = isDateType.value ? 'after' : 'greater';
+function localPlaceholder(comp: "gt" | "lt") {
+    if (comp == "gt") {
+        const field = isDateType.value ? "after" : "greater";
         return `${props.filter.placeholder} ${field}`;
     } else {
-        const field = isDateType.value ? 'before' : 'lower';
+        const field = isDateType.value ? "before" : "lower";
         return `${props.filter.placeholder} ${field}`;
     }
 }
@@ -73,11 +85,7 @@ function localPlaceholder(comp: 'gt' | 'lt') {
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
             <b-input-group-append v-if="isDateType">
-                <b-form-datepicker
-                    v-model="localValueGt"
-                    reset-button
-                    button-only
-                    size="sm" />
+                <b-form-datepicker v-model="localValueGt" reset-button button-only size="sm" />
             </b-input-group-append>
             <!--------------------------------------------------------------------->
 
@@ -92,11 +100,7 @@ function localPlaceholder(comp: 'gt' | 'lt') {
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
             <b-input-group-append v-if="isDateType">
-                <b-form-datepicker
-                    v-model="localValueLt"
-                    reset-button
-                    button-only
-                    size="sm" />
+                <b-form-datepicker v-model="localValueLt" reset-button button-only size="sm" />
             </b-input-group-append>
             <!--------------------------------------------------------------------->
         </b-input-group>

From 7cae1a6583ef7749123fcc80a34fabc42fcdc6dd Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Oct 2023 10:19:47 -0500
Subject: [PATCH 11/12] fix jests

---
 client/src/components/Common/FilterMenu.test.js        | 2 +-
 client/src/components/History/HistoryPublishedList.vue | 9 ---------
 client/src/components/Panels/Common/ToolSearch.test.js | 2 +-
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.test.js b/client/src/components/Common/FilterMenu.test.js
index 254efe75bedc..5f7598ece3fd 100644
--- a/client/src/components/Common/FilterMenu.test.js
+++ b/client/src/components/Common/FilterMenu.test.js
@@ -201,7 +201,7 @@ describe("FilterMenu", () => {
         // only add name filter in the advanced menu
         let filterName = wrapper.find("[placeholder='any name']");
         if (filterName.vm && filterName.props().type == "text") {
-            filterName.setValue("sample name");
+            await filterName.setValue("sample name");
         }
 
         // -------- Test keyup.enter key:  ---------
diff --git a/client/src/components/History/HistoryPublishedList.vue b/client/src/components/History/HistoryPublishedList.vue
index f176407cb7bc..cca94b113dd7 100644
--- a/client/src/components/History/HistoryPublishedList.vue
+++ b/client/src/components/History/HistoryPublishedList.vue
@@ -81,15 +81,6 @@ const onTagsUpdate = (newTags, row) => {
     updateTags(row.item.id, "History", row.item.tags);
 };
 
-const onToggle = () => {
-    showAdvanced.value = !showAdvanced.value;
-};
-
-const onSearch = () => {
-    onToggle();
-    updateFilter(filters.getFilterText(filterSettings.value));
-};
-
 const scrollToTop = () => {
     scrollableDiv.value.scrollTo({ top: 0, behavior: "smooth" });
 };
diff --git a/client/src/components/Panels/Common/ToolSearch.test.js b/client/src/components/Panels/Common/ToolSearch.test.js
index b0fe88c49b15..57373e961a05 100644
--- a/client/src/components/Panels/Common/ToolSearch.test.js
+++ b/client/src/components/Panels/Common/ToolSearch.test.js
@@ -68,7 +68,7 @@ describe("ToolSearch", () => {
         // Test: we route to the list with filters
         const mockMethod = jest.fn();
         $router.push = mockMethod;
-        wrapper.find("[data-description='apply filters']").trigger("click");
+        await wrapper.find("[data-description='apply filters']").trigger("click");
         const filterSettings = {
             name: "name-filter",
             section: "section-filter",

From 1c37fa90f339474e46c1b3dcebc61dfe9576cb59 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 12 Oct 2023 13:30:28 -0500
Subject: [PATCH 12/12] fix seleniums and minor bug fixes for `FilterMenu`

---
 client/src/components/Common/FilterMenu.vue             | 2 +-
 client/src/components/Common/FilterMenuMultiTags.vue    | 2 +-
 client/src/components/Page/PageList.vue                 | 4 ++--
 client/src/utils/navigation/navigation.yml              | 1 +
 lib/galaxy/selenium/navigates_galaxy.py                 | 9 ---------
 lib/galaxy_test/selenium/test_history_related_filter.py | 2 +-
 lib/galaxy_test/selenium/test_workflow_management.py    | 8 ++++++--
 7 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 72e59bba3cd3..b418d1ca2355 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -157,7 +157,7 @@ watch(
             @onToggle="onToggle" />
         <b-button
             v-if="props.menuType == 'separate' && props.showAdvanced"
-            v-b-tooltip.hover.noninteractive
+            v-b-tooltip.hover.bottom.noninteractive
             class="w-100"
             aria-haspopup="true"
             size="sm"
diff --git a/client/src/components/Common/FilterMenuMultiTags.vue b/client/src/components/Common/FilterMenuMultiTags.vue
index c8b570559375..8434837470ef 100644
--- a/client/src/components/Common/FilterMenuMultiTags.vue
+++ b/client/src/components/Common/FilterMenuMultiTags.vue
@@ -3,7 +3,7 @@ import { computed, type PropType, ref, watch } from "vue";
 
 import { ValidFilter } from "@/utils/filtering";
 
-import StatelessTags from "../Tags/StatelessTags.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 const props = defineProps({
     name: { type: String, required: true },
diff --git a/client/src/components/Page/PageList.vue b/client/src/components/Page/PageList.vue
index 8f8c66380b8e..e7e0f3ac311c 100644
--- a/client/src/components/Page/PageList.vue
+++ b/client/src/components/Page/PageList.vue
@@ -26,7 +26,7 @@
         </b-row>
         <b-table v-model="pageItemsModel" v-bind="{ ...defaultTableAttrs, ...indexTableAttrs }">
             <template v-slot:empty>
-                <loading-span v-if="loading" message="Loading pages" />
+                <LoadingSpan v-if="loading" message="Loading pages" />
                 <b-alert v-else id="no-pages" variant="info" show>
                     <div v-if="filterText !== ''">
                         No matching entries found for: <span class="font-weight-bold">{{ filterText }}</span
@@ -249,7 +249,7 @@ export default {
     computed: {
         dataProviderParameters() {
             const extraParams = {
-                search: this.effectiveFilter,
+                search: this.searchQuery,
                 show_published: false,
                 show_shared: true,
             };
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index e1d0afd669a1..cb02d9174e3c 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -583,6 +583,7 @@ workflows:
     advanced_search_toggle: '.workflows-list [data-description="toggle advanced search"]'
     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'])"
     external_link: '.workflow-external-link'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index cb8b939d004a..af04ac19281e 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -17,7 +17,6 @@
     Any,
     cast,
     Dict,
-    List,
     NamedTuple,
     Optional,
     Union,
@@ -1396,14 +1395,6 @@ def workflow_index_search_for(self, search_term=None):
             escape_to_clear=True,
         )
 
-    def workflow_index_add_advanced_tag_filter(self, tags: List[str]):
-        for tag in tags:
-            tag_display = self.components.workflows.advanced_search_tag_input
-            if tag_display.is_absent:
-                self.components.workflows.advanced_search_toggle.wait_for_and_click()
-            tag_display.wait_for_and_click()
-            self.tagging_add([tag])
-
     def workflow_index_click_import(self):
         return self.components.workflows.import_button.wait_for_and_click()
 
diff --git a/lib/galaxy_test/selenium/test_history_related_filter.py b/lib/galaxy_test/selenium/test_history_related_filter.py
index d61482cc57e2..5ea2e4311c3d 100644
--- a/lib/galaxy_test/selenium/test_history_related_filter.py
+++ b/lib/galaxy_test/selenium/test_history_related_filter.py
@@ -36,6 +36,6 @@ def test_history_related_filter(self):
         ).wait_for_and_click()
         initial_value = filter_element.get_attribute("value")
         assert initial_value == f"related:{CURRENT_HID}", initial_value
-        self.history_element("clear filters").wait_for_and_click()
+        self.history_element(attribute_value="reset query", scope=".content-operations-filters").wait_for_and_click()
         filter_element.send_keys(f"related:{UNRELATED_HID}")
         current_hda.wait_for_absent()
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index fc9e811036df..e3f2304f6a46 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -192,7 +192,9 @@ def test_index_advanced_search(self):
         self.components.workflows.advanced_search_toggle.wait_for_and_click()
         # search by tag and name
         self.components.workflows.advanced_search_name_input.wait_for_and_send_keys("searchforthis")
-        self.workflow_index_add_advanced_tag_filter(["mytag"])
+        self.components.workflows.advanced_search_tag_input.wait_for_and_click()
+        self.tagging_add(["mytag"])
+        self.components.workflows.advanced_search_submit.wait_for_and_click()
         self._assert_showing_n_workflows(1)
         curr_value = self.workflow_index_get_current_filter()
         assert curr_value == "name:searchforthis tag:mytag", curr_value
@@ -204,7 +206,9 @@ def test_index_advanced_search(self):
 
         self.components.workflows.advanced_search_toggle.wait_for_and_click()
         # search by 2 tags, one of which is not present
-        self.workflow_index_add_advanced_tag_filter(["mytag", "DNEtag"])
+        self.components.workflows.advanced_search_tag_input.wait_for_and_click()
+        self.tagging_add(["mytag", "DNEtag"])
+        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)