Do not use dashboard state param from url location inside embed dashboard dialog

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

@@ -53,6 +53,7 @@
                                [isMobile]="isMobile"
                                [state]="dashboardCtx.state"
                                [currentState]="currentState"
+                               [syncStateWithQueryParam]="syncStateWithQueryParam"
                                [states]="dashboardConfiguration.states">
           </tb-states-component>
         </div>

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

@@ -123,6 +123,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   @Input()
   hideToolbar: boolean;
 
+  @Input()
+  syncStateWithQueryParam = true;
+
   @Input()
   dashboard: Dashboard;
   dashboardConfiguration: DashboardConfiguration;

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

@@ -88,6 +88,8 @@ export abstract class StateControllerComponent implements IStateControllerCompon
 
   currentState: string;
 
+  syncStateWithQueryParam: boolean;
+
   private rxSubscriptions = new Array<Subscription>();
 
   private inited = false;
@@ -99,18 +101,20 @@ export abstract class StateControllerComponent implements IStateControllerCompon
   }
 
   ngOnInit(): void {
-    this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
+    if (this.syncStateWithQueryParam) {
-      const dashboardId = this.route.snapshot.params.dashboardId || '';
+      this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => {
-      if (this.dashboardId === dashboardId) {
+        const dashboardId = this.route.snapshot.params.dashboardId || '';
-        const newState = this.decodeStateParam(paramMap.get('state'));
+        if (this.dashboardId === dashboardId) {
-        if (this.currentState !== newState) {
+          const newState = this.decodeStateParam(paramMap.get('state'));
-          this.currentState = newState;
+          if (this.currentState !== newState) {
-          if (this.inited) {
+            this.currentState = newState;
-            this.onStateChanged();
+            if (this.inited) {
+              this.onStateChanged();
+            }
           }
         }
-      }
+      }));
-    }));
+    }
     this.init();
     this.inited = true;
   }
@@ -124,16 +128,18 @@ export abstract class StateControllerComponent implements IStateControllerCompon
 
   protected updateStateParam(newState: string) {
     this.currentState = newState;
-    const queryParams: Params = { state: this.currentState };
+    if (this.syncStateWithQueryParam) {
-    this.ngZone.run(() => {
+      const queryParams: Params = {state: this.currentState};
-      this.router.navigate(
+      this.ngZone.run(() => {
-        [],
+        this.router.navigate(
-        {
+          [],
-          relativeTo: this.route,
+          {
-          queryParams,
+            relativeTo: this.route,
-          queryParamsHandling: 'merge',
+            queryParams,
-        });
+            queryParamsHandling: 'merge',
-    });
+          });
+      });
+    }
   }
 
   public openRightLayout(): void {

ui-ngx/src/app/modules/home/components/dashboard-page/states/state-controller.models.ts

@@ -24,6 +24,7 @@ export interface IStateControllerComponent extends IStateController {
   stateControllerInstanceId: string;
   state: string;
   currentState: string;
+  syncStateWithQueryParam: boolean;
   isMobile: boolean;
   states: {[id: string]: DashboardState };
   dashboardId: string;

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

@@ -53,6 +53,9 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
   @Input()
   currentState: string;
 
+  @Input()
+  syncStateWithQueryParam: boolean;
+
   @Input()
   isMobile: boolean;
 
@@ -89,6 +92,8 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
           this.stateControllerComponent.state = this.state;
         } else if (propName === 'currentState') {
           this.stateControllerComponent.currentState = this.currentState;
+        } else if (propName === 'syncStateWithQueryParam') {
+          this.stateControllerComponent.syncStateWithQueryParam = this.syncStateWithQueryParam;
         }
       }
     }
@@ -119,6 +124,7 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
     this.stateControllerComponent.stateControllerInstanceId = stateControllerInstanceId;
     this.stateControllerComponent.state = this.state;
     this.stateControllerComponent.currentState = this.currentState;
+    this.stateControllerComponent.syncStateWithQueryParam = this.syncStateWithQueryParam;
     this.stateControllerComponent.isMobile = this.isMobile;
     this.stateControllerComponent.states = this.states;
     this.stateControllerComponent.dashboardId = this.dashboardId;

ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html

@@ -27,7 +27,8 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
-    <tb-dashboard-page [embedded]="true" [hideToolbar]="hideToolbar" [currentState]="state" [dashboard]="dashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
+    <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
+                       [currentState]="state" [dashboard]="dashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"