feat: added role creation

onecx · Feb 26, 2024 · 53b4b01 · 53b4b01
1 parent 033ac33
commit 53b4b01
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 55 deletions.
diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html
@@ -6,8 +6,8 @@
   <ocx-page-header
     [loading]="loading"
     [actions]="(actions$ | async) ?? []"
-    [header]="loading ? '' : ('DIALOG.DETAIL.HEADER_' + currentApp.type | translate) + currentApp.name"
-    [subheader]="loading ? '' : ('DIALOG.DETAIL.SUBHEADER_' + currentApp.type | translate)"
+    [header]="loading ? '' : ('DIALOG.DETAIL.HEADER_' + currentApp.appType | translate) + currentApp.name"
+    [subheader]="loading ? '' : ('DIALOG.DETAIL.SUBHEADER_' + currentApp.appType | translate)"
     [manualBreadcrumbs]="false"
   >
   </ocx-page-header>
@@ -139,7 +139,7 @@
               </div>
             </th>
             <th
-              *ngIf="currentApp.type === 'WORKSPACE'"
+              *ngIf="currentApp.appType === 'WORKSPACE'"
               [attr.colspan]="roles.length"
               class="py-0 opacity-80 text-center"
               [title]="'ROLE.TOOLTIP' | translate"
@@ -200,7 +200,7 @@
                 </span>
                 <button
                   pbutton
-                  type="button"
+                  appType="button"
                   [id]="'app_detail_permission_table_sort_action'"
                   (click)="onWorkspaceAppFilterItemSort($event, appSortIcon)"
                   [title]="'PERMISSION.SORT.APP_ID' | translate"
@@ -211,7 +211,7 @@
               </div>
             </th>
             <!-- WORKSPACE ROLES (as part of tenant roles managed by IDM) -->
-            <ng-container *ngIf="currentApp.type === 'WORKSPACE'">
+            <ng-container *ngIf="currentApp.appType === 'WORKSPACE'">
               <th *ngFor="let role of columns" class="pt-2 pb-1 px-2 text-center border-bottom-primary">
                 <div class="flex flex-column justify-content-between">
                   <div class="flex flex-row gap-1 justify-content-center white-space-nowrap">
@@ -324,7 +324,7 @@
               {{ rowData.appId }}
             </td>
             <!-- ASSIGNMENTS -->
-            <ng-container *ngIf="currentApp.type === 'WORKSPACE'">
+            <ng-container *ngIf="currentApp.appType === 'WORKSPACE'">
               <td
                 *ngFor="let role of columns"
                 class="text-center"

diff --git a/src/app/permission/app-detail/app-detail.component.scss b/src/app/permission/app-detail/app-detail.component.scss
@@ -1,3 +1,8 @@
+@import '/src/_mixins.scss';
+
+@include correct-data-view-control;
+@include search-criteria-select-button;
+
 :host ::ng-deep {
   .p-datatable .p-datatable-header {
     padding-left: 0;
@@ -73,13 +78,7 @@
       }
     }
   }
-  .p-selectbutton .p-button {
-    min-width: unset !important;
-  }
-  .data-view-control,
-  .data-view-control * {
-    color: var(--emphasis-medium);
-  }
+
   .danger-action-text {
     color: var(--danger-button-bg);
   }

diff --git a/src/app/permission/app-detail/app-detail.component.ts b/src/app/permission/app-detail/app-detail.component.ts
@@ -28,12 +28,13 @@ import {
   AssignmentAPIService,
   PermissionAPIService,
   RoleAPIService,
-  WorkspaceAPIService
+  WorkspaceAPIService,
+  WorkspaceDetails
 } from 'src/app/shared/generated'
 //import { dropDownSortItemsByLabel, limitText } from 'src/app/shared/utils'
 import { limitText } from 'src/app/shared/utils'
 
-type App = Application & { isApp: boolean; type: AppType }
+type App = Application & { isApp: boolean; appType: AppType; workspaceDetails?: WorkspaceDetails }
 type AppType = 'WORKSPACE' | 'APP'
 type AppRole = Role & { appId: string }
 type RoleAssignments = { [key: string]: boolean }
@@ -70,7 +71,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   // data
   public urlParamAppId = ''
   public urlParamAppType = ''
-  public currentApp: App = { appId: 'dummy', type: 'APP' } as App
+  public currentApp: App = { appId: 'dummy', appType: 'APP' } as App
   public dateFormat = 'medium'
   public changeMode = 'CREATE' || 'EDIT'
   private workspaceApps: Product[] = []
@@ -185,7 +186,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
               show: 'asOverflow',
               permission: 'ROLE#EDIT',
               conditional: true,
-              showCondition: this.currentApp.type === 'WORKSPACE'
+              showCondition: this.currentApp.appType === 'WORKSPACE'
             },
             {
               label: data['ACTIONS.DELETE.LABEL'],
@@ -197,7 +198,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
               show: 'asOverflow',
               permission: 'APPLICATION#DELETE',
               conditional: true,
-              showCondition: this.currentApp.type === 'APP'
+              showCondition: this.currentApp.appType === 'APP'
             }
           ]
         })
@@ -234,13 +235,13 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     if (this.urlParamAppType === 'WORKSPACE') {
       this.currentApp = {
         id: this.urlParamAppId,
-        appId: this.urlParamAppId,
         name: this.urlParamAppId,
-        type: this.urlParamAppType
+        appId: this.urlParamAppId,
+        appType: this.urlParamAppType
       } as App
       this.log('loadApp => Workspace:', this.currentApp)
       this.prepareActionButtons()
-      this.loadRoles()
+      this.loadWorkspaceDetails()
       this.loadWorkspaceApps()
       this.loading = false
     } else {
@@ -253,7 +254,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.loadingExceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + result.status + '.APP'
             console.error('searchApplications() result:', result)
           } else if (result instanceof Object) {
-            this.currentApp = { ...result.stream[0], type: 'APP' } as App
+            this.currentApp = { ...result.stream[0], appType: 'APP' } as App
             this.log('loadApp => App:', this.currentApp)
             this.prepareActionButtons()
             this.permissionRows = []
@@ -267,6 +268,25 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         })
     }
   }
+  private loadWorkspaceDetails() {
+    this.workspaceApi
+      .getDetailsByWorkspaceName({ workspaceName: this.currentApp.appId ?? '' })
+      .pipe(catchError((error) => of(error)))
+      .subscribe((result) => {
+        if (result instanceof HttpErrorResponse) {
+          this.loadingExceptionKey = 'EXCEPTIONS.HTTP_STATUS_' + result.status + '.APP'
+          console.error('getDetailsByWorkspaceName() result:', result)
+        } else if (result instanceof Object) {
+          this.currentApp.workspaceDetails = { ...result }
+          this.log('getDetailsByWorkspaceName => App:', this.currentApp)
+          this.loadRoles()
+        } else {
+          this.loadingExceptionKey = 'EXCEPTIONS.HTTP_STATUS_0.APPS'
+          console.error('getDetailsByWorkspaceName() => unknown response:', result)
+        }
+      })
+  }
+
   private loadWorkspaceApps() {
     this.workspaceApps = []
     this.workspaceApi
@@ -292,11 +312,14 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   }
   /**
    * COLUMNS => Roles
+   *
+   * Align roles with workspace role: create role if not exist
    */
-  // TODO: load workspace roles and/or keycloak roles
-  private loadRoles(): void {
+  private loadRoles(rolesAligned: boolean = false): void {
+    this.log('loadRoles: ' + rolesAligned)
     this.roles = []
     this.permissionDefaultRoles = {}
+    // get roles from onecx permission
     this.roleApi
       .searchRoles({ roleSearchCriteria: {} })
       .pipe(catchError((error) => of(error)))
@@ -310,8 +333,34 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.roles.push({ ...role })
             this.permissionDefaultRoles[role.name] = false
           }
-          this.roles.sort(this.sortRoleByName)
-          this.log('loadRoles:', this.roles)
+          // check roles from workspace: add missing
+          if (
+            !rolesAligned &&
+            this.currentApp.appType === 'WORKSPACE' &&
+            this.currentApp.workspaceDetails?.workspaceRoles
+          ) {
+            for (let wRole of this.currentApp.workspaceDetails?.workspaceRoles) {
+              this.log('check role: ' + wRole)
+              if (this.roles.filter((r) => r.name === wRole).length === 0) {
+                const newRole: Role = { name: wRole, description: wRole }
+                this.roleApi
+                  .createRole({
+                    createRoleRequest: newRole as CreateRoleRequest
+                  })
+                  .subscribe({
+                    next: () => {
+                      this.log('role created: ' + wRole)
+                      this.roles.push(newRole)
+                      rolesAligned = true
+                    }
+                  })
+              }
+            }
+            if (rolesAligned) this.loadRoles(true)
+          } else {
+            this.roles.sort(this.sortRoleByName)
+            this.log('loadRoles:', this.roles)
+          }
         } else {
           this.loadingServerIssue = true
           this.loadingExceptionKey = 'EXCEPTIONS.HTTP_STATUS_0.ROLES'
@@ -472,7 +521,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   }
   // managing the app filter
   private prepareWorkspaceAppFilter(): void {
-    if (this.currentApp.type === 'WORKSPACE') {
+    if (this.currentApp.appType === 'WORKSPACE') {
       this.workspaceAppFilterItems = this.workspaceAppFilterItems.filter((a) => a.value !== this.currentApp.appId)
       this.onFilterWorkspaceApps()
     } else {

diff --git a/src/app/permission/app-search/app-search.component.scss b/src/app/permission/app-search/app-search.component.scss
@@ -4,31 +4,3 @@
 @include correct-data-view-control;
 @include correct-search-criteria;
 @include search-criteria-select-button;
-
-:host ::ng-deep {
-  .card-badge-right {
-    display: inline-block;
-    position: absolute;
-    right: 5px;
-    &.badge-1 {
-      top: 5px;
-    }
-    &.badge-2 {
-      top: 5px;
-    }
-  }
-  .p-selectbutton .p-button {
-    min-width: unset !important;
-  }
-  .pseudo-button-link {
-    border-radius: 50%;
-    &:hover {
-      background: var(--button-hover-bg) !important;
-      cursor: pointer;
-    }
-  }
-  .data-view-control,
-  .data-view-control * {
-    color: var(--emphasis-medium);
-  }
-}