From 60d159ac3c9cc21c1d5c23dd146826bbe348c9b3 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Wed, 20 Jan 2021 10:33:03 +0200
Subject: [PATCH] Minor Fixes for labels and RuleSet Data-grid, added tooltips
 and fixed under-review btn

---
 .../initials-avatar.component.html            |  4 +-
 .../initials-avatar.component.ts              | 42 ++++++++++++-------
 .../add-edit-project-dialog.component.html    |  6 ++-
 .../rule-sets-listing-screen.component.html   |  6 +--
 .../rule-sets-listing-screen.component.scss   |  2 +
 .../file-preview-screen.component.ts          |  2 +
 apps/red-ui/src/app/utils/uuid-helper.ts      | 39 +++++++++++++++++
 apps/red-ui/src/assets/i18n/en.json           | 30 ++++++-------
 8 files changed, 94 insertions(+), 37 deletions(-)
 create mode 100644 apps/red-ui/src/app/utils/uuid-helper.ts

diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
index bbae7bad8..6af835d5b 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
@@ -1,8 +1,8 @@
 <div class="wrapper">
-    <div [className]="colorClass + ' oval ' + size" [matTooltipPosition]="'above'" [matTooltip]="username">
+    <div [className]="colorClass + ' oval ' + size" [matTooltipPosition]="'above'" [matTooltip]="displayName">
         {{ initials }}
     </div>
     <div *ngIf="withName" class="clamp-2 username">
-        {{ username || ('initials-avatar.unassigned' | translate) }}
+        {{ displayName || ('initials-avatar.unassigned' | translate) }}
     </div>
 </div>
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
index 927d596de..140126905 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
@@ -22,33 +22,45 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
 
     public _user: User;
 
+    public displayName: string;
+
+    public initials: string;
+
+    public colorClass: string;
+
     constructor(private readonly _userService: UserService) {}
 
     ngOnInit(): void {}
 
     ngOnChanges(): void {
-        this._user = this._userService.getUserById(this.userId);
+        const isSystemUser = this.userId && this.userId.toLowerCase() === 'system';
+        if (!isSystemUser) {
+            this._user = this._userService.getUserById(this.userId);
+            this.displayName = this._userService.getName(this._user);
+            this.initials = this._getInitials();
+            this.colorClass = this._colorClass();
+        } else {
+            this.displayName = 'System';
+            this.initials = 'SY';
+            this.colorClass = 'red-white red';
+        }
     }
 
-    public get username(): string {
-        return this._userService.getName(this._user);
-    }
-
-    public get initials(): string {
+    private _getInitials() {
         if (!this._user) {
             return '?';
+        } else {
+            return this._userService
+                .getName(this._user)
+                .split(' ')
+                .filter((value) => value !== ' ')
+                .filter((value, idx) => idx < 2)
+                .map((str) => str[0])
+                .join('');
         }
-
-        return this._userService
-            .getName(this._user)
-            .split(' ')
-            .filter((value) => value !== ' ')
-            .filter((value, idx) => idx < 2)
-            .map((str) => str[0])
-            .join('');
     }
 
-    public get colorClass() {
+    private _colorClass() {
         if (this._userService.userId === this.userId) {
             return 'red-white';
         }
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index d92c4f67a..5fd954fc9 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -20,7 +20,11 @@
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
                     <mat-select formControlName="ruleSet" style="width: 100%;">
-                        <mat-option *ngFor="let ruleSet of ruleSets" [value]="ruleSet.ruleSetId">
+                        <mat-option
+                            *ngFor="let ruleSet of ruleSets"
+                            [value]="ruleSet.ruleSetId"
+                            [matTooltip]="ruleSet.description ? ruleSet.description : ruleSet.name"
+                        >
                             {{ ruleSet.name }}
                         </mat-option>
                     </mat-select>
diff --git a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
index 04a9c4560..2d14e4b2b 100644
--- a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
@@ -69,10 +69,9 @@
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
                 ></redaction-table-col-name>
-                <redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="flex-center"></redaction-table-col-name>
+                <redaction-table-col-name label="project-templates-listing.table-col-names.created-by"></redaction-table-col-name>
                 <redaction-table-col-name
                     label="project-templates-listing.table-col-names.created-on"
-                    class="flex-center"
                     column="dateAdded"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
@@ -80,7 +79,6 @@
                 ></redaction-table-col-name>
                 <redaction-table-col-name
                     label="project-templates-listing.table-col-names.modified-on"
-                    class="flex-center"
                     column="dateModified"
                     (toggleSort)="toggleSort($event)"
                     [activeSortingOption]="sortingOption"
@@ -118,7 +116,7 @@
                     </div>
 
                     <div class="created-by">
-                        <redaction-initials-avatar></redaction-initials-avatar>
+                        <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
                     </div>
                     <div class="created-on small-label">
                         {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
diff --git a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.scss
index b739153f2..0189f867b 100644
--- a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.scss
@@ -27,9 +27,11 @@ redaction-table-col-name::ng-deep {
                 flex-direction: row;
                 padding-left: 10px;
                 align-items: center;
+                justify-content: flex-start;
 
                 &.template-name {
                     flex-direction: column;
+                    justify-content: center;
                     align-items: flex-start;
                 }
 
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 5c05f480f..54087f34e 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -531,6 +531,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
                 this._updateCanPerformActions();
                 await this.appStateService.reloadActiveProjectFiles();
                 return;
+            default:
+                this._updateCanPerformActions();
         }
     }
 
diff --git a/apps/red-ui/src/app/utils/uuid-helper.ts b/apps/red-ui/src/app/utils/uuid-helper.ts
new file mode 100644
index 000000000..31c6cf57f
--- /dev/null
+++ b/apps/red-ui/src/app/utils/uuid-helper.ts
@@ -0,0 +1,39 @@
+/* tslint:disable */
+const lut = [];
+for (let i = 0; i < 256; i++) {
+    lut[i] = (i < 16 ? '0' : '') + i.toString(16);
+}
+
+export function isUUID(uuid: string) {
+    return /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(uuid);
+}
+
+export function UUID() {
+    const d0 = (Math.random() * 0xffffffff) | 0;
+    const d1 = (Math.random() * 0xffffffff) | 0;
+    const d2 = (Math.random() * 0xffffffff) | 0;
+    const d3 = (Math.random() * 0xffffffff) | 0;
+    return (
+        lut[d0 & 0xff] +
+        lut[(d0 >> 8) & 0xff] +
+        lut[(d0 >> 16) & 0xff] +
+        lut[(d0 >> 24) & 0xff] +
+        '-' +
+        lut[d1 & 0xff] +
+        lut[(d1 >> 8) & 0xff] +
+        '-' +
+        lut[((d1 >> 16) & 0x0f) | 0x40] +
+        lut[(d1 >> 24) & 0xff] +
+        '-' +
+        lut[(d2 & 0x3f) | 0x80] +
+        lut[(d2 >> 8) & 0xff] +
+        '-' +
+        lut[(d2 >> 16) & 0xff] +
+        lut[(d2 >> 24) & 0xff] +
+        lut[d3 & 0xff] +
+        lut[(d3 >> 8) & 0xff] +
+        lut[(d3 >> 16) & 0xff] +
+        lut[(d3 >> 24) & 0xff]
+    );
+}
+/* tslint:enable */
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 107ab7556..274f5f7c5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -314,20 +314,20 @@
                     "error": "Failed to undo: {{error}}"
                 },
                 "suggest": {
-                    "success": "Manual redaction suggestion saved",
-                    "error": "Failed to save manual redaction suggestion: {{error}}"
+                    "success": "Redaction suggestion saved",
+                    "error": "Failed to save redaction suggestion: {{error}}"
                 },
                 "add": {
-                    "success": "Manual redaction added!",
-                    "error": "Failed to save manual redaction: {{error}}"
+                    "success": "Redaction added!",
+                    "error": "Failed to save redaction: {{error}}"
                 },
                 "decline": {
-                    "success": "Manual redaction suggestion declined!",
-                    "error": "Failed to decline manual redaction: {{error}}"
+                    "success": "Redaction suggestion declined!",
+                    "error": "Failed to decline redaction: {{error}}"
                 },
                 "approve": {
-                    "success": "Manual redaction suggestion approved!",
-                    "error": "Failed to approved manual redaction: {{error}}"
+                    "success": "Redaction suggestion approved!",
+                    "error": "Failed to approved redaction: {{error}}"
                 },
                 "request-remove": {
                     "success": "Requested to remove redaction!",
@@ -335,7 +335,7 @@
                 },
                 "remove": {
                     "success": "Redaction removed!",
-                    "error": "Failed to remove manual redaction: {{error}}"
+                    "error": "Failed to remove redaction: {{error}}"
                 }
             },
             "dictionary": {
@@ -483,7 +483,7 @@
         "remove-dictionary": "Pending remove from dictionary",
         "suggestion-add-dictionary": "Suggested dictionary add",
         "suggestion-remove-dictionary": "Suggested dictionary removal",
-        "suggestion-add": "Suggested manual redaction",
+        "suggestion-add": "Suggested redaction",
         "suggestion-remove": "Suggested redaction removal",
         "ignore": "Ignore",
         "hint": "Hint",
@@ -495,7 +495,7 @@
         "dialog": {
             "header": {
                 "dictionary": "Add to dictionary",
-                "redaction": "Manual Redaction",
+                "redaction": "Redaction",
                 "request-dictionary": "Request add to dictionary",
                 "request-redaction": "Request Redaction",
                 "false-positive": "Set false positive",
@@ -503,7 +503,7 @@
             },
             "add-redaction": {
                 "success": "Redaction suggestion added!",
-                "failed": "Failed to add manual redaction: {{message}}"
+                "failed": "Failed to add redaction: {{message}}"
             },
             "actions": {
                 "save": "Save"
@@ -535,7 +535,7 @@
             "error": "Failed to remove redaction."
         },
         "redaction-add": {
-            "success": "Manual Redaction added.",
+            "success": "Redaction added.",
             "error": "Failed to add redaction."
         }
     },
@@ -549,8 +549,8 @@
             "question": "Do you wish to proceed?"
         },
         "remove-manual-redaction": {
-            "title": "Remove Manual Redaction",
-            "question": "Are you sure you wish to remove this manual redaction?"
+            "title": "Remove Redaction",
+            "question": "Are you sure you wish to remove this redaction?"
         },
         "remove-from-dictionary": {
             "title": "Remove From Dictionary",