From 149a1dc9909c03ab2f491427367ba6e9c458c57e Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 14 Jan 2021 13:17:23 +0200
Subject: [PATCH] UI: Added a new settings "Open in a new browser tab" in the
 widget action "Navigate to other dashboard"

---
 .../widget/action/widget-action-dialog.component.html       | 6 ++++++
 .../widget/action/widget-action-dialog.component.ts         | 4 ++++
 .../app/modules/home/components/widget/widget.component.ts  | 6 +++++-
 ui-ngx/src/app/shared/models/widget.models.ts               | 1 +
 ui-ngx/src/assets/locale/locale.constant-en_US.json         | 3 ++-
 5 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 7645a75ce7..1cfcbd7dd0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -112,6 +112,12 @@
             {{ 'widget-action.open-right-layout' | translate }}
           </mat-checkbox>
         </ng-template>
+        <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
+                                     widgetActionFormGroup.get('type').value : ''">
+          <mat-checkbox formControlName="openNewBrowserTab">
+            {{ 'widget-action.open-new-browser-tab' | translate }}
+          </mat-checkbox>
+        </ng-template>
         <ng-template [ngSwitchCase]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState ||
                                      widgetActionFormGroup.get('type').value === widgetActionType.updateDashboardState ||
                                      widgetActionFormGroup.get('type').value === widgetActionType.openDashboard ?
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 98a43fc50b..5aa758c6f8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -144,6 +144,10 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
             this.fb.control(action ? action.stateEntityParamName : null, [])
           );
           if (type === WidgetActionType.openDashboard) {
+            this.actionTypeFormGroup.addControl(
+              'openNewBrowserTab',
+              this.fb.control(action ? action.openNewBrowserTab : false, [])
+            );
             this.actionTypeFormGroup.addControl(
               'targetDashboardId',
               this.fb.control(action ? action.targetDashboardId : null,
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 60f8e0d75e..ef5555e5eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -1029,7 +1029,11 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         } else {
           url = `/dashboards/${targetDashboardId}?state=${state}`;
         }
-        this.router.navigateByUrl(url);
+        if (descriptor.openNewBrowserTab) {
+          window.open(url, '_blank');
+        } else {
+          this.router.navigateByUrl(url);
+        }
         break;
       case WidgetActionType.custom:
         const customFunction = descriptor.customFunction;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 8f58857d34..24ea528b46 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -344,6 +344,7 @@ export interface WidgetActionDescriptor extends CustomActionDescriptor {
   targetDashboardId?: string;
   targetDashboardStateId?: string;
   openRightLayout?: boolean;
+  openNewBrowserTab?: boolean;
   setEntityId?: boolean;
   stateEntityParamName?: string;
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index ece8f3774f..5ebc491c49 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2257,7 +2257,8 @@
         "target-dashboard-state-required": "Target dashboard state is required",
         "set-entity-from-widget": "Set entity from widget",
         "target-dashboard": "Target dashboard",
-        "open-right-layout": "Open right dashboard layout (mobile view)"
+        "open-right-layout": "Open right dashboard layout (mobile view)",
+        "open-new-browser-tab": "Open in a new browser tab"
     },
     "widgets-bundle": {
         "current": "Current bundle",