From 5745a5c0dc61d55e05cded64ed0e935f9bb01070 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Apr 2024 14:51:24 -0500
Subject: [PATCH] remove `FilterMenuQuotaSource` and use `FilterMenuDropdown`
 instead

---
 client/src/components/Common/FilterMenu.vue   |  13 +--
 .../components/Common/FilterMenuDropdown.vue  |  94 ++++++++++++----
 .../Common/FilterMenuQuotaSource.vue          | 101 ------------------
 client/src/utils/filtering.ts                 |   2 +-
 4 files changed, 80 insertions(+), 130 deletions(-)
 delete mode 100644 client/src/components/Common/FilterMenuQuotaSource.vue

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 9fc5982054a9..0f0596e2f422 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -15,7 +15,6 @@ import FilterMenuDropdown from "@/components/Common/FilterMenuDropdown.vue";
 import FilterMenuInput from "@/components/Common/FilterMenuInput.vue";
 import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
 import FilterMenuObjectStore from "@/components/Common/FilterMenuObjectStore.vue";
-import FilterMenuQuotaSource from "@/components/Common/FilterMenuQuotaSource.vue";
 import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
 library.add(faAngleDoubleUp, faQuestion, faSearch);
@@ -260,15 +259,11 @@ function updateFilterText(newFilterText: string) {
                             :filter="getValidFilter(filter)"
                             :filters="filters"
                             @change="onOption" />
-                        <FilterMenuQuotaSource
-                            v-else-if="validFilters[filter]?.type == 'QuotaSource'"
-                            :name="filter"
-                            :filter="getValidFilter(filter)"
-                            :filters="filters"
-                            :identifier="identifier"
-                            @change="onOption" />
                         <FilterMenuDropdown
-                            v-else-if="validFilters[filter]?.type == 'Dropdown'"
+                            v-else-if="
+                                validFilters[filter]?.type == 'Dropdown' || validFilters[filter]?.type == 'QuotaSource'
+                            "
+                            :type="validFilters[filter]?.type"
                             :name="filter"
                             :error="errorForField(filter) || undefined"
                             :filter="getValidFilter(filter)"
diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
index b59d3986da8f..cdcfd41c4c5b 100644
--- a/client/src/components/Common/FilterMenuDropdown.vue
+++ b/client/src/components/Common/FilterMenuDropdown.vue
@@ -4,21 +4,31 @@ import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownItem, BInputGroup, BInputGroupAppend, BModal } from "bootstrap-vue";
 import { capitalize } from "lodash";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, type UnwrapRef, watch } from "vue";
 
-import { type ValidFilter } from "@/utils/filtering";
+import { QuotaUsage } from "@/components/User/DiskUsage/Quota/model";
+import { type FilterType, type ValidFilter } from "@/utils/filtering";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import { fetch } from "../User/DiskUsage/Quota/services";
+
+import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
 
 library.add(faQuestion);
 
-type FilterType = string | boolean | undefined;
+type QuotaUsageUnwrapped = UnwrapRef<QuotaUsage>;
+
+type FilterValue = QuotaUsageUnwrapped | string | boolean | undefined;
+
 type DatalistItem = { value: string; text: string };
 
 interface Props {
+    type?: FilterType;
     name: string;
     error?: string;
     filter: ValidFilter<any>;
     filters: {
-        [k: string]: FilterType;
+        [k: string]: FilterValue;
     };
     identifier: string;
 }
@@ -26,12 +36,25 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: FilterType): void;
+    (e: "change", name: string, value: FilterValue): void;
 }>();
 
-const propValue = computed<FilterType>(() => props.filters[props.name]);
+const propValue = computed<FilterValue>(() => props.filters[props.name]);
 
-const localValue = ref<FilterType>(propValue.value);
+const localValue = ref<FilterValue>(propValue.value);
+
+watch(
+    () => localValue.value,
+    () => {
+        emit("change", props.name, localValue.value);
+    }
+);
+watch(
+    () => propValue.value,
+    () => {
+        localValue.value = propValue.value;
+    }
+);
 
 // datalist refs
 const datalist = computed<(DatalistItem[] | string[]) | undefined>(() => props.filter.datalist);
@@ -56,20 +79,39 @@ function onHelp(_: string, value: string) {
     localValue.value = value;
 }
 
-watch(
-    () => localValue.value,
-    () => {
-        emit("change", props.name, localValue.value);
+// Quota Source refs and operations
+const quotaUsages = ref<QuotaUsage[]>([] as QuotaUsage[]);
+const errorMessage = ref<string>();
+async function loadQuotaUsages() {
+    try {
+        quotaUsages.value = await fetch();
+
+        // if the propValue is a string, find the corresponding QuotaUsage object and update the localValue
+        if (propValue.value && typeof propValue.value === "string") {
+            localValue.value = quotaUsages.value.find(
+                (quotaUsage) => props.filter.handler.converter!(quotaUsage) === propValue.value
+            );
+        }
+    } catch (e) {
+        errorMessage.value = errorMessageAsString(e);
     }
-);
-watch(
-    () => propValue.value,
-    () => {
-        localValue.value = propValue.value;
+}
+const hasMultipleQuotaSources = computed<boolean>(() => {
+    return !!(quotaUsages.value && quotaUsages.value.length > 1);
+});
+onMounted(async () => {
+    if (props.type === "QuotaSource") {
+        await loadQuotaUsages();
     }
-);
+});
+function isQuotaUsageVal(value: FilterValue): value is QuotaUsageUnwrapped {
+    return !!(value && value instanceof Object && "rawSourceLabel" in value);
+}
 
 const dropDownText = computed<string>(() => {
+    if (props.type === "QuotaSource" && isQuotaUsageVal(localValue.value)) {
+        return localValue.value.sourceLabel;
+    }
     if (localValue.value) {
         const stringMatch = stringDatalist.value.find((item) => item === localValue.value);
         const objectMatch = objectDatalist.value.find((item) => item.value === localValue.value);
@@ -82,13 +124,13 @@ const dropDownText = computed<string>(() => {
     return "(any)";
 });
 
-function setValue(val: string | undefined) {
+function setValue(val: string | QuotaUsage | undefined) {
     localValue.value = val;
 }
 </script>
 
 <template>
-    <div v-if="datalist">
+    <div v-if="datalist || hasMultipleQuotaSources">
         <small>Filter by {{ props.filter.placeholder }}:</small>
         <BInputGroup :id="`${identifier}-advanced-filter-${props.name}`" class="flex-nowrap">
             <BDropdown
@@ -119,6 +161,20 @@ function setValue(val: string | undefined) {
                         {{ listItem.text }}
                     </BDropdownItem>
                 </span>
+                <span v-else-if="props.type === 'QuotaSource'">
+                    <BDropdownItem
+                        v-for="quotaUsage in quotaUsages"
+                        :key="quotaUsage.id"
+                        href="#"
+                        @click="setValue(quotaUsage)">
+                        {{ quotaUsage.sourceLabel }}
+                        <QuotaUsageBar
+                            :quota-usage="quotaUsage"
+                            class="quota-usage-bar"
+                            :compact="true"
+                            :embedded="true" />
+                    </BDropdownItem>
+                </span>
             </BDropdown>
             <BInputGroupAppend>
                 <!-- append Help Modal toggle for filter if included -->
diff --git a/client/src/components/Common/FilterMenuQuotaSource.vue b/client/src/components/Common/FilterMenuQuotaSource.vue
deleted file mode 100644
index eaf57766055a..000000000000
--- a/client/src/components/Common/FilterMenuQuotaSource.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, type UnwrapRef, watch } from "vue";
-
-import { type QuotaUsage } from "@/components/User/DiskUsage/Quota/model";
-import { fetch } from "@/components/User/DiskUsage/Quota/services";
-import { ValidFilter } from "@/utils/filtering";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
-
-type QuotaUsageUnwrapped = UnwrapRef<QuotaUsage>;
-
-type FilterType = QuotaUsageUnwrapped | string | boolean | undefined;
-
-interface Props {
-    name: string;
-    filter: ValidFilter<any>;
-    filters: {
-        [k: string]: FilterType;
-    };
-    identifier: string;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-    (e: "change", name: string, value: FilterType): void;
-}>();
-
-const propValue = computed<FilterType>(() => props.filters[props.name]);
-
-const localValue = ref<FilterType>(propValue.value);
-
-watch(
-    () => localValue.value,
-    () => {
-        emit("change", props.name, localValue.value);
-    }
-);
-watch(
-    () => propValue.value,
-    () => {
-        localValue.value = propValue.value;
-    }
-);
-
-const quotaUsages = ref<QuotaUsage[]>([] as QuotaUsage[]);
-const errorMessage = ref<string>();
-
-async function loadQuotaUsages() {
-    try {
-        quotaUsages.value = await fetch();
-    } catch (e) {
-        errorMessage.value = errorMessageAsString(e);
-    }
-}
-
-const hasMultipleQuotaSources = computed<boolean>(() => {
-    return !!(quotaUsages.value && quotaUsages.value.length > 1);
-});
-
-onMounted(async () => {
-    await loadQuotaUsages();
-});
-
-function isQuotaUsage(value: FilterType): value is QuotaUsageUnwrapped {
-    return !!(value && value instanceof Object && "rawSourceLabel" in value);
-}
-
-const dropDownText = computed<string>(() => {
-    if (isQuotaUsage(localValue.value)) {
-        return localValue.value.sourceLabel;
-    } else {
-        return "(any)";
-    }
-});
-
-function setValue(val: QuotaUsage | undefined) {
-    localValue.value = val;
-}
-</script>
-
-<template>
-    <div v-if="hasMultipleQuotaSources">
-        <small>Filter by {{ props.filter.placeholder }}:</small>
-        <b-input-group :id="`${identifier}-advanced-filter-${props.name}`">
-            <b-dropdown :text="dropDownText" block class="m-2" size="sm" boundary="window">
-                <b-dropdown-item href="#" @click="setValue(undefined)"><i>(any)</i></b-dropdown-item>
-
-                <b-dropdown-item
-                    v-for="quotaUsage in quotaUsages"
-                    :key="quotaUsage.id"
-                    href="#"
-                    @click="setValue(quotaUsage)">
-                    {{ quotaUsage.sourceLabel }}
-                    <QuotaUsageBar :quota-usage="quotaUsage" class="quota-usage-bar" :compact="true" :embedded="true" />
-                </b-dropdown-item>
-            </b-dropdown>
-        </b-input-group>
-    </div>
-</template>
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 26b144eee659..686aa8f7f4f2 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -40,7 +40,7 @@ export type ErrorType = {
 type OperatorForAlias = typeof operatorForAlias;
 export type Alias = keyof OperatorForAlias;
 type Operator = OperatorForAlias[Alias];
-type FilterType =
+export type FilterType =
     | typeof String
     | typeof Number
     | typeof Boolean