fix(ui): hide DevicesDropdown if user doesn't have namespaces

Author: luizhf42

ui/src/components/AppBar/DevicesDropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <v-badge
+    v-if="hasNamespaces"
     :model-value="pendingDevicesCount > 0"
     :content="pendingDevicesCount"
     offset-y="-5"
@@ -346,6 +347,7 @@ const stats = computed(() => statsStore.stats);
 const offlineDevices = computed(
   () => stats.value.registered_devices - stats.value.online_devices,
 );
+const hasNamespaces = computed(() => namespacesStore.namespaceList.length > 0);
 const toggleDrawer = () => {
   isDrawerOpen.value = !isDrawerOpen.value;
 };
@@ -392,7 +394,7 @@ const fetchRecentDevices = async () => {
 };
 
 onBeforeMount(async () => {
-  if (namespacesStore.namespaceList.length === 0) return;
+  if (!hasNamespaces.value) return;
   await fetchStats();
   await fetchPendingDevices();
   await fetchRecentDevices();

ui/tests/components/AppBar/__snapshots__/AppBar.spec.ts.snap

@@ -43,11 +43,7 @@ exports[`AppBar Component > Renders the component 1`] = `
       </button>
       <!--teleport start-->
       <!--teleport end-->
-      <div class="v-badge" size="x-small" data-test="device-dropdown-badge">
-        <div class="v-badge__wrapper"><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
-          <transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light bg-success" style="bottom: calc(100% - 7px); left: calc(100% - 12px); display: none;" aria-atomic="true" aria-label="Badge" aria-live="polite" role="status">0</span></transition-stub>
-        </div>
-      </div>
+      <!--v-if-->
       <!--teleport start-->
       <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-14" aria-owns="v-menu-v-14" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
         <!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="[email protected]" data-test="user-icon"><div data-v-09753bb1="" class="v-responsive v-img v-img--booting" data-test="gravatar-image"><div class="v-responsive__sizer"></div><!----><transition-stub name="fade-transition" appear="false" persisted="false" css="true"><!----></transition-stub><!----><!----><!----><!----></div><!----><span class="v-avatar__underlay"></span>

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

@@ -308,11 +308,7 @@ exports[`App Layout Component > Renders the component 1`] = `
         </button>
         <!--teleport start-->
         <!--teleport end-->
-        <div class="v-badge" size="x-small" data-test="device-dropdown-badge">
-          <div class="v-badge__wrapper"><i class="mdi-developer-board mdi v-icon notranslate v-theme--light v-icon--size-default text-primary v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Open devices menu" data-test="devices-icon"></i>
-            <transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light bg-success" style="bottom: calc(100% - 7px); left: calc(100% - 12px); display: none;" aria-atomic="true" aria-label="Badge" aria-live="polite" role="status">0</span></transition-stub>
-          </div>
-        </div>
+        <!--v-if-->
         <!--teleport start-->
         <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-20" aria-owns="v-menu-v-20" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="" data-test="user-icon"><i data-v-09753bb1="" class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default text-surface" aria-hidden="true" data-test="gravatar-placeholder"></i><!----><span class="v-avatar__underlay"></span>