Update styling for the Add User form (#1355)

* update styling of add user form * fix tests * fix: tweaked some props for edit dialog --------- Co-authored-by: Mac Deluca <[email protected]> Co-authored-by: Mac Deluca <[email protected]>
bcgov · Sep 4, 2024 · bb4f7dd · bb4f7dd
1 parent bb198fa
commit bb4f7dd
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 191 deletions.
diff --git a/app/src/AppRouter.tsx b/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>

diff --git a/app/src/components/fields/CustomTextField.tsx b/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}

diff --git a/app/src/features/admin/users/ActiveUsersList.test.tsx b/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>
   );
 };

diff --git a/app/src/features/admin/users/ActiveUsersList.tsx b/app/src/features/admin/users/ActiveUsersList.tsx
@@ -16,11 +16,13 @@ import { DialogContext, ISnackbarProps } from 'contexts/dialogContext';
 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 ActiveUsersList = (props: IActiveUsersListProps) => {
 
   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 ActiveUsersList = (props: IActiveUsersListProps) => {
   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 @@ const ActiveUsersList = (props: IActiveUsersListProps) => {
         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 @@ const ActiveUsersList = (props: IActiveUsersListProps) => {
       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,21 +392,29 @@ const ActiveUsersList = (props: IActiveUsersListProps) => {
       </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
+          validationSchema: AddSystemUsersFormYupSchema,
+          validateOnBlur: false
         }}
         onCancel={() => setOpenAddUserDialog(false)}
         onSave={(values) => {