Merge "Added contents to CDS tools"
diff --git a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
index f5092af..092531e 100644
--- a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
+++ b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts
@@ -26,12 +26,11 @@
 
 export class SearchPipe implements PipeTransform{
    
-    transform(items: any[], searchText: string): any[] {
-        if(!items) return [];
-        if(!searchText) return items;
-        searchText = searchText.toLowerCase();
-        return items.filter( it => {
-            return it.toLowerCase().includes(searchText);
-        });
-    }   
+    transform(item: any, searchText: any): any {
+        if(searchText == null) return item;
+
+        return item.filter(function(search){
+          return search.type.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+        })
+      }
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
index 01e6e80..bcf2d15 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
@@ -39,7 +39,7 @@
         </mat-tree>
     </div>
     <div class="editorConatiner">
-        <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor>
+        <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
     </div>
 </div>
 <!-- <div style="position:relative">
@@ -65,7 +65,7 @@
     </div>
     <div style="height: 6em;
     width: 16em">
-    <button style="margin: 0.5em;
+        <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
@@ -74,32 +74,32 @@
     </div>
     <div style="height: 6em;
     width: 100%;">
-    <div style="margin-left: 38em">
-        <mat-form-field>
-            <select matNativeControl required>
+        <div style="margin-left: 38em">
+            <mat-form-field>
+                <select matNativeControl required>
               <option value="volvo">SDC</option>
               <option value="saab">CCSDK</option>
             </select>
-        </mat-form-field>
-        <button style="margin: 0.5em;
+            </mat-form-field>
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Deploy</button>
-        <button style="margin: 0.5em;
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Save</button>
-        <button style="margin: 0.5em;
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Download</button>
 
-    </div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
index ac70180..5092a69 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
@@ -79,6 +79,8 @@
   selectedFile: string;
   zipFolder: any;
   blueprintName: string;
+  fileExtension: string;
+  mode: string;
   private zipFile: JSZip = new JSZip();
 
   private transformer = (node: Node, level: number) => {
@@ -145,22 +147,21 @@
         // this.editor.getEditor().getSession().setMode("ace/mode/json");
         this.editor.getEditor().getSession().setTabSize(2);
         this.editor.getEditor().getSession().setUseWrapMode(true);
-        // this.editor.getEditor().setValue(JSON.stringify(this.blueprintdata, null, '\t'));
-        // console.log(this.text);
+        this.setEditorMode();
       })
   }
 
   updateBlueprint() {
     console.log(this.blueprint);
-    this.filesData.forEach(fileNode=>{
-      if(fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
+    this.filesData.forEach(fileNode => {
+      if (fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
         fileNode.data = this.text;
-      } else if(fileNode.name.includes(this.selectedFile.trim())) {
+      } else if (fileNode.name.includes(this.selectedFile.trim())) {
         fileNode.data = this.text;
       }
     });
 
-    if(this.selectedFile == this.blueprintName) {
+    if (this.selectedFile == this.blueprintName) {
       this.blueprint = JSON.parse(this.text);
     } else {
       this.blueprint = this.blueprintdata;
@@ -183,12 +184,15 @@
         this.text = fileNode.data;
       }
     })
+    this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1);
+    // console.log(this.fileExtension);
+    this.setEditorMode();
   }
 
   SaveToBackend() {
     this.zipFile.generateAsync({ type: "blob" })
       .then(blob => {
-        
+
       });
   }
 
@@ -196,7 +200,7 @@
     // to do
   }
 
-  create() {    
+  create() {
     this.filesData.forEach((path) => {
       this.zipFile.file(path.name, path.data);
     });
@@ -210,4 +214,29 @@
         saveAs(blob, zipFilename);
       });
   }
+  setEditorMode() {
+    switch (this.fileExtension) {
+      case "xml":
+        // console.log("xml mode set");
+        this.mode = 'xml';
+        break;
+      case "py":
+        console.log("python mode set");
+        this.mode = 'python';
+        break;
+      case "kts":
+        // console.log("kotlin mode set");
+        this.mode = 'kotlin';
+        break;
+      case "txt":
+        this.mode = 'text';
+        break;
+      case "meta":
+        this.mode = 'text';
+        break;
+      default:
+        this.mode = 'json';
+        console.log("json mode set");
+    }
+  }
 }
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 7c225d2..b16a064 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 @@
 -->
 <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 @@
             </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 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 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>
-  </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 22941b5..33a7e2d 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 @@
 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 ee33fd7..2a2455c 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 @@
 ============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 { 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 @@
   {
     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 @@
 })
 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 @@
   }
 
   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;
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts
index 677c6fe..ea5b5ff 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts
@@ -24,6 +24,7 @@
 import { TestTemplateComponent } from './test-template.component';
 import { TestTemplateRoutingModule } from './test-template-routing.module';
 import { AppMaterialModule } from '../../../common/modules/app-material.module';
+import { AceEditorModule } from 'ng2-ace-editor';
 
 @NgModule({
   declarations: [
@@ -35,7 +36,8 @@
   imports: [
     CommonModule,
     AppMaterialModule,
-    TestTemplateRoutingModule
+    TestTemplateRoutingModule,
+    AceEditorModule
   ]
 })
 export class TestTemplateModule { }