From 39847c2840e1f16b24599fc10264a9de23d98d02 Mon Sep 17 00:00:00 2001
From: luizhf42 <luizhf42@gmail.com>
Date: Fri, 26 Sep 2025 14:09:27 -0300
Subject: [PATCH 1/5] refactor(ui): migrate `NamespaceAdd` to `FormDialog`

---
 ui/src/components/Namespace/NamespaceAdd.vue | 112 ++++++++-----------
 1 file changed, 48 insertions(+), 64 deletions(-)

diff --git a/ui/src/components/Namespace/NamespaceAdd.vue b/ui/src/components/Namespace/NamespaceAdd.vue
index 09c4812b12b..b5792303f73 100644
--- a/ui/src/components/Namespace/NamespaceAdd.vue
+++ b/ui/src/components/Namespace/NamespaceAdd.vue
@@ -1,87 +1,68 @@
 <template>
-  <BaseDialog v-model="showDialog" @close="close">
-    <v-card data-test="namespace-add-card" class="bg-v-theme-surface rounded" rounded>
+  <FormDialog
+    v-model="showDialog"
+    @close="close"
+    @confirm="addNamespace"
+    @cancel="close"
+    :title="isCommunityVersion ? 'Add a namespace using the CLI' : 'New Namespace'"
+    icon="mdi-folder-plus"
+    :confirm-text="isCommunityVersion ? '' : 'Submit'"
+    :confirm-disabled="isCommunityVersion || !fieldMeta.valid"
+    :confirm-loading="isLoading"
+    cancel-text="Close"
+    confirm-data-test="add-btn"
+    cancel-data-test="close-btn"
+    :footer-helper-text="isCommunityVersion ? 'Learn more on' : ''"
+    :footer-helper-link-text="isCommunityVersion ? 'ShellHub Administration Guide' : ''"
+    :footer-helper-link="isCommunityVersion ? 'https://docs.shellhub.io/self-hosted/administration' : ''"
+    data-test="namespace-add-card"
+  >
+    <v-card-text class="pa-6">
       <template v-if="!isCommunityVersion">
-        <v-card-title class="bg-primary d-flex justify-space-between align-center text-h5 pa-4">
-          New Namespace
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            @click="close"
-          />
-        </v-card-title>
-        <v-container>
-          <v-card-text class="pb-0">
-            <v-text-field
-              v-model="namespaceName"
-              label="Namespace"
-              :error-messages="namespaceNameError"
-              variant="outlined"
-              data-test="username-text"
-              :persistent-hint="true"
-            />
-          </v-card-text>
-          <v-card-text>
-            <v-row class="pl-3 pt-0">
-              <v-col>
-                <ul>
-                  <li>The namespace you choose here will be used for in the SSHID of your devices.</li>
-                  <li>The namespace can contain only lowercase alphanumeric characters and hyphens.</li>
-                  <li>It cannot begin or end with a hyphen ("-").</li>
-                  <li>The namespace must be a minimum of 3 characters and a maximum of 63 characters.</li>
-                  <li>The namespace cannot be changed after creation.</li>
-                </ul>
-              </v-col>
-            </v-row>
-          </v-card-text>
-          <v-divider />
-          <v-card-actions>
-            <v-spacer />
-            <v-btn data-test="close-btn" @click="close">Close</v-btn>
-            <v-btn color="primary" variant="outlined" data-test="add-btn" @click="addNamespace" :disabled="!fieldMeta.valid">Submit</v-btn>
-          </v-card-actions>
-        </v-container>
+        <v-text-field
+          v-model="namespaceName"
+          label="Namespace"
+          :error-messages="namespaceNameError"
+          hide-details="auto"
+          class="mt-1 mb-4"
+        />
+        <div class="text-body-2 text-justify">
+          <ul class="pl-4">
+            <li>The namespace you choose here will be used for in the SSHID of your devices.</li>
+            <li>The namespace can contain only lowercase alphanumeric characters and hyphens.</li>
+            <li>It cannot begin or end with a hyphen ("-").</li>
+            <li>The namespace must be a minimum of 3 characters and a maximum of 63 characters.</li>
+            <li>The namespace cannot be changed after creation.</li>
+          </ul>
+        </div>
       </template>
       <template v-else>
-        <v-card-title class="bg-primary">Add a namespace using the CLI</v-card-title>
-        <v-card-text class="mt-4 mb-0 pb-1 mb-4">
-          <p class="text-body-2">
-            In the Community Edition of ShellHub, namespaces must be added using the administration CLI.
-            For detailed instructions on how to add namespaces, please refer to the documentation at the ShellHub
-            Administration Guide.
-          </p>
-          <div id="cli-instructions" class="mt-3 text-body-2">
-            <p class="text-caption mb-0 mt-3" data-test="openContentSecond-text">
-              Check the
-              <a
-                :href="'https://docs.shellhub.io/self-hosted/administration'"
-                target="_blank"
-                rel="noopener noreferrer"
-              >ShellHub Administration Guide</a>
-              for more information.
-            </p>
-          </div>
-        </v-card-text>
+        <p class="text-body-2">
+          In the Community Edition of ShellHub, namespaces must be added using the administration CLI.
+          For detailed instructions on how to add namespaces, please refer to the documentation at the ShellHub
+          Administration Guide.
+        </p>
       </template>
-    </v-card>
-  </BaseDialog>
+    </v-card-text>
+  </FormDialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useField } from "vee-validate";
 import * as yup from "yup";
 import axios, { AxiosError } from "axios";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import { envVariables } from "@/envVariables";
-import BaseDialog from "../BaseDialog.vue";
+import FormDialog from "../FormDialog.vue";
 import useNamespacesStore from "@/store/modules/namespaces";
 
 const namespacesStore = useNamespacesStore();
 const snackbar = useSnackbar();
 const showDialog = defineModel({ default: false });
 const isCommunityVersion = computed(() => envVariables.isCommunity);
+const isLoading = ref(false);
 
 // Validation schema for namespace name
 const namespaceSchema = yup
@@ -125,6 +106,7 @@ const handleErrorAndNotify = (error: unknown) => {
 
 // Add a new namespace
 const addNamespace = async () => {
+  isLoading.value = true;
   try {
     const newNamespaceId = await namespacesStore.createNamespace(namespaceName.value);
     await changeNamespace(newNamespaceId);
@@ -145,6 +127,8 @@ const addNamespace = async () => {
     } else {
       handleErrorAndNotify(error);
     }
+  } finally {
+    isLoading.value = false;
   }
 };
 </script>

From 50743a4058105b02cf19fda2a66182a23e5b0535 Mon Sep 17 00:00:00 2001
From: luizhf42 <luizhf42@gmail.com>
Date: Fri, 26 Sep 2025 15:19:48 -0300
Subject: [PATCH 2/5] refactor(ui): migrate `NamespaceDelete` to
 `MessageDialog`

---
 .../components/Namespace/NamespaceDelete.vue  | 86 +++++++++----------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/Namespace/NamespaceDelete.vue b/ui/src/components/Namespace/NamespaceDelete.vue
index 0a0e8215c7e..3864ab95c86 100644
--- a/ui/src/components/Namespace/NamespaceDelete.vue
+++ b/ui/src/components/Namespace/NamespaceDelete.vue
@@ -1,61 +1,49 @@
 <template>
-  <BaseDialog v-model="showDialog">
-    <v-card data-test="namespace-delete-card" class="bg-v-theme-surface">
-      <v-card-title class="text-h5 pa-4 bg-primary">
-        Namespace Deletion
-      </v-card-title>
+  <MessageDialog
+    v-model="showDialog"
+    @close="showDialog = false"
+    @confirm="remove"
+    @cancel="showDialog = false"
+    title="Namespace Deletion"
+    icon="mdi-delete-alert"
+    icon-color="error"
+    :confirm-text="isBillingActive || !canDeleteNamespace ? '' : 'Remove'"
+    confirm-color="error"
+    :confirm-disabled="isBillingActive || !canDeleteNamespace"
+    :confirm-loading="isLoading"
+    cancel-text="Close"
+    confirm-data-test="remove-btn"
+    cancel-data-test="close-btn"
+  >
+    <div
+      v-if="isBillingActive"
+      data-test="content-subscription-text"
+    >
+      <p class="mb-2">
+        To ensure the integrity of your namespace,
+        we have implemented a restriction that prevents its deletion while you have an active subscription or an unpaid invoice.
+      </p>
+      <p class="mb-2">
+        Kindly note that in order to proceed with the deletion of your namespace,
+        please ensure that there are no active subscriptions associated with it, and all outstanding invoices are settled.
+      </p>
+    </div>
 
-      <v-card-text class="mt-4 mb-3 pb-1">
-        <div
-          v-if="isBillingActive"
-          data-test="content-subscription-text"
-        >
-          <p class="mb-2">
-            To ensure the integrity of your namespace,
-            we have implemented a restriction that prevents its deletion while you have an active subscription or an unpaid invoice.
-          </p>
-          <p class="mb-2">
-            Kindly note that in order to proceed with the deletion of your namespace,
-            please ensure that there are no active subscriptions associated with it, and all outstanding invoices are settled.
-          </p>
-        </div>
-
-        <p data-test="content-text" v-else>
-          This action cannot be undone. This will permanently delete the
-          <b> {{ displayOnlyTenCharacters(name) }} </b> and its related data.
-        </p>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-spacer />
-
-        <v-btn variant="text" data-test="close-btn" @click="showDialog = false">
-          Close
-        </v-btn>
-
-        <v-btn
-          color="red darken-1"
-          variant="text"
-          data-test="remove-btn"
-          @click="remove()"
-          :disabled="isBillingActive || !canDeleteNamespace"
-        >
-          Remove
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
+    <p data-test="content-text" v-else>
+      This action cannot be undone. This will permanently delete <strong>{{ displayOnlyTenCharacters(name) }}</strong> and its related data.
+    </p>
+  </MessageDialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import axios, { AxiosError } from "axios";
 import hasPermission from "@/utils/permission";
 import { displayOnlyTenCharacters } from "@/utils/string";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
-import BaseDialog from "../BaseDialog.vue";
+import MessageDialog from "../MessageDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
 import useNamespacesStore from "@/store/modules/namespaces";
@@ -70,12 +58,14 @@ const namespacesStore = useNamespacesStore();
 const snackbar = useSnackbar();
 const router = useRouter();
 const showDialog = defineModel({ default: false });
+const isLoading = ref(false);
 const { name } = namespacesStore.currentNamespace;
 const tenant = computed(() => props.tenant);
 const isBillingActive = computed(() => billingStore.isActive);
 const canDeleteNamespace = hasPermission("namespace:delete");
 
 const remove = async () => {
+  isLoading.value = true;
   try {
     await namespacesStore.deleteNamespace(tenant.value);
     snackbar.showSuccess("Namespace deleted successfully.");
@@ -95,6 +85,8 @@ const remove = async () => {
     }
     snackbar.showError("An error occurred while deleting the namespace.");
     handleError(error);
+  } finally {
+    isLoading.value = false;
   }
 };
 

From 72d268dd5854cb3a2ba00588cc8cdb9259a5c224 Mon Sep 17 00:00:00 2001
From: luizhf42 <luizhf42@gmail.com>
Date: Fri, 26 Sep 2025 15:38:05 -0300
Subject: [PATCH 3/5] refactor(ui): migrate `NamespaceEdit` to `FormDialog`

---
 ui/src/components/Namespace/NamespaceEdit.vue |  86 +++++-----
 .../Namespace/NamespaceEdit.spec.ts           |  13 +-
 .../__snapshots__/NamespaceEdit.spec.ts.snap  | 155 +++++++++++++++++-
 3 files changed, 194 insertions(+), 60 deletions(-)

diff --git a/ui/src/components/Namespace/NamespaceEdit.vue b/ui/src/components/Namespace/NamespaceEdit.vue
index f2876fa4403..257c0cc8dfb 100644
--- a/ui/src/components/Namespace/NamespaceEdit.vue
+++ b/ui/src/components/Namespace/NamespaceEdit.vue
@@ -1,59 +1,43 @@
 <template>
-  <BaseDialog v-model="showDialog" @close="close">
-    <v-card data-test="password-change-card" class="bg-v-theme-surface">
-      <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
-        Change Connection Announcement
-      </v-card-title>
-
-      <v-card-text class="mt-4 mb-3 pb-1">
-        <div class="mt-4 pl-4 pr-4">
-          <v-textarea
-            v-model="connectionAnnouncement"
-            label="Connection Announcement"
-            :error-messages="connectionAnnouncementError"
-            data-test="connection-announcement-text"
-            variant="underlined"
-            hint="A connection announcement is a custom message written
-      during a session when a connection is established on a device
-      within the namespace."
-            persistent-hint
-            required
-            auto-grow
-            max-rows="25"
-          />
-        </div>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-spacer />
-
-        <v-btn variant="text" data-test="close-btn" @click="close">
-          Cancel
-        </v-btn>
-
-        <v-btn
-          color="primary"
-          variant="text"
-          data-test="change-connection-btn"
-          :disabled="!!connectionAnnouncementError"
-          @click="updateAnnouncement()"
-        >
-          Save Announcement
-        </v-btn>
-
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
+  <FormDialog
+    v-model="showDialog"
+    @close="close"
+    @confirm="updateAnnouncement"
+    @cancel="close"
+    title="Change Connection Announcement"
+    icon="mdi-bullhorn"
+    confirm-text="Save Announcement"
+    :confirm-disabled="!!connectionAnnouncementError"
+    :confirm-loading="isLoading"
+    cancel-text="Cancel"
+    confirm-data-test="change-connection-btn"
+    cancel-data-test="close-btn"
+  >
+    <v-card-text class="pa-6">
+      <v-textarea
+        v-model="connectionAnnouncement"
+        label="Connection Announcement"
+        :error-messages="connectionAnnouncementError"
+        data-test="connection-announcement-text"
+        hint="A connection announcement is a custom message written during a session
+        when a connection is established on a device within the namespace."
+        persistent-hint
+        required
+        auto-grow
+        max-rows="25"
+      />
+    </v-card-text>
+  </FormDialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useField } from "vee-validate";
 import axios from "axios";
 import * as yup from "yup";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
-import BaseDialog from "../BaseDialog.vue";
+import FormDialog from "../FormDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useNamespacesStore from "@/store/modules/namespaces";
 
@@ -64,6 +48,7 @@ const namespace = computed(() => namespacesStore.currentNamespace);
 const { tenantId } = authStore;
 const showDialog = defineModel({ default: false });
 const emit = defineEmits(["update"]);
+const isLoading = ref(false);
 
 const {
   value: connectionAnnouncement,
@@ -94,7 +79,7 @@ onMounted(async () => {
   }
 });
 
-const handleUpdateNameError = (error: unknown): void => {
+const handleUpdateAnnouncementError = (error: unknown): void => {
   if (axios.isAxiosError(error)) {
     switch (error.response?.status) {
       case 400:
@@ -111,6 +96,7 @@ const handleUpdateNameError = (error: unknown): void => {
 };
 
 const updateAnnouncement = async () => {
+  isLoading.value = true;
   try {
     await namespacesStore.editNamespace({
       tenant_id: tenantId,
@@ -126,7 +112,9 @@ const updateAnnouncement = async () => {
 
     showDialog.value = false;
   } catch (error) {
-    handleUpdateNameError(error);
+    handleUpdateAnnouncementError(error);
+  } finally {
+    isLoading.value = false;
   }
 };
 
diff --git a/ui/tests/components/Namespace/NamespaceEdit.spec.ts b/ui/tests/components/Namespace/NamespaceEdit.spec.ts
index ee3c53c026e..dec475596d3 100644
--- a/ui/tests/components/Namespace/NamespaceEdit.spec.ts
+++ b/ui/tests/components/Namespace/NamespaceEdit.spec.ts
@@ -72,18 +72,11 @@ describe("Namespace Edit", () => {
     expect(wrapper.vm).toBeTruthy();
   });
 
-  it("Renders the component", () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("Renders components", async () => {
-    const dialog = new DOMWrapper(document.body);
+  it("Renders the component", async () => {
     wrapper.vm.showDialog = true;
+    const dialog = new DOMWrapper(document.body);
     await flushPromises();
-    expect(dialog.find('[data-test="title"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="close-btn"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="change-connection-btn"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="connection-announcement-text"]').exists()).toBe(true);
+    expect(dialog.html()).toMatchSnapshot();
   });
 
   it("Successfully changes connection_announcement data", async () => {
diff --git a/ui/tests/components/Namespace/__snapshots__/NamespaceEdit.spec.ts.snap b/ui/tests/components/Namespace/__snapshots__/NamespaceEdit.spec.ts.snap
index 22e73f3800f..bf1e001feaf 100644
--- a/ui/tests/components/Namespace/__snapshots__/NamespaceEdit.spec.ts.snap
+++ b/ui/tests/components/Namespace/__snapshots__/NamespaceEdit.spec.ts.snap
@@ -1,3 +1,156 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Namespace Edit > Renders the component 1`] = `""`;
+exports[`Namespace Edit > Renders the component 1`] = `
+"<body>
+  <div class="v-overlay-container">
+    <div class="v-overlay v-overlay--active v-theme--light v-locale--is-ltr v-dialog v-dialog--scrollable" style="z-index: 2400;" aria-modal="true" role="dialog" data-v-51513c71="">
+      <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
+        <div class="v-overlay__scrim"></div>
+      </transition-stub>
+      <transition-stub name="dialog-transition" appear="true" persisted="true" css="true">
+        <div class="v-overlay__content" style="max-width: 600px;" tabindex="-1">
+          <div data-v-51513c71="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated bg-v-theme-surface border">
+            <!---->
+            <div class="v-card__loader">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                <!---->
+                <div class="v-progress-linear__background"></div>
+                <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                  <div class="v-progress-linear__indeterminate">
+                    <div class="v-progress-linear__indeterminate long"></div>
+                    <div class="v-progress-linear__indeterminate short"></div>
+                  </div>
+                </transition-stub>
+                <!---->
+              </div>
+            </div>
+            <!---->
+            <!---->
+            <!-- Content -->
+            <!-- Titlebar -->
+            <header class="v-toolbar v-toolbar--density-default bg-primary v-theme--light v-locale--is-ltr bg-v-theme-surface border-b px-4 py-2">
+              <!---->
+              <div class="v-toolbar__content" style="height: 64px;">
+                <!---->
+                <!---->
+                <div class="v-avatar v-theme--light text-primary v-avatar--density-default v-avatar--rounded v-avatar--variant-tonal border border-primary border-opacity-100 mr-3" style="width: 48px; height: 48px;"><i class="mdi-bullhorn mdi v-icon notranslate v-theme--light" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i>
+                  <!----><span class="v-avatar__underlay"></span>
+                </div>
+                <div>
+                  <div class="v-toolbar-title text-h6">
+                    <div class="v-toolbar-title__placeholder">
+                      <!---->Change Connection Announcement
+                    </div>
+                  </div>
+                  <!--v-if-->
+                </div>
+                <div class="v-spacer"></div><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" data-test="close-btn-toolbar"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                  <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-close mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                  <!---->
+                  <!---->
+                </button>
+                <!---->
+              </div>
+              <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+            </header><!-- Content -->
+            <div class="v-card-text pa-6">
+              <div class="v-input v-input--horizontal v-input--density-default v-theme--light v-locale--is-ltr v-textarea v-text-field v-textarea--auto-grow v-textarea--no-resize" data-test="connection-announcement-text">
+                <!---->
+                <div class="v-input__control">
+                  <div class="v-field v-field--variant-filled v-theme--light v-locale--is-ltr" style="--v-textarea-control-height: NaN;">
+                    <div class="v-field__overlay"></div>
+                    <div class="v-field__loader">
+                      <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                        <!---->
+                        <div class="v-progress-linear__background"></div>
+                        <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                        <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                          <div class="v-progress-linear__indeterminate">
+                            <div class="v-progress-linear__indeterminate long"></div>
+                            <div class="v-progress-linear__indeterminate short"></div>
+                          </div>
+                        </transition-stub>
+                        <!---->
+                      </div>
+                    </div>
+                    <!---->
+                    <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" for="input-v-2" aria-hidden="true">
+                        <!---->Connection Announcement
+                      </label><label class="v-label v-field-label" for="input-v-2">
+                        <!---->Connection Announcement
+                      </label>
+                      <!----><textarea class="v-field__input" rows="5" id="input-v-2" aria-describedby="input-v-2-messages" required="" value=""></textarea><textarea class="v-field__input v-textarea__sizer" id="input-v-2-sizer" readonly="" aria-hidden="true"></textarea>
+                      <!---->
+                    </div>
+                    <!---->
+                    <!---->
+                    <div class="v-field__outline">
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+                <div id="input-v-2-messages" class="v-input__details" role="alert" aria-live="polite">
+                  <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+                    <div class="v-messages__message">A connection announcement is a custom message written during a session
+                      when a connection is established on a device within the namespace.</div>
+                  </transition-group-stub>
+                  <!---->
+                </div>
+              </div>
+            </div><!-- Footer -->
+            <header class="v-toolbar v-toolbar--density-default bg-primary v-theme--light v-locale--is-ltr bg-v-theme-surface border-t px-6 py-2">
+              <!---->
+              <div class="v-toolbar__content" style="height: 64px;">
+                <!---->
+                <!---->
+                <!-- Buttons with alert system -->
+                <div class="v-window v-theme--light w-100">
+                  <div class="v-window__container">
+                    <!-- Default buttons window -->
+                    <transition-stub name="" appear="false" persisted="false" css="true">
+                      <div class="v-window-item v-window-item--active w-100">
+                        <div class="d-flex align-center w-100">
+                          <!-- Helper text on the left -->
+                          <!--v-if-->
+                          <div class="v-spacer"></div><!-- Buttons on the right -->
+                          <div class="d-flex"><button type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-tonal mr-2" data-test="close-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                              <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
+                              <!---->
+                              <!---->
+                            </button><button type="button" class="v-btn v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" data-test="change-connection-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                              <!----><span class="v-btn__content" data-no-activator="">Save Announcement</span>
+                              <!---->
+                              <!---->
+                            </button></div>
+                        </div>
+                      </div>
+                    </transition-stub><!-- Alert window -->
+                    <transition-stub name="" appear="false" persisted="false" css="true">
+                      <div class="v-window-item w-100" style="display: none;">
+                        <!---->
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                  <!---->
+                </div>
+                <!---->
+              </div>
+              <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+            </header>
+            <!---->
+            <!----><span class="v-card__underlay"></span>
+          </div>
+        </div>
+      </transition-stub>
+    </div>
+  </div>
+</body>"
+`;

From ecb6b04c409fbadeaef0ccb1db745cdcfd0dc23b Mon Sep 17 00:00:00 2001
From: luizhf42 <luizhf42@gmail.com>
Date: Fri, 26 Sep 2025 17:18:17 -0300
Subject: [PATCH 4/5] refactor(ui): migrate `NamespaceInstructions` to
 `WindowDialog`

---
 .../Namespace/NamespaceInstructions.vue       | 107 +++++++++---------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/Namespace/NamespaceInstructions.vue b/ui/src/components/Namespace/NamespaceInstructions.vue
index 5636a6abd2e..757f67c15ba 100644
--- a/ui/src/components/Namespace/NamespaceInstructions.vue
+++ b/ui/src/components/Namespace/NamespaceInstructions.vue
@@ -1,56 +1,59 @@
 <template>
-  <BaseDialog v-model="showNoNamespaceDialog" :retain-focus="false">
-    <v-card
-      class="bg-v-theme-surface"
-    >
-      <v-card-title class="bg-primary">
-        There are no namespaces associated with your account
-      </v-card-title>
+  <WindowDialog
+    v-model="showNoNamespaceDialog"
+    title="You have no namespaces associated"
+    icon="mdi-folder-alert"
+    icon-color="warning"
+    :show-close-button="false"
+  >
+    <div class="pa-6">
+      <p>
+        In order to use ShellHub, you must have a namespace associated
+        with your account or join an existing one.
+      </p>
 
-      <v-card-text class="mt-4 mb-0 pb-1 mb-4">
-        <p class="text-body-2">
-          In order to use ShellHub, you must have a namespace associate
-          with your account or join an existing one.
+      <div v-if="isCommunity" id="cli-instructions">
+        <p class="mt-3">
+          The easiest way to configure a namespace is by using the <strong>CLI script</strong>.
+          Once you add a namespace via CLI script, this dialog will be
+          automatically closed.
         </p>
-        <div v-if="openVersion" id="cli-instructions" class="mt-3 text-body-2">
-          <p data-test="openContentFirst-text">
-            The easiest way to configure a namespace is by using the cli script.
-          </p>
-          <p class="mt-3" data-test="cliUpdateWarning-text">
-            When you add a namespace, on cli script, this dialog will be
-            automatically closed.
-          </p>
-          <p class="text-caption mb-0 mt-3" data-test="openContentSecond-text">
-            Check the
-            <a
-              :href="'https://docs.shellhub.io/self-hosted/administration'"
-              target="_blank"
-              rel="noopener noreferrer"
-            >documentation</a
-            >
-            for more information and alternative install methods.
-          </p>
-        </div>
-      </v-card-text>
+      </div>
+    </div>
+    <template #footer>
+      <div v-if="isCommunity" class="d-flex align-center w-100 px-6">
+        <span class="text-caption text-center">
+          For more information, check out the
+          <a
+            :href="'https://docs.shellhub.io/self-hosted/administration'"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-decoration-none text-primary"
+            data-test="openContentSecond-text"
+          >
+            ShellHub Administration Guide
+            <v-icon size="12" class="ml-1">mdi-open-in-new</v-icon>
+          </a>
+        </span>
+      </div>
 
-      <v-card-actions v-if="!openVersion">
-        <v-spacer />
-        <div>
-          <v-btn
-            color="primary"
-            @click="showNamespaceAdd = true"
-            data-test="save-btn">
-            Add Namespace
-          </v-btn>
-          <NamespaceAdd
-            v-model="showNamespaceAdd"
-            enableSwitchIn
-            data-test="namespace-add-component"
-          />
-        </div>
+      <v-card-actions v-else class="d-flex justify-end w-100">
+        <v-btn
+          color="primary"
+          @click="showNamespaceAdd = true"
+          data-test="save-btn"
+        >
+          Add Namespace
+        </v-btn>
       </v-card-actions>
-    </v-card>
-  </BaseDialog>
+    </template>
+
+    <NamespaceAdd
+      v-model="showNamespaceAdd"
+      enableSwitchIn
+      data-test="namespace-add-component"
+    />
+  </WindowDialog>
 </template>
 
 <script setup lang="ts">
@@ -58,15 +61,11 @@ import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import { envVariables } from "@/envVariables";
 import NamespaceAdd from "./NamespaceAdd.vue";
-import BaseDialog from "../BaseDialog.vue";
+import WindowDialog from "../WindowDialog.vue";
 
 const route = useRoute();
-
 const showDialog = defineModel<boolean>({ default: false });
-
 const showNamespaceAdd = ref(false);
-
 const showNoNamespaceDialog = computed(() => route.name === "AcceptInvite" ? false : showDialog.value);
-
-const openVersion = computed(() => !envVariables.isCloud && !envVariables.isEnterprise);
+const { isCommunity } = envVariables;
 </script>

From 80ba0eaa7945f2bfa903fc510ffb8ad588518e18 Mon Sep 17 00:00:00 2001
From: luizhf42 <luizhf42@gmail.com>
Date: Fri, 26 Sep 2025 17:40:29 -0300
Subject: [PATCH 5/5] refactor(ui): migrate `NamespaceLeave` to `MessageDialog`

---
 .../components/Namespace/NamespaceLeave.vue   | 57 +++++++--------
 .../Namespace/NamespaceLeave.spec.ts          | 15 +---
 .../__snapshots__/NamespaceLeave.spec.ts.snap | 69 ++++++++++++++++++-
 3 files changed, 94 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/Namespace/NamespaceLeave.vue b/ui/src/components/Namespace/NamespaceLeave.vue
index ade68597b36..d1310b5608a 100644
--- a/ui/src/components/Namespace/NamespaceLeave.vue
+++ b/ui/src/components/Namespace/NamespaceLeave.vue
@@ -1,53 +1,40 @@
 <template>
-  <BaseDialog v-model="showDialog">
-    <v-card data-test="namespace-leave-dialog" class="bg-v-theme-surface">
-      <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
-        Namespace Leave
-      </v-card-title>
-
-      <v-card-text class="mt-4 mb-3 pb-1" data-test="subtitle">
-        <div>
-          <p class="mb-2">
-            Are you sure you want to leave this namespace? If you leave, you will need an invitation to rejoin.
-          </p>
-        </div>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-spacer />
-
-        <v-btn variant="text" data-test="close-btn" @click="showDialog = !showDialog">
-          Close
-        </v-btn>
-
-        <v-btn
-          color="red darken-1"
-          variant="text"
-          data-test="leave-btn"
-          @click="leave()"
-        >
-          Leave
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
+  <MessageDialog
+    v-model="showDialog"
+    @close="showDialog = false"
+    @confirm="leave"
+    @cancel="showDialog = false"
+    title="Namespace Leave"
+    description="Are you sure you want to leave this namespace? If you leave, you will need an invitation to rejoin."
+    icon="mdi-exit-to-app"
+    icon-color="warning"
+    confirm-text="Leave"
+    confirm-color="error"
+    :confirm-loading="isLoading"
+    cancel-text="Close"
+    confirm-data-test="leave-btn"
+    cancel-data-test="close-btn"
+    data-test="namespace-leave-dialog"
+  />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
-import BaseDialog from "../BaseDialog.vue";
+import MessageDialog from "../MessageDialog.vue";
 import useNamespacesStore from "@/store/modules/namespaces";
 
 const namespacesStore = useNamespacesStore();
 const router = useRouter();
 const snackbar = useSnackbar();
 const showDialog = defineModel({ default: false });
+const isLoading = ref(false);
 const tenant = computed(() => localStorage.getItem("tenant") as string);
 
 const leave = async () => {
+  isLoading.value = true;
   try {
     await namespacesStore.leaveNamespace(tenant.value);
     showDialog.value = false;
@@ -56,6 +43,8 @@ const leave = async () => {
   } catch (error: unknown) {
     snackbar.showError("Failed to leave the namespace.");
     handleError(error);
+  } finally {
+    isLoading.value = false;
   }
 };
 
diff --git a/ui/tests/components/Namespace/NamespaceLeave.spec.ts b/ui/tests/components/Namespace/NamespaceLeave.spec.ts
index b3c6107f891..30ddc353c52 100644
--- a/ui/tests/components/Namespace/NamespaceLeave.spec.ts
+++ b/ui/tests/components/Namespace/NamespaceLeave.spec.ts
@@ -71,20 +71,11 @@ describe("Namespace Leave", () => {
     expect(wrapper.vm).toBeTruthy();
   });
 
-  it("Renders the component", () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("Renders components", async () => {
-    const dialog = new DOMWrapper(document.body);
+  it("Renders the component", async () => {
     wrapper.vm.showDialog = true;
     await flushPromises();
-
-    expect(dialog.find('[data-test="namespace-leave-dialog"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="title"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="subtitle"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="close-btn"]').exists()).toBe(true);
-    expect(dialog.find('[data-test="leave-btn"]').exists()).toBe(true);
+    const dialog = new DOMWrapper(document.body);
+    expect(dialog.html()).toMatchSnapshot();
   });
 
   it("Successfully leaves namespace", async () => {
diff --git a/ui/tests/components/Namespace/__snapshots__/NamespaceLeave.spec.ts.snap b/ui/tests/components/Namespace/__snapshots__/NamespaceLeave.spec.ts.snap
index e7a4753f8d3..1ffbb77239c 100644
--- a/ui/tests/components/Namespace/__snapshots__/NamespaceLeave.spec.ts.snap
+++ b/ui/tests/components/Namespace/__snapshots__/NamespaceLeave.spec.ts.snap
@@ -1,3 +1,70 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Namespace Leave > Renders the component 1`] = `""`;
+exports[`Namespace Leave > Renders the component 1`] = `
+"<body>
+  <div class="v-overlay-container">
+    <div class="v-overlay v-overlay--active v-theme--light v-locale--is-ltr v-dialog v-dialog--scrollable" style="z-index: 2400;" aria-modal="true" role="dialog" data-v-51513c71="" data-test="namespace-leave-dialog">
+      <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
+        <div class="v-overlay__scrim"></div>
+      </transition-stub>
+      <transition-stub name="dialog-transition" appear="true" persisted="true" css="true">
+        <div class="v-overlay__content" style="max-width: 600px;" tabindex="-1">
+          <div data-v-51513c71="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated bg-v-theme-surface border">
+            <!---->
+            <div class="v-card__loader">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                <!---->
+                <div class="v-progress-linear__background"></div>
+                <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                  <div class="v-progress-linear__indeterminate">
+                    <div class="v-progress-linear__indeterminate long"></div>
+                    <div class="v-progress-linear__indeterminate short"></div>
+                  </div>
+                </transition-stub>
+                <!---->
+              </div>
+            </div>
+            <!---->
+            <!---->
+            <!-- Content -->
+            <!-- Titlebar -->
+            <!--v-if-->
+            <!-- Content -->
+            <div class="v-card-text text-center py-8"><i class="mdi-exit-to-app mdi v-icon notranslate v-theme--light text-warning mb-4" style="font-size: 48px; height: 48px; width: 48px;" aria-hidden="true"></i>
+              <div class="text-h5 mb-4">Namespace Leave</div>
+              <div class="text-body-2 text-medium-emphasis mb-6">Are you sure you want to leave this namespace? If you leave, you will need an invitation to rejoin.</div>
+            </div><!-- Footer -->
+            <header class="v-toolbar v-toolbar--density-default bg-primary v-theme--light v-locale--is-ltr bg-v-theme-surface border-t px-6 py-2">
+              <!---->
+              <div class="v-toolbar__content" style="height: 64px;">
+                <!---->
+                <!---->
+                <!-- Block Layout: Full width buttons -->
+                <div class="v-row ma-0 ga-3">
+                  <div class="v-col pa-0"><button type="button" class="v-btn v-btn--block v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-tonal" data-test="close-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                      <!----><span class="v-btn__content" data-no-activator="">Close</span>
+                      <!---->
+                      <!---->
+                    </button></div>
+                  <div class="v-col pa-0"><button type="button" class="v-btn v-btn--block v-theme--light bg-error v-btn--density-default v-btn--size-default v-btn--variant-flat" data-test="leave-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                      <!----><span class="v-btn__content" data-no-activator="">Leave</span>
+                      <!---->
+                      <!---->
+                    </button></div>
+                </div>
+                <!---->
+              </div>
+              <transition-stub name="expand-transition" appear="false" persisted="false" css="true">
+                <!---->
+              </transition-stub>
+            </header>
+            <!---->
+            <!----><span class="v-card__underlay"></span>
+          </div>
+        </div>
+      </transition-stub>
+    </div>
+  </div>
+</body>"
+`;