fix(ui): make NamespaceInstructions dialog closeable

Author: luizhf42

ui/src/components/Namespace/Namespace.vue

@@ -1,6 +1,6 @@
 <template>
   <NamespaceAdd v-model="showAddDialog" />
-  <NamespaceInstructions v-model="showAddNamespaceInstructions" />
+  <NamespaceInstructions v-model="showInstructionsDialog" />
 
   <v-menu
     :close-on-content-click="false"
@@ -108,6 +108,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
+import { useDisplay } from "vuetify";
+import { until } from "@vueuse/core";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import NamespaceInstructions from "./NamespaceInstructions.vue";
 import NamespaceChip from "./NamespaceChip.vue";
@@ -117,7 +119,6 @@ import useNamespaceManager from "./composables/useNamespaceManager";
 import useAuthStore from "@/store/modules/auth";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import { envVariables } from "@/envVariables";
-import { useDisplay } from "vuetify";
 
 defineOptions({
   inheritAttrs: false,
@@ -139,7 +140,7 @@ const {
 const { mdAndDown, thresholds } = useDisplay();
 
 const showAddDialog = ref(false);
-const showAddNamespaceInstructions = computed(() => namespacesLoaded.value && !hasNamespaces.value && !props.isAdminContext);
+const showInstructionsDialog = ref(false);
 const userId = computed(() => authStore.id || localStorage.getItem("id") || "");
 
 const showAdminButton = computed(() => {
@@ -168,5 +169,7 @@ const navigateToAdminPanel = () => {
 
 onMounted(async () => {
   await loadCurrentNamespace();
+  await until(namespacesLoaded).toBe(true);
+  showInstructionsDialog.value = !hasNamespaces.value && !props.isAdminContext;
 });
 </script>

ui/src/components/Namespace/NamespaceInstructions.vue

@@ -1,11 +1,10 @@
 <template>
   <WindowDialog
-    v-model="showNoNamespaceDialog"
+    v-model="showNamespaceInstructions"
     title="You have no namespaces associated"
     icon="mdi-folder-alert"
     icon-color="warning"
-    persistent
-    :show-close-button="false"
+    @close="showNamespaceInstructions = false"
   >
     <div class="pa-6">
       <p>
@@ -70,15 +69,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { ref } from "vue";
 import { envVariables } from "@/envVariables";
 import NamespaceAdd from "./NamespaceAdd.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
-const route = useRoute();
-const showDialog = defineModel<boolean>({ required: true });
+const showNamespaceInstructions = defineModel<boolean>({ required: true });
 const showNamespaceAdd = ref(false);
-const showNoNamespaceDialog = computed(() => route.name === "AcceptInvite" ? false : showDialog.value);
 const { isCommunity } = envVariables;
 </script>

ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap

@@ -342,7 +342,7 @@ exports[`App Layout Component > Renders the component 1`] = `
 </main>
 <!---->
 <!--teleport start-->
-<div class="v-overlay v-overlay--absolute v-overlay--contained v-theme--light v-locale--is-ltr align-center justify-center w-100 h-100" style="z-index: 2410;" data-v-e7291ef4="" data-test="overlay">
+<div class="v-overlay v-overlay--absolute v-overlay--contained v-theme--light v-locale--is-ltr align-center justify-center w-100 h-100" style="z-index: 2000;" data-v-e7291ef4="" data-test="overlay">
   <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
     <!---->
   </transition-stub>