services/workbench2/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { Grid, FormControl, InputLabel } from '@mui/material';
   9 import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
  10 import { ParticipantSelect, Participant } from './participant-select';
  11 import { WithStyles } from '@mui/styles';
  12 import withStyles from '@mui/styles/withStyles';
  13 import { ArvadosTheme } from 'common/custom-theme';
  14
  15 type SharingStyles = 'root';
  16
  17 const styles: CustomStyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
  18     root: {
  19         padding: `${theme.spacing(1)} 0`,
  20     },
  21 });
  22
  23 const SharingInvitationFormComponent = (props: { onSave: () => void }) => <StyledSharingInvitationFormComponent onSave={props.onSave} />
  24
  25 export default SharingInvitationFormComponent;
  26
  27 const StyledSharingInvitationFormComponent = withStyles(styles)(
  28     ({ classes }: { onSave: () => void } & WithStyles<SharingStyles>) =>
  29         <Grid container spacing={1} wrap='nowrap' className={classes.root} >
  30             <Grid data-cy="invite-people-field" item xs={8}>
  31                 <InvitedPeopleField />
  32             </Grid>
  33             <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
  34                 <PermissionSelectField />
  35             </Grid>
  36         </Grid >);
  37
  38 const InvitedPeopleField = () =>
  39     <FieldArray
  40         name='invitedPeople'
  41         component={InvitedPeopleFieldComponent as any} />;
  42
  43
  44 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  45     <ParticipantSelect
  46         items={fields.getAll() || []}
  47         onSelect={fields.push}
  48         onDelete={fields.remove} />;
  49
  50 const PermissionSelectField = () =>
  51     <Field
  52         name='permissions'
  53         component={PermissionSelectComponent}
  54         format={formatPermissionLevel}
  55         parse={parsePermissionLevel} />;
  56
  57 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  58     <FormControl variant="standard" fullWidth>
  59         <InputLabel>Authorization</InputLabel>
  60         <PermissionSelect {...input} />
  61     </FormControl>;