Skip to content

Commit

Permalink
[BHBC-948] UI Updates / Cleanup (#652)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeznorth
jeznorth authored Nov 24, 2021
1 parent 1609191 commit 1c88d34
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 79 deletions.
2 changes: 1 addition & 1 deletion app/src/components/boundary/InferredLocationDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const InferredLocationDetails: React.FC<IInferredLocationDetailsProps> = (props)
</Typography>

{data.map((item: string, index: number) => (
<Typography key={index} variant="body1">
<Typography key={index} variant="body1" component="div">
{item}
{index < data.length - 1 && ', '}
</Typography>
Expand Down
13 changes: 8 additions & 5 deletions app/src/features/admin/users/AccessRequestList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import RequestDialog from 'components/dialog/RequestDialog';
Expand Down Expand Up @@ -181,10 +182,12 @@ const AccessRequestList: React.FC<IAccessRequestListProps> = (props) => {
)
}}
/>
<Box component={Paper} p={3}>
<Box pb={3}>
<Typography variant="h2">Access Requests ({accessRequests?.length || 0})</Typography>
</Box>
<Paper>
<Toolbar disableGutters>
<Box px={2}>
<Typography variant="h2">Access Requests ({accessRequests?.length || 0})</Typography>
</Box>
</Toolbar>
<TableContainer>
<Table className={classes.table}>
<TableHead>
Expand Down Expand Up @@ -228,7 +231,7 @@ const AccessRequestList: React.FC<IAccessRequestListProps> = (props) => {
</TableBody>
</Table>
</TableContainer>
</Box>
</Paper>
</>
);
};
Expand Down
81 changes: 45 additions & 36 deletions app/src/features/admin/users/ActiveUsersList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Theme } from '@material-ui/core/styles/createMuiTheme';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import Toolbar from '@material-ui/core/Toolbar';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
Expand Down Expand Up @@ -78,11 +79,13 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
dialogTitle: 'Remove user?',
dialogContent: (
<>
<Typography variant="body1">
<Typography variant="body1" color="textPrimary">
Removing user <strong>{row.user_identifier}</strong> will revoke their access to this application and all
related projects.
</Typography>
<Typography variant="body1">Are you sure you want to proceed?</Typography>
<Typography variant="body1" color="textPrimary">
Are you sure you want to proceed?
</Typography>
</>
),
yesButtonLabel: 'Remove User',
Expand Down Expand Up @@ -113,7 +116,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
snackbarMessage: (
<>
<Typography variant="body2" component="div">
User <strong>{user.user_identifier}</strong> removed.
User <strong>{user.user_identifier}</strong> removed from application.
</Typography>
</>
),
Expand Down Expand Up @@ -183,16 +186,18 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {

return (
<>
<Box component={Paper} p={3}>
<Box pb={3}>
<Typography variant="h2">Active Users ({activeUsers?.length || 0})</Typography>
</Box>
<Paper>
<Toolbar disableGutters>
<Box px={2}>
<Typography variant="h2">Active Users ({activeUsers?.length || 0})</Typography>
</Box>
</Toolbar>
<TableContainer>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell>Roles</TableCell>
<TableCell>Role</TableCell>
<TableCell width="100px" align="center">
Actions
</TableCell>
Expand All @@ -211,35 +216,39 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
<TableRow data-testid={`active-user-row-${index}`} key={row.id}>
<TableCell>{row.user_identifier || 'Not Applicable'}</TableCell>
<TableCell>
<CustomMenuButton
buttonLabel={row.role_names.join(', ') || 'Not Applicable'}
buttonTitle={'Change User Permissions'}
buttonProps={{ variant: 'text' }}
menuItems={codes.system_roles
.sort((item1, item2) => {
return item1.name.localeCompare(item2.name);
})
.map((item) => {
return {
menuLabel: item.name,
menuOnClick: () => handleChangeUserPermissionsClick(row, item.name, item.id)
};
})}
buttonEndIcon={<Icon path={mdiMenuDown} size={1} />}
/>
<Box my={-1}>
<CustomMenuButton
buttonLabel={row.role_names.join(', ') || 'Not Applicable'}
buttonTitle={'Change User Permissions'}
buttonProps={{ variant: 'text' }}
menuItems={codes.system_roles
.sort((item1, item2) => {
return item1.name.localeCompare(item2.name);
})
.map((item) => {
return {
menuLabel: item.name,
menuOnClick: () => handleChangeUserPermissionsClick(row, item.name, item.id)
};
})}
buttonEndIcon={<Icon path={mdiMenuDown} size={1} />}
/>
</Box>
</TableCell>
<TableCell align="center">
<CustomMenuIconButton
buttonTitle="Actions"
buttonIcon={<Icon path={mdiDotsVertical} size={0.875} />}
menuItems={[
{
menuIcon: <Icon path={mdiTrashCanOutline} size={0.875} />,
menuLabel: 'Remove User',
menuOnClick: () => handleRemoveUserClick(row)
}
]}
/>
<Box my={-1}>
<CustomMenuIconButton
buttonTitle="Actions"
buttonIcon={<Icon path={mdiDotsVertical} size={0.875} />}
menuItems={[
{
menuIcon: <Icon path={mdiTrashCanOutline} size={0.875} />,
menuLabel: 'Remove User',
menuOnClick: () => handleRemoveUserClick(row)
}
]}
/>
</Box>
</TableCell>
</TableRow>
))}
Expand All @@ -259,7 +268,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
}
/>
)}
</Box>
</Paper>
</>
);
};
Expand Down
26 changes: 15 additions & 11 deletions app/src/features/projects/participants/AddProjectParticipantsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ export const AddProjectParticipantsFormInitialValues: IAddProjectParticipantsFor
export const AddProjectParticipantsFormYupSchema = yup.object().shape({
participants: yup.array().of(
yup.object().shape({
userIdentifier: yup.string().required('Required'),
identitySource: yup.string().required('Required'),
roleId: yup.number().required('Required')
userIdentifier: yup.string().required('Username is required'),
identitySource: yup.string().required('Login Method is required'),
roleId: yup.number().required('Role is required')
})
)
});
Expand All @@ -57,7 +57,7 @@ const AddProjectParticipantsForm: React.FC<AddProjectParticipantsFormProps> = (p
name="participants"
render={(arrayHelpers) => (
<Box>
<Grid container direction="row" spacing={3}>
<Grid container direction="row" spacing={2}>
{values.participants?.map((participant, index) => {
const userIdentifierMeta = getFieldMeta(`participants.[${index}].userIdentifier`);
const identitySourceMeta = getFieldMeta(`participants.[${index}].identitySource`);
Expand All @@ -80,18 +80,20 @@ const AddProjectParticipantsForm: React.FC<AddProjectParticipantsFormProps> = (p
</Box>
<Box flexBasis="30%" pl={1}>
<FormControl fullWidth variant="outlined" required={true} style={{ width: '100%' }}>
<InputLabel id="roleId">Username Type</InputLabel>
<InputLabel id="loginMethod" required={false}>
Login Method
</InputLabel>
<Select
id={`participants.[${index}].identitySource`}
name={`participants.[${index}].identitySource`}
labelId="user_type"
label="User Type"
labelId="login_method"
label="Login Method"
value={participant.identitySource}
labelWidth={300}
onChange={handleChange}
error={identitySourceMeta.touched && Boolean(identitySourceMeta.error)}
displayEmpty
inputProps={{ 'aria-label': 'Username Type' }}>
inputProps={{ 'aria-label': 'Login Method' }}>
<MenuItem key={'IDIR'} value={'IDIR'}>
IDIR
</MenuItem>
Expand All @@ -104,7 +106,9 @@ const AddProjectParticipantsForm: React.FC<AddProjectParticipantsFormProps> = (p
</Box>
<Box flexBasis="35%" pl={1}>
<FormControl fullWidth variant="outlined" required={true} style={{ width: '100%' }}>
<InputLabel id="Id">Project Role</InputLabel>
<InputLabel id="Id" required={false}>
Project Role
</InputLabel>
<Select
id={`participants.[${index}].roleId`}
name={`participants.[${index}].roleId`}
Expand Down Expand Up @@ -142,13 +146,13 @@ const AddProjectParticipantsForm: React.FC<AddProjectParticipantsFormProps> = (p
<Box pt={2}>
<Button
type="button"
variant="outlined"
variant="text"
color="primary"
aria-label="add participant"
data-testid="add-participant-button"
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => arrayHelpers.push(AddProjectParticipantsFormArrayItemInitialValues)}>
Add Participant
<strong>Add Team Members</strong>
</Button>
</Box>
</Box>
Expand Down
20 changes: 8 additions & 12 deletions app/src/features/projects/participants/ProjectParticipantsHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Paper from '@material-ui/core/Paper';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Typography from '@material-ui/core/Typography';
import { mdiArrowLeft, mdiPlus } from '@mdi/js';
import { mdiPlus } from '@mdi/js';
import Icon from '@mdi/react';
import EditDialog from 'components/dialog/EditDialog';
import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
Expand Down Expand Up @@ -126,36 +126,32 @@ const ProjectParticipantsHeader: React.FC<IProjectParticipantsHeaderProps> = (pr

<Box display="flex" justifyContent="space-between">
<Box pb={4}>
<Box mb={1.5} display="flex">
<Button
color="primary"
variant="text"
startIcon={<Icon path={mdiArrowLeft} size={1} />}
onClick={() => history.goBack()}
/>
<Box display="flex">
<Typography className={classes.spacingRight} variant="h1">
Project Team
</Typography>
</Box>
</Box>
<Box ml={4} mb={4}>
<Button
color="primary"
variant="outlined"
disableElevation
data-testid="invite-project-users-button"
aria-label={'Invite People'}
aria-label={'Add Team Members'}
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => setOpenAddParticipantsDialog(true)}>
Add Project Participants
<strong>Add Team Members</strong>
</Button>
</Box>
</Box>
</Container>
</Paper>

<EditDialog
dialogTitle={'Add Project Participants'}
dialogTitle={'Add Team Members'}
open={openAddParticipantsDialog}
dialogSaveButtonLabel={'Add'}
component={{
element: (
<AddProjectParticipantsForm
Expand All @@ -177,7 +173,7 @@ const ProjectParticipantsHeader: React.FC<IProjectParticipantsHeaderProps> = (pr
open: true,
snackbarMessage: (
<Typography variant="body2" component="div">
{values.participants.length} project members added.
{values.participants.length} team {values.participants.length > 1 ? 'members' : 'member'} added.
</Typography>
)
});
Expand Down
Loading

0 comments on commit 1c88d34

Please sign in to comment.