From 203dc488f8308fc0d8702f2fb45200e6d0338238 Mon Sep 17 00:00:00 2001
From: arditdomi <32884230+arditdomi@users.noreply.github.com>
Date: Wed, 20 Mar 2019 01:13:43 +0000
Subject: [PATCH] [ADF-4199] Fix permission manager UI (#4460)

* [ADF-4199] Fix permission manager UI

* Update permission-list.component.scss
---
 .../permission-list.component.html            | 15 +++----
 .../permission-list.component.scss            | 41 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/lib/content-services/permission-manager/components/permission-list/permission-list.component.html b/lib/content-services/permission-manager/components/permission-list/permission-list.component.html
index 759dc502cb..ca4a8b8352 100644
--- a/lib/content-services/permission-manager/components/permission-list/permission-list.component.html
+++ b/lib/content-services/permission-manager/components/permission-list/permission-list.component.html
@@ -12,10 +12,10 @@
 
     <adf-datatable [rows]="permissionList" class="adf-datatable-permission" *ngIf="permissionList && permissionList.length">
         <data-columns>
-            <data-column key="icon" type="icon" [sortable]="false">
+            <data-column [class] = "'adf-key-icon'" key="icon" type="icon" [sortable]="false">
             </data-column>
-            <data-column title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.AUTHORITY_ID' | translate}}" key="authorityId"></data-column>
-            <data-column title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE' | translate}}" key="name">
+            <data-column [class]= "'adf-authorityId-label adf-ellipsis-cell'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.AUTHORITY_ID' | translate}}" key="authorityId"></data-column>
+            <data-column [class]="'adf-role-label'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE' | translate}}" key="name">
                 <ng-template let-entry="$implicit">
                     <mat-form-field *ngIf="!entry.row.getValue('isInherited') else show_only_label">
                         <mat-select id="adf-select-role-permission"
@@ -32,15 +32,16 @@
                       </ng-template>
                 </ng-template>
             </data-column>
-            <data-column title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}" key="isInherited">
+            <data-column [class]="'adf-permission-label'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}" key="isInherited">
                 <ng-template let-entry="$implicit">
                     <mat-chip-list>
-                        <mat-chip *ngIf="!!entry.data.getValue(entry.row, entry.col) else locally_set_chip"
+                        <mat-chip [class]="'mat-chip mat-primary mat-standard-chip mat-chip-selected adf-inherited-label '"
+                                  *ngIf="!!entry.data.getValue(entry.row, entry.col) else locally_set_chip"
                                 id="adf-permission-inherited-label"
                                 color="primary" selected="true">{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}</mat-chip>
                     </mat-chip-list>
                     <ng-template #locally_set_chip>
-                            <mat-chip-list>
+                            <mat-chip-list [class] = "'adf-locallyset-label'">
                                     <mat-chip id="adf-permission-locallyset-label"
                                               color="accent" selected="true">
                                               {{'PERMISSION_MANAGER.PERMISSION_DISPLAY.LOCALLY_SET' | translate}}
@@ -49,7 +50,7 @@
                     </ng-template>
                 </ng-template>
             </data-column>
-            <data-column key="delete">
+            <data-column [class]="'adf-delete-permission'" key="delete">
             <ng-template let-entry="$implicit">
                 <button *ngIf="!entry.row.getValue('isInherited')" mat-icon-button color="primary" (click)="removePermission(entry.row.obj)" data-automation-id="adf-delete-permission-button">
                     <mat-icon>highlight_off</mat-icon>
diff --git a/lib/content-services/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/permission-manager/components/permission-list/permission-list.component.scss
index bbc2eb9655..07c70e94b5 100644
--- a/lib/content-services/permission-manager/components/permission-list/permission-list.component.scss
+++ b/lib/content-services/permission-manager/components/permission-list/permission-list.component.scss
@@ -2,6 +2,34 @@
 
     .adf {
 
+        &-permission-label {
+            max-width: 130px;
+            min-width: 100px;
+            margin-left: 50px;
+        }
+
+        &-delete-permission {
+            max-width: 50px;
+        }
+
+        &-authorityId-label {
+            min-width: 100px;
+        }
+
+        &-key-icon {
+            max-width: 50px;
+        }
+
+        &-role-label {
+            max-width: 100px;
+        }
+
+        &-ellipsis-cell {
+            position: sticky;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         &-display-permission-container {
             display: flex;
             justify-content: space-around;
@@ -9,7 +37,18 @@
 
         &-datatable-permission {
             display: flex;
-            flex-basis: 38%;
+            min-width: 450px;
+            width: 70%;
+        }
+
+        &-locallyset-label {
+           padding: 4px;
+        }
+
+        &-inherited-label {
+            width: 92.13px;
+            justify-content: center;
         }
     }
+
 }