95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
import { useFieldArray, useFormContext } from 'react-hook-form';
|
|
import MuiTextField from '@mui/material/TextField';
|
|
import Stack from '@mui/material/Stack';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Button from '@mui/material/Button';
|
|
import { Divider, Typography } from '@mui/material';
|
|
|
|
import useRoles from 'hooks/useRoles.ee';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
import ControlledAutocomplete from 'components/ControlledAutocomplete';
|
|
import TextField from 'components/TextField';
|
|
|
|
function generateRoleOptions(roles) {
|
|
return roles?.map(({ name: label, id: value }) => ({ label, value }));
|
|
}
|
|
|
|
function RoleMappingsFieldArray() {
|
|
const formatMessage = useFormatMessage();
|
|
const { control } = useFormContext();
|
|
const { data, isLoading: isRolesLoading } = useRoles();
|
|
const roles = data?.data;
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
control,
|
|
name: 'roleMappings',
|
|
});
|
|
|
|
const handleAppendMapping = () => append({ roleId: '', remoteRoleName: '' });
|
|
|
|
const handleRemoveMapping = (index) => () => remove(index);
|
|
|
|
return (
|
|
<>
|
|
{fields.length === 0 && (
|
|
<Typography>{formatMessage('roleMappingsForm.notFound')}</Typography>
|
|
)}
|
|
{fields.map((field, index) => (
|
|
<div key={field.id}>
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
alignItems="flex-start"
|
|
pb={1.5}
|
|
pt={0.5}
|
|
>
|
|
<Stack
|
|
direction={{ xs: 'column', md: 'row' }}
|
|
spacing={2}
|
|
alignItems="stretch"
|
|
sx={{ flex: 1 }}
|
|
>
|
|
<TextField
|
|
name={`roleMappings.${index}.remoteRoleName`}
|
|
label={formatMessage('roleMappingsForm.remoteRoleName')}
|
|
fullWidth
|
|
required
|
|
/>
|
|
<ControlledAutocomplete
|
|
name={`roleMappings.${index}.roleId`}
|
|
fullWidth
|
|
disablePortal
|
|
disableClearable
|
|
options={generateRoleOptions(roles)}
|
|
renderInput={(params) => (
|
|
<MuiTextField
|
|
{...params}
|
|
label={formatMessage('roleMappingsForm.role')}
|
|
/>
|
|
)}
|
|
loading={isRolesLoading}
|
|
required
|
|
/>
|
|
</Stack>
|
|
<IconButton
|
|
aria-label="delete"
|
|
color="primary"
|
|
size="large"
|
|
sx={{ alignSelf: 'flex-start' }}
|
|
onClick={handleRemoveMapping(index)}
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
{index < fields.length - 1 && <Divider />}
|
|
</div>
|
|
))}
|
|
<Button fullWidth onClick={handleAppendMapping}>
|
|
{formatMessage('roleMappingsForm.appendRoleMapping')}
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
export default RoleMappingsFieldArray;
|