fix(ui): fix Welcome dialog opening behavior

Author: luizhf42

ui/src/components/Welcome/Welcome.vue

@@ -1,6 +1,5 @@
 <template>
   <WindowDialog
-    v-if="shouldShowWelcome"
     v-model="showDialog"
     title="Welcome to ShellHub!"
     :description="`Step ${currentStep} of 4`"
@@ -85,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import WelcomeFirstScreen from "./WelcomeFirstScreen.vue";
 import WelcomeSecondScreen from "./WelcomeSecondScreen.vue";
 import WelcomeThirdScreen from "./WelcomeThirdScreen.vue";
@@ -97,7 +96,6 @@ import { IDevice } from "@/interfaces/IDevice";
 import useDevicesStore from "@/store/modules/devices";
 import useStatsStore from "@/store/modules/stats";
 import useAuthStore from "@/store/modules/auth";
-import useNamespacesStore from "@/store/modules/namespaces";
 
 type PollingTimer = ReturnType<typeof setInterval>;
 
@@ -108,30 +106,18 @@ interface StepConfig {
 
 const showDialog = ref(false);
 const authStore = useAuthStore();
-const namespacesStore = useNamespacesStore();
 const devicesStore = useDevicesStore();
 const statsStore = useStatsStore();
 const snackbar = useSnackbar();
 const currentStep = ref<number>(1);
 const firstPendingDevice = ref<IDevice>();
 const pollingTimer = ref<PollingTimer | undefined>(undefined);
 const hasDeviceDetected = ref(false);
-const tenantId = computed(() => namespacesStore.currentNamespace.tenant_id);
-const hasNamespaces = computed(() => namespacesStore.namespaceList.length > 0);
+const tenantId = computed(() => authStore.tenantId);
 
 const namespaceHasBeenShown = () => (
   (JSON.parse(localStorage.getItem("namespacesWelcome") ?? "{}") as Record<string, boolean>)[tenantId.value] !== undefined);
 
-const hasDevices = ref(false);
-
-const shouldShowWelcome = computed(() => hasNamespaces.value && !namespaceHasBeenShown() && !hasDevices.value);
-
-watch(shouldShowWelcome, (newValue) => {
-  if (!newValue) return;
-  authStore.setShowWelcomeScreen(tenantId.value);
-  showDialog.value = true;
-});
-
 const stopDevicePolling = () => {
   if (pollingTimer.value) {
     clearInterval(pollingTimer.value);
@@ -198,12 +184,23 @@ const stepConfigs: Record<number, StepConfig> = {
 const currentStepConfig = computed(() => stepConfigs[currentStep.value]);
 const handleConfirm = async () => { await currentStepConfig.value.action(); };
 
-onMounted(() => {
-  hasDevices.value = (
+onMounted(async () => {
+  if (!tenantId.value) return;
+
+  await statsStore.fetchStats();
+
+  const hasDevices = (
     statsStore.stats.registered_devices > 0
     || statsStore.stats.pending_devices > 0
     || statsStore.stats.rejected_devices > 0
   );
+
+  const shouldShowWelcome = !namespaceHasBeenShown() && !hasDevices;
+
+  if (shouldShowWelcome) {
+    authStore.setShowWelcomeScreen(tenantId.value);
+    showDialog.value = true;
+  }
 });
 
 defineExpose({ currentStep, hasDeviceDetected, showDialog });

ui/tests/components/Welcome/Welcome.spec.ts

@@ -1,55 +1,33 @@
 import { createPinia, setActivePinia } from "pinia";
 import { DOMWrapper, flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { createVuetify } from "vuetify";
-import { expect, describe, it, beforeEach, vi, afterEach } from "vitest";
+import { expect, describe, it, vi, afterEach } from "vitest";
 import Welcome from "@/components/Welcome/Welcome.vue";
 import { SnackbarPlugin } from "@/plugins/snackbar";
-import useNamespacesStore from "@/store/modules/namespaces";
 import useStatsStore from "@/store/modules/stats";
 
-const mockNamespace = {
-  tenant_id: "test-tenant",
-  name: "test-namespace",
-  members: [],
-  max_devices: 10,
-  owner: "owner-id",
-  created_at: "",
-  settings: {
-    session_record: false,
-  },
-  devices_accepted_count: 0,
-  devices_pending_count: 0,
-  devices_rejected_count: 0,
-  billing: null,
-  type: "personal" as const,
-};
-
 describe("Welcome", () => {
   let wrapper: VueWrapper<InstanceType<typeof Welcome>>;
   const vuetify = createVuetify();
+  localStorage.setItem("tenant", "test-tenant");
   setActivePinia(createPinia());
-  const namespacesStore = useNamespacesStore();
   const statsStore = useStatsStore();
+  statsStore.fetchStats = vi.fn().mockResolvedValue({
+    registered_devices: 0,
+    pending_devices: 0,
+    rejected_devices: 0,
+    online_devices: 0,
+    active_sessions: 0,
+  });
 
-  beforeEach(() => {
-    vi.spyOn(Storage.prototype, "getItem").mockReturnValue("{}");
-    vi.spyOn(Storage.prototype, "setItem");
-    namespacesStore.currentNamespace = mockNamespace;
-    namespacesStore.namespaceList = [mockNamespace];
-    statsStore.stats = {
-      registered_devices: 0,
-      pending_devices: 0,
-      rejected_devices: 0,
-      online_devices: 0,
-      active_sessions: 0,
-    };
-
+  const mountWrapper = () => {
     wrapper = mount(Welcome, { global: { plugins: [vuetify, SnackbarPlugin] } });
-  });
+  };
 
-  afterEach(() => { wrapper.unmount(); });
+  afterEach(() => { wrapper?.unmount(); });
 
   it("Enables 'Next' (confirm) button when the user sets up a device on step 2", async () => {
+    mountWrapper();
     await flushPromises();
 
     wrapper.vm.currentStep = 2;
@@ -65,8 +43,8 @@ describe("Welcome", () => {
   });
 
   it("Does not render when namespace has already been shown", async () => {
-    vi.spyOn(Storage.prototype, "getItem").mockReturnValue('{"test-tenant":true}');
-
+    localStorage.setItem("namespacesWelcome", "{\"test-tenant\":true}");
+    mountWrapper();
     await flushPromises();
 
     const dialog = new DOMWrapper(document.body);
@@ -76,14 +54,16 @@ describe("Welcome", () => {
   it("Does not render when namespace has devices", async () => {
     statsStore.stats.registered_devices = 1;
 
+    mountWrapper();
     await flushPromises();
 
     const dialog = new DOMWrapper(document.body);
     expect(dialog.find('[data-test="welcome-window"]').exists()).toBe(false);
   });
 
-  it("Does not render when hasNamespaces is false", async () => {
-    namespacesStore.namespaceList = [];
+  it("Does not render when tenant ID doesn't exist", async () => {
+    localStorage.removeItem("tenant");
+    mountWrapper();
     await flushPromises();
     const dialog = new DOMWrapper(document.body);
     expect(dialog.find('[data-test="welcome-window"]').exists()).toBe(false);

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

@@ -337,7 +337,8 @@ exports[`App Layout Component > Renders the component 1`] = `
 </div>
 <!--teleport end-->
 <!--v-if-->
-<!--v-if-->
+<!---->
+<!---->
 <!--v-if-->
 <!---->
 <!---->