[Files] Dispose of subscriptions on unmount (#141597) (#141762)

* added dispose logic to state * hook dispose logic in to component lifecycle (cherry picked from commit add2a12) Co-authored-by: Jean-Louis Leysens <[email protected]>
elastic · Sep 26, 2022 · 593bc33 · 593bc33
1 parent 3109f6d
commit 593bc33
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/x-pack/plugins/files/public/components/upload_file/upload_file.tsx b/x-pack/plugins/files/public/components/upload_file/upload_file.tsx
@@ -117,6 +117,8 @@ export const UploadFile = <Kind extends string = string>({
     return () => subs.forEach((sub) => sub.unsubscribe());
   }, [uploadState, onDone, onError]);
 
+  useEffect(() => uploadState.dispose, [uploadState]);
+
   return (
     <context.Provider value={uploadState}>
       <Component

diff --git a/x-pack/plugins/files/public/components/upload_file/upload_state.ts b/x-pack/plugins/files/public/components/upload_file/upload_state.ts
@@ -25,6 +25,7 @@ import {
   type Observable,
   combineLatest,
   distinctUntilChanged,
+  Subscription,
 } from 'rxjs';
 import type { FileKind, FileJSON } from '../../../common/types';
 import type { FilesClient } from '../../types';
@@ -62,38 +63,41 @@ export class UploadState {
   public readonly uploading$ = new BehaviorSubject(false);
   public readonly done$ = new Subject<undefined | DoneNotification[]>();
 
+  private subscriptions: Subscription[];
+
   constructor(
     private readonly fileKind: FileKind,
     private readonly client: FilesClient,
     private readonly opts: UploadOptions = { allowRepeatedUploads: false }
   ) {
     const latestFiles$ = this.files$$.pipe(switchMap((files$) => combineLatest(files$)));
-
-    latestFiles$
-      .pipe(
-        map((files) => files.some((file) => file.status === 'uploading')),
-        distinctUntilChanged()
-      )
-      .subscribe(this.uploading$);
-
-    latestFiles$
-      .pipe(
-        map((files) => {
-          const errorFile = files.find((file) => Boolean(file.error));
-          return errorFile ? errorFile.error : undefined;
-        }),
-        filter(Boolean)
-      )
-      .subscribe(this.error$);
-
-    latestFiles$
-      .pipe(
-        filter(
-          (files) => Boolean(files.length) && files.every((file) => file.status === 'uploaded')
-        ),
-        map((files) => files.map((file) => ({ id: file.id!, kind: this.fileKind.id })))
-      )
-      .subscribe(this.done$);
+    this.subscriptions = [
+      latestFiles$
+        .pipe(
+          map((files) => files.some((file) => file.status === 'uploading')),
+          distinctUntilChanged()
+        )
+        .subscribe(this.uploading$),
+
+      latestFiles$
+        .pipe(
+          map((files) => {
+            const errorFile = files.find((file) => Boolean(file.error));
+            return errorFile ? errorFile.error : undefined;
+          }),
+          filter(Boolean)
+        )
+        .subscribe(this.error$),
+
+      latestFiles$
+        .pipe(
+          filter(
+            (files) => Boolean(files.length) && files.every((file) => file.status === 'uploaded')
+          ),
+          map((files) => files.map((file) => ({ id: file.id!, kind: this.fileKind.id })))
+        )
+        .subscribe(this.done$),
+    ];
   }
 
   public isUploading(): boolean {
@@ -226,6 +230,10 @@ export class UploadState {
 
     return upload$;
   };
+
+  public dispose = (): void => {
+    for (const sub of this.subscriptions) sub.unsubscribe();
+  };
 }
 
 export const createUploadState = ({