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 } from '@material-ui/core';
   8 import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
   9 import { ParticipantSelect, Participant } from './participant-select';
  10
  11 export default () =>
  12     <Grid container spacing={8}>
  13         <Grid data-cy="invite-people-field" item xs={8}>
  14             <InvitedPeopleField />
  15         </Grid>
  16         <Grid data-cy="permission-select-field" item xs={4}>
  17             <PermissionSelectField />
  18         </Grid>
  19     </Grid>;
  20
  21 const InvitedPeopleField = () =>
  22     <FieldArray
  23         name='invitedPeople'
  24         component={InvitedPeopleFieldComponent as any} />;
  25
  26
  27 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  28     <ParticipantSelect
  29         items={fields.getAll() || []}
  30         onSelect={fields.push}
  31         onDelete={fields.remove} />;
  32
  33 const PermissionSelectField = () =>
  34     <Field
  35         name='permissions'
  36         component={PermissionSelectComponent}
  37         format={formatPermissionLevel}
  38         parse={parsePermissionLevel} />;
  39
  40 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  41     <FormControl fullWidth>
  42         <InputLabel>Authorization</InputLabel>
  43         <PermissionSelect {...input} />
  44     </FormControl>;