fix(ui): properly update namespace selector list when namespace is edited

Author: luizhf42

ui/admin/src/components/Namespace/NamespaceEdit.vue

@@ -64,7 +64,8 @@
 import { useField } from "vee-validate";
 import { computed, ref } from "vue";
 import * as yup from "yup";
-import useNamespacesStore from "@admin/store/modules/namespaces";
+import useAdminNamespacesStore from "@admin/store/modules/namespaces";
+import useNamespacesStore from "@/store/modules/namespaces";
 import useSnackbar from "@/helpers/snackbar";
 import { IAdminNamespace } from "../../interfaces/INamespace";
 import FormDialog from "@/components/Dialogs/FormDialog.vue";
@@ -73,6 +74,7 @@ const props = defineProps<{ namespace: IAdminNamespace }>();
 
 const snackbar = useSnackbar();
 const namespacesStore = useNamespacesStore();
+const adminNamespacesStore = useAdminNamespacesStore();
 const showDialog = ref(false);
 
 const {
@@ -119,13 +121,14 @@ const closeDialog = () => {
 const submitForm = async () => {
   if (hasErrors.value) return;
   try {
-    await namespacesStore.updateNamespace({
+    await adminNamespacesStore.updateNamespace({
       ...props.namespace,
       name: name.value as string,
       max_devices: Number(maxDevices.value),
       settings: { session_record: sessionRecord.value },
     });
-    await namespacesStore.fetchNamespaceList();
+    await adminNamespacesStore.fetchNamespaceList();
+    await namespacesStore.fetchNamespaceList({ perPage: 30 });
     snackbar.showSuccess("Namespace updated successfully.");
     showDialog.value = false;
   } catch {

ui/admin/tests/unit/components/Namespaces/NamespaceEdit/index.spec.ts

@@ -1,3 +1,4 @@
+import MockAdapter from "axios-mock-adapter";
 import { createVuetify } from "vuetify";
 import { DOMWrapper, flushPromises, mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
@@ -6,6 +7,7 @@ import useNamespacesStore from "@admin/store/modules/namespaces";
 import NamespaceEdit from "@admin/components/Namespace/NamespaceEdit.vue";
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
 import { SnackbarInjectionKey } from "@/plugins/snackbar";
+import { namespacesApi } from "@/api/http";
 
 const namespace = {
   billing: {
@@ -45,6 +47,7 @@ const mockSnackbar = {
 
 describe("Namespace Edit", () => {
   setActivePinia(createPinia());
+  const mockNamespacesApi = new MockAdapter(namespacesApi.getAxios());
   const namespacesStore = useNamespacesStore();
   namespacesStore.updateNamespace = vi.fn();
   namespacesStore.fetchNamespaceList = vi.fn();
@@ -70,6 +73,7 @@ describe("Namespace Edit", () => {
   });
 
   it("Calls namespace store and snackbar on form submission", async () => {
+    mockNamespacesApi.onGet("http://localhost:3000/api/namespaces?page=1&per_page=30").reply(200, []);
     wrapper.vm.submitForm();
     await flushPromises();
     expect(namespacesStore.updateNamespace).toHaveBeenCalled();

ui/src/components/Namespace/Namespace.vue

@@ -147,9 +147,8 @@ const showAdminButton = computed(() => {
 });
 
 const availableNamespaces = computed(() => {
-  const namespaces = namespaceList.value.filter((ns) => ns.tenant_id !== currentNamespace.value.tenant_id);
-  if (props.isAdminContext && currentNamespace.value.tenant_id) namespaces.push(currentNamespace.value);
-  return namespaces;
+  if (props.isAdminContext) return namespaceList.value;
+  return namespaceList.value.filter((ns) => ns.tenant_id !== currentNamespace.value.tenant_id);
 });
 
 const navigateToAdminPanel = () => { window.location.href = "/admin"; };