feat: New notification panel for unread notifications (#4061)

Fixes: #4052

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -8,6 +8,7 @@
       :active-menu-item="activePrimaryMenu.key"
       @toggle-accounts="toggleAccountModal"
       @key-shortcut-modal="toggleKeyShortcutModal"
+      @open-notification-panel="openNotificationPanel"
     />
     <secondary-sidebar
       :account-id="accountId"
@@ -176,6 +177,9 @@ export default {
     showAddLabelPopup() {
       this.$emit('show-add-label-popup');
     },
+    openNotificationPanel() {
+      this.$emit('open-notification-panel');
+    },
   },
 };
 </script>

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="notifications-link">
-    <primary-nav-item
-      name="NOTIFICATIONS"
-      icon="alert"
-      :to="`/app/accounts/${accountId}/notifications`"
-      :count="unreadCount"
-    />
+    <woot-button
+      class-names="notifications-link--button"
+      variant="clear"
+      color-scheme="secondary"
+      :class="{ 'is-active': isNotificationPanelActive }"
+      @click="openNotificationPanel"
+    >
+      <fluent-icon icon="alert" />
+      <span v-if="unreadCount" class="badge warning">{{ unreadCount }}</span>
+    </woot-button>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import PrimaryNavItem from './PrimaryNavItem';
 
 export default {
-  components: { PrimaryNavItem },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -28,8 +30,17 @@ export default {
         ? `${this.notificationMetadata.unreadCount}`
         : '99+';
     },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('open-notification-panel');
+      }
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -37,4 +48,32 @@ export default {
 .notifications-link {
   margin-bottom: var(--space-small);
 }
+
+.badge {
+  position: absolute;
+  right: var(--space-minus-smaller);
+  top: var(--space-minus-smaller);
+}
+.notifications-link--button {
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius-large);
+  border: 1px solid transparent;
+  color: var(--s-600);
+  margin: var(--space-small) 0;
+
+  &:hover {
+    background: var(--w-50);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-500);
+  }
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -16,7 +16,7 @@
       />
     </nav>
     <div class="menu vertical user-menu">
-      <notification-bell />
+      <notification-bell @open-notification-panel="openNotificationPanel" />
       <agent-details @toggle-menu="toggleOptions" />
       <options-menu
         :show="showOptionsMenu"
@@ -83,6 +83,9 @@ export default {
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
+    openNotificationPanel() {
+      this.$emit('open-notification-panel');
+    },
   },
 };
 </script>

app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js

@@ -14,6 +14,10 @@ const i18nConfig = new VueI18n({
   messages: i18n,
 });
 
+const $route = {
+  name: 'notifications_index',
+};
+
 describe('notificationBell', () => {
   const accountId = 1;
   const notificationMetadata = { unreadCount: 19 };
@@ -45,24 +49,40 @@ describe('notificationBell', () => {
   });
 
   it('it should return unread count 19 ', () => {
-    const notificationBell = shallowMount(NotificationBell, {
-      store,
+    const wrapper = shallowMount(NotificationBell, {
       localVue,
       i18n: i18nConfig,
+      store,
+      mocks: {
+        $route,
+      },
     });
-
-    const statusViewTitle = notificationBell.find('primary-nav-item-stub');
-    expect(statusViewTitle.vm.count).toBe('19');
+    expect(wrapper.vm.unreadCount).toBe('19');
   });
 
   it('it should return unread count 99+ ', async () => {
-    notificationMetadata.unreadCount = 101;
+    notificationMetadata.unreadCount = 100;
+    const wrapper = shallowMount(NotificationBell, {
+      localVue,
+      i18n: i18nConfig,
+      store,
+      mocks: {
+        $route,
+      },
+    });
+    expect(wrapper.vm.unreadCount).toBe('99+');
+  });
+
+  it('isNotificationPanelActive', async () => {
     const notificationBell = shallowMount(NotificationBell, {
       store,
       localVue,
       i18n: i18nConfig,
+      mocks: {
+        $route,
+      },
     });
-    const statusViewTitle = notificationBell.find('primary-nav-item-stub');
-    expect(statusViewTitle.vm.count).toBe('99+');
+
+    expect(notificationBell.vm.isNotificationPanelActive).toBe(true);
   });
 });