[full-ci] Show bell based on capabilities

changelog/unreleased/enhancement-notification-bell

@@ -0,0 +1,6 @@
+Enhancement: Rework notifications
+
+We've added the notification capability to enable the notification bell
+
+https://github.com/owncloud/web/pull/8450
+https://github.com/owncloud/web/issues/8452

packages/web-client/src/ocs/capabilities.ts

@@ -4,6 +4,9 @@ import get from 'lodash-es/get'
 /* eslint-disable camelcase */
 export interface Capabilities {
   capabilities: {
+    notifications: {
+      ocs_endpoints: string[]
+    }
     core: {
       pollinterval: number
       status: {

packages/web-pkg/src/composables/capability/useCapability.ts

@@ -81,3 +81,7 @@ export const useCapabilityFilesSharingPublicAlias = createCapabilityComposable(
   'files_sharing.public.alias',
   false
 )
+export const useCapabilityNotifications = createCapabilityComposable(
+  'notifications.ocs-endpoints',
+  []
+)

packages/web-runtime/src/components/Topbar/Notifications.vue

@@ -22,7 +22,10 @@
       class="oc-overflow-auto oc-width-3-4 oc-width-large@s"
       padding-size="small"
     >
-      <div v-for="(el, index) in activeNotifications" :key="index" class="oc-width-1-1">
+      <div v-if="!activeNotifications.length">
+        <span v-text="$gettext('Nothing new')" />
+      </div>
+      <div v-for="(el, index) in activeNotifications" v-else :key="index" class="oc-width-1-1">
         <h4 v-text="el.subject" />
         <p v-if="el.message" class="oc-text-small">{{ el.message }}</p>
         <p>

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -31,6 +31,8 @@ import UserMenu from './UserMenu.vue'
 import Notifications from './Notifications.vue'
 import FeedbackLink from './FeedbackLink.vue'
 import ThemeSwitcher from './ThemeSwitcher.vue'
+import { useCapabilityNotifications } from 'web-pkg/src'
+import { computed, unref } from 'vue'
 
 export default {
   components: {
@@ -53,6 +55,17 @@ export default {
       default: () => []
     }
   },
+  setup() {
+    const notificationsSupport = useCapabilityNotifications()
+
+    const isNotificationBellEnabled = computed(() => {
+      return unref(notificationsSupport)?.includes('list') || false
+    })
+
+    return {
+      isNotificationBellEnabled
+    }
+  },
   computed: {
     ...mapGetters(['configuration', 'user']),
 
@@ -96,10 +109,6 @@ export default {
       }
     },
 
-    isNotificationBellEnabled() {
-      return this.user?.id && this.activeNotifications.length
-    },
-
     isUserMenuEnabled() {
       return this.user?.id
     }

packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts

@@ -32,14 +32,40 @@ jest.spyOn((TopBar as any).mixins[0].methods, 'navigation_getMenuItems').mockImp
 describe('Top Bar component', () => {
   it('Displays applications menu', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.html().indexOf('applications-menu-stub')).toBeGreaterThan(-1)
+    expect(wrapper.find('applications-menu-stub').exists()).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('should display notifications bell', () => {
+    const { wrapper } = getWrapper({
+      notifications: {
+        'ocs-endpoints': ['list', 'get', 'delete']
+      }
+    })
+    expect(wrapper.find('notifications-stub').exists()).toBeTruthy()
+  })
+  it('should not display notifications bell if notifications capability is missing', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find('notifications-stub').exists()).toBeFalsy()
+  })
+  it('should not display notifications bell if endpoint list is missing', () => {
+    const { wrapper } = getWrapper({
+      notifications: {
+        'ocs-endpoints': []
+      }
+    })
+    expect(wrapper.find('notifications-stub').exists()).toBeFalsy()
+  })
 })
 
-const getWrapper = () => {
+const getWrapper = (capabilities = {}) => {
   const mocks = { ...defaultComponentMocks() }
-  const storeOptions = defaultStoreMockOptions
+  const storeOptions = {
+    ...defaultStoreMockOptions,
+    getters: {
+      ...defaultStoreMockOptions.getters,
+      capabilities: () => capabilities
+    }
+  }
   storeOptions.getters.configuration.mockImplementation(() => ({
     options: { disableFeedbackLink: false },
     themes: {
@@ -61,7 +87,7 @@ const getWrapper = () => {
       },
       global: {
         plugins: [...defaultPlugins(), store],
-        stubs: { 'router-link': true, 'portal-target': true },
+        stubs: { 'router-link': true, 'portal-target': true, notifications: true },
         mocks
       }
     })

packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap

@@ -16,4 +16,4 @@ exports[`Top Bar component Displays applications menu 1`] = `
     <user-menu-stub applicationslist="[object Object],[object Object],[object Object]"></user-menu-stub>
   </div>
 </header>
-`;
+`;