Added Ace-editor component

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

2 files changed, 31 insertions, 16 deletions

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 9dbaf6728..4c1a7dc9e 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
@@ -19,27 +19,29 @@ limitations under the License.
 ============LICENSE_END============================================ -->
 
 <div class="container">
-        <div class="fileViewContainer">
-          <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+    <div class="fileViewContainer">
+        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
             <!-- This is the tree node template for leaf nodes -->
             <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
-              <!-- use a disabled button to provide padding for tree leaf -->
-              <button mat-icon-button disabled></button>
-              <span (click)="fileClicked(node.name)">{{node.name}}</span>
+                <!-- use a disabled button to provide padding for tree leaf -->
+                <button mat-icon-button disabled></button>
+                <span (click)="fileClicked(node.name)">{{node.name}}</span>
             </mat-tree-node>
             <!-- This is the tree node template for expandable nodes -->
             <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-              <button mat-icon-button matTreeNodeToggle
-                      [attr.aria-label]="'toggle ' + node.name">
+                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                 <mat-icon class="mat-icon-rtl-mirror">
                   {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                 </mat-icon>
               </button>
-              <span (click)="fileClicked(node.name)">{{node.name}}</span>
+                <span (click)="fileClicked(node.name)">{{node.name}}</span>
             </mat-tree-node>
-          </mat-tree>
-        </div>
-        <div class="editorConatiner">
-          <p>Here comes the actual editor</p>
-        </div>
+        </mat-tree>
+    </div>
+    <div class="editorConatiner">
+        <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor>
+    </div>
+</div>
+<div style="position:relative">
+    <button mat-button class="savebtn" (click)="updateBlueprint()">Save</button>
 </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
index f7e6f493c..f2778840c 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
@@ -18,20 +18,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
+
 .container {
     display: flex;
     flex-direction: row;
-
+    margin-top: 8px;
     .fileViewContainer {
         width: 20%;
         margin: 2px
     }
-
     .editorConatiner {
         width: 80%;
         background-color: gainsboro;
-        height: 533px;
+        height: 450px !important;
         margin-left: 5em;
     }
+}
 
+.aceEditor {
+    overflow: hidden;
+    height: 100% !important;
+    background-color: white !important;
+    border: 1px solid #3f87a6;
+    border-left: 5px solid #3f87a6;
+}
+.savebtn {
+    color: white;
+    background-color: #3f51b5;
+    position: absolute;
+    bottom: 5px;
 }
\ No newline at end of file