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                 <Tooltip title="Add authorization">
  53                     <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
  54                         root: classes.addButtonRoot,
  55                         colorPrimary: classes.addButtonPrimary,
  56                         disabled: classes.addButtonDisabled
  57                     }}>
  58                         <AddIcon />
  59                     </IconButton>
  60                 </Tooltip>
  61             </Grid>
  62         </Grid >);
  63
  64 const InvitedPeopleField = () =>
  65     <FieldArray
  66         name='invitedPeople'
  67         component={InvitedPeopleFieldComponent as any} />;
  68
  69
  70 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
  71     <ParticipantSelect
  72         items={fields.getAll() || []}
  73         onSelect={fields.push}
  74         onDelete={fields.remove} />;
  75
  76 const PermissionSelectField = () =>
  77     <Field
  78         name='permissions'
  79         component={PermissionSelectComponent}
  80         format={formatPermissionLevel}
  81         parse={parsePermissionLevel} />;
  82
  83 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
  84     <FormControl fullWidth>
  85         <InputLabel>Authorization</InputLabel>
  86         <PermissionSelect {...input} />
  87     </FormControl>;