1 files changed, 67 insertions, 4 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 4e33a9df1..bdd5f6fde 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
@@ -18,20 +18,83 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-import {Component, OnInit} from '@angular/core';
-import {PackagesStore} from '../packages.store';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { PackagesStore } from '../packages.store';
+import { TourService } from 'ngx-tour-md-menu';
+
 
 @Component({
     selector: 'app-packages-dashboard',
     templateUrl: './packages-dashboard.component.html',
     styleUrls: ['./packages-dashboard.component.css']
 })
-export class PackagesDashboardComponent implements OnInit {
+export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
-    constructor() { }
+    startTour = false;
+    constructor(
+        private tourService: TourService,
+    ) { }
 
     ngOnInit() {
 
         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.checkTour();
+    }
+
+    checkTour() {
+        if (localStorage.getItem('tour-guide') && localStorage.getItem('tour-guide') === 'false') {
+            this.startTour = false;
+        } else {
+            this.startTour = true;
+        }
+    }
+    start() {
+        console.log('start .................');
+        this.tourService.start();
+        this.tourService.events$.subscribe(res => {
+            console.log(res);
+        });
+    }
+
+    stopTour() {
+        localStorage.setItem('tour-guide', 'false');
+    }
+
+    ngOnDestroy(): void {
+        this.tourService.pause();
     }
 }