Modify Component HTML changes

Moved the deploy, save , download, publish, enrich action buttons to
common modify-template component

Issue-ID: CCSDK-1098
Change-Id: I52d4cb1864d90eecbb7b1fcdadfb17d8be84b86d
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

8 files changed, 94 insertions, 76 deletions

diff --git a/cds-ui/client/angular.json b/cds-ui/client/angular.json
index 9d07cfff9..96b4df009 100644
--- a/cds-ui/client/angular.json
+++ b/cds-ui/client/angular.json
@@ -29,7 +29,8 @@
                         "styles": [
                             "src/styles.scss",
                             "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-                            "./node_modules/material-design-icons/iconfont/material-icons.css"
+                            "./node_modules/material-design-icons/iconfont/material-icons.css",
+                            "./node_modules/font-awesome/css/font-awesome.css"
                         ],
                         "scripts": [
                             "./node_modules/ace-builds/src-min/ace.js",
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 0eea31ec1..8963be367 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -30,8 +30,8 @@
         "@types/d3": "^5.7.0",
         "core-js": "^2.5.4",
         "d3": "^5.9.1",
-        "font-awesome": "^4.7.0",
         "file-saver": "^2.0.1",
+        "font-awesome": "^4.7.0",
         "hammerjs": "^2.0.8",
         "jszip": "^3.2.0",
         "material-design-icons": "^3.0.1",
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 53bbc6dfa..64b201d81 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
@@ -21,13 +21,10 @@ limitations under the License.
 <div class="container">
     <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>
                 <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
             </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">
                 <mat-icon class="mat-icon-rtl-mirror">
@@ -39,26 +36,12 @@ limitations under the License.
         </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>
-<!-- <div style="position:relative">
-    <button mat-button class="savebtn" (click)="updateBlueprint();SaveToBackend()">Save</button>
-    <button mat-button class="savebtn" style="margin-left: 82px;" (click)="download();">Download</button>
-</div>
-
-<div>
-    <mat-form-field>
-        <select matNativeControl required>
-          <option value="volvo">SDC</option>
-          <option value="saab">CCSDK</option>
-        </select>
-    </mat-form-field>
-    <button  mat-button class="savebtn">Deploy</button>
-    <button  mat-button class="savebtn">Save</button>
-</div> -->
 
-<div style="display: flex;flex-direction: row">
+<!-- <div style="display: flex;flex-direction: row">
     <div style="height: 6em;
     width: 30em;">
 
@@ -102,4 +85,4 @@ limitations under the License.
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</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 58f0ab85d..136c08bfa 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
@@ -41,12 +41,20 @@ limitations under the License.
     overflow: hidden;
     height: 100% !important;
     background-color: white !important;
-    border: 1px solid #3f87a6;
-    border-left: 5px solid #3f87a6;
+    border: 1px solid #3f51b5;
+    // border-left: 5px solid #3f51b5;
 }
 .savebtn {
     color: white;
     background-color: #3f51b5;
     position: absolute;
     bottom: 5px;
+}
+.save-icon{
+    position: absolute;
+    left: 59em;
+    color: #3f51b5;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
index 81a1a851e..a77be5ba0 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
@@ -18,58 +18,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<!-- <div style="display: flex;flex-direction: row">
-  <div style="width: 30em;">
-  <button (click) ="changeView()" style="
-  background-color: #3f51b5;
-  color: white;
-  border-radius: 2em;
-  padding: 0.5em;
-  min-width: 6em;">{{viewText}}</button>
-  </div>
-  <div style="width: 16em">
-      <button style="margin: 0.5em;
-      background-color: #3f51b5;
-      color: white;
-      border-radius: 2em;
-      padding: 0.5em;
-      min-width: 6em;">Save Changes</button>
-  </div>
-  <div style="width: 100%;height: 3em;">
-      <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;
-      background-color: #3f51b5;
-      color: white;
-      border-radius: 2em;
-      padding: 0.5em;
-      min-width: 6em;">Deploy</button>
-          <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;
-      background-color: #3f51b5;
-      color: white;
-      border-radius: 2em;
-      padding: 0.5em;
-      min-width: 6em;">Download</button>
-
-      </div>
-  </div>
-</div> -->
-
 
 <div class="modifyTemp">
-  <button class="enrich-btn">Enrichment</button>
-  <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button>
   <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
   <app-editor class="editor-selector" *ngIf="editorMode"></app-editor>
-</div>
\ No newline at end of file
+</div>
+
+<div style="display: flex;flex-direction: row">
+    <div style="width: 30em;">
+    <button class="btn-active" (click) ="changeView()">{{viewText}}</button>
+    </div>
+    <div style="width: 16em">        
+    </div>
+    <div style="width: 100%;height: 3em;">
+        <div style="display: flex;flex-direction: row-reverse">        
+        <button class="btn-active" (click)="downloadCBA()">Download</button>
+        <button [disabled]="!isEnriched" [ngClass]="{ 'mat-button-active': isEnriched, 'mat-button-disablled': !isEnriched}" mat-button [matMenuTriggerFor]="menu">Deploy</button>
+         <mat-menu #menu="matMenu">
+                  <button mat-menu-item>Deploy</button>
+                  <button mat-menu-item>Test</button>
+          </mat-menu>
+        <button [disabled]="!isEnriched" [ngClass]="{ 'btn-active': isEnriched, 'btn-disablled': !isEnriched}" class="btn-active">Publish</button>        
+        <button class="btn-active">Save</button>
+        <button class="btn-active">Enrich</button>
+  
+        </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
index 2d9685e24..609d6faf0 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
@@ -54,4 +54,27 @@ limitations under the License.
 
 .editor-selector {
   width: 100%;
+}
+
+.mat-button-active{
+  margin: 0.5em;
+    background-color: #3f51b5 !important;
+    color: white !important;
+    border-radius: 4px;
+    border: none;
+    line-height: none !important;
+    // padding: 0.5em;
+    min-width: 6em;
+    cursor: pointer;
+}
+
+.mat-button-disablled {
+    background-color: #c5cae8 !important;
+    border-radius: 4px;
+    color: darkgray !important;
+    line-height: none !important;
+    margin: 0.5em;
+    // padding: 0.5em;
+    min-width: 6em;
+    cursor: initial;
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
index 809f31027..e39ce019c 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
@@ -19,7 +19,9 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { EditorComponent } from './editor/editor.component';
 
 @Component({
   selector: 'app-modify-template',
@@ -28,10 +30,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ModifyTemplateComponent implements OnInit {
 
+  isEnriched: boolean = false;
   designerMode: boolean = false;
   editorMode: boolean = true;
   viewText: string = "Designer View";
 
+  @ViewChild(EditorComponent) editorComp: EditorComponent;
+
   constructor() { }
 
   ngOnInit() {
@@ -53,4 +58,8 @@ export class ModifyTemplateComponent implements OnInit {
     }
   }
 
+  downloadCBA() {
+    this.editorComp.download();
+  }
+
 }
diff --git a/cds-ui/client/src/styles.scss b/cds-ui/client/src/styles.scss
index 1a81d0d71..10d55776d 100644
--- a/cds-ui/client/src/styles.scss
+++ b/cds-ui/client/src/styles.scss
@@ -24,3 +24,25 @@ limitations under the License.
 .mat-card:not([class*=mat-elevation-z]) {
     box-shadow: none !important;
 }
+
+.btn-active {
+    margin: 0.5em;
+    background-color: #3f51b5;
+    color: white;
+    border-radius: 4px;
+    border: none;
+    padding: 0.5em;
+    min-width: 6em;
+    cursor: pointer;
+}
+
+.btn-disablled {
+    background-color: #c5cae8;
+    border-radius: 4px;
+    color: darkgray;
+    margin: 0.5em;
+    padding: 0.5em;
+    min-width: 6em;
+    border: none;
+    cursor: initial;
+}
\ No newline at end of file