RED-9777: added help mode missing links.

apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts

@@ -96,11 +96,13 @@ export class AdminSideNavComponent implements OnInit {
             {
                 screen: 'entity-rules',
                 label: _('admin-side-nav.entity-rule-editor'),
+                helpModeKey: 'rule_editors',
                 show: (this.isIqserDevMode || this.canAccessRulesInDocumine) && this._permissionsService.has(Roles.rules.read),
             },
             {
                 screen: 'component-rules',
                 label: _('admin-side-nav.component-rule-editor'),
+                helpModeKey: 'rule_editors',
                 show:
                     this.isDocumine &&
                     (this.isIqserDevMode || this.canAccessRulesInDocumine) &&
@@ -109,11 +111,13 @@ export class AdminSideNavComponent implements OnInit {
             {
                 screen: 'component-mappings',
                 label: _('admin-side-nav.component-mappings'),
+                helpModeKey: 'component_mappings',
                 show: this.isDocumine,
             },
             {
                 screen: 'components',
                 label: _('admin-side-nav.components'),
+                helpModeKey: 'components_management',
                 show: this.isDocumine,
             },
             {

apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html

@@ -7,7 +7,7 @@
 >
     <ng-container slot="right">
         <redaction-file-download-btn
-            [attr.help-mode-key]="'download_dossier_in_dossier'"
+            [attr.help-mode-key]="isDocumine ? 'dossier_download_dossier' : 'download_dossier_in_dossier'"
             [buttonId]="'download-files-btn'"
             [disabled]="downloadFilesDisabled$ | async"
             [dossier]="dossier"

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html

@@ -12,6 +12,8 @@
                     <iqser-circle-button
                         (action)="edit()"
                         [tooltip]="'component-management.actions.edit' | translate"
+                        [attr.help-mode-key]="'editor_edit_component'"
+                        [class.help-mode]="helpModeService.isHelpModeActive()"
                         icon="iqser:edit"
                     ></iqser-circle-button>
                     @if (hasUpdatedValues) {
@@ -26,17 +28,19 @@
                 <div cdkDrag class="editing-value">
                     <mat-icon
                         [class.hidden-button]="entry.componentValues.length === 1"
+                        [attr.help-mode-key]="'change_component_order'"
                         cdkDragHandle
                         class="draggable"
                         svgIcon="red:draggable-dots"
                     ></mat-icon>
-                    <div class="iqser-input-group w-full">
+                    <div [attr.help-mode-key]="'edit_component'" class="iqser-input-group w-full">
                         <textarea [id]="'value-input-' + $index" [(ngModel)]="value.value" rows="1" type="text"></textarea>
                     </div>
                     <iqser-circle-button
                         (action)="removeValue($index)"
                         [tooltip]="'component-management.actions.delete' | translate"
                         [class.hidden-button]="entry.componentValues.length === 1"
+                        [attr.help-mode-key]="'remove_component_value'"
                         class="remove-value"
                         icon="iqser:trash"
                     ></iqser-circle-button>
@@ -56,6 +60,7 @@
                     <iqser-circle-button
                         (action)="undo()"
                         [tooltip]="'component-management.actions.undo' | translate"
+                        [attr.help-mode-key]="'undo_component_change'"
                         class="undo-value"
                         icon="red:undo"
                         showDot
@@ -64,6 +69,7 @@
                 <iqser-circle-button
                     (action)="add()"
                     [tooltip]="'component-management.actions.add' | translate"
+                    [attr.help-mode-key]="'add_component_value'"
                     class="add-value"
                     icon="iqser:plus"
                 ></iqser-circle-button>

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss

@@ -29,6 +29,11 @@
 
             iqser-circle-button {
                 visibility: hidden;
+
+                &.help-mode {
+                    visibility: visible;
+                    z-index: 600;
+                }
             }
 
             .changes-dot {

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts

@@ -1,9 +1,9 @@
 import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe, KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
+import { CircleButtonComponent, HelpModeService, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { IComponentLogEntry, IComponentValue } from '@red/domain';
 import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
@@ -27,6 +27,7 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
         NgForOf,
         CdkDragHandle,
         FormsModule,
+        AsyncPipe,
     ],
 })
 export class EditableStructuredComponentValueComponent implements OnInit {
@@ -43,6 +44,7 @@ export class EditableStructuredComponentValueComponent implements OnInit {
     selected = false;
 
     constructor(
+        readonly helpModeService: HelpModeService,
         private readonly _iqserDialog: IqserDialog,
         private readonly _state: FilePreviewStateService,
     ) {}

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html

@@ -246,7 +246,7 @@
 </ng-template>
 
 <ng-template #documineHeader>
-    <span [translate]="'annotations'"></span>
+    <span [translate]="'annotations'" [attr.help-mode-key]="'annotations_list'"></span>
     <ng-container *ngTemplateOutlet="annotationsFilter"></ng-container>
 </ng-template>
 
@@ -254,7 +254,7 @@
     <iqser-popup-filter
         *ngIf="documentInfoService.hidden() || isDocumine"
         [actionsTemplate]="annotationFilterActionTemplate"
-        [attr.help-mode-key]="'workload_filter'"
+        [attr.help-mode-key]="isDocumine ? 'filter_annotations' : 'workload_filter'"
         [fileId]="state.file()?.id"
         [primaryFiltersSlug]="'primaryFilters'"
         [secondaryFiltersSlug]="'secondaryFilters'"

apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html

@@ -1,9 +1,9 @@
 <div class="components-header">
-    <span [translate]="'component-management.components'"></span>
+    <span [translate]="'component-management.components'" [attr.help-mode-key]="'components_table'"></span>
-    <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'"></iqser-popup-filter>
+    <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'" [attr.help-mode-key]="'filter_components'"></iqser-popup-filter>
 </div>
 
-<div *ngIf="displayedComponents$ | async as displayedComponents" class="components-container">
+<div *ngIf="displayedComponents$ | async as displayedComponents" class="components-container" id="components-view">
     <div class="component-row">
         <div class="header">
             <div class="component">{{ 'component-management.table-header.component' | translate }}</div>

apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html

@@ -1,4 +1,4 @@
-<section class="dialog">
+<section [attr.help-mode-key]="'edit_annotation_DIALOG'" class="dialog">
     <form (submit)="save()" [formGroup]="form">
         <div [translate]="'edit-redaction.dialog.title'" class="dialog-header heading-l"></div>
 

apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.html

@@ -1,4 +1,4 @@
-<section class="dialog">
+<section [attr.help-mode-key]="'remove_annotation_DIALOG'" class="dialog">
     <form (submit)="save()" [formGroup]="form">
         <div
             [innerHTML]="'remove-annotation.dialog.title' | translate: { count: data.redactions.length }"
@@ -27,7 +27,7 @@
                                     | translate
                                         : {
                                               text: text,
-                                              context: data.falsePositiveContext[idx]
+                                              context: data.falsePositiveContext[idx],
                                           }
                                     | replaceNbsp
                             }}

apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.html

@@ -24,7 +24,7 @@
     ></iqser-circle-button>
 
     <redaction-file-download-btn
-        [attr.help-mode-key]="'download_dossier'"
+        [attr.help-mode-key]="isDocumine ? 'template_download_dossier' : 'download_dossier'"
         [buttonId]="'download-dossier-files-' + dossier.id"
         [disabled]="downloadBtnDisabled"
         [dossier]="dossier"

apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, Input, OnChanges } from '@angular/core';
-import { CircleButtonComponent, IqserAllowDirective, IqserPermissionsService, largeDialogConfig } from '@iqser/common-ui';
+import { CircleButtonComponent, getConfig, IqserAllowDirective, IqserPermissionsService, largeDialogConfig } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { TranslateModule } from '@ngx-translate/core';
 import type { Dossier, File, User } from '@red/domain';
@@ -23,6 +23,7 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 export class DossiersListingActionsComponent implements OnChanges {
     readonly roles = Roles;
     readonly currentUser = getCurrentUser<User>();
+    readonly isDocumine = getConfig().IS_DOCUMINE;
 
     analysisForced: boolean;
     files: File[];

apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts

@@ -128,7 +128,7 @@ export class FileActionsComponent implements OnChanges {
                 tooltipClass: 'small',
                 show: this.showDownload,
                 disabled: this.file.processingStatus === ProcessingFileStatuses.ERROR,
-                helpModeKey: 'download',
+                helpModeKey: this.#isDocumine ? 'download_document' : 'download',
             },
             {
                 id: 'btn-delete_file',

apps/red-ui/src/assets/help-mode/help-mode-keys.json

@@ -651,6 +651,11 @@
     "documentKey": "workload_filter",
     "overlappingElements": ["USER_MENU", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "filter_annotations",
+    "documentKey": "filter_annotations",
+    "overlappingElements": ["USER_MENU", "DOCUMENT_INFO"]
+  },
   {
     "elementKey": "workload_bulk_selection",
     "documentKey": "workload_bulk_selection",
@@ -692,5 +697,86 @@
   {
     "elementKey": "document_list_view",
     "documentKey": "document_list"
+  },
+  {
+    "elementKey": "editor_edit_component",
+    "documentKey": "editor_edit_component",
+    "scrollableParentView": "COMPONENTS_VIEW"
+  },
+  {
+    "elementKey": "edit_component",
+    "documentKey": "edit_component"
+  },
+  {
+    "elementKey": "add_component_value",
+    "documentKey": "add_component_value"
+  },
+  {
+    "elementKey": "undo_component_change",
+    "documentKey": "undo_component_change"
+  },
+  {
+    "elementKey": "change_component_order",
+    "documentKey": "change_component_order"
+  },
+  {
+    "elementKey": "remove_component_value",
+    "documentKey": "remove_component_value"
+  },
+  {
+    "elementKey": "filter_components",
+    "documentKey": "filter_components"
+  },
+  {
+    "elementKey": "annotations_list",
+    "documentKey": "annotations_list"
+  },
+  {
+    "elementKey": "components_table",
+    "documentKey": "components_table"
+  },
+  {
+    "elementKey": "components_table",
+    "documentKey": "components_table"
+  },
+  {
+    "elementKey": "remove_annotation_DIALOG",
+    "documentKey": "remove_annotation"
+  },
+  {
+    "elementKey": "edit_annotation_DIALOG",
+    "documentKey": "edit_annotation"
+  },
+  {
+    "elementKey": "dossier_download_dossier",
+    "documentKey": "dossier_download_dossier",
+    "overlappingElements": ["USER_MENU"]
+  },
+  {
+    "elementKey": "dossier_download_document",
+    "documentKey": "dossier_download_document",
+    "scrollableParentView": "VIRTUAL_SCROLL"
+  },
+  {
+    "elementKey": "template_download_dossier",
+    "documentKey": "template_download_dossier",
+    "scrollableParentView": "VIRTUAL_SCROLL"
+  },
+  {
+    "elementKey": "editor_download_document",
+    "documentKey": "editor_download_document",
+    "overlappingElements": ["USER_MENU"]
+  },
+  {
+    "elementKey": "rule_editors",
+    "documentKey": "rule_editors"
+  },
+  {
+    "elementKey": "component_mappings",
+    "documentKey": "component_mappings"
+  },
+  {
+    "elementKey": "components_management",
+    "documentKey": "components_management"
   }
 ]