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, Tooltip, IconButton, StyleRulesCallback } from '@material-ui/core';
   8 import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
   9 import { ParticipantSelect, Participant } from './participant-select';
  10 import { AddIcon } from 'components/icon/icon';
  11 import { WithStyles } from '@material-ui/core/styles';
  12 import withStyles from '@material-ui/core/styles/withStyles';
  13
  14 const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
  15     root: {
  16         padding: `${theme.spacing.unit}px 0`,
  17     }
  18 });
  19
  20 const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) =>
  21     <Grid container spacing={8} >
  22         <Grid data-cy="invite-people-field" item xs={8}>
  23             <InvitedPeopleField />
  24         </Grid>
  25         <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
  26             <PermissionSelectField />
  27             <Tooltip title="Add authorization">
  28                 <IconButton onClick={props.onSave} disabled={!props.saveEnabled} color="primary">
  29                     <AddIcon />
  30                 </IconButton>
  31             </Tooltip>
  32         </Grid>
  33     </Grid>;
  34
  35 export default SharingInvitationFormComponent;
  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>;