More explicit typing around form stuff in config template management.

Add URLs where I have them in the dropdown.
galaxyproject · May 15, 2024 · 838004a · 838004a
1 parent 170fab7
commit 838004a
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 22 deletions.
diff --git a/client/src/components/ConfigTemplates/InstanceDropdown.vue b/client/src/components/ConfigTemplates/InstanceDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUp, faCaretDown, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
@@ -13,7 +13,7 @@ interface Props {
     isUpgradable: boolean;
 }
 
-library.add(faCaretDown);
+library.add(faArrowUp, faCaretDown, faEdit, faTrash);
 
 const title = "";
 
@@ -42,17 +42,22 @@ const emit = defineEmits<{
             <a
                 v-if="isUpgradable"
                 class="dropdown-item"
+                :href="routeUpgrade"
                 @keypress="router.push(routeUpgrade)"
                 @click.prevent="router.push(routeUpgrade)">
-                <span class="fa fa-edit fa-fw mr-1" />
+                <FontAwesomeIcon icon="arrowUp" />
                 <span v-localize>Upgrade</span>
             </a>
-            <a class="dropdown-item" @keypress="router.push(routeEdit)" @click.prevent="router.push(routeEdit)">
-                <span class="fa fa-edit fa-fw mr-1" />
+            <a
+                class="dropdown-item"
+                :href="routeEdit"
+                @keypress="router.push(routeEdit)"
+                @click.prevent="router.push(routeEdit)">
+                <FontAwesomeIcon icon="edit" />
                 <span v-localize>Edit configuration</span>
             </a>
             <a class="dropdown-item" @keypress="emit('remove')" @click.prevent="emit('remove')">
-                <span class="fa fa-edit fa-fw mr-1" />
+                <FontAwesomeIcon icon="trash" />
                 <span v-localize>Remove instance</span>
             </a>
         </div>

diff --git a/client/src/components/ConfigTemplates/InstanceForm.vue b/client/src/components/ConfigTemplates/InstanceForm.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
 
-import { FormEntry } from "./formUtil";
+import { type FormEntry } from "./formUtil";
 
 import FormCard from "@/components/Form/FormCard.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
     title: string;
-    inputs: Array<FormEntry> | null; // not fully reactive so make sure to not mutate this array
+    inputs?: Array<FormEntry>; // not fully reactive so make sure to not mutate this array
     submitTitle: string;
     loadingMessage: string;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    inputs: undefined,
+});
+
 const emit = defineEmits<{
     (e: "onSubmit", formData: any): void;
 }>();
@@ -31,7 +34,7 @@ async function handleSubmit() {
 </script>
 <template>
     <div>
-        <LoadingSpan v-if="inputs == null" :message="loadingMessage" />
+        <LoadingSpan v-if="inputs == undefined" :message="loadingMessage" />
         <div v-else>
             <FormCard :title="title">
                 <template v-slot:body>

diff --git a/client/src/components/FileSources/Instances/EditInstance.vue b/client/src/components/FileSources/Instances/EditInstance.vue
@@ -3,7 +3,7 @@ import { BTab, BTabs } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { UserFileSourceModel } from "@/api/fileSources";
-import { editFormDataToPayload, editTemplateForm } from "@/components/ConfigTemplates/formUtil";
+import { editFormDataToPayload, editTemplateForm, type FormEntry } from "@/components/ConfigTemplates/formUtil";
 
 import { useInstanceAndTemplate } from "./instance";
 import { useInstanceRouting } from "./routing";
@@ -19,13 +19,13 @@ interface Props {
 const props = defineProps<Props>();
 const { instance, template } = useInstanceAndTemplate(ref(props.instanceId));
 
-const inputs = computed(() => {
+const inputs = computed<Array<FormEntry> | undefined>(() => {
     template.value;
     instance.value;
     if (template.value && instance.value) {
         return editTemplateForm(template.value, "storage location", instance.value);
     }
-    return null;
+    return undefined;
 });
 
 const title = computed(() => `Edit File Source ${instance.value?.name} Settings`);

diff --git a/client/src/components/FileSources/Instances/UpgradeForm.vue b/client/src/components/FileSources/Instances/UpgradeForm.vue
@@ -3,7 +3,7 @@ import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { FileSourceTemplateSummary, UserFileSourceModel } from "@/api/fileSources";
-import { upgradeForm, upgradeFormDataToPayload } from "@/components/ConfigTemplates/formUtil";
+import { type FormEntry, upgradeForm, upgradeFormDataToPayload } from "@/components/ConfigTemplates/formUtil";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import { useInstanceRouting } from "./routing";
@@ -19,7 +19,7 @@ interface Props {
 const error = ref<string | null>(null);
 const props = defineProps<Props>();
 
-const inputs = computed<Array<any> | null>(() => {
+const inputs = computed<Array<FormEntry> | undefined>(() => {
     const realizedInstance: UserFileSourceModel = props.instance;
     const realizedLatestTemplate = props.latestTemplate;
     const form = upgradeForm(realizedLatestTemplate, realizedInstance);

diff --git a/client/src/components/ObjectStore/Instances/CreateForm.vue b/client/src/components/ObjectStore/Instances/CreateForm.vue
@@ -2,7 +2,7 @@
 import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import { createFormDataToPayload, createTemplateForm } from "@/components/ConfigTemplates/formUtil";
+import { createFormDataToPayload, createTemplateForm, type FormEntry } from "@/components/ConfigTemplates/formUtil";
 import type { UserConcreteObjectStore } from "@/components/ObjectStore/Instances/types";
 import type { ObjectStoreTemplateSummary } from "@/components/ObjectStore/Templates/types";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -20,7 +20,7 @@ const title = "Create a new storage location for your data";
 const submitTitle = "Submit";
 const loadingMessage = "Loading storage location template and instance information";
 
-const inputs = computed(() => {
+const inputs = computed<Array<FormEntry>>(() => {
     return createTemplateForm(props.template, "storage location");
 });
 

diff --git a/client/src/components/ObjectStore/Instances/EditInstance.vue b/client/src/components/ObjectStore/Instances/EditInstance.vue
@@ -2,7 +2,7 @@
 import { BTab, BTabs } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import { editFormDataToPayload, editTemplateForm } from "@/components/ConfigTemplates/formUtil";
+import { editFormDataToPayload, editTemplateForm, type FormEntry } from "@/components/ConfigTemplates/formUtil";
 
 import { useInstanceAndTemplate } from "./instance";
 import { useInstanceRouting } from "./routing";
@@ -19,13 +19,13 @@ interface Props {
 const props = defineProps<Props>();
 const { instance, template } = useInstanceAndTemplate(ref(props.instanceId));
 
-const inputs = computed(() => {
+const inputs = computed<Array<FormEntry> | undefined>(() => {
     template.value;
     instance.value;
     if (template.value && instance.value) {
         return editTemplateForm(template.value, "storage location", instance.value);
     }
-    return null;
+    return undefined;
 });
 
 const title = computed(() => `Edit Storage Location ${instance.value?.name} Settings`);

diff --git a/client/src/components/ObjectStore/Instances/UpgradeForm.vue b/client/src/components/ObjectStore/Instances/UpgradeForm.vue
@@ -2,7 +2,7 @@
 import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import { upgradeForm, upgradeFormDataToPayload } from "@/components/ConfigTemplates/formUtil";
+import { type FormEntry, upgradeForm, upgradeFormDataToPayload } from "@/components/ConfigTemplates/formUtil";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import type { ObjectStoreTemplateSummary } from "../Templates/types";
@@ -20,7 +20,7 @@ interface Props {
 const error = ref<string | null>(null);
 const props = defineProps<Props>();
 
-const inputs = computed<Array<any> | null>(() => {
+const inputs = computed<Array<FormEntry> | undefined>(() => {
     const realizedInstance: UserConcreteObjectStore = props.instance;
     const realizedLatestTemplate = props.latestTemplate;
     const form = upgradeForm(realizedLatestTemplate, realizedInstance);