From 07e2329068853f50ee579be4b63b32041ec7fddf Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 21 Sep 2022 23:17:24 -0700
Subject: [PATCH] Complete welcome tour

---
 src-ui/src/app/app.component.html             | 14 ++---
 src-ui/src/app/app.component.ts               | 58 ++++++++++++++++---
 .../app-frame/app-frame.component.html        |  8 +--
 .../dashboard/dashboard.component.html        |  2 +-
 .../upload-file-widget.component.html         |  2 +-
 .../welcome-widget.component.html             | 13 +++--
 .../document-list.component.html              |  5 +-
 .../manage/settings/settings.component.html   |  2 +-
 .../manage/settings/settings.component.ts     |  5 +-
 src-ui/src/styles.scss                        |  2 +-
 10 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html
index 9a605bead..be442d433 100644
--- a/src-ui/src/app/app.component.html
+++ b/src-ui/src/app/app.component.html
@@ -15,19 +15,19 @@
 <tour-step-template>
     <ng-template #tourStep let-step="step">
         <p class="tour-step-content" [innerHTML]="step?.content"></p>
-        <div class="d-flex justify-content-between align-items-end">
-            <span class="badge bg-secondary">{{ tourService.steps?.indexOf(step) + 1 }}/{{ tourService.steps?.length }}</span>
+        <div class="d-flex justify-content-between align-items-center">
+            <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
             <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
-                <div class="btn-group me-2" role="group" aria-label="Dismiss">
-                    <button class="btn btn-outline-danger btn-sm" (click)="tourService.end()">
+                <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
+                    <button class="btn btn-outline-danger" (click)="tourService.end()">
                         {{ step?.endBtnTitle }}
                     </button>
                 </div>
-                <div class="btn-group align-self-end" role="group" aria-label="Previous / Next">
-                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.prev()">
+                <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
+                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary" (click)="tourService.prev()">
                         « {{ step?.prevBtnTitle }}
                     </button>
-                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.next()">
+                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary" (click)="tourService.next()">
                         {{ step?.nextBtnTitle }} »
                     </button>
                 </div>
diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts
index 90a1a1905..ab357c339 100644
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@@ -118,24 +118,64 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.tourService.initialize([
       {
-        anchorId: 'tour.intro',
-        title: `Hello ${this.settings.displayName}, welcome to Paperless-ngx!`,
-        content:
-          "Here's a tutorial to guide you around some of Paperless-ngx's most useful features.",
+        anchorId: 'tour.dashboard',
+        title: $localize`Dashboard`,
+        content: $localize`Once you've created some saved views, such as an 'Inbox', you can set them to display on the dashboard. Those settings are found under Settings > Saved Views.`,
         route: '/dashboard',
       },
       {
-        anchorId: 'tour.dashboard',
-        title: 'The Dashboard',
-        content: "Here's some dashboard info",
+        anchorId: 'tour.upload-widget',
+        title: $localize`Uploading Documents`,
+        content: $localize`Drag-and-drop documents here to start uploading. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training it's machine learning algorithms.`,
         route: '/dashboard',
       },
       {
         anchorId: 'tour.documents',
-        title: 'Documents List',
-        content: "Here's some dashboard info",
+        title: $localize`Documents List`,
+        content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards.`,
         route: '/documents',
         delayAfterNavigation: 500,
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-filter-editor',
+        title: $localize`Document Filtering`,
+        content: $localize`The filtering tools allow you to quickly find documents using various searches, tags, etc.`,
+        route: '/documents',
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-views',
+        title: $localize`Saved Views`,
+        content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
+        route: '/documents',
+      },
+      {
+        anchorId: 'tour.tags',
+        title: $localize`Tags`,
+        content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
+        route: '/tags',
+      },
+      {
+        anchorId: 'tour.file-tasks',
+        title: $localize`File Tasks`,
+        content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
+        route: '/tasks',
+      },
+      {
+        anchorId: 'tour.settings',
+        title: $localize`Settings`,
+        content: $localize`Check out the settings for various tweaks to the web app or to toggle settings for saved views.`,
+        route: '/settings',
+      },
+      {
+        anchorId: 'tour.outro',
+        title: $localize`Thank you! 🙏`,
+        content:
+          $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
+          '<br/><br/>' +
+          $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
+        route: '/dashboard',
       },
     ])
 
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 7a8546640..8d6784090 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -127,7 +127,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.tags">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#tags"/>
               </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
@@ -148,7 +148,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.file-tasks">
               <span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#list-task"/>
@@ -163,7 +163,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.settings">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#gear"/>
               </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
@@ -183,7 +183,7 @@
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
-            <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://paperless-ngx.readthedocs.io/en/latest/" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://paperless-ngx.readthedocs.io/en/latest/" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.outro">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
               </svg><span>&nbsp;<ng-container i18n>Documentation</ng-container></span>
diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html
index aa4c17402..3ce9647cd 100644
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
@@ -19,7 +19,7 @@
   </svg>
 </app-page-header>
 
-<div class='row' tourAnchor="tour.dashboard">
+<div class='row'>
   <div class="col-lg-8">
     <ng-container *ngIf="savedViewService.loading">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
index b9e4d62e2..50fa8a754 100644
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
@@ -8,7 +8,7 @@
       </svg>
     </a>
   </div>
-  <div content>
+  <div content tourAnchor="tour.upload-widget">
     <form>
       <ngx-file-drop dropZoneLabel="Drop documents here or" browseBtnLabel="Browse files" (onFileDrop)="dropped($event)"
         (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"
diff --git a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
index 762d5cd32..f72810d60 100644
--- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
@@ -1,10 +1,11 @@
-<ngb-alert type="primary" [dismissible]="false">
+<ngb-alert type="primary" [dismissible]="false" tourAnchor="tour.dashboard">
   <!-- [dismissible]="isFinished(status)" (closed)="dismiss(status)" -->
-  <h4 class="alert-heading" i18n>Paperless-ngx is running!</h4>
-  <p i18n>You're ready to start uploading documents! Feel free to explore the various features or start a quick tour using the button below.</p>
-  <p i18n>More detail on how to use and configure paperless is always available in the <a href="https://paperless-ngx.readthedocs.io" target="_blank">documentation</a>.</p>
+  <h4 class="alert-heading"><ng-container i18n>Paperless-ngx is running!</ng-container> 🎉</h4>
+  <p i18n>You're ready to start uploading documents! Explore the various features of this web app on your own, or start a quick tour using the button below.</p>
+  <p i18n>More detail on how to use and configure Paperless-ngx is always available in the <a href="https://paperless-ngx.readthedocs.io" target="_blank">documentation</a>.</p>
   <hr>
-  <div class="btn-toolbar" role="toolbar" aria-label="Controls">
-    <button class="btn btn-primary ms-auto" (click)="tourService.start()"><ng-container i18n>Start Tour</ng-container> &rarr;</button>
+  <div class="d-flex align-items-end">
+    <p class="lead fs-6 m-0"><em i18n>Thanks for being a part of the Paperless-ngx community!</em></p>
+    <button class="btn btn-primary ms-auto flex-shrink-0" (click)="tourService.start()"><ng-container i18n>Start the tour</ng-container> &rarr;</button>
   </div>
 </ngb-alert>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index f20cf0d40..f6c1bf803 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -60,7 +60,7 @@
   </div>
 
   <div class="btn-group ms-2 flex-fill" ngbDropdown role="group">
-    <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
+    <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle i18n>Views</button>
     <div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
       <ng-container *ngIf="!list.activeSavedViewId">
         <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view.id)">{{view.name}}</button>
@@ -75,9 +75,9 @@
 </app-page-header>
 
 <div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
-  <div tourAnchor="tour.documents"></div>
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
+  <div tourAnchor="tour.documents-filter-editor"></div>
 </div>
 
 
@@ -105,6 +105,7 @@
 </ng-container>
 
 <ng-template #documentListNoError>
+  <div tourAnchor="tour.documents"></div>
   <div *ngIf="displayMode == 'largeCards'">
     <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
     </app-document-card-large>
diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index ab4cbc4c4..88bf34d36 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -1,5 +1,5 @@
 <app-page-header title="Settings" i18n-title>
-
+  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
 </app-page-header>
 
 <!-- <p>items per page, documents per view type</p> -->
diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index 7a1f31820..f1c395d3e 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -28,7 +28,7 @@ import {
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 import { ActivatedRoute } from '@angular/router'
 import { ViewportScroller } from '@angular/common'
-import { ForwardRefHandling } from '@angular/compiler'
+import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
   selector: 'app-settings',
@@ -86,7 +86,8 @@ export class SettingsComponent
     private settings: SettingsService,
     @Inject(LOCALE_ID) public currentLocale: string,
     private viewportScroller: ViewportScroller,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    public readonly tourService: TourService,
   ) {
     this.settings.settingsSaved.subscribe(() => {
       if (!this.savePending) this.initialize()
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 795e6c252..96d2b1539 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -515,7 +515,7 @@ table.table {
 
 // Tour popovers
 .tour-active .popover {
-  min-width: 400px;
+  min-width: 360px;
   margin: 0 .25rem .25rem !important;
 }