From 72b02eb7d3bba8505e72b6b588cb426df5d92070 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 24 Dec 2019 16:27:09 +0200
Subject: [PATCH] Test script function dialog.

---
 .../script/node-script-test.service.ts        | 22 ++++++--
 .../node-script-test-dialog.component.html    |  7 +--
 .../node-script-test-dialog.component.scss    | 28 +++++++----
 .../node-script-test-dialog.component.ts      | 50 +++++++------------
 ui-ngx/src/app/shared/shared.module.ts        |  6 ++-
 5 files changed, 65 insertions(+), 48 deletions(-)
 rename ui-ngx/src/app/{core/services/script => shared/components/dialog}/node-script-test-dialog.component.html (95%)
 rename ui-ngx/src/app/{core/services/script => shared/components/dialog}/node-script-test-dialog.component.scss (69%)
 rename ui-ngx/src/app/{core/services/script => shared/components/dialog}/node-script-test-dialog.component.ts (81%)

diff --git a/ui-ngx/src/app/core/services/script/node-script-test.service.ts b/ui-ngx/src/app/core/services/script/node-script-test.service.ts
index 3efa935c2e..d946425698 100644
--- a/ui-ngx/src/app/core/services/script/node-script-test.service.ts
+++ b/ui-ngx/src/app/core/services/script/node-script-test.service.ts
@@ -18,13 +18,16 @@ import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { map, switchMap } from 'rxjs/operators';
+import { MatDialog } from '@angular/material';
+import { NodeScriptTestDialogComponent, NodeScriptTestDialogData } from '@shared/components/dialog/node-script-test-dialog.component';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NodeScriptTestService {
 
-  constructor(private ruleChainService: RuleChainService) {
+  constructor(private ruleChainService: RuleChainService,
+              public dialog: MatDialog) {
   }
 
   testNodeScript(script: string, scriptType: string, functionTitle: string,
@@ -73,8 +76,21 @@ export class NodeScriptTestService {
     if (!msgType) {
       msgType = 'POST_TELEMETRY_REQUEST';
     }
-    console.log(`testNodeScript TODO: ${script}`);
-    return of(script);
+    return this.dialog.open<NodeScriptTestDialogComponent, NodeScriptTestDialogData, string>(NodeScriptTestDialogComponent,
+      {
+        disableClose: true,
+        panelClass: ['tb-dialog', 'tb-fullscreen-dialog', 'tb-fullscreen-dialog-gt-sm'],
+        data: {
+          msg,
+          metadata,
+          msgType,
+          functionTitle,
+          functionName,
+          script,
+          scriptType,
+          argNames
+        }
+      }).afterClosed();
   }
 
 }
diff --git a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
similarity index 95%
rename from ui-ngx/src/app/core/services/script/node-script-test-dialog.component.html
rename to ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 8a3e17247b..c1b20aef19 100644
--- a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<form #nodeScriptTestForm="ngForm" [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()" style="width: 800px;">
+<form class="tb-node-script-test-dialog"
+      #nodeScriptTestForm="ngForm" [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
   <mat-toolbar fxLayout="row" color="primary">
     <h2>{{ 'rulenode.test-script-function' | translate }}</h2>
     <span fxFlex></span>
@@ -43,8 +44,8 @@
           <div tb-toast toastTarget="metadataPanel" class="tb-resize-container">
             <div class="tb-editor-area-title-panel">
               <label translate>rulenode.metadata</label>
-              TODO: metadataForm
             </div>
+            TODO: metadataForm
           </div>
         </div>
       </div>
@@ -72,7 +73,6 @@
     <button mat-button mat-raised-button color="primary"
             type="button"
             (click)="test()"
-            cdkFocusInitial
             [disabled]="(isLoading$ | async) || nodeScriptTestFormGroup.invalid">
       {{ 'rulenode.test' | translate }}
     </button>
@@ -85,6 +85,7 @@
     <button mat-button color="primary"
             style="margin-right: 20px;"
             type="button"
+            cdkFocusInitial
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
diff --git a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.scss b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss
similarity index 69%
rename from ui-ngx/src/app/core/services/script/node-script-test-dialog.component.scss
rename to ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss
index e848572f2f..b8e8b86614 100644
--- a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.scss
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss
@@ -1,4 +1,22 @@
-:host {
+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.tb-node-script-test-dialog {
+  width: 100%;
+  height: 100%;
+
   .tb-split {
     box-sizing: border-box;
     overflow-x: hidden;
@@ -10,14 +28,6 @@
     padding-left: 5px;
     border: 1px solid #c0c0c0;
   }
-
-  .gutter {
-    background-color: #eee;
-
-    background-repeat: no-repeat;
-    background-position: 50%;
-  }
-
   .gutter {
     background-color: #eee;
     background-repeat: no-repeat;
diff --git a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
similarity index 81%
rename from ui-ngx/src/app/core/services/script/node-script-test-dialog.component.ts
rename to ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
index d5e4cb28f8..68772d4dd8 100644
--- a/ui-ngx/src/app/core/services/script/node-script-test-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
@@ -17,41 +17,21 @@
 import {
   AfterViewInit,
   Component,
-  ElementRef,
+  ElementRef, HostBinding,
   Inject,
   OnInit,
   QueryList,
   SkipSelf,
-  ViewChild,
-  ViewChildren
+  ViewChildren,
+  ViewEncapsulation
 } from '@angular/core';
 import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  FormGroupDirective,
-  NgForm,
-  ValidatorFn,
-  Validators
-} from '@angular/forms';
-import { combineLatest, Observable, of } from 'rxjs';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { combineLatest } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
-import {
-  toCustomAction,
-  WidgetActionCallbacks,
-  WidgetActionDescriptorInfo,
-  WidgetActionsData
-} from '@home/components/widget/action/manage-widget-actions.component.models';
-import { UtilsService } from '@core/services/utils.service';
-import { WidgetActionSource, WidgetActionType, widgetActionTypeTranslationMap } from '@shared/models/widget.models';
-import { map, mergeMap, startWith, tap } from 'rxjs/operators';
-import { DashboardService } from '@core/http/dashboard.service';
-import { Dashboard } from '@shared/models/dashboard.models';
-import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 
 export interface NodeScriptTestDialogData {
   script: string;
@@ -68,11 +48,15 @@ export interface NodeScriptTestDialogData {
   selector: 'tb-node-script-test-dialog',
   templateUrl: './node-script-test-dialog.component.html',
   providers: [{provide: ErrorStateMatcher, useExisting: NodeScriptTestDialogComponent}],
-  styleUrls: ['./node-script-test-dialog.component.scss']
+  styleUrls: ['./node-script-test-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTestDialogComponent,
   string> implements OnInit, AfterViewInit, ErrorStateMatcher {
 
+  @HostBinding('style.width') width = '100%';
+  @HostBinding('style.height') height = '100%';
+
   @ViewChildren('topPanel')
   topPanelElmRef: QueryList<ElementRef<HTMLElement>>;
 
@@ -88,7 +72,7 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
   @ViewChildren('bottomLeftPanel')
   bottomLeftPanelElmRef: QueryList<ElementRef<HTMLElement>>;
 
-  @ViewChildren('bottomLeftPanel')
+  @ViewChildren('bottomRightPanel')
   bottomRightPanelElmRef: QueryList<ElementRef<HTMLElement>>;
 
   nodeScriptTestFormGroup: FormGroup;
@@ -108,11 +92,13 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
   }
 
   ngOnInit(): void {
-    this.nodeScriptTestFormGroup = this.fb.group({});
+    this.nodeScriptTestFormGroup = this.fb.group({
+      funcBody: ['', [Validators.required]]
+    });
   }
 
   ngAfterViewInit(): void {
-    combineLatest(this.topPanelElmRef.changes,
+/*    combineLatest(this.topPanelElmRef.changes,
                   this.topLeftPanelElmRef.changes,
                   this.topRightPanelElmRef.changes,
                   this.bottomPanelElmRef.changes,
@@ -120,15 +106,15 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
                   this.bottomRightPanelElmRef.changes).subscribe(() => {
       if (this.topPanelElmRef.length && this.topLeftPanelElmRef.length &&
           this.topRightPanelElmRef.length && this.bottomPanelElmRef.length &&
-          this.bottomLeftPanelElmRef.length && this.bottomRightPanelElmRef.length) {
+          this.bottomLeftPanelElmRef.length && this.bottomRightPanelElmRef.length) {*/
         this.initSplitLayout(this.topPanelElmRef.first.nativeElement,
                              this.topLeftPanelElmRef.first.nativeElement,
                              this.topRightPanelElmRef.first.nativeElement,
                              this.bottomPanelElmRef.first.nativeElement,
                              this.bottomLeftPanelElmRef.first.nativeElement,
                              this.bottomRightPanelElmRef.first.nativeElement);
-      }
-    });
+    //  }
+    //});
   }
 
   private initSplitLayout(topPanel: any,
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 7980d83287..d7773efac0 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -114,6 +114,7 @@ import { MaterialIconsDialogComponent } from '@shared/components/dialog/material
 import { MaterialIconSelectComponent } from '@shared/components/material-icon-select.component';
 import { ImageInputComponent } from './components/image-input.component';
 import { FileInputComponent } from './components/file-input.component';
+import { NodeScriptTestDialogComponent } from '@shared/components/dialog/node-script-test-dialog.component';
 
 @NgModule({
   providers: [
@@ -134,7 +135,8 @@ import { FileInputComponent } from './components/file-input.component';
     DashboardSelectPanelComponent,
     MatSpinner,
     ColorPickerDialogComponent,
-    MaterialIconsDialogComponent
+    MaterialIconsDialogComponent,
+    NodeScriptTestDialogComponent
   ],
   declarations: [
     FooterComponent,
@@ -182,6 +184,7 @@ import { FileInputComponent } from './components/file-input.component';
     MaterialIconsDialogComponent,
     ColorInputComponent,
     MaterialIconSelectComponent,
+    NodeScriptTestDialogComponent,
     JsonFormComponent,
     ImageInputComponent,
     FileInputComponent,
@@ -324,6 +327,7 @@ import { FileInputComponent } from './components/file-input.component';
     MaterialIconsDialogComponent,
     ColorInputComponent,
     MaterialIconSelectComponent,
+    NodeScriptTestDialogComponent,
     JsonFormComponent,
     ImageInputComponent,
     FileInputComponent,