RED-6506: Added confirmation dialog for false positive action.

apps/red-ui/src/app/modules/file-preview/dialogs/false-positive-dialog/false-positive-dialog.component.html

@@ -0,0 +1,31 @@
+<section class="dialog">
+    <form (submit)="save()" [formGroup]="form">
+        <div class="dialog-header heading-l" translate="false-positive-dialog.header"></div>
+
+        <div class="dialog-content">
+            <ul>
+                <li
+                    *ngFor="let value of data"
+                    [innerHTML]="'false-positive-dialog.content.body-text' | translate : { value: value.text, context: value.context }"
+                ></li>
+            </ul>
+            <div class="iqser-input-group w-300">
+                <label translate="false-positive-dialog.content.comment"></label>
+                <textarea formControlName="comment" iqserHasScrollbar name="comment" rows="4" type="text"></textarea>
+            </div>
+        </div>
+
+        <div class="dialog-actions">
+            <iqser-icon-button
+                [disabled]="!form.valid"
+                [label]="'false-positive-dialog.actions.save' | translate"
+                [submit]="true"
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
+
+            <div class="all-caps-label cancel" mat-dialog-close translate="false-positive-dialog.actions.cancel"></div>
+        </div>
+    </form>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+</section>

apps/red-ui/src/app/modules/file-preview/dialogs/false-positive-dialog/false-positive-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { BaseDialogComponent } from '@iqser/common-ui';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+export interface FalsePositiveDialogInput {
+    text: string;
+    context: string;
+}
+
+@Component({
+    selector: 'redaction-false-positive-dialog',
+    templateUrl: './false-positive-dialog.component.html',
+    styleUrls: ['./false-positive-dialog.component.scss'],
+})
+export class FalsePositiveDialogComponent extends BaseDialogComponent implements OnInit {
+    constructor(
+        protected readonly _dialogRef: MatDialogRef<FalsePositiveDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) readonly data: FalsePositiveDialogInput[],
+    ) {
+        super(_dialogRef);
+    }
+
+    ngOnInit() {
+        const controlsConfig = { comment: [null] };
+        this.form = this._formBuilder.group(controlsConfig);
+        this.initialFormValue = this.form.getRawValue();
+    }
+
+    save(): void {
+        this._dialogRef.close(this.form.getRawValue());
+    }
+}

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -55,6 +55,7 @@ import { RssDialogComponent } from './dialogs/rss-dialog/rss-dialog.component';
 import { ReadonlyBannerComponent } from './components/readonly-banner/readonly-banner.component';
 import { SuggestionsService } from './services/suggestions.service';
 import { PagesComponent } from './components/pages/pages.component';
+import { FalsePositiveDialogComponent } from './dialogs/false-positive-dialog/false-positive-dialog.component';
 
 const routes: Routes = [
     {
@@ -78,6 +79,7 @@ const dialogs = [
     DocumentInfoDialogComponent,
     ImportRedactionsDialogComponent,
     RssDialogComponent,
+    FalsePositiveDialogComponent,
 ];
 
 const components = [

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

@@ -251,21 +251,25 @@ export class AnnotationActionsService {
 
     markAsFalsePositive($event: MouseEvent, annotations: AnnotationWrapper[]) {
         $event?.stopPropagation();
+        const data = annotations.map(annotation => ({ text: annotation.value, context: this._getFalsePositiveText(annotation) }));
+        this._dialogService.openDialog('falsePositive', null, data, (result: { comment: string }) => {
+            const requests: List<IAddRedactionRequest> = annotations.map(annotation => ({
+                sourceId: annotation.id,
+                value: this._getFalsePositiveText(annotation),
+                type: annotation.type,
+                positions: annotation.positions,
+                addToDictionary: true,
+                reason: 'False Positive',
+                dictionaryEntryType: annotation.isRecommendation
+                    ? DictionaryEntryTypes.FALSE_RECOMMENDATION
+                    : DictionaryEntryTypes.FALSE_POSITIVE,
+                comment: result.comment ? { text: result.comment } : null,
+            }));
+            console.log(requests.map(req => req.value));
+            const { dossierId, fileId } = this._state;
 
-        const requests: List<IAddRedactionRequest> = annotations.map(annotation => ({
-            sourceId: annotation.id,
-            value: this._getFalsePositiveText(annotation),
-            type: annotation.type,
-            positions: annotation.positions,
-            addToDictionary: true,
-            reason: 'False Positive',
-            dictionaryEntryType: annotation.isRecommendation
-                ? DictionaryEntryTypes.FALSE_RECOMMENDATION
-                : DictionaryEntryTypes.FALSE_POSITIVE,
-        }));
-        const { dossierId, fileId } = this._state;
-
-        this.#processObsAndEmit(this._manualRedactionService.addAnnotation(requests, dossierId, fileId));
+            this.#processObsAndEmit(this._manualRedactionService.addAnnotation(requests, dossierId, fileId));
+        });
     }
 
     #generateRectangle(annotationWrapper: AnnotationWrapper) {

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

@@ -10,6 +10,7 @@ import { ConfirmationDialogComponent, DialogConfig, DialogService } from '@iqser
 import { ResizeAnnotationDialogComponent } from '../dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
 import { HighlightActionDialogComponent } from '../dialogs/highlight-action-dialog/highlight-action-dialog.component';
 import { RssDialogComponent } from '../dialogs/rss-dialog/rss-dialog.component';
+import { FalsePositiveDialogComponent } from '../dialogs/false-positive-dialog/false-positive-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -21,7 +22,8 @@ type DialogType =
     | 'resizeAnnotation'
     | 'forceAnnotation'
     | 'manualAnnotation'
-    | 'highlightAction';
+    | 'highlightAction'
+    | 'falsePositive';
 
 @Injectable()
 export class FilePreviewDialogService extends DialogService<DialogType> {
@@ -60,6 +62,9 @@ export class FilePreviewDialogService extends DialogService<DialogType> {
             component: RssDialogComponent,
             dialogConfig: { width: '90vw' },
         },
+        falsePositive: {
+            component: FalsePositiveDialogComponent,
+        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {

apps/red-ui/src/assets/i18n/redact/de.json

@@ -1998,6 +1998,17 @@
     "annotations": "",
     "title": ""
   },
+  "false-positive-dialog": {
+    "actions": {
+      "cancel": "",
+      "save": ""
+    },
+    "content": {
+      "comment": "",
+      "body-text": ""
+    },
+    "header": ""
+  },
   "rules-screen": {
     "error": {
       "generic": "Es ist ein Fehler aufgetreten ... Die Regeln konnten nicht aktualisiert werden!"

apps/red-ui/src/assets/i18n/redact/en.json

@@ -1998,6 +1998,17 @@
     "annotations": "",
     "title": "Structured Component Management"
   },
+  "false-positive-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "save": "Yes, proceed"
+    },
+    "content": {
+      "comment": "Comment",
+      "body-text": "''{value}'' is a false positive in this context: {context}"
+    },
+    "header": "False Positive"
+  },
   "rules-screen": {
     "error": {
       "generic": "Something went wrong... Rules update failed!"