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