First version of tour-guide steps

Issue-ID: CCSDK-2705

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

1 files changed, 16 insertions, 34 deletions

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');
+            }
         });
     }