feat(kong): add loading symbol to data store delete button

components/KeycloakAuth.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const { loggedIn, user, login, logout } = useOidcAuth();
-console.log(user.value);
 
 async function customLogout() {
   await logout();

components/data-stores/ResourceManagerTabs.vue

@@ -7,7 +7,7 @@ import {
   getDataStores,
   getProjects,
 } from "~/composables/useAPIFetch";
-import type { DetailedAnalysis, Project, Route } from "~/services/Api";
+import type { DetailedAnalysis, Project, Route, Service } from "~/services/Api";
 
 const availableDataStores = ref();
 const availableProjects = ref();
@@ -42,13 +42,23 @@ watch(analyses, (parsedAnalyses) => {
     return { name: analysis.name, id: analysis.id };
   });
 });
+
+function updateDataStores(newDataStoreCreation: Service) {
+  const newDataStoreEntry = {
+    name: newDataStoreCreation.name,
+    id: newDataStoreCreation.id,
+  };
+  availableDataStores.value = availableDataStores.value.push(newDataStoreEntry);
+  console.log(availableDataStores.value);
+  return;
+}
 </script>
 
 <template>
   <div class="card tabCard">
     <TabView>
       <TabPanel header="Create a Data Store">
-        <DataStoreCreator />
+        <DataStoreCreator @updatedRow="updateDataStores" />
       </TabPanel>
       <TabPanel
         header="Bind a Project to a Data Store"

components/data-stores/managers/DataStoreCreator.vue

@@ -12,6 +12,8 @@ const protocol = ref("http");
 
 const loading = ref(false);
 
+const emit = defineEmits(["newDataStore"]);
+
 const acceptedProtocols = ref([
   "grpc",
   "grpcs",
@@ -47,8 +49,9 @@ async function onSubmitCreateDataStore() {
     }
   }
   loading.value = true;
-  const { status } = await createDataStore(dataStoreProps);
+  const { data: newDataStore, status } = await createDataStore(dataStoreProps);
   created.value = status.value;
+  emit("newDataStore", newDataStore.value);
   loading.value = false;
 }
 </script>

components/data-stores/tables/DetailedDataStoreTable.vue

@@ -4,14 +4,33 @@ import { useConfirm } from "primevue/useconfirm";
 import type { DetailedService } from "~/services/Api";
 
 const confirm = useConfirm();
+const toast = useToast();
+const deleteLoading = ref(false);
 
 const props = defineProps({
   stores: Array<DetailedService>,
   loading: Boolean,
 });
 
-function onConfirmDeleteDataStore(dsName: string) {
-  deleteDataStore(dsName);
+async function onConfirmDeleteDataStore(dsName: string) {
+  deleteLoading.value = true;
+  const { status } = await deleteDataStore(dsName);
+  if (status.value === "success") {
+    toast.add({
+      severity: "info",
+      summary: "Delete success",
+      detail: "The data store was successfully deleted",
+      life: 3000,
+    });
+  } else {
+    toast.add({
+      severity: "error",
+      summary: "Delete failure",
+      detail: "An error occurred while trying to delete the data store",
+      life: 3000,
+    });
+  }
+  deleteLoading.value = false;
 }
 
 const confirmDelete = (event, dsName: string) => {
@@ -73,6 +92,7 @@ const confirmDelete = (event, dsName: string) => {
             icon="pi pi-trash"
             aria-label="Delete"
             severity="danger"
+            :loading="deleteLoading"
             @click="confirmDelete($event, slotProps.data.name)"
           />
         </template>