First version of tour-guide steps

Issue-ID: CCSDK-2705

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I4667c10eac2b4eac3266b93c76d0a25b0178aa79

10 files changed, 314 insertions, 181 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
index c86dd26cf..52445ede2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -1,3 +1,4 @@
+<tour-step-template></tour-step-template>
 <div class="card creat-card">
     <div class="single-line-model">
         <label class="label-name">Mode</label>
@@ -32,8 +33,8 @@
     <div class="single-line-model">
         <label class="label-name">Name <span>*</span></label>
         <div class="label-input">
-            <input type="input" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.name"
-                placeholder="Package name">
+            <input tourAnchor="mt-packageName" type="input" (change)="checkRequiredElements()"
+                [(ngModel)]="metaDataTab.name" placeholder="Package name">
         </div>
         <!--<div class="model-note-container error-message">
             Package name already exists with this version. Please enter a different name or enter different version
@@ -44,22 +45,25 @@
     <div class="single-line-model">
         <label class="label-name">Version <span>*</span></label>
         <div class="label-input">
-            <input type="input" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.version"
-                (input)="validatePackageNameAndVersion()" pattern="(\d+)\.(\d+)\.(\d+)" placeholder="Example: 1.0.0">
+            <input tourAnchor="mt-packageVersion" type="input" (change)="checkRequiredElements()"
+                [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()"
+                pattern="(\d+)\.(\d+)\.(\d+)" placeholder="Example: 1.0.0">
         </div>
         <div class="model-note-container error-message">{{errorMessage}}</div>
     </div>
     <div class="single-line-model">
         <label class="label-name">Description <span>*</span></label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.description" (change)="checkRequiredElements()" placeholder="Descripe the package">
+            <input tourAnchor="mt-packageDescription" type="input" [(ngModel)]="metaDataTab.description"
+                (change)="checkRequiredElements()" placeholder="Descripe the package">
         </div>
     </div>
 
     <div class="single-line-model">
         <label class="label-name">Tags</label>
         <div class="label-input">
-            <input type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)" placeholder="Ex., vDNS-CDS">
+            <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)"
+                placeholder="Ex., vDNS-CDS">
         </div>
         <div class="model-note-container tag-notes">Use ENTER/SPACE to add tag</div>
         <div class="model-note-container tages-container">
@@ -72,14 +76,14 @@
 <div id="container">
     <div id="target">
         <div class="card creat-card">
-            <div class="single-line customKeyTitle">
+            <div  class="single-line customKeyTitle">
                 <h5 class="label-name w-100 ">
                     Custom key
                 </h5>
                 <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span>
 
             </div>
-            <div *ngFor="let map of  this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key">
+            <div tourAnchor="mt-packageKeys" *ngFor="let map of  this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key">
                 <div class="single-line-custom-key">
                     <label class="label-name"><span>{{i + 1}}.</span> Name</label>
                     <div class="label-input">
@@ -102,7 +106,7 @@
                 <div class="single-line-custom-key">
                     <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label>
                     <div class="label-input">
-                        <input (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey"
+                        <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey"
                             placeholder="Enter name">
                     </div>
                 </div>
@@ -119,4 +123,4 @@
 
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
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 454e11215..d42be1ff3 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
@@ -1,42 +1,42 @@
 <app-header></app-header>
-
+<tour-step-template></tour-step-template>
 <div class="new-wrapper">
-    <div class="container-fluid main-container">
-        <header class="page-title">
-            <div class="row">
-                <h2 class="col m-0 pb-0">
-                    <ul class="breadcrumb-header">
-                        <li><a routerLink="/packages">CBA Packages</a></li>
-                        <i class="fa fa-angle-right ml-2 mr-2"></i>
-                        <li>Package Name</li>
-                    </ul>
-                </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">
+  <div class="container-fluid main-container">
+    <header class="page-title">
+      <div class="row">
+        <h2 class="col m-0 pb-0">
+          <ul class="breadcrumb-header">
+            <li><a routerLink="/packages">CBA Packages</a></li>
+            <i class="fa fa-angle-right ml-2 mr-2"></i>
+            <li>Package Name</li>
+          </ul>
+        </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>
@@ -47,9 +47,9 @@
                                 <a class="dropdown-item" href="#">Something else here</a>
                               </div>
                             </li> -->
-                          </ul>
-                      </nav>
-                    <!-- <ul class="menu-dropdown userProfile">
+            </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>
@@ -72,75 +72,77 @@
                         </div>
                       </li>
                     </ul> -->
-                </div>
-            </div>
-        </header>
+        </div>
+      </div>
+    </header>
 
-        <div class="container-fluid body-container">
-            <div class="container">
-                <div class="creat-action-container">
-                    <!--  <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()">
+    <div class="container-fluid body-container">
+      <div class="container">
+        <div class="creat-action-container">
+          <!--  <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()">
                           <i class="icon-save-sm" aria-hidden="true"></i>
                           <span>Save</span>-->
-                    <button (click)="saveBluePrint()" [disabled]="!isSaveEnabled"
-                            class="action-button save" aria-hidden="true"><i class="icon-save-sm"
-                                                                                          aria-hidden="true"></i>
-                        <span>Save</span></button>
-                </div>
+          <button tourAnchor="packageSave" (click)="saveBluePrint()" [disabled]="!isSaveEnabled"
+            class="action-button save" aria-hidden="true"><i class="icon-save-sm" aria-hidden="true"></i>
+            <span>Save</span></button>
+        </div>
 
 
-                <nav class="row">
-                    <!--Nav Tabs-->
-                    <div class="col">
-                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
-                               href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
-                               autofocus #nameit (focusout)="saveMetaData()" [classList]="metadataClasses">METADATA</a>
-                            <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                               role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
-                            <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                               role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
-                            <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
+        <nav class="row">
+          <!--Nav Tabs-->
+          <div class="col">
+            <div class="nav nav-tabs " id="nav-tab" role="tablist">
+              <a (click)="openTourGuide('metadataTab')" tourAnchor="metadataTab" class="nav-item nav-link active"
+                id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata"
+                aria-selected="false" autofocus #nameit (focusout)="saveMetaData()"
+                [classList]="metadataClasses">METADATA</a>
+              <a (click)="openTourGuide('tm-templateTab')" tourAnchor="tm-templateTab" class="nav-item nav-link"
+                id="nav-template-tab" data-toggle="tab" href="#nav-template" role="tab" aria-controls="nav-template"
+                aria-selected="false">TEMPLATE &
+                MAPPING</a>
+              <a (click)="openTourGuide('st-scriptsTab')" tourAnchor="st-scriptsTab" class="nav-item nav-link"
+                id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" role="tab" aria-controls="nav-scripts"
+                aria-selected="false">SCRIPTS</a>
+              <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
                                role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> -->
-                            <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                               href="#nav-authentication" role="tab" aria-controls="nav-authentication"
-                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
-                        </div>
-                    </div>
+              <a (click)="openTourGuide('dslTab')" tourAnchor="dslTab" class="nav-item nav-link"
+                id="nav-authentication-tab" data-toggle="tab" href="#nav-authentication" role="tab"
+                aria-controls="nav-authentication" aria-selected="false">EXTERNAL
+                SYSTEM AUTHENTICATION
+                PROPERTIES</a>
+            </div>
+          </div>
 
-                </nav>
-                <div class="row mt-4">
-                    <div class="col">
-                        <div class="tab-content" id="nav-tabContent">
-                            <div  class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                 aria-labelledby="nav-metadata-tab">
-                                <app-metadata-tab></app-metadata-tab>
-                            </div>
-                            <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab">
-                                <app-template-mapping></app-template-mapping>
-                            </div>
-                            <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                 aria-labelledby="nav-scripts-tab">
-                                <app-scripts-tab></app-scripts-tab>
-                            </div>
-                            <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                 aria-labelledby="nav-imports-tab">
-                                <app-imports-tab></app-imports-tab>
+        </nav>
+        <div class="row mt-4">
+          <div class="col">
+            <div class="tab-content" id="nav-tabContent">
+              <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                aria-labelledby="nav-metadata-tab">
+                <app-metadata-tab></app-metadata-tab>
+              </div>
+              <div class="tab-pane fade" id="nav-template" role="tabpanel" aria-labelledby="nav-template-tab">
+                <app-template-mapping></app-template-mapping>
+              </div>
+              <div class="tab-pane fade" id="nav-scripts" role="tabpanel" aria-labelledby="nav-scripts-tab">
+                <app-scripts-tab></app-scripts-tab>
+              </div>
+              <div class="tab-pane fade" id="nav-imports" role="tabpanel" aria-labelledby="nav-imports-tab">
+                <app-imports-tab></app-imports-tab>
 
-                            </div>
-                            <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                 aria-labelledby="nav-authentication-tab">
-                                <div class="card creat-card">
-                                    <div class="editor-container">
-                                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+              <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
+                aria-labelledby="nav-authentication-tab">
+                <div class="card creat-card">
+                  <div class="editor-container">
+                    <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                  </div>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
index e91313b2e..4145e0f8e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -19,18 +19,19 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
 
 import * as JSZip from 'jszip';
-import {PackageCreationStore} from './package-creation.store';
-import {Definition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationModes} from './creationModes/PackageCreationModes';
-import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder';
-import {PackageCreationUtils} from './package-creation.utils';
-import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
-import {Router} from '@angular/router';
-import {ToastrService} from 'ngx-toastr';
+import { PackageCreationStore } from './package-creation.store';
+import { Definition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationModes } from './creationModes/PackageCreationModes';
+import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder';
+import { PackageCreationUtils } from './package-creation.utils';
+import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { TourService } from 'ngx-tour-md-menu';
 
 
 @Component({
@@ -47,13 +48,14 @@ export class PackageCreationComponent implements OnInit {
         private packageCreationStore: PackageCreationStore,
         private packageCreationUtils: PackageCreationUtils,
         private router: Router,
+        private tourService: TourService,
         private toastService: ToastrService) {
     }
 
     counter = 0;
     modes: object[] = [
-        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
-        {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+        { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' },
+        { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }];
     metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     folder: FolderNodeElement = new FolderNodeElement();
     zipFile: JSZip = new JSZip();
@@ -61,10 +63,10 @@ export class PackageCreationComponent implements OnInit {
     definition: Definition = new Definition();
     isSaveEnabled = false;
 
-    @ViewChild(MetadataTabComponent, {static: false})
+    @ViewChild(MetadataTabComponent, { static: false })
     metadataTabComponent: MetadataTabComponent;
 
-    @ViewChild('nameit', {static: true})
+    @ViewChild('nameit', { static: true })
     elementRef: ElementRef;
     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
     metadataClasses = 'nav-item nav-link active complete';
@@ -89,6 +91,10 @@ export class PackageCreationComponent implements OnInit {
         });
     }
 
+    openTourGuide(step: string) {
+        // this.tourService.goto(step);
+    }
+
     saveBluePrint() {
         this.packageCreationStore.state$.subscribe(
             cbaPackage => {
@@ -109,7 +115,7 @@ export class PackageCreationComponent implements OnInit {
 
     saveBluePrintToDataBase() {
         this.create();
-        this.zipFile.generateAsync({type: 'blob'})
+        this.zipFile.generateAsync({ type: 'blob' })
             .then(blob => {
                 this.packageCreationStore.saveBluePrint(blob).subscribe(
                     bluePrintDetailModels => {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index bd501c163..ea74b4435 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -4,8 +4,8 @@
             <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input">
             <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
         </div>
-        <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
-                (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
+        <span tourAnchor="st-scriptsImport" class="import-container-span">Or you can also <a data-target="#scriptsModal"
+                data-toggle="modal" (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
 
     </div>
 
@@ -60,8 +60,8 @@
                     data-parent="#accordion-script">
                     <div class="card-body">
                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
-                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
-                            #editor style="height:300px;">
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" #editor
+                            style="height:300px;">
                         </ace-editor>
                     </div>
                 </div>
@@ -106,7 +106,8 @@
                             <tr *ngFor="let item of uploadedFiles; let i=index">
                                 <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
                                 <th>{{ item.name }}</th>
-                                <th (click)="removeInitFile(i)" width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th>
+                                <th (click)="removeInitFile(i)" width="40" class="text-right"><img
+                                        src="assets/img/icon-remove-file.svg" /></th>
                             </tr>
                         </thead>
                     </table>
@@ -116,10 +117,11 @@
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     type="button">Cancel
                 </button>
-                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" data-dismiss="modal" type="button">
+                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
+                    data-dismiss="modal" type="button">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 65845a6cc..4b0ef8b49 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -9,7 +9,8 @@
             class="btn btn-outline-danger" title="Delete Template">Delete</button>
         <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
             class="btn btn-outline-secondary">Clear</button>
-        <button (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close" class="btn btn-primary">Finish</button>
+        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close"
+            class="btn btn-primary">Finish</button>
     </div>
 </div>
 <div class="card creat-card">
@@ -19,8 +20,8 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [disabled]="edit" [(ngModel)]="fileName" placeholder="Template name" name="templateName"
-                autofocus [autofocus]="true">
+            <input tourAnchor="tm-templateName" type="input" [disabled]="edit" [(ngModel)]="fileName"
+                placeholder="Template name" name="templateName" autofocus [autofocus]="true">
         </div>
     </div>
 </div>
@@ -40,7 +41,7 @@
 
             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                 <div class="card-body">
-                    <div class="single-line">
+                    <div tourAnchor="tm-templateType" class="single-line">
                         <label class="label-name">Template Type</label>
                         <div class="label-input">
                             <label name="trst" (click)="allowedExt=['.vtl']">
@@ -58,7 +59,7 @@
                                     Jinja
                                 </span>
                             </label>
-                            <label name="trst" (click)="allowedExt=['.kt']">
+                            <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt']">
                                 <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
                                     name="exampleRadios" id="exampleRadios1" value=Kotlin>
 
@@ -76,7 +77,8 @@
                             current attributes.</span></div>
                     <div class="editor-container mb-4">
                         <app-source-editor [lang]="'velocity'" (textChange)="textChanges($event,templateInfo.fileName)"
-                            [(text)]="templateFileContent"></app-source-editor>
+                            [(text)]="templateFileContent">
+                        </app-source-editor>
                     </div>
                 </div>
             </div>
@@ -84,8 +86,8 @@
         <div class="card">
             <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
-                        aria-expanded="false" aria-controls="collapseTwo">
+                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse"
+                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         2. Manage Mapping <span
                             class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span>
                     </button>
@@ -102,8 +104,8 @@
                             <br />
                             <span>Use Current Template Instance</span>
                         </button>
-                        <a href="#" (click)="allowedExt=['.csv','.xml']" data-toggle="modal" data-target="#templateModal"
-                            class="mapping-source-load">
+                        <a href="#" (click)="allowedExt=['.csv','.xml']" data-toggle="modal"
+                            data-target="#templateModal" class="mapping-source-load">
                             <i class="icon-upload-attributes"></i>
                             <br />
                             <div>Upload Attributes List</div>
@@ -300,4 +302,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index 61ea374a3..3e7cfea7b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -11,6 +11,7 @@ import { JsonConvert, Any } from 'json2typescript';
 import { ToastrService } from 'ngx-toastr';
 import { SharedService } from '../shared-service';
 import { XmlParser } from '../utils/XmlParser';
+import { TourService } from 'ngx-tour-md-menu';
 declare var $: any;
 
 @Component({
@@ -55,7 +56,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         private templateStore: TemplateStore,
         private packageCreationUtils: PackageCreationUtils,
         private toastr: ToastrService,
-        private sharedService: SharedService
+        private sharedService: SharedService,
+        private tourService: TourService,
     ) {
     }
 
@@ -348,6 +350,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 this.fileName = '';
                 this.toastr.success('File is created', 'success');
                 this.openListView();
+                console.log(this.tourService.getStatus());
+                this.tourService.goto('tm-templateEdit');
             } else {
                 console.log('this file already exist');
                 this.toastr.error('File name already exist', 'Error');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index bc87ae2c0..1af379582 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -3,7 +3,7 @@
 </a>
 
 
-<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0">
+<div class="template-mapping-accordion" tourAnchor="tm-templateEdit"  [hidden]="templateAndMappingMap?.size <= 0">
     <div class="" id="listAccordion">
         <div class="card">
             <div class="card-header" id="headingThree">
@@ -62,4 +62,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
index 26740f3e1..70e35939b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
@@ -5,6 +5,7 @@ import { TemplateInfo, TemplateStore } from '../../template.store';
 import { TemplateAndMapping } from '../TemplateAndMapping';
 import { ActivatedRoute } from '@angular/router';
 import { SharedService } from '../shared-service';
+import { TourService } from 'ngx-tour-md-menu';
 
 
 @Component({
@@ -27,7 +28,9 @@ export class TemplMappListingComponent implements OnInit {
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
         private route: ActivatedRoute,
-        private sharedService: SharedService
+        private sharedService: SharedService,
+        private tourService: TourService,
+
     ) {
     }
 
@@ -99,6 +102,7 @@ export class TemplMappListingComponent implements OnInit {
     createNewTemplate() {
         this.openCreationView();
         this.sharedService.disableEdit();
+        this.tourService.goto('tm-templateName');
     }
     openCreationView() {
         this.showCreationView.emit('tell parent to open create views');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts
new file mode 100644
index 000000000..87e6c1990
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts
@@ -0,0 +1,127 @@
+
+
+export const steps = [
+    // {
+    //     anchorId: 'allTab',
+    //     content: 'This Tab contain all packages you created before',
+    //     title: 'All Package',
+    // },
+    // {
+    //     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: 'import',
+    //     content: 'Import a package to CDS',
+    //     title: 'Import',
+    // },
+    {
+        anchorId: 'create',
+        content: 'Create a new Package',
+        title: 'Create',
+    },
+    {
+        anchorId: 'metadataTab',
+        content: 'Set your package basic information',
+        title: 'Metadata Tab',
+        route: 'packages/createPackage',
+        stepId: 'metadataTab'
+    },
+    {
+        anchorId: 'mt-packageName',
+        content: 'Set your package name (required)',
+        title: 'Package name',
+    },
+    {
+        anchorId: 'mt-packageVersion',
+        content: 'Set your package version like 1.0.0 (required)',
+        title: 'Package version',
+    },
+    {
+        anchorId: 'mt-packageDescription',
+        content: 'Set your package description (required)',
+        title: 'Package description',
+    },
+    {
+        anchorId: 'mt-packageTags',
+        content: 'Set your package Tags (Optional)',
+        title: 'Package tag',
+    },
+    // -------
+    {
+        anchorId: 'mt-packageKeys',
+        content: 'Set your package custom keys (Optional)',
+        title: 'Package keys',
+    },
+    // Temaplate & Mapping
+    {
+        anchorId: 'tm-templateTab',
+        content: 'Create Your  \'Template & Mapping \' files',
+        title: 'Temaplate & Mapping',
+        stepId: 'tm-templateTab'
+    },
+    {
+        anchorId: 'tm-templateName',
+        content: 'Set your Template & Mapping Name',
+        title: 'Temaplte & Mapping name',
+        stepId: 'tm-templateName'
+    },
+    {
+        anchorId: 'tm-templateType',
+        content: 'Set your Template Type',
+        title: 'Temaplte Type',
+    },
+    {
+        anchorId: 'tm-templateContent',
+        content: 'Click \'Import File\' to get content from a file, or write template content manually',
+        title: 'Template Content',
+    },
+    {
+        anchorId: 'tm-mappingContent',
+        content: 'Set your mapping content from the current template, or from an external file (XML, CSV)',
+        title: 'Mapping Content',
+    },
+    {
+        anchorId: 'tm-templateFinish',
+        content: 'Click your \' Finish \' button when you finish ',
+        title: 'Finish',
+        stepId: 'tm-templateFinish'
+    },
+    {
+        anchorId: 'tm-templateEdit',
+        content: 'Create another new Template or Click on the previous one to edit',
+        title: 'Create & Edit',
+        stepId: 'tm-templateEdit'
+    },
+    // Script
+    {
+        anchorId: 'st-scriptsTab',
+        content: 'Move To Scripts Tab to set your Kotlin and Python scripts',
+        title: 'Scripts',
+        stepId: 'st-scriptsTab'
+    },
+    {
+        anchorId: 'st-scriptsImport',
+        content: 'Click \' Import File\'button kotlin and python files',
+        title: 'Import File'
+    },
+    // DSL
+    {
+        anchorId: 'dslTab',
+        content: 'Write your Authentication Properties in Javascript',
+        title: 'ESAP',
+        stepId: 'dslTab'
+    },
+    // save package
+    {
+        anchorId: 'packageSave',
+        content: 'Click \' Save \' button to create your package',
+        title: 'Save'
+    }
+];
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 bdd5f6fde..c0a48d346 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
@@ -21,7 +21,8 @@ limitations under the License.
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { PackagesStore } from '../packages.store';
 import { TourService } from 'ngx-tour-md-menu';
-
+import { steps } from './guideSteps';
+declare var $: any;
 
 @Component({
     selector: 'app-packages-dashboard',
@@ -39,39 +40,7 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
         console.log('PackagesDashboardComponent');
 
-        this.tourService.initialize([
-            {
-                anchorId: 'allTab',
-                content: 'This Tab contain all packages you created before',
-                title: 'All Package',
-            },
-            {
-                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: 'import',
-                content: 'Import a package to CDS',
-                title: 'Import',
-            },
-            {
-                anchorId: 'create',
-                content: 'Create a new Package',
-                title: 'Create',
-            },
-            {
-                anchorId: 'metadataTab',
-                content: 'Set your package basic information',
-                title: 'Metadata Tab',
-                route: 'packages/createPackage'
-            },
-        ]);
+        this.tourService.initialize([...steps]);
         this.checkTour();
     }
 
@@ -82,11 +51,24 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
             this.startTour = true;
         }
     }
+
     start() {
         console.log('start .................');
         this.tourService.start();
         this.tourService.events$.subscribe(res => {
             console.log(res);
+            if (res.value && res.value.anchorId && res.value.anchorId.includes('tm-')) {
+                $('#nav-template-tab').trigger('click');
+            }
+            if (res.value && res.value.anchorId && res.value.anchorId === 'tm-mappingContent') {
+                $('#mappingTab').trigger('click');
+            }
+            if (res.value && res.value.anchorId && res.value.anchorId === 'dslTab') {
+                $('#nav-authentication-tab').trigger('click');
+            }
+            if (res.value && res.value.anchorId && res.value.anchorId.includes('st-')) {
+                $('#nav-scripts-tab').trigger('click');
+            }
         });
     }