feat(admin-ui): Restrict operations on default roles

admin-ui/src/app/administrator/components/role-list/role-list.component.html

@@ -23,10 +23,13 @@
         <td class="left">{{ role.code }}</td>
         <td class="left">{{ role.description }}</td>
         <td class="left">
-            <vdr-chip *ngFor="let permission of role.permissions">{{ permission }}</vdr-chip>
+            <ng-container *ngIf="!isDefaultRole(role)">
+                <vdr-chip *ngFor="let permission of role.permissions">{{ permission }}</vdr-chip>
+            </ng-container>
         </td>
         <td class="right">
-            <vdr-table-row-action iconShape="edit"
+            <vdr-table-row-action [disabled]="isDefaultRole(role)"
+                                  iconShape="edit"
                                   [label]="'common.edit' | translate"
                                   [linkTo]="['./', role.id]">
             </vdr-table-row-action>

admin-ui/src/app/administrator/components/role-list/role-list.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { GetRoles, GetRoles_roles_items } from 'shared/generated-types';
+import { GetRoles, GetRoles_roles_items, Role } from 'shared/generated-types';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from 'shared/shared-constants';
 
 import { BaseListComponent } from '../../../common/base-list.component';
 import { DataService } from '../../../data/providers/data.service';
@@ -9,6 +10,7 @@ import { DataService } from '../../../data/providers/data.service';
     selector: 'vdr-role-list',
     templateUrl: './role-list.component.html',
     styleUrls: ['./role-list.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RoleListComponent extends BaseListComponent<GetRoles, GetRoles_roles_items> {
     constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
@@ -18,4 +20,8 @@ export class RoleListComponent extends BaseListComponent<GetRoles, GetRoles_role
             data => data.roles,
         );
     }
+
+    isDefaultRole(role: Role): boolean {
+        return role.code === SUPER_ADMIN_ROLE_CODE || role.code === CUSTOMER_ROLE_CODE;
+    }
 }

admin-ui/src/app/app.config.ts

@@ -1,6 +1,5 @@
 import { LanguageCode } from 'shared/generated-types';
-
-import { API_PORT } from '../../../shared/shared-constants';
+import { API_PORT } from 'shared/shared-constants';
 
 export const API_URL = `http://localhost:${API_PORT}`;
 export const DEFAULT_LANGUAGE: LanguageCode = LanguageCode.en;

admin-ui/src/app/data/data.module.ts

@@ -7,8 +7,8 @@ import { ApolloClientOptions } from 'apollo-client';
 import { ApolloLink } from 'apollo-link';
 import { setContext } from 'apollo-link-context';
 import { withClientState } from 'apollo-link-state';
+import { API_PATH } from 'shared/shared-constants';
 
-import { API_PATH } from '../../../../shared/shared-constants';
 import { environment } from '../../environments/environment';
 import { API_URL } from '../app.config';
 import { LocalStorageService } from '../core/providers/local-storage/local-storage.service';

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.html

@@ -1,3 +1,10 @@
-<a class="btn btn-link btn-sm" [routerLink]="linkTo">
-    <clr-icon [attr.shape]="iconShape"></clr-icon> {{ label }}
-</a>
+<ng-container *ngIf="!disabled; else disabledLink">
+    <a class="btn btn-link btn-sm" [routerLink]="linkTo">
+        <clr-icon [attr.shape]="iconShape"></clr-icon> {{ label }}
+    </a>
+</ng-container>
+<ng-template #disabledLink>
+    <button class="btn btn-link btn-sm" disabled>
+        <clr-icon [attr.shape]="iconShape"></clr-icon> {{ label }}
+    </button>
+</ng-template>

admin-ui/src/app/shared/components/table-row-action/table-row-action.component.ts

@@ -12,4 +12,5 @@ export class TableRowActionComponent {
     @Input() linkTo: any[];
     @Input() label: string;
     @Input() iconShape: string;
+    @Input() disabled = false;
 }