UI: AppCenter Index: Refresh after install/delete of an App (#2533)

* Refresh Index after install/delete

User gets feedback after installing an app.
(Manual refresh was nec. before)

Admins get Feedback after removing an app due to auto refresh.

* renamed installedAnApp to appInstanceChange

* added a takeUntil as suggested in the code review to unsubscribe

ui/src/app/edge/settings/app/index.component.ts

@@ -1,10 +1,10 @@
 // @ts-strict-ignore
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, NavigationExtras, Router } from '@angular/router';
 import { IonPopover, ModalController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { filter, switchMap, takeUntil } from 'rxjs/operators';
 import { ComponentJsonApiRequest } from 'src/app/shared/jsonrpc/request/componentJsonApiRequest';
 import { Role } from 'src/app/shared/type/role';
 import { Environment, environment } from 'src/environments';
@@ -76,6 +76,17 @@ export class IndexComponent implements OnInit, OnDestroy {
 
  public ngOnInit() {
  this.init();
+ this.router.events.pipe(
+ filter(event => event instanceof NavigationEnd),
+ switchMap(() => this.route.url),
+ takeUntil(this.stopOnDestroy),
+ ).subscribe(() => {
+ const navigationExtras = this.router.getCurrentNavigation()?.extras as NavigationExtras;
+ const appInstanceChange = navigationExtras?.state?.appInstanceChange;
+ if (appInstanceChange != null && appInstanceChange) {
+ this.init();
+ }
+ });
  }
 
  public ngOnDestroy(): void {

ui/src/app/edge/settings/app/install.component.ts

@@ -180,7 +180,8 @@ export class InstallAppComponent implements OnInit, OnDestroy {
  }
 
  this.form.markAsPristine();
- this.router.navigate(['device/' + (this.edge.id) + '/settings/app/']);
+ const navigationExtras = { state: { appInstanceChange: true } };
+ this.router.navigate(['device/' + (this.edge.id) + '/settings/app/'], navigationExtras);
  })
  .catch(InstallAppComponent.errorToast(this.service, error => this.translate.instant('Edge.Config.App.failInstall', { error: error })))
  .finally(() => {

ui/src/app/edge/settings/app/update.component.ts

@@ -138,7 +138,8 @@ export class UpdateAppComponent implements OnInit {
  })).then(response => {
  this.instances.splice(this.instances.indexOf(instance), 1);
  this.service.toast(this.translate.instant('Edge.Config.App.successDelete'), 'success');
- this.router.navigate(['device/' + (this.edge.id) + '/settings/app/']);
+ const navigationExtras = { state: { appInstanceChange: true } };
+ this.router.navigate(['device/' + (this.edge.id) + '/settings/app/'], navigationExtras);
  })
  .catch(InstallAppComponent.errorToast(this.service, error => this.translate.instant('Edge.Config.App.failDelete', { error: error })))
  .finally(() => {