Merge branch 'main' of github.com:cbadura/onecx-permission-ui into main

src/_mixins.scss

@@ -229,3 +229,13 @@
     }
   }
 }
+
+@mixin listbox-zebra-rows {
+  :host ::ng-deep {
+    .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled) {
+      &:nth-child(odd) {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+}

src/app/permission/app-detail/app-detail.component.html

@@ -183,10 +183,9 @@
                   pbutton
                   type="button"
                   *ngIf="myPermissions.includes('ROLE#CREATE') && showRoleTools"
-                  [id]="'app_detail_permission_table_header_add_idm_roles_action'"
-                  (click)="onCreateIDMRoles($event)"
-                  [disabled]="true"
-                  [title]="'ACTIONS.CREATE.IDM_ROLES.TOOLTIP' | translate"
+                  [id]="'app_detail_permission_table_header_add_iam_roles_action'"
+                  (click)="onAddIAMRoles($event)"
+                  [title]="'ACTIONS.CREATE.IAM_ROLES.TOOLTIP' | translate"
                   class="p-1 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 >
                   <span class="text-primary font-medium p-button-icon pi pi-bolt" aria-hidden="true"></span>
@@ -512,6 +511,7 @@
   [roles]="roles"
   [role]="role"
   [changeMode]="changeMode"
+  [showIamRolesDialog]="showIamRolesDialog"
   [displayDetailDialog]="showRoleDetailDialog"
   [displayDeleteDialog]="showRoleDeleteDialog"
   (dataChanged)="onDetailChanged($event)"

src/app/permission/app-detail/app-detail.component.spec.ts

@@ -116,7 +116,8 @@ const permRow: PermissionViewRow = {
   roles: { undefined },
   appType: 'MFE',
   appDisplayName: 'appName',
-  productDisplayName: 'prodName'
+  productDisplayName: 'prodName',
+  operator: false
 }
 const permRow2: PermissionViewRow = {
   ...perm2,
@@ -379,12 +380,10 @@ describe('AppDetailComponent', () => {
   /**
    * CREATE
    */
-  it('should do something onCreateIDMRoles', () => {
-    spyOn(console, 'log')
-
-    component.onCreateIDMRoles(new MouseEvent('click'))
+  it('should do something onAddIAMRoles', () => {
+    component.onAddIAMRoles(new MouseEvent('click'))
 
-    expect(console.log).toHaveBeenCalled()
+    expect(component.showIamRolesDialog).toBeTrue()
   })
 
   it('should return if there are no missing ws roles', () => {

src/app/permission/app-detail/app-detail.component.ts

@@ -115,6 +115,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public missingWorkspaceRoles = false
   public showRoleDetailDialog = false
   public showRoleDeleteDialog = false
+  public showIamRolesDialog = false
   public showRoleTools = false
 
   constructor(
@@ -366,10 +367,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
   }
 
-  public onCreateIDMRoles(ev: MouseEvent) {
-    console.log('TODO: select IDM roles to take over into permissions')
-  }
-
   public onCreateWorkspaceRoles(ev: MouseEvent) {
     ev.stopPropagation()
     if (!this.missingWorkspaceRoles) return
@@ -624,15 +621,19 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.showPermissionDeleteDialog = false
     this.showRoleDetailDialog = false
     this.showRoleDeleteDialog = false
+    this.showIamRolesDialog = false
     if (changed) this.loadData()
   }
+  public onAddIAMRoles(ev: MouseEvent) {
+    this.showIamRolesDialog = true
+  }
 
   /****************************************************************************
    *  PERMISSION
    ****************************************************************************
    */
   public onCopyPermission(ev: MouseEvent, perm: PermissionViewRow): void {
-    this.onDetailPermission(ev, perm)
+    this.onDetailPermission(ev, { ...perm, operator: false })
     this.changeMode = 'CREATE'
   }
   public onCreatePermission(ev?: MouseEvent): void {

src/app/permission/app-search/app-search.component.html

@@ -57,8 +57,8 @@
         [value]="(apps$ | async) ?? []"
         [paginator]="true"
         [alwaysShowPaginator]="true"
-        [rowsPerPageOptions]="[16, 32, 64]"
-        [rows]="16"
+        [rowsPerPageOptions]="[20, 60, 100]"
+        [rows]="20"
         [layout]="viewMode"
         [filterBy]="filterValueDefault"
         [sortField]="sortField"
@@ -110,26 +110,20 @@
               [class.bg-primary]="app.appType === 'WORKSPACE'"
               (click)="onAppClick(app)"
             >
-              <div
-                *ngIf="app.appType === 'WORKSPACE'"
-                class="h-2rem md:h-3rem lg:h-4rem flex flex-column justify-content-between gap-1 lg:gap-2 lg:py-1 text-center"
+              <span
+                *ngIf="app.apps"
+                [id]="'app_search_data_idx_' + idx + '_apps'"
+                [title]="'APP.APPS' | translate"
+                class="card-badge-right badge-2 p-1 text-xs"
+                >{{ app.apps }}</span
               >
-                <div class="font-bold text-base md:text-lg lg:text-xl">{{ limitText(app.appId, 20) }}</div>
-                <div class="text-xs md:text-base lg:text-md">{{ 'APP.TYPE_'.concat(app.appType) | translate }}</div>
-              </div>
-              <div
-                *ngIf="app.appType === 'PRODUCT'"
-                class="h-2rem md:h-3rem lg:h-4rem flex flex-column justify-content-between gap-1 lg:gap-2 lg:py-1 text-center"
-              >
-                <div class="font-bold text-base md:text-lg lg:text-xl">{{ limitText(app.productName, 20) }}</div>
-                <div class="text-xs md:text-base lg:text-md">{{ 'APP.TYPE_'.concat(app.appType) | translate }}</div>
-              </div>
-              <div
-                *ngIf="app.appType === 'APP'"
-                class="h-2rem md:h-3rem lg:h-4rem flex flex-column justify-content-between text-center"
-              >
-                <div class="font-bold text-base md:text-lg lg:text-xl">{{ limitText(app.appId, 20) }}</div>
-                <div class="font-bold text-xs">{{ limitText(app.productName, 20) }}</div>
+              <div class="h-2rem md:h-3rem flex flex-column justify-content-between gap-1 lg:gap-2 lg:py-1 text-center">
+                <div *ngIf="app.appType === 'WORKSPACE'" class="font-bold text-base md:text-lg">
+                  {{ limitText(app.appId, 20) }}
+                </div>
+                <div *ngIf="app.appType === 'PRODUCT'" class="font-bold text-base md:text-lg">
+                  {{ limitText(app.productName, 20) }}
+                </div>
                 <div class="text-xs md:text-base lg:text-md">{{ 'APP.TYPE_'.concat(app.appType) | translate }}</div>
               </div>
             </div>

src/app/permission/app-search/app-search.component.scss

@@ -3,6 +3,7 @@
 @include correct-data-view-control;
 @include correct-search-criteria;
 @include search-criteria-select-button;
+@include card-badges;
 
 @media screen and (min-width: 768px) {
   .md\:h-2-5rem {

src/app/permission/app-search/app-search.component.spec.ts

@@ -311,12 +311,10 @@ describe('AppSearchComponent', () => {
   it('should navigate to detail page when a tile is clicked', () => {
     const app: App = {
       appId: 'appId',
-      isApp: true,
       appType: 'APP'
     }
     const product: App = {
       appId: 'appId',
-      isApp: true,
       appType: 'PRODUCT'
     }
 

src/app/permission/app-search/app-search.component.ts

@@ -23,7 +23,7 @@ export interface AppSearchCriteria {
   appType: FormControl<AppFilterType | null>
   name: FormControl<string | null>
 }
-export type App = Application & { isApp: boolean; appType: AppType }
+export type App = Application & { apps?: number; appType: AppType }
 export type AppType = 'APP' | 'PRODUCT' | 'WORKSPACE'
 export type AppFilterType = 'ALL' | AppType
 
@@ -153,9 +153,12 @@ export class AppSearchComponent implements OnInit, OnDestroy {
         const productNames: string[] = []
         const apps: App[] = []
         result.stream?.map((app: Application) => {
-          if (!productNames.includes(app.productName ?? '')) {
-            productNames.push(app.productName ?? '')
-            apps.push({ ...app, appType: 'PRODUCT' } as App)
+          if (!productNames.includes(app.productName!)) {
+            productNames.push(app.productName!)
+            apps.push({ ...app, appType: 'PRODUCT', apps: 1 } as App)
+          } else {
+            const ap: App[] = apps.filter((a) => a.productName === app.productName)
+            if (ap.length === 1 && ap[0].apps) ap[0].apps++
           }
         })
         return apps.sort(this.sortAppsByAppId)

src/app/permission/permission-detail/permission-detail.component.html

@@ -32,7 +32,10 @@
           </label>
         </span>
       </div>
-      <div class="px-2 flex flex-row justify-content-between align-items-center column-gap-3">
+      <div
+        *ngIf="changeMode !== 'CREATE'"
+        class="px-2 flex flex-row justify-content-between align-items-center column-gap-3"
+      >
         <p-checkbox
           type="text"
           inputId="permission_detail_operator"
@@ -138,14 +141,14 @@
   [dismissableMask]="true"
   [style]="{ 'max-width': '425px' }"
 >
-  <div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
+  <div class="mr-2 flex column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
     <div>
-      <div id="permission_delete_button_message">
+      <div id="permission_delete_message" class="font-bold">
         {{ ('ACTIONS.DELETE.MESSAGE.TEXT' | translate).replace('{{ITEM}}', permission?.resource + '#' +
         permission?.action) }}
       </div>
-      <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
+      <div class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
     </div>
   </div>
   <ng-template pTemplate="footer">

src/app/permission/role-detail/role-detail.component.html

@@ -9,7 +9,7 @@
   [style]="{ width: '400px' }"
 >
   <form [formGroup]="formGroupRole" errorTailor>
-    <div class="flex flex-wrap flex-column gap-4 justify-content-between">
+    <div class="flex flex-wrap flex-column row-gap-4 justify-content-between">
       <div class="mt-1">
         <span class="p-float-label" controlErrorAnchor>
           <input pInputText type="text" class="w-full" id="role_detail_name" formControlName="name" />
@@ -63,11 +63,13 @@
   [dismissableMask]="true"
   [style]="{ 'max-width': '425px' }"
 >
-  <div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
+  <div class="mr-2 flex column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
     <div>
-      <div>{{ ('ACTIONS.DELETE.MESSAGE.TEXT' | translate).replace('{{ITEM}}', role?.name) }}</div>
-      <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
+      <div id="role_delete_message" class="font-bold">
+        {{ ('ACTIONS.DELETE.MESSAGE.TEXT' | translate).replace('{{ITEM}}', role?.name) }}
+      </div>
+      <div class="mt-3">{{ 'ACTIONS.DELETE.MESSAGE.INFO' | translate }}</div>
     </div>
   </div>
   <ng-template pTemplate="footer">
@@ -96,3 +98,56 @@
     </div>
   </ng-template>
 </p-dialog>
+
+<!-- SELECT IAM ROLES -->
+<p-dialog
+  [(visible)]="showIamRolesDialog"
+  [header]="'ROLE.IAM.HEADER' | translate"
+  (onHide)="onClose()"
+  [modal]="true"
+  [closable]="true"
+  [resizable]="true"
+  [dismissableMask]="true"
+>
+  <div class="flex flex-column row-gap-2">
+    <div>{{ 'ROLE.IAM.LIST' | translate }}</div>
+    <p-listbox
+      [options]="iamRoles"
+      [(ngModel)]="selectedIamRoles"
+      optionLabel="name"
+      [filter]="true"
+      [checkbox]="true"
+      [multiple]="true"
+      [metaKeySelection]="false"
+      [showToggleAll]="false"
+      [emptyMessage]="'ACTIONS.SEARCH.NO_DATA' | translate"
+      [listStyle]="{ 'max-height': '300px' }"
+    />
+  </div>
+  <div class="mt-2 text-xs">{{ 'ROLE.IAM.INFO' | translate }}</div>
+  <ng-template pTemplate="footer">
+    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
+      <button
+        pButton
+        type="button"
+        id="role_select_button_cancel"
+        class="m-0"
+        icon="pi pi-times"
+        iconPos="left"
+        [label]="'ACTIONS.CANCEL' | translate"
+        [title]="'ACTIONS.TOOLTIPS.CANCEL' | translate"
+        (click)="onClose()"
+      ></button>
+      <button
+        pButton
+        type="button"
+        id="role_select_button_save"
+        class="m-0"
+        icon="pi pi-check"
+        iconPos="left"
+        [label]="'ROLE.IAM.SAVE' | translate"
+        (click)="onAddIamRoles()"
+      ></button>
+    </div>
+  </ng-template>
+</p-dialog>

src/app/permission/role-detail/role-detail.component.scss

@@ -0,0 +1,18 @@
+@import '/src/_mixins.scss';
+
+@include listbox-zebra-rows;
+
+:host ::ng-deep {
+  .p-listbox {
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    .p-listbox-list-wrapper {
+      border-radius: var(--border-radius);
+      .p-listbox-list .p-listbox-item {
+        padding: 0.5rem 1rem;
+        .p-checkbox {
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
+}