RED-10314: added missing help mode toggles and keys in dialogs.

apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts

@@ -126,7 +126,7 @@ export class AnnotationActionsComponent {
 
     async acceptRecommendation(): Promise<void> {
         const annotations = untracked(this.annotations);
-        await this.annotationActionsService.convertRecommendationToAnnotation(annotations);
+        await this.annotationActionsService.convertRecommendationToAnnotation(annotations, 'accept');
     }
 
     hideAnnotation() {

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

@@ -1,10 +1,12 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div
-            [translateParams]="{ type: isImage ? 'image' : isHint ? 'hint' : 'redaction' }"
-            [translate]="'edit-redaction.dialog.title'"
-            class="dialog-header heading-l"
-        ></div>
+        <div class="dialog-header heading-l">
+            <span
+                [translateParams]="{ type: isImage ? 'image' : isHint ? 'hint' : 'redaction' }"
+                [translate]="'edit-redaction.dialog.title'"
+                [attr.help-mode-key]="helpModeKeyByType"
+            ></span>
+        </div>
 
         <div [class.image-dialog]="isRedacted && isImage" [class.rectangle-dialog]="allRectangles" class="dialog-content redaction">
             <div *ngIf="!isImage && redactedTexts.length && !allRectangles" class="iqser-input-group">

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts

@@ -39,6 +39,7 @@ import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-r
 import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 import { validatePageRange } from '../../utils/form-validators';
 import { parseRectanglePosition, parseSelectedPageNumbers, prefillPageRange } from '../../utils/enhance-manual-redaction-request.utils';
+import { ActionsHelpModeKeys } from '../../utils/constants';
 
 interface TypeSelectOptions {
     type: string;
@@ -83,12 +84,19 @@ export class EditRedactionDialogComponent
     readonly isHint = this.annotations.every(annotation => annotation.HINT || annotation.IMAGE_HINT);
     readonly isRedacted = this.annotations.every(annotation => annotation.isRedacted);
     readonly isImported: boolean = this.annotations.every(annotation => annotation.imported || annotation.type === 'imported_redaction');
+    readonly isSkipped: boolean = this.annotations.every(annotation => annotation.isSkipped);
     readonly allRectangles = this.annotations.reduce((acc, a) => acc && a.AREA, true);
     readonly tableColumns: ValueColumn[] = [{ label: 'Value' }, { label: 'Type' }];
     readonly tableData: ValueColumn[][] = this.data.annotations.map(redaction => [
         { label: redaction.value, bold: true },
         { label: redaction.typeLabel },
     ]);
+    readonly annotationsType = this.isHint
+        ? ActionsHelpModeKeys.hint
+        : this.isSkipped
+          ? ActionsHelpModeKeys.skipped
+          : ActionsHelpModeKeys.redaction;
+    readonly helpModeKeyByType = `${this.annotationsType}_edit_DIALOG`;
     options = this.allRectangles ? getRectangleRedactOptions('edit', this.data.annotations) : getEditRedactionOptions(this.isHint);
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];

apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html

@@ -1,6 +1,11 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div class="dialog-header heading-l" [translate]="dialogTitle"></div>
+        <div class="dialog-header heading-l" [translate]="dialogTitle">
+            <span
+                [translate]="dialogTitle"
+                [attr.help-mode-key]="isSkipped ? 'skipped_force_DIALOG' : isImageHint ? 'hint_redact_DIALOG' : ''"
+            ></span>
+        </div>
 
         <div class="dialog-content force-annotation">
             @if (!isImageHint) {

apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts

@@ -10,9 +10,8 @@ import {
     IqserDialogComponent,
 } from '@iqser/common-ui';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { Dossier, ILegalBasisChangeRequest } from '@red/domain';
+import { ILegalBasisChangeRequest } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
-import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Roles } from '@users/roles';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
@@ -38,10 +37,8 @@ const DOCUMINE_LEGAL_BASIS = 'n-a.';
     standalone: true,
     imports: [
         ReactiveFormsModule,
-        NgIf,
         SelectedAnnotationsTableComponent,
         MatFormField,
-        MatSelectTrigger,
         MatSelect,
         MatOption,
         MatTooltip,
@@ -50,7 +47,6 @@ const DOCUMINE_LEGAL_BASIS = 'n-a.';
         IconButtonComponent,
         IqserDenyDirective,
         CircleButtonComponent,
-        NgForOf,
         HelpButtonComponent,
         DetailsRadioComponent,
     ],
@@ -68,6 +64,7 @@ export class ForceAnnotationDialogComponent
         { label: redaction.value, bold: true },
         { label: redaction.typeLabel },
     ]);
+    readonly isSkipped = this.data.annotations.every(annotation => annotation.isSkipped);
 
     legalOptions: LegalBasisOption[] = [];
     protected readonly roles = Roles;

apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html

@@ -1,6 +1,8 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
+        <div class="dialog-header heading-l">
+            <span [translate]="'redact-text.dialog.title'" [attr.help-mode-key]="helpModeKey"></span>
+        </div>
 
         <div class="dialog-content redaction">
             <div class="iqser-input-group">
@@ -59,6 +61,7 @@
             </iqser-icon-button>
 
             <div [translate]="'redact-text.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+            <iqser-help-button *deny="roles.getRss"></iqser-help-button>
         </div>
     </form>
 

apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts

@@ -8,7 +8,15 @@ import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select
 import { MatTooltip } from '@angular/material/tooltip';
 import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
-import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    HasScrollbarDirective,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
@@ -30,6 +38,7 @@ import {
     RedactRecommendationResult,
     ResizeOptions,
 } from '../../utils/dialog-types';
+import { Roles } from '@users/roles';
 
 @Component({
     templateUrl: './redact-recommendation-dialog.component.html',
@@ -51,6 +60,8 @@ import {
         MatDialogClose,
         MatSelectTrigger,
         MatSelect,
+        HelpButtonComponent,
+        IqserDenyDirective,
     ],
 })
 export class RedactRecommendationDialogComponent
@@ -75,6 +86,8 @@ export class RedactRecommendationDialogComponent
         reason: [null],
     });
 
+    readonly helpModeKey = `recommendation_${this.data.action}_DIALOG`;
+
     readonly tableColumns: ValueColumn[] = [{ label: 'Value' }, { label: 'Type' }];
     readonly tableData: ValueColumn[][] = this.data.annotations.map(redaction => [
         { label: redaction.value, bold: true },
@@ -204,4 +217,6 @@ export class RedactRecommendationDialogComponent
         }
         this.form.controls.dictionary.setValue(this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null);
     }
+
+    protected readonly roles = Roles;
 }

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html

@@ -1,6 +1,8 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
+        <div class="dialog-header heading-l">
+            <span [translate]="'redact-text.dialog.title'" [attr.help-mode-key]="'add_redaction_DIALOG'"></span>
+        </div>
 
         <div class="dialog-content redaction">
             <div class="iqser-input-group w-full selected-text-group">
@@ -134,6 +136,7 @@
             />
 
             <div [translate]="'redact-text.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+            <iqser-help-button *deny="roles.getRss"></iqser-help-button>
         </div>
     </form>
 

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts

@@ -8,7 +8,15 @@ import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select
 import { MatTooltip } from '@angular/material/tooltip';
 import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
-import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    HasScrollbarDirective,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -55,6 +63,8 @@ const MAXIMUM_TEXT_AREA_WIDTH = 421;
         AsyncPipe,
         IconButtonComponent,
         MatDialogClose,
+        HelpButtonComponent,
+        IqserDenyDirective,
     ],
 })
 export class RedactTextDialogComponent
@@ -138,7 +148,7 @@ export class RedactTextDialogComponent
 
     get applyToAll() {
         return this.isSystemDefault || this._userPreferences.getAddRedactionDefaultExtraOption() === 'undefined'
-            ? this.data.applyToAllDossiers ?? true
+            ? (this.data.applyToAllDossiers ?? true)
             : stringToBoolean(this._userPreferences.getAddRedactionDefaultExtraOption());
     }
 

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

@@ -1,9 +1,13 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div
-            [innerHTML]="(isBulk ? 'remove-redaction.dialog.title-bulk' : 'remove-redaction.dialog.title') | translate: typeTranslationArg"
-            class="dialog-header heading-l"
-        ></div>
+        <div class="dialog-header heading-l">
+            <span
+                [innerHTML]="
+                    (isBulk ? 'remove-redaction.dialog.title-bulk' : 'remove-redaction.dialog.title') | translate: typeTranslationArg
+                "
+                [attr.help-mode-key]="helpModeKeyByType"
+            ></span>
+        </div>
 
         <div [ngStyle]="{ height: dialogContentHeight + redactedTextsAreaHeight + 'px' }" class="dialog-content redaction">
             <div class="iqser-input-group">

apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts

@@ -76,6 +76,7 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
         : this.recommendation
           ? ANNOTATION_TYPES.RECOMMENDATION
           : ANNOTATION_TYPES.REDACTION;
+    readonly helpModeKeyByType = `${this.annotationsType}_remove_DIALOG`;
     readonly optionByType = {
         recommendation: {
             main: this._userPreferences.getRemoveRecommendationDefaultOption(),

apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.html

@@ -1,6 +1,11 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div [innerHTML]="'resize-redaction.dialog.header' | translate: { type: dialogHeaderType }" class="dialog-header heading-l"></div>
+        <div class="dialog-header heading-l">
+            <span
+                [innerHTML]="'resize-redaction.dialog.header' | translate: { type: dialogHeaderType }"
+                [attr.help-mode-key]="dialogTitleHelpKey"
+            ></span>
+        </div>
 
         <div class="dialog-content redaction">
             <ng-container *ngIf="!redaction.isImage && !redaction.AREA">
@@ -48,6 +53,7 @@
             ></iqser-icon-button>
 
             <div [translate]="'resize-redaction.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+            <iqser-help-button *deny="roles.getRss"></iqser-help-button>
         </div>
     </form>
 

apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts

@@ -6,12 +6,21 @@ import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
 import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
-import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    HasScrollbarDirective,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { getResizeRedactionOptions } from '../../utils/dialog-options';
 import { ResizeOptions, ResizeRedactionData, ResizeRedactionOption, ResizeRedactionResult } from '../../utils/dialog-types';
+import { Roles } from '@users/roles';
 
 @Component({
     templateUrl: './resize-redaction-dialog.component.html',
@@ -30,6 +39,8 @@ import { ResizeOptions, ResizeRedactionData, ResizeRedactionOption, ResizeRedact
         HasScrollbarDirective,
         MatDialogClose,
         NgIf,
+        HelpButtonComponent,
+        IqserDenyDirective,
     ],
 })
 export class ResizeRedactionDialogComponent extends IqserDialogComponent<
@@ -67,6 +78,14 @@ export class ResizeRedactionDialogComponent extends IqserDialogComponent<
         return this.data.redaction.HINT ? 'hint' : this.data.redaction.isSkippedImageHint ? 'image' : 'redaction';
     }
 
+    get dialogTitleHelpKey() {
+        return this.data.redaction.isRecommendation
+            ? 'recommendation_resize_DIALOG'
+            : this.data.redaction.isHint
+              ? 'hint_resize_DIALOG'
+              : 'redaction_resize_DIALOG';
+    }
+
     get displayedDictionaryLabel() {
         const dictType = this.form.get('dictionary').value;
         if (dictType) {
@@ -93,4 +112,6 @@ export class ResizeRedactionDialogComponent extends IqserDialogComponent<
             option: this.options[0],
         });
     }
+
+    protected readonly roles = Roles;
 }

apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts

@@ -225,9 +225,9 @@ export class AnnotationActionsService {
         this.#processObsAndEmit(request$).then();
     }
 
-    async convertRecommendationToAnnotation(recommendations: AnnotationWrapper[]) {
+    async convertRecommendationToAnnotation(recommendations: AnnotationWrapper[], action: 'accept' | 'resize') {
         const { dossierId, fileId } = this._state;
-        const data = this.#getRedactRecommendationDialogData(recommendations) as RedactRecommendationData;
+        const data = this.#getRedactRecommendationDialogData(recommendations, action) as RedactRecommendationData;
         const dialog = this._iqserDialog.openDefault(RedactRecommendationDialogComponent, { data });
         const result = await dialog.result();
         if (!result) {
@@ -277,7 +277,7 @@ export class AnnotationActionsService {
             recommendation.isRemoved = true;
             await this._annotationDrawService.draw([recommendation], this._skippedService.hideSkipped(), this._state.dossierTemplateId);
 
-            return this.convertRecommendationToAnnotation([recommendation]);
+            return this.convertRecommendationToAnnotation([recommendation], 'resize');
         }
 
         const dossier = this._state.dossier();
@@ -550,7 +550,7 @@ export class AnnotationActionsService {
         return this._iqserDialog.openDefault(EditRedactionDialogComponent, { data });
     }
 
-    #getRedactRecommendationDialogData(annotations: AnnotationWrapper[]) {
+    #getRedactRecommendationDialogData(annotations: AnnotationWrapper[], action: 'accept' | 'resize') {
         const dossierTemplate = this._dossierTemplatesService.find(this._state.dossierTemplateId);
         const isApprover = this._permissionsService.isApprover(this._state.dossier());
         const applyDictionaryUpdatesToAllDossiersByDefault = dossierTemplate.applyDictionaryUpdatesToAllDossiersByDefault;
@@ -560,6 +560,7 @@ export class AnnotationActionsService {
             dossierId: this._state.dossierId,
             applyToAllDossiers: isApprover ? applyDictionaryUpdatesToAllDossiersByDefault : false,
             isApprover,
+            action,
         };
     }
 

apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts

@@ -75,7 +75,7 @@ export class PdfAnnotationActionsService {
 
         if (permissions.canAcceptRecommendation && annotationChangesAllowed) {
             const acceptRecommendationButton = this.#getButton('check', _('annotation-actions.accept-recommendation.label'), () =>
-                this.#annotationActionsService.convertRecommendationToAnnotation(annotations),
+                this.#annotationActionsService.convertRecommendationToAnnotation(annotations, 'accept'),
             );
             availableActions.push(acceptRecommendationButton);
         }

apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts

@@ -97,6 +97,7 @@ export interface RedactTextResult {
 
 export type RedactRecommendationData = EditRedactionData & {
     applyToAllDossiers: boolean;
+    action?: 'resize' | 'accept';
 };
 
 export interface RedactRecommendationResult {

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -1,6 +1,8 @@
 <section class="dialog">
     <form [formGroup]="form">
-        <div [translate]="'add-dossier-dialog.header-new'" class="dialog-header heading-l"></div>
+        <div class="dialog-header heading-l">
+            <span [translate]="'add-dossier-dialog.header-new'" [attr.help-mode-key]="'new_dossier_DIALOG'"></span>
+        </div>
 
         <div *ngIf="config.IS_DOCUMINE && !availableReportTypes.length" class="inline-dialog-toast toast-warning">
             <div [translate]="'add-dossier-dialog.no-report-types-warning'"></div>

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

@@ -36,6 +36,11 @@
     "documentKey": "new_dossier",
     "overlappingElements": ["USER_MENU"]
   },
+  {
+    "elementKey": "new_dossier_DIALOG",
+    "documentKey": "new_dossier",
+    "overlappingElements": ["USER_MENU"]
+  },
   {
     "elementKey": "open_notifications",
     "documentKey": "open_notifications"
@@ -114,48 +119,84 @@
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "redaction_resize_DIALOG",
+    "documentKey": "redaction_resize"
+  },
   {
     "elementKey": "redaction_edit",
     "documentKey": "redaction_edit",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "redaction_edit_DIALOG",
+    "documentKey": "redaction_edit"
+  },
+  {
+    "elementKey": "add_redaction_DIALOG",
+    "documentKey": "add_redaction"
+  },
   {
     "elementKey": "redaction_remove",
     "documentKey": "redaction_remove",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "redaction_remove_DIALOG",
+    "documentKey": "redaction_remove"
+  },
   {
     "elementKey": "recommendation_resize",
     "documentKey": "recommendation_resize",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "recommendation_resize_DIALOG",
+    "documentKey": "recommendation_resize"
+  },
   {
     "elementKey": "recommendation_accept",
     "documentKey": "recommendation_accept",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "recommendation_accept_DIALOG",
+    "documentKey": "recommendation_accept"
+  },
   {
     "elementKey": "recommendation_remove",
     "documentKey": "recommendation_remove",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "recommendation_remove_DIALOG",
+    "documentKey": "recommendation_remove"
+  },
   {
     "elementKey": "skipped_edit",
     "documentKey": "skipped_edit",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "skipped_edit_DIALOG",
+    "documentKey": "skipped_edit"
+  },
   {
     "elementKey": "skipped_force",
     "documentKey": "skipped_force",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "skipped_force_DIALOG",
+    "documentKey": "skipped_force"
+  },
   {
     "elementKey": "skipped_remove",
     "documentKey": "skipped_remove",
@@ -174,18 +215,30 @@
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "hint_resize_DIALOG",
+    "documentKey": "hint_resize"
+  },
   {
     "elementKey": "hint_edit",
     "documentKey": "hint_edit",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "hint_edit_DIALOG",
+    "documentKey": "hint_edit"
+  },
   {
     "elementKey": "hint_remove",
     "documentKey": "hint_remove",
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "hint_remove_DIALOG",
+    "documentKey": "hint_remove"
+  },
   {
     "elementKey": "hint_hide",
     "documentKey": "hint_hide",
@@ -198,6 +251,10 @@
     "scrollableParentView": "ANNOTATIONS_LIST",
     "overlappingElements": ["USER_MENU", "WORKLOAD_FILTER", "DOCUMENT_INFO"]
   },
+  {
+    "elementKey": "hint_redact_DIALOG",
+    "documentKey": "hint_redact"
+  },
   {
     "elementKey": "workload_in_editor",
     "documentKey": "workload_in_editor",