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, Tooltip, IconButton, StyleRulesCallback, Typography } 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' | 'shareWarning' ;
  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     shareWarning: {
  39         color: theme.palette.error.main,
  40         marginTop: '-1.1rem',
  41         marginBottom: 0,
  42         fontSize: '0.75rem',
  43     },
  44 });
  45
  46 const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) => <StyledSharingInvitationFormComponent onSave={props.onSave} saveEnabled={props.saveEnabled} />
  47
  48 export default SharingInvitationFormComponent;
  49
  50 const StyledSharingInvitationFormComponent = withStyles(styles)(
  51     ({ onSave, saveEnabled, classes }: { onSave: () => void, saveEnabled: boolean } & WithStyles<SharingStyles>) =>
  52         <Grid container spacing={8} wrap='nowrap' className={classes.root} >
  53             <Grid data-cy="invite-people-field" item xs={8}>
  54                 <InvitedPeopleField />
  55                 {saveEnabled &&
  56                     <Typography
  57                         variant='caption'
  58                         className={classes.shareWarning}
  59                         >
  60                         You must click &#x1F7A4; to add a participant.
  61                     </Typography>}
  62             </Grid>
  63             <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
  64                 <PermissionSelectField />
  65                 <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
  66                     root: classes.addButtonRoot,
  67                     colorPrimary: classes.addButtonPrimary,
  68                     disabled: classes.addButtonDisabled
  69                 }}
  70                     data-cy='add-invited-people'>
  71                     <Tooltip title="Add authorization">
  72                         <AddIcon />
  73                     </Tooltip>
  74                 </IconButton>
  75             </Grid>
  76         </Grid >);
  77
  78 const InvitedPeopleField = () =>
  79     <FieldArray
  80         name='invitedPeople'
  81         component={InvitedPeopleFieldComponent as any} />;
  82
  83
  84 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  85     <ParticipantSelect
  86         items={fields.getAll() || []}
  87         onSelect={fields.push}
  88         onDelete={fields.remove} />;
  89
  90 const PermissionSelectField = () =>
  91     <Field
  92         name='permissions'
  93         component={PermissionSelectComponent}
  94         format={formatPermissionLevel}
  95         parse={parsePermissionLevel} />;
  96
  97 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  98     <FormControl fullWidth>
  99         <InputLabel>Authorization</InputLabel>
 100         <PermissionSelect {...input} />
 101     </FormControl>;