Try to switch away from polyfill

Signed-off-by: Alex Eftimie <alex.eftimie@getyourguide.com>

plugins/techdocs/package.json

@@ -70,6 +70,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/styles": "^4.10.0",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "dompurify": "^3.0.0",
     "event-source-polyfill": "1.0.25",

plugins/techdocs/src/alpha.tsx

@@ -29,7 +29,6 @@ import {
   createApiFactory,
   discoveryApiRef,
   fetchApiRef,
-  identityApiRef,
 } from '@backstage/core-plugin-api';
 import {
   compatWrapper,
@@ -55,14 +54,12 @@ const techDocsStorageApi = createApiExtension({
     deps: {
       configApi: configApiRef,
       discoveryApi: discoveryApiRef,
-      identityApi: identityApiRef,
       fetchApi: fetchApiRef,
     },
-    factory: ({ configApi, discoveryApi, identityApi, fetchApi }) =>
+    factory: ({ configApi, discoveryApi, fetchApi }) =>
       new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       }),
   }),

plugins/techdocs/src/client.ts

@@ -16,11 +16,7 @@
 
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Config } from '@backstage/config';
-import {
-  DiscoveryApi,
-  FetchApi,
-  IdentityApi,
-} from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 import { NotFoundError, ResponseError } from '@backstage/errors';
 import {
   SyncResult,
@@ -29,7 +25,7 @@ import {
   TechDocsMetadata,
   TechDocsStorageApi,
 } from '@backstage/plugin-techdocs-react';
-import { EventSourcePolyfill } from 'event-source-polyfill';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 /**
  * API to talk to `techdocs-backend`.
@@ -124,18 +120,15 @@ export class TechDocsClient implements TechDocsApi {
 export class TechDocsStorageClient implements TechDocsStorageApi {
   public configApi: Config;
   public discoveryApi: DiscoveryApi;
-  public identityApi: IdentityApi;
   private fetchApi: FetchApi;
 
   constructor(options: {
     configApi: Config;
     discoveryApi: DiscoveryApi;
-    identityApi: IdentityApi;
     fetchApi: FetchApi;
   }) {
     this.configApi = options.configApi;
     this.discoveryApi = options.discoveryApi;
-    this.identityApi = options.identityApi;
     this.fetchApi = options.fetchApi;
   }
 
@@ -213,47 +206,29 @@ export class TechDocsStorageClient implements TechDocsStorageApi {
 
     const apiOrigin = await this.getApiOrigin();
     const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
-    const { token } = await this.identityApi.getCredentials();
 
     return new Promise((resolve, reject) => {
-      // Polyfill is used to add support for custom headers and auth
-      const source = new EventSourcePolyfill(url, {
+      fetchEventSource(url, {
         withCredentials: true,
-        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        fetch: this.fetchApi.fetch,
+        onmessage(e: any) {
+          if (e.data) {
+            logHandler(JSON.parse(e.data));
+          }
+        },
+        onclose(e: any) {
+          let updated: boolean = false;
+
+          if (e.data) {
+            ({ updated } = JSON.parse(e.data));
+          }
+
+          resolve(updated ? 'updated' : 'cached');
+        },
+        onerror(e: any) {
+          reject(e);
+        },
       });
-
-      source.addEventListener('log', (e: any) => {
-        if (e.data) {
-          logHandler(JSON.parse(e.data));
-        }
-      });
-
-      source.addEventListener('finish', (e: any) => {
-        let updated: boolean = false;
-
-        if (e.data) {
-          ({ updated } = JSON.parse(e.data));
-        }
-
-        resolve(updated ? 'updated' : 'cached');
-      });
-
-      source.onerror = (e: any) => {
-        source.close();
-
-        switch (e.status) {
-          // the endpoint returned a 404 status
-          case 404:
-            reject(new NotFoundError(e.message));
-            return;
-
-          // also handles the event-stream close. the reject is ignored if the Promise was already
-          // resolved by a finish event.
-          default:
-            reject(new Error(e.data));
-            return;
-        }
-      };
     });
   }
 

yarn.lock

@@ -7535,6 +7535,7 @@ __metadata:
     "@material-ui/icons": ^4.9.1
     "@material-ui/lab": 4.0.0-alpha.61
     "@material-ui/styles": ^4.10.0
+    "@microsoft/fetch-event-source": ^2.0.1
     "@testing-library/dom": ^10.0.0
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^15.0.0
@@ -10507,6 +10508,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@microsoft/fetch-event-source@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@microsoft/fetch-event-source@npm:2.0.1"
+  checksum: a50e1c0f33220206967266d0a4bbba0703e2793b079d9f6e6bfd48f71b2115964a803e14cf6e902c6fab321edc084f26022334f5eaacc2cec87f174715d41852
+  languageName: node
+  linkType: hard
+
 "@microsoft/microsoft-graph-types@npm:^2.6.0":
   version: 2.40.0
   resolution: "@microsoft/microsoft-graph-types@npm:2.40.0"