Fix/aah 329 disable self delete (#300)

* Fix error where failing to delete a user throws a failed and a success message.

* Prevent users from deleting themselves or admins.

* Fix isUserSelfOrAdmin function.

Author: newswangerd

src/containers/user-management/delete-user-modal.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Modal, Button, Spinner } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { UserType, UserAPI } from '../../api';
+import { mapErrorMessages } from '../../utilities';
+import { AppContext } from '../../loaders/app-context';
 
 interface IState {
   isWaitingForResponse: boolean;
@@ -11,10 +13,12 @@ interface IProps {
   isOpen: boolean;
   user?: UserType;
   closeModal: (didDelete: boolean) => void;
-  addAlert: (message, variant) => void;
+  addAlert: (message, variant, description?) => void;
 }
 
 export class DeleteUserModal extends React.Component<IProps, IState> {
+  static contextType = AppContext;
+
   constructor(props) {
     super(props);
 
@@ -47,7 +51,7 @@ export class DeleteUserModal extends React.Component<IProps, IState> {
         }
         actions={[
           <Button
-            isDisabled={isWaitingForResponse}
+            isDisabled={isWaitingForResponse || this.isUserSelfOrAdmin(user)}
             key='delete'
             variant='danger'
             onClick={() => this.deleteUser()}
@@ -59,23 +63,45 @@ export class DeleteUserModal extends React.Component<IProps, IState> {
           </Button>,
         ]}
       >
-        {user.username} will be permanently deleted.
+        {this.getActionDescription(user)}
       </Modal>
     );
   }
 
+  private getActionDescription(user: UserType) {
+    if (user.is_superuser) {
+      return 'Deleting super users is not allowed.';
+    } else if (user.id === this.context.user.id) {
+      return 'Deleting yourself is not allowed.';
+    }
+
+    return `${user.username} will be permanently deleted.`;
+  }
+
+  private isUserSelfOrAdmin = (user: UserType): boolean => {
+    return user.is_superuser || user.id === this.context.user.id;
+  };
+
   private deleteUser = () => {
     this.setState({ isWaitingForResponse: true }, () =>
       UserAPI.delete(this.props.user.id)
-        .then(this.waitForDeleteConfirm(this.props.user.id))
-        .catch(() => this.props.addAlert('Error deleting user.', 'danger')),
+        .then(() => this.waitForDeleteConfirm(this.props.user.id))
+        .catch(err => {
+          this.props.addAlert(
+            'Error deleting user.',
+            'danger',
+            mapErrorMessages(err)['__nofield'],
+          );
+          this.props.closeModal(false);
+        })
+        .finally(() => this.setState({ isWaitingForResponse: false })),
     );
   };
 
   // Wait for the user to actually get removed from the database before closing the
   // modal
   private waitForDeleteConfirm(user) {
-    UserAPI.get(user.id)
+    UserAPI.get(user)
       .then(async result => {
         // wait half a second
         await new Promise(r => setTimeout(r, 500));

src/containers/user-management/user-detail.tsx

@@ -69,9 +69,11 @@ class UserDetail extends React.Component<RouteComponentProps, IState> {
           isOpen={showDeleteModal}
           closeModal={this.closeModal}
           user={userDetail}
-          addAlert={(text, variant) =>
+          addAlert={(text, variant, description = undefined) =>
             this.setState({
-              alerts: alerts.concat([{ title: text, variant: variant }]),
+              alerts: alerts.concat([
+                { title: text, variant: variant, description: description },
+              ]),
             })
           }
         ></DeleteUserModal>

src/containers/user-management/user-list.tsx

@@ -123,9 +123,11 @@ class UserList extends React.Component<RouteComponentProps, IState> {
           isOpen={showDeleteModal}
           closeModal={this.closeModal}
           user={deleteUser}
-          addAlert={(text, variant) =>
+          addAlert={(text, variant, description = undefined) =>
             this.setState({
-              alerts: alerts.concat([{ title: text, variant: variant }]),
+              alerts: alerts.concat([
+                { title: text, variant: variant, description: description },
+              ]),
             })
           }
         ></DeleteUserModal>
@@ -329,7 +331,7 @@ class UserList extends React.Component<RouteComponentProps, IState> {
         <td>{user.first_name}</td>
         <td>
           {user.groups.map(g => (
-            <Label>{g.name}</Label>
+            <Label key={g.id}>{g.name}</Label>
           ))}
         </td>
         <td>{moment(user.date_joined).fromNow()}</td>

src/utilities/map-error-messages.ts

@@ -9,7 +9,7 @@ export function mapErrorMessages(err) {
     } else {
       // some error responses are too cool to have a
       // parameter set on them >:(
-      messages['__nofield'] = e.detail;
+      messages['__nofield'] = e.detail || e.title;
     }
   }
   return messages;