fix(admin): entity detail unsubscribe on destroy

* created mixin to handle unsubscribing from reload when destroyed
* entity details now extend this mixin
* this should fix sidemenu showing items for wrong entity

Author: bodnara

apps/admin-gui/src/app/facilities/pages/facility-detail-page/facility-detail-page.component.ts

@@ -17,14 +17,16 @@ import {
 } from '@perun-web-apps/perun/dialogs';
 import { DeleteFacilityDialogComponent } from '../../../shared/components/dialogs/delete-facility-dialog/delete-facility-dialog.component';
 import { ReloadEntityDetailService } from '../../../core/services/common/reload-entity-detail.service';
+import { destroyDetailMixin } from '../../../shared/destroy-entity-detail';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-facility-detail-page',
   templateUrl: './facility-detail-page.component.html',
   styleUrls: ['./facility-detail-page.component.scss'],
   animations: [fadeIn],
 })
-export class FacilityDetailPageComponent implements OnInit {
+export class FacilityDetailPageComponent extends destroyDetailMixin() implements OnInit {
   facility: Facility;
   editFacilityAuth = false;
   deleteAuth = false;
@@ -40,11 +42,13 @@ export class FacilityDetailPageComponent implements OnInit {
     private router: Router,
     private entityStorageService: EntityStorageService,
     private reloadEntityDetail: ReloadEntityDetailService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     this.reloadData();
-    this.reloadEntityDetail.entityDetailChange.subscribe(() => {
+    this.reloadEntityDetail.entityDetailChange.pipe(takeUntil(this.destroyed$)).subscribe(() => {
       this.reloadData();
     });
   }

apps/admin-gui/src/app/facilities/pages/resource-detail-page/resource-detail-page.component.ts

@@ -23,14 +23,16 @@ import {
 import { RemoveResourceDialogComponent } from '../../../shared/components/dialogs/remove-resource-dialog/remove-resource-dialog.component';
 import { ReloadEntityDetailService } from '../../../core/services/common/reload-entity-detail.service';
 import { SideMenuItem } from '../../../shared/side-menu/side-menu.component';
+import { destroyDetailMixin } from '../../../shared/destroy-entity-detail';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-resource-detail-page',
   templateUrl: './resource-detail-page.component.html',
   styleUrls: ['./resource-detail-page.component.scss'],
   animations: [fadeIn],
 })
-export class ResourceDetailPageComponent implements OnInit {
+export class ResourceDetailPageComponent extends destroyDetailMixin() implements OnInit {
   resource: RichResource;
   vo: Vo;
   facility: Facility;
@@ -54,11 +56,13 @@ export class ResourceDetailPageComponent implements OnInit {
     private router: Router,
     private entityStorageService: EntityStorageService,
     private reloadEntityDetail: ReloadEntityDetailService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     this.reloadData();
-    this.reloadEntityDetail.entityDetailChange.subscribe(() => {
+    this.reloadEntityDetail.entityDetailChange.pipe(takeUntil(this.destroyed$)).subscribe(() => {
       this.reloadData();
     });
   }

apps/admin-gui/src/app/shared/destroy-entity-detail.ts

@@ -0,0 +1,13 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+// eslint-disable-next-line
+export type Constructor<T = {}> = new (...args: any[]) => T;
+// eslint-disable-next-line
+export const destroyDetailMixin = <T extends Constructor>(base: T = class {} as T) =>
+  class extends base implements OnDestroy {
+    destroyed$ = new Subject<void>();
+    ngOnDestroy(): void {
+      this.destroyed$.next();
+    }
+  };

apps/admin-gui/src/app/vos/pages/group-detail-page/group-detail-page.component.ts

@@ -24,14 +24,16 @@ import {
 } from '@perun-web-apps/perun/dialogs';
 import { DeleteGroupDialogComponent } from '../../../shared/components/dialogs/delete-group-dialog/delete-group-dialog.component';
 import { ReloadEntityDetailService } from '../../../core/services/common/reload-entity-detail.service';
+import { destroyDetailMixin } from '../../../shared/destroy-entity-detail';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-group-detail-page',
   templateUrl: './group-detail-page.component.html',
   styleUrls: ['./group-detail-page.component.scss'],
   animations: [fadeIn],
 })
-export class GroupDetailPageComponent implements OnInit {
+export class GroupDetailPageComponent extends destroyDetailMixin() implements OnInit {
   vo: Vo;
   group: RichGroup;
   editAuth = false;
@@ -59,10 +61,12 @@ export class GroupDetailPageComponent implements OnInit {
     private router: Router,
     private entityStorageService: EntityStorageService,
     private reloadEntityDetail: ReloadEntityDetailService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
-    this.reloadEntityDetail.entityDetailChange.subscribe(() => {
+    this.reloadEntityDetail.entityDetailChange.pipe(takeUntil(this.destroyed$)).subscribe(() => {
       this.reloadData();
     });
     this.reloadData();

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-detail-page.component.ts

@@ -17,14 +17,16 @@ import {
 } from '@perun-web-apps/perun/dialogs';
 import { RemoveVoDialogComponent } from '../../../shared/components/dialogs/remove-vo-dialog/remove-vo-dialog.component';
 import { ReloadEntityDetailService } from '../../../core/services/common/reload-entity-detail.service';
+import { destroyDetailMixin } from '../../../shared/destroy-entity-detail';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-vo-detail-page',
   templateUrl: './vo-detail-page.component.html',
   styleUrls: ['./vo-detail-page.component.scss'],
   animations: [fadeIn],
 })
-export class VoDetailPageComponent implements OnInit {
+export class VoDetailPageComponent extends destroyDetailMixin() implements OnInit {
   vo: Vo;
   enrichedVo: EnrichedVo;
   editAuth: boolean;
@@ -41,11 +43,13 @@ export class VoDetailPageComponent implements OnInit {
     private authResolver: GuiAuthResolver,
     private entityStorageService: EntityStorageService,
     private reloadEntityDetail: ReloadEntityDetailService
-  ) {}
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     this.reloadData();
-    this.reloadEntityDetail.entityDetailChange.subscribe(() => {
+    this.reloadEntityDetail.entityDetailChange.pipe(takeUntil(this.destroyed$)).subscribe(() => {
       this.reloadData();
     });
   }
@@ -98,7 +102,6 @@ export class VoDetailPageComponent implements OnInit {
   setMenuItems(): void {
     const isHierarchical = this.enrichedVo.memberVos.length !== 0;
     const sideMenuItem = this.sideMenuItemService.parseVo(this.vo, isHierarchical);
-
     this.sideMenuService.setAccessMenuItems([sideMenuItem]);
   }