[full-ci] Show bell based on capabilities

changelog/unreleased/enhancement-notification-bell

@@ -0,0 +1,6 @@
+Enhancement: Rework notifications
+
+We're now showing the notification bell based on whether the server supports notifications. Previously it was hidden when there were no notifications.
+
+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,38 +22,47 @@
       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">
-        <h4 v-text="el.subject" />
-        <p v-if="el.message" class="oc-text-small">{{ el.message }}</p>
-        <p>
-          <a v-if="shouldDisplayLink(el)" :href="el.link" target="_blank">{{ el.link }}</a>
-        </p>
-        <div class="oc-width-1-1 oc-flex-right">
-          <template v-if="el.actions.length !== 0">
+      <template v-if="!activeNotifications.length">
+        <div>
+          <span v-text="$gettext('Nothing new')" />
+        </div>
+      </template>
+      <template v-else>
+        <div v-for="(el, index) in activeNotifications" :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>
+            <a v-if="shouldDisplayLink(el)" :href="el.link" target="_blank">{{ el.link }}</a>
+          </p>
+          <div class="oc-width-1-1 oc-flex-right">
+            <template v-if="el.actions.length !== 0">
+              <oc-button
+                v-for="(action, actionIndex) in el.actions"
+                :key="index + '-' + actionIndex"
+                size="small"
+                :variation="action.primary ? 'primary' : 'passive'"
+                appearance="filled"
+                class="oc-ml-s"
+                @click.prevent="
+                  executeRequest(el.app, action.link, action.type, el.notification_id)
+                "
+                >{{ action.label }}</oc-button
+              >
+            </template>
             <oc-button
-              v-for="(action, actionIndex) in el.actions"
-              :key="index + '-' + actionIndex"
+              v-else
+              id="resolve-notification-button"
               size="small"
-              :variation="action.primary ? 'primary' : 'passive'"
-              appearance="filled"
-              class="oc-ml-s"
-              @click.prevent="executeRequest(el.app, action.link, action.type, el.notification_id)"
-              >{{ action.label }}</oc-button
+              @click.prevent.once="
+                deleteNotification({ client: $client, notification: el.notification_id })
+              "
             >
-          </template>
-          <oc-button
-            v-else
-            id="resolve-notification-button"
-            size="small"
-            @click.prevent.once="
-              deleteNotification({ client: $client, notification: el.notification_id })
-            "
-          >
-            Mark as read
-          </oc-button>
+              Mark as read
+            </oc-button>
+          </div>
+          <hr v-if="index + 1 !== activeNotifications.length" />
         </div>
-        <hr v-if="index + 1 !== activeNotifications.length" />
-      </div>
+      </template>
     </oc-drop>
   </div>
 </template>

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')
+    })
+
+    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>
-`;
+`;

tests/acceptance/features/webUINotifications/displayNotificationsOnWebUI.feature

@@ -19,4 +19,3 @@ Feature: display notifications on the webUI
     When user "Alice" is sent a notification in the server
     Then the user should see the notification bell on the webUI after a page reload
     And the user marks the notification as read
-    And the notification bell should disappear on the webUI

tests/acceptance/stepDefinitions/notificationsContext.js

@@ -24,10 +24,6 @@ Then('the user should see the notification bell on the webUI after a page reload
   return client.page.webPage().waitForElementVisible('@notificationBell')
 })
 
-Then('the notification bell should disappear on the webUI', function () {
-  return client.page.webPage().waitForElementNotPresent('@notificationBell')
-})
-
 Then(
   'the user should see {int} notifications on the webUI with these details',
   async function (numberOfNotifications, dataTable) {