convert WorkflowSearch to typescript

client/src/components/Panels/utilities.test.js

@@ -1,6 +1,7 @@
 import toolsList from "components/ToolsView/testData/toolsList";
 import {
     createWhooshQuery,
+    createWorkflowQuery,
     determineWidth,
     filterTools,
     filterToolSections,
@@ -94,3 +95,17 @@ describe("test helpers in tool searching utilities and panel handling", () => {
         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");
+    });
+});

client/src/components/Workflow/WorkflowSearch.vue

@@ -1,23 +1,83 @@
+<script setup lang="ts">
+import { ref, type Ref } from "vue";
+import { useRouter } from "vue-router/composables";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
+import _l from "@/utils/localization";
+import { createWorkflowQuery } from "@/components/Panels/utilities";
+
+const router = useRouter();
+
+type FilterSettings = {
+    name?: string;
+    tag?: string;
+    published?: boolean;
+    shared_with_me?: boolean;
+    deleted?: boolean;
+};
+
+const emit = defineEmits<{
+    (e: "onQuery", query: string): void;
+    (e: "update:show-advanced", showAdvanced: boolean): void;
+}>();
+
+const props = defineProps({
+    enableAdvanced: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    placeholder: { type: String, default: _l("search workflows") },
+    query: { type: String, default: null },
+    showAdvanced: { type: Boolean, default: false },
+});
+
+const favorites = ["#favs", "#favorites", "#favourites"];
+const options = [
+    { text: "Yes", value: true },
+    { text: "No", value: false },
+];
+
+const filterSettings: Ref<FilterSettings> = ref({
+    published: false,
+    shared: false,
+    deleted: false,
+});
+
+function checkQuery(q: string) {
+    filterSettings.value.name = q;
+    if (favorites.includes(q)) {
+        emit("onQuery", "#favorites");
+    } else {
+        emit("onQuery", q);
+    }
+}
+function onToggle(toggleAdvanced: boolean) {
+    emit("update:show-advanced", toggleAdvanced);
+}
+function onSearch() {
+    const query = createWorkflowQuery(filterSettings.value);
+    const path = "/workflows/list";
+    const routerParams = query ? { path, query: { query } } : { path };
+    router.push(routerParams);
+}
+</script>
 <template>
     <div>
-        <small v-if="showAdvanced">Filter by name:</small>
+        <small v-if="props.showAdvanced">Filter by name:</small>
         <DelayedInput
-            :class="!showAdvanced && 'mb-3'"
-            :query="query"
+            :class="!props.showAdvanced && 'mb-3'"
+            :query="props.query"
             :delay="100"
-            :loading="loading"
-            :show-advanced="showAdvanced"
-            :enable-advanced="enableAdvanced"
-            :placeholder="showAdvanced ? 'any name' : placeholder"
+            :loading="props.loading"
+            :show-advanced="props.showAdvanced"
+            :enable-advanced="props.enableAdvanced"
+            :placeholder="props.showAdvanced ? 'any name' : props.placeholder"
             @change="checkQuery"
             @onToggle="onToggle" />
         <div
-            v-if="showAdvanced"
+            v-if="props.showAdvanced"
             description="advanced workflow filters"
             @keyup.enter="onSearch"
             @keyup.esc="onToggle(false)">
             <small class="mt-1">Filter by tag:</small>
-            <b-form-input v-model="filterSettings['tag']" size="sm" placeholder="any tag" />
+            <b-form-input v-model="filterSettings.tag" size="sm" placeholder="any tag" />
             <small>Published:</small>
             <b-form-group class="m-0">
                 <b-form-radio-group
@@ -30,7 +90,7 @@
             <small>Shared:</small>
             <b-form-group class="m-0">
                 <b-form-radio-group
-                    v-model="filterSettings.shared"
+                    v-model="filterSettings.shared_with_me"
                     :options="options"
                     size="sm"
                     buttons
@@ -48,81 +108,13 @@
             <div class="mt-3">
                 <b-button class="mr-1" size="sm" variant="primary" @click="onSearch">
                     <icon icon="search" />
-                    <span>{{ "Search" | localize }}</span>
+                    <span>{{ _l("Search") }}</span>
                 </b-button>
                 <b-button size="sm" @click="onToggle(false)">
                     <icon icon="redo" />
-                    <span>{{ "Cancel" | localize }}</span>
+                    <span>{{ _l("Cancel") }}</span>
                 </b-button>
             </div>
         </div>
     </div>
 </template>
-
-<script>
-import DelayedInput from "components/Common/DelayedInput";
-import _l from "utils/localization";
-import { createWorkflowQuery } from "components/Panels/utilities";
-
-export default {
-    name: "WorkflowSearch",
-    components: {
-        DelayedInput,
-    },
-    props: {
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        enableAdvanced: {
-            type: Boolean,
-            default: false,
-        },
-        placeholder: {
-            type: String,
-            default: _l("search workflows"),
-        },
-        query: {
-            type: String,
-            default: null,
-        },
-        showAdvanced: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            favorites: ["#favs", "#favorites", "#favourites"],
-            filterSettings: {
-                published: false,
-                shared: false,
-                deleted: false,
-            },
-            options: [
-                { text: "Yes", value: true },
-                { text: "No", value: false },
-            ],
-        };
-    },
-    methods: {
-        checkQuery(q) {
-            this.filterSettings["name"] = q;
-            if (this.favorites.includes(q)) {
-                this.$emit("onQuery", "#favorites");
-            } else {
-                this.$emit("onQuery", q);
-            }
-        },
-        onToggle(toggleAdvanced) {
-            this.$emit("update:show-advanced", toggleAdvanced);
-        },
-        onSearch() {
-            const query = createWorkflowQuery(this.filterSettings);
-            const path = "/workflows/list";
-            const routerParams = query ? { path, query: { query } } : { path };
-            this.$router.push(routerParams);
-        },
-    },
-};
-</script>