diff --git a/app/src/components/toolbar/ActionToolbars.tsx b/app/src/components/toolbar/ActionToolbars.tsx index a217351f4a..84de70cd63 100644 --- a/app/src/components/toolbar/ActionToolbars.tsx +++ b/app/src/components/toolbar/ActionToolbars.tsx @@ -204,7 +204,7 @@ export const CustomMenuIconButton: React.FC = (props anchorEl={anchorEl} getContentAnchorEl={null} anchorOrigin={{ - vertical: 'bottom', + vertical: 'top', horizontal: 'right' }} transformOrigin={{ diff --git a/app/src/features/admin/users/AccessRequestList.test.tsx b/app/src/features/admin/users/AccessRequestList.test.tsx index a19637eda8..4415072548 100644 --- a/app/src/features/admin/users/AccessRequestList.test.tsx +++ b/app/src/features/admin/users/AccessRequestList.test.tsx @@ -72,11 +72,9 @@ describe('AccessRequestList', () => { ); await waitFor(() => { - expect(getByText('test user')).toBeVisible(); expect(getByText('testusername')).toBeVisible(); - expect(getByText('test company')).toBeVisible(); - expect(getByText('April-20-2020')).toBeVisible(); - expect(getByText('PENDING')).toBeVisible(); + expect(getByText('Apr 20, 2020')).toBeVisible(); + expect(getByText('Pending')).toBeVisible(); expect(getByRole('button')).toHaveTextContent('Review'); }); }); @@ -110,11 +108,9 @@ describe('AccessRequestList', () => { ); await waitFor(() => { - expect(getByText('test user')).toBeVisible(); expect(getByText('testusername')).toBeVisible(); - expect(getByText('test company')).toBeVisible(); - expect(getByText('April-20-2020')).toBeVisible(); - expect(getByText('DENIED')).toBeVisible(); + expect(getByText('Apr 20, 2020')).toBeVisible(); + expect(getByText('Denied')).toBeVisible(); expect(queryByRole('button')).not.toBeInTheDocument(); }); }); @@ -148,17 +144,15 @@ describe('AccessRequestList', () => { ); await waitFor(() => { - expect(getByText('test user')).toBeVisible(); expect(getByText('testusername')).toBeVisible(); - expect(getByText('test company')).toBeVisible(); - expect(getByText('April-20-2020')).toBeVisible(); - expect(getByText('APPROVED')).toBeVisible(); + expect(getByText('Apr 20, 2020')).toBeVisible(); + expect(getByText('Approved')).toBeVisible(); expect(queryByRole('button')).not.toBeInTheDocument(); }); }); it('shows a table row when the data object is null', async () => { - const { getByText, getAllByText } = renderContainer( + const { getByText } = renderContainer( [ { id: 1, @@ -177,9 +171,8 @@ describe('AccessRequestList', () => { ); await waitFor(() => { - expect(getAllByText('Not Applicable').length).toEqual(2); - expect(getByText('April-20-2020')).toBeVisible(); - expect(getByText('PENDING')).toBeVisible(); + expect(getByText('Apr 20, 2020')).toBeVisible(); + expect(getByText('Pending')).toBeVisible(); }); }); diff --git a/app/src/features/admin/users/AccessRequestList.tsx b/app/src/features/admin/users/AccessRequestList.tsx index 3f542a2f9b..d72c393487 100644 --- a/app/src/features/admin/users/AccessRequestList.tsx +++ b/app/src/features/admin/users/AccessRequestList.tsx @@ -29,9 +29,13 @@ import ReviewAccessRequestForm, { } from './ReviewAccessRequestForm'; const useStyles = makeStyles((theme: Theme) => ({ + table: { + tableLayout: 'fixed', + '& td': { + verticalAlign: 'middle' + } + }, chip: { - padding: '0px 8px', - borderRadius: '4px', color: 'white' }, chipPending: { @@ -42,12 +46,6 @@ const useStyles = makeStyles((theme: Theme) => ({ }, chipRejected: { backgroundColor: theme.palette.error.main - }, - actionButton: { - minWidth: '6rem', - '& + button': { - marginLeft: '0.5rem' - } } })); @@ -143,13 +141,13 @@ const AccessRequestList: React.FC = (props) => { let chipStatusClass; if (AdministrativeActivityStatusType.REJECTED === status_name) { - chipLabel = 'DENIED'; + chipLabel = 'Denied'; chipStatusClass = classes.chipRejected; } else if (AdministrativeActivityStatusType.ACTIONED === status_name) { - chipLabel = 'APPROVED'; + chipLabel = 'Approved'; chipStatusClass = classes.chipActioned; } else { - chipLabel = 'PENDING'; + chipLabel = 'Pending'; chipStatusClass = classes.chipPending; } @@ -183,53 +181,44 @@ const AccessRequestList: React.FC = (props) => { ) }} /> - - + + Access Requests ({accessRequests?.length || 0}) - +
- Name Username - Company - Regional Offices - Request Date - Status - + Date of Request + Access Status + + Actions + {!accessRequests?.length && ( - + No Access Requests )} {accessRequests?.map((row, index) => { - const regional_offices = row.data?.regional_offices - ?.map((regionId) => codes.regional_offices.find((code) => code.id === regionId)?.name) - .join(', '); - return ( - {row.data?.name || ''} {row.data?.username || ''} - {row.data?.company || 'Not Applicable'} - {regional_offices || 'Not Applicable'} - {getFormattedDate(DATE_FORMAT.MediumDateFormat2, row.create_date)} + {getFormattedDate(DATE_FORMAT.ShortMediumDateFormat, row.create_date)} {getChipIcon(row.status_name)} - + {row.status_name === AdministrativeActivityStatusType.PENDING && ( )} @@ -239,7 +228,7 @@ const AccessRequestList: React.FC = (props) => {
- + ); }; diff --git a/app/src/features/admin/users/ActiveUsersList.tsx b/app/src/features/admin/users/ActiveUsersList.tsx index 4f5848c399..2b03e9bf5f 100644 --- a/app/src/features/admin/users/ActiveUsersList.tsx +++ b/app/src/features/admin/users/ActiveUsersList.tsx @@ -2,6 +2,8 @@ import Box from '@material-ui/core/Box'; import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; +import { Theme } from '@material-ui/core/styles/createMuiTheme'; +import makeStyles from '@material-ui/core/styles/makeStyles'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; @@ -20,6 +22,15 @@ import { IGetUserResponse } from 'interfaces/useUserApi.interface'; import React, { useContext, useState } from 'react'; import { handleChangePage, handleChangeRowsPerPage } from 'utils/tablePaginationUtils'; +const useStyles = makeStyles((theme: Theme) => ({ + table: { + tableLayout: 'fixed', + '& td': { + verticalAlign: 'middle' + } + } +})); + export interface IActiveUsersListProps { activeUsers: IGetUserResponse[]; getUsers: (forceFetch: boolean) => void; @@ -32,6 +43,7 @@ export interface IActiveUsersListProps { * @return {*} */ const ActiveUsersList: React.FC = (props) => { + const classes = useStyles(); const biohubApi = useBiohubApi(); const { activeUsers } = props; @@ -64,13 +76,11 @@ const ActiveUsersList: React.FC = (props) => { dialogTitle: 'Remove user?', dialogContent: ( <> - - Removing {row.user_identifier} will revoke their access to this application and all related - projects. - - - Are you sure you want to proceed? + + Removing user {row.user_identifier} will revoke their access to this application and all + related projects. + Are you sure you want to proceed? ), yesButtonLabel: 'Remove User', @@ -117,21 +127,19 @@ const ActiveUsersList: React.FC = (props) => { return ( <> - - + + Active Users ({activeUsers?.length || 0}) - +
- Name Username - Company - Regional Offices Roles - Last Active - Actions + + Actions + @@ -145,24 +153,22 @@ const ActiveUsersList: React.FC = (props) => { {activeUsers.length > 0 && activeUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => ( - {row.user_identifier || 'Not Applicable'} - - {row.role_names.join(', ') || 'Not Applicable'} - - - } - menuItems={[ - { - menuIcon: , - menuLabel: 'Remove User', - menuOnClick: () => handleRemoveUserClick(row) - } - ]} - /> + + + } + menuItems={[ + { + menuIcon: , + menuLabel: 'Remove User', + menuOnClick: () => handleRemoveUserClick(row) + } + ]} + /> + ))} @@ -182,7 +188,7 @@ const ActiveUsersList: React.FC = (props) => { } /> )} - + ); }; diff --git a/app/src/pages/access/AccessRequestPage.tsx b/app/src/pages/access/AccessRequestPage.tsx index 1335fb141c..3ee1b15c80 100644 --- a/app/src/pages/access/AccessRequestPage.tsx +++ b/app/src/pages/access/AccessRequestPage.tsx @@ -2,7 +2,6 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; import Container from '@material-ui/core/Container'; -import Divider from '@material-ui/core/Divider'; import Paper from '@material-ui/core/Paper'; import { Theme } from '@material-ui/core/styles/createMuiTheme'; import makeStyles from '@material-ui/core/styles/makeStyles'; @@ -26,33 +25,6 @@ const useStyles = makeStyles((theme: Theme) => ({ '& + button': { marginLeft: '0.5rem' } - }, - breadCrumbLink: { - display: 'flex', - alignItems: 'center', - cursor: 'pointer' - }, - breadCrumbLinkIcon: { - marginRight: '0.25rem' - }, - finishContainer: { - padding: theme.spacing(3), - backgroundColor: 'transparent' - }, - stepper: { - backgroundColor: 'transparent' - }, - stepTitle: { - marginBottom: '0.45rem' - }, - spacingBottom: { - marginBottom: '0.9rem' - }, - legend: { - marginTop: '1rem', - float: 'left', - marginBottom: '0.75rem', - letterSpacing: '-0.01rem' } })); @@ -184,7 +156,7 @@ export const AccessRequestPage: React.FC = () => { } return ( - + { handleSubmitAccessRequest(values); }}> {({ handleSubmit }) => ( - <> - -

Request Access to SIMS

- - You will need to provide some additional details before accessing this application. Complete the form - below to request access. + + Request Access + + + You will need to provide some additional details before accessing this application. - -

Request Details

- -
- {requestForm} - - - - - - - {isSubmittingRequest && ( - - )} - - {/* - CircularProgress styling examples: - https://codesandbox.io/s/wonderful-cartwright-e18nc?file=/demo.tsx:895-1013 - https://menubar.io/creating-a-material-ui-button-with-spinner-that-reflects-loading-state - */} - + {isSubmittingRequest && ( + { - history.push('/logout'); - }} - className={classes.actionButton} - data-testid="logout-button"> - Log out - - - + /> + )} + + {/* + CircularProgress styling examples: + https://codesandbox.io/s/wonderful-cartwright-e18nc?file=/demo.tsx:895-1013 + https://menubar.io/creating-a-material-ui-button-with-spinner-that-reflects-loading-state + */} + - + - + )} diff --git a/app/src/pages/access/IDIRRequestForm.tsx b/app/src/pages/access/IDIRRequestForm.tsx index b7dc9d77fa..500387dab5 100644 --- a/app/src/pages/access/IDIRRequestForm.tsx +++ b/app/src/pages/access/IDIRRequestForm.tsx @@ -11,6 +11,7 @@ import RadioGroup from '@material-ui/core/RadioGroup'; import Select from '@material-ui/core/Select'; import { Theme } from '@material-ui/core/styles/createMuiTheme'; import makeStyles from '@material-ui/core/styles/makeStyles'; +import Typography from '@material-ui/core/Typography'; import CustomTextField from 'components/fields/CustomTextField'; import MultiAutocompleteFieldVariableSize from 'components/fields/MultiAutocompleteFieldVariableSize'; import { useFormikContext } from 'formik'; @@ -68,30 +69,32 @@ const IDIRRequestForm: React.FC = (props) => { -

Select which role you want to be assigned to

- - Role - - {errors.role} - + What role do you want to be assigned? + + + Role + + {errors.role} + + {false && ( // TODO Release 1 Patch (BHBC-1442): Remove regional offices section @@ -132,27 +135,29 @@ const IDIRRequestForm: React.FC = (props) => { )} + - {values.work_from_regional_office === 'true' && ( - -

Which Regional Offices do you work for?

- { - return { value: item.id, label: item.name }; - }) || [] - } - /> - - )} + {values.work_from_regional_office === 'true' && ( + + Which Regional Offices do you work for? + { + return { value: item.id, label: item.name }; + }) || [] + } + /> + + )} - -

Additional comments

- - - + + Reason for your request + + + + ); }; diff --git a/app/src/pages/access/__snapshots__/AccessRequestPage.test.tsx.snap b/app/src/pages/access/__snapshots__/AccessRequestPage.test.tsx.snap index 81b5999850..72cfda6b9c 100644 --- a/app/src/pages/access/__snapshots__/AccessRequestPage.test.tsx.snap +++ b/app/src/pages/access/__snapshots__/AccessRequestPage.test.tsx.snap @@ -3,44 +3,49 @@ exports[`AccessRequestPage renders correctly 1`] = `
-

- Request Access to SIMS -

-
- You will need to provide some additional details before accessing this application. Complete the form below to request access. -
+ Request Access +
-

- Request Details -

-
-
+ You will need to provide some additional details before accessing this application. +

+
+
+ +
+

+ What role do you want to be assigned? +

-

- Select which role you want to be assigned to -

+
+
+
+

+ Reason for your request +

+
-

- Additional comments -

+
- -
+