File size: 3,165 Bytes
3206347 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { useMutation } from '@apollo/client';
import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import Container from 'components/Container';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
import { getPermissions } from 'helpers/computePermissions.ee';
import useFormatMessage from 'hooks/useFormatMessage';
export default function CreateRole() {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createRole, { loading }] = useMutation(CREATE_ROLE);
const enqueueSnackbar = useEnqueueSnackbar();
const handleRoleCreation = async (roleData) => {
try {
const permissions = getPermissions(roleData.computedPermissions);
await createRole({
variables: {
input: {
name: roleData.name,
description: roleData.description,
permissions,
},
},
});
enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
variant: 'success',
SnackbarProps: {
'data-test': 'snackbar-create-role-success',
},
});
navigate(URLS.ROLES);
} catch (error) {
throw new Error('Failed while creating!');
}
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle data-test="create-role-title">
{formatMessage('createRolePage.title')}
</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleRoleCreation}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
data-test="name-input"
/>
<TextField
name="description"
label={formatMessage('roleForm.description')}
fullWidth
data-test="description-input"
/>
<PermissionCatalogField
name="computedPermissions"
defaultChecked={true}
/>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
data-test="create-button"
>
{formatMessage('createRole.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}
|