From 7c85dd1538992f2cfa861e47ac687e31766de83d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 19 Jul 2023 09:51:37 +0200
Subject: [PATCH 01/29] Implement PoC Polyfill

---
 package.json                                  |  1 +
 .../src/components/Topbar/Notifications.vue   | 39 +++++++++++++++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 740446a852c..0198a0c4c83 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "not OperaMobile > 0"
   ],
   "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@vue/compiler-dom": "3.3.4",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/runtime-dom": "3.3.4",
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 4dfd6cf0d71..d5420bf0857 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -96,12 +96,14 @@ import { Notification } from '../../helpers/notifications'
 import {
   formatDateFromISO,
   formatRelativeDateFromISO,
+  useAccessToken,
   useClientService,
   useRoute,
   useStore
 } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
+import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 const POLLING_INTERVAL = 30000
@@ -291,11 +293,42 @@ export default {
       setAdditionalData()
     }
 
+    const accessToken = useAccessToken({ store })
+
     onMounted(() => {
+      class RetriableError extends Error {}
+      class FatalError extends Error {}
+
+      fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
+        headers: {
+          Authorization: `Bearer ${accessToken.value}`
+        },
+        async onopen(response) {
+          if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
+            console.log('SSE OK')
+            return
+          } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+            throw new FatalError()
+          } else {
+            throw new RetriableError()
+          }
+        },
+        onmessage(msg) {
+          console.log(msg)
+          if (msg.event === 'FatalError') {
+            throw new FatalError(msg.data)
+          }
+        },
+        onclose() {
+          throw new RetriableError()
+        },
+        onerror(err) {
+          if (err instanceof FatalError) {
+            throw err
+          }
+        }
+      })
       fetchNotificationsTask.perform()
-      notificationsInterval.value = setInterval(() => {
-        fetchNotificationsTask.perform()
-      }, POLLING_INTERVAL)
     })
 
     onUnmounted(() => {

From 642f864487c9096ba301534a0b30a47b8b43d85f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 21 Jul 2023 10:19:00 +0200
Subject: [PATCH 02/29] WIP

---
 .../src/components/Topbar/Notifications.vue   | 23 +++++++------------
 pnpm-lock.yaml                                | 13 ++++++++++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index d5420bf0857..4e3940674a0 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -295,10 +295,7 @@ export default {
 
     const accessToken = useAccessToken({ store })
 
-    onMounted(() => {
-      class RetriableError extends Error {}
-      class FatalError extends Error {}
-
+    const setupSSE = () => {
       fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
         headers: {
           Authorization: `Bearer ${accessToken.value}`
@@ -307,27 +304,23 @@ export default {
           if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
             console.log('SSE OK')
             return
-          } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
-            throw new FatalError()
           } else {
-            throw new RetriableError()
+            throw new Error(`SSE notifications couldn't be set up ${response.status}`)
           }
         },
         onmessage(msg) {
           console.log(msg)
           if (msg.event === 'FatalError') {
-            throw new FatalError(msg.data)
+            throw new Error(`SSE notifications error: ${msg.data}`)
           }
         },
-        onclose() {
-          throw new RetriableError()
-        },
-        onerror(err) {
-          if (err instanceof FatalError) {
-            throw err
-          }
+        onerror() {
+          setTimeout(setupSSE, 10000)
         }
       })
+    }
+    onMounted(() => {
+      setupSSE()
       fetchNotificationsTask.perform()
     })
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3f425e96f3..ca062b3cad2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,8 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 settings:
   autoInstallPeers: true
@@ -41,6 +45,9 @@ importers:
 
   .:
     dependencies:
+      '@microsoft/fetch-event-source':
+        specifier: ^2.0.1
+        version: 2.0.1
       '@vue/compiler-dom':
         specifier: 3.3.4
         version: 3.3.4
@@ -5845,6 +5852,10 @@ packages:
       '@lezer/common': 1.0.3
     dev: true
 
+  /@microsoft/fetch-event-source@2.0.1:
+    resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
+    dev: false
+
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
     dependencies:

From 45ea1607f8e8f41990765f8a19650996cfe634d8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 21 Jul 2023 11:00:38 +0200
Subject: [PATCH 03/29] make basic sse notification handling work

---
 .../src/components/Topbar/Notifications.vue   | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 4e3940674a0..0a48488c9cb 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -87,7 +87,7 @@
   </div>
 </template>
 <script lang="ts">
-import { onMounted, onUnmounted, ref, unref } from 'vue'
+import { onMounted, onUnmounted, ref, unref, watch } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { ShareStatus } from 'web-client/src/helpers/share'
@@ -295,6 +295,10 @@ export default {
 
     const accessToken = useAccessToken({ store })
 
+    watch(notifications, () => {
+      console.log('notification, ', notifications.value)
+    })
+
     const setupSSE = () => {
       fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
         headers: {
@@ -304,18 +308,26 @@ export default {
           if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
             console.log('SSE OK')
             return
-          } else {
+          } else if (
+            response.status !== 401 &&
+            response.status !== 400 &&
+            response.status !== 404 &&
+            response.status !== 500
+          ) {
             throw new Error(`SSE notifications couldn't be set up ${response.status}`)
           }
         },
         onmessage(msg) {
-          console.log(msg)
           if (msg.event === 'FatalError') {
             throw new Error(`SSE notifications error: ${msg.data}`)
           }
+          const data = JSON.parse(msg.data)
+          if (data.notification_id) {
+            notifications.value = [data, ...unref(notifications)]
+          }
         },
         onerror() {
-          setTimeout(setupSSE, 10000)
+          setTimeout(setupSSE, 1000)
         }
       })
     }

From ef1e37701db03776e27ad94c8cbc4afff011dffa Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 21 Jul 2023 11:09:01 +0200
Subject: [PATCH 04/29] Add changelog, remove dev leftover

---
 .../enhancement-sse-get-notifications-instantly           | 8 ++++++++
 .../web-runtime/src/components/Topbar/Notifications.vue   | 7 +------
 2 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-sse-get-notifications-instantly

diff --git a/changelog/unreleased/enhancement-sse-get-notifications-instantly b/changelog/unreleased/enhancement-sse-get-notifications-instantly
new file mode 100644
index 00000000000..e6c0d4039d4
--- /dev/null
+++ b/changelog/unreleased/enhancement-sse-get-notifications-instantly
@@ -0,0 +1,8 @@
+Enhancement: Add SSE to get notifications instantly
+
+We've added SSE to the notifications which allows us to be notified
+about new notifications instantly and from the server without polling
+every few seconds.
+
+https://github.com/owncloud/web/pull/9451
+https://github.com/owncloud/web/issues/9434
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 0a48488c9cb..c4594883490 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -122,6 +122,7 @@ export default {
     const loading = ref(false)
     const notificationsInterval = ref()
     const dropdownOpened = ref(false)
+    const accessToken = useAccessToken({ store })
 
     const formatDate = (date) => {
       return formatDateFromISO(date, currentLanguage)
@@ -293,12 +294,6 @@ export default {
       setAdditionalData()
     }
 
-    const accessToken = useAccessToken({ store })
-
-    watch(notifications, () => {
-      console.log('notification, ', notifications.value)
-    })
-
     const setupSSE = () => {
       fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
         headers: {

From f767f3c29eb7e597ac70ea9199396d1c199cd6d8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 21 Jul 2023 11:09:53 +0200
Subject: [PATCH 05/29] remove unused code

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index c4594883490..e055d6a0a65 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -87,7 +87,7 @@
   </div>
 </template>
 <script lang="ts">
-import { onMounted, onUnmounted, ref, unref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, unref } from 'vue'
 import isEmpty from 'lodash-es/isEmpty'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { ShareStatus } from 'web-client/src/helpers/share'
@@ -106,8 +106,6 @@ import { useTask } from 'vue-concurrency'
 import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
-const POLLING_INTERVAL = 30000
-
 export default {
   components: {
     NotificationBell

From d95a98a8857500d0f201bade959f37108bbd4bc1 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 24 Jul 2023 15:03:31 +0200
Subject: [PATCH 06/29] Fix lots of retries on error

---
 .../src/components/Topbar/Notifications.vue        | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index e055d6a0a65..32d3b4df5ea 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -301,26 +301,18 @@ export default {
           if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
             console.log('SSE OK')
             return
-          } else if (
-            response.status !== 401 &&
-            response.status !== 400 &&
-            response.status !== 404 &&
-            response.status !== 500
-          ) {
-            throw new Error(`SSE notifications couldn't be set up ${response.status}`)
+          } else {
+            console.error(`SSE notifications couldn't be set up ${response.status}`)
           }
         },
         onmessage(msg) {
           if (msg.event === 'FatalError') {
-            throw new Error(`SSE notifications error: ${msg.data}`)
+            console.error(`SSE notifications error: ${msg.data}`)
           }
           const data = JSON.parse(msg.data)
           if (data.notification_id) {
             notifications.value = [data, ...unref(notifications)]
           }
-        },
-        onerror() {
-          setTimeout(setupSSE, 1000)
         }
       })
     }

From a559215f75d20968d8b58914248bbf7849688205 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 24 Jul 2023 15:05:01 +0200
Subject: [PATCH 07/29] Remove console log

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 32d3b4df5ea..17b56c04eec 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -299,7 +299,6 @@ export default {
         },
         async onopen(response) {
           if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
-            console.log('SSE OK')
             return
           } else {
             console.error(`SSE notifications couldn't be set up ${response.status}`)

From 30770af9fe4d1915f76455de939ca8750050477d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 24 Jul 2023 15:06:40 +0200
Subject: [PATCH 08/29] Add async await

---
 .../web-runtime/src/components/Topbar/Notifications.vue   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 17b56c04eec..33fcd214f6d 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -292,8 +292,8 @@ export default {
       setAdditionalData()
     }
 
-    const setupSSE = () => {
-      fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
+    const setupSSE = async () => {
+      await fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
         headers: {
           Authorization: `Bearer ${accessToken.value}`
         },
@@ -315,8 +315,8 @@ export default {
         }
       })
     }
-    onMounted(() => {
-      setupSSE()
+    onMounted(async () => {
+      await setupSSE()
       fetchNotificationsTask.perform()
     })
 

From dc9d51e76d4b44557f9ae5a45b069c2b85020ad8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 10:30:45 +0200
Subject: [PATCH 09/29] refactor into composable

---
 packages/web-pkg/src/composables/index.ts     |  1 +
 packages/web-pkg/src/composables/sse/index.ts |  1 +
 .../composables/sse/useServerSentEvents.ts    | 30 +++++++++++
 .../src/components/Topbar/Notifications.vue   | 52 +++++++++----------
 4 files changed, 56 insertions(+), 28 deletions(-)
 create mode 100644 packages/web-pkg/src/composables/sse/index.ts
 create mode 100644 packages/web-pkg/src/composables/sse/useServerSentEvents.ts

diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index 5df6c8734cb..10f6ddd97e9 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -17,3 +17,4 @@ export * from './store'
 export * from './fileListHeaderPosition'
 export * from './viewMode'
 export * from './search'
+export * from './sse'
diff --git a/packages/web-pkg/src/composables/sse/index.ts b/packages/web-pkg/src/composables/sse/index.ts
new file mode 100644
index 00000000000..f12353de45e
--- /dev/null
+++ b/packages/web-pkg/src/composables/sse/index.ts
@@ -0,0 +1 @@
+export * from './useServerSentEvents'
diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
new file mode 100644
index 00000000000..3efae0803a7
--- /dev/null
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -0,0 +1,30 @@
+import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source'
+import { useAccessToken, useStore } from 'web-pkg/src'
+export * from './useServerSentEvents'
+
+export interface ServerSentEventsOptions {
+  url: string
+  onOpen?: (response: Response) => void
+  onMessage?: (msg: EventSourceMessage) => void
+}
+
+export const useServerSentEvents = (options: ServerSentEventsOptions) => {
+  const store = useStore()
+  const accessToken = useAccessToken({ store })
+
+  const setupServerSentEvents = async () => {
+    await fetchEventSource(options.url, {
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`
+      },
+      async onopen(response) {
+        await options.onOpen?.(response)
+      },
+      onmessage(msg) {
+        options.onMessage?.(msg)
+      }
+    })
+  }
+
+  return setupServerSentEvents
+}
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 33fcd214f6d..8c547b41041 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -96,14 +96,14 @@ import { Notification } from '../../helpers/notifications'
 import {
   formatDateFromISO,
   formatRelativeDateFromISO,
-  useAccessToken,
   useClientService,
   useRoute,
-  useStore
+  useStore,
+  useServerSentEvents
 } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source'
+import { EventStreamContentType } from '@microsoft/fetch-event-source'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 export default {
@@ -120,7 +120,26 @@ export default {
     const loading = ref(false)
     const notificationsInterval = ref()
     const dropdownOpened = ref(false)
-    const accessToken = useAccessToken({ store })
+
+    const setupServerSentEvents = useServerSentEvents({
+      url: '/ocs/v2.php/apps/notifications/api/v1/notifications/sse',
+      onOpen: (response): void => {
+        if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
+          return
+        }
+        console.error(`SSE notifications couldn't be set up ${response.status}`)
+      },
+      onMessage: (msg): void => {
+        if (msg.event === 'FatalError') {
+          console.error(`SSE notifications error: ${msg.data}`)
+          return
+        }
+        const data = JSON.parse(msg.data)
+        if (data.notification_id) {
+          notifications.value = [data, ...unref(notifications)]
+        }
+      }
+    })
 
     const formatDate = (date) => {
       return formatDateFromISO(date, currentLanguage)
@@ -292,31 +311,8 @@ export default {
       setAdditionalData()
     }
 
-    const setupSSE = async () => {
-      await fetchEventSource('/ocs/v2.php/apps/notifications/api/v1/notifications/sse', {
-        headers: {
-          Authorization: `Bearer ${accessToken.value}`
-        },
-        async onopen(response) {
-          if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
-            return
-          } else {
-            console.error(`SSE notifications couldn't be set up ${response.status}`)
-          }
-        },
-        onmessage(msg) {
-          if (msg.event === 'FatalError') {
-            console.error(`SSE notifications error: ${msg.data}`)
-          }
-          const data = JSON.parse(msg.data)
-          if (data.notification_id) {
-            notifications.value = [data, ...unref(notifications)]
-          }
-        }
-      })
-    }
     onMounted(async () => {
-      await setupSSE()
+      await setupServerSentEvents()
       fetchNotificationsTask.perform()
     })
 

From 7155c3cd0f37479955dc341a457052889768ed3e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 10:35:00 +0200
Subject: [PATCH 10/29] Move dependency into web-pkg package.json

---
 package.json                  | 1 -
 packages/web-pkg/package.json | 1 +
 pnpm-lock.yaml                | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 0198a0c4c83..740446a852c 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,6 @@
     "not OperaMobile > 0"
   ],
   "dependencies": {
-    "@microsoft/fetch-event-source": "^2.0.1",
     "@vue/compiler-dom": "3.3.4",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/runtime-dom": "3.3.4",
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index dae274c7604..a33427230dd 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -14,6 +14,7 @@
     "directory": "packages/web-pkg"
   },
   "peerDependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@casl/ability": "^6.3.3",
     "@casl/vue": "^2.2.1",
     "axios": "^0.27.2 || ^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca062b3cad2..fbba915bc79 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,9 +45,6 @@ importers:
 
   .:
     dependencies:
-      '@microsoft/fetch-event-source':
-        specifier: ^2.0.1
-        version: 2.0.1
       '@vue/compiler-dom':
         specifier: 3.3.4
         version: 3.3.4
@@ -914,6 +911,9 @@ importers:
       '@casl/vue':
         specifier: ^2.2.1
         version: 2.2.1(@casl/ability@6.3.3)(vue@3.3.4)
+      '@microsoft/fetch-event-source':
+        specifier: ^2.0.1
+        version: 2.0.1
       axios:
         specifier: ^0.27.2 || ^1.0.0
         version: 1.4.0

From 9841af26a9ac8e86d2a41cac50f9b52012d8b0e2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 10:36:36 +0200
Subject: [PATCH 11/29] Simplify notifications onOpen error

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 8c547b41041..d5363f546a4 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -124,10 +124,9 @@ export default {
     const setupServerSentEvents = useServerSentEvents({
       url: '/ocs/v2.php/apps/notifications/api/v1/notifications/sse',
       onOpen: (response): void => {
-        if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
-          return
+        if (!response.ok || response.headers.get('content-type') !== EventStreamContentType) {
+          console.error(`SSE notifications couldn't be set up ${response.status}`)
         }
-        console.error(`SSE notifications couldn't be set up ${response.status}`)
       },
       onMessage: (msg): void => {
         if (msg.event === 'FatalError') {

From 60c4ea72c6890f432794f953fd1c9a62bd74668b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 10:49:25 +0200
Subject: [PATCH 12/29] Add additional required headers

---
 .../web-pkg/src/composables/sse/useServerSentEvents.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 3efae0803a7..50e5b347907 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -1,4 +1,6 @@
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source'
+import { unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { useAccessToken, useStore } from 'web-pkg/src'
 export * from './useServerSentEvents'
 
@@ -10,12 +12,15 @@ export interface ServerSentEventsOptions {
 
 export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const store = useStore()
+  const language = useGettext()
   const accessToken = useAccessToken({ store })
 
   const setupServerSentEvents = async () => {
     await fetchEventSource(options.url, {
       headers: {
-        Authorization: `Bearer ${accessToken.value}`
+        Authorization: `Bearer ${accessToken.value}`,
+        'Accept-Language': unref(language).current,
+        'X-Request-ID': uuidV4()
       },
       async onopen(response) {
         await options.onOpen?.(response)
@@ -28,3 +33,6 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
 
   return setupServerSentEvents
 }
+function uuidV4(): string {
+  throw new Error('Function not implemented.')
+}

From d4730f7cb0b137dd877b4792a8b621e79d13223e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 10:52:55 +0200
Subject: [PATCH 13/29] Fix x-request-id

---
 packages/web-pkg/src/composables/sse/useServerSentEvents.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 50e5b347907..7e6be4b3dab 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -1,5 +1,6 @@
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source'
 import { unref } from 'vue'
+import { v4 as uuidV4 } from 'uuid'
 import { useGettext } from 'vue3-gettext'
 import { useAccessToken, useStore } from 'web-pkg/src'
 export * from './useServerSentEvents'
@@ -33,6 +34,3 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
 
   return setupServerSentEvents
 }
-function uuidV4(): string {
-  throw new Error('Function not implemented.')
-}

From 568b9f4657d0d89aab265d96f59c18d793a85a29 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 11:04:09 +0200
Subject: [PATCH 14/29] remove unused import

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index d5363f546a4..69fe11f9cd2 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -103,7 +103,6 @@ import {
 } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { EventStreamContentType } from '@microsoft/fetch-event-source'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 export default {

From fe59bd7a0742866ee8c56d49ee1dfa4d5fc18819 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 11:21:39 +0200
Subject: [PATCH 15/29] Make vite work

---
 packages/web-pkg/src/composables/sse/useServerSentEvents.ts  | 5 ++---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 7e6be4b3dab..3a5aa55050a 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -2,7 +2,7 @@ import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-sou
 import { unref } from 'vue'
 import { v4 as uuidV4 } from 'uuid'
 import { useGettext } from 'vue3-gettext'
-import { useAccessToken, useStore } from 'web-pkg/src'
+import { configurationManager, useAccessToken, useStore } from 'web-pkg/src'
 export * from './useServerSentEvents'
 
 export interface ServerSentEventsOptions {
@@ -15,9 +15,8 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const store = useStore()
   const language = useGettext()
   const accessToken = useAccessToken({ store })
-
   const setupServerSentEvents = async () => {
-    await fetchEventSource(options.url, {
+    await fetchEventSource(`${configurationManager.serverUrl}${options.url}`, {
       headers: {
         Authorization: `Bearer ${accessToken.value}`,
         'Accept-Language': unref(language).current,
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 69fe11f9cd2..c5e1f704861 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -121,9 +121,9 @@ export default {
     const dropdownOpened = ref(false)
 
     const setupServerSentEvents = useServerSentEvents({
-      url: '/ocs/v2.php/apps/notifications/api/v1/notifications/sse',
+      url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
       onOpen: (response): void => {
-        if (!response.ok || response.headers.get('content-type') !== EventStreamContentType) {
+        if (!response.ok) {
           console.error(`SSE notifications couldn't be set up ${response.status}`)
         }
       },

From f5eb15e95dc532fddc79fe1692fe2da8fdeb6f6c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 11:51:26 +0200
Subject: [PATCH 16/29] Fix unittests

---
 .../unit/components/Topbar/Notifications.spec.ts    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 07789b22b2c..2c1036297e4 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -34,6 +34,7 @@ describe('Notification component', () => {
   it('renders a set of notifications', async () => {
     const notifications = [mock<Notification>({ messageRich: undefined })]
     const { wrapper } = getWrapper({ notifications })
+    await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
     expect(wrapper.find(selectors.noNewNotifications).exists()).toBeFalsy()
     expect(wrapper.findAll(selectors.notificationItem).length).toBe(notifications.length)
@@ -41,6 +42,7 @@ describe('Notification component', () => {
   it('renders the loading state', async () => {
     const notifications = [mock<Notification>({ messageRich: undefined })]
     const { wrapper } = getWrapper({ notifications })
+    await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
     wrapper.vm.loading = true
     await wrapper.vm.$nextTick()
@@ -49,6 +51,7 @@ describe('Notification component', () => {
   it('marks all notifications as read', async () => {
     const notifications = [mock<Notification>({ messageRich: undefined })]
     const { wrapper, mocks } = getWrapper({ notifications })
+    await wrapper.vm.fetchNotificationsTask.perform()
     await wrapper.vm.fetchNotificationsTask.last
     await wrapper.find(selectors.markAll).trigger('click')
     expect(wrapper.find(selectors.notificationItem).exists()).toBeFalsy()
@@ -61,6 +64,7 @@ describe('Notification component', () => {
         user: 'einstein'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       const avatarImageStub = wrapper.findComponent<any>(selectors.avatarImageStub)
       expect(avatarImageStub.attributes('userid')).toEqual(notification.user)
@@ -74,6 +78,7 @@ describe('Notification component', () => {
         messageRichParameters: { user: { displayname, name } }
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       const avatarImageStub = wrapper.findComponent<any>(selectors.avatarImageStub)
       expect(avatarImageStub.attributes('userid')).toEqual(name)
@@ -87,6 +92,7 @@ describe('Notification component', () => {
         message: undefined
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationSubject).exists()).toBeTruthy()
     })
@@ -98,6 +104,7 @@ describe('Notification component', () => {
         message: 'some message'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       wrapper.vm.showDrop()
       await wrapper.vm.$nextTick()
@@ -112,6 +119,7 @@ describe('Notification component', () => {
         }
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       wrapper.vm.showDrop()
       await wrapper.vm.$nextTick()
@@ -127,6 +135,7 @@ describe('Notification component', () => {
         link: 'http://some-link.com'
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationLink).exists()).toBeTruthy()
     })
@@ -142,6 +151,7 @@ describe('Notification component', () => {
           }
         })
         const { wrapper } = getWrapper({ notifications: [notification] })
+        await wrapper.vm.fetchNotificationsTask.perform()
         await wrapper.vm.fetchNotificationsTask.last
         wrapper.vm.showDrop()
         await wrapper.vm.$nextTick()
@@ -168,6 +178,7 @@ describe('Notification component', () => {
           }
         })
         const { wrapper } = getWrapper({ notifications: [notification], spaces: [spaceMock] })
+        await wrapper.vm.fetchNotificationsTask.perform()
         await wrapper.vm.fetchNotificationsTask.last
         wrapper.vm.showDrop()
         await wrapper.vm.$nextTick()
@@ -187,6 +198,7 @@ describe('Notification component', () => {
         actions: [mock<NotificationAction>()]
       })
       const { wrapper } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationActions).exists()).toBeTruthy()
     })
@@ -197,6 +209,7 @@ describe('Notification component', () => {
         actions: [mock<NotificationAction>({ link: 'http://some-link.com' })]
       })
       const { wrapper, mocks } = getWrapper({ notifications: [notification] })
+      await wrapper.vm.fetchNotificationsTask.perform()
       await wrapper.vm.fetchNotificationsTask.last
       expect(wrapper.find(selectors.notificationItem).exists()).toBeTruthy()
       const jsonResponse = {

From 9930747991f308a4fa085c65ebb00f352a002c88 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 13:37:11 +0200
Subject: [PATCH 17/29] fix url join

---
 packages/web-pkg/src/composables/sse/useServerSentEvents.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 3a5aa55050a..8dfceab3f5d 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -16,7 +16,7 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const language = useGettext()
   const accessToken = useAccessToken({ store })
   const setupServerSentEvents = async () => {
-    await fetchEventSource(`${configurationManager.serverUrl}${options.url}`, {
+    await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
       headers: {
         Authorization: `Bearer ${accessToken.value}`,
         'Accept-Language': unref(language).current,

From 6868b2599c06821c2ba466aefbea533efd80d6b9 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 27 Jul 2023 15:00:17 +0200
Subject: [PATCH 18/29] fix lockfile

---
 pnpm-lock.yaml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fbba915bc79..f4dc3bec52b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.1'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false

From 54f0c231d157881c1bf62a6423922963f98e55f7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 28 Jul 2023 12:09:59 +0200
Subject: [PATCH 19/29] Fix 401 error

---
 .../composables/sse/useServerSentEvents.ts    | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 8dfceab3f5d..856f91f879f 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -15,20 +15,34 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const store = useStore()
   const language = useGettext()
   const accessToken = useAccessToken({ store })
+  const ctrl = new AbortController()
   const setupServerSentEvents = async () => {
-    await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        'Accept-Language': unref(language).current,
-        'X-Request-ID': uuidV4()
-      },
-      async onopen(response) {
-        await options.onOpen?.(response)
-      },
-      onmessage(msg) {
-        options.onMessage?.(msg)
-      }
-    })
+    const setupSSE = async () => {
+      await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
+        signal: ctrl.signal,
+        headers: {
+          Authorization: `Bearer ${accessToken.value}`,
+          'Accept-Language': unref(language).current,
+          'X-Request-ID': uuidV4()
+        },
+        async onopen(response) {
+          if (response.status === 401) {
+            ctrl.abort()
+          }
+          await options.onOpen?.(response)
+        },
+        onmessage(msg) {
+          options.onMessage?.(msg)
+        }
+      })
+    }
+    try {
+      await setupSSE().then(() => {
+        setupServerSentEvents()
+      })
+    } catch (e) {
+      setupServerSentEvents()
+    }
   }
 
   return setupServerSentEvents

From 39b623ccb27b2d9983f3731c08f33e7013b082c8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 28 Jul 2023 12:13:12 +0200
Subject: [PATCH 20/29] remove await to not block

---
 packages/web-pkg/src/composables/sse/useServerSentEvents.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 856f91f879f..35585808f55 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -37,7 +37,7 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
       })
     }
     try {
-      await setupSSE().then(() => {
+      setupSSE().then(() => {
         setupServerSentEvents()
       })
     } catch (e) {

From 2fec745c4d08c226170d90c4d46fdf20a2281a51 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 31 Jul 2023 09:42:35 +0200
Subject: [PATCH 21/29] Implement retry limit

---
 .../composables/sse/useServerSentEvents.ts    | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 35585808f55..1ceedcf4edd 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -1,9 +1,8 @@
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source'
-import { unref } from 'vue'
+import { ref, unref } from 'vue'
 import { v4 as uuidV4 } from 'uuid'
 import { useGettext } from 'vue3-gettext'
 import { configurationManager, useAccessToken, useStore } from 'web-pkg/src'
-export * from './useServerSentEvents'
 
 export interface ServerSentEventsOptions {
   url: string
@@ -16,8 +15,14 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const language = useGettext()
   const accessToken = useAccessToken({ store })
   const ctrl = new AbortController()
-  const setupServerSentEvents = async () => {
+  const retryCounter = ref(0)
+  const setupServerSentEvents = () => {
+    if (unref(retryCounter) >= 5) {
+      ctrl.abort()
+      throw new Error('Too many retries')
+    }
     const setupSSE = async () => {
+      retryCounter.value++
       await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
         signal: ctrl.signal,
         headers: {
@@ -28,7 +33,9 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
         async onopen(response) {
           if (response.status === 401) {
             ctrl.abort()
+            return
           }
+          retryCounter.value = 0
           await options.onOpen?.(response)
         },
         onmessage(msg) {
@@ -36,13 +43,9 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
         }
       })
     }
-    try {
-      setupSSE().then(() => {
-        setupServerSentEvents()
-      })
-    } catch (e) {
+    setupSSE().then(() => {
       setupServerSentEvents()
-    }
+    })
   }
 
   return setupServerSentEvents

From b0786448ee5d86aeda7c88ffeeb67cc93e3c730a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 31 Jul 2023 09:46:35 +0200
Subject: [PATCH 22/29] reestablish sse connection on language change

---
 .../web-pkg/src/composables/sse/useServerSentEvents.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 1ceedcf4edd..ed574e20f2a 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -1,5 +1,5 @@
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source'
-import { ref, unref } from 'vue'
+import { ref, unref, watch } from 'vue'
 import { v4 as uuidV4 } from 'uuid'
 import { useGettext } from 'vue3-gettext'
 import { configurationManager, useAccessToken, useStore } from 'web-pkg/src'
@@ -16,6 +16,14 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const accessToken = useAccessToken({ store })
   const ctrl = new AbortController()
   const retryCounter = ref(0)
+
+  watch(
+    () => language.current,
+    () => {
+      ctrl.abort()
+      setupServerSentEvents()
+    }
+  )
   const setupServerSentEvents = () => {
     if (unref(retryCounter) >= 5) {
       ctrl.abort()

From 4ee4a41c171eb41eb247ec189a3692b5d46d2229 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 31 Jul 2023 11:07:04 +0200
Subject: [PATCH 23/29] Fix unittests

---
 .../composables/sse/useServerSentEvents.ts    | 40 ++++++++++---------
 .../src/components/Topbar/Notifications.vue   |  4 +-
 .../components/Topbar/Notifications.spec.ts   |  4 +-
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index ed574e20f2a..940661376c4 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -31,25 +31,29 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
     }
     const setupSSE = async () => {
       retryCounter.value++
-      await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
-        signal: ctrl.signal,
-        headers: {
-          Authorization: `Bearer ${accessToken.value}`,
-          'Accept-Language': unref(language).current,
-          'X-Request-ID': uuidV4()
-        },
-        async onopen(response) {
-          if (response.status === 401) {
-            ctrl.abort()
-            return
+      try {
+        await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
+          signal: ctrl.signal,
+          headers: {
+            Authorization: `Bearer ${accessToken.value}`,
+            'Accept-Language': unref(language).current,
+            'X-Request-ID': uuidV4()
+          },
+          async onopen(response) {
+            if (response.status === 401) {
+              ctrl.abort()
+              return
+            }
+            retryCounter.value = 0
+            await options.onOpen?.(response)
+          },
+          onmessage(msg) {
+            options.onMessage?.(msg)
           }
-          retryCounter.value = 0
-          await options.onOpen?.(response)
-        },
-        onmessage(msg) {
-          options.onMessage?.(msg)
-        }
-      })
+        })
+      } catch (e) {
+        console.error(e)
+      }
     }
     setupSSE().then(() => {
       setupServerSentEvents()
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index c5e1f704861..7e3e22cbe55 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -310,7 +310,9 @@ export default {
     }
 
     onMounted(async () => {
-      await setupServerSentEvents()
+      if (setupServerSentEvents) {
+        await setupServerSentEvents()
+      }
       fetchNotificationsTask.perform()
     })
 
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 2c1036297e4..b20baf70fc9 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -24,6 +24,8 @@ const selectors = {
   notificationActions: '.oc-notifications-actions'
 }
 
+jest.mock('web-pkg/src/composables/sse/useServerSentEvents')
+
 describe('Notification component', () => {
   it('renders the notification bell and no notifications if there are none', () => {
     const { wrapper } = getWrapper()
@@ -55,7 +57,7 @@ describe('Notification component', () => {
     await wrapper.vm.fetchNotificationsTask.last
     await wrapper.find(selectors.markAll).trigger('click')
     expect(wrapper.find(selectors.notificationItem).exists()).toBeFalsy()
-    expect(mocks.$clientService.owncloudSdk.requests.ocs).toHaveBeenCalledTimes(2)
+    expect(mocks.$clientService.owncloudSdk.requests.ocs).toHaveBeenCalledTimes(3)
   })
   describe('avatar', () => {
     it('loads based on the username', async () => {

From 634f77eef1e84c8ef1aaabdd50a206c2b5ff6f26 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 1 Aug 2023 10:11:33 +0200
Subject: [PATCH 24/29] Use capability sse

---
 .../composables/capability/useCapability.ts   |  1 +
 .../src/components/Topbar/Notifications.vue   | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 8ad5987fa5f..8df471becdf 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -29,6 +29,7 @@ export const useCapabilityCoreSupportUrlSigning = createCapabilityComposable(
   'core.support-url-signing',
   false
 )
+export const useCapabilityCoreSSE = createCapabilityComposable('core.support-sse', false)
 export const useCapabilityGraphPersonalDataExport = createCapabilityComposable(
   'graph.personal-data-export',
   false
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 7e3e22cbe55..683ed2434c1 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -99,7 +99,8 @@ import {
   useClientService,
   useRoute,
   useStore,
-  useServerSentEvents
+  useServerSentEvents,
+  useCapabilityCoreSSE
 } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
@@ -120,24 +121,27 @@ export default {
     const notificationsInterval = ref()
     const dropdownOpened = ref(false)
 
-    const setupServerSentEvents = useServerSentEvents({
-      url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
-      onOpen: (response): void => {
-        if (!response.ok) {
-          console.error(`SSE notifications couldn't be set up ${response.status}`)
-        }
-      },
-      onMessage: (msg): void => {
-        if (msg.event === 'FatalError') {
-          console.error(`SSE notifications error: ${msg.data}`)
-          return
-        }
-        const data = JSON.parse(msg.data)
-        if (data.notification_id) {
-          notifications.value = [data, ...unref(notifications)]
-        }
-      }
-    })
+    const sseEnabled = useCapabilityCoreSSE()
+    const setupServerSentEvents = unref(sseEnabled)
+      ? useServerSentEvents({
+          url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
+          onOpen: (response): void => {
+            if (!response.ok) {
+              console.error(`SSE notifications couldn't be set up ${response.status}`)
+            }
+          },
+          onMessage: (msg): void => {
+            if (msg.event === 'FatalError') {
+              console.error(`SSE notifications error: ${msg.data}`)
+              return
+            }
+            const data = JSON.parse(msg.data)
+            if (data.notification_id) {
+              notifications.value = [data, ...unref(notifications)]
+            }
+          }
+        })
+      : () => {}
 
     const formatDate = (date) => {
       return formatDateFromISO(date, currentLanguage)
@@ -310,7 +314,7 @@ export default {
     }
 
     onMounted(async () => {
-      if (setupServerSentEvents) {
+      if (unref(sseEnabled)) {
         await setupServerSentEvents()
       }
       fetchNotificationsTask.perform()

From a78e0c5e5bd599575f24bce8f3526b38e2635073 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 1 Aug 2023 14:21:20 +0200
Subject: [PATCH 25/29] Fix build error

---
 .../src/components/Topbar/Notifications.vue   | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 683ed2434c1..6984dac74c3 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -122,26 +122,27 @@ export default {
     const dropdownOpened = ref(false)
 
     const sseEnabled = useCapabilityCoreSSE()
-    const setupServerSentEvents = unref(sseEnabled)
-      ? useServerSentEvents({
-          url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
-          onOpen: (response): void => {
-            if (!response.ok) {
-              console.error(`SSE notifications couldn't be set up ${response.status}`)
-            }
-          },
-          onMessage: (msg): void => {
-            if (msg.event === 'FatalError') {
-              console.error(`SSE notifications error: ${msg.data}`)
-              return
-            }
-            const data = JSON.parse(msg.data)
-            if (data.notification_id) {
-              notifications.value = [data, ...unref(notifications)]
-            }
+    let setupServerSentEvents
+    if (unref(sseEnabled)) {
+      setupServerSentEvents = useServerSentEvents({
+        url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
+        onOpen: (response): void => {
+          if (!response.ok) {
+            console.error(`SSE notifications couldn't be set up ${response.status}`)
           }
-        })
-      : () => {}
+        },
+        onMessage: (msg): void => {
+          if (msg.event === 'FatalError') {
+            console.error(`SSE notifications error: ${msg.data}`)
+            return
+          }
+          const data = JSON.parse(msg.data)
+          if (data.notification_id) {
+            notifications.value = [data, ...unref(notifications)]
+          }
+        }
+      })
+    }
 
     const formatDate = (date) => {
       return formatDateFromISO(date, currentLanguage)

From 614b97e13de3c80b95ea42eb8146b9aa8a0ff7ab Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 2 Aug 2023 10:41:25 +0200
Subject: [PATCH 26/29] reintroduce polling if sse isn't enabled

---
 .../web-runtime/src/components/Topbar/Notifications.vue     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 6984dac74c3..1b429b9101e 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -106,6 +106,8 @@ import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
+const POLLING_INTERVAL = 30000
+
 export default {
   components: {
     NotificationBell
@@ -317,6 +319,10 @@ export default {
     onMounted(async () => {
       if (unref(sseEnabled)) {
         await setupServerSentEvents()
+      } else {
+        notificationsInterval.value = setInterval(() => {
+          fetchNotificationsTask.perform()
+        }, POLLING_INTERVAL)
       }
       fetchNotificationsTask.perform()
     })

From 77a896ae9f80e9dc99d71ffd0137eb9c9d01eb96 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 2 Aug 2023 15:06:16 +0200
Subject: [PATCH 27/29] do initial notification request on see open

---
 packages/web-runtime/src/components/Topbar/Notifications.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 1b429b9101e..36415662373 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -129,6 +129,7 @@ export default {
       setupServerSentEvents = useServerSentEvents({
         url: 'ocs/v2.php/apps/notifications/api/v1/notifications/sse',
         onOpen: (response): void => {
+          fetchNotificationsTask.perform()
           if (!response.ok) {
             console.error(`SSE notifications couldn't be set up ${response.status}`)
           }
@@ -323,8 +324,8 @@ export default {
         notificationsInterval.value = setInterval(() => {
           fetchNotificationsTask.perform()
         }, POLLING_INTERVAL)
+        fetchNotificationsTask.perform()
       }
-      fetchNotificationsTask.perform()
     })
 
     onUnmounted(() => {

From ef368f146e5fdd307ddb3ab468d3e670ac0aa19e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 2 Aug 2023 15:22:54 +0200
Subject: [PATCH 28/29] Fix language switch multiple connections

---
 packages/web-pkg/src/composables/sse/useServerSentEvents.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 940661376c4..4431d41901f 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -21,7 +21,6 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
     () => language.current,
     () => {
       ctrl.abort()
-      setupServerSentEvents()
     }
   )
   const setupServerSentEvents = () => {

From a131e3622e1eba3230dbaa9a40e986b17f4d6d73 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 3 Aug 2023 09:33:36 +0200
Subject: [PATCH 29/29] fix language switched multiple times

---
 .../src/composables/sse/useServerSentEvents.ts        | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
index 4431d41901f..0f64b2e5030 100644
--- a/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
+++ b/packages/web-pkg/src/composables/sse/useServerSentEvents.ts
@@ -14,25 +14,26 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
   const store = useStore()
   const language = useGettext()
   const accessToken = useAccessToken({ store })
-  const ctrl = new AbortController()
+  const ctrl = ref(new AbortController())
   const retryCounter = ref(0)
 
   watch(
     () => language.current,
     () => {
-      ctrl.abort()
+      unref(ctrl).abort()
     }
   )
   const setupServerSentEvents = () => {
     if (unref(retryCounter) >= 5) {
-      ctrl.abort()
+      unref(ctrl).abort()
       throw new Error('Too many retries')
     }
     const setupSSE = async () => {
       retryCounter.value++
       try {
+        ctrl.value = new AbortController()
         await fetchEventSource(new URL(options.url, configurationManager.serverUrl).href, {
-          signal: ctrl.signal,
+          signal: unref(ctrl).signal,
           headers: {
             Authorization: `Bearer ${accessToken.value}`,
             'Accept-Language': unref(language).current,
@@ -40,7 +41,7 @@ export const useServerSentEvents = (options: ServerSentEventsOptions) => {
           },
           async onopen(response) {
             if (response.status === 401) {
-              ctrl.abort()
+              unref(ctrl).abort()
               return
             }
             retryCounter.value = 0