fix(admin-ui): Unsubscribe from alerts when logging out (#3071)

relates to: #2188

(cherry picked from commit f38340b13442faaba4c8b28f8f145a76cb29457d)

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -73,7 +73,7 @@
                         [availableLanguages]="availableLanguages"
                         (selectUiLanguage)="selectUiLanguage()"
                         (logOut)="logOut()"
-                    ></vdr-user-menu>
+                    />
                 </div>
             </div>
             <div class="content-area"><router-outlet></router-outlet></div>

packages/admin-ui/src/lib/core/src/providers/alerts/alerts.service.ts

@@ -8,6 +8,7 @@ import {
     Observable,
     of,
     Subject,
+    Subscription,
     switchMap,
 } from 'rxjs';
 import { filter, map, startWith, take } from 'rxjs/operators';
@@ -132,14 +133,15 @@ export class Alert<T> {
     activeAlert$: Observable<ActiveAlert | undefined>;
     private hasRun$ = new BehaviorSubject(false);
     private data$ = new BehaviorSubject<T | undefined>(undefined);
+    private readonly subscription: Subscription;
     constructor(
         private config: AlertConfig<T>,
         private context: AlertContext,
     ) {
         if (this.config.recheck) {
-            this.config.recheck(this.context).subscribe(() => this.runCheck());
+            this.subscription = this.config.recheck(this.context).subscribe(() => this.runCheck());
         }
-        this.activeAlert$ = combineLatest(this.data$, this.hasRun$).pipe(
+        this.activeAlert$ = combineLatest([this.data$, this.hasRun$]).pipe(
             map(([data, hasRun]) => {
                 if (!data) {
                     return;
@@ -176,6 +178,12 @@ export class Alert<T> {
         }
         this.hasRun$.next(false);
     }
+
+    destroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
 
 @Injectable({
@@ -237,6 +245,12 @@ export class AlertsService {
         }
     }
 
+    clearAlerts() {
+        this.alertsMap.forEach(alert => alert.destroy());
+        this.alertsMap.clear();
+        this.configUpdated.next();
+    }
+
     protected createContext(): AlertContext {
         return {
             injector: this.injector,

packages/admin-ui/src/lib/core/src/providers/auth/auth.service.ts

@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { Observable, of } from 'rxjs';
-import { catchError, map, mapTo, mergeMap, switchMap } from 'rxjs/operators';
+import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators';
 
 import { AttemptLoginMutation, CurrentUserFragment } from '../../common/generated-types';
 import { DataService } from '../../data/providers/data.service';
 import { ServerConfigService } from '../../data/server-config';
 import { LocalStorageService } from '../local-storage/local-storage.service';
 import { PermissionsService } from '../permissions/permissions.service';
+import { AlertsService } from '../alerts/alerts.service';
 
 /**
  * This service handles logic relating to authentication of the current user.
@@ -21,6 +22,7 @@ export class AuthService {
         private dataService: DataService,
         private serverConfigService: ServerConfigService,
         private permissionsService: PermissionsService,
+        private alertService: AlertsService,
     ) {}
 
     /**
@@ -79,7 +81,10 @@ export class AuthService {
                     return [];
                 }
             }),
-            mapTo(true),
+            tap(() => {
+                this.alertService.clearAlerts();
+            }),
+            map(() => true),
         );
     }
 
@@ -129,7 +134,7 @@ export class AuthService {
                     }),
                 );
             }),
-            mapTo(true),
+            map(() => true),
             catchError(err => of(false)),
         );
     }