From 569e5d93906ceec06abd8abc1b14b4381e3ad82f Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sat, 10 Feb 2024 16:58:39 -0500
Subject: [PATCH] Higher level abstractions for building object store
 components.

---
 .../Dataset/DatasetStorage/RelocateDialog.vue | 28 ++++++++-----------
 .../ObjectStore/ObjectStoreSelectButton.vue   |  2 ++
 ...ObjectStoreSelectButtonDescribePopover.vue | 26 +++++++++++++++++
 .../ObjectStore/SelectObjectStore.vue         | 14 +++++-----
 4 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue

diff --git a/client/src/components/Dataset/DatasetStorage/RelocateDialog.vue b/client/src/components/Dataset/DatasetStorage/RelocateDialog.vue
index 4fab527c72dd..e0823d4b9bd5 100644
--- 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
index 7bca8f555e51..7a7454f25184 100644
--- 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>();
@@ -21,6 +22,7 @@ const emit = defineEmits<{
 <template>
     <BButton
         :variant="variant"
+        :id="`${idPrefix}-object-store-button-${objectStore.object_store_id}`"
         :data-object-store-id="objectStore.object_store_id"
         @click="emit('click', objectStore.object_store_id)"
         >{{ objectStore.name }}
diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue b/client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue
new file mode 100644
index 000000000000..60b6d6574cd6
--- /dev/null
+++ b/client/src/components/ObjectStore/ObjectStoreSelectButtonDescribePopover.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { type ConcreteObjectStoreModel } from "@/api";
+import ObjectStoreSelectButtonPopover from "./ObjectStoreSelectButtonPopover.vue";
+import DescribeObjectStore from "./DescribeObjectStore.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
index fa71c773c305..cd92e22866ba 100644
--- a/client/src/components/ObjectStore/SelectObjectStore.vue
+++ b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -6,8 +6,8 @@ import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
 import ObjectStoreSelectButton from "./ObjectStoreSelectButton.vue";
 import ObjectStoreSelectButtonPopover from "./ObjectStoreSelectButtonPopover.vue";
+import ObjectStoreSelectButtonDescribePopover from "./ObjectStoreSelectButtonDescribePopover.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
 
 interface SelectObjectStoreProps {
     selectedObjectStoreId?: String | null;
@@ -76,7 +76,7 @@ async function handleSubmit(preferredObjectStoreId: string) {
                         >
                         <ObjectStoreSelectButton
                             v-for="objectStore in selectableObjectStores"
-                            :id="`preferred-object-store-button-${objectStore.object_store_id}`"
+                            id-prefix="preferred"
                             :key="objectStore.object_store_id"
                             :object-store="objectStore"
                             :variant="variant(objectStore.object_store_id)"
@@ -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>