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 import { ArvadosTheme } from 'common/custom-theme';
  14
  15 type SharingStyles = 'root' | 'addButtonRoot' | 'addButtonPrimary' | 'addButtonDisabled';
  16
  17 const styles: StyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
  18     root: {
  19         padding: `${theme.spacing.unit}px 0`,
  20     },
  21     addButtonRoot: {
  22         height: "36px",
  23         width: "36px",
  24         marginRight: "6px",
  25         marginLeft: "6px",
  26         marginTop: "12px",
  27     },
  28     addButtonPrimary: {
  29         color: theme.palette.primary.contrastText,
  30         background: theme.palette.primary.main,
  31         "&:hover": {
  32             background: theme.palette.primary.dark,
  33         }
  34     },
  35     addButtonDisabled: {
  36         background: 'none',
  37     }
  38 });
  39
  40 const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) => <StyledSharingInvitationFormComponent onSave={props.onSave} saveEnabled={props.saveEnabled} />
  41
  42 export default SharingInvitationFormComponent;
  43
  44 const StyledSharingInvitationFormComponent = withStyles(styles)(
  45     ({ onSave, saveEnabled, classes }: { onSave: () => void, saveEnabled: boolean } & WithStyles<SharingStyles>) =>
  46         <Grid container spacing={8} wrap='nowrap' className={classes.root} >
  47             <Grid data-cy="invite-people-field" item xs={8}>
  48                 <InvitedPeopleField />
  49             </Grid>
  50             <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
  51                 <PermissionSelectField />
  52                 <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
  53                     root: classes.addButtonRoot,
  54                     colorPrimary: classes.addButtonPrimary,
  55                     disabled: classes.addButtonDisabled
  56                 }}
  57                     data-cy='add-invited-people'>
  58                     <Tooltip title="Add authorization">
  59                         <AddIcon />
  60                     </Tooltip>
  61                 </IconButton>
  62             </Grid>
  63         </Grid >);
  64
  65 const InvitedPeopleField = () =>
  66     <FieldArray
  67         name='invitedPeople'
  68         component={InvitedPeopleFieldComponent as any} />;
  69
  70
  71 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  72     <ParticipantSelect
  73         items={fields.getAll() || []}
  74         onSelect={fields.push}
  75         onDelete={fields.remove} />;
  76
  77 const PermissionSelectField = () =>
  78     <Field
  79         name='permissions'
  80         component={PermissionSelectComponent}
  81         format={formatPermissionLevel}
  82         parse={parsePermissionLevel} />;
  83
  84 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  85     <FormControl fullWidth>
  86         <InputLabel>Authorization</InputLabel>
  87         <PermissionSelect {...input} />
  88     </FormControl>;