From 5b51c80f5f4024df70287ca91ee54ac733af2193 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 12 Mar 2024 17:13:53 -0500
Subject: [PATCH] do not perform query when invalid filters are present

Modified the `Filtering.getValidFilters` function to return an `invalidFilters` object as well, which can be used to tell the user which filters were invalid.
---
 client/src/components/Common/FilterMenu.vue   |  22 +-
 client/src/components/Grid/GridList.vue       |  72 +++--
 .../History/CurrentHistory/HistoryPanel.vue   |   4 +-
 .../components/Workflow/WorkflowFilters.js    | 268 +++++++++++-------
 .../Workflow/WorkflowIndicators.vue           |   3 +-
 .../src/components/Workflow/WorkflowList.vue  | 150 ++++------
 client/src/utils/filtering.ts                 |  32 ++-
 7 files changed, 297 insertions(+), 254 deletions(-)

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 8dee4e4bd08d..f3deb4ee9894 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -4,7 +4,7 @@ import { faAngleDoubleUp, faQuestion, faRedo, faSearch } from "@fortawesome/free
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BModal } from "bootstrap-vue";
 import { kebabCase } from "lodash";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import type Filtering from "@/utils/filtering";
 import { type Alias, getOperatorForAlias } from "@/utils/filtering";
@@ -68,7 +68,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 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, backendFilter?: string): void;
 }>();
@@ -127,25 +126,6 @@ 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 backend 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>
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index da08de2739c5..cb0402f8350f 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -76,8 +76,11 @@ const sortDesc = ref(props.gridConfig ? props.gridConfig.sortDesc : false);
 
 // filtering refs and handlers
 const filterText = ref("");
-const searchTerm = ref("");
 const showAdvanced = ref(false);
+const filterClass = props.gridConfig.filtering;
+const rawFilters = computed(() => Object.fromEntries(filterClass.getFiltersForText(filterText.value, true, false)));
+const validFilters = computed(() => filterClass.getValidFilters(rawFilters.value, true).validFilters);
+const invalidFilters = computed(() => filterClass.getValidFilters(rawFilters.value, true).invalidFilters);
 
 // hide message helper
 const hideMessage = useDebounceFn(() => {
@@ -111,12 +114,17 @@ function displayInitialMessage() {
 async function getGridData() {
     selected.value = new Set();
     if (props.gridConfig) {
+        if (Object.keys(invalidFilters.value).length > 0) {
+            // there are invalid filters, so we don't want to search
+            loading.value = false;
+            return;
+        }
         try {
             const offset = props.limit * (currentPage.value - 1);
             const [responseData, responseTotal] = await props.gridConfig.getData(
                 offset,
                 props.limit,
-                searchTerm.value,
+                validatedFilterText(),
                 sortBy.value,
                 sortDesc.value
             );
@@ -159,13 +167,6 @@ function onRouterPush(route: string) {
     router.push(route);
 }
 
-/**
- * Apply backend formatted filter and execute grid search
- */
-function onSearch(query: string) {
-    searchTerm.value = query;
-}
-
 /**
  * User changes sorting
  */
@@ -211,14 +212,24 @@ function onSelectAll(current: boolean): void {
     }
 }
 
+/**
+ * A valid filter/query for the backend
+ */
+function validatedFilterText() {
+    // there are no filters derived from the `filterText`; return the `filterText` as is
+    if (Object.keys(rawFilters.value).length === 0) {
+        return filterText.value;
+    }
+    // there are valid filters derived from the `filterText`
+    return filterClass.getFilterText(validFilters.value, false);
+}
+
 /**
  * Initialize grid data
  */
 onMounted(() => {
     if (props.usernameSearch) {
-        const search_query = `user:${props.usernameSearch}`.trim();
-        filterText.value = search_query;
-        onSearch(search_query);
+        filterText.value = filterClass.setFilterValue(filterText.value, "user", props.usernameSearch);
     }
     getGridData();
     eventBus.on(onRouterPush);
@@ -232,7 +243,7 @@ onUnmounted(() => {
 /**
  * Load current page
  */
-watch([currentPage, searchTerm, sortDesc, sortBy], () => getGridData());
+watch([currentPage, filterText, sortDesc, sortBy], () => getGridData());
 
 /**
  * Operation message timeout handler
@@ -269,21 +280,34 @@ watch(operationMessage, () => {
                 :class="{ 'py-2': !embedded }"
                 :name="gridConfig.plural"
                 :placeholder="`search ${gridConfig.plural.toLowerCase()}`"
-                :filter-class="gridConfig.filtering"
+                :filter-class="filterClass"
                 :filter-text.sync="filterText"
                 :loading="loading"
-                :show-advanced.sync="showAdvanced"
-                @on-backend-filter="onSearch" />
+                :show-advanced.sync="showAdvanced" />
             <hr v-if="showAdvanced" />
         </div>
         <LoadingSpan v-if="loading" />
-        <BAlert v-else-if="!isAvailable" variant="info" show>
-            <span v-if="searchTerm">
-                <span v-localize>Nothing found with:</span>
-                <b>{{ searchTerm }}</b>
-            </span>
-            <span v-else v-localize> No entries found. </span>
-        </BAlert>
+        <span v-else-if="!isAvailable || Object.keys(invalidFilters).length > 0" variant="info" show>
+            <BAlert v-if="Object.keys(invalidFilters).length === 0" variant="info" show>
+                <span v-if="filterText">
+                    <span v-localize>Nothing found with:</span>
+                    <b>{{ filterText }}</b>
+                </span>
+                <span v-else v-localize> No entries found. </span>
+            </BAlert>
+            <BAlert v-else variant="danger" show>
+                <Heading h4 inline size="sm" class="flex-grow-1 mb-2">Invalid filters in query:</Heading>
+                <ul>
+                    <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
+                        <b>{{ invalidKey }}</b
+                        >: {{ value }}
+                    </li>
+                </ul>
+                <a href="javascript:void(0)" class="ui-link" @click="filterText = validatedFilterText()">
+                    Remove invalid filters from query
+                </a>
+            </BAlert>
+        </span>
         <table v-else class="grid-table">
             <thead>
                 <th v-if="!!gridConfig.batch">
@@ -354,7 +378,7 @@ watch(operationMessage, () => {
                             :value="rowData[fieldEntry.key]"
                             :disabled="fieldEntry.disabled"
                             @input="onTagInput(rowData, $event, fieldEntry.handler)"
-                            @tag-click="applyFilter('tag', $event, true)" />
+                            @tag-click="applyFilter('tag', $event)" />
                         <span v-else v-localize> Not available. </span>
                     </div>
                     <FontAwesomeIcon v-else icon="fa-shield-alt" />
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 8b2062323cae..904b5fb1e126 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -394,9 +394,9 @@ async function onDrop(evt: any) {
     }
 }
 
-function updateFilterValue(newFilterText: string, newValue: any) {
+function updateFilterValue(filterKey: string, newValue: any) {
     const currentFilterText = filterText.value;
-    filterText.value = filterClass.setFilterValue(currentFilterText, newFilterText, newValue);
+    filterText.value = filterClass.setFilterValue(currentFilterText, filterKey, newValue);
 }
 
 function getItemKey(item: HistoryItem) {
diff --git a/client/src/components/Workflow/WorkflowFilters.js b/client/src/components/Workflow/WorkflowFilters.js
index d91c8ca14ffd..509e9f4cfc96 100644
--- a/client/src/components/Workflow/WorkflowFilters.js
+++ b/client/src/components/Workflow/WorkflowFilters.js
@@ -1,115 +1,167 @@
 import Filtering, { contains, equals, expandNameTag, toBool } from "utils/filtering";
 
-export const helpHtml = `<div>
-<p>This input can be used to filter the workflows displayed.</p>
+export function helpHtml(activeList = "my") {
+    let extra = "";
+    if (activeList === "my") {
+        extra = `<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>`;
+    } else if (activeList === "shared_with_me") {
+        extra = `<dt><code>user:____</code></dt>
+        <dd>
+            Shows workflows owned by the given user.
+        </dd>
+        <dt><code>is:published</code></dt>
+        <dd>
+            Shows published workflows.
+        </dd>`;
+    } else {
+        extra = `<dt><code>user:____</code></dt>
+        <dd>
+            Shows workflows owned by the given user.
+        </dd>
+        <dt><code>is:shared_with_me</code></dt>
+        <dd>
+            Shows workflows shared by another user directly with you.
+        </dd>`;
+    }
 
-<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>
+    const conditionalHelpHtml = `<div>
+        <p>This menu can be used to filter the workflows displayed.</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>`;
+        <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>
 
-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(s)",
-        type: "MultiTags",
-        handler: contains("tag", "tag", expandNameTag),
-        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,
-    },
-};
+        <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>
+            ${extra}
+        </dl>
+    </div>`;
+    return conditionalHelpHtml;
+}
 
-export const WorkflowFilters = new Filtering(validFilters, undefined, false, false);
+export function WorkflowFilters(activeList = "my") {
+    const commonFilters = {
+        name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
+        tag: {
+            placeholder: "tag(s)",
+            type: "MultiTags",
+            handler: contains("tag", "tag", expandNameTag),
+            menuItem: true,
+        },
+    };
 
-const validPublishedFilters = {
-    ...validFilters,
-    user: {
-        ...validFilters.user,
-        menuItem: true,
-    },
-    published: {
-        ...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, false);
+    if (activeList === "my") {
+        return new Filtering(
+            {
+                ...commonFilters,
+                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,
+                },
+            },
+            undefined,
+            false,
+            false
+        );
+    } else if (activeList === "shared_with_me") {
+        return new Filtering(
+            {
+                ...commonFilters,
+                user: {
+                    placeholder: "owner",
+                    type: String,
+                    handler: contains("user"),
+                    menuItem: true,
+                },
+                published: {
+                    placeholder: "Filter on published workflows",
+                    type: Boolean,
+                    boolType: "is",
+                    handler: equals("published", "published", toBool),
+                    menuItem: true,
+                },
+            },
+            undefined,
+            false,
+            false
+        );
+    } else {
+        return new Filtering(
+            {
+                ...commonFilters,
+                user: {
+                    placeholder: "owner",
+                    type: String,
+                    handler: contains("user"),
+                    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,
+                },
+            },
+            undefined,
+            false,
+            false
+        );
+    }
+}
diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
index 90bec28520de..340361143de1 100644
--- a/client/src/components/Workflow/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -79,7 +79,7 @@ function onViewUserPublished() {
 <template>
     <div>
         <BButton
-            v-if="workflow.published"
+            v-if="workflow.published && !publishedView"
             v-b-tooltip.noninteractive
             size="sm"
             class="workflow-published-icon inline-icon-button"
@@ -87,6 +87,7 @@ function onViewUserPublished() {
             title="Published workflow. Click to view all published workflows">
             <FontAwesomeIcon :icon="faGlobe" fixed-width />
         </BButton>
+        <FontAwesomeIcon v-else-if="workflow.published" :icon="faGlobe" fixed-width size="sm" />
 
         <BButton
             v-if="sourceType.includes('trs')"
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index af780b8545a1..865515ca4e86 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -4,13 +4,14 @@ import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BNav, BNavItem, BOverlay, BPagination } from "bootstrap-vue";
 import { filter } from "underscore";
-import { computed, type ComputedRef, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { loadWorkflows } from "@/components/Workflow/workflows.services";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
-import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
+
+import { helpHtml, WorkflowFilters } from "./WorkflowFilters";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -22,37 +23,6 @@ import WorkflowListActions from "@/components/Workflow/WorkflowListActions.vue";
 
 library.add(faStar, faTrash);
 
-const helpHtml = `<div>
-<p>This input can be used to filter the workflows displayed.</p>
-
-<p>
-    Text entered here will be searched against workflow names and workflow
-    tags. Additionally, advanced filtering tags can be used to refine the
-    search more precisely. Filtering tags are of the form
-    <code>&lt;tag_name&gt;:&lt;tag_value&gt;</code> or
-    <code>&lt;tag_name&gt;:'&lt;tag_value&gt;'</code>. For instance to
-    search just for RNAseq in the workflow name,
-    <code>name:rnsseq</code> can be used. Notice by default the search is
-    not case-sensitive. If the quoted version of tag is used, the search is
-    case sensitive and only full matches will be returned. So
-    <code>name:'RNAseq'</code> would show only workflows named exactly
-    <code>RNAseq</code>.
-</p>
-
-<p>The available filtering tags are:</p>
-<dl>
-    <dt><code>name</code></dt>
-    <dd>
-        Shows workflows with the given sequence of characters in their names.
-    </dd>
-    <dt><code>tag</code></dt>
-    <dd>
-        Shows workflows with the given workflow tag. You may also click
-        on a tag to filter on that tag directly.
-    </dd>
-</dl>
-</div>`;
-
 type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
 
@@ -76,29 +46,8 @@ const totalWorkflows = ref(0);
 const showAdvanced = ref(false);
 const showBookmarked = ref(false);
 const listHeader = ref<any>(null);
-const advancedFiltering = ref<any>(null);
 const workflowsLoaded = ref<WorkflowsList>([]);
 
-const validFilters: ComputedRef<Record<string, ValidFilter<string | boolean | undefined>>> = computed(() => {
-    return {
-        name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
-        tag: {
-            placeholder: "tag",
-            type: "MultiTags",
-            handler: contains("tags", "tag", expandNameTag),
-            menuItem: true,
-        },
-        deleted: {
-            placeholder: "Filter on deleted workflows",
-            type: Boolean,
-            handler: equals("deleted", "deleted", toBool),
-            menuItem: false,
-        },
-    };
-});
-
-const WorkflowFilters = new Filtering(validFilters.value);
-
 const searchPlaceHolder = computed(() => {
     let placeHolder = "Search my workflows";
 
@@ -123,24 +72,16 @@ const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "
 const noItems = computed(() => !loading.value && workflowsLoaded.value.length === 0 && !filterText.value);
 const noResults = computed(() => !loading.value && workflowsLoaded.value.length === 0 && filterText.value);
 
-function updateFilter(newVal: string) {
-    advancedFiltering.value.updateFilter(newVal.trim());
-}
+const workflowFilters = computed(() => WorkflowFilters(props.activeList));
+const rawFilters = computed(() =>
+    Object.fromEntries(workflowFilters.value.getFiltersForText(filterText.value, true, false))
+);
+const validFilters = computed(() => workflowFilters.value.getValidFilters(rawFilters.value, true).validFilters);
+const invalidFilters = computed(() => workflowFilters.value.getValidFilters(rawFilters.value, true).invalidFilters);
 
-function onTagClick(tag: string) {
-    if (filterText.value.includes(tag)) {
-        filterText.value = filterText.value.replace(`tag:'${tag}'`, "").trim();
-    } else {
-        filterText.value = WorkflowFilters.setFilterValue(filterText.value, "tag", `'${tag}'`);
-    }
-}
-
-function onToggleDeleted() {
-    if (!showDeleted.value) {
-        filterText.value = `${filterText.value} is:deleted`.trim();
-    } else {
-        filterText.value = filterText.value.replace("is:deleted", "").trim();
-    }
+function updateFilterValue(filterKey: string, newValue: any) {
+    const currentFilterText = filterText.value;
+    filterText.value = workflowFilters.value.setFilterValue(currentFilterText, filterKey, newValue);
 }
 
 function onToggleBookmarked() {
@@ -155,15 +96,22 @@ async function load(overlayLoading = false, silent = false) {
             loading.value = true;
         }
     }
+    let search;
+    if (Object.keys(invalidFilters.value).length === 0) {
+        search = validatedFilterText();
 
-    let search = filterText.value;
-
-    if (published.value) {
-        search += " is:published";
-    }
-
-    if (sharedWithMe.value) {
-        search += " is:shared_with_me";
+        // append default backend query filters for provided `props.activeList`
+        if (published.value && !workflowFilters.value.getFilterValue(search, "published")) {
+            search += " is:published";
+        }
+        if (sharedWithMe.value && !workflowFilters.value.getFilterValue(search, "shared_with_me")) {
+            search += " is:shared_with_me";
+        }
+    } else {
+        // there are invalid filters, so we don't want to search
+        overlay.value = false;
+        loading.value = false;
+        return;
     }
 
     try {
@@ -205,6 +153,15 @@ async function onPageChange(page: number) {
     await load(true);
 }
 
+function validatedFilterText() {
+    // there are no filters derived from the `filterText`
+    if (Object.keys(rawFilters.value).length === 0) {
+        return filterText.value;
+    }
+    // there are valid filters derived from the `filterText`
+    return workflowFilters.value.getFilterText(validFilters.value, true);
+}
+
 watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
     offset.value = 0;
     await load(true);
@@ -212,7 +169,7 @@ watch([filterText, sortBy, sortDesc, showBookmarked], async () => {
 
 onMounted(() => {
     if (router.currentRoute.query.owner) {
-        filterText.value = `${filterText.value} user:${router.currentRoute.query.owner}`.trim();
+        updateFilterValue("user", router.currentRoute.query.owner);
     }
     load();
 });
@@ -251,15 +208,14 @@ onMounted(() => {
                 id="workflow-list-filter"
                 name="workflows"
                 class="mb-2"
-                :filter-class="WorkflowFilters"
+                :filter-class="workflowFilters"
                 :filter-text.sync="filterText"
                 :loading="loading || overlay"
                 has-help
                 :placeholder="searchPlaceHolder"
-                :show-advanced.sync="showAdvanced"
-                @updateFilter="updateFilter">
+                :show-advanced.sync="showAdvanced">
                 <template v-slot:menu-help-text>
-                    <div v-html="helpHtml"></div>
+                    <div v-html="helpHtml(activeList)"></div>
                 </template>
             </FilterMenu>
 
@@ -274,7 +230,7 @@ onMounted(() => {
                             :title="!showDeleted ? 'Show deleted workflows' : 'Hide deleted workflows'"
                             :pressed="showDeleted"
                             variant="outline-primary"
-                            @click="onToggleDeleted">
+                            @click="updateFilterValue('deleted', true)">
                             <FontAwesomeIcon :icon="faTrash" fixed-width />
                             Show deleted
                         </BButton>
@@ -303,9 +259,25 @@ onMounted(() => {
             No workflows found. You may create or import new workflows using the buttons above.
         </BAlert>
 
-        <BAlert v-else-if="!loading && !overlay && noResults" id="no-workflow-found" variant="info" show>
-            No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
-        </BAlert>
+        <!-- There are either `noResults` or `invalidFilters` -->
+        <span v-else-if="!loading && !overlay && (noResults || Object.keys(invalidFilters).length > 0)">
+            <BAlert v-if="Object.keys(invalidFilters).length === 0" id="no-workflow-found" variant="info" show>
+                No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
+            </BAlert>
+
+            <BAlert v-else id="no-workflow-found-invalid" variant="danger" show>
+                <Heading h4 inline size="sm" class="flex-grow-1 mb-2">Invalid filters in query:</Heading>
+                <ul>
+                    <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
+                        <b>{{ invalidKey }}</b
+                        >: {{ value }}
+                    </li>
+                </ul>
+                <a href="javascript:void(0)" class="ui-link" @click="filterText = validatedFilterText()"
+                    >Remove invalid filters from query</a
+                >
+            </BAlert>
+        </span>
 
         <BOverlay
             v-else
@@ -322,7 +294,7 @@ onMounted(() => {
                 :grid-view="view === 'grid'"
                 :class="view === 'grid' ? 'grid-view' : 'list-view'"
                 @refreshList="load"
-                @tagClick="onTagClick" />
+                @tagClick="(tag) => updateFilterValue('tag', tag)" />
 
             <BPagination
                 v-if="!loading && totalWorkflows > limit"
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 60127464ee58..dd5f7247dc05 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -341,7 +341,7 @@ export default class Filtering<T> {
      * @returns Parsed filter text string
      * */
     getFilterText(filters: Record<string, T>, backendFormatted = false): string {
-        filters = this.getValidFilters(filters, backendFormatted);
+        filters = this.getValidFilters(filters, backendFormatted).validFilters;
         const hasDefaults = this.containsDefaults(filters);
 
         let newFilterText = "";
@@ -385,10 +385,10 @@ export default class Filtering<T> {
 
     /** Parses single text input into a dict of field->value pairs.
      * @param filterText Raw filter text string
-     * @param removeAny default: `true` Whether to remove default filters if the are set to `any`
+     * @param removeAny default: `true` Whether to remove default filters if they are set to `any`
      * @returns Filters as 2D array of of [field, value] pairs
      * */
-    getFiltersForText(filterText: string, removeAny = true): [string, T][] {
+    getFiltersForText(filterText: string, removeAny = true, validate = true): [string, T][] {
         const pairSplitRE = this.quoteStrings
             ? /[^\s'"]+(?:['"][^'"]*['"][^\s'"]*)*|(?:['"][^'"]*['"][^\s'"]*)+/g
             : /(\S+):(.*?)(?=\s+\S+:|$)/g;
@@ -414,8 +414,8 @@ export default class Filtering<T> {
                     const normalizedField = field?.split("-").join("_");
                     if (
                         normalizedField &&
-                        this.validFilters[normalizedField] &&
-                        this.validFilters[normalizedField]?.boolType !== "is"
+                        this.validFilters[normalizedField]?.boolType !== "is" &&
+                        ((!validate && normalizedField !== "is") || this.validFilters[normalizedField])
                     ) {
                         // removes quotation and applies lower-case to filter value
                         const newVal = this.quoteStrings ? (toLowerNoQuotes(value) as T) : (value as T);
@@ -430,7 +430,12 @@ export default class Filtering<T> {
                             result[normalizedField] = newVal;
                         }
                         hasMatches = true;
-                    } else if (value && field === "is" && elg === ":" && this.validFilters[value]?.boolType === "is") {
+                    } else if (
+                        value &&
+                        field === "is" &&
+                        elg === ":" &&
+                        (!validate || this.validFilters[value]?.boolType === "is")
+                    ) {
                         // handle `is:filter` syntax
                         result[value] = true as T;
                         hasMatches = true;
@@ -471,7 +476,7 @@ export default class Filtering<T> {
      * @returns Parsed `filterText` string with added/removed filter(s)
      */
     applyFiltersToText(filters: Record<string, T>, existingText: string, remove = false) {
-        let validFilters = this.getValidFilters(filters);
+        let { validFilters } = this.getValidFilters(filters);
         const existingFilters = Object.fromEntries(this.getFiltersForText(existingText, false));
         if (remove) {
             validFilters = omit(existingFilters, Object.keys(validFilters));
@@ -485,10 +490,11 @@ export default class Filtering<T> {
      *
      * @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"}})
+     * @returns a _valid_ filters object (e.g.: {hid: "3", name: "test"}}) and one with invalid filters
      */
     getValidFilters(filters: Record<string, T>, backendFormatted = false) {
         const validFilters: Record<string, T> = {};
+        const invalidFilters: Record<string, T> = {};
         Object.entries(filters).forEach(([key, value]) => {
             if (this.validFilters[key]?.type === "MultiTags" && Array.isArray(value)) {
                 const validValues = value
@@ -497,14 +503,22 @@ export default class Filtering<T> {
                 if (validValues.length > 0) {
                     validFilters[key] = validValues as T;
                 }
+                const invalidValues = value.filter(
+                    (v) => !validValues.includes(this.getConvertedValue(key, v, backendFormatted))
+                );
+                if (invalidValues.length > 0) {
+                    invalidFilters[key] = invalidValues as T;
+                }
             } else {
                 const validValue = this.getConvertedValue(key, value, backendFormatted);
                 if (validValue !== undefined) {
                     validFilters[key] = validValue;
+                } else {
+                    invalidFilters[key] = value;
                 }
             }
         });
-        return validFilters;
+        return { validFilters, invalidFilters };
     }
 
     /** Convert a valid filter key (`filter`/`filter-gt`) to alias filter key (`filter:`/`filter>`)