Revise buttons in ConfigTemplates, fill out remove functionality.

galaxyproject · May 15, 2024 · 36b51d2 · 36b51d2
1 parent 838004a
commit 36b51d2
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 24 deletions.
diff --git a/client/src/components/ConfigTemplates/InstanceDropdown.test.ts b/client/src/components/ConfigTemplates/InstanceDropdown.test.ts
@@ -18,7 +18,7 @@ describe("InstanceDropdown", () => {
             localVue,
         });
         const menu = wrapper.find(".dropdown-menu");
-        const links = menu.findAll("a");
+        const links = menu.findAll("button.dropdown-item");
         expect(links.length).toBe(2);
     });
 
@@ -34,7 +34,7 @@ describe("InstanceDropdown", () => {
             localVue,
         });
         const menu = wrapper.find(".dropdown-menu");
-        const links = menu.findAll("a");
+        const links = menu.findAll("button.dropdown-item");
         expect(links.length).toBe(3);
     });
 });
diff --git a/client/src/components/ConfigTemplates/InstanceDropdown.vue b/client/src/components/ConfigTemplates/InstanceDropdown.vue
@@ -2,7 +2,6 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 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";
 
 interface Props {
@@ -15,8 +14,6 @@ interface Props {
 
 library.add(faArrowUp, faCaretDown, faEdit, faTrash);
 
-const title = "";
-
 const router = useRouter();
 
 defineProps<Props>();
@@ -28,38 +25,38 @@ const emit = defineEmits<{
 
 <template>
     <div>
-        <BLink
-            v-b-tooltip.hover
-            :class="`${prefix}-instance-dropdown font-weight-bold`"
+        <button
+            id="instance-operations"
+            :class="`${prefix}-instance-dropdown`"
             data-toggle="dropdown"
-            :title="title"
             aria-haspopup="true"
-            aria-expanded="false">
-            <FontAwesomeIcon icon="caret-down" />
-            <span class="instance-dropdown-name">{{ name }}</span>
-        </BLink>
+            aria-expanded="false"
+            class="ui-link font-weight-bold text-nowrap">
+            <FontAwesomeIcon icon="caret-down" class="fa-lg" />
+            <span class="instance-dropdown-name font-weight-bold">{{ name }}</span>
+        </button>
         <div class="dropdown-menu" :aria-labelledby="`${prefix}-instance-dropdown`">
-            <a
+            <button
                 v-if="isUpgradable"
                 class="dropdown-item"
                 :href="routeUpgrade"
                 @keypress="router.push(routeUpgrade)"
                 @click.prevent="router.push(routeUpgrade)">
                 <FontAwesomeIcon icon="arrowUp" />
                 <span v-localize>Upgrade</span>
-            </a>
-            <a
+            </button>
+            <button
                 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')">
+            </button>
+            <button class="dropdown-item" @keypress="emit('remove')" @click.prevent="emit('remove')">
                 <FontAwesomeIcon icon="trash" />
                 <span v-localize>Remove instance</span>
-            </a>
+            </button>
         </div>
     </div>
 </template>
diff --git a/client/src/components/FileSources/Instances/InstanceDropdown.vue b/client/src/components/FileSources/Instances/InstanceDropdown.vue
@@ -4,6 +4,8 @@ import { computed } from "vue";
 import type { UserFileSourceModel } from "@/api/fileSources";
 import { useFileSourceTemplatesStore } from "@/stores/fileSourceTemplatesStore";
 
+import { hide } from "./services";
+
 import InstanceDropdown from "@/components/ConfigTemplates/InstanceDropdown.vue";
 
 const fileSourceTemplatesStore = useFileSourceTemplatesStore();
@@ -18,6 +20,15 @@ const routeUpgrade = computed(() => `/file_source_instances/${props.fileSource.i
 const isUpgradable = computed(() =>
     fileSourceTemplatesStore.canUpgrade(props.fileSource.template_id, props.fileSource.template_version)
 );
+
+async function onRemove() {
+    await hide(props.fileSource);
+    emit("entryRemoved");
+}
+
+const emit = defineEmits<{
+    (e: "entryRemoved"): void;
+}>();
 </script>
 
 <template>
@@ -26,5 +37,6 @@ const isUpgradable = computed(() =>
         :name="fileSource.name || ''"
         :is-upgradable="isUpgradable"
         :route-upgrade="routeUpgrade"
-        :route-edit="routeEdit" />
+        :route-edit="routeEdit"
+        @remove="onRemove" />
 </template>
diff --git a/client/src/components/FileSources/Instances/ManageIndex.vue b/client/src/components/FileSources/Instances/ManageIndex.vue
@@ -24,6 +24,10 @@ const fields = [NAME_FIELD, DESCRIPTION_FIELD, TYPE_FIELD, TEMPLATE_FIELD];
 const items = computed(() => fileSourceInstancesStore.getInstances);
 const loading = computed(() => fileSourceInstancesStore.loading);
 fileSourceInstancesStore.fetchInstances();
+
+function reload() {
+    fileSourceInstancesStore.fetchInstances();
+}
 </script>
 
 <template>
@@ -52,7 +56,7 @@ fileSourceInstancesStore.fetchInstances();
                 </b-alert>
             </template>
             <template v-slot:cell(name)="row">
-                <InstanceDropdown :file-source="row.item" />
+                <InstanceDropdown :file-source="row.item" @entryRemoved="reload" />
             </template>
             <template v-slot:cell(type)="row">
                 <FileSourceTypeSpan :type="row.item.type" />

diff --git a/client/src/components/FileSources/Instances/services.ts b/client/src/components/FileSources/Instances/services.ts
@@ -1,4 +1,12 @@
+import type { UserFileSourceModel } from "@/api/fileSources";
 import { fetcher } from "@/api/schema/fetcher";
 
 export const create = fetcher.path("/api/file_source_instances").method("post").create();
 export const update = fetcher.path("/api/file_source_instances/{user_file_source_id}").method("put").create();
+
+export async function hide(instance: UserFileSourceModel) {
+    const payload = { hidden: true };
+    const args = { user_file_source_id: String(instance?.id) };
+    const { data: fileSource } = await update({ ...args, ...payload });
+    return fileSource;
+}
diff --git a/client/src/components/Grid/GridElements/GridOperations.vue b/client/src/components/Grid/GridElements/GridOperations.vue
@@ -42,7 +42,7 @@ function hasCondition(conditionHandler: (rowData: RowData, config: GalaxyConfigu
             <FontAwesomeIcon icon="caret-down" class="fa-lg" />
             <span class="font-weight-bold">{{ title }}</span>
         </button>
-        <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
+        <div class="dropdown-menu" aria-labelledby="grid-operations">
             <span v-for="(operation, operationIndex) in operations" :key="operationIndex">
                 <button
                     v-if="operation && (!operation.condition || hasCondition(operation.condition))"

diff --git a/client/src/components/ObjectStore/Instances/InstanceDropdown.vue b/client/src/components/ObjectStore/Instances/InstanceDropdown.vue
@@ -23,8 +23,12 @@ const isUpgradable = computed(() =>
 
 async function onRemove() {
     await hide(props.objectStore);
-    console.log("HIDING!!!");
+    emit("entryRemoved");
 }
+
+const emit = defineEmits<{
+    (e: "entryRemoved"): void;
+}>();
 </script>
 
 <template>

diff --git a/client/src/components/ObjectStore/Instances/ManageIndex.vue b/client/src/components/ObjectStore/Instances/ManageIndex.vue
@@ -35,6 +35,10 @@ const allItems = computed<UserConcreteObjectStore[]>(() => objectStoreInstancesS
 const { activeInstances } = useFiltering(allItems);
 const loading = computed(() => objectStoreInstancesStore.loading);
 objectStoreInstancesStore.fetchInstances();
+
+function reload() {
+    objectStoreInstancesStore.fetchInstances();
+}
 </script>
 
 <template>
@@ -64,7 +68,7 @@ objectStoreInstancesStore.fetchInstances();
                 <ObjectStoreBadges size="1x" :badges="row.item.badges" />
             </template>
             <template v-slot:cell(name)="row">
-                <InstanceDropdown :object-store="row.item" />
+                <InstanceDropdown :object-store="row.item" @entryRemoved="reload" />
             </template>
             <template v-slot:cell(type)="row">
                 <ObjectStoreTypeSpan :type="row.item.type" />