Add Help menu and Update Wizard style

Issue-ID: CCSDK-2705
Issue-ID: CCSDK-2709

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I7526e5056c50f2e090d06ad6a6f0d7ca729d8340

6 files changed, 169 insertions, 164 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 f79657af8..772923283 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
@@ -2,7 +2,7 @@
 
 <div class="new-wrapper">
     <div class="container-fluid main-container">
-        <header class="page-title" style="padding: 18px 30px 10px;">
+        <header class="page-title" style="padding: 16px 30px 12px;">
             <div class="row">
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
@@ -13,53 +13,46 @@
                 </h2>
                 <div class="col profile-help">
                     <nav class="navbar navbar-expand-lg navbar-light">
-                          <ul class="navbar-nav ml-auto">
-                            <li class="nav-item help-btn">
-                              <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300"
-                              tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
-                            </li>
-                            <div class="nav-item dropdown">
-                                <input class="dropdown-toggle" type="text">
-                                <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
-                                <ul class="dropdown-content">
-                                  <li>
-                                    <a href="#">Username</a>
-                                  </li>
-                                  <li>
-                                    <a href="#">Settings</a>
-                                  </li>
-                                  <li>
-                                    <a href="#">Projects</a>
-                                  </li>
-                                  <li>
-                                    <a href="#">Log out</a>
-                                  </li>
-                                </ul>
-                              </div>
-                            <!-- <li class="nav-item dropdown">
-                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                Dropdown
-                              </a>
-                              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                <a class="dropdown-item" href="#">Action</a>
-                                <a class="dropdown-item" href="#">Another action</a>
-                                <div class="dropdown-divider"></div>
-                                <a class="dropdown-item" href="#">Something else here</a>
-                              </div>
+                      <ul class="navbar-nav ml-auto">
+                        <!-- <li class="nav-item help-btn">
+                          <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
+                            [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
+                        </li> -->
+                        <!--Help Menu-->
+                        <div class="nav-item dropdown helpMenu">
+                          <input class="dropdown-toggle" type="text">
+                          <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+                          <ul class="dropdown-content">
+                            <!-- <li>
+                              <i class="icon-get_started" aria-hidden="true"></i>
+                              <p>
+                                <input id="clicker3" [checked]="startTour" type="checkbox" />
+                                <label for="clicker">
+                                  Getting Started
+                                  <span>Quick steps to help you get started</span>
+                                </label>
+                              </p>
                             </li> -->
+                            <li>
+                              <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                                <i class="icon-user_guide" aria-hidden="true"></i>
+                                <p>
+                                  Tutorials
+                                  <span>CDS Designer's User Guide</span>
+                                </p>
+                              </a>
+                            </li>
                           </ul>
-                      </nav>
-                    <!-- <ul class="menu-dropdown userProfile">
-                        <li><button type="button" class="btn package-info-btn" data-toggle="modal"
-                          data-target="#exampleModalLong">
-                          <i class="icon-info" aria-hidden="true"></i>
-                      </button></li>
-                      <li>
-                        <div class="dropdown">
+                        </div>
+                        <!--User Menu-->
+                        <div class="nav-item dropdown userMenu">
                           <input class="dropdown-toggle" type="text">
-                          <div class="dropdown-text">User name</div>
+                          <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
                           <ul class="dropdown-content">
                             <li>
+                              <a href="#">Username</a>
+                            </li>
+                            <li>
                               <a href="#">Settings</a>
                             </li>
                             <li>
@@ -70,9 +63,10 @@
                             </li>
                           </ul>
                         </div>
-                      </li>
-                    </ul> -->
-                </div>
+
+                      </ul>
+                    </nav>
+                  </div>
             </div>
         </header>
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index d42be1ff3..a09951cd2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -2,7 +2,7 @@
 <tour-step-template></tour-step-template>
 <div class="new-wrapper">
   <div class="container-fluid main-container">
-    <header class="page-title">
+    <header class="page-title" style="padding: 16px 30px 12px;">
       <div class="row">
         <h2 class="col m-0 pb-0">
           <ul class="breadcrumb-header">
@@ -14,11 +14,34 @@
         <div class="col profile-help">
           <nav class="navbar navbar-expand-lg navbar-light">
             <ul class="navbar-nav ml-auto">
-              <li class="nav-item help-btn">
-                <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"
-                  [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
-              </li>
-              <div class="nav-item dropdown">
+              <!--Help Menu-->
+              <div class="nav-item dropdown helpMenu">
+                <input class="dropdown-toggle" type="text">
+                <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+                <ul class="dropdown-content">
+                  <!-- <li>
+                    <i class="icon-get_started" aria-hidden="true"></i>
+                    <p>
+                      <input id="clicker3" [checked]="startTour" type="checkbox" />
+                      <label for="clicker">
+                        Getting Started
+                        <span>Quick steps to help you get started</span>
+                      </label>
+                    </p>
+                  </li> -->
+                  <li>
+                    <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                      <i class="icon-user_guide" aria-hidden="true"></i>
+                      <p>
+                        Tutorials
+                        <span>CDS Designer's User Guide</span>
+                      </p>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <!--User Menu-->
+              <div class="nav-item dropdown userMenu">
                 <input class="dropdown-toggle" type="text">
                 <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
                 <ul class="dropdown-content">
@@ -36,42 +59,8 @@
                   </li>
                 </ul>
               </div>
-              <!-- <li class="nav-item dropdown">
-                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                Dropdown
-                              </a>
-                              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                <a class="dropdown-item" href="#">Action</a>
-                                <a class="dropdown-item" href="#">Another action</a>
-                                <div class="dropdown-divider"></div>
-                                <a class="dropdown-item" href="#">Something else here</a>
-                              </div>
-                            </li> -->
             </ul>
           </nav>
-          <!-- <ul class="menu-dropdown userProfile">
-                        <li><button type="button" class="btn package-info-btn" data-toggle="modal"
-                          data-target="#exampleModalLong">
-                          <i class="icon-info" aria-hidden="true"></i>
-                      </button></li>
-                      <li>
-                        <div class="dropdown">
-                          <input class="dropdown-toggle" type="text">
-                          <div class="dropdown-text">User name</div>
-                          <ul class="dropdown-content">
-                            <li>
-                              <a href="#">Settings</a>
-                            </li>
-                            <li>
-                              <a href="#">Projects</a>
-                            </li>
-                            <li>
-                              <a href="#">Log out</a>
-                            </li>
-                          </ul>
-                        </div>
-                      </li>
-                    </ul> -->
         </div>
       </div>
     </header>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 5712f80a0..1390a7b78 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -13,7 +13,7 @@
                     </a>
                     <br />
                     <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
-                            tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
+                            class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
                 </div>
@@ -120,4 +120,4 @@
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 8391530d6..f81b02643 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -9,25 +9,31 @@
             <input id="clicker" [checked]="startTour" type="checkbox" />
             <label class="ml-1" for="clicker">Start the tour</label>
 
-            <div class="panel-wrap">
+            <div class="panel-wrap packageWizard">
                 <div class="panel">
                     <button id="clicker1" class="close" type="button" (click)="stopTour()">
-                        <label for="clicker">&times;</label>
+                        <label for="clicker"><img src="assets/img/icon-close.svg" /></label>
+                    </button>
+                    <br />
+                    <h3>Welcome to CDS Designer UI</h3>
+                    <p>CDS has new look and new way of delivering a reusable and simplified self-service experience.</p>
+                    <!-- <span>Tab through these quick steps to help you get started.</span>
+                    <br /> -->
+                    <button id="clicker2" class="closeWizard mr-2" type="button" (click)="stopTour()">
+                        <label for="clicker">No Thanks</label>
+                    </button>
+                    <button type="button" class="startTour float">
+                        <label (click)="start()" for="clicker" class="m-0">Start Tour</label>
                     </button>
-
-                    <h3>Welcome to CDS</h3>
-                    <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
-                    <button type="button" class="btn" style="background-color: #fff;margin:0">
-                        <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
                 </div>
             </div>
             <!---->
-            <nav class="row">
+            <nav class="row" tourAnchor="allTab">
                 <!--Nav Tabs-->
                 <div class="col pr-0">
                     <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                        <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
-                            href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+                            role="tab" aria-controls="nav-home" aria-selected="true">All</a>
                         <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                             role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
                         <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
@@ -53,4 +59,4 @@
             <app-sort-packages></app-sort-packages>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index c0a48d346..9e299a829 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -40,7 +40,34 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
         console.log('PackagesDashboardComponent');
 
-        this.tourService.initialize([...steps]);
+        this.tourService.initialize([
+            {
+                anchorId: 'allTab',
+                content: 'Package list is where you get access to your all and most recent CBA packages.',
+                title: 'Managing your CBA packages',
+            },
+            {
+                anchorId: 'search',
+                content: 'Search for Package by name, version, tags and type',
+                title: 'Search',
+            },
+            {
+                anchorId: 'tagFilter',
+                content: 'Filter Packages by tags',
+                title: 'Tag Filter',
+            },
+            {
+                anchorId: 'create',
+                content: 'Start creating a full CBA packages from built-in forms without programming.',
+                title: 'Create new package',
+            },
+            {
+                anchorId: 'metadataTab',
+                content: 'Set your package basic information',
+                title: 'Metadata Tab',
+                route: 'packages/createPackage'
+            },
+        ]);
         this.checkTour();
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
index 5e04b71ac..936c2da8d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
@@ -1,70 +1,59 @@
 <!--Page Title-->
 <header class="page-title" style="padding-top: 14px;padding-bottom: 13px;">
-    <div class="row">
-        <h2 class="col m-0" style="line-height: 33px;">CBA Packages
-            <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
-        </h2>
-        <div class="col profile-help">
-            <nav class="navbar navbar-expand-lg navbar-light">
-                  <ul class="navbar-nav ml-auto">
-                    <li class="nav-item help-btn">
-                      <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300"
-                      tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
-                    </li>
-                    <div class="nav-item dropdown">
-                        <input class="dropdown-toggle" type="text">
-                        <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
-                        <ul class="dropdown-content">
-                          <li>
-                            <a href="#">Username</a>
-                          </li>
-                          <li>
-                            <a href="#">Settings</a>
-                          </li>
-                          <li>
-                            <a href="#">Projects</a>
-                          </li>
-                          <li>
-                            <a href="#">Log out</a>
-                          </li>
-                        </ul>
-                      </div>
-                    <!-- <li class="nav-item dropdown">
-                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        Dropdown
-                      </a>
-                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                        <a class="dropdown-item" href="#">Action</a>
-                        <a class="dropdown-item" href="#">Another action</a>
-                        <div class="dropdown-divider"></div>
-                        <a class="dropdown-item" href="#">Something else here</a>
-                      </div>
-                    </li> -->
-                  </ul>
-              </nav>
-            <!-- <ul class="menu-dropdown userProfile">
-                <li><button type="button" class="btn package-info-btn" data-toggle="modal"
-                  data-target="#exampleModalLong">
-                  <i class="icon-info" aria-hidden="true"></i>
-              </button></li>
+  <div class="row">
+    <h2 class="col m-0" style="line-height: 33px;">CBA Packages
+      <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
+    </h2>
+    <div class="col profile-help">
+      <nav class="navbar navbar-expand-lg navbar-light">
+        <ul class="navbar-nav ml-auto">
+          <!--Help Menu-->
+          <div class="nav-item dropdown helpMenu">
+            <input class="dropdown-toggle" type="text">
+            <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+            <ul class="dropdown-content">
+              <!-- <li>
+                <i class="icon-get_started" aria-hidden="true"></i>
+                <p>
+                  <input id="clicker3" [checked]="startTour" type="checkbox" />
+                  <label for="clicker">
+                    Getting Started
+                    <span>Quick steps to help you get started</span>
+                  </label>
+                </p>
+              </li> -->
               <li>
-                <div class="dropdown">
-                  <input class="dropdown-toggle" type="text">
-                  <div class="dropdown-text">User name</div>
-                  <ul class="dropdown-content">
-                    <li>
-                      <a href="#">Settings</a>
-                    </li>
-                    <li>
-                      <a href="#">Projects</a>
-                    </li>
-                    <li>
-                      <a href="#">Log out</a>
-                    </li>
-                  </ul>
-                </div>
+                <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                  <i class="icon-user_guide" aria-hidden="true"></i>
+                  <p>
+                    Tutorials
+                    <span>CDS Designer's User Guide</span>
+                  </p>
+                </a>
               </li>
-            </ul> -->
-        </div>
+            </ul>
+          </div>
+          <!--User Menu-->
+          <div class="nav-item dropdown userMenu">
+            <input class="dropdown-toggle" type="text">
+            <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
+            <ul class="dropdown-content">
+              <li>
+                <a href="#">Username</a>
+              </li>
+              <li>
+                <a href="#">Settings</a>
+              </li>
+              <li>
+                <a href="#">Projects</a>
+              </li>
+              <li>
+                <a href="#">Log out</a>
+              </li>
+            </ul>
+          </div>
+        </ul>
+      </nav>
     </div>
+  </div>
 </header>