feat(admin-ui): Enable deletion of Roles

packages/admin-ui/src/app/common/generated-types.ts

@@ -1785,6 +1785,8 @@ export type Mutation = {
   createRole: Role,
   /** Update an existing Role */
   updateRole: Role,
+  /** Delete an existing Role */
+  deleteRole: DeletionResponse,
   /** Create a new ShippingMethod */
   createShippingMethod: ShippingMethod,
   /** Update an existing ShippingMethod */
@@ -2125,6 +2127,11 @@ export type MutationUpdateRoleArgs = {
 };
 
 
+export type MutationDeleteRoleArgs = {
+  id: Scalars['ID']
+};
+
+
 export type MutationCreateShippingMethodArgs = {
   input: CreateShippingMethodInput
 };
@@ -3566,10 +3573,10 @@ export type Zone = Node & {
   name: Scalars['String'],
   members: Array<Country>,
 };
-export type AdministratorFragment = ({ __typename?: 'Administrator' } & Pick<Administrator, 'id' | 'createdAt' | 'updatedAt' | 'firstName' | 'lastName' | 'emailAddress'> & { user: ({ __typename?: 'User' } & Pick<User, 'id' | 'identifier' | 'lastLogin'> & { roles: Array<({ __typename?: 'Role' } & Pick<Role, 'id' | 'code' | 'description' | 'permissions'>)> }) });
-
 export type RoleFragment = ({ __typename?: 'Role' } & Pick<Role, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'description' | 'permissions'> & { channels: Array<({ __typename?: 'Channel' } & Pick<Channel, 'id' | 'code' | 'token'>)> });
 
+export type AdministratorFragment = ({ __typename?: 'Administrator' } & Pick<Administrator, 'id' | 'createdAt' | 'updatedAt' | 'firstName' | 'lastName' | 'emailAddress'> & { user: ({ __typename?: 'User' } & Pick<User, 'id' | 'identifier' | 'lastLogin'> & { roles: Array<({ __typename?: 'Role' } & RoleFragment)> }) });
+
 export type GetAdministratorsQueryVariables = {
   options?: Maybe<AdministratorListOptions>
 };
@@ -3626,6 +3633,13 @@ export type UpdateRoleMutationVariables = {
 
 export type UpdateRoleMutation = ({ __typename?: 'Mutation' } & { updateRole: ({ __typename?: 'Role' } & RoleFragment) });
 
+export type DeleteRoleMutationVariables = {
+  id: Scalars['ID']
+};
+
+
+export type DeleteRoleMutation = ({ __typename?: 'Mutation' } & { deleteRole: ({ __typename?: 'DeletionResponse' } & Pick<DeletionResponse, 'result' | 'message'>) });
+
 export type AssignRoleToAdministratorMutationVariables = {
   administratorId: Scalars['ID'],
   roleId: Scalars['ID']
@@ -4492,17 +4506,17 @@ type DiscriminateUnion<T, U> = T extends U ? T : never;
 
 type RequireField<T, TNames extends string> = T & { [P in TNames]: (T & { [name: string]: never })[P] };
 
-export namespace Administrator {
-  export type Fragment = AdministratorFragment;
-  export type User = AdministratorFragment['user'];
-  export type Roles = (NonNullable<AdministratorFragment['user']['roles'][0]>);
-}
-
 export namespace Role {
   export type Fragment = RoleFragment;
   export type Channels = (NonNullable<RoleFragment['channels'][0]>);
 }
 
+export namespace Administrator {
+  export type Fragment = AdministratorFragment;
+  export type User = AdministratorFragment['user'];
+  export type Roles = RoleFragment;
+}
+
 export namespace GetAdministrators {
   export type Variables = GetAdministratorsQueryVariables;
   export type Query = GetAdministratorsQuery;
@@ -4553,6 +4567,12 @@ export namespace UpdateRole {
   export type UpdateRole = RoleFragment;
 }
 
+export namespace DeleteRole {
+  export type Variables = DeleteRoleMutationVariables;
+  export type Mutation = DeleteRoleMutation;
+  export type DeleteRole = DeleteRoleMutation['deleteRole'];
+}
+
 export namespace AssignRoleToAdministrator {
   export type Variables = AssignRoleToAdministratorMutationVariables;
   export type Mutation = AssignRoleToAdministratorMutation;

packages/admin-ui/src/app/data/definitions/administrator-definitions.ts

@@ -114,6 +114,15 @@ export const UPDATE_ROLE = gql`
     ${ROLE_FRAGMENT}
 `;
 
+export const DELETE_ROLE = gql`
+    mutation DeleteRole($id: ID!) {
+        deleteRole(id: $id) {
+            result
+            message
+        }
+    }
+`;
+
 export const ASSIGN_ROLE_TO_ADMINISTRATOR = gql`
     mutation AssignRoleToAdministrator($administratorId: ID!, $roleId: ID!) {
         assignRoleToAdministrator(administratorId: $administratorId, roleId: $roleId) {

packages/admin-ui/src/app/data/providers/administrator-data.service.ts

@@ -3,6 +3,7 @@ import {
     CreateAdministratorInput,
     CreateRole,
     CreateRoleInput,
+    DeleteRole,
     GetAdministrator,
     GetAdministrators,
     GetRole,
@@ -15,6 +16,7 @@ import {
 import {
     CREATE_ADMINISTRATOR,
     CREATE_ROLE,
+    DELETE_ROLE,
     GET_ADMINISTRATOR,
     GET_ADMINISTRATORS,
     GET_ROLE,
@@ -83,4 +85,8 @@ export class AdministratorDataService {
     updateRole(input: UpdateRoleInput) {
         return this.baseDataService.mutate<UpdateRole.Mutation, UpdateRole.Variables>(UPDATE_ROLE, { input });
     }
+
+    deleteRole(id: string) {
+        return this.baseDataService.mutate<DeleteRole.Mutation, DeleteRole.Variables>(DELETE_ROLE, { id });
+    }
 }

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

@@ -21,6 +21,7 @@
     <vdr-dt-column>{{ 'settings.channel' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.permissions' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-role="item">
         <td class="left align-middle">{{ role.description }}</td>
         <td class="left align-middle"><span *ngIf="!isDefaultRole(role)">{{ role.code }}</span></td>
@@ -61,5 +62,25 @@
                 [linkTo]="['./', role.id]"
             ></vdr-table-row-action>
         </td>
+        <td class="right align-middle">
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger [disabled]="isDefaultRole(role)">
+                    {{ 'common.actions' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button
+                        type="button"
+                        class="delete-button"
+                        (click)="deleteRole(role.id)"
+                        [disabled]="!('SuperAdmin' | hasPermission)"
+                        vdrDropdownItem
+                    >
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
+                    </button>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
+        </td>
     </ng-template>
 </vdr-data-table>

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

@@ -1,10 +1,15 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { EMPTY } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from 'shared/shared-constants';
 
 import { BaseListComponent } from '../../../common/base-list.component';
 import { GetRoles, Role } from '../../../common/generated-types';
+import { _ } from '../../../core/providers/i18n/mark-for-extraction';
+import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
+import { ModalService } from '../../../shared/providers/modal/modal.service';
 
 @Component({
     selector: 'vdr-role-list',
@@ -16,7 +21,13 @@ export class RoleListComponent extends BaseListComponent<GetRoles.Query, GetRole
     readonly initialLimit = 3;
     displayLimit: { [id: string]: number } = {};
 
-    constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
+    constructor(
+        private modalService: ModalService,
+        private notificationService: NotificationService,
+        private dataService: DataService,
+        router: Router,
+        route: ActivatedRoute,
+    ) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.administrator.getRoles(...args),
@@ -35,4 +46,29 @@ export class RoleListComponent extends BaseListComponent<GetRoles.Query, GetRole
     isDefaultRole(role: Role): boolean {
         return role.code === SUPER_ADMIN_ROLE_CODE || role.code === CUSTOMER_ROLE_CODE;
     }
+
+    deleteRole(id: string) {
+        this.modalService
+            .dialog({
+                title: _('settings.confirm-delete-role'),
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(switchMap(response => (response ? this.dataService.administrator.deleteRole(id) : EMPTY)))
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'Role',
+                    });
+                    this.refresh();
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'Role',
+                    });
+                },
+            );
+    }
 }