UI: Fix widget container tooltip crash on destroy. Fix raise condition on dashboard page destroy.

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -169,6 +169,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   LayoutType = LayoutType;
 
+  private destroyed = false;
+
   private forcePristine = false;
 
   get isDirty(): boolean {
@@ -594,6 +596,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   ngOnDestroy(): void {
+    this.destroyed = true;
     this.cleanupDashboardCss();
     if (this.isMobileApp && this.syncStateWithQueryParam) {
       this.mobileService.unregisterToggleLayoutFunction();
@@ -1106,16 +1109,18 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   public openDashboardState(state: string, openRightLayout?: boolean) {
-    const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state);
+    if (!this.destroyed) {
-    if (layoutsData) {
+      const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state);
-      this.dashboardCtx.state = state;
+      if (layoutsData) {
-      this.dashboardCtx.aliasController.dashboardStateChanged();
+        this.dashboardCtx.state = state;
-      this.isRightLayoutOpened = openRightLayout ? true : false;
+        this.dashboardCtx.aliasController.dashboardStateChanged();
-      this.updateLayouts(layoutsData);
+        this.isRightLayoutOpened = openRightLayout ? true : false;
+        this.updateLayouts(layoutsData);
+      }
+      setTimeout(() => {
+        this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
+      });
     }
-    setTimeout(() => {
-      this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
-    });
   }
 
   private updateLayouts(layoutsData?: DashboardLayoutsInfo) {

ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts

@@ -18,11 +18,11 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
+  Component, ComponentRef,
   ElementRef,
   EventEmitter,
   HostBinding,
-  Input, OnChanges,
+  Input, NgZone, OnChanges,
   OnDestroy,
   OnInit,
   Output,
@@ -134,7 +134,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
               private renderer: Renderer2,
               private container: ViewContainerRef,
               private dashboardUtils: DashboardUtilsService,
-              private utils: UtilsService) {
+              private utils: UtilsService,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -173,7 +174,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     if (this.cssClass) {
       this.utils.clearCssElement(this.renderer, this.cssClass);
     }
-    if (this.editWidgetActionsTooltip) {
+    if (this.editWidgetActionsTooltip && !this.editWidgetActionsTooltip.status().destroyed) {
       this.editWidgetActionsTooltip.destroy();
     }
   }
@@ -255,6 +256,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
   }
 
   private initEditWidgetActionTooltip(parent: HTMLElement) {
+    let componentRef: ComponentRef<EditWidgetActionsTooltipComponent>;
     from(import('tooltipster')).subscribe(() => {
       $(this.gridsterItem.el).tooltipster({
         parent: $(parent),
@@ -305,24 +307,26 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         }
       });
       this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance');
-      const componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent);
+      this.zone.run(() => {
-      componentRef.instance.container = this;
+        componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent);
-      componentRef.instance.viewInited.subscribe(() => {
+        componentRef.instance.container = this;
-        if (this.editWidgetActionsTooltip.status().open) {
+        componentRef.instance.viewInited.subscribe(() => {
-          this.editWidgetActionsTooltip.reposition();
+          if (this.editWidgetActionsTooltip.status().open) {
-        }
+            this.editWidgetActionsTooltip.reposition();
-      });
+          }
-      this.editWidgetActionsTooltip.on('destroyed', () => {
+        });
-        componentRef.destroy();
+        this.editWidgetActionsTooltip.on('destroyed', () => {
+          componentRef.destroy();
+        });
+        const parentElement = componentRef.instance.element.nativeElement;
+        const content = parentElement.firstChild;
+        parentElement.removeChild(content);
+        parentElement.style.display = 'none';
+        this.editWidgetActionsTooltip.content(content);
+        this.updateEditWidgetActionsTooltipState();
+        this.widget.onSelected((selected) =>
+          this.updateEditWidgetActionsTooltipSelectedState(selected));
       });
-      const parentElement = componentRef.instance.element.nativeElement;
-      const content = parentElement.firstChild;
-      parentElement.removeChild(content);
-      parentElement.style.display = 'none';
-      this.editWidgetActionsTooltip.content(content);
-      this.updateEditWidgetActionsTooltipState();
-      this.widget.onSelected((selected) =>
-        this.updateEditWidgetActionsTooltipSelectedState(selected));
     });
   }