From b28fc6f955f5e956841bce24fedcf6b59555f0f1 Mon Sep 17 00:00:00 2001
From: Dragos <cojocaru.dragos@gmail.com>
Date: Tue, 1 Jun 2021 11:21:30 +0300
Subject: [PATCH] cosmetic changes

---
 .../account-editor.component.ts               | 10 ++--
 app/src/app/account/account.component.html    |  2 +-
 .../custom-image-editor.component.ts          | 12 ++++-
 .../app/catalog/helpers/catalog.service.ts    |  2 +-
 app/src/app/security/security.component.html  | 48 +++++++++----------
 app/src/app/security/security.component.scss  |  5 ++
 6 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/app/src/app/account/account-editor/account-editor.component.ts b/app/src/app/account/account-editor/account-editor.component.ts
index 656e8ea..981d9a4 100644
--- a/app/src/app/account/account-editor/account-editor.component.ts
+++ b/app/src/app/account/account-editor/account-editor.component.ts
@@ -50,11 +50,11 @@ export class AccountEditorComponent implements OnInit
         firstName: [userInfo.firstName],
         lastName: [userInfo.lastName],
         companyName: [userInfo.companyName],
-        address: [userInfo.address],
-        postalCode: [userInfo.postalCode],
-        city: [userInfo.city],
-        state: [userInfo.state],
-        country: [userInfo.country],
+        // address: [userInfo.address],
+        // postalCode: [userInfo.postalCode],
+        // city: [userInfo.city],
+        // state: [userInfo.state],
+        // country: [userInfo.country],
         email: [userInfo.email],
         phone: [userInfo.phone],
         cns: [userInfo.triton_cns_enabled]
diff --git a/app/src/app/account/account.component.html b/app/src/app/account/account.component.html
index 9545658..4bf3795 100644
--- a/app/src/app/account/account.component.html
+++ b/app/src/app/account/account.component.html
@@ -53,7 +53,7 @@
 
                 <button class="btn btn-sm btn-link text-danger" tooltip="{{ 'account.removeKey' | translate }}"
                         (click)="deleteSshKey(userKey.name)">
-                  <fa-icon icon="trash"></fa-icon>
+                  <fa-icon icon="times"></fa-icon>
                 </button>
               </li>
             </ol>
diff --git a/app/src/app/catalog/custom-image-editor/custom-image-editor.component.ts b/app/src/app/catalog/custom-image-editor/custom-image-editor.component.ts
index 8041db3..aaa798a 100644
--- a/app/src/app/catalog/custom-image-editor/custom-image-editor.component.ts
+++ b/app/src/app/catalog/custom-image-editor/custom-image-editor.component.ts
@@ -53,7 +53,17 @@ export class CustomImageEditorComponent implements OnInit
   // ----------------------------------------------------------------------------------------------------------------
   saveChanges()
   {
-    this.save.next(this.editorForm.getRawValue());
+    const changes = this.editorForm.getRawValue();
+
+    const image: any = {
+      name: changes.name,
+      version: changes.version
+    };
+
+    if (changes.description)
+      image.description = changes.description;
+
+    this.save.next(image);
     this.modalRef.hide();
   }
 
diff --git a/app/src/app/catalog/helpers/catalog.service.ts b/app/src/app/catalog/helpers/catalog.service.ts
index d3a3b22..66b0b38 100644
--- a/app/src/app/catalog/helpers/catalog.service.ts
+++ b/app/src/app/catalog/helpers/catalog.service.ts
@@ -105,7 +105,7 @@ export class CatalogService
   }
 
   // ----------------------------------------------------------------------------------------------------------------
-  getImageUntilExpectedState(image: CatalogImage, expectedStates: string[], maxRetries = 10): Observable<CatalogImage>
+  getImageUntilExpectedState(image: CatalogImage, expectedStates: string[], maxRetries = 30): Observable<CatalogImage>
   {
     // Keep polling the image until it reaches the expected state
     return this.httpClient.get<CatalogImage>(`/api/my/images/${image.id}`)
diff --git a/app/src/app/security/security.component.html b/app/src/app/security/security.component.html
index 5b76f4e..f64016c 100644
--- a/app/src/app/security/security.component.html
+++ b/app/src/app/security/security.component.html
@@ -91,9 +91,9 @@
                 [cdkDropListEnterPredicate]="rolesEnterPredicate" (cdkDropListDropped)="drop($event)" cdkDrag
                 [cdkDragData]="role" cdkDragBoundary="#securitySettings">
                 <div class="d-flex justify-content-between align-items-center">
-                  <div>
-                    <fa-icon [fixedWidth]="true" icon="angle-right" [rotate]="role.collapsed ? 0 : 90"
-                      class="px-2 py-1 float-start" [ngClass]="role.policies.length ? 'text-secondary' : 'text-muted'"
+                  <div class="d-flex align-items-center">
+                    <fa-icon [fixedWidth]="true" icon="angle-right" [rotate]="role.collapsed || !role.policies.length ? 0 : 90"
+                      class="px-2 py-1 float-start toggler" [ngClass]="role.policies.length ? 'text-secondary' : 'text-muted'"
                       (click)="role.policies.length && role.collapsed = !role.collapsed"
                       tooltip="{{ 'security.togglePolicies' | translate }}" container="body" placement="top"
                       [adaptivePosition]="false"></fa-icon>
@@ -136,18 +136,16 @@
 
                 <div *cdkDragPlaceholder>{{ 'security.dropHere' | translate }}</div>
 
-                <div [collapse]="role.collapsed" [isAnimated]="true">
+                <div [collapse]="role.collapsed || !role.policies.length" [isAnimated]="true">
                   <ul class="list-group list-group-flush pl-5 mt-2">
-                    <li class="list-group-item pl-1 pr-0" *ngFor="let policy of role.policies">
+                    <li class="list-group-item pl-1 pr-0 d-flex align-items-center" *ngFor="let policy of role.policies">
                       <fa-icon [fixedWidth]="true" icon="key" size="sm"></fa-icon>
-                      {{ policy.name }}
-                      <div class="btn-group btn-group-sm float-end">
-                        <button class="btn text-danger" tooltip="{{ 'security.removeRolePolicy' | translate }}"
-                          container="body" placement="top" [adaptivePosition]="false"
-                          (click)="removePolicyFromRole(policy, role)">
-                          <fa-icon [fixedWidth]="true" icon="trash" size="sm"></fa-icon>
-                        </button>
-                      </div>
+                      <span class="flex-grow-1">{{ policy.name }}</span>
+                      <button class="btn btn-sm btn-link text-danger" tooltip="{{ 'security.removeRolePolicy' | translate }}"
+                        container="body" placement="top" [adaptivePosition]="false"
+                        (click)="removePolicyFromRole(policy, role)">
+                        <fa-icon [fixedWidth]="true" icon="times"></fa-icon>
+                      </button>
                     </li>
                   </ul>
                 </div>
@@ -178,14 +176,16 @@
                 cdkDropList [cdkDropListData]="user" cdkDropListSortingDisabled sortingDisabled
                 [cdkDropListEnterPredicate]="usersEnterPredicate" (cdkDropListDropped)="drop($event)">
                 <div class="d-flex justify-content-between align-items-center">
-                  <div>
-                    <fa-icon [fixedWidth]="true" icon="angle-right" [rotate]="user.collapsed ? 0 : 90" class="px-2 py-1"
+                  <div class="d-flex align-items-center">
+                    <fa-icon [fixedWidth]="true" icon="angle-right" [rotate]="user.collapsed || !user.roles.length ? 0 : 90" class="px-2 py-1 toggler"
                       [ngClass]="user.roles.length ? 'text-secondary' : 'text-muted'"
                       (click)="user.roles.length && user.collapsed = !user.collapsed"
                       tooltip="{{ 'security.toggleRoles' | translate }}" container="body" placement="top"
                       [adaptivePosition]="false"></fa-icon>
 
-                    {{ user.login }} <sup *ngIf="user.roles?.length">({{ user.roles.length }})</sup>
+                    <span>
+                      {{ user.login }} <sup *ngIf="user.roles?.length">({{ user.roles.length }})</sup>
+                    </span>
                   </div>
 
                   <div class="btn-group btn-group-sm float-end" dropdown>
@@ -223,17 +223,15 @@
 
                 <div *cdkDragPlaceholder>{{ 'security.dropHere' | translate }}</div>
 
-                <div [collapse]="user.collapsed" [isAnimated]="true">
+                <div [collapse]="user.collapsed || !user.roles.length" [isAnimated]="true">
                   <ul class="list-group list-group-flush pl-5 mt-2">
-                    <li class="list-group-item pl-1 pr-0" *ngFor="let role of user.roles">
+                    <li class="list-group-item pl-1 pr-0 d-flex align-items-center" *ngFor="let role of user.roles">
                       <fa-icon [fixedWidth]="true" icon="tag" size="sm"></fa-icon>
-                      {{ role.name }}
-                      <div class="btn-group btn-group-sm float-end">
-                        <button class="btn text-danger" tooltip="{{ 'security.removeUserRole' | translate }}"
-                          container="body" (click)="removeRoleFromUser(role, user)">
-                          <fa-icon [fixedWidth]="true" icon="trash" size="sm"></fa-icon>
-                        </button>
-                      </div>
+                      <span class="flex-grow-1">{{ role.name }}</span>
+                      <button class="btn btn-sm btn-link text-danger" tooltip="{{ 'security.removeUserRole' | translate }}"
+                        container="body" (click)="removeRoleFromUser(role, user)">
+                        <fa-icon [fixedWidth]="true" icon="times"></fa-icon>
+                      </button>
                     </li>
                   </ul>
                 </div>
diff --git a/app/src/app/security/security.component.scss b/app/src/app/security/security.component.scss
index 55de421..0de2a00 100644
--- a/app/src/app/security/security.component.scss
+++ b/app/src/app/security/security.component.scss
@@ -116,3 +116,8 @@ legend
 {
   /*box-shadow: 0 0 3px -1px #0dcaf0;*/
 }
+
+.toggler
+{
+  cursor: pointer;
+}
\ No newline at end of file