ControllerBlueprint Test editor

Change-Id: I02d94da784287cda2d090a1480a6e49fd7d8945f
Issue-ID: CCSDK-761
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

3 files changed, 72 insertions, 53 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
index 7c225d285..b16a06494 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
@@ -20,7 +20,7 @@ limitations under the License.
 -->
 <div style="display: flex;flex-direction: row">
 
-  <div style="width: 12%; height: 553px;">
+    <!-- <div style="width: 12%; height: 553px;">
 
       <mat-accordion>
           <mat-expansion-panel>
@@ -34,38 +34,32 @@ limitations under the License.
             </div>
           </mat-expansion-panel>
         </mat-accordion>
-  </div>
+  </div> -->
 
-  <div style="width: 90%;display: flex;flex-direction: row; margin-left: 1em">
-    <div style="width: 50%; margin: 2px;">
-      <p>Request</p>
-      <textarea style=" width: 99%;
-      min-height: 27rem;
-      font-family: Lucida Console, Monaco, monospace;
-      font-size: 0.8rem;
-      line-height: 1.2;" cols="30" rows="10">{{request }}</textarea>
-      <div style="height: 10%">
-          <button style="margin: 1em;
-          background-color: #3f51b5;
-          color: white;
-          border-radius: 2em;
-          padding: 0.5em;min-width: 6em;">Submit</button>
-          <button style="margin: 1em;
-          background-color: #3f51b5;
-          color: white;
-          border-radius: 2em;
-          padding: 0.5em;min-width: 6em;">Clear</button>
+    <div style="width: 100%;display: flex;flex-direction: row; margin-left: 1em">
+        <div style="width: 50%; margin: 2px; ">
+            <p>Request</p>
+            <!-- <textarea style=" width: 99%;
+  min-height: 27rem;
+  font-family: Lucida Console, Monaco, monospace;
+  font-size: 0.8rem;
+  line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> -->
+            <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor>
+            <div style="height: 10%">
+                <button class="button">Submit</button>
+                <button class="button">Clear</button>
+            </div>
         </div>
-    </div>
 
-    <div style="width: 50%; margin: 2px;">
-      <p>Response</p>
-      <textarea style=" width: 99%;
-      min-height: 27rem;
-      font-family: Lucida Console, Monaco, monospace;
-      font-size: 0.8rem;
-      line-height: 1.2;" cols="30" rows="10"></textarea>
+        <div style="width: 50%; margin: 2px;">
+            <p>Response</p>
+            <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor>
+            <!-- <textarea style=" width: 99%;
+  min-height: 27rem;
+  font-family: Lucida Console, Monaco, monospace;
+  font-size: 0.8rem;
+  line-height: 1.2;" cols="30" rows="10"></textarea> -->
+        </div>
     </div>
-  </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
index 22941b5fa..33a7e2d60 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
@@ -17,4 +17,24 @@ 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.
 ============LICENSE_END============================================
-*/
\ No newline at end of file
+*/
+
+.aceEditor {
+    overflow: hidden;
+    // height: 100% !important;
+    min-height: 27rem;
+    background-color: white !important;
+    border: 1px solid #3f87a6;
+    border-left: 3px solid #3f87a6;
+    line-height: 1.2;
+    width: 99%;
+}
+
+.button {
+    margin: 1em;
+    background-color: #3f51b5;
+    color: white;
+    border-radius: 2em;
+    padding: 0.5em;
+    min-width: 6em;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
index ee33fd737..2a2455c61 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
@@ -19,9 +19,9 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
 import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
 
@@ -31,7 +31,10 @@ import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model';
 import { IMetaData } from '../../../common/core/store/models/metadata.model';
 import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action';
 
-
+import "ace-builds/webpack-resolver";
+import 'brace';
+import 'brace/ext/language_tools';
+import 'ace-builds/src-min-noconflict/snippets/html';
 
 interface FoodNode {
   name: string;
@@ -42,19 +45,19 @@ const TREE_DATA: FoodNode[] = [
   {
     name: 'Definitions',
     children: [
-      {name: 'activation-blueprint.json'},
-      {name: 'artifacts_types.json'},
-      {name: 'data_types.json'},
+      { name: 'activation-blueprint.json' },
+      { name: 'artifacts_types.json' },
+      { name: 'data_types.json' },
     ]
-  }, 
+  },
   {
     name: 'Scripts',
     children: [
       {
         name: 'kotlin',
         children: [
-          {name: 'ScriptComponent.cba.kts'},
-          {name: 'ResourceAssignmentProcessor.cba.kts'},
+          { name: 'ScriptComponent.cba.kts' },
+          { name: 'ResourceAssignmentProcessor.cba.kts' },
         ]
       }
     ]
@@ -95,9 +98,10 @@ interface ExampleFlatNode {
 })
 export class TestTemplateComponent implements OnInit {
   private blueprintpState: Subscription;
-  private request ;
+  private request;
   private workflows = [];
-
+  @ViewChild('editor') editor;
+  options: any = { fontSize: "100%", printMargin: false, tabSize: 2 };
   private transformer = (node: FoodNode, level: number) => {
     return {
       expandable: !!node.children && node.children.length > 0,
@@ -107,23 +111,24 @@ export class TestTemplateComponent implements OnInit {
   }
 
   treeControl = new FlatTreeControl<ExampleFlatNode>(
-      node => node.level, node => node.expandable);
+    node => node.level, node => node.expandable);
 
   treeFlattener = new MatTreeFlattener(
-      this.transformer, node => node.level, node => node.expandable, node => node.children);
+    this.transformer, node => node.level, node => node.expandable, node => node.children);
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
   constructor(private store: Store<IAppState>) {
     this.blueprintpState = this.store.select('blueprint')
-                            .subscribe((data: any)=>{
-                              console.log(data);
-                              if(data.blueprint.topology_template && data.blueprint.topology_template.workflows) {
-                                this.buildWorkflowData(data.blueprint.topology_template.workflows);
-                               // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4);
-                              }
-                            });
+      .subscribe((data: any) => {
+        console.log(data);
+        if (data.blueprint.topology_template && data.blueprint.topology_template.workflows) {
+          this.buildWorkflowData(data.blueprint.topology_template.workflows);
+          // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4);
+        }
+      });
     this.dataSource.data = TREE_DATA;
+
   }
 
   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;