feat(ui): add pending devices count badge to DevicesDropdown

Author: luizhf42

ui/src/components/AppBar/DevicesDropdown.vue

@@ -1,11 +1,22 @@
 <template>
-  <v-icon
-    color="primary"
-    aria-label="Open devices menu"
-    icon="mdi-developer-board"
-    data-test="devices-icon"
-    @click="toggleDrawer"
-  />
+  <v-badge
+    :model-value="pendingDevicesCount > 0"
+    :content="pendingDevicesCount"
+    offset-y="-5"
+    location="top right"
+    color="success"
+    size="x-small"
+    data-test="device-dropdown-badge"
+    :class="{ 'mr-1': pendingDevicesCount > 0 }"
+  >
+    <v-icon
+      color="primary"
+      aria-label="Open devices menu"
+      icon="mdi-developer-board"
+      data-test="devices-icon"
+      @click="toggleDrawer"
+    />
+  </v-badge>
 
   <Teleport to="body">
     <v-navigation-drawer
@@ -140,7 +151,7 @@
                 class="overflow-y-auto border"
               >
                 <v-list
-                  v-if="pendingDevicesList.length > 0"
+                  v-if="pendingDevicesCount > 0"
                   density="compact"
                   class="bg-v-theme-surface pa-0"
                 >
@@ -327,6 +338,7 @@ const snackbar = useSnackbar();
 const isDrawerOpen = ref(false);
 const activeTab = ref<"pending" | "recent">("pending");
 const pendingDevicesList = ref<IDevice[]>([]);
+const pendingDevicesCount = computed(() => pendingDevicesList.value.length);
 const recentDevicesList = ref<IDevice[]>([]);
 const stats = computed(() => statsStore.stats);
 const offlineDevices = computed(

ui/tests/components/AppBar/DevicesDropdown.spec.ts

@@ -15,6 +15,7 @@ import useDevicesStore from "@/store/modules/devices";
 import { IDevice } from "@/interfaces/IDevice";
 import { IStats } from "@/interfaces/IStats";
 import useAuthStore from "@/store/modules/auth";
+import { nextTick } from "vue";
 
 const Component = {
   template: "<v-layout><DevicesDropdown /></v-layout>",
@@ -284,6 +285,17 @@ describe("Device Management Dropdown", () => {
     expect(fetchDevicesSpy).toHaveBeenCalledWith({ status: "pending", perPage: 100 });
   });
 
+  it("Shows correct pending devices count in badge", async () => {
+    const badge = wrapper.find('[data-test="device-dropdown-badge"]');
+    drawer.vm.pendingDevicesList = mockPendingDevices;
+    await nextTick();
+    expect(badge.text()).toBe("2");
+
+    drawer.vm.pendingDevicesList = [];
+    await nextTick();
+    expect(badge.text()).toBe("0");
+  });
+
   it("Shows error snackbar when accept fails", async () => {
     mockDevicesApi
       .onPatch(`http://localhost:3000/api/devices/${mockPendingDevices[0].uid}/accept`)

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

@@ -40,7 +40,12 @@ exports[`AppBar Component > Renders the component 1`] = `
         <!---->
       </button>
       <!--teleport start-->
-      <!--teleport end--><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>
+      <!--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>
       <!--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

@@ -312,7 +312,12 @@ exports[`App Layout Component > Renders the component 1`] = `
           <!---->
         </button>
         <!--teleport start-->
-        <!--teleport end--><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>
+        <!--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>
         <!--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-21" aria-owns="v-menu-v-21" 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>