From aec68b643acf4e13d474c482ac37da27385cabbb Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Thu, 28 Jul 2022 19:30:58 +0300
Subject: [PATCH] RED-4649 - Create new app keys for help mode for the user
 manual

---
 .../base-screen/base-screen.component.html    | 12 +++--
 .../downloads-list-screen.component.html      |  1 +
 .../account-side-nav.component.html           |  1 +
 .../src/app/modules/account/account.module.ts |  3 +-
 .../template-stats.component.html             |  2 +
 .../app/modules/dashboard/dashboard.module.ts | 11 +++-
 .../dossier-details-stats.component.html      |  6 +--
 .../dossier-details-stats.component.scss      |  9 +++-
 .../dossier-details.component.html            |  3 +-
 .../view-mode-selection.component.html        |  2 +
 .../dossier-overview/config.service.ts        |  1 +
 .../dossiers-type-switch.component.html       |  3 +-
 .../trash-screen/trash-screen.component.html  |  1 +
 apps/red-ui/src/assets/help-mode/links.json   | 54 ++++++++++++++++---
 libs/common-ui                                |  2 +-
 15 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index b206c9198..cfb80afa6 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -8,10 +8,12 @@
     </div>
 
     <a [matTooltip]="'top-bar.navigation-items.back-to-dashboard' | translate" [routerLink]="['/']" class="logo">
-        <iqser-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
-            <iqser-logo icon="red:logo"></iqser-logo>
-        </iqser-hidden-action>
-        <div class="app-name">{{ titleService.getTitle() }}</div>
+        <div class="actions" [iqserHelpMode]="'home'">
+            <iqser-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
+                <iqser-logo icon="red:logo"></iqser-logo>
+            </iqser-hidden-action>
+            <div class="app-name">{{ titleService.getTitle() }}</div>
+        </div>
     </a>
 
     <div class="actions flex-2">
@@ -23,7 +25,7 @@
                 [placeholder]="'search.placeholder' | translate"
             ></redaction-spotlight-search>
 
-            <iqser-help-button></iqser-help-button>
+            <iqser-help-button [iqserHelpMode]="'help_mode'"></iqser-help-button>
 
             <redaction-notifications [iqserHelpMode]="'open_notifications'"></redaction-notifications>
         </div>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index d5b732a30..9915adfb9 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -9,6 +9,7 @@
                 [noDataText]="'downloads-list.no-data.title' | translate"
                 [selectionEnabled]="true"
                 [tableColumnConfigs]="tableColumnConfigs"
+                [headerHelpModeKey]="'my_downloads'"
                 noDataIcon="iqser:download"
             ></iqser-table>
         </div>
diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
index 23e35d988..87a5ed131 100644
--- a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
+++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html
@@ -6,6 +6,7 @@
             [routerLink]="'../' + item.screen"
             class="item"
             routerLinkActive="active"
+            [iqserHelpMode]="'user_account'"
         >
             {{ item.label | translate }}
         </div>
diff --git a/apps/red-ui/src/app/modules/account/account.module.ts b/apps/red-ui/src/app/modules/account/account.module.ts
index b457b8ac3..ea692b816 100644
--- a/apps/red-ui/src/app/modules/account/account.module.ts
+++ b/apps/red-ui/src/app/modules/account/account.module.ts
@@ -7,10 +7,11 @@ import { BaseAccountScreenComponent } from './base-account-screen/base-account-s
 import { NotificationPreferencesService } from './services/notification-preferences.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { IqserSharedModule } from '@iqser/common-ui';
+import { IqserHelpModeModule } from '@iqser/common-ui';
 
 @NgModule({
     declarations: [AccountSideNavComponent, BaseAccountScreenComponent],
-    imports: [CommonModule, SharedModule, AccountRoutingModule, TranslateModule, IqserSharedModule],
+    imports: [CommonModule, SharedModule, AccountRoutingModule, TranslateModule, IqserSharedModule, IqserHelpModeModule],
     providers: [NotificationPreferencesService],
 })
 export class AccountModule {}
diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
index bdc80de6e..6aba47c49 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
+++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
@@ -3,6 +3,7 @@
     [class.empty]="dossierTemplate.isEmpty"
     [routerLink]="dossierTemplate.isEmpty ? null : ['..', dossierTemplate.dossierTemplateId]"
     class="dialog"
+    [iqserHelpMode]="!dossierTemplate.isEmpty ? 'dossier_overview' : null"
 >
     <ng-container *ngIf="!dossierTemplate.isEmpty; else empty">
         <div class="flex-2">
@@ -73,6 +74,7 @@
             *ngIf="permissionsService.canCreateDossier(dossierTemplate)"
             [label]="'dashboard.empty-template.new-dossier' | translate"
             [type]="iconButtonTypes.primary"
+            [iqserHelpMode]="'new_dossier_button'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </ng-template>
diff --git a/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts b/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
index 99635f57b..495be1caa 100644
--- a/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
+++ b/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
@@ -8,6 +8,7 @@ import { BreadcrumbTypes } from '@red/domain';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { IqserButtonsModule } from '@iqser/common-ui';
+import { IqserHelpModeModule } from '@iqser/common-ui';
 
 const routes = [
     {
@@ -21,6 +22,14 @@ const routes = [
 
 @NgModule({
     declarations: [DashboardScreenComponent, TemplateStatsComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, TranslateModule, IqserButtonsModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        SharedDossiersModule,
+        TranslateModule,
+        IqserButtonsModule,
+        IqserHelpModeModule,
+    ],
 })
 export class DashboardModule {}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
index 3b4b80a5e..03fc667ac 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
@@ -36,7 +36,7 @@
         <span>{{ dossierTemplateName }} </span>
     </div>
 
-    <div (click)="openEditDossierDialog('dossierDictionary')" [iqserHelpMode]="'edit_dossier_dossier_dictionary'" class="link-property">
+    <div (click)="openEditDossierDialog('dossierDictionary')" [iqserHelpMode]="'edit_dossier_dictionary'" class="link-property">
         <mat-icon svgIcon="red:dictionary"></mat-icon>
         <span>{{ 'dossier-overview.dossier-details.dictionary' | translate }} </span>
     </div>
@@ -58,7 +58,7 @@
         {{ 'dossier-overview.dossier-details.attributes.expand' | translate: { count: dossierAttributes.length } }}
     </div>
 
-    <ng-container *ngIf="attributesExpanded">
+    <div *ngIf="attributesExpanded" class="attributes" [iqserHelpMode]="'edit_dossier_dossier_attributes'">
         <div (click)="openEditDossierDialog('dossierAttributes')" *ngFor="let attr of dossierAttributes" class="link-property">
             <mat-icon svgIcon="red:attribute"></mat-icon>
             <span *ngIf="!attr.value"> {{ attr.label + ': -' }}</span>
@@ -72,5 +72,5 @@
         <div (click)="attributesExpanded = false" class="all-caps-label hide-attributes">
             {{ 'dossier-overview.dossier-details.attributes.show-less' | translate }}
         </div>
-    </ng-container>
+    </div>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
index 42741d8ec..37fd969b0 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
@@ -8,7 +8,8 @@
     flex-direction: column;
     align-items: flex-start;
 
-    > div {
+    .attributes,
+    div {
         margin-right: 0;
         border-radius: 4px;
         width: 100%;
@@ -26,6 +27,12 @@
         }
     }
 
+    .attributes {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
     .show-attributes,
     .hide-attributes {
         margin-top: 12px;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
index 8fd62d3f8..03e08b4e5 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -40,7 +40,7 @@
             <redaction-donut-chart
                 [config]="chartConfig$ | async"
                 [filterKey]="'statusFilters'"
-                [helpModeKey]="'dashboard_in_dossier'"
+                [helpModeKey]="'filter_document_list'"
                 [radius]="63"
                 [strokeWidth]="15"
                 [subtitle]="'dossier-overview.dossier-details.charts.documents-in-dossier' | translate"
@@ -52,6 +52,7 @@
             <iqser-progress-bar
                 *ngFor="let config of statusConfig"
                 [config]="config"
+                [iqserHelpMode]="'document_upload'"
                 filterKey="processingTypeFilters"
             ></iqser-progress-bar>
         </div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
index f88ad8274..98e516f59 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
@@ -6,6 +6,7 @@
         [attr.aria-expanded]="mode === listingModes.table"
         [tooltip]="'view-mode.list' | translate"
         [greySelected]="true"
+        [iqserHelpMode]="'document_features_in_dossier'"
         icon="iqser:list"
     ></iqser-circle-button>
 
@@ -14,6 +15,7 @@
         [attr.aria-expanded]="mode === listingModes.workflow"
         [tooltip]="'view-mode.workflow' | translate"
         [greySelected]="true"
+        [iqserHelpMode]="'workflow_view'"
         icon="iqser:lanes"
     ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
index ea01a502d..91a65a4f3 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
@@ -399,6 +399,7 @@ export class ConfigService {
                 required: true,
                 checker: this._recentlyModifiedChecker,
                 disabled: entities.filter(this._recentlyModifiedChecker).length === 0,
+                helpModeKey: 'filter_document_list',
             },
             {
                 id: 'assigned-to-me',
diff --git a/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.html b/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.html
index c92940f16..0f0c344fe 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="dossierTemplate$ | async as dossierTemplate">
-    <button [routerLinkActive]="'active'" [routerLink]="['..', DOSSIERS_ROUTE]" class="red-tab">
+    <button [routerLinkActive]="'active'" [routerLink]="['..', DOSSIERS_ROUTE]" [iqserHelpMode]="'dossier_list'" class="red-tab">
         {{ 'dossiers-type-switch.active' | translate }}
     </button>
 
@@ -7,6 +7,7 @@
         [disabled]="dossierTemplate.numberOfArchivedDossiers === 0"
         [routerLinkActive]="'active'"
         [routerLink]="['..', ARCHIVE_ROUTE]"
+        [iqserHelpMode]="'dossier_list'"
         class="red-tab"
     >
         {{ 'dossiers-type-switch.archive' | translate }}
diff --git a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.html b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.html
index 1f641e133..73eacc152 100644
--- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.html
@@ -17,6 +17,7 @@
                 [selectionEnabled]="true"
                 [tableColumnConfigs]="tableColumnConfigs"
                 [tableItemClasses]="{ disabled: disabledFn }"
+                [headerHelpModeKey]="'trash'"
                 noDataIcon="red:template"
             ></iqser-table>
         </div>
diff --git a/apps/red-ui/src/assets/help-mode/links.json b/apps/red-ui/src/assets/help-mode/links.json
index 10d5ee715..a993c8349 100644
--- a/apps/red-ui/src/assets/help-mode/links.json
+++ b/apps/red-ui/src/assets/help-mode/links.json
@@ -149,12 +149,6 @@
     "it": "",
     "fr": ""
   },
-  "edit_dossier_dossier_dictionary": {
-    "en": "/en/index-en.html?contextId=edit_dossier_dossier_dictionary",
-    "de": "",
-    "it": "",
-    "fr": ""
-  },
   "edit_dossier_members": {
     "en": "/en/index-en.html?contextId=edit_dossier_members",
     "de": "",
@@ -232,5 +226,53 @@
     "de": "",
     "it": "",
     "fr": ""
+  },
+  "user_account": {
+    "en": "/en/index-en.html?contextId=user_account",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "my_downloads": {
+    "en": "/en/index-en.html?contextId=my_downloads",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "trash": {
+    "en": "/en/index-en.html?contextId=trash",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier_overview": {
+    "en": "/en/index-en.html?contextId=dossier_overview",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "home": {
+    "en": "/en/index-en.html?contextId=home",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "workflow_view": {
+    "en": "/en/index-en.html?contextId=workflow_view",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "document_upload": {
+    "en": "/en/index-en.html?contextId=document_upload",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_dossier_dictionary": {
+    "en": "/en/index-en.html?contextId=edit_dossier_dictionary",
+    "de": "",
+    "it": "",
+    "fr": ""
   }
 }
diff --git a/libs/common-ui b/libs/common-ui
index 442d79e9c..1f0cd5cb5 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 442d79e9ceb09806cba057bcbca654bb28f7c2db
+Subproject commit 1f0cd5cb5c7c0a75b6ac8c4fa6e7b4b66fcc9305