Update styling for the Add User form

app/src/AppRouter.tsx

@@ -83,7 +83,9 @@ const AppRouter: React.FC = () => {
           <AuthenticatedRouteGuard>
             <SystemRoleRouteGuard validRoles={[SYSTEM_ROLE.SYSTEM_ADMIN]}>
               <DialogContextProvider>
-                <AdminUsersRouter />
+                <CodesContextProvider>
+                  <AdminUsersRouter />
+                </CodesContextProvider>
               </DialogContextProvider>
             </SystemRoleRouteGuard>
           </AuthenticatedRouteGuard>

app/src/components/dialog/EditDialog.tsx

@@ -124,7 +124,7 @@ export const EditDialog = <T extends FormikValues>(props: PropsWithChildren<IEdi
       initialValues={props.component.initialValues}
       enableReinitialize={true}
       validationSchema={props.component.validationSchema}
-      validateOnBlur={props.component.validateOnBlur ?? true}
+      validateOnBlur={props.component.validateOnBlur ?? false}
       validateOnChange={props.component.validateOnChange ?? false}
       onSubmit={(values) => {
         props.onSave(values);

app/src/components/fields/CustomTextField.tsx

@@ -9,6 +9,13 @@ export interface ICustomTextField {
    * @memberof ICustomTextField
    */
   label: string;
+  /**
+   * Placeholder for the text field
+   *
+   * @type {string}
+   * @memberof ICustomTextField
+   */
+  placeholder?: string;
   /**
    * Name of the text field, typically this is used to identify the field in the formik context.
    *
@@ -34,13 +41,14 @@ export interface ICustomTextField {
 const CustomTextField = (props: React.PropsWithChildren<ICustomTextField>) => {
   const { touched, errors, values, handleChange, handleBlur } = useFormikContext<any>();
 
-  const { name, label, other } = props;
+  const { name, label, other, placeholder } = props;
 
   return (
     <TextField
       name={name}
       label={label}
       id={name}
+      placeholder={placeholder}
       inputProps={{ 'data-testid': name, maxLength: props.maxLength || undefined }} // targets the internal input rather than the react component
       onChange={handleChange}
       onBlur={handleBlur}

app/src/features/admin/users/ActiveUsersList.test.tsx

@@ -1,6 +1,8 @@
 import { AuthStateContext } from 'contexts/authStateContext';
+import { CodesContext, ICodesContext } from 'contexts/codesContext';
 import { createMemoryHistory } from 'history';
 import { useBiohubApi } from 'hooks/useBioHubApi';
+import { DataLoader } from 'hooks/useDataLoader';
 import { Router } from 'react-router';
 import { getMockAuthState, SystemAdminAuthState } from 'test-helpers/auth-helpers';
 import { codes } from 'test-helpers/code-helpers';
@@ -19,17 +21,29 @@ const mockUseApi = {
   },
   admin: {
     addSystemUser: jest.fn()
+  },
+  codes: {
+    getAllCodeSets: jest.fn()
   }
 };
 
+const mockCodesContext: ICodesContext = {
+  codesDataLoader: {
+    data: codes,
+    load: () => {}
+  } as DataLoader<any, any, any>
+};
+
 const renderContainer = (props: IActiveUsersListProps) => {
   const authState = getMockAuthState({ base: SystemAdminAuthState });
 
   return render(
     <AuthStateContext.Provider value={authState}>
-      <Router history={history}>
-        <ActiveUsersList {...props} />
-      </Router>
+      <CodesContext.Provider value={mockCodesContext}>
+        <Router history={history}>
+          <ActiveUsersList {...props} />
+        </Router>
+      </CodesContext.Provider>
     </AuthStateContext.Provider>
   );
 };

app/src/features/admin/users/ActiveUsersList.tsx

@@ -16,11 +16,13 @@
 import { APIError } from 'hooks/api/useAxios';
 import { useAuthStateContext } from 'hooks/useAuthStateContext';
 import { useBiohubApi } from 'hooks/useBioHubApi';
+import { useCodesContext } from 'hooks/useContext';
 import { IGetAllCodeSetsResponse } from 'interfaces/useCodesApi.interface';
 import { ISystemUser } from 'interfaces/useUserApi.interface';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { Link as RouterLink } from 'react-router-dom';
+import { getCodesName } from 'utils/Utils';
 import AddSystemUsersForm, {
   AddSystemUsersFormInitialValues,
   AddSystemUsersFormYupSchema,
@@ -50,6 +52,12 @@
 
   const [openAddUserDialog, setOpenAddUserDialog] = useState(false);
 
+  const codesContext = useCodesContext();
+
+  useEffect(() => {
+    codesContext.codesDataLoader.load();
+  }, [codesContext.codesDataLoader]);
+
   const activeUsersColumnDefs: GridColDef<ISystemUser>[] = [
     {
       field: 'user_identifier',
@@ -279,16 +287,16 @@
   const handleAddSystemUsersSave = async (values: IAddSystemUsersForm) => {
     setOpenAddUserDialog(false);
 
+    const systemUser = values.systemUser;
+
     try {
-      for (const systemUser of values.systemUsers) {
-        await biohubApi.admin.addSystemUser(
-          systemUser.userIdentifier,
-          systemUser.identitySource,
-          systemUser.displayName,
-          systemUser.email,
-          systemUser.systemRole
-        );
-      }
+      await biohubApi.admin.addSystemUser(
+        systemUser.userIdentifier,
+        systemUser.identitySource,
+        systemUser.displayName,
+        systemUser.email,
+        systemUser.systemRole
+      );
 
       // Refresh users list
       refresh();
@@ -297,7 +305,7 @@
         open: true,
         snackbarMessage: (
           <Typography variant="body2" component="div">
-            {values.systemUsers.length} system {values.systemUsers.length > 1 ? 'users' : 'user'} added.
+            Successfully added {systemUser.displayName}
           </Typography>
         )
       });
@@ -307,8 +315,12 @@
       if (apiError.status === 409) {
         dialogContext.setErrorDialog({
           open: true,
-          dialogTitle: 'Failed to create users',
-          dialogText: 'One of the users you added already exists.',
+          dialogTitle: 'User already exists',
+          dialogText: `${systemUser.displayName} already exists as a ${getCodesName(
+            codesContext.codesDataLoader.data,
+            'system_roles',
+            systemUser.systemRole
+          )}`,
           onClose: () => {
             dialogContext.setErrorDialog({ open: false });
           },
@@ -380,18 +392,25 @@
       </Paper>
 
       <EditDialog
-        dialogTitle={'Add Users'}
+        dialogTitle={'Add User'}
         open={openAddUserDialog}
         dialogSaveButtonLabel={'Add'}
+        size="sm"
         component={{
           element: (
-            <AddSystemUsersForm
-              systemRoles={
-                codes?.system_roles?.map((item) => {
-                  return { value: item.id, label: item.name };
-                }) || []
-              }
-            />
+            <>
+              <Typography color="textSecondary" mb={3}>
+                This form creates a new user that will be linked to an IDIR/BCeID when an account with a matching
+                username, email, and account type logs in.
+              </Typography>
+              <AddSystemUsersForm
+                systemRoles={
+                  codes?.system_roles?.map((item) => {
+                    return { value: item.id, label: item.name };
+                  }) || []
+                }
+              />
+            </>
           ),
           initialValues: AddSystemUsersFormInitialValues,
           validationSchema: AddSystemUsersFormYupSchema