From 8191aa65292466b89ffe3063290003b429371bad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 14:09:35 +0300
Subject: [PATCH 1/7] Column preview on hover

---
 ...ttributes-csv-import-dialog.component.html | 23 +++++++---
 ...ttributes-csv-import-dialog.component.scss | 43 ++++++++++++++++---
 ...-attributes-csv-import-dialog.component.ts |  1 +
 ...e-attributes-listing-screen.component.html | 29 ++++++-------
 ...e-attributes-listing-screen.component.scss |  2 +-
 apps/red-ui/src/assets/i18n/en.json           |  6 ++-
 6 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 61ec231ca..298151c1d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -42,15 +42,16 @@
         <div class="csv-part">
             <div class="left">
                 <div class="csv-part-header">
-                    <div class="all-caps-label">
-                        {{ 'file-attributes-csv-import.available' | translate: { value: parseResult?.meta?.fields.length } }}
-                    </div>
-                    <div class="all-caps-label">
-                        {{ 'file-attributes-csv-import.selected' | translate: { value: selectedFields.length } }}
-                    </div>
+                    <span class="all-caps-label">{{ 'file-attributes-csv-import.available' | translate: { value: parseResult?.meta?.fields.length } }}</span>
+                    <span class="all-caps-label">{{ 'file-attributes-csv-import.selected' | translate: { value: selectedFields.length } }}</span>
                 </div>
                 <div class="csv-header-pill-content">
-                    <div class="csv-header-pill" *ngFor="let field of parseResult?.meta?.fields">
+                    <div
+                        class="csv-header-pill"
+                        *ngFor="let field of parseResult?.meta?.fields"
+                        (mouseenter)="hoveredColumn = field"
+                        (mouseleave)="hoveredColumn = undefined"
+                    >
                         <div class="name">
                             {{ field }}
                         </div>
@@ -67,6 +68,14 @@
                         {{ 'file-attributes-csv-import.csv-column' | translate }}
                     </div>
                 </div>
+                <div class="csv-part-content">
+                    <div class="no-hovered-column" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
+                    <ng-container *ngFor="let row of parseResult?.data || []">
+                        <div *ngIf="row[hoveredColumn]">
+                            {{ row[hoveredColumn] }}
+                        </div>
+                    </ng-container>
+                </div>
             </div>
             <div class="right">
                 <div class="csv-part-header"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 11f79901c..765ef4047 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -1,4 +1,5 @@
 @import '../../../../../assets/styles/red-variables';
+@import '../../../../../assets/styles/red-mixins';
 
 .sub-header {
     display: flex;
@@ -48,6 +49,39 @@
         align-items: center;
         padding-left: 16px;
         padding-right: 16px;
+
+        > *:not(:last-child)::after {
+            content: '-';
+            margin: 0 4px;
+        }
+    }
+
+    .csv-part-content {
+        overflow: auto;
+        @include no-scroll-bar;
+        height: calc(100% - 51px);
+        font-size: 12px;
+
+        .no-hovered-column {
+            height: 100%;
+            margin: 0 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            color: $grey-7;
+            line-height: 15px;
+        }
+
+        > *:not(.no-hovered-column) {
+            height: 30px;
+            border-bottom: 1px solid $grey-4;
+            display: flex;
+            padding: 0 16px;
+            align-items: center;
+            @include line-clamp(1);
+            line-height: 30px;
+        }
     }
 
     .left {
@@ -56,15 +90,14 @@
 
         .csv-header-pill-content {
             overflow: auto;
-            padding-top: 7px;
-            padding-bottom: 7px;
+            padding: 4px 10px;
             background: $grey-2;
-            height: calc(100% - 65px);
+            height: calc(100% - 60px);
+            @include no-scroll-bar;
 
             .csv-header-pill {
                 height: 32px;
-                width: 325px;
-                margin: 3px 10px;
+                margin: 6px auto;
                 border-radius: 8px;
                 padding: 10px;
                 background: $white;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index f4b8dba65..2ac960f68 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -15,6 +15,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
     public parseResult: any;
     public encoding = 'UTF-8';
     public delimiter: string = undefined;
+    public hoveredColumn: string;
 
     selectedFields: any[] = [];
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 72c37c21d..213485478 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -39,23 +39,22 @@
 
                 <div class="attributes-actions-container">
                     <redaction-search-input [form]="searchForm" [placeholder]="'file-attributes-listing.search'"></redaction-search-input>
-                    <div class="actions">
-                        <input #fileInput (change)="importCSV($event.target['files'])" class="csv-input" type="file" accept=".csv" />
+                    <input #fileInput (change)="importCSV($event.target['files'])" class="csv-input" type="file" accept=".csv" />
 
-                        <redaction-circle-button
-                            (action)="fileInput.click()"
-                            tooltip="file-attributes-listing.upload-csv"
-                            tooltipPosition="above"
-                            icon="red:upload"
-                        ></redaction-circle-button>
+                    <redaction-circle-button
+                        (action)="fileInput.click()"
+                        tooltip="file-attributes-listing.upload-csv"
+                        tooltipPosition="above"
+                        icon="red:upload"
+                        type="dark-bg"
+                    ></redaction-circle-button>
 
-                        <redaction-icon-button
-                            icon="red:plus"
-                            (action)="openAddEditAttributeDialog($event)"
-                            text="file-attributes-listing.add-new"
-                            type="primary"
-                        ></redaction-icon-button>
-                    </div>
+                    <redaction-icon-button
+                        icon="red:plus"
+                        (action)="openAddEditAttributeDialog($event)"
+                        text="file-attributes-listing.add-new"
+                        type="primary"
+                    ></redaction-icon-button>
                 </div>
             </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 1938e2bba..b8cf414e0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -23,7 +23,7 @@ redaction-table-col-name::ng-deep {
             justify-content: flex-end;
 
             > *:not(:last-child) {
-                margin-right: 16px;
+                margin-right: 10px;
             }
         }
     }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index c2b8f63ad..6aa913e37 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -755,7 +755,8 @@
         "action": {
             "edit": "Edit attribute",
             "delete": "Delete attribute"
-        }
+        },
+        "upload-csv": "Upload File Attributes Configuration"
     },
     "confirm-delete-file-attribute": {
         "title": "Delete {{name}}",
@@ -1118,6 +1119,7 @@
         "total-rows": "{{rows}} rows in total",
         "available": "{{value}} available",
         "selected": "{{value}} selected",
-        "csv-column": "CSV Column"
+        "csv-column": "CSV Column",
+        "no-hovered-column": "Preview CSV column by hovering the entry."
     }
 }

From 28f052a23d511d41f1a71d2a50027723fdda9719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 17:44:09 +0300
Subject: [PATCH 2/7] Save attributes and base config

---
 ...ttributes-csv-import-dialog.component.html | 194 ++++++++++++++----
 ...ttributes-csv-import-dialog.component.scss | 124 ++++++++---
 ...-attributes-csv-import-dialog.component.ts | 138 +++++++++++--
 .../services/admin-dialog-service.service.ts  |   3 +-
 .../table-col-name.component.html             |   1 +
 .../table-col-name.component.scss             |   7 +
 .../table-col-name.component.ts               |   1 +
 apps/red-ui/src/assets/i18n/en.json           |  21 +-
 apps/red-ui/src/assets/styles/red-input.scss  |   3 +-
 9 files changed, 402 insertions(+), 90 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 298151c1d..c37f81b02 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -4,60 +4,79 @@
     <div class="dialog-content">
         <div class="sub-header">
             <div class="left">
-                <div class="info">
-                    {{ csvFile.name }}
-                </div>
+                <div class="info"><span translate="file-attributes-csv-import.file"> </span> {{ csvFile.name }}</div>
                 <div class="large-label">
                     {{ 'file-attributes-csv-import.total-rows' | translate: { rows: parseResult?.data?.length } }}
                 </div>
             </div>
             <div class="right">
-                <div class="red-input-group required w-250">
-                    <mat-form-field floatLabel="always">
-                        <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
-                        <mat-select>
-                            <mat-option *ngFor="let field of parseResult?.meta?.fields" [value]="field">
-                                {{ field }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
+                <form [formGroup]="baseConfigForm">
+                    <div class="red-input-group required w-250">
+                        <mat-form-field floatLabel="always">
+                            <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
+                            <mat-select formControlName="filenameMappingColumnHeaderName">
+                                <mat-option *ngFor="let field of parseResult?.meta?.fields" [value]="field">
+                                    {{ field }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
 
-                <div class="red-input-group required w-110">
-                    <label translate="file-attributes-csv-import.delimiter"></label>
-                    <input
-                        [(ngModel)]="delimiter"
-                        name="delimiter"
-                        type="text"
-                        [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
-                    />
-                </div>
+                    <div class="red-input-group required w-110">
+                        <label translate="file-attributes-csv-import.delimiter"></label>
+                        <input
+                            formControlName="delimiter"
+                            name="delimiter"
+                            type="text"
+                            [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
+                        />
+                    </div>
 
-                <div class="red-input-group required w-160">
-                    <label translate="file-attributes-csv-import.encoding"></label>
-                    <input [(ngModel)]="encoding" name="encoding" type="text" [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate" />
-                </div>
+                    <div class="red-input-group required w-160">
+                        <label translate="file-attributes-csv-import.encoding"></label>
+                        <input
+                            formControlName="encoding"
+                            name="encoding"
+                            type="text"
+                            [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
+                        />
+                    </div>
+                </form>
             </div>
         </div>
         <div class="csv-part">
             <div class="left">
                 <div class="csv-part-header">
-                    <span class="all-caps-label">{{ 'file-attributes-csv-import.available' | translate: { value: parseResult?.meta?.fields.length } }}</span>
-                    <span class="all-caps-label">{{ 'file-attributes-csv-import.selected' | translate: { value: selectedFields.length } }}</span>
+                    <div>
+                        <span class="all-caps-label">{{
+                            'file-attributes-csv-import.available' | translate: { value: parseResult?.meta?.fields.length }
+                        }}</span>
+                        <span class="all-caps-label">{{ 'file-attributes-csv-import.selected' | translate: { value: activeFields.length } }}</span>
+                    </div>
+                    <div class="quick-activation">
+                        <span class="all-caps-label primary pointer" (click)="activateAll()" translate="file-attributes-csv-import.quick-activation.all"></span>
+                        <span
+                            class="all-caps-label primary pointer"
+                            (click)="deactivateAll()"
+                            translate="file-attributes-csv-import.quick-activation.none"
+                        ></span>
+                    </div>
                 </div>
                 <div class="csv-header-pill-content">
                     <div
                         class="csv-header-pill"
-                        *ngFor="let field of parseResult?.meta?.fields"
-                        (mouseenter)="hoveredColumn = field"
+                        *ngFor="let field of parseResult?.fields"
+                        (mouseenter)="hoveredColumn = field.csvColumn"
                         (mouseleave)="hoveredColumn = undefined"
+                        (click)="toggleFieldActive(field)"
+                        [class.selected]="isActive(field)"
                     >
                         <div class="name">
-                            {{ field }}
+                            {{ field.csvColumn }}
                         </div>
                         <div class="secondary">
-                            <div class="entry-count small-label">{{ getEntries(field) }} entries</div>
-                            <div class="sample small-label">Sample: {{ getSample(field) }}</div>
+                            <div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
+                            <div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
                         </div>
                     </div>
                 </div>
@@ -77,21 +96,116 @@
                     </ng-container>
                 </div>
             </div>
-            <div class="right">
-                <div class="csv-part-header"></div>
-                <!--                {{ parseResult | json }}-->
+            <div class="left-container">
+                <div class="header-item">
+                    <div class="select-all-container">
+                        <div
+                            (click)="toggleSelectAll()"
+                            [class.active]="areAllFieldsSelected"
+                            class="select-oval always-visible"
+                            *ngIf="!areAllFieldsSelected && !areSomeFieldsSelected"
+                        ></div>
+                        <mat-icon
+                            *ngIf="areAllFieldsSelected"
+                            (click)="toggleSelectAll()"
+                            class="selection-icon active"
+                            svgIcon="red:radio-selected"
+                        ></mat-icon>
+                        <mat-icon
+                            *ngIf="areSomeFieldsSelected && !areAllFieldsSelected"
+                            (click)="toggleSelectAll()"
+                            class="selection-icon"
+                            svgIcon="red:radio-indeterminate"
+                        ></mat-icon>
+                    </div>
+                    <span class="all-caps-label">
+                        {{ 'file-attributes-csv-import.table-header.title' | translate: { length: activeFields.length } }}
+                    </span>
+                </div>
+
+                <div class="table-header" redactionSyncWidth="table-item">
+                    <div class="select-oval-placeholder"></div>
+
+                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name"></redaction-table-col-name>
+
+                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.type"></redaction-table-col-name>
+
+                    <redaction-table-col-name
+                        label="file-attributes-csv-import.table-col-names.read-only"
+                        class="flex-center"
+                        icon="red:read-only"
+                    ></redaction-table-col-name>
+
+                    <redaction-table-col-name
+                        label="file-attributes-csv-import.table-col-names.display"
+                        class="flex-center"
+                        icon="red:visibility"
+                    ></redaction-table-col-name>
+
+                    <div></div>
+                    <div class="scrollbar-placeholder"></div>
+                </div>
+
+                <cdk-virtual-scroll-viewport [itemSize]="50" redactionHasScrollbar>
+                    <!--      Table lines -->
+                    <div
+                        class="table-item"
+                        *cdkVirtualFor="let field of activeFields"
+                        (mouseenter)="hoveredColumn = field.csvColumn"
+                        (mouseleave)="hoveredColumn = undefined"
+                    >
+                        <div class="pr-0" (click)="toggleFieldSelected(field.csvColumn)">
+                            <div *ngIf="!isFieldSelected(field.csvColumn)" class="select-oval"></div>
+                            <mat-icon class="selection-icon active" *ngIf="isFieldSelected(field.csvColumn)" svgIcon="red:radio-selected"></mat-icon>
+                        </div>
+                        <div>{{ field.name }}</div>
+                        <div>
+                            <div class="red-input-group">
+                                <mat-form-field class="no-label">
+                                    <mat-select [(ngModel)]="field.type">
+                                        <mat-option *ngFor="let type of ['Text', 'Number', 'Date']" [value]="type">
+                                            {{ 'file-attributes-csv-import.types.' + type | translate }}
+                                        </mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+                        </div>
+                        <div class="center">
+                            <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
+                        </div>
+                        <div class="center"><mat-slide-toggle [(ngModel)]="field.display" color="primary"></mat-slide-toggle></div>
+                        <div class="actions-container">
+                            <div class="action-buttons">
+                                <!--                                <redaction-circle-button-->
+                                <!--                                    (action)="openAddEditUserDialog($event, field)"-->
+                                <!--                                    tooltip="user-listing.action.edit"-->
+                                <!--                                    type="dark-bg"-->
+                                <!--                                    icon="red:edit"-->
+                                <!--                                >-->
+                                <!--                                </redaction-circle-button>-->
+                                <!--                                <redaction-circle-button-->
+                                <!--                                    (action)="openDeleteUserDialog([field], $event)"-->
+                                <!--                                    tooltip="user-listing.action.delete"-->
+                                <!--                                    type="dark-bg"-->
+                                <!--                                    icon="red:trash"-->
+                                <!--                                    [disabled]="field.userId === userService.userId"-->
+                                <!--                                >-->
+                                <!--                                </redaction-circle-button>-->
+                            </div>
+                        </div>
+                        <div class="scrollbar-placeholder"></div>
+                    </div>
+                </cdk-virtual-scroll-viewport>
             </div>
         </div>
     </div>
 
     <div class="dialog-actions">
-        <button color="primary" mat-flat-button>
+        <button color="primary" mat-flat-button (click)="save()" [disabled]="baseConfigForm.invalid">
             {{ 'file-attributes-csv-import.save' | translate }}
         </button>
 
-        <button mat-flat-button>
-            {{ 'file-attributes-csv-import.cancel' | translate }}
-        </button>
+        <div class="all-caps-label cancel">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
     </div>
 
     <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 765ef4047..9c45e7ec2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -7,53 +7,67 @@
     margin-bottom: 25px;
 
     .left {
-        width: 375px;
         display: flex;
+        justify-content: center;
         flex-direction: column;
+        padding-left: 32px;
+        min-width: 376px;
+        box-sizing: border-box;
+        border-right: 1px solid $separator;
+
+        .info {
+            margin-bottom: 8px;
+
+            > span {
+                font-weight: 500;
+            }
+        }
 
         .large-label {
             font-weight: bold;
         }
     }
 
-    .right {
+    .right > form {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
+        padding-left: 16px;
 
         .red-input-group {
-            margin-left: 8px;
-            margin-right: 8px;
-            height: 60px;
+            margin: 0 8px;
         }
     }
 }
 
 .dialog-content {
-    padding-bottom: 0;
+    padding: 24px 0 0;
 }
 
 .csv-part {
-    margin-left: -32px;
-    margin-right: -32px;
     display: flex;
     max-height: calc(90vh - 251px);
 
     .csv-part-header {
         height: 50px;
+        box-sizing: border-box;
         background: $white;
-        border-top: 1px solid $grey-4;
-        border-bottom: 1px solid $grey-4;
+        border-top: 1px solid $separator;
+        border-bottom: 1px solid $separator;
         display: flex;
         align-items: center;
-        padding-left: 16px;
-        padding-right: 16px;
+        justify-content: space-between;
+        padding: 0 16px;
 
-        > *:not(:last-child)::after {
+        > :not(.quick-activation) > *:not(:last-child)::after {
             content: '-';
             margin: 0 4px;
         }
+
+        .quick-activation > :not(:last-child) {
+            margin-right: 10px;
+        }
     }
 
     .csv-part-content {
@@ -71,11 +85,12 @@
             text-align: center;
             color: $grey-7;
             line-height: 15px;
+            font-weight: 500;
         }
 
         > *:not(.no-hovered-column) {
             height: 30px;
-            border-bottom: 1px solid $grey-4;
+            border-bottom: 1px solid $separator;
             display: flex;
             padding: 0 16px;
             align-items: center;
@@ -84,7 +99,7 @@
         }
     }
 
-    .left {
+    > .left {
         width: 375px;
         background: $grey-2;
 
@@ -92,47 +107,92 @@
             overflow: auto;
             padding: 4px 10px;
             background: $grey-2;
-            height: calc(100% - 60px);
+            height: calc(100% - 58px);
             @include no-scroll-bar;
 
             .csv-header-pill {
-                height: 32px;
+                min-height: 32px;
                 margin: 6px auto;
                 border-radius: 8px;
                 padding: 10px;
                 background: $white;
-
+                cursor: pointer;
                 display: flex;
                 flex-direction: column;
 
-                .name {
-                }
                 .secondary {
                     display: flex;
                     justify-content: space-between;
+                    margin-top: 2px;
+
+                    .entry-count {
+                        white-space: nowrap;
+                        margin-right: 10px;
+                    }
 
                     .sample {
-                        max-width: 200px;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
+                        @include line-clamp(1);
                     }
                 }
+
+                &.selected {
+                    background-color: $primary;
+                    color: $white;
+                }
             }
         }
 
-        border-right: 1px solid $grey-4;
+        border-right: 1px solid $separator;
     }
 
-    .center {
-        width: 149px;
+    > .center {
+        width: 150px;
+        min-width: 150px;
         background: $grey-2;
-        border-right: 1px solid $grey-4;
+        border-right: 1px solid $separator;
     }
 
-    .right {
-        overflow: auto;
-        max-width: calc(90vw - 525px);
-        flex: 1 1 auto;
+    > .left-container {
+        width: 100%;
+
+        redaction-table-col-name::ng-deep {
+            > div {
+                padding: 0 13px 0 10px !important;
+            }
+        }
+
+        .header-item {
+            padding: 0 24px 0 10px;
+            box-shadow: none;
+            border-top: 1px solid $separator;
+        }
+
+        cdk-virtual-scroll-viewport {
+            height: calc(100% - 80px);
+
+            ::ng-deep.cdk-virtual-scroll-content-wrapper {
+                grid-template-columns: auto 2fr 150px auto auto auto 11px;
+
+                .table-item {
+                    > div {
+                        height: 50px;
+
+                        &:not(.scrollbar-placeholder) {
+                            padding-left: 10px;
+
+                            &.center {
+                                align-items: center;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.has-scrollbar:hover {
+                ::ng-deep.cdk-virtual-scroll-content-wrapper {
+                    grid-template-columns: auto 2fr 150px auto auto auto;
+                }
+            }
+        }
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 2ac960f68..2198f64fb 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -1,8 +1,23 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '../../../../state/app-state.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as Papa from 'papaparse';
+import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
+
+enum FieldType {
+    Text = 'Text',
+    Number = 'Number',
+    Date = 'Date'
+}
+
+interface Field {
+    csvColumn: string;
+    name: string;
+    type: FieldType;
+    readonly: boolean;
+    display: boolean;
+}
 
 @Component({
     selector: 'redaction-file-attributes-csv-import-dialog',
@@ -12,22 +27,28 @@ import * as Papa from 'papaparse';
 export class FileAttributesCsvImportDialogComponent implements OnInit {
     public csvFile: File;
     public ruleSetId: string;
-    public parseResult: any;
-    public encoding = 'UTF-8';
-    public delimiter: string = undefined;
+    public parseResult: { data: any[]; errors: any[]; meta: any; fields: Field[] };
     public hoveredColumn: string;
-
-    selectedFields: any[] = [];
+    public activeFields: Field[] = [];
+    public selectedFields: string[] = [];
+    public baseConfigForm: FormGroup;
 
     constructor(
         private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
+        private readonly _fileAttributesControllerService: FileAttributesControllerService,
         public dialogRef: MatDialogRef<FileAttributesCsvImportDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: { csv: File; ruleSetId: string }
     ) {
         this.csvFile = data.csv;
         this.ruleSetId = data.ruleSetId;
 
+        this.baseConfigForm = this._formBuilder.group({
+            filenameMappingColumnHeaderName: [undefined, Validators.required],
+            delimiter: [undefined, Validators.required],
+            encoding: ['UTF-8', Validators.required]
+        });
+
         this._readFile();
     }
 
@@ -37,24 +58,25 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         const reader = new FileReader();
         reader.addEventListener('load', async (event) => {
             const parsedCsv = <any>event.target.result;
-            this.parseResult = Papa.parse(parsedCsv, { header: true, delimiter: this.delimiter });
-            if (!this.delimiter) {
-                this.delimiter = this.parseResult.meta.delimiter;
+            this.parseResult = Papa.parse(parsedCsv, { header: true, delimiter: this.baseConfigForm.get('delimiter').value });
+            if (!this.baseConfigForm.get('delimiter').value) {
+                this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
             }
+            this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildField(field));
             console.log(this.parseResult);
         });
-        reader.readAsText(this.csvFile, this.encoding);
+        reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value);
     }
 
-    getSample(field: string) {
-        return this.parseResult?.data ? this.parseResult?.data[0][field] : '';
+    public getSample(csvColumn: string) {
+        return this.parseResult?.data ? this.parseResult?.data[0][csvColumn] : '';
     }
 
-    getEntries(field: any) {
+    public getEntries(csvColumn: string) {
         if (this.parseResult?.data) {
             let count = 0;
             for (const entry of this.parseResult.data) {
-                if (entry[field]) {
+                if (entry[csvColumn]) {
                     count++;
                 }
             }
@@ -63,4 +85,92 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
             return 0;
         }
     }
+
+    public isActive(field: Field): boolean {
+        return this.activeFields.indexOf(field) !== -1;
+    }
+
+    public toggleFieldActive(field: Field) {
+        if (!this.isActive(field)) {
+            this.activeFields = [...this.activeFields, field];
+        } else {
+            this.activeFields.splice(this.activeFields.indexOf(field), 1);
+            this.activeFields = [...this.activeFields];
+            if (this.isFieldSelected(field.csvColumn)) {
+                this.toggleFieldSelected(field.csvColumn);
+            }
+        }
+    }
+
+    private _buildField(csvColumn: string): Field {
+        return {
+            csvColumn,
+            name: csvColumn,
+            type: FieldType.Text,
+            readonly: false,
+            display: true
+        };
+    }
+
+    public activateAll() {
+        this.activeFields = [...this.parseResult.fields];
+    }
+
+    public deactivateAll() {
+        this.activeFields = [];
+        this.selectedFields = [];
+    }
+
+    public toggleFieldSelected(field: string) {
+        const idx = this.selectedFields.indexOf(field);
+        if (idx === -1) {
+            this.selectedFields.push(field);
+        } else {
+            this.selectedFields.splice(idx, 1);
+        }
+    }
+
+    public toggleSelectAll() {
+        if (this.areSomeFieldsSelected) {
+            this.selectedFields = [];
+        } else {
+            this.selectedFields = this.activeFields.map((field) => field.csvColumn);
+        }
+    }
+
+    public get areAllFieldsSelected() {
+        return this.activeFields.length !== 0 && this.selectedFields.length === this.activeFields.length;
+    }
+
+    public get areSomeFieldsSelected() {
+        return this.selectedFields.length > 0;
+    }
+
+    public isFieldSelected(field: string) {
+        return this.selectedFields.indexOf(field) !== -1;
+    }
+
+    public async save() {
+        const promises: Promise<FileAttributeConfig | FileAttributesConfig>[] = [
+            this._fileAttributesControllerService.addOrUpdateFileAttributesBaseConfig(this.baseConfigForm.getRawValue(), this.ruleSetId).toPromise()
+        ];
+
+        for (const field of this.activeFields) {
+            promises.push(
+                this._fileAttributesControllerService
+                    .setFileAttributesConfiguration(
+                        {
+                            csvColumnHeader: field.csvColumn,
+                            editable: !field.readonly,
+                            label: field.name,
+                            visible: field.display
+                        },
+                        this.ruleSetId
+                    )
+                    .toPromise()
+            );
+        }
+        await Promise.all(promises);
+        this.dialogRef.close(true);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts
index 9564a5657..db245ee60 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog-service.service.ts
@@ -127,8 +127,7 @@ export class AdminDialogService {
     public openImportFileAttributeCSVDialog(csv: File, ruleSetId: string, cb?: Function): MatDialogRef<FileAttributesCsvImportDialogComponent> {
         const ref = this._dialog.open(FileAttributesCsvImportDialogComponent, {
             ...largeDialogConfig,
-            data: { csv, ruleSetId },
-            autoFocus: true
+            data: { csv, ruleSetId }
         });
 
         ref.afterClosed().subscribe((result) => {
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
index 4c9ece356..e81c0fb02 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
@@ -1,4 +1,5 @@
 <div (click)="withSort && toggleSort.emit(column)" [class.pointer]="withSort" [ngClass]="class">
+    <mat-icon *ngIf="!!icon" [svgIcon]="icon"></mat-icon>
     <span [translate]="label" class="all-caps-label"></span>
     <div class="sort-arrows-container" *ngIf="withSort" [class.force-display]="activeSortingOption.column === column">
         <mat-icon *ngIf="activeSortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
index 0442793be..351794ed2 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
@@ -11,6 +11,13 @@
         width: 100%;
         line-height: 11px;
         padding: 0 24px;
+
+        > mat-icon {
+            width: 10px;
+            height: 10px;
+            margin-right: 6px;
+            opacity: 0.7;
+        }
     }
 
     .flex-end {
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts
index 291e92fa7..9e77b2ac5 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts
@@ -12,6 +12,7 @@ export class TableColNameComponent implements OnInit {
     @Input() public label: string;
     @Input() public withSort = false;
     @Input() public class: string;
+    @Input() public icon: string;
     @Output() public toggleSort = new EventEmitter<string>();
 
     constructor() {}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 6aa913e37..7c3774080 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1120,6 +1120,25 @@
         "available": "{{value}} available",
         "selected": "{{value}} selected",
         "csv-column": "CSV Column",
-        "no-hovered-column": "Preview CSV column by hovering the entry."
+        "no-hovered-column": "Preview CSV column by hovering the entry.",
+        "table-header": {
+            "title": "{{length}} file attributes"
+        },
+        "file": "File:",
+        "table-col-names": {
+            "name": "Name",
+            "type": "Type",
+            "read-only": "Read-Only",
+            "display": "Display"
+        },
+        "quick-activation": {
+            "all": "All",
+            "none": "None"
+        },
+        "types": {
+            "Text": "Free Text",
+            "Number": "Number",
+            "Date": "Date"
+        }
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index b3b202b3f..9e82d71ef 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -55,7 +55,8 @@ form {
         display: none;
     }
 
-    .mat-form-field-wrapper {
+    .mat-form-field-wrapper,
+    .mat-form-field-infix {
         padding-bottom: 0;
     }
 

From 1d63ff2d58a2ee3e72d866301847a0c2001a0e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 19:17:01 +0300
Subject: [PATCH 3/7] Change file attribute name

---
 .../dictionary-overview-screen.component.scss |  5 --
 ...ttributes-csv-import-dialog.component.html | 60 +++++++++++++------
 ...ttributes-csv-import-dialog.component.scss | 27 +++++++++
 ...-attributes-csv-import-dialog.component.ts | 11 +++-
 ...ile-attributes-listing-screen.component.ts |  7 ++-
 .../watermark/watermark-screen.component.scss |  5 --
 apps/red-ui/src/assets/i18n/en.json           |  6 ++
 apps/red-ui/src/assets/styles/red-input.scss  | 10 ++++
 apps/red-ui/src/assets/styles/red-tables.scss |  5 ++
 9 files changed, 104 insertions(+), 32 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
index ebf2d83c1..41a68ad89 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
@@ -130,8 +130,3 @@
         color: $grey-7;
     }
 }
-
-.w-200 {
-    width: 200px;
-    max-width: 200px;
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index c37f81b02..0e42db679 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -126,7 +126,7 @@
                 <div class="table-header" redactionSyncWidth="table-item">
                     <div class="select-oval-placeholder"></div>
 
-                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name"></redaction-table-col-name>
+                    <redaction-table-col-name label="file-attributes-csv-import.table-col-names.name" class="name"></redaction-table-col-name>
 
                     <redaction-table-col-name label="file-attributes-csv-import.table-col-names.type"></redaction-table-col-name>
 
@@ -158,7 +158,41 @@
                             <div *ngIf="!isFieldSelected(field.csvColumn)" class="select-oval"></div>
                             <mat-icon class="selection-icon active" *ngIf="isFieldSelected(field.csvColumn)" svgIcon="red:radio-selected"></mat-icon>
                         </div>
-                        <div>{{ field.name }}</div>
+                        <div class="name" [class.editing]="field.editingName">
+                            <div *ngIf="!field.editingName">
+                                {{ field.name }}
+                            </div>
+                            <form (submit)="field.editingName = false; field.name = field.temporaryName" *ngIf="field.editingName">
+                                <div class="red-input-group w-200">
+                                    <input name="name" [(ngModel)]="field.temporaryName" />
+                                </div>
+                            </form>
+                            <redaction-circle-button
+                                class="edit-name-button"
+                                *ngIf="!field.editingName"
+                                (action)="field.editingName = true"
+                                tooltip="file-attributes-csv-import.action.edit-name"
+                                type="dark-bg"
+                                icon="red:edit"
+                            >
+                            </redaction-circle-button>
+                            <ng-container *ngIf="field.editingName">
+                                <redaction-circle-button
+                                    (action)="field.editingName = false; field.name = field.temporaryName"
+                                    tooltip="file-attributes-csv-import.action.save-name"
+                                    type="dark-bg"
+                                    icon="red:check-alt"
+                                >
+                                </redaction-circle-button>
+                                <redaction-circle-button
+                                    (action)="field.editingName = false; field.temporaryName = field.name"
+                                    tooltip="file-attributes-csv-import.action.cancel-edit-name"
+                                    type="dark-bg"
+                                    icon="red:close"
+                                >
+                                </redaction-circle-button>
+                            </ng-container>
+                        </div>
                         <div>
                             <div class="red-input-group">
                                 <mat-form-field class="no-label">
@@ -176,21 +210,13 @@
                         <div class="center"><mat-slide-toggle [(ngModel)]="field.display" color="primary"></mat-slide-toggle></div>
                         <div class="actions-container">
                             <div class="action-buttons">
-                                <!--                                <redaction-circle-button-->
-                                <!--                                    (action)="openAddEditUserDialog($event, field)"-->
-                                <!--                                    tooltip="user-listing.action.edit"-->
-                                <!--                                    type="dark-bg"-->
-                                <!--                                    icon="red:edit"-->
-                                <!--                                >-->
-                                <!--                                </redaction-circle-button>-->
-                                <!--                                <redaction-circle-button-->
-                                <!--                                    (action)="openDeleteUserDialog([field], $event)"-->
-                                <!--                                    tooltip="user-listing.action.delete"-->
-                                <!--                                    type="dark-bg"-->
-                                <!--                                    icon="red:trash"-->
-                                <!--                                    [disabled]="field.userId === userService.userId"-->
-                                <!--                                >-->
-                                <!--                                </redaction-circle-button>-->
+                                <redaction-circle-button
+                                    (action)="toggleFieldActive(field)"
+                                    tooltip="file-attributes-csv-import.action.remove"
+                                    type="dark-bg"
+                                    icon="red:trash"
+                                >
+                                </redaction-circle-button>
                             </div>
                         </div>
                         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 9c45e7ec2..7bd4a3e11 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -158,6 +158,10 @@
         redaction-table-col-name::ng-deep {
             > div {
                 padding: 0 13px 0 10px !important;
+
+                &.name {
+                    padding-left: 22px !important;
+                }
             }
         }
 
@@ -184,6 +188,29 @@
                                 align-items: center;
                             }
                         }
+
+                        &.name {
+                            flex-direction: row;
+                            align-items: center;
+                            justify-content: flex-start;
+
+                            &:not(.editing) {
+                                padding-left: 22px;
+                            }
+
+                            .edit-name-button {
+                                display: none;
+                            }
+
+                            redaction-circle-button:first-of-type {
+                                margin-left: 7px;
+                                margin-right: 2px;
+                            }
+                        }
+                    }
+
+                    &:hover .name .edit-name-button {
+                        display: block;
                     }
                 }
             }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 2198f64fb..2c8403830 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -17,6 +17,8 @@ interface Field {
     type: FieldType;
     readonly: boolean;
     display: boolean;
+    editingName?: boolean;
+    temporaryName?: string;
 }
 
 @Component({
@@ -62,7 +64,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
             if (!this.baseConfigForm.get('delimiter').value) {
                 this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
             }
-            this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildField(field));
+            this.parseResult.fields = this.parseResult.meta.fields.map((field) => this._buildAttribute(field));
             console.log(this.parseResult);
         });
         reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value);
@@ -102,11 +104,14 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         }
     }
 
-    private _buildField(csvColumn: string): Field {
+    private _buildAttribute(csvColumn: string): Field {
+        const sample = this.getSample(csvColumn);
+        const isNumber = sample && !isNaN(sample);
         return {
             csvColumn,
             name: csvColumn,
-            type: FieldType.Text,
+            temporaryName: csvColumn,
+            type: isNumber ? FieldType.Number : FieldType.Text,
             readonly: false,
             display: true
         };
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index b49d1c032..d257cb335 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { PermissionsService } from '../../../../services/permissions.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
@@ -20,6 +20,8 @@ export class FileAttributesListingScreenComponent implements OnInit {
     public selectedFileAttributeIds: string[] = [];
     public viewReady = false;
 
+    @ViewChild('fileInput') private _fileInput: ElementRef;
+
     constructor(
         public readonly permissionsService: PermissionsService,
         public readonly _sortingService: SortingService,
@@ -118,8 +120,9 @@ export class FileAttributesListingScreenComponent implements OnInit {
         return this.selectedFileAttributeIds.indexOf(attribute.id) !== -1;
     }
 
-    importCSV(files: FileList | File[]) {
+    public importCSV(files: FileList | File[]) {
         const csvFile = files[0];
+        this._fileInput.nativeElement.value = null;
 
         this._dialogService.openImportFileAttributeCSVDialog(csvFile, this._appStateService.activeRuleSetId, async () => {
             await this._loadData();
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
index 908eb50b2..e046b3aef 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
@@ -94,11 +94,6 @@
     }
 }
 
-.w-150 {
-    max-width: 150px;
-    width: 150px;
-}
-
 .mb-5 {
     margin-bottom: 5px;
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 7c3774080..c62f71eb1 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1139,6 +1139,12 @@
             "Text": "Free Text",
             "Number": "Number",
             "Date": "Date"
+        },
+        "action": {
+            "edit-name": "Edit Name",
+            "save-name": "Save",
+            "cancel-edit-name": "Cancel",
+            "remove": "Remove"
         }
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index 9e82d71ef..7090e0760 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -222,11 +222,21 @@ form {
         max-width: 110px;
     }
 
+    &.w-150 {
+        max-width: 150px;
+        width: 150px;
+    }
+
     &.w-160 {
         width: 160px;
         max-width: 160px;
     }
 
+    &.w-200 {
+        width: 200px;
+        max-width: 200px;
+    }
+
     &.w-250 {
         width: 250px;
         max-width: 250px;
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 34da2ed36..62089f254 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -91,6 +91,11 @@ cdk-virtual-scroll-viewport {
                 }
             }
 
+            input,
+            mat-select {
+                margin-top: 0;
+            }
+
             &:hover {
                 > div {
                     background-color: #f9fafb;

From 4e90440d4d048ea3ea797059006d0b84f50d0079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 19:39:27 +0300
Subject: [PATCH 4/7] Renamed left-container to content-container

---
 .../downloads-list-screen.component.html      |  2 +-
 .../downloads-list-screen.component.scss      |  2 +-
 .../screens/audit/audit-screen.component.html |  2 +-
 .../screens/audit/audit-screen.component.scss |  2 +-
 .../default-colors-screen.component.html      |  2 +-
 .../default-colors-screen.component.scss      |  2 +-
 .../dictionary-listing-screen.component.html  |  2 +-
 .../dictionary-listing-screen.component.scss  |  2 +-
 .../dictionary-overview-screen.component.html |  2 +-
 .../dictionary-overview-screen.component.scss |  2 +-
 .../digital-signature-screen.component.html   |  4 +--
 .../digital-signature-screen.component.scss   |  4 +--
 ...ttributes-csv-import-dialog.component.html |  2 +-
 ...ttributes-csv-import-dialog.component.scss |  2 +-
 ...e-attributes-listing-screen.component.html |  2 +-
 ...e-attributes-listing-screen.component.scss |  2 +-
 .../license-information-screen.component.html |  2 +-
 .../license-information-screen.component.scss |  2 +-
 .../rule-sets-listing-screen.component.html   |  2 +-
 .../rule-sets-listing-screen.component.scss   |  2 +-
 .../smtp-config-screen.component.html         |  2 +-
 .../smtp-config-screen.component.scss         |  2 +-
 .../user-listing-screen.component.html        |  2 +-
 .../user-listing-screen.component.scss        |  2 +-
 .../watermark/watermark-screen.component.html |  2 +-
 .../watermark/watermark-screen.component.scss |  2 +-
 .../file-preview-screen.component.html        | 29 +++++++++----------
 .../file-preview-screen.component.scss        |  2 +-
 .../project-listing-screen.component.html     |  2 +-
 .../project-listing-screen.component.scss     |  2 +-
 .../project-overview-screen.component.html    |  4 +--
 .../project-overview-screen.component.scss    |  2 +-
 .../src/assets/styles/red-page-layout.scss    |  2 +-
 33 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index a5447c1df..2c7929dc1 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -6,7 +6,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <span class="all-caps-label">
                     {{ 'downloads-list.table-header.title' | translate: { length: fileDownloadService.downloads.length } }}
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
index dc3cb572b..f37816eb9 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
@@ -1,4 +1,4 @@
-.left-container {
+.content-container {
     width: 100vw;
 
     cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index fe6f31a46..93aff27aa 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -14,7 +14,7 @@
         </div>
     </div>
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <span class="all-caps-label">
                     {{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
index d0c85b8cf..f67c74342 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
@@ -1,4 +1,4 @@
-.left-container {
+.content-container {
     width: 100vw;
 
     .header-item {
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index f2eecf50f..dfcbf457f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -12,7 +12,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <span class="all-caps-label">
                     {{ 'default-colors-screen.table-header.title' | translate: { length: colors.length } }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
index caf00513b..2379ca3d7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
@@ -1,4 +1,4 @@
-.left-container {
+.content-container {
     width: 100vw;
 
     cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 695d1740e..52aad4807 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -12,7 +12,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div *ngIf="dictionaries.length === 0" class="empty-state">
                 <mat-icon svgIcon="red:dictionary"></mat-icon>
                 <div class="heading-l" translate="dictionary-listing.no-data.title"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
index 99b012114..ecc1ef86c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
@@ -21,7 +21,7 @@ redaction-table-col-name::ng-deep {
     }
 }
 
-.left-container {
+.content-container {
     width: calc(100vw - 353px);
 
     cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
index dc0f181d7..f1eda64f4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@@ -51,7 +51,7 @@
     </div>
 
     <div class="flex red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="actions-bar">
                 <div class="red-input-group w-450 mr-32">
                     <input
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
index 41a68ad89..34d713eec 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
@@ -19,7 +19,7 @@
     }
 }
 
-.left-container {
+.content-container {
     width: calc(100vw - 353px);
     padding: 15px;
     @include inset-shadow;
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 7260d8bf5..2b1157479 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -15,8 +15,8 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
-            <div class="left-container-content">
+        <div class="content-container">
+            <div class="content-container-content">
                 <form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm">
                     <input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" />
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
index 0234418a4..70c529036 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
@@ -1,11 +1,11 @@
 @import '../../../../../assets/styles/red-mixins';
 @import '../../../../../assets/styles/red-variables';
 
-.left-container {
+.content-container {
     width: 100vw;
     @include inset-shadow;
 
-    .left-container-content {
+    .content-container-content {
         margin: 20px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 0e42db679..58c67ce1e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -96,7 +96,7 @@
                     </ng-container>
                 </div>
             </div>
-            <div class="left-container">
+            <div class="content-container">
                 <div class="header-item">
                     <div class="select-all-container">
                         <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 7bd4a3e11..4018fe05b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -152,7 +152,7 @@
         border-right: 1px solid $separator;
     }
 
-    > .left-container {
+    > .content-container {
         width: 100%;
 
         redaction-table-col-name::ng-deep {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 213485478..2ceed9c98 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -10,7 +10,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <div class="select-all-container">
                     <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index b8cf414e0..54a860447 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -13,7 +13,7 @@ redaction-table-col-name::ng-deep {
     }
 }
 
-.left-container {
+.content-container {
     width: 100vw;
 
     .header-item {
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
index d1122b62e..c940ccbc6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@@ -16,7 +16,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="grid-container">
                 <div class="row">
                     <div translate="license-info-screen.backend-version"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
index 4e08ae65d..afa5c1d69 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../assets/styles/red-mixins';
 @import '../../../../../assets/styles/red-variables';
 
-.left-container {
+.content-container {
     width: 100vw;
     @include inset-shadow;
     overflow: auto;
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
index d61ce8d6e..dbf71c054 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@@ -25,7 +25,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <div class="select-all-container">
                     <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
index 9eba988fc..fbddcbde4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
@@ -11,7 +11,7 @@ redaction-table-col-name::ng-deep {
     }
 }
 
-.left-container {
+.content-container {
     width: 100vw;
 
     cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
index 2d5775a1f..710f9a660 100644
--- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
@@ -15,7 +15,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="overlay-shadow"></div>
             <div class="dialog">
                 <div class="dialog-header">
diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss
index 3447b574d..5e8fac9f7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../assets/styles/red-variables';
 @import '../../../../../assets/styles/red-mixins';
 
-.left-container {
+.content-container {
     width: 100vw;
     background-color: $grey-2;
     display: flex;
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 3b20c9a98..7db7f95d2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -23,7 +23,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container" [class.extended]="collapsedDetails">
+        <div class="content-container" [class.extended]="collapsedDetails">
             <div class="header-item">
                 <div class="select-all-container">
                     <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index d1014fc34..31f73c518 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -1,4 +1,4 @@
-.left-container {
+.content-container {
     width: calc(100vw - 353px);
 
     .header-item {
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
index d4c0ca1ff..cde10d956 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@@ -10,7 +10,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="overlay-shadow"></div>
             <div #viewer class="viewer"></div>
             <div class="changes-box" *ngIf="changed && permissionsService.isAdmin()">
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
index e046b3aef..ff31b223f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
@@ -9,7 +9,7 @@
     flex-direction: row-reverse;
 }
 
-.left-container {
+.content-container {
     width: calc(100vw - 353px);
 
     .viewer {
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
index 3efa6f1c4..5adc3ea96 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
@@ -30,27 +30,25 @@
         </div>
 
         <div class="page-title">
-            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill"
-                  translate="readonly-pill"></span>
+            <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>
         </div>
 
         <div *ngIf="viewReady" class="flex-1 actions-container">
             <ng-container *ngIf="!appStateService.activeFile.isExcluded">
                 <redaction-status-bar
                     [config]="[
-                    {
-                        length: 1,
-                        color: appStateService.activeFile.status
-                    }
-                ]"
+                        {
+                            length: 1,
+                            color: appStateService.activeFile.status
+                        }
+                    ]"
                     [small]="true"
                 >
                 </redaction-status-bar>
                 <div class="all-caps-label mr-16 ml-8">
                     {{ appStateService.activeFile.status | translate }}
-                    <span
-                        *ngIf="appStateService.activeFile.status === 'UNDER_REVIEW' || appStateService.activeFile.status === 'UNDER_APPROVAL'"
-                    >{{ 'by' | translate }}:</span
+                    <span *ngIf="appStateService.activeFile.status === 'UNDER_REVIEW' || appStateService.activeFile.status === 'UNDER_APPROVAL'"
+                        >{{ 'by' | translate }}:</span
                     >
                 </div>
 
@@ -62,7 +60,9 @@
                     ></redaction-initials-avatar>
                     <div
                         (click)="editingReviewer = true"
-                        *ngIf="!editingReviewer && !appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)"
+                        *ngIf="
+                            !editingReviewer && !appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)
+                        "
                         class="assign-reviewer pointer"
                         translate="file-preview.assign-reviewer"
                     ></div>
@@ -190,7 +190,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="overlay-shadow"></div>
             <redaction-pdf-viewer
                 (keyUp)="handleKeyEvent($event)"
@@ -208,10 +208,7 @@
         </div>
 
         <div class="right-container">
-            <redaction-disabled-for-redaction
-                *ngIf="viewReady && appStateService.activeFile.isExcluded"
-            >
-            </redaction-disabled-for-redaction>
+            <redaction-disabled-for-redaction *ngIf="viewReady && appStateService.activeFile.isExcluded"> </redaction-disabled-for-redaction>
 
             <redaction-document-info
                 *ngIf="viewReady && viewDocumentInfo"
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
index a2206297a..e500c3517 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
@@ -20,7 +20,7 @@
     min-width: fit-content;
 }
 
-.left-container {
+.content-container {
     position: relative;
     width: calc(100vw - 350px);
 }
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
index 7d0bd5174..781b11cdb 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
@@ -45,7 +45,7 @@
     </div>
 
     <div class="red-content-inner">
-        <div class="left-container">
+        <div class="content-container">
             <div class="header-item">
                 <span class="all-caps-label">
                     {{ 'project-listing.table-header.title' | translate: { length: displayedProjects.length || 0 } }}
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
index d9b0fe708..5f0223e31 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../../assets/styles/red-mixins';
 @import '../../../../../assets/styles/red-variables';
 
-.left-container {
+.content-container {
     cdk-virtual-scroll-viewport {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
             grid-template-columns: 2fr 1fr 1fr auto 11px;
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
index 810915b03..8a66a3fc2 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
@@ -82,7 +82,7 @@
         </div>
     </div>
     <div class="red-content-inner">
-        <div class="left-container" [class.extended]="collapsedDetails">
+        <div class="content-container" [class.extended]="collapsedDetails">
             <div *ngIf="!appStateService.activeProject?.hasFiles" class="empty-state">
                 <mat-icon svgIcon="red:document"></mat-icon>
                 <div class="heading-l" translate="project-overview.no-data.title"></div>
@@ -175,7 +175,7 @@
                         [class.pointer]="permissionsService.canOpenFile(fileStatus)"
                         [routerLink]="fileLink(fileStatus)"
                         class="table-item"
-                        [class.disabled]='fileStatus.isExcluded'
+                        [class.disabled]="fileStatus.isExcluded"
                     >
                         <div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
                             <div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
index 5dbd733dc..dd6c59430 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss
@@ -72,7 +72,7 @@ cdk-virtual-scroll-viewport {
     }
 }
 
-.left-container {
+.content-container {
     width: calc(100vw - 375px);
 }
 
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 9d8de2063..a97309330 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -80,7 +80,7 @@ body {
     z-index: 1;
     transition: height ease-in-out 0.2s;
 
-    .left-container {
+    .content-container {
         .overlay-shadow {
             @include inset-shadow;
             position: fixed;

From 272c059e659aa2f630135aa950c8dfaae3bed78c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 19:57:38 +0300
Subject: [PATCH 5/7] Fixed some virtual scroll issues

---
 ...e-attributes-csv-import-dialog.component.html |  2 +-
 ...ile-attributes-csv-import-dialog.component.ts | 16 +++++++++++++---
 .../circle-button/circle-button.component.html   |  4 ++--
 .../circle-button/circle-button.component.ts     |  5 ++++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 58c67ce1e..7cbe8c928 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -231,7 +231,7 @@
             {{ 'file-attributes-csv-import.save' | translate }}
         </button>
 
-        <div class="all-caps-label cancel">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
+        <div class="all-caps-label cancel" (click)="dialogRef.close()">{{ 'file-attributes-csv-import.cancel' | translate }}</div>
     </div>
 
     <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 2c8403830..34939fa72 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -1,9 +1,10 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '../../../../state/app-state.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as Papa from 'papaparse';
 import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 enum FieldType {
     Text = 'Text',
@@ -35,6 +36,8 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
     public selectedFields: string[] = [];
     public baseConfigForm: FormGroup;
 
+    @ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
+
     constructor(
         private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
@@ -54,13 +57,20 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         this._readFile();
     }
 
-    ngOnInit(): void {}
+    ngOnInit(): void {
+        setTimeout(() => {
+            this.cdkVirtualScrollViewport.checkViewportSize();
+        }, 500);
+    }
 
     private _readFile() {
         const reader = new FileReader();
         reader.addEventListener('load', async (event) => {
             const parsedCsv = <any>event.target.result;
-            this.parseResult = Papa.parse(parsedCsv, { header: true, delimiter: this.baseConfigForm.get('delimiter').value });
+            this.parseResult = Papa.parse(parsedCsv, {
+                header: true,
+                delimiter: this.baseConfigForm.get('delimiter').value
+            });
             if (!this.baseConfigForm.get('delimiter').value) {
                 this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
             }
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
index 9ae2ab412..851878fd7 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
@@ -1,6 +1,6 @@
-<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate">
+<div #matTooltip="matTooltip" [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate">
     <button
-        (click)="performAction($event)"
+        (click)="matTooltip.hide(0); performAction($event)"
         [class.dark-bg]="type === 'dark-bg'"
         [class.primary]="type === 'primary'"
         [class.warn]="type === 'warn'"
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
index cd9c3938e..5bfe2c1df 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
@@ -23,7 +23,10 @@ export class CircleButtonComponent implements OnInit {
 
     performAction($event: any) {
         if (!this.disabled) {
-            this.action.emit($event);
+            // Timeout to allow tooltip to disappear first
+            setTimeout(() => {
+                this.action.emit($event);
+            }, 0);
         }
     }
 }

From a64a2a5b093d40b54826d985c8e79eab6a6f069e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 20:23:59 +0300
Subject: [PATCH 6/7] Remove selected

---
 .../file-attributes-csv-import-dialog.component.html   | 10 ++++++++++
 .../file-attributes-csv-import-dialog.component.scss   |  4 ++++
 .../file-attributes-csv-import-dialog.component.ts     |  5 +++++
 apps/red-ui/src/assets/i18n/en.json                    |  5 ++++-
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 7cbe8c928..f6168e147 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -121,6 +121,16 @@
                     <span class="all-caps-label">
                         {{ 'file-attributes-csv-import.table-header.title' | translate: { length: activeFields.length } }}
                     </span>
+
+                    <ng-container *ngIf="areSomeFieldsSelected">
+                        <redaction-circle-button
+                            (action)="deactivateSelection()"
+                            tooltip="file-attributes-csv-import.table-header.actions.remove-selected"
+                            type="dark-bg"
+                            icon="red:trash"
+                        >
+                        </redaction-circle-button>
+                    </ng-container>
                 </div>
 
                 <div class="table-header" redactionSyncWidth="table-item">
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 4018fe05b..b420b6ef3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -169,6 +169,10 @@
             padding: 0 24px 0 10px;
             box-shadow: none;
             border-top: 1px solid $separator;
+
+            .all-caps-label {
+                margin-right: 10px;
+            }
         }
 
         cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 34939fa72..0502a37a2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -165,6 +165,11 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         return this.selectedFields.indexOf(field) !== -1;
     }
 
+    public deactivateSelection() {
+        this.activeFields = [...this.activeFields.filter((field) => !this.isFieldSelected(field.csvColumn))];
+        this.selectedFields = [];
+    }
+
     public async save() {
         const promises: Promise<FileAttributeConfig | FileAttributesConfig>[] = [
             this._fileAttributesControllerService.addOrUpdateFileAttributesBaseConfig(this.baseConfigForm.getRawValue(), this.ruleSetId).toPromise()
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index c62f71eb1..92ff0c8e5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1122,7 +1122,10 @@
         "csv-column": "CSV Column",
         "no-hovered-column": "Preview CSV column by hovering the entry.",
         "table-header": {
-            "title": "{{length}} file attributes"
+            "title": "{{length}} file attributes",
+            "actions": {
+                "remove-selected": "Remove Selected"
+            }
         },
         "file": "File:",
         "table-col-names": {

From a369866e8c55c3607a93c447f2ad62222aac4666 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 8 Apr 2021 20:26:03 +0300
Subject: [PATCH 7/7] Rebase fix

---
 .../components/user-profile/user-profile-screen.component.html  | 2 +-
 .../components/user-profile/user-profile-screen.component.scss  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
index ecd08b43d..298361084 100644
--- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
+++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
@@ -1,5 +1,5 @@
 <section class="red-content-inner">
-    <div class="left-container full-height">
+    <div class="content-container full-height">
         <div class="overlay-shadow"></div>
         <div class="dialog">
             <div class="dialog-header">
diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss
index b0efc79c6..ea43e6f7f 100644
--- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss
+++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss
@@ -1,6 +1,6 @@
 @import '../../../assets/styles/red-mixins';
 
-.left-container {
+.content-container {
     background-color: $grey-2;
     justify-content: center;
     @include scroll-bar;