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

@@ -273,7 +273,7 @@ exports[`App Layout Component > Renders the component 1`] = `
           <!---->
           <!---->
           <!--teleport start-->
-          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-8" aria-owns="v-menu-v-8"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-6" aria-owns="v-menu-v-6"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
             <!----><span class="v-btn__content" data-no-activator=""><div class="d-flex align-center ga-2"><span class="v-chip v-chip--label v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal text-uppercase" draggable="false"><!----><span class="v-chip__underlay"></span>
             <!---->
             <!---->
@@ -294,20 +294,16 @@ exports[`App Layout Component > Renders the component 1`] = `
         </ul>
       </div>
       <div class="v-spacer"></div>
-      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-12" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-10" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
           <!---->
           <!---->
         </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>
+        <!--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-18" aria-owns="v-menu-v-18" 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>
       </div></span>
       <!---->