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 import { AutocompleteCat } from 'components/autocomplete/autocomplete';
  15
  16 type SharingStyles = 'root';
  17
  18 const styles: CustomStyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
  19     root: {
  20         padding: `${theme.spacing(1)} 0`,
  21     },
  22 });
  23
  24 const SharingInvitationFormComponent = (props: { onSave: () => void }) => <StyledSharingInvitationFormComponent onSave={props.onSave} />
  25
  26 export default SharingInvitationFormComponent;
  27
  28 const StyledSharingInvitationFormComponent = withStyles(styles)(
  29     ({ classes }: { onSave: () => void } & WithStyles<SharingStyles>) =>
  30         <Grid container spacing={1} wrap='nowrap' className={classes.root} >
  31             <Grid data-cy="invite-people-field" item xs={8}>
  32                 <InvitedPeopleField />
  33             </Grid>
  34             <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
  35                 <PermissionSelectField />
  36             </Grid>
  37         </Grid >);
  38
  39 const InvitedPeopleField = () =>
  40     <FieldArray
  41         name='invitedPeople'
  42         component={InvitedPeopleFieldComponent as any} />;
  43
  44
  45 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  46     <ParticipantSelect
  47         items={fields.getAll() || []}
  48         onSelect={fields.push}
  49         onDelete={fields.remove}
  50         category={AutocompleteCat.SHARING} />;
  51
  52 const PermissionSelectField = () =>
  53     <Field
  54         name='permissions'
  55         component={PermissionSelectComponent}
  56         format={formatPermissionLevel}
  57         parse={parsePermissionLevel} />;
  58
  59 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  60     <FormControl variant="standard" fullWidth>
  61         <InputLabel>Authorization</InputLabel>
  62         <PermissionSelect {...input} />
  63     </FormControl>;