From d96362eedff42d374f180a21b9c0ec6fac879d92 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 30 Aug 2022 17:24:51 +0300
Subject: [PATCH] RED-5080 - New help mode links: User account and Settings

---
 .../admin-side-nav.component.html             |   1 +
 .../admin-side-nav.component.ts               |  80 ++++++-
 .../src/app/modules/admin/admin.module.ts     |   2 +
 .../default-colors-screen.component.html      |   1 +
 .../digital-signature-screen.component.html   |   1 +
 ...r-attributes-listing-screen.component.html |  27 ++-
 ...r-attributes-listing-screen.component.scss |   4 +
 ...ssier-states-listing-screen.component.html |  27 ++-
 ...ssier-states-listing-screen.component.scss |   4 +
 .../dossier-templates-listing.module.ts       |   3 +-
 .../table-item/table-item.component.html      |  16 +-
 .../entities-listing-screen.component.html    |  41 ++--
 .../entities-listing-screen.component.scss    |   8 +
 ...e-attributes-listing-screen.component.html |  28 ++-
 ...e-attributes-listing-screen.component.scss |   4 +
 .../general-config-form.component.html        |   8 +-
 .../smtp-form/smtp-form.component.html        |   2 +-
 .../system-preferences-form.component.html    |   8 +-
 .../info/dossier-template-info.module.ts      |   3 +-
 ...ossier-template-info-screen.component.html |   1 +
 .../license-screen.component.ts               |   1 +
 .../license-select.component.html             |   2 +-
 .../admin/screens/license/license.module.ts   |   3 +-
 .../permissions-screen.component.html         |   1 +
 .../screens/permissions/permissions.module.ts |   4 +-
 .../reports-screen.component.html             |   1 +
 .../admin/screens/reports/reports.module.ts   |  12 +-
 .../user-listing-screen.component.html        |  29 +--
 .../user-listing-screen.component.scss        |   4 +
 .../user-listing-screen.component.ts          |   1 +
 .../screens/watermark/watermark.module.ts     |   2 +
 .../watermarks-listing-screen.component.html  |  29 +--
 .../watermarks-listing-screen.component.scss  |   3 +
 .../watermarks-listing-screen.component.ts    |   1 +
 .../dossier-template-actions.component.html   |  38 ++--
 .../dossier-template-actions.component.scss   |   4 +
 .../admin/shared/shared-admin.module.ts       |   4 +-
 apps/red-ui/src/assets/help-mode/links.json   | 210 +++++++++++++++++-
 libs/common-ui                                |   2 +-
 .../permissions/permissions-mapping.model.ts  |   4 +
 40 files changed, 487 insertions(+), 137 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.scss

diff --git a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.html b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.html
index b23f4cb39..98317bb98 100644
--- a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.html
+++ b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.html
@@ -5,6 +5,7 @@
             [class.disabled]="isDisabled(item.screen)"
             [routerLinkActiveOptions]="{ exact: false }"
             [routerLink]="prefix + item.screen"
+            [iqserHelpMode]="item.helpModeKey"
             class="item"
             routerLinkActive="active"
         >
diff --git a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
index 9290bd348..a3f112e79 100644
--- a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
@@ -10,6 +10,7 @@ interface NavItem {
     readonly label: string;
     readonly screen: string;
     readonly hideIf?: boolean;
+    readonly helpModeKey?: string;
 }
 
 @Component({
@@ -30,41 +31,96 @@ export class AdminSideNavComponent implements OnInit {
                 screen: 'dossier-templates',
                 label: _('admin-side-nav.dossier-templates'),
                 hideIf: !this.currentUser.isManager && !this.currentUser.isAdmin,
+                helpModeKey: 'dossier_templates',
             },
             {
                 screen: 'digital-signature',
                 label: _('admin-side-nav.digital-signature'),
                 hideIf: !this.currentUser.isAdmin,
+                helpModeKey: 'digital_signature',
             },
             {
                 screen: 'license-info',
                 label: _('admin-side-nav.license-information'),
                 hideIf: !this.currentUser.isAdmin,
+                helpModeKey: 'license_information',
+            },
+            {
+                screen: 'audit',
+                label: _('admin-side-nav.audit'),
+                hideIf: !this.currentUser.isAdmin,
+                helpModeKey: 'audit',
+            },
+            {
+                screen: 'users',
+                label: _('admin-side-nav.user-management'),
+                hideIf: !this.currentUser.isUserAdmin,
+                helpModeKey: 'user_management',
+            },
+            {
+                screen: 'dossier-permissions',
+                label: _('dossier-permissions'),
+                hideIf: !this.currentUser.isAdmin,
+                helpModeKey: 'dossier_permissions',
             },
-            { screen: 'audit', label: _('admin-side-nav.audit'), hideIf: !this.currentUser.isAdmin },
-            { screen: 'users', label: _('admin-side-nav.user-management'), hideIf: !this.currentUser.isUserAdmin },
-            { screen: 'dossier-permissions', label: _('dossier-permissions'), hideIf: !this.currentUser.isAdmin },
             {
                 screen: 'general-config',
                 label: _('admin-side-nav.configurations'),
                 hideIf: !this.currentUser.isAdmin,
+                helpModeKey: 'configurations',
             },
         ],
         dossierTemplates: [
-            { screen: 'info', label: _('admin-side-nav.dossier-template-info') },
-            { screen: 'entities', label: _('admin-side-nav.entities') },
+            {
+                screen: 'info',
+                label: _('admin-side-nav.dossier-template-info'),
+                helpModeKey: 'dossier_templates_info',
+            },
+            {
+                screen: 'entities',
+                label: _('admin-side-nav.entities'),
+                helpModeKey: 'entities',
+            },
             {
                 screen: 'rules',
                 label: _('admin-side-nav.rule-editor'),
                 hideIf: !this.userPreferenceService.areDevFeaturesEnabled,
             },
-            { screen: 'default-colors', label: _('admin-side-nav.default-colors') },
-            { screen: 'watermarks', label: _('admin-side-nav.watermarks') },
-            { screen: 'file-attributes', label: _('admin-side-nav.file-attributes') },
-            { screen: 'dossier-attributes', label: _('admin-side-nav.dossier-attributes') },
-            { screen: 'dossier-states', label: _('admin-side-nav.dossier-states') },
-            { screen: 'reports', label: _('admin-side-nav.reports') },
-            { screen: 'justifications', label: _('admin-side-nav.justifications') },
+            {
+                screen: 'default-colors',
+                label: _('admin-side-nav.default-colors'),
+                helpModeKey: 'default_colors',
+            },
+            {
+                screen: 'watermarks',
+                label: _('admin-side-nav.watermarks'),
+                helpModeKey: 'watermarks',
+            },
+            {
+                screen: 'file-attributes',
+                label: _('admin-side-nav.file-attributes'),
+                helpModeKey: 'file_attributes',
+            },
+            {
+                screen: 'dossier-attributes',
+                label: _('admin-side-nav.dossier-attributes'),
+                helpModeKey: 'dossier_attributes',
+            },
+            {
+                screen: 'dossier-states',
+                label: _('admin-side-nav.dossier-states'),
+                helpModeKey: 'dossier_states',
+            },
+            {
+                screen: 'reports',
+                label: _('admin-side-nav.reports'),
+                helpModeKey: 'reports',
+            },
+            {
+                screen: 'justifications',
+                label: _('admin-side-nav.justifications'),
+                helpModeKey: 'justifications',
+            },
         ],
         entities: [
             {
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 50359226a..f8ac00517 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -49,6 +49,7 @@ import {
     HumanizePipe,
     IqserButtonsModule,
     IqserEmptyStatesModule,
+    IqserHelpModeModule,
     IqserInputsModule,
     IqserListingModule,
     IqserScrollbarModule,
@@ -125,6 +126,7 @@ const components = [
         IqserUploadFileModule,
         IqserEmptyStatesModule,
         IqserSharedModule,
+        IqserHelpModeModule,
     ],
 })
 export class AdminModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index 7e3a16045..99a4580af 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -42,6 +42,7 @@
                     *ngIf="currentUser.isAdmin"
                     [tooltip]="'default-colors-screen.action.edit' | translate"
                     [type]="circleButtonTypes.dark"
+                    [iqserHelpMode]="'default_colors'"
                     icon="iqser:edit"
                 ></iqser-circle-button>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 5af797c13..35023f823 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -12,6 +12,7 @@
             [buttonIcon]="null"
             [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
             [text]="'digital-signature-screen.no-data.title' | translate"
+            [helpModeKey]="'digital_signature'"
             icon="iqser:document"
         ></iqser-empty-state>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 427284021..0cbc256b6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -60,6 +60,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'dossier-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
+            [iqserHelpMode]="'create_new_dossier_attributes'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -87,19 +88,21 @@
 
         <div class="cell">
             <div *ngIf="currentUser.isAdmin" class="action-buttons">
-                <iqser-circle-button
-                    (action)="openAddEditAttributeDialog($event, attribute)"
-                    [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
+                <div [iqserHelpMode]="'edit_delete_dossier_attributes'">
+                    <iqser-circle-button
+                        (action)="openAddEditAttributeDialog($event, attribute)"
+                        [tooltip]="'dossier-attributes-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
 
-                <iqser-circle-button
-                    (action)="openConfirmDeleteAttributeDialog($event, [attribute])"
-                    [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openConfirmDeleteAttributeDialog($event, [attribute])"
+                        [tooltip]="'dossier-attributes-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
index 1d1e62c50..895341ea9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
@@ -7,3 +7,7 @@
         margin: 5px 0;
     }
 }
+
+.action-buttons > div {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 7a97f19f5..9ffc888b9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -56,6 +56,7 @@
             *ngIf="permissionsService.canPerformDossierStatesActions()"
             [label]="'dossier-states-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
+            [iqserHelpMode]="'create_new_dossier_state'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -80,18 +81,20 @@
 
         <div class="cell">
             <div *ngIf="permissionsService.canPerformDossierStatesActions()" class="action-buttons">
-                <iqser-circle-button
-                    (action)="openAddEditStateDialog($event, state)"
-                    [tooltip]="'dossier-states-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
-                <iqser-circle-button
-                    (action)="openConfirmDeleteStateDialog($event, state)"
-                    [tooltip]="'dossier-states-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+                <div [iqserHelpMode]="'edit_delete_dossier_state'">
+                    <iqser-circle-button
+                        (action)="openAddEditStateDialog($event, state)"
+                        [tooltip]="'dossier-states-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openConfirmDeleteStateDialog($event, state)"
+                        [tooltip]="'dossier-states-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
index f9d91a1eb..bce23ef20 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
@@ -16,3 +16,7 @@
     padding: 50px 26px 0;
     width: 250px;
 }
+
+.action-buttons > div {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
index 78afb5abc..8903121f1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
@@ -5,7 +5,7 @@ import { SharedModule } from '@shared/shared.module';
 import { TableItemComponent } from './table-item/table-item.component';
 import { DossierTemplatesListingScreenComponent } from './dossier-templates-listing-screen/dossier-templates-listing-screen.component';
 import { SharedAdminModule } from '../../shared/shared-admin.module';
-import { IqserButtonsModule, IqserInputsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserHelpModeModule, IqserInputsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }];
@@ -22,6 +22,7 @@ const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }]
         IqserInputsModule,
         IqserButtonsModule,
         IqserListingModule,
+        IqserHelpModeModule,
     ],
 })
 export class DossierTemplatesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html
index 34b4d2940..0df08d19a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html
@@ -1,11 +1,13 @@
 <div class="cell">
-    <div [matTooltipPosition]="'above'" [matTooltip]="dossierTemplate.name" class="table-item-title heading">
-        {{ dossierTemplate.name }}
-    </div>
-    <div class="small-label stats-subtitle">
-        <div *ngIf="stats$ | async as stats">
-            <mat-icon svgIcon="red:dictionary"></mat-icon>
-            {{ 'dossier-templates-listing.entities' | translate: { length: stats.numberOfDictionaries } }}
+    <div [iqserHelpMode]="'dossier_templates'">
+        <div [matTooltipPosition]="'above'" [matTooltip]="dossierTemplate.name" class="table-item-title heading">
+            {{ dossierTemplate.name }}
+        </div>
+        <div class="small-label stats-subtitle">
+            <div *ngIf="stats$ | async as stats">
+                <mat-icon svgIcon="red:dictionary"></mat-icon>
+                {{ 'dossier-templates-listing.entities' | translate: { length: stats.numberOfDictionaries } }}
+            </div>
         </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
index baab6ec47..c8ed7edd8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
@@ -60,6 +60,7 @@
                 *ngIf="permissionsService.canEditEntities()"
                 [label]="'entities-listing.add-new' | translate"
                 [type]="iconButtonTypes.primary"
+                [iqserHelpMode]="'create_new_entity'"
                 icon="iqser:plus"
             ></iqser-icon-button>
         </div>
@@ -70,10 +71,12 @@
     <ng-template #tableItemTemplate let-entity="entity">
         <div *ngIf="cast(entity) as dict">
             <div class="cell">
-                <div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
-                <div class="dict-name">
-                    <div class="table-item-title heading">
-                        {{ dict.label }}
+                <div [iqserHelpMode]="'entities'">
+                    <div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
+                    <div class="dict-name">
+                        <div class="table-item-title heading">
+                            {{ dict.label }}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -96,21 +99,23 @@
                 </div>
 
                 <div class="action-buttons">
-                    <iqser-circle-button
-                        (action)="openDeleteEntitiesDialog($event, [dict])"
-                        *ngIf="permissionsService.canDeleteEntities(dict)"
-                        [tooltip]="'entities-listing.action.delete' | translate"
-                        [type]="circleButtonTypes.dark"
-                        icon="iqser:trash"
-                    ></iqser-circle-button>
+                    <div [iqserHelpMode]="'edit_delete_entities'">
+                        <iqser-circle-button
+                            (action)="openDeleteEntitiesDialog($event, [dict])"
+                            *ngIf="permissionsService.canDeleteEntities(dict)"
+                            [tooltip]="'entities-listing.action.delete' | translate"
+                            [type]="circleButtonTypes.dark"
+                            icon="iqser:trash"
+                        ></iqser-circle-button>
 
-                    <iqser-circle-button
-                        *ngIf="permissionsService.canEditEntities()"
-                        [routerLink]="dict.routerLink"
-                        [tooltip]="'entities-listing.action.edit' | translate"
-                        [type]="circleButtonTypes.dark"
-                        icon="iqser:edit"
-                    ></iqser-circle-button>
+                        <iqser-circle-button
+                            *ngIf="permissionsService.canEditEntities()"
+                            [routerLink]="dict.routerLink"
+                            [tooltip]="'entities-listing.action.edit' | translate"
+                            [type]="circleButtonTypes.dark"
+                            icon="iqser:edit"
+                        ></iqser-circle-button>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.scss
index 67f009904..0409ef2ba 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.scss
@@ -16,4 +16,12 @@
     .dict-name {
         max-width: 100%;
     }
+
+    > div {
+        display: flex;
+    }
+}
+
+.action-buttons > div {
+    display: flex;
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index c592ddb1a..1c2c935ba 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -67,6 +67,7 @@
             *ngIf="currentUser.isAdmin"
             [tooltip]="'file-attributes-listing.upload-csv' | translate"
             [type]="circleButtonTypes.dark"
+            [iqserHelpMode]="'upload_file_attribute'"
             icon="iqser:upload"
             tooltipPosition="above"
         ></iqser-circle-button>
@@ -85,6 +86,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'file-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
+            [iqserHelpMode]="'create_new_file_attribute'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -127,18 +129,20 @@
 
         <div class="cell">
             <div *ngIf="currentUser.isAdmin" class="action-buttons">
-                <iqser-circle-button
-                    (action)="openAddEditAttributeDialog($event, attribute)"
-                    [tooltip]="'file-attributes-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
-                <iqser-circle-button
-                    (action)="openConfirmDeleteAttributeDialog($event, [attribute])"
-                    [tooltip]="'file-attributes-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+                <div [iqserHelpMode]="'edit_delete_file_attribute'">
+                    <iqser-circle-button
+                        (action)="openAddEditAttributeDialog($event, attribute)"
+                        [tooltip]="'file-attributes-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openConfirmDeleteAttributeDialog($event, [attribute])"
+                        [tooltip]="'file-attributes-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 14a44a51a..068052da4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -13,6 +13,10 @@
     iqser-round-checkbox {
         cursor: default;
     }
+
+    .action-buttons > div {
+        display: flex;
+    }
 }
 
 .csv-input {
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.html
index 3c999db20..b8fb0831f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.html
@@ -23,7 +23,13 @@
         </div>
     </div>
     <div class="dialog-actions">
-        <button [disabled]="form?.invalid || !changed" color="primary" mat-flat-button type="submit">
+        <button
+            [disabled]="form?.invalid || !changed"
+            color="primary"
+            mat-flat-button
+            type="submit"
+            [iqserHelpMode]="'general_configurations'"
+        >
             {{ 'general-config-screen.actions.save' | translate }}
         </button>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html
index a431d7437..fead35888 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html
@@ -98,7 +98,7 @@
         </div>
     </div>
     <div class="dialog-actions">
-        <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
+        <button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit" [iqserHelpMode]="'smtp_configurations'">
             {{ 'general-config-screen.actions.save' | translate }}
         </button>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
index 2ae3347fa..2046c9e02 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
@@ -29,7 +29,13 @@
         </div>
     </div>
     <div class="dialog-actions">
-        <button [disabled]="form?.invalid || !changed" color="primary" mat-flat-button type="submit">
+        <button
+            [disabled]="form?.invalid || !changed"
+            color="primary"
+            mat-flat-button
+            type="submit"
+            [iqserHelpMode]="'sytem_configurations'"
+        >
             {{ 'general-config-screen.actions.save' | translate }}
         </button>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
index 393e351ee..bd74d6021 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { DossierTemplateInfoScreenComponent } from './info-screen/dossier-template-info-screen.component';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
-import { IqserButtonsModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserHelpModeModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
@@ -18,6 +18,7 @@ const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
         TranslateModule,
         IqserButtonsModule,
         IqserScrollbarModule,
+        IqserHelpModeModule,
     ],
 })
 export class DossierTemplateInfoModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html
index 2e1579cba..a7049fc04 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html
@@ -49,6 +49,7 @@
                 *ngIf="permissionsService.isAdmin()"
                 class="ml-8"
                 icon="iqser:edit"
+                [iqserHelpMode]="'dossier_templates_info'"
             ></iqser-circle-button>
         </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
index 4ed148bf5..abc1af4ce 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
@@ -21,6 +21,7 @@ export class LicenseScreenComponent implements OnInit {
             label: _('license-info-screen.email-report'),
             action: (): void => this.sendMail(),
             type: IconButtonTypes.primary,
+            helpModeKey: 'license_information',
         },
     ];
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
index 1f258ddf8..254941a67 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="licenses$ | async as licenses" class="iqser-input-group w-400">
-    <mat-select (valueChange)="licenseChanged($event)" *ngIf="value" [(ngModel)]="value">
+    <mat-select (valueChange)="licenseChanged($event)" *ngIf="value" [(ngModel)]="value" [iqserHelpMode]="'license_information'">
         <mat-select-trigger>
             <ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
         </mat-select-trigger>
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
index 3ce6911f9..d4ce0a177 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
@@ -5,7 +5,7 @@ import { LicenseChartComponent } from './license-chart/license-chart.component';
 import { RouterModule, Routes } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatSelectModule } from '@angular/material/select';
-import { IqserListingModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ComboChartComponent, ComboSeriesVerticalComponent, YAxisComponent } from './combo-chart';
 import { FormsModule } from '@angular/forms';
@@ -35,6 +35,7 @@ const routes: Routes = [
         FormsModule,
         NgxChartsModule,
         IqserListingModule,
+        IqserHelpModeModule,
     ],
 })
 export class LicenseModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.html
index abbb71cdf..8ccc9df6d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.html
@@ -13,6 +13,7 @@
             <mat-slide-toggle
                 (toggleChange)="togglePermission(config.searchKey, permission)"
                 [checked]="config.getValue(permission)"
+                [iqserHelpMode]="config.getHelpModeKey(permission)"
                 color="primary"
             ></mat-slide-toggle>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
index 0203c3ee3..1d2a4f0d0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
@@ -5,13 +5,13 @@ import { SharedModule } from '@shared/shared.module';
 import { PermissionsScreenComponent } from './permissions-screen/permissions-screen.component';
 import { ConfigService } from './config.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserListingModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: PermissionsScreenComponent }];
 
 @NgModule({
     declarations: [PermissionsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserListingModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserListingModule, IqserHelpModeModule],
     providers: [ConfigService],
 })
 export class PermissionsModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.html
index 5e153b613..b91496dea 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.html
@@ -25,6 +25,7 @@
             (action)="fileInput.click()"
             *ngIf="permissionsService.isAdmin()"
             [tooltip]="'reports-screen.upload-document' | translate"
+            [iqserHelpMode]="'reports'"
             icon="iqser:upload"
         ></iqser-circle-button>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts b/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
index c5f4a8e15..3d3b8a97a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
@@ -4,12 +4,20 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserButtonsModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserHelpModeModule, IqserScrollbarModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: ReportsScreenComponent }];
 
 @NgModule({
     declarations: [ReportsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserButtonsModule, IqserScrollbarModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        IqserButtonsModule,
+        IqserScrollbarModule,
+        IqserHelpModeModule,
+    ],
 })
 export class ReportsModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 4d0e4604f..df0d1344e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -54,6 +54,7 @@
                 (toggleChange)="toggleActive(user)"
                 [checked]="user.active"
                 [disabled]="!canDeactivate(user)"
+                [iqserHelpMode]="'activate_deactivate_user'"
                 color="primary"
             ></mat-slide-toggle>
         </div>
@@ -64,20 +65,22 @@
 
         <div class="cell">
             <div class="action-buttons">
-                <iqser-circle-button
-                    (action)="openAddEditUserDialog($event, user)"
-                    [tooltip]="'user-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
+                <div [iqserHelpMode]="'edit_delete_user'">
+                    <iqser-circle-button
+                        (action)="openAddEditUserDialog($event, user)"
+                        [tooltip]="'user-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
 
-                <iqser-circle-button
-                    (action)="openDeleteUsersDialog([user.id], $event)"
-                    [disabled]="deleteDisabled(user)"
-                    [tooltip]="'user-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openDeleteUsersDialog([user.id], $event)"
+                        [disabled]="deleteDisabled(user)"
+                        [tooltip]="'user-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 654d30fc8..63564b588 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -16,3 +16,7 @@
 ::ng-deep .page-header .actions > *:not(:last-child) {
     margin-right: 6px;
 }
+
+.action-buttons > div {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index 632debc2f..8da407648 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -59,6 +59,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
             type: IconButtonTypes.primary,
             icon: 'iqser:plus',
             disabled$: this._userService.currentUser$.pipe(map(user => !user.isAdmin)),
+            helpModeKey: 'create_user',
         },
     ];
     collapsedDetails = false;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
index a578e1d2e..2f6dd99b0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
@@ -8,6 +8,7 @@ import {
     CompositeRouteGuard,
     IqserAuthGuard,
     IqserButtonsModule,
+    IqserHelpModeModule,
     IqserListingModule,
     IqserScrollbarModule,
     IqserUsersModule,
@@ -55,6 +56,7 @@ const routes = [
         IqserButtonsModule,
         IqserListingModule,
         IqserScrollbarModule,
+        IqserHelpModeModule,
     ],
 })
 export class WatermarkModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.html
index e577f1b43..b9d485df0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.html
@@ -16,6 +16,7 @@
             [label]="'watermarks-listing.add-new' | translate"
             [routerLink]="getRouterLink()"
             [type]="iconButtonTypes.primary"
+            [iqserHelpMode]="'create_new_watermark'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -49,20 +50,22 @@
 
         <div class="cell">
             <div class="action-buttons">
-                <iqser-circle-button
-                    [routerLink]="getRouterLink(entity)"
-                    [tooltip]="'watermarks-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
+                <div [iqserHelpMode]="'edit_delete_watermark'">
+                    <iqser-circle-button
+                        [routerLink]="getRouterLink(entity)"
+                        [tooltip]="'watermarks-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
 
-                <iqser-circle-button
-                    (action)="openConfirmDeleteWatermarkDialog($event, entity)"
-                    *ngIf="currentUser.isAdmin"
-                    [tooltip]="'watermarks-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openConfirmDeleteWatermarkDialog($event, entity)"
+                        *ngIf="currentUser.isAdmin"
+                        [tooltip]="'watermarks-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.scss
new file mode 100644
index 000000000..8c2112a71
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.scss
@@ -0,0 +1,3 @@
+.action-buttons > div {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
index fae9ae295..9bb23bece 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
@@ -20,6 +20,7 @@ import { WatermarksMapService } from '@services/entity-services/watermarks-map.s
 
 @Component({
     templateUrl: './watermarks-listing-screen.component.html',
+    styleUrls: ['./watermarks-listing-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(WatermarksListingScreenComponent),
 })
diff --git a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.html b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.html
index 100912920..5341206ba 100644
--- a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.html
+++ b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.html
@@ -1,22 +1,24 @@
 <div class="action-buttons" *ngIf="currentUser.isAdmin">
-    <iqser-circle-button
-        (action)="openDeleteDossierTemplateDialog($event)"
-        [tooltip]="'dossier-templates-listing.action.delete' | translate"
-        icon="iqser:trash"
-        [type]="circleButtonTypes.dark"
-    ></iqser-circle-button>
+    <div [iqserHelpMode]="'edit_clone_delete_dossier_templates'">
+        <iqser-circle-button
+            (action)="openDeleteDossierTemplateDialog($event)"
+            [tooltip]="'dossier-templates-listing.action.delete' | translate"
+            icon="iqser:trash"
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
-    <iqser-circle-button
-        (action)="openEditCloneDossierTemplateDialog($event, true)"
-        [tooltip]="'dossier-templates-listing.action.clone' | translate"
-        icon="iqser:copy"
-        [type]="circleButtonTypes.dark"
-    ></iqser-circle-button>
+        <iqser-circle-button
+            (action)="openEditCloneDossierTemplateDialog($event, true)"
+            [tooltip]="'dossier-templates-listing.action.clone' | translate"
+            icon="iqser:copy"
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
-    <iqser-circle-button
-        (action)="openEditCloneDossierTemplateDialog($event)"
-        [tooltip]="'dossier-templates-listing.action.edit' | translate"
-        icon="iqser:edit"
-        [type]="circleButtonTypes.dark"
-    ></iqser-circle-button>
+        <iqser-circle-button
+            (action)="openEditCloneDossierTemplateDialog($event)"
+            [tooltip]="'dossier-templates-listing.action.edit' | translate"
+            icon="iqser:edit"
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
+    </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.scss b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.scss
index 3a02168bb..b9111ba61 100644
--- a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.scss
@@ -4,4 +4,8 @@
     iqser-circle-button:not(:last-child) {
         margin-right: 2px;
     }
+
+    > div {
+        display: flex;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/shared/shared-admin.module.ts b/apps/red-ui/src/app/modules/admin/shared/shared-admin.module.ts
index bf65ffa92..743fb0e9b 100644
--- a/apps/red-ui/src/app/modules/admin/shared/shared-admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/shared/shared-admin.module.ts
@@ -4,7 +4,7 @@ import { SharedModule } from '@shared/shared.module';
 import { DossierTemplateActionsComponent } from './components/dossier-template-actions/dossier-template-actions.component';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserButtonsModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserHelpModeModule } from '@iqser/common-ui';
 
 const components = [DossierTemplateActionsComponent];
 
@@ -13,6 +13,6 @@ const modules = [CommonModule, SharedModule];
 @NgModule({
     declarations: [...components],
     exports: [...components, ...modules],
-    imports: [...modules, RouterModule, TranslateModule, IqserButtonsModule],
+    imports: [...modules, RouterModule, TranslateModule, IqserButtonsModule, IqserHelpModeModule],
 })
 export class SharedAdminModule {}
diff --git a/apps/red-ui/src/assets/help-mode/links.json b/apps/red-ui/src/assets/help-mode/links.json
index f6eccd273..5b89bddb2 100644
--- a/apps/red-ui/src/assets/help-mode/links.json
+++ b/apps/red-ui/src/assets/help-mode/links.json
@@ -113,12 +113,6 @@
     "it": "",
     "fr": ""
   },
-  "dossier_list": {
-    "en": "/en/index-en.html?contextId=dossier_list",
-    "de": "",
-    "it": "",
-    "fr": ""
-  },
   "document_list": {
     "en": "/en/index-en.html?contextId=document_list",
     "de": "",
@@ -298,5 +292,209 @@
     "de": "",
     "it": "",
     "fr": ""
+  },
+  "dossier_templates": {
+    "en": "/en/index-en.html?contextId=dossier_templates",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_clone_delete_dossier_templates": {
+    "en": "/en/index-en.html?contextId=edit_clone_delete_dossier_templates",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier_templates_info": {
+    "en": "/en/index-en.html?contextId=dossier_templates_info",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "entities": {
+    "en": "/en/index-en.html?contextId=entities",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_entities": {
+    "en": "/en/index-en.html?contextId=edit_delete_entities",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_new_entity": {
+    "en": "/en/index-en.html?contextId=create_new_entity",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "default_colors": {
+    "en": "/en/index-en.html?contextId=default_colors",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "watermarks": {
+    "en": "/en/index-en.html?contextId=watermarks",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_new_watermark": {
+    "en": "/en/index-en.html?contextId=create_new_watermark",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_watermark": {
+    "en": "/en/index-en.html?contextId=edit_delete_watermark",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "file_attributes": {
+    "en": "/en/index-en.html?contextId=file_attributes",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_new_file_attribute": {
+    "en": "/en/index-en.html?contextId=create_new_file_attribute",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_file_attribute": {
+    "en": "/en/index-en.html?contextId=edit_delete_file_attribute",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "upload_file_attribute": {
+    "en": "/en/index-en.html?contextId=upload_file_attribute",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier_attributes": {
+    "en": "/en/index-en.html?contextId=dossier_attributes",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_new_dossier_attributes": {
+    "en": "/en/index-en.html?contextId=create_new_dossier_attributes",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_dossier_attributes": {
+    "en": "/en/index-en.html?contextId=edit_delete_dossier_attributes",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier_states": {
+    "en": "/en/index-en.html?contextId=dossier_states",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_new_dossier_state": {
+    "en": "/en/index-en.html?contextId=create_new_dossier_state",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_dossier_state": {
+    "en": "/en/index-en.html?contextId=edit_delete_dossier_state",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "reports": {
+    "en": "/en/index-en.html?contextId=reports",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "justifications": {
+    "en": "/en/index-en.html?contextId=justifications",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "digital_signature": {
+    "en": "/en/index-en.html?contextId=digital_signature",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "license_information": {
+    "en": "/en/index-en.html?contextId=license_information",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "audit": {
+    "en": "/en/index-en.html?contextId=license_information",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "user_management": {
+    "en": "/en/index-en.html?contextId=user_management",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "create_user": {
+    "en": "/en/index-en.html?contextId=create_user",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit_delete_user": {
+    "en": "/en/index-en.html?contextId=edit_delete_user",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "activate_deactivate_user": {
+    "en": "/en/index-en.html?contextId=activate_deactivate_user",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier_permissions": {
+    "en": "/en/index-en.html?contextId=dossier_permissions",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "configurations": {
+    "en": "/en/index-en.html?contextId=configurations",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "general_configurations": {
+    "en": "/en/index-en.html?contextId=general_configurations",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "sytem_configurations": {
+    "en": "/en/index-en.html?contextId=sytem_configurations",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "smtp_configurations": {
+    "en": "/en/index-en.html?contextId=smtp_configurations",
+    "de": "",
+    "it": "",
+    "fr": ""
   }
 }
diff --git a/libs/common-ui b/libs/common-ui
index 7a456438c..85e9a9399 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 7a456438cdf44b47d45cbe60efe085480fd4fd7c
+Subproject commit 85e9a939983c6e736434288aa95b90e2d3b56630
diff --git a/libs/red-domain/src/lib/permissions/permissions-mapping.model.ts b/libs/red-domain/src/lib/permissions/permissions-mapping.model.ts
index d06839806..9ebdc8274 100644
--- a/libs/red-domain/src/lib/permissions/permissions-mapping.model.ts
+++ b/libs/red-domain/src/lib/permissions/permissions-mapping.model.ts
@@ -29,4 +29,8 @@ export class PermissionsMapping extends Entity<IPermissionsMapping> implements I
     getValue(permissionName: string): boolean {
         return this.#currentValuesMap.has(permissionName);
     }
+
+    getHelpModeKey(permissionName: string): string | null {
+        return permissionName === 'OWNER' ? 'dossier_permissions' : null;
+    }
 }