permissions revamp (#647)

- added support for granular permissions
- Administration sections are only visible if the User has the appropriate Permissions

Author: sei-aschlackman

src/app/app.module.ts

@@ -103,6 +103,10 @@ import { AppAdminSubscriptionSearchComponent } from './components/admin-app/app-
 import { EditSubscriptionComponent } from './components/admin-app/app-admin-subscription-search/edit-subscription/edit-subscription.component';
 import { CreateApplicationDialogComponent } from './components/shared/create-application-dialog/create-application-dialog.component';
 import { ResizableModule } from 'angular-resizable-element';
+import { SystemRolesComponent } from './components/admin-app/admin-roles/roles/roles.component';
+import { AdminRolesComponent } from './components/admin-app/admin-roles/admin-roles.component';
+import { NameDialogComponent } from './components/shared/name-dialog/name-dialog.component';
+import { TeamRolesComponent } from './components/admin-app/admin-roles/team-roles/team-roles.component';
 
 @NgModule({
   exports: [
@@ -190,6 +194,10 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
     AppAdminSubscriptionSearchComponent,
     EditSubscriptionComponent,
     CreateApplicationDialogComponent,
+    NameDialogComponent,
+    SystemRolesComponent,
+    AdminRolesComponent,
+    TeamRolesComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/admin-app/admin-app.component.html

@@ -8,7 +8,7 @@
     class="appbarmenu-container"
     #sidenav
     mode="side"
-    [opened]="loggedInUserService.isSuperUser$ | async"
+    [opened]="true"
   >
     <mat-list class="appitems-container">
       <mat-list-item class="appslist">
@@ -23,28 +23,34 @@ <h2 class="icon-text">Administration</h2>
         </a>
         <mat-divider></mat-divider>
       </mat-list-item>
-      <mat-list-item *ngFor="let sectionItem of sectionItems">
-        <button
-          mat-button
-          (click)="sectionChangedFn(sectionItem.section)"
-          class="px-0 w-100"
-        >
-          <div class="d-flex align-items-center">
-            <mat-icon
-              *ngIf="sectionItem.svgIcon"
-              class="lefticon player-icon-small"
-              svgIcon="{{ sectionItem.icon }}"
-            ></mat-icon>
-            <img
-              *ngIf="!sectionItem.svgIcon"
-              class="lefticon"
-              src="{{ sectionItem.icon }}"
-              alt="{{ sectionItem.name }}"
-            />
-            <div>{{ sectionItem.name }}</div>
-          </div>
-        </button>
-      </mat-list-item>
+      <ng-container *ngFor="let sectionItem of sectionItems">
+        <ng-container *ngIf="permissions$ | async as permissions">
+          <mat-list-item *ngIf="permissions.includes(sectionItem.permission)">
+            <ng-container>
+              <button
+                mat-button
+                (click)="sectionChangedFn(sectionItem.section)"
+                class="px-0 w-100"
+              >
+                <div class="d-flex align-items-center">
+                  <mat-icon
+                    *ngIf="sectionItem.svgIcon"
+                    class="lefticon player-icon-small"
+                    svgIcon="{{ sectionItem.icon }}"
+                  ></mat-icon>
+                  <img
+                    *ngIf="!sectionItem.svgIcon"
+                    class="lefticon"
+                    src="{{ sectionItem.icon }}"
+                    alt="{{ sectionItem.name }}"
+                  />
+                  <div>{{ sectionItem.name }}</div>
+                </div>
+              </button>
+            </ng-container>
+          </mat-list-item>
+        </ng-container>
+      </ng-container>
     </mat-list>
     <img
       class="crucible-logo"
@@ -78,9 +84,10 @@ <h2 class="icon-text">Administration</h2>
         *ngSwitchCase="Section.ADMIN_APP_TEMP"
       ></app-admin-app-template-search>
 
-      <app-admin-role-permission-search
+      <app-admin-roles
+        class="w-100"
         *ngSwitchCase="Section.ADMIN_ROLE_PERM"
-      ></app-admin-role-permission-search>
+      ></app-admin-roles>
 
       <app-admin-subscription-search
         *ngSwitchCase="Section.ADMIN_SUBS"

src/app/components/admin-app/admin-app.component.ts

@@ -10,10 +10,12 @@ import {
   ComnAuthQuery,
 } from '@cmusei/crucible-common';
 import { RouterQuery } from '@datorama/akita-ng-router-store';
-import { Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { combineLatest, Observable, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { TopbarView } from '../shared/top-bar/topbar.models';
 import { LoggedInUserService } from '../../services/logged-in-user/logged-in-user.service';
+import { UserPermissionsService } from '../../services/permissions/user-permissions.service';
+import { SystemPermission } from '../../generated/player-api';
 
 @Component({
   selector: 'app-admin-app',
@@ -25,55 +27,77 @@ export class AdminAppComponent implements OnInit, OnDestroy {
   public topbarColor = '#4c7aa2';
   public topbarTextColor = '#FFFFFF';
   public TopbarView = TopbarView;
-  public queryParams: any = {
-    section: Section.ADMIN_VIEWS,
-  };
+  public queryParams: any;
   Section = Section;
   unsubscribe$: Subject<null> = new Subject<null>();
   theme$: Observable<Theme>;
-  public section$: Observable<Section> =
-    this.routerQuery.selectQueryParams('section');
   public title = '';
+  public permissions$ = this.permissionsService.permissions$;
 
   public sectionItems: Array<SectionItem> = [
     {
       name: 'Views',
       section: Section.ADMIN_VIEWS,
       icon: 'ic_crucible_player',
       svgIcon: true,
+      permission: SystemPermission.ViewViews,
     },
     {
       name: 'Users',
       section: Section.ADMIN_USERS,
       icon: 'assets/img/SP_Icon_User.png',
       svgIcon: false,
+      permission: SystemPermission.ViewUsers,
     },
     {
       name: 'Application Templates',
       section: Section.ADMIN_APP_TEMP,
       icon: 'assets/img/SP_Icon_Intel.png',
       svgIcon: false,
+      permission: SystemPermission.ViewApplications,
     },
     {
-      name: 'Roles / Permissions',
+      name: 'Roles',
       section: Section.ADMIN_ROLE_PERM,
       icon: 'assets/img/SP_Icon_Alert.png',
       svgIcon: false,
+      permission: SystemPermission.ViewRoles,
     },
     {
       name: 'Subscriptions',
       section: Section.ADMIN_SUBS,
       icon: 'assets/img/subscription.png',
       svgIcon: false,
+      permission: SystemPermission.ViewWebhookSubscriptions,
     },
   ];
 
+  public section$: Observable<Section> = combineLatest([
+    this.routerQuery.selectQueryParams('section'),
+    this.permissions$,
+  ]).pipe(
+    map(([queryParam, permissions]) => {
+      if (
+        queryParam &&
+        Object.values(Section).includes(queryParam as Section)
+      ) {
+        return queryParam as Section;
+      } else {
+        const sectionItem = this.sectionItems.find((x) =>
+          permissions.includes(x.permission)
+        );
+        return sectionItem?.section;
+      }
+    })
+  );
+
   constructor(
     private settingsService: ComnSettingsService,
     private router: Router,
     private routerQuery: RouterQuery,
     private authQuery: ComnAuthQuery,
-    public loggedInUserService: LoggedInUserService
+    public loggedInUserService: LoggedInUserService,
+    public permissionsService: UserPermissionsService
   ) {
     this.theme$ = this.authQuery.userTheme$;
   }
@@ -91,7 +115,7 @@ export class AdminAppComponent implements OnInit, OnDestroy {
         if (sectionEnum != null) {
           this.sectionChangedFn(sectionEnum);
         } else {
-          this.sectionChangedFn(Section.ADMIN_VIEWS);
+          //this.sectionChangedFn(Section.ADMIN_VIEWS);
         }
       });
 
@@ -148,4 +172,5 @@ export interface SectionItem {
   icon: string;
   section: Section;
   svgIcon: boolean;
+  permission: SystemPermission;
 }

src/app/components/admin-app/admin-role-permission-search/admin-role-permission-search.component.ts

@@ -5,11 +5,11 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSort, MatSortable } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import {
+  CreatePermissionCommand,
   Permission,
   PermissionService,
-  PermissionForm,
 } from '../../../generated/player-api';
-import { Role, RoleService, RoleForm } from '../../../generated/player-api';
+import { Role, RoleService } from '../../../generated/player-api';
 import { DialogService } from '../../../services/dialog/dialog.service';
 import { UntypedFormControl } from '@angular/forms';
 
@@ -61,9 +61,10 @@ export class AdminRolePermissionSearchComponent implements OnInit {
     );
     this.filterPermissionString = '';
     this.permissionService.getPermissions().subscribe((permissions) => {
-      this.permissionDataSource.data = permissions.sort((k1, k2) =>
-        k1.key.toLowerCase() < k2.key.toLowerCase() ? -1 : 1
-      );
+      this.permissionDataSource.data = permissions;
+      // permissions.sort((k1, k2) =>
+      //   k1.key.toLowerCase() < k2.key.toLowerCase() ? -1 : 1
+      // );
     });
 
     this.roleDataSource = new MatTableDataSource<Role>(new Array<Role>());
@@ -83,9 +84,9 @@ export class AdminRolePermissionSearchComponent implements OnInit {
         if (!permission.key) {
           return;
         }
-        const newPermission: PermissionForm = {
-          key: permission.key,
-          value: permission.value,
+        const newPermission: CreatePermissionCommand = {
+          name: permission.key,
+          // value: permission.value,
           description: permission.description,
         };
         this.permissionService.createPermission(newPermission).subscribe(() => {
@@ -101,16 +102,15 @@ export class AdminRolePermissionSearchComponent implements OnInit {
       .createPermission('Edit Permission', permission)
       .subscribe((enteredInfo) => {
         permission = enteredInfo['permission'];
-        if (!permission.key) {
+        if (!permission.name) {
           return;
         }
-        const newPermission: PermissionForm = {
-          key: permission.key,
-          value: permission.value,
-          description: permission.description,
-        };
         this.permissionService
-          .updatePermission(permission.id, newPermission)
+          .updatePermission(permission.id, {
+            name: permission.name,
+            // value: permission.value,
+            description: permission.description,
+          })
           .subscribe(() => {
             this.permissionService.getPermissions().subscribe((permissions) => {
               this.permissionDataSource.data = permissions;
@@ -126,14 +126,10 @@ export class AdminRolePermissionSearchComponent implements OnInit {
         break;
       }
       case 'delete': {
-        // Delete permission
-        const permissionName = !permission.value
-          ? permission.key
-          : permission.key + '(' + permission.value + ')';
         this.dialogService
           .confirm(
             'Delete Permission',
-            'Are you sure you want to delete ' + permissionName + '?'
+            'Are you sure you want to delete ' + permission.name + '?'
           )
           .subscribe((confirmed) => {
             if (confirmed) {
@@ -181,14 +177,16 @@ export class AdminRolePermissionSearchComponent implements OnInit {
       if (!enteredInfo['name']) {
         return;
       }
-      const newRole: RoleForm = {
-        name: enteredInfo['name'],
-      };
-      this.roleService.createRole(newRole).subscribe(() => {
-        this.roleService.getRoles().subscribe((roles) => {
-          this.roleDataSource.data = roles;
+
+      this.roleService
+        .createRole({
+          name: enteredInfo['name'],
+        })
+        .subscribe(() => {
+          this.roleService.getRoles().subscribe((roles) => {
+            this.roleDataSource.data = roles;
+          });
         });
-      });
     });
   }
 
@@ -203,14 +201,16 @@ export class AdminRolePermissionSearchComponent implements OnInit {
         if (!enteredInfo['name']) {
           return;
         }
-        const newRole: RoleForm = {
-          name: enteredInfo['name'],
-        };
-        this.roleService.updateRole(role.id, newRole).subscribe((result) => {
-          this.roleService.getRoles().subscribe((roles) => {
-            this.roleDataSource.data = roles;
+
+        this.roleService
+          .updateRole(role.id, {
+            name: enteredInfo['name'],
+          })
+          .subscribe((result) => {
+            this.roleService.getRoles().subscribe((roles) => {
+              this.roleDataSource.data = roles;
+            });
           });
-        });
       });
   }
 

src/app/components/admin-app/admin-role-permission-search/create-permission-dialog/create-permission-dialog.component.html

@@ -12,17 +12,9 @@ <h1 mat-dialog-title>{{ title }}</h1>
         placeholder="Name"
         tabIndex="1"
         name="key"
-        [(ngModel)]="permission.key"
+        [(ngModel)]="permission.name"
       /> </mat-form-field
     ><br />
-    <mat-form-field>
-      <input
-        matInput
-        placeholder="Value"
-        tabIndex="2"
-        name="value"
-        [(ngModel)]="permission.value"
-      /> </mat-form-field
     ><br />
     <mat-form-field>
       <input

src/app/components/admin-app/admin-role-permission-search/select-role-permissions-dialog/select-role-permissions-dialog.component.html

@@ -11,7 +11,7 @@ <h1 mat-dialog-title>Select Permissions for {{ role.name }}</h1>
       [value]="item.id"
       (click)="updateSelection(item.id)"
     >
-      {{ item.key }}
+      {{ item.key ?? item.name }}
     </mat-list-option>
   </mat-selection-list>
   <p>Options selected: {{ selectedPermissions.length }}</p>

src/app/components/admin-app/admin-role-permission-search/select-role-permissions-dialog/select-role-permissions-dialog.component.ts

@@ -30,9 +30,9 @@ export class SelectRolePermissionsDialogComponent implements OnInit {
    * Initialization
    */
   ngOnInit() {
-    this.permissions.sort(function (a, b) {
-      return a.key.toLowerCase().localeCompare(b.key.toLowerCase());
-    });
+    // this.permissions.sort(function (a, b) {
+    //   return a.key.toLowerCase().localeCompare(b.key.toLowerCase());
+    // });
     this.role.permissions.forEach((permission) => {
       this.selectedPermissions.push(permission.id);
     });