1 files changed, 42 insertions, 0 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
new file mode 100644
index 000000000..308f9cc1f
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
@@ -0,0 +1,42 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+============LICENSE_END============================================ -->
+
+<div class="container">
+    <div class="fileViewContainer">
+        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" style="background-color: #ebebeb">
+            <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectFileToView(node);activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
+                <button mat-icon-button disabled></button>
+                <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
+            </mat-tree-node>
+            <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+                <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>
+                <button mat-icon-button>{{node.name}}</button>
+            </mat-tree-node>
+        </mat-tree>
+    </div>
+    <div class="editorConatiner">
+        <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
+        <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
+    </div>
+</div>
+\ No newline at end of file