Merge pull request #1493 from target/delete-user-ui

ui/users: user delete dialog

web/src/app/users/UserContactMethodList.js

@@ -15,7 +15,7 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
 import { styles as globalStyles } from '../styles/materialStyles'
 import useWidth from '../util/useWidth'
 import Spinner from '../loading/components/Spinner'
-import { GenericError } from '../error-pages'
+import { GenericError, ObjectNotFound } from '../error-pages'
 import SendTestDialog from './SendTestDialog'
 
 const query = gql`
@@ -63,6 +63,7 @@ export default function UserContactMethodList(props) {
   })
 
   if (loading && !data) return <Spinner />
+  if (!data.user) return <ObjectNotFound type='user' />
   if (error) return <GenericError error={error.message} />
 
   const contactMethods = data.user.contactMethods

web/src/app/users/UserDeleteDialog.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { gql, useQuery, useMutation } from '@apollo/client'
+import { useHistory } from 'react-router'
+import Spinner from '../loading/components/Spinner'
+import FormDialog from '../dialogs/FormDialog'
+import { useSessionInfo } from '../util/RequireConfig'
+import { GenericError } from '../error-pages'
+
+const query = gql`
+  query($id: ID!) {
+    user(id: $id) {
+      id
+      name
+    }
+  }
+`
+const mutation = gql`
+  mutation($input: [TargetInput!]!) {
+    deleteAll(input: $input)
+  }
+`
+
+interface RotationDeleteDialogProps {
+  userID: string
+  onClose: () => void
+}
+
+function UserDeleteDialog(props: RotationDeleteDialogProps): JSX.Element {
+  const { userID: currentUserID, ready: isSessionReady } = useSessionInfo()
+  const history = useHistory()
+
+  const { data, loading: qLoading, error: qError } = useQuery(query, {
+    variables: { id: props.userID },
+  })
+
+  const [deleteUser, { loading: mLoading, error: mError }] = useMutation(
+    mutation,
+    {
+      variables: {
+        input: [
+          {
+            id: props.userID,
+            type: 'user',
+          },
+        ],
+      },
+      onCompleted: ({ deleteAll }) => {
+        if (deleteAll) return history.push('/users')
+      },
+    },
+  )
+
+  if (!isSessionReady || (!data && qLoading)) return <Spinner />
+  if (qError) return <GenericError error={qError.message} />
+
+  return (
+    <FormDialog
+      title='Are you sure?'
+      confirm
+      subTitle={`This will delete the user: ${data?.user?.name}`}
+      loading={mLoading}
+      errors={mError ? [mError] : []}
+      onClose={props.onClose}
+      onSubmit={() => deleteUser()}
+      notices={
+        props.userID === currentUserID
+          ? [
+              {
+                type: 'WARNING',
+                message: 'You are about to delete your own user account',
+                details:
+                  'You will be logged out immediately and unable to log back in',
+              },
+            ]
+          : []
+      }
+    />
+  )
+}
+
+export default UserDeleteDialog

web/src/app/users/UserDetails.js

@@ -19,6 +19,9 @@ import Spinner from '../loading/components/Spinner'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import { useConfigValue, useSessionInfo } from '../util/RequireConfig'
 import AppLink from '../util/AppLink'
+import PageActions from '../util/PageActions'
+import UserDeleteDialog from './UserDeleteDialog'
+import OtherActions from '../util/OtherActions'
 
 const userQuery = gql`
   query userInfo($id: ID!) {
@@ -105,6 +108,7 @@ export default function UserDetails(props) {
   const [createCM, setCreateCM] = useState(false)
   const [createNR, setCreateNR] = useState(false)
   const [showVerifyDialogByID, setShowVerifyDialogByID] = useState(null)
+  const [showUserDeleteDialog, setShowUserDeleteDialog] = useState(false)
 
   const { data, loading: isQueryLoading, error } = useQuery(
     isAdmin || props.userID === currentUserID ? profileQuery : userQuery,
@@ -153,6 +157,24 @@ export default function UserDetails(props) {
 
   return (
     <React.Fragment>
+      {isAdmin && (
+        <PageActions>
+          <OtherActions
+            actions={[
+              {
+                label: 'Delete User',
+                onClick: () => setShowUserDeleteDialog(true),
+              },
+            ]}
+          />
+        </PageActions>
+      )}
+      {showUserDeleteDialog && (
+        <UserDeleteDialog
+          userID={props.userID}
+          onClose={() => setShowUserDeleteDialog(false)}
+        />
+      )}
       {props.readOnly ? null : (
         <SpeedDial
           label='Add Items'

web/src/cypress/integration/users.ts

@@ -34,6 +34,22 @@ function testUsers(screen: ScreenFormat): void {
       cy.get('ul').should('contain', prof.name)
     })
   })
+
+  describe('Page Actions', () => {
+    it('should delete a user', () => {
+      cy.adminLogin()
+
+      cy.fixture('users').then((users) => {
+        cy.visit(`/users/${users[0].id}`)
+
+        cy.pageAction('Delete')
+        cy.dialogTitle('Are you sure?')
+        cy.dialogFinish('Confirm')
+
+        cy.get('[data-cy=apollo-list]').should('not.contain', users[0].name)
+      })
+    })
+  })
 }
 
 testScreen('Users', testUsers)