From 341a7a925ca7cd9791fff4af908ff1c03f2e4bcd Mon Sep 17 00:00:00 2001
From: Amelia Vance <amelia.vance@associates.cisa.dhs.gov>
Date: Fri, 15 Mar 2024 13:36:04 -0400
Subject: [PATCH 1/3] Update User list functionality and design in Users.tsx

---
 frontend/src/pages/Users/Users.tsx | 610 +++++++++++++++++------------
 1 file changed, 350 insertions(+), 260 deletions(-)

diff --git a/frontend/src/pages/Users/Users.tsx b/frontend/src/pages/Users/Users.tsx
index d4947d69..854fdab9 100644
--- a/frontend/src/pages/Users/Users.tsx
+++ b/frontend/src/pages/Users/Users.tsx
@@ -1,32 +1,36 @@
 import classes from './Users.module.scss';
-import React, { useCallback, useRef, useState } from 'react';
-import {
-  Button,
-  TextInput,
-  Label,
-  Modal,
-  ModalFooter,
-  ModalHeading,
-  ModalRef
-} from '@trussworks/react-uswds';
-import { ModalToggleButton } from 'components';
-import { Table, ImportExport } from 'components';
-import { Column, SortingRule } from 'react-table';
-import { Organization, Query, User } from 'types';
-import { FaTimes } from 'react-icons/fa';
-import { useAuthContext } from 'context';
-// @ts-ignore:next-line
-import { formatDistanceToNow, parseISO } from 'date-fns';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
+  Alert,
+  Button as MuiButton,
+  Dialog as MuiDialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  IconButton,
+  Paper,
   Radio,
   RadioGroup,
-  FormControlLabel,
-  ButtonGroup
+  TextField,
+  Typography
 } from '@mui/material';
+import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+import { Add, CheckCircleOutline, Delete } from '@mui/icons-material';
+import CustomToolbar from 'components/DataGrid/CustomToolbar';
+import ConfirmDialog from 'components/Dialog/ConfirmDialog';
+import InfoDialog from 'components/Dialog/InfoDialog';
+import { ImportExport } from 'components';
+import { initializeUser, Organization, User } from 'types';
+import { useAuthContext } from 'context';
+// @ts-ignore:next-line
+import { formatDistanceToNow, parseISO } from 'date-fns';
 
-interface Errors extends Partial<User> {
-  global?: string;
-}
+type ErrorStates = {
+  getUsersError: string;
+  getAddUserError: string;
+  getDeleteError: string;
+};
 
 export interface ApiResponse {
   result: User[];
@@ -34,102 +38,33 @@ export interface ApiResponse {
   url?: string;
 }
 
-export const Users: React.FC = () => {
-  const { user, apiPost, apiDelete } = useAuthContext();
-  const modalRef = useRef<ModalRef>(null);
-  const [selectedRow, setSelectedRow] = useState<number>(0);
-  const [users, setUsers] = useState<User[]>([]);
+interface UserType extends User {
+  lastLoggedInString?: string | null | undefined;
+  dateToUSigned?: string | null | undefined;
+  orgs?: string | null | undefined;
+}
 
-  const columns: Column<User>[] = [
-    {
-      Header: 'Name',
-      accessor: 'fullName',
-      width: 200,
-      disableFilters: true,
-      id: 'name'
-    },
-    {
-      Header: 'Email',
-      accessor: 'email',
-      width: 150,
-      minWidth: 150,
-      id: 'email',
-      disableFilters: true
-    },
-    {
-      Header: 'Organizations',
-      accessor: ({ roles }) =>
-        roles &&
-        roles
-          .filter((role) => role.approved)
-          .map((role) => role.organization.name)
-          .join(', '),
-      id: 'organizations',
-      width: 200,
-      disableFilters: true,
-      disableSortBy: true
-    },
-    {
-      Header: 'User type',
-      accessor: ({ userType }) =>
-        userType === 'standard'
-          ? 'Standard'
-          : userType === 'globalView'
-          ? 'Global View'
-          : 'Global Admin',
-      width: 50,
-      minWidth: 50,
-      id: 'userType',
-      disableFilters: true
-    },
-    {
-      Header: 'Date ToU Signed',
-      accessor: ({ dateAcceptedTerms }) =>
-        dateAcceptedTerms
-          ? `${formatDistanceToNow(parseISO(dateAcceptedTerms))} ago`
-          : 'None',
-      width: 50,
-      minWidth: 50,
-      id: 'dateAcceptedTerms',
-      disableFilters: true
-    },
-    {
-      Header: 'ToU Version',
-      accessor: 'acceptedTermsVersion',
-      width: 50,
-      minWidth: 50,
-      id: 'acceptedTermsVersion',
-      disableFilters: true
-    },
-    {
-      Header: 'Last Logged In',
-      accessor: ({ lastLoggedIn }) =>
-        lastLoggedIn
-          ? `${formatDistanceToNow(parseISO(lastLoggedIn))} ago`
-          : 'None',
-      width: 50,
-      minWidth: 50,
-      id: 'lastLoggedIn',
-      disableFilters: true
-    },
-    {
-      Header: 'Delete',
-      id: 'delete',
-      Cell: ({ row }: { row: { index: number } }) => (
-        <span
-          onClick={() => {
-            modalRef.current?.toggleModal(undefined, true);
-            setSelectedRow(row.index);
-          }}
-        >
-          <FaTimes />
-        </span>
-      ),
-      disableFilters: true
-    }
-  ];
-  const [errors, setErrors] = useState<Errors>({});
+type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 
+export const Users: React.FC = () => {
+  const { user, apiGet, apiPost, apiDelete } = useAuthContext();
+  const [selectedRow, setSelectedRow] = useState<UserType>(initializeUser);
+  const [users, setUsers] = useState<UserType[]>([]);
+  const [newUserDialogOpen, setNewUserDialogOpen] = useState(false);
+  const [deleteUserDialogOpen, setDeleteUserDialogOpen] = useState(false);
+  const [infoDialogOpen, setInfoDialogOpen] = useState(false);
+  const [infoDialogContent, setInfoDialogContent] = useState<String>('');
+  const [formErrors, setFormErrors] = useState({
+    firstName: false,
+    lastName: false,
+    email: false,
+    userType: false
+  });
+  const [errorStates, setErrorStates] = useState<ErrorStates>({
+    getUsersError: '',
+    getAddUserError: '',
+    getDeleteError: ''
+  });
   const [values, setValues] = useState<{
     firstName: string;
     lastName: string;
@@ -142,86 +77,167 @@ export const Users: React.FC = () => {
     email: '',
     userType: ''
   });
-  const userSearch = useCallback(
-    async ({
-      sort,
-      groupBy = undefined
-    }: {
-      sort: SortingRule<User>[];
-      groupBy?: string;
-    }): Promise<ApiResponse | undefined> => {
-      try {
-        const tableFilters: any = {};
-        return await apiPost<ApiResponse>('/users/search', {
-          body: {
-            page: 1,
-            sort: sort[0]?.id ?? 'email',
-            order: sort[0]?.desc ? 'DESC' : 'ASC',
-            filters: tableFilters,
-            pageSize: -1,
-            groupBy
-          }
-        });
-      } catch (e) {
-        console.error(e);
-        return;
-      }
-    },
-    [apiPost]
-  );
 
-  const fetchUsers = useCallback(
-    async (query: Query<User>) => {
-      const resp = await userSearch({
-        sort: query.sort
+  const fetchUsers = useCallback(async () => {
+    try {
+      const rows = await apiGet<UserType[]>(`/users/`);
+      rows.forEach((obj) => {
+        obj.lastLoggedInString = obj.lastLoggedIn
+          ? `${formatDistanceToNow(parseISO(obj.lastLoggedIn))} ago`
+          : 'None';
+        obj.dateToUSigned = obj.dateAcceptedTerms
+          ? `${formatDistanceToNow(parseISO(obj.dateAcceptedTerms))} ago`
+          : 'None';
+        obj.orgs = obj.roles
+          ? obj.roles
+              .filter((role) => role.approved)
+              .map((role) => role.organization.name)
+              .join(', ')
+          : 'None';
       });
-      if (!resp) return;
-      const { result } = resp;
-      setUsers(result);
+      setUsers(rows);
+      setErrorStates({ ...errorStates, getUsersError: '' });
+    } catch (e: any) {
+      setErrorStates({ ...errorStates, getUsersError: e.message });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiGet]);
+
+  useEffect(() => {
+    fetchUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const userCols: GridColDef[] = [
+    { field: 'fullName', headerName: 'Name', minWidth: 100, flex: 1 },
+    { field: 'email', headerName: 'Email', minWidth: 100, flex: 1.75 },
+    {
+      field: 'orgs',
+      headerName: 'Organizations',
+      minWidth: 100,
+      flex: 1
+    },
+    { field: 'userType', headerName: 'User Type', minWidth: 100, flex: 0.75 },
+    {
+      field: 'dateToUSigned',
+      headerName: 'Date ToU Signed',
+      minWidth: 100,
+      flex: 0.75
+    },
+    {
+      field: 'acceptedTermsVersion',
+      headerName: 'ToU Version',
+      minWidth: 100,
+      flex: 0.5
+    },
+    {
+      field: 'lastLoggedInString',
+      headerName: 'Last Logged In',
+      minWidth: 100,
+      flex: 0.75
     },
-    [userSearch]
+    {
+      field: 'delete',
+      headerName: 'Delete',
+      minWidth: 100,
+      flex: 0.4,
+      renderCell: (cellValues: GridRenderCellParams) => {
+        return (
+          <IconButton
+            color="primary"
+            onClick={() => {
+              setSelectedRow(cellValues.row);
+              setDeleteUserDialogOpen(true);
+            }}
+          >
+            <Delete />
+          </IconButton>
+        );
+      }
+    }
+  ];
+
+  const addUserButton = user?.userType === 'globalAdmin' && (
+    <MuiButton
+      size="small"
+      sx={{ '& .MuiButton-startIcon': { mr: '2px', mb: '2px' } }}
+      startIcon={<Add />}
+      onClick={() => setNewUserDialogOpen(true)}
+    >
+      Invite New User
+    </MuiButton>
   );
 
-  const deleteRow = async (index: number) => {
+  const handleCloseAddUserDialog = (value: CloseReason) => {
+    if (value === 'backdropClick' || value === 'escapeKeyDown') {
+      return;
+    }
+    setNewUserDialogOpen(false);
+    setFormErrors({
+      firstName: false,
+      lastName: false,
+      email: false,
+      userType: false
+    });
+  };
+
+  const deleteRow = async (row: UserType) => {
     try {
-      const row = users[index];
       await apiDelete(`/users/${row.id}`, { body: {} });
       setUsers(users.filter((user) => user.id !== row.id));
+      setErrorStates({ ...errorStates, getUsersError: '' });
+      setInfoDialogContent('This user has been successfully removed.');
+      setDeleteUserDialogOpen(false);
+      setInfoDialogOpen(true);
     } catch (e: any) {
-      setErrors({
-        global:
-          e.status === 422 ? 'Unable to delete user' : e.message ?? e.toString()
-      });
+      setErrorStates({ ...errorStates, getDeleteError: e.message });
+      setInfoDialogContent(
+        'This user has been not been removed. Check the console log for more details.'
+      );
       console.log(e);
     }
   };
 
-  const onSubmit: React.FormEventHandler = async (e) => {
+  const onSubmit = async (e: any) => {
     e.preventDefault();
+    console.log(e);
+    const body = {
+      firstName: values.firstName,
+      lastName: values.lastName,
+      email: values.email,
+      userType: values.userType
+    };
+    const { firstName, lastName, email, userType } = values;
+    const newFormErrors = {
+      firstName: !firstName,
+      lastName: !lastName,
+      email: !email,
+      userType: !userType
+    };
+    setFormErrors(newFormErrors);
+    if (Object.values(newFormErrors).some((error) => error)) {
+      return;
+    }
     try {
-      const body = {
-        firstName: values.firstName,
-        lastName: values.lastName,
-        email: values.email,
-        userType: values.userType
-      };
       const user = await apiPost('/users/', {
         body
       });
       setUsers(users.concat(user));
+      setErrorStates({ ...errorStates, getAddUserError: '' });
+      handleCloseAddUserDialog('closeButtonClick');
+      setInfoDialogContent('This user has been successfully added.');
+      setInfoDialogOpen(true);
     } catch (e: any) {
-      setErrors({
-        global:
-          e.status === 422
-            ? 'Error when submitting user entry.'
-            : e.message ?? e.toString()
-      });
+      setErrorStates({ ...errorStates, getAddUserError: e.message });
+      setInfoDialogContent(
+        'This user has been not been added. Check the console log for more details.'
+      );
       console.log(e);
     }
   };
 
   const onTextChange: React.ChangeEventHandler<
-    HTMLInputElement | HTMLSelectElement
+    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
   > = (e) => onChange(e.target.name, e.target.value);
 
   const onChange = (name: string, value: any) => {
@@ -231,72 +247,165 @@ export const Users: React.FC = () => {
     }));
   };
 
+  const textFieldStyling = {
+    '& .MuiOutlinedInput-root': {
+      '&.Mui-focused fieldset': {
+        borderRadius: '0px'
+      }
+    }
+  };
+
+  const confirmDeleteUserDialog = (
+    <ConfirmDialog
+      isOpen={deleteUserDialogOpen}
+      onConfirm={() => {
+        deleteRow(selectedRow);
+      }}
+      onCancel={() => setDeleteUserDialogOpen(false)}
+      title={'Are you sure you want to delete this user?'}
+      content={
+        <>
+          <Typography mb={3}>
+            This request will permanently remove <b>{selectedRow?.fullName}</b>{' '}
+            from Crossfeed and cannot be undone.
+          </Typography>
+          {errorStates.getDeleteError && (
+            <Alert severity="error">
+              Error removing user: {errorStates.getDeleteError}. See the network
+              tab for more details.
+            </Alert>
+          )}
+        </>
+      }
+      screenWidth="xs"
+    />
+  );
+
   return (
     <div className={classes.root}>
       <h1>Users</h1>
-      <Table<User> columns={columns} data={users} fetchData={fetchUsers} />
-      <h2>Invite a user</h2>
-      <form onSubmit={onSubmit} className={classes.form}>
-        {errors.global && <p className={classes.error}>{errors.global}</p>}
-        <Label htmlFor="firstName">First Name</Label>
-        <TextInput
-          required
-          maxLength={250}
-          id="firstName"
-          name="firstName"
-          className={classes.textField}
-          type="text"
-          value={values.firstName}
-          onChange={onTextChange}
-        />
-        <Label htmlFor="lastName">Last Name</Label>
-        <TextInput
-          required
-          id="lastName"
-          name="lastName"
-          maxLength={250}
-          className={classes.textField}
-          type="text"
-          value={values.lastName}
-          onChange={onTextChange}
-        />
-        <Label htmlFor="email">Email</Label>
-        <TextInput
-          required
-          id="email"
-          name="email"
-          maxLength={250}
-          className={classes.textField}
-          type="text"
-          value={values.email}
-          onChange={onTextChange}
+      <Paper elevation={0}>
+        <DataGrid
+          rows={users}
+          columns={userCols}
+          slots={{ toolbar: CustomToolbar }}
+          slotProps={{
+            toolbar: { children: addUserButton }
+          }}
         />
-        <Label htmlFor="userType">User Type</Label>
-        <RadioGroup
-          aria-label="User Type"
-          name="userType"
-          value={values.userType}
-          onChange={onTextChange}
-        >
-          <FormControlLabel
-            value="standard"
-            control={<Radio color="primary" />}
-            label="Standard"
+      </Paper>
+      {confirmDeleteUserDialog}
+      <MuiDialog
+        open={newUserDialogOpen}
+        onClose={(_, reason) => handleCloseAddUserDialog(reason)}
+        fullWidth
+        maxWidth="xs"
+      >
+        <DialogTitle>Invite a User</DialogTitle>
+        <DialogContent>
+          <Typography mt={1}>First Name</Typography>
+          <TextField
+            sx={textFieldStyling}
+            placeholder="Enter a First Name"
+            size="small"
+            margin="dense"
+            id="firstName"
+            inputProps={{ maxLength: 250 }}
+            name="firstName"
+            error={formErrors.firstName}
+            helperText={formErrors.firstName && 'First Name is required'}
+            type="text"
+            fullWidth
+            value={values.firstName}
+            onChange={onTextChange}
           />
-          <FormControlLabel
-            value="globalView"
-            control={<Radio color="primary" />}
-            label="Global View"
+          <Typography mt={1}>Last Name</Typography>
+          <TextField
+            sx={textFieldStyling}
+            placeholder="Enter a Last Name"
+            size="small"
+            margin="dense"
+            id="lastName"
+            inputProps={{ maxLength: 250 }}
+            name="lastName"
+            error={formErrors.lastName}
+            helperText={formErrors.lastName && 'Last Name is required'}
+            type="text"
+            fullWidth
+            value={values.lastName}
+            onChange={onTextChange}
           />
-          <FormControlLabel
-            value="globalAdmin"
-            control={<Radio color="primary" />}
-            label="Global Administrator"
+          <Typography mt={1}>Email</Typography>
+          <TextField
+            sx={textFieldStyling}
+            placeholder="Enter an Email"
+            size="small"
+            margin="dense"
+            id="email"
+            inputProps={{ maxLength: 250 }}
+            name="email"
+            error={formErrors.email}
+            helperText={formErrors.email && 'Email is required'}
+            type="text"
+            fullWidth
+            value={values.email}
+            onChange={onTextChange}
           />
-        </RadioGroup>
-        <br></br>
-        <Button type="submit">Invite User</Button>
-      </form>
+          <Typography mt={2}>User Type</Typography>
+          <RadioGroup
+            aria-label="User Type"
+            name="userType"
+            value={values.userType}
+            onChange={onTextChange}
+          >
+            <FormControlLabel
+              value="standard"
+              control={<Radio color="primary" />}
+              label="Standard"
+            />
+            <FormControlLabel
+              value="globalView"
+              control={<Radio color="primary" />}
+              label="Global View"
+            />
+            <FormControlLabel
+              value="globalAdmin"
+              control={<Radio color="primary" />}
+              label="Global Administrator"
+            />
+          </RadioGroup>
+          {formErrors.userType && (
+            <Typography variant="caption" color="error.main">
+              User Type is required
+            </Typography>
+          )}
+          {errorStates.getAddUserError && (
+            <Alert severity="error">
+              Error adding user to the database: {errorStates.getAddUserError}.
+              See the network tab for more details.
+            </Alert>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <MuiButton
+            variant="outlined"
+            onClick={() => {
+              setNewUserDialogOpen(false);
+              setFormErrors({
+                firstName: false,
+                lastName: false,
+                email: false,
+                userType: false
+              });
+            }}
+          >
+            Cancel
+          </MuiButton>
+          <MuiButton variant="contained" type="submit" onClick={onSubmit}>
+            Invite User
+          </MuiButton>
+        </DialogActions>
+      </MuiDialog>
       {user?.userType === 'globalAdmin' && (
         <>
           <ImportExport<
@@ -355,35 +464,16 @@ export const Users: React.FC = () => {
           />
         </>
       )}
-
-      <Modal ref={modalRef} id="modal">
-        <ModalHeading>Delete user?</ModalHeading>
-        <p>
-          Are you sure you would like to delete{' '}
-          <code>{users[selectedRow]?.fullName}</code>?
-        </p>
-        <ModalFooter>
-          <ButtonGroup>
-            <ModalToggleButton
-              modalRef={modalRef}
-              closer
-              onClick={() => {
-                deleteRow(selectedRow);
-              }}
-            >
-              Delete
-            </ModalToggleButton>
-            <ModalToggleButton
-              modalRef={modalRef}
-              closer
-              unstyled
-              className="padding-105 text-center"
-            >
-              Cancel
-            </ModalToggleButton>
-          </ButtonGroup>
-        </ModalFooter>
-      </Modal>
+      <InfoDialog
+        isOpen={infoDialogOpen}
+        handleClick={() => {
+          setInfoDialogOpen(false);
+          window.location.reload();
+        }}
+        icon={<CheckCircleOutline color="success" sx={{ fontSize: '80px' }} />}
+        title={<Typography variant="h4">Success </Typography>}
+        content={<Typography variant="body1">{infoDialogContent}</Typography>}
+      />
     </div>
   );
 };

From 5c35d7e12f59ad045633616f442efe09b955deb1 Mon Sep 17 00:00:00 2001
From: Amelia Vance <amelia.vance@associates.cisa.dhs.gov>
Date: Fri, 15 Mar 2024 13:56:02 -0400
Subject: [PATCH 2/3] Remove unused code in OrganizationList.tsx

---
 .../components/OrganizationList/OrganizationList.tsx  | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/OrganizationList/OrganizationList.tsx b/frontend/src/components/OrganizationList/OrganizationList.tsx
index f958bfcf..d35fc5dd 100644
--- a/frontend/src/components/OrganizationList/OrganizationList.tsx
+++ b/frontend/src/components/OrganizationList/OrganizationList.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import EditNoteOutlinedIcon from '@mui/icons-material/EditNoteOutlined';
 import { Organization } from 'types';
-import { Alert, Box, Button, IconButton, Grid } from '@mui/material';
+import { Alert, Box, Button, IconButton, Paper } from '@mui/material';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { useHistory } from 'react-router-dom';
 import { Add } from '@mui/icons-material';
@@ -93,12 +93,7 @@ export const OrganizationList: React.FC<{
 
   return (
     <Box mb={3}>
-      <Grid
-        container
-        spacing={2}
-        style={{ margin: '0 auto', marginTop: '1rem', maxWidth: '1000px' }}
-      ></Grid>
-      <Box sx={{ backgroundColor: 'white' }}>
+      <Paper elevation={0}>
         {organizations?.length === 0 ? (
           <Alert severity="warning">No organizations found.</Alert>
         ) : (
@@ -111,7 +106,7 @@ export const OrganizationList: React.FC<{
             }}
           />
         )}
-      </Box>
+      </Paper>
       <OrganizationForm
         onSubmit={onSubmit}
         open={dialogOpen}

From ff12f85b5bb3e9fd94751479a6c66aed54ca8f3f Mon Sep 17 00:00:00 2001
From: Amelia Vance <amelia.vance@associates.cisa.dhs.gov>
Date: Fri, 15 Mar 2024 14:49:13 -0400
Subject: [PATCH 3/3] Add functionality to reset form values in Users.tsx

---
 frontend/src/pages/Users/Users.tsx | 31 ++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/Users/Users.tsx b/frontend/src/pages/Users/Users.tsx
index 854fdab9..fd012e92 100644
--- a/frontend/src/pages/Users/Users.tsx
+++ b/frontend/src/pages/Users/Users.tsx
@@ -44,6 +44,21 @@ interface UserType extends User {
   orgs?: string | null | undefined;
 }
 
+type UserFormValues = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  organization?: Organization;
+  userType: string;
+};
+
+const initialUserFormValues = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  userType: ''
+};
+
 type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 
 export const Users: React.FC = () => {
@@ -65,18 +80,7 @@ export const Users: React.FC = () => {
     getAddUserError: '',
     getDeleteError: ''
   });
-  const [values, setValues] = useState<{
-    firstName: string;
-    lastName: string;
-    email: string;
-    organization?: Organization;
-    userType: string;
-  }>({
-    firstName: '',
-    lastName: '',
-    email: '',
-    userType: ''
-  });
+  const [values, setValues] = useState<UserFormValues>(initialUserFormValues);
 
   const fetchUsers = useCallback(async () => {
     try {
@@ -227,12 +231,14 @@ export const Users: React.FC = () => {
       handleCloseAddUserDialog('closeButtonClick');
       setInfoDialogContent('This user has been successfully added.');
       setInfoDialogOpen(true);
+      setValues(initialUserFormValues);
     } catch (e: any) {
       setErrorStates({ ...errorStates, getAddUserError: e.message });
       setInfoDialogContent(
         'This user has been not been added. Check the console log for more details.'
       );
       console.log(e);
+      setValues(initialUserFormValues);
     }
   };
 
@@ -397,6 +403,7 @@ export const Users: React.FC = () => {
                 email: false,
                 userType: false
               });
+              setValues(initialUserFormValues);
             }}
           >
             Cancel