Higher level abstractions for building object store components.

jmchilton · Feb 12, 2024 · 62ad548 · 62ad548
1 parent f1fc9fc
commit 62ad548
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 23 deletions.
diff --git a/client/src/components/Dataset/DatasetStorage/RelocateDialog.vue b/client/src/components/Dataset/DatasetStorage/RelocateDialog.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ConcreteObjectStoreModel } from "@/api";
 
-import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
 import ObjectStoreSelectButton from "@/components/ObjectStore/ObjectStoreSelectButton.vue";
-import ObjectStoreSelectButtonPopover from "@/components/ObjectStore/ObjectStoreSelectButtonPopover.vue";
+import ObjectStoreSelectButtonDescribePopover from "@/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue";
 
 interface RelocateProps {
     fromObjectStore: ConcreteObjectStoreModel;
@@ -25,8 +24,8 @@ const toWhat = "This dataset will be relocated to";
         <p>Relocate the dataset's current object store of:</p>
         <b-button-group vertical size="lg" class="select-button-group">
             <ObjectStoreSelectButton
-                :id="`swap-target-object-store-button-${fromObjectStore.object_store_id}`"
                 :key="fromObjectStore.object_store_id"
+                id-prefix="swap-target"
                 class="swap-target-object-store-select-button"
                 variant="info"
                 :object-store="fromObjectStore" />
@@ -35,26 +34,23 @@ const toWhat = "This dataset will be relocated to";
         <b-button-group vertical size="lg" class="select-button-group">
             <ObjectStoreSelectButton
                 v-for="objectStore in targetObjectStores"
-                :id="`swap-target-object-store-button-${objectStore.object_store_id}`"
                 :key="objectStore.object_store_id"
+                id-prefix="swap-target"
                 class="swap-target-object-store-select-button"
-                :data-object-store-id="objectStore.object_store_id"
                 variant="outline-primary"
-                :objectStore="objectStore"
+                :object-store="objectStore"
                 @click="emit('relocate', objectStore.object_store_id)" />
         </b-button-group>
-        <ObjectStoreSelectButtonPopover
-            :target="`swap-target-object-store-button-${fromObjectStore.object_store_id}`"
-            :title="fromObjectStore.name">
-            <DescribeObjectStore :what="fromWhat" :storage-info="fromObjectStore"> </DescribeObjectStore>
-        </ObjectStoreSelectButtonPopover>
-        <ObjectStoreSelectButtonPopover
+        <ObjectStoreSelectButtonDescribePopover
+            id-prefix="swap-target"
+            :what="fromWhat"
+            :object-store="fromObjectStore" />
+        <ObjectStoreSelectButtonDescribePopover
             v-for="objectStore in targetObjectStores"
             :key="objectStore.object_store_id"
-            :target="`swap-target-object-store-button-${objectStore.object_store_id}`"
-            :title="objectStore.name">
-            <DescribeObjectStore :what="toWhat" :storage-info="objectStore"> </DescribeObjectStore>
-        </ObjectStoreSelectButtonPopover>
+            id-prefix="swap-target"
+            :what="toWhat"
+            :object-store="objectStore" />
     </div>
 </template>
 

diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButton.vue b/client/src/components/ObjectStore/ObjectStoreSelectButton.vue
@@ -9,6 +9,7 @@ import ProvidedQuotaSourceUsageBar from "@/components/User/DiskUsage/Quota/Provi
 interface ObjectStoreSelectButtonProps {
     objectStore: ConcreteObjectStoreModel;
     variant: string;
+    idPrefix: string;
 }
 
 defineProps<ObjectStoreSelectButtonProps>();
@@ -20,6 +21,7 @@ const emit = defineEmits<{
 
 <template>
     <BButton
+        :id="`${idPrefix}-object-store-button-${objectStore.object_store_id}`"
         :variant="variant"
         :data-object-store-id="objectStore.object_store_id"
         @click="emit('click', objectStore.object_store_id)"

diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue b/client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { type ConcreteObjectStoreModel } from "@/api";
+
+import DescribeObjectStore from "./DescribeObjectStore.vue";
+import ObjectStoreSelectButtonPopover from "./ObjectStoreSelectButtonPopover.vue";
+
+interface ObjectStoreSelectButtonPopoverDescribeProps {
+    idPrefix: string;
+    what: string;
+    objectStore: ConcreteObjectStoreModel;
+}
+
+const props = defineProps<ObjectStoreSelectButtonPopoverDescribeProps>();
+
+const target = computed(() => {
+    return `${props.idPrefix}-object-store-button-${props.objectStore.object_store_id}`;
+});
+const title = computed(() => {
+    return props.objectStore.name;
+});
+</script>
+
+<template>
+    <ObjectStoreSelectButtonPopover :target="target" :title="title">
+        <DescribeObjectStore :what="what" :storage-info="objectStore"> </DescribeObjectStore>
+    </ObjectStoreSelectButtonPopover>
+</template>
diff --git a/client/src/components/ObjectStore/SelectObjectStore.vue b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -5,9 +5,9 @@ import { computed, ref } from "vue";
 import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
 import ObjectStoreSelectButton from "./ObjectStoreSelectButton.vue";
+import ObjectStoreSelectButtonDescribePopover from "./ObjectStoreSelectButtonDescribePopover.vue";
 import ObjectStoreSelectButtonPopover from "./ObjectStoreSelectButtonPopover.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
 
 interface SelectObjectStoreProps {
     selectedObjectStoreId?: String | null;
@@ -76,8 +76,8 @@ async function handleSubmit(preferredObjectStoreId: string) {
                         >
                         <ObjectStoreSelectButton
                             v-for="objectStore in selectableObjectStores"
-                            :id="`preferred-object-store-button-${objectStore.object_store_id}`"
                             :key="objectStore.object_store_id"
+                            id-prefix="preferred"
                             :object-store="objectStore"
                             :variant="variant(objectStore.object_store_id)"
                             class="preferred-object-store-select-button"
@@ -93,13 +93,13 @@ async function handleSubmit(preferredObjectStoreId: string) {
             <ObjectStoreSelectButtonPopover target="no-preferred-object-store-button" :title="defaultOptionTitle">
                 <span v-localize>{{ defaultOptionDescription }}</span>
             </ObjectStoreSelectButtonPopover>
-            <ObjectStoreSelectButtonPopover
+            <ObjectStoreSelectButtonDescribePopover
                 v-for="objectStore in selectableObjectStores"
                 :key="objectStore.object_store_id"
-                :target="`preferred-object-store-button-${objectStore.object_store_id}`"
-                :title="objectStore.name">
-                <DescribeObjectStore :what="forWhat" :storage-info="objectStore"> </DescribeObjectStore>
-            </ObjectStoreSelectButtonPopover>
+                id-prefix="preferred"
+                :what="forWhat"
+                :object-store="objectStore">
+            </ObjectStoreSelectButtonDescribePopover>
         </div>
     </div>
 </template>