From 6d6cf05a412606f5d8e961da951a58638bc78a1d Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 11:49:49 +0100 Subject: [PATCH 1/8] Show notification bell based on capabilities --- packages/web-client/src/ocs/capabilities.ts | 3 +++ .../src/composables/capability/useCapability.ts | 1 + .../src/components/Topbar/TopBar.vue | 17 +++++++++++++---- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts index 85433337aaf..5ae35c573a4 100644 --- a/packages/web-client/src/ocs/capabilities.ts +++ b/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: { diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts index 94918e5253a..a6b0e30bf12 100644 --- a/packages/web-pkg/src/composables/capability/useCapability.ts +++ b/packages/web-pkg/src/composables/capability/useCapability.ts @@ -81,3 +81,4 @@ export const useCapabilityFilesSharingPublicAlias = createCapabilityComposable( 'files_sharing.public.alias', false ) +export const useCapabilityNotifications = createCapabilityComposable('notifications', {}) diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue index c912248ce7d..8a1d9cda823 100644 --- a/packages/web-runtime/src/components/Topbar/TopBar.vue +++ b/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)?.['ocs-endpoints']?.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 } From 22c63de034c47906e0ebce8343e654a7ab7da5ee Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 12:08:48 +0100 Subject: [PATCH 2/8] Add unittests --- .../unit/components/Topbar/TopBar.spec.ts | 39 ++++++++++++-- .../Topbar/__snapshots__/TopBar.spec.ts.snap | 54 +++++++++++++++++++ 2 files changed, 90 insertions(+), 3 deletions(-) diff --git a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts index fffc1a27313..3ec37202f4c 100644 --- a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts +++ b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts @@ -35,11 +35,44 @@ describe('Top Bar component', () => { expect(wrapper.html().indexOf('applications-menu-stub')).toBeGreaterThan(-1) expect(wrapper.html()).toMatchSnapshot() }) + it('should display notifications bell', () => { + const { wrapper } = getWrapper({ + notifications: { + 'ocs-endpoints': [ + 'list', + 'get', + 'delete' + ] + } + }) + expect(wrapper.html().indexOf('notifications-stub')).toBeGreaterThan(-1) + expect(wrapper.html()).toMatchSnapshot() + }) + it('should not display notifications bell if notifications capability is missing', () => { + const { wrapper } = getWrapper() + expect(wrapper.html().indexOf('notifications-stub')).toBe(-1) + expect(wrapper.html()).toMatchSnapshot() + }) + it('should not display notifications bell if endpoint list is missing', () => { + const { wrapper } = getWrapper({ + notifications: { + 'ocs-endpoints': [] + } + }) + expect(wrapper.html().indexOf('notifications-stub')).toBe(-1) + expect(wrapper.html()).toMatchSnapshot() + }) }) -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 +94,7 @@ const getWrapper = () => { }, global: { plugins: [...defaultPlugins(), store], - stubs: { 'router-link': true, 'portal-target': true }, + stubs: { 'router-link': true, 'portal-target': true, 'notifications': true }, mocks } }) diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap index 68cc31c53b6..00158eb6647 100644 --- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap +++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap @@ -17,3 +17,57 @@ exports[`Top Bar component Displays applications menu 1`] = ` `; + +exports[`Top Bar component should display notifications bell 1`] = ` +
+
+ + +
+
+ +
+
+ + + + +
+
+`; + +exports[`Top Bar component should not display notifications bell if endpoint list is missing 1`] = ` +
+
+ + +
+
+ +
+
+ + + + +
+
+`; + +exports[`Top Bar component should not display notifications bell if notifications capability is missing 1`] = ` +
+
+ + +
+
+ +
+
+ + + + +
+
+`; From f189e3b22c670e70b7ed1485809cf5fb1af9446c Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 12:21:26 +0100 Subject: [PATCH 3/8] Add changelog, Add no notification case --- changelog/unreleased/enhancement-notification-bell | 5 +++++ .../src/components/Topbar/Notifications.vue | 5 ++++- .../tests/unit/components/Topbar/TopBar.spec.ts | 10 +++------- 3 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 changelog/unreleased/enhancement-notification-bell diff --git a/changelog/unreleased/enhancement-notification-bell b/changelog/unreleased/enhancement-notification-bell new file mode 100644 index 00000000000..d836556dae0 --- /dev/null +++ b/changelog/unreleased/enhancement-notification-bell @@ -0,0 +1,5 @@ +Enhancement: Rework notifications + +We've added the notification capability to enable the notification bell + +https://github.com/owncloud/web/pull/8450 \ No newline at end of file diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue index 7746d19db0c..be0cfaa5a69 100644 --- a/packages/web-runtime/src/components/Topbar/Notifications.vue +++ b/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" > -
+
+ +
+

{{ el.message }}

diff --git a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts index 3ec37202f4c..a064be11d8c 100644 --- a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts +++ b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts @@ -38,11 +38,7 @@ describe('Top Bar component', () => { it('should display notifications bell', () => { const { wrapper } = getWrapper({ notifications: { - 'ocs-endpoints': [ - 'list', - 'get', - 'delete' - ] + 'ocs-endpoints': ['list', 'get', 'delete'] } }) expect(wrapper.html().indexOf('notifications-stub')).toBeGreaterThan(-1) @@ -70,7 +66,7 @@ const getWrapper = (capabilities = {}) => { ...defaultStoreMockOptions, getters: { ...defaultStoreMockOptions.getters, - capabilities: () => (capabilities) + capabilities: () => capabilities } } storeOptions.getters.configuration.mockImplementation(() => ({ @@ -94,7 +90,7 @@ const getWrapper = (capabilities = {}) => { }, global: { plugins: [...defaultPlugins(), store], - stubs: { 'router-link': true, 'portal-target': true, 'notifications': true }, + stubs: { 'router-link': true, 'portal-target': true, notifications: true }, mocks } }) From 7b87bfaf52ad3bc619fb4282a4f6bbe67cc3cf2b Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 14:13:00 +0100 Subject: [PATCH 4/8] Address PR issues --- .../composables/capability/useCapability.ts | 5 +- .../src/components/Topbar/TopBar.vue | 2 +- .../unit/components/Topbar/TopBar.spec.ts | 11 ++-- .../Topbar/__snapshots__/TopBar.spec.ts.snap | 56 +------------------ 4 files changed, 10 insertions(+), 64 deletions(-) diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts index a6b0e30bf12..9abc8fda9cf 100644 --- a/packages/web-pkg/src/composables/capability/useCapability.ts +++ b/packages/web-pkg/src/composables/capability/useCapability.ts @@ -81,4 +81,7 @@ export const useCapabilityFilesSharingPublicAlias = createCapabilityComposable( 'files_sharing.public.alias', false ) -export const useCapabilityNotifications = createCapabilityComposable('notifications', {}) +export const useCapabilityNotifications = createCapabilityComposable( + 'notifications.ocs-endpoints', + [] +) diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue index 8a1d9cda823..35cf3e2c4de 100644 --- a/packages/web-runtime/src/components/Topbar/TopBar.vue +++ b/packages/web-runtime/src/components/Topbar/TopBar.vue @@ -59,7 +59,7 @@ export default { const notificationsSupport = useCapabilityNotifications() const isNotificationBellEnabled = computed(() => { - return unref(notificationsSupport)?.['ocs-endpoints']?.includes('list') || false + return unref(notificationsSupport)?.includes('list') || false }) return { diff --git a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts index a064be11d8c..af1e63423db 100644 --- a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts +++ b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts @@ -32,7 +32,7 @@ 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', () => { @@ -41,13 +41,11 @@ describe('Top Bar component', () => { 'ocs-endpoints': ['list', 'get', 'delete'] } }) - expect(wrapper.html().indexOf('notifications-stub')).toBeGreaterThan(-1) - expect(wrapper.html()).toMatchSnapshot() + expect(wrapper.find('notifications-stub').exists()).toBeTruthy() }) it('should not display notifications bell if notifications capability is missing', () => { const { wrapper } = getWrapper() - expect(wrapper.html().indexOf('notifications-stub')).toBe(-1) - expect(wrapper.html()).toMatchSnapshot() + expect(wrapper.find('notifications-stub').exists()).toBeFalsy() }) it('should not display notifications bell if endpoint list is missing', () => { const { wrapper } = getWrapper({ @@ -55,8 +53,7 @@ describe('Top Bar component', () => { 'ocs-endpoints': [] } }) - expect(wrapper.html().indexOf('notifications-stub')).toBe(-1) - expect(wrapper.html()).toMatchSnapshot() + expect(wrapper.find('notifications-stub').exists()).toBeFalsy() }) }) diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap index 00158eb6647..b6f6ed2b550 100644 --- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap +++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/TopBar.spec.ts.snap @@ -16,58 +16,4 @@ exports[`Top Bar component Displays applications menu 1`] = `

-`; - -exports[`Top Bar component should display notifications bell 1`] = ` -
-
- - -
-
- -
-
- - - - -
-
-`; - -exports[`Top Bar component should not display notifications bell if endpoint list is missing 1`] = ` -
-
- - -
-
- -
-
- - - - -
-
-`; - -exports[`Top Bar component should not display notifications bell if notifications capability is missing 1`] = ` -
-
- - -
-
- -
-
- - - - -
-
-`; +`; \ No newline at end of file From 5a4c83e7d4f348c467e4893b4cd6f1aa372a97c2 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 14:13:37 +0100 Subject: [PATCH 5/8] Add issue to changelog --- changelog/unreleased/enhancement-notification-bell | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/changelog/unreleased/enhancement-notification-bell b/changelog/unreleased/enhancement-notification-bell index d836556dae0..fffdc2bd73e 100644 --- a/changelog/unreleased/enhancement-notification-bell +++ b/changelog/unreleased/enhancement-notification-bell @@ -2,4 +2,5 @@ Enhancement: Rework notifications We've added the notification capability to enable the notification bell -https://github.com/owncloud/web/pull/8450 \ No newline at end of file +https://github.com/owncloud/web/pull/8450 +https://github.com/owncloud/web/issues/8452 \ No newline at end of file From cc07c9fd1e22009d4c160a17e5b4f6c9bee41ffa Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 14:25:54 +0100 Subject: [PATCH 6/8] Address PR issue --- packages/web-runtime/src/components/Topbar/TopBar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue index 35cf3e2c4de..f6d961cdbcc 100644 --- a/packages/web-runtime/src/components/Topbar/TopBar.vue +++ b/packages/web-runtime/src/components/Topbar/TopBar.vue @@ -59,7 +59,7 @@ export default { const notificationsSupport = useCapabilityNotifications() const isNotificationBellEnabled = computed(() => { - return unref(notificationsSupport)?.includes('list') || false + return unref(notificationsSupport).includes('list') }) return { From 61c3bf739319565418c20b8d5f0546209d162d07 Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 14:43:36 +0100 Subject: [PATCH 7/8] Address PR issues --- .../unreleased/enhancement-notification-bell | 2 +- .../src/components/Topbar/Notifications.vue | 68 ++++++++++--------- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/changelog/unreleased/enhancement-notification-bell b/changelog/unreleased/enhancement-notification-bell index fffdc2bd73e..0ff8e960048 100644 --- a/changelog/unreleased/enhancement-notification-bell +++ b/changelog/unreleased/enhancement-notification-bell @@ -1,6 +1,6 @@ Enhancement: Rework notifications -We've added the notification capability to enable the notification bell +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 \ No newline at end of file diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue index be0cfaa5a69..52669d4e648 100644 --- a/packages/web-runtime/src/components/Topbar/Notifications.vue +++ b/packages/web-runtime/src/components/Topbar/Notifications.vue @@ -22,41 +22,47 @@ class="oc-overflow-auto oc-width-3-4 oc-width-large@s" padding-size="small" > -
- -
-
-

-

{{ el.message }}

-

- {{ el.link }} -

-
-
From dd2d4f35cf5d0882c5596f15a95b57beeb7f330f Mon Sep 17 00:00:00 2001 From: Paul Neubauer Date: Thu, 16 Feb 2023 15:11:03 +0100 Subject: [PATCH 8/8] Remove acceptance test that checks for bell to disappear --- .../webUINotifications/displayNotificationsOnWebUI.feature | 1 - tests/acceptance/stepDefinitions/notificationsContext.js | 4 ---- 2 files changed, 5 deletions(-) diff --git a/tests/acceptance/features/webUINotifications/displayNotificationsOnWebUI.feature b/tests/acceptance/features/webUINotifications/displayNotificationsOnWebUI.feature index 527a8ad0bd4..d4b6961f88f 100644 --- a/tests/acceptance/features/webUINotifications/displayNotificationsOnWebUI.feature +++ b/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 diff --git a/tests/acceptance/stepDefinitions/notificationsContext.js b/tests/acceptance/stepDefinitions/notificationsContext.js index 1997236ed41..797fc2c1012 100644 --- a/tests/acceptance/stepDefinitions/notificationsContext.js +++ b/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) {