20085: Moving the (+) button trying to restyle it
[arvados-workbench2.git] / 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>;