added navbar in source-view component

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

2 files changed, 52 insertions, 13 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
index c6b442bb6..270482f12 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
@@ -4,11 +4,11 @@
             <p class="logo mb-0"></p>
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb designer-breadcrumb mb-0">
-                    <li class="breadcrumb-item">
+                    <li class="breadcrumb-item"> 
                         <a href="#">CBA Packages</a>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i>
-                    <li class="breadcrumb-item">
+                    <i class="fa fa-angle-right ml-2 mr-2"></i> 
+                    <li class="breadcrumb-item"> 
                         <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
                             data-target="#exampleModalLong">
@@ -98,27 +98,56 @@
         </div>
     </div>
 </header>
-<div class="source-button editBar">
-    <div class="btn-group viewBtns" role="group">
-        <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button" class="btn btn-secondary topologySource">Designer</button>
-        <button type="button"
-            class="btn btn-secondary topologyView active">Scripting</button>
+
+<nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
+    <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
+        data-tooltip="Collapse Side bar">
+        <i class="fa arr-size">&#xf100;</i>
+    </button>
+    <div class="collapse navbar-collapse ">
+        <ul class="navbar ml-auto" style="list-style: none">
+            <li style="margin-right: 60px">
+                <ul class="navbar editor">
+                    <li>
+                        <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
+                            <img src="/assets/img/icon-undoActive.svg">
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="btn tooltip-bottom" data-tooltip="Redo">
+                            <img src="/assets/img/icon-redo.svg">
+                        </button>
+                    </li>
+                </ul>
+            </li>
+            
+            <li class="nav-item">
+                <div class="btn-group viewBtns" role="group">
+                    <button (click)="convertAndOpenInDesingerView(viewedPackage.id)"
+                     type="button" class="btn btn-secondary topologySource">Designer</button>
+                    <button type="button" class="btn btn-secondary topologyView active">Scripting</button>
+                </div>
+            </li>
+        </ul>
+
     </div>
-</div>
+</nav>
+
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
         [mode]="'push'" #sidebarLeft>
         <div class="row">
-
-            <h1 class="col-12">Actions</h1>
-           
-            
+            <div class="col">
+                <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
+            </div>
         </div>
+
         <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
                 href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
         </div>
     </ng-sidebar>
+
 <div ng-sidebar-content id="board-paper">
     <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
         [theme]="'tomorrow_night_bright'" #editor style="height:500px">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
index 487c19ad1..a092e0c0f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
@@ -21,6 +21,7 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject();
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
     public customActionName = '';
+    cl = 'editBar';
 
     constructor(private store: DesignerStore,
                 private packageCreationUtils: PackageCreationUtils,
@@ -29,6 +30,15 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
                 private sourceViewService: SourceViewService) {
         this.controllerSideBar = true;
     }
+    private _toggleSidebar1() {
+        this.controllerSideBar = !this.controllerSideBar;
+        if (this.controllerSideBar === false) {
+          this.cl = 'editBar2';
+       }
+        if (this.controllerSideBar === true) {
+        this.cl = 'editBar';
+       }
+      }
 
     ngOnInit() {
         this.store.state$.subscribe(