Merge pull request #19992 from davelopez/24.2_fix_user_object_stores_updates

[24.2] Update selectable object stores after adding or editing them

client/src/components/ConfigTemplates/useConfigurationTesting.ts

@@ -157,7 +157,12 @@ export function useConfigurationTemplateEdit<T extends TemplateSummary, R extend
     template: Ref<T | null>,
     testUpdateUrl: TestUpdateUrl,
     updateUrl: UpdateUrl,
-    useRouting: InstanceRoutingComposableType
+    useRouting: InstanceRoutingComposableType,
+    /**
+     * Callback to be called when the object store is updated.
+     * By default, no action is taken.
+     */
+    onUpdated: (result: R) => void = (__: R) => {}
 ) {
     const { testRunning, testResults } = useConfigurationTesting();
     const showForceActionButton = ref<boolean>(false);
@@ -165,6 +170,7 @@ export function useConfigurationTemplateEdit<T extends TemplateSummary, R extend
     const { goToIndex } = useRouting();
 
     async function onUpdate(objectStore: R) {
+        onUpdated(objectStore);
         const message = `Updated ${what} ${objectStore.name}`;
         goToIndex({ message });
     }

client/src/components/ObjectStore/Instances/CreateInstance.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
 import { useObjectStoreTemplatesStore } from "@/stores/objectStoreTemplatesStore";
 
 import { useInstanceRouting } from "./routing";
@@ -12,6 +13,9 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 interface Props {
     templateId: string;
 }
+
+const { addOrUpdateObjectStore } = useObjectStoreStore();
+
 const objectStoreTemplatesStore = useObjectStoreTemplatesStore();
 objectStoreTemplatesStore.fetchTemplates();
 
@@ -21,6 +25,7 @@ const props = defineProps<Props>();
 const template = computed(() => objectStoreTemplatesStore.getLatestTemplate(props.templateId));
 
 async function onCreated(objectStore: UserConcreteObjectStore) {
+    addOrUpdateObjectStore(objectStore);
     const message = `Created storage location ${objectStore.name}`;
     goToIndex({ message });
 }

client/src/components/ObjectStore/Instances/EditInstance.vue

@@ -3,6 +3,7 @@ import { BTab, BTabs } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useConfigurationTemplateEdit } from "@/components/ConfigTemplates/useConfigurationTesting";
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
 import { useInstanceAndTemplate } from "./instance";
 import { useInstanceRouting } from "./routing";
@@ -16,6 +17,8 @@ interface Props {
     instanceId: string;
 }
 
+const { addOrUpdateObjectStore } = useObjectStoreStore();
+
 const props = defineProps<Props>();
 const { instance, template } = useInstanceAndTemplate(ref(props.instanceId));
 
@@ -35,7 +38,15 @@ const {
     testResults,
     showForceActionButton,
     submitTitle,
-} = useConfigurationTemplateEdit("storage location", instance, template, editTestUrl, editUrl, useInstanceRouting);
+} = useConfigurationTemplateEdit(
+    "storage location",
+    instance,
+    template,
+    editTestUrl,
+    editUrl,
+    useInstanceRouting,
+    addOrUpdateObjectStore
+);
 </script>
 <template>
     <div>

client/src/stores/objectStoreStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+import { computed, ref, set } from "vue";
 
 import { type ConcreteObjectStoreModel } from "@/api";
 import { getSelectableObjectStores } from "@/api/objectStores";
@@ -32,6 +32,24 @@ export const useObjectStoreStore = defineStore("objectStoreStore", () => {
         return objectStore?.name ?? null;
     }
 
+    /**
+     * Convenience function to add or update an object store in the list of selectable object stores without
+     * reloading it from the server.
+     * @param objectStore The object store to add or update
+     */
+    function addOrUpdateObjectStore(objectStore: ConcreteObjectStoreModel) {
+        if (selectableObjectStores.value) {
+            const index = selectableObjectStores.value.findIndex(
+                (store) => store.object_store_id === objectStore.object_store_id
+            );
+            if (index !== -1) {
+                set(selectableObjectStores.value, index, objectStore);
+            } else {
+                selectableObjectStores.value.push(objectStore);
+            }
+        }
+    }
+
     loadObjectStores();
 
     return {
@@ -40,5 +58,6 @@ export const useObjectStoreStore = defineStore("objectStoreStore", () => {
         loadErrorMessage,
         selectableObjectStores,
         getObjectStoreNameById,
+        addOrUpdateObjectStore,
     };
 });