adding tour-guide to package dashboard
Stop popup autoclose
Issue-ID: CCSDK-2705
Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: Id6349d2d3b72fb3b316bc405498fabc71a6f7bbd
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index 7cf4be0..6ee9371 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -8496,6 +8496,23 @@
"tslib": "^1.9.0"
}
},
+ "ngx-tour-core": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/ngx-tour-core/-/ngx-tour-core-4.1.1.tgz",
+ "integrity": "sha512-Nfs9FgVJ1A7DyazEp3yALvmoo1CxoP1RvmiURDFVW1/gJWtMhoD+lBTAUsdw1+rhv8n/e8iKXpRYB60m772Bog==",
+ "requires": {
+ "tslib": "^1.9.0"
+ }
+ },
+ "ngx-tour-md-menu": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/ngx-tour-md-menu/-/ngx-tour-md-menu-4.1.1.tgz",
+ "integrity": "sha512-6W76D9HOT3HGr4gewzNj0aEZ2qeKRPexTX3lULGyIZ+tjdg4We5mE0qg5PxAgNTvjvTol65tt7P6BgzTKsNaOQ==",
+ "requires": {
+ "tslib": "^1.9.0",
+ "withinviewport": "^2.0.0"
+ }
+ },
"ngx-ui-loader": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/ngx-ui-loader/-/ngx-ui-loader-8.0.0.tgz",
@@ -13649,6 +13666,11 @@
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
"dev": true
},
+ "withinviewport": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/withinviewport/-/withinviewport-2.1.2.tgz",
+ "integrity": "sha512-bOZt20QiBkAroXwCAVnb+ajYNPAzVrTKCKuVAuWtLbXlOk3e5cAS5diZMWhYP4Cpyq3GS47jk+fsb5tQqhIxtg=="
+ },
"wordwrap": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 1902d36..517b2da 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -45,6 +45,8 @@
"ngx-file-drop": "^8.0.8",
"ngx-toastr": "^11.3.3",
"ngx-ui-loader": "^8.0.0",
+ "ngx-tour-core": "^4.1.1",
+ "ngx-tour-md-menu": "^4.1.1",
"rxjs": "~6.4.0",
"stream": "0.0.2",
"tslib": "^1.10.0",
diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json
index 1f63613..4e8ef0a 100644
--- a/cds-ui/designer-client/proxy.conf.json
+++ b/cds-ui/designer-client/proxy.conf.json
@@ -1,16 +1,14 @@
{
"/controllerblueprint/*": {
- "target": "localhost",
- // "target": "https://41.128.168.198:3000",
+ "target": "https://localhost:3000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
},
"/resourcedictionary/*": {
- "target": "localhost",
- // "target": "https://41.128.168.198:3000",
+ "target": "https://localhost:3000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
-}
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/app.component.css b/cds-ui/designer-client/src/app/app.component.css
index e69de29..9a0cd34 100644
--- a/cds-ui/designer-client/src/app/app.component.css
+++ b/cds-ui/designer-client/src/app/app.component.css
@@ -0,0 +1,9 @@
+.cdk-overlay-container {
+ position: none;
+ z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+ position: none;
+ z-index: 0;
+}
\ No newline at end of file
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 35ca1e2..5712f80 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
@@ -7,13 +7,13 @@
</div>
<div class="card-footer row">
<div class="col text-center">
- <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
+ <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
Package
</a>
<br />
- <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
- class="icon-import-blue" aria-hidden="true"></i>Import Package
+ <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
</a>
<ngx-ui-loader></ngx-ui-loader>
</div>
@@ -76,9 +76,8 @@
<div class="col">
<p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
</p>
- <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
- <p class="package-desc" [delay]="300"
- tooltip="{{bluePrint.artifactDescription}}"
+ <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
+ <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
placement="bottom left">{{bluePrint.artifactDescription}}</p>
<ul class="package-contributers">
<li>
@@ -105,7 +104,7 @@
</div>
<div class="card-footer">
<div class="row">
-
+
<div class="col">
<button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
@@ -121,4 +120,4 @@
</div>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 352f33b..3cecd33 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -1,9 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {BlueprintModel} from '../../model/BluePrint.model';
-import {PackagesStore} from '../../packages.store';
-import {Router} from '@angular/router';
-import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service';
-import {saveAs} from 'file-saver';
+import { Component, OnInit } from '@angular/core';
+import { BlueprintModel } from '../../model/BluePrint.model';
+import { PackagesStore } from '../../packages.store';
+import { Router } from '@angular/router';
+import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service';
+import { saveAs } from 'file-saver';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+import { TourService } from 'ngx-tour-md-menu';
@Component({
selector: 'app-packages-list',
@@ -15,9 +17,17 @@
viewedPackages: BlueprintModel[] = [];
- constructor(private packagesStore: PackagesStore, private router: Router
- , private configurationDashboardService: ConfigurationDashboardService) {
+ constructor(
+ private packagesStore: PackagesStore,
+ private router: Router,
+ private configurationDashboardService: ConfigurationDashboardService,
+ private ngxLoader: NgxUiLoaderService,
+ private tourService: TourService,
+ ) {
console.log('PackageListComponent');
+
+
+
this.packagesStore.state$.subscribe(state => {
console.log(state);
if (state.filteredPackages) {
@@ -26,8 +36,13 @@
});
}
+
ngOnInit() {
this.packagesStore.getAll();
+
+
+
+
}
view(id) {
@@ -40,7 +55,7 @@
downloadPackage(artifactName: string, artifactVersion: string) {
this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
- const blob = new Blob([response], {type: 'application/octet-stream'});
+ const blob = new Blob([response], { type: 'application/octet-stream' });
saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
});
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
index e69de29..74ace1a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
@@ -0,0 +1,17 @@
+.panel-wrap button label{
+ cursor: pointer;
+}
+
+.panel-wrap .panel{
+ border-radius: 8px;
+}
+
+.cdk-overlay-container {
+ position: none;
+ z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+ position: none;
+ z-index: 0;
+}
\ No newline at end of file
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 a632568..8391530 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
@@ -1,20 +1,24 @@
<app-header>
</app-header>
+<tour-step-template></tour-step-template>
<div class="new-wrapper">
<div class="container-fluid main-container">
<app-packages-header></app-packages-header>
<div class="container-fluid body-container">
<!--Tour Starter-->
- <input id="clicker" type="checkbox" />
- <label for="clicker">Start the tour</label>
+ <input id="clicker" [checked]="startTour" type="checkbox" />
+ <label class="ml-1" for="clicker">Start the tour</label>
<div class="panel-wrap">
<div class="panel">
- <button id="clicker1" type="button"><label for="clicker">Dismiss</label>
+ <button id="clicker1" class="close" type="button" (click)="stopTour()">
+ <label for="clicker">×</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;">Let's get started</button>
+ <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>
<!---->
@@ -22,12 +26,13 @@
<!--Nav Tabs-->
<div class="col pr-0">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
- <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 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" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
- role="tab" aria-controls="nav-contact" aria-selected="false">Under Construction</a>
+ <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
+ href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Under
+ Construction</a>
<a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
role="tab" aria-controls="nav-contact1" aria-selected="false">Archived</a>
</div>
@@ -38,7 +43,7 @@
<div class="col-7">
<app-packages-search></app-packages-search>
</div>
- <div class="col-5 pl-2">
+ <div class="col-5 pl-2" tourAnchor="tagFilter">
<app-filter-by-tags class="w-100"></app-filter-by-tags>
</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 4e33a9d..bdd5f6f 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 @@
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();
}
}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
index e7c605f..b304c26 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -1,4 +1,4 @@
<div class="searchBox">
- <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+ <input class="searchInput" tourAnchor="search" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
<button class="searchButton" href="#"></button>
</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 47927ce..8e5d8b0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -30,6 +30,7 @@
import { DataTablesModule } from 'angular-datatables';
import { DesignerSourceViewComponent } from './designer/source-view/source-view.component';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import {TourMatMenuModule} from 'ngx-tour-md-menu';
@NgModule({
declarations: [PackagesDashboardComponent,
@@ -64,7 +65,8 @@
AceEditorModule,
DataTablesModule,
// Import NgxUiLoaderModule
- NgxUiLoaderModule
+ NgxUiLoaderModule,
+ TourMatMenuModule.forRoot()
],
providers: [ApiService, JsonPipe],
bootstrap: []
diff --git a/cds-ui/designer-client/src/index.html b/cds-ui/designer-client/src/index.html
index 537d26d..96e7b00 100644
--- a/cds-ui/designer-client/src/index.html
+++ b/cds-ui/designer-client/src/index.html
@@ -2,37 +2,53 @@
<html lang="en">
<head>
- <meta charset="utf-8">
- <title>CDS</title>
- <base href="/">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta charset="utf-8">
+ <title>CDS</title>
+ <base href="/">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
- <link rel="manifest" href="/assets/img/favicon/site.webmanifest">
- <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
- <meta name="msapplication-TileColor" content="#da532c">
- <meta name="theme-color" content="#ffffff">
+ <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
+ <link rel="manifest" href="/assets/img/favicon/site.webmanifest">
+ <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
+ <meta name="msapplication-TileColor" content="#da532c">
+ <meta name="theme-color" content="#ffffff">
- <link rel="stylesheet" href="/assets/icomoon/style.css">
- <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet">
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> -->
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
- crossorigin="anonymous">
+ <link rel="stylesheet" href="/assets/icomoon/style.css">
+ <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+ <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> -->
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+ crossorigin="anonymous">
</head>
<body>
-<app-root></app-root>
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
- crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
- crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
- crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
+ <app-root></app-root>
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+ integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+ integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+ crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+ crossorigin="anonymous"></script>
+ <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
</body>
+<style>
+ .cdk-overlay-container {
+ position: unset;
+ z-index: 0;
+ }
-</html>
+ .cdk-overlay-backdrop {
+ position: unset;
+ z-index: 0;
+ }
+</style>
+
+</html>
\ No newline at end of file