custom action name

Issue-ID: CCSDK-2269
Change-Id: I16efe1d6bae9ef13f4c70525db4e37d35154479a
Signed-off-by: Rupinder <rupinsi1@in.ibm.com>

5 files changed, 64 insertions, 58 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index a549d54a2..a31c95652 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -209,7 +209,7 @@
                                                             </div>
                                                             <div class="row">
                                                                 <div class="col text-center">
-                                                                    <button class="btn skip-btn">Skip to Designer Canvas</button>
+                                                                    <button class="btn skip-btn" (click)="goToDesignerMode(viewedPackage.id)">Skip to Designer Canvas</button>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -220,7 +220,7 @@
                                                                     class="icon-action-back"></i></button>
                                                             <h1>Create Custom Action</h1>
                                                             <div class="form-group text-center">
-                                                                <input type="text" class="form-control customAction"
+                                                                <input type="text" [(ngModel)]="customActionName" class="form-control customAction"
                                                                     placeholder="Type Action Name" autofocus>
                                                                 <button type="button" (click)="goToDesignerMode(viewedPackage.id)" class="btn submit">Start</button>
                                                             </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 0578b10f8..19c10c5fd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -13,16 +13,18 @@ import {PackageCreationModes} from '../package-creation/creationModes/PackageCre
 import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder';
 import {saveAs} from 'file-saver';
 import {DesignerStore} from '../designer/designer.store';
+import { DesignerService } from '../designer/designer.service';
 
 @Component({
     selector: 'app-configuration-dashboard',
     templateUrl: './configuration-dashboard.component.html',
-    styleUrls: ['./configuration-dashboard.component.css']
+    styleUrls: ['./configuration-dashboard.component.css'],
 })
 export class ConfigurationDashboardComponent implements OnInit {
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
     @ViewChild(MetadataTabComponent, {static: false})
     private metadataTabComponent: MetadataTabComponent;
+    public customActionName: string;
 
     entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
         'author-email', 'template_version', 'template_name', 'template_author'];
@@ -39,7 +41,8 @@ export class ConfigurationDashboardComponent implements OnInit {
                 private packageCreationStore: PackageCreationStore,
                 private packageCreationUtils: PackageCreationUtils,
                 private router: Router,
-                private designerStore: DesignerStore) {
+                private designerStore: DesignerStore,
+                private designerService: DesignerService) {
     }
 
     ngOnInit() {
@@ -207,6 +210,7 @@ export class ConfigurationDashboardComponent implements OnInit {
     }
 
     goToDesignerMode(id) {
-        this.router.navigate(['/packages/designer', id]);
+      //  this.designerService.setActionName(this.customActionName);
+        this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
      }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 04f410c5f..964268de5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -316,17 +316,19 @@ p.compType-4{
   color: #C3CDDB;
 }
 .actionBtns .btn{
-  margin: 0 15px 12px;
-  padding: 9px 20px;
-  border-radius: 2px !important;
-  font-size: 12px;
+  margin: 0px 15px 16px -90px;
+  /* padding: 9px 20px; */
+  border-radius: 0px;
+  font-size: 14px;
   font-weight: bold;
-  outline: 0 !important;
+  /* outline: 0 !important; */
+  float: left;
+  
 }
 .actionBtns .btn.insert-custom{
-  background: #1B3E6F;
-  border: solid 1px #1B3E6F;
-  color: #fff;
+  /* background: white; */
+  /* border: solid 1px #1B3E6F; */
+  color: #1B3E6F;
 }
 .actionBtns .btn.import-action{
   border: solid 1px #D0DFF1;
@@ -347,6 +349,18 @@ p.compType-4{
 .custom-control-label:hover{
   cursor: pointer;
 }
+.custom-control{
+  padding-top: 10px;
+  width: 315px;
+  height: 40px;
+  margin-left: -15px;
+  font-size: 14px;
+  padding-bottom: 0;
+}
+.custom-control:hover{
+    background-color: white;
+}
+
 .actionsList .custom-checkbox,
 .componentsList .list-group-item{
   margin-bottom: 10px;
@@ -405,8 +419,9 @@ p.compType-4{
  
 /*CANVAS*/
 .editBar{
-  width: 200px;
-  margin: 0 auto 0;
+  width: 1080px;
+  height: 50px;
+  margin: 0 auto 0 -392px;
   padding: 6px 10px;
   background:#F4F9FE;
   /* border: solid 1px #E8EFF8; */
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 3e3528c00..6904d5781 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -100,12 +100,17 @@
     </div>
 </header>
 <div class="source-button editBar">
+    
     <div class="btn-group viewBtns" role="group">
+        <button (click)="_toggleSidebar1()" class="topologySource active">
+            <i style="font-size:24px" class="fa">&#xf101;</i> 
+        </button>
         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
         <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
             class="btn btn-secondary topologyView">Scripting</button>
     </div>
 </div>
+
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
@@ -122,21 +127,33 @@
                         href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
-   </nav>
+        </nav>
 
 
- <div class="row mt-2">
-            <div class="col">
+        <div class="row mt-2">
+            <div class="col-12">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
                         aria-labelledby="nav-action-tab">
+                        <!--Action Search Box-->
+                        <div>
+                            <h1>Search</h1>
+                        </div>
+
                         <div class="btn-group actionBtns col-8" role="group">
                             <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">
-                                Insert Custom
+                               + New Action
                             </button> 
-                      <!-- <button type="button" class="btn import-action"><i class="icon-import-blue" aria-hidden="true"></i>Import Action</button> -->
                         </div>
+
+                            <div>
+                              <div *ngIf="showAction" class="custom-control">
+                                <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span>
+                                    {{customActionName}} </label>
+                              </div>
+                            </div>
                     </div>
+
                     <div class="tab-pane fade" id="nav-function" role="tabpanel"
                         aria-labelledby="nav-function-tab">
                         <div class="col-12 text-center p-0">
@@ -148,41 +165,7 @@
             </div>
         </div>
        
-            <!-- <div class="col-12 actionsList">
-        <b>Select from other packages:</b>
-        <div class="actions-scroll">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck1">
-            <label class="custom-control-label" for="customCheck1">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck2">
-            <label class="custom-control-label" for="customCheck2">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck3">
-            <label class="custom-control-label" for="customCheck3">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input" id="customCheck4">
-            <label class="custom-control-label" for="customCheck4">Action name
-              <p class="m-0">Toplogy name</p>
-            </label>
-          </div>
-        </div>
-        <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-secondary mr-3">Insert</button>
-          <button type="button" class="btn btn-secondary">Cancel</button>
-        </div>
-      </div> -->
-
-           
+   
     </ng-sidebar>
     <!-- Page content -->
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index fa3a99b49..fe90b6b90 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -40,7 +40,6 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 import { ActivatedRoute } from '@angular/router';
 import { DesignerService } from './designer.service';
 
-
 @Component({
   selector: 'app-designer',
   templateUrl: './designer.component.html',
@@ -52,6 +51,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
   viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+  customActionName: string;
+  showAction: boolean;
 
   boardGraph: joint.dia.Graph;
   boardPaper: joint.dia.Paper;
@@ -69,6 +70,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
               private designerService: DesignerService) {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
+    this.showAction = false;
 
   }
   private _toggleSidebar1() {
@@ -92,10 +94,13 @@ export class DesignerComponent implements OnInit, OnDestroy {
    */
 
   ngOnInit() {
+    this.customActionName = this.route.snapshot.paramMap.get('actionName');
+    if (this.customActionName != null) {
+      this.showAction = true;
+    }
     this.initializeBoard();
     this.initializePalette();
     this.stencilPaperEventListeners();
-
     const id = this.route.snapshot.paramMap.get('id');
     this.designerService.getPagedPackages(id).subscribe(
       (bluePrintDetailModels) => {
@@ -103,7 +108,6 @@ export class DesignerComponent implements OnInit, OnDestroy {
           this.viewedPackage = bluePrintDetailModels[0];
         }
       });
-
     /**
      * the code to retrieve from server is commented
      */