From e3fe2d32559320405e2f873e9603c68fee8c2829 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 8 Feb 2024 10:18:14 -0500
Subject: [PATCH] Refactor ObjectStore button popover for reuse.

---
 .../ObjectStore/ObjectStoreSelectButton.vue   |  1 +
 .../ObjectStoreSelectButtonPopover.vue        | 19 ++++++++++++
 .../ObjectStore/SelectObjectStore.vue         | 31 +++++++------------
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/ObjectStore/ObjectStoreSelectButtonPopover.vue

diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButton.vue b/client/src/components/ObjectStore/ObjectStoreSelectButton.vue
index aefe72e32d77..7bca8f555e51 100644
--- a/client/src/components/ObjectStore/ObjectStoreSelectButton.vue
+++ b/client/src/components/ObjectStore/ObjectStoreSelectButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
+
 import { type ConcreteObjectStoreModel } from "@/api";
 
 import ObjectStoreBadges from "@/components/ObjectStore/ObjectStoreBadges.vue";
diff --git a/client/src/components/ObjectStore/ObjectStoreSelectButtonPopover.vue b/client/src/components/ObjectStore/ObjectStoreSelectButtonPopover.vue
new file mode 100644
index 000000000000..0e2815d46402
--- /dev/null
+++ b/client/src/components/ObjectStore/ObjectStoreSelectButtonPopover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { BPopover } from "bootstrap-vue";
+
+interface ObjectStoreSelectButtonPopoverProps {
+    target: string;
+    title: string;
+}
+
+defineProps<ObjectStoreSelectButtonPopoverProps>();
+
+const boundary = "window"; // don't warp the popover to squeeze it into this modal
+</script>
+
+<template>
+    <BPopover :target="target" triggers="hover" placement="rightbottom" :boundary="boundary">
+        <template v-slot:title>{{ title }}</template>
+        <slot />
+    </BPopover>
+</template>
diff --git a/client/src/components/ObjectStore/SelectObjectStore.vue b/client/src/components/ObjectStore/SelectObjectStore.vue
index 7bd6c4e5e7e1..fa71c773c305 100644
--- a/client/src/components/ObjectStore/SelectObjectStore.vue
+++ b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -4,9 +4,10 @@ import { computed, ref } from "vue";
 
 import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
+import ObjectStoreSelectButton from "./ObjectStoreSelectButton.vue";
+import ObjectStoreSelectButtonPopover from "./ObjectStoreSelectButtonPopover.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
-import ObjectStoreSelectButton from "./ObjectStoreSelectButton.vue";
 
 interface SelectObjectStoreProps {
     selectedObjectStoreId?: String | null;
@@ -21,11 +22,6 @@ const props = withDefaults(defineProps<SelectObjectStoreProps>(), {
     parentError: null,
 });
 
-const popoverProps = {
-    placement: "rightbottom",
-    boundary: "window", // don't warp the popover to squeeze it into this modal
-};
-
 const store = useObjectStoreStore();
 const { isLoading, loadErrorMessage, selectableObjectStores } = storeToRefs(store);
 
@@ -94,21 +90,16 @@ async function handleSubmit(preferredObjectStoreId: string) {
                     </p>
                 </b-col>
             </b-row>
-            <b-popover target="no-preferred-object-store-button" triggers="hover" v-bind="popoverProps">
-                <template v-slot:title
-                    ><span v-localize>{{ defaultOptionTitle }}</span></template
-                >
+            <ObjectStoreSelectButtonPopover target="no-preferred-object-store-button" :title="defaultOptionTitle">
                 <span v-localize>{{ defaultOptionDescription }}</span>
-            </b-popover>
-            <b-popover
-                v-for="object_store in selectableObjectStores"
-                :key="object_store.object_store_id"
-                :target="`preferred-object-store-button-${object_store.object_store_id}`"
-                triggers="hover"
-                v-bind="popoverProps">
-                <template v-slot:title>{{ object_store.name }}</template>
-                <DescribeObjectStore :what="forWhat" :storage-info="object_store"> </DescribeObjectStore>
-            </b-popover>
+            </ObjectStoreSelectButtonPopover>
+            <ObjectStoreSelectButtonPopover
+                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>
         </div>
     </div>
 </template>