From 3b56abf1a6d53e4bc702a2065767a0644251c0b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 5 Jan 2021 20:51:58 +0200
Subject: [PATCH] Enhance Manual Redaction Dictionary Dropdown

---
 .../manual-annotation-dialog.component.html   |  5 +-
 .../manual-annotation-dialog.component.ts     | 15 ++++++
 apps/red-ui/src/assets/styles/red-select.scss | 52 ++++---------------
 3 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 1ef91cfa3..1793e4cf8 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -38,9 +38,12 @@
             <div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
-                <mat-select formControlName="dictionary">
+                <mat-select panelClass="description-select" formControlName="dictionary">
+                    <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                     <mat-option *ngFor="let dictionary of redactionDictionaries" [value]="dictionary.type">
                         {{ dictionary.label }}
+                        <br />
+                        <span class="description">{{ dictionaryDescriptions[dictionary.label] }}</span>
                     </mat-option>
                 </mat-select>
             </div>
diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index 17e3fd101..94e114440 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -31,6 +31,13 @@ export class ManualAnnotationDialogComponent implements OnInit {
     redactionDictionaries: TypeValue[] = [];
     legalOptions: LegalBasisOption[] = [];
 
+    public dictionaryDescriptions = {
+        'CBI Address': 'Laboratory Address: Redaction in combination with vertebrates',
+        'CBI Author': 'Study Author: Redaction in combination with vertebrates',
+        'CBI Sponsor': 'Batch Sponsor: Redaction in combination with "batches produced at"',
+        PII: 'Personal Identification Information: Employee name, email, phone, fax, ...'
+    };
+
     get title() {
         return this._manualAnnotationService.getTitle(this.manualRedactionEntryWrapper.type);
     }
@@ -83,6 +90,14 @@ export class ManualAnnotationDialogComponent implements OnInit {
         this.redactionDictionaries.sort((a, b) => a.label.localeCompare(b.label));
     }
 
+    public get displayedDictionaryLabel() {
+        const dictType = this.redactionForm.get('dictionary').value;
+        if (dictType) {
+            return this.redactionDictionaries.find((d) => d.type === dictType).label;
+        }
+        return null;
+    }
+
     handleAddRedaction() {
         this._enhanceManualRedaction(this.manualRedactionEntryWrapper.manualRedactionEntry);
         this._manualAnnotationService.addAnnotation(this.manualRedactionEntryWrapper.manualRedactionEntry).subscribe(
diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss
index 720d6b8f1..1e5c2af1b 100644
--- a/apps/red-ui/src/assets/styles/red-select.scss
+++ b/apps/red-ui/src/assets/styles/red-select.scss
@@ -1,48 +1,18 @@
 @import 'red-variables';
 
-.red-select {
-    .mat-select-value-text {
-        font-family: Inter, sans-serif;
-        color: $grey-1;
-        font-size: 13px;
-        line-height: 14px;
-    }
+.mat-select-panel.description-select mat-option.mat-option {
+    height: unset;
 
-    .mat-form-field-infix {
-        padding: 0;
-        border: none;
-        width: fit-content;
-    }
+    .mat-option-text.mat-option-text {
+        white-space: normal;
+        line-height: 16px;
+        margin: 12px auto;
+        font-weight: 500;
 
-    .mat-select-value {
-        max-width: none;
-    }
-
-    .mat-select-arrow-wrapper {
-        padding-left: 5px;
-
-        .mat-select-arrow {
-            color: $grey-1 !important;
-        }
-    }
-}
-
-.red-select-panel {
-    border-radius: 0 !important;
-
-    .mat-option {
-        background: $white !important;
-        font-family: Inter, sans-serif;
-        color: $grey-1;
-        font-size: 13px;
-        line-height: 14px;
-
-        &.mat-selected.mat-active {
-            color: $primary;
-        }
-
-        &:hover {
-            background: $grey-2 !important;
+        .description {
+            font-size: 12px;
+            font-weight: initial;
+            opacity: 0.6;
         }
     }
 }