Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / views-components / sharing-dialog / sharing-invitation-form-component.tsx

diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
index 8a516894d7e3c85cf28f411399f6c5992d4bc70d..871ea503ecee45b0281eeb0bdd81d12138130c9d 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -2,35 +2,84 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { Grid, FormControl, InputLabel } from '@material-ui/core';
-import { PermissionSelect } from './permission-select';
-import { PeopleSelect } from './people-select';
-
-export default () =>
-    <Grid container spacing={8}>
-        <Grid item xs={8}>
-            <InvitedPeopleField />
-        </Grid>
-        <Grid item xs={4}>
-            <PermissionSelectField />
-        </Grid>
-    </Grid>;
+import React from 'react';
+import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
+import { Grid, FormControl, InputLabel, Tooltip, IconButton, StyleRulesCallback } from '@material-ui/core';
+import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
+import { ParticipantSelect, Participant } from './participant-select';
+import { AddIcon } from 'components/icon/icon';
+import { WithStyles } from '@material-ui/core/styles';
+import withStyles from '@material-ui/core/styles/withStyles';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type SharingStyles = 'root' | 'addButtonRoot' | 'addButtonPrimary' | 'addButtonDisabled';
+
+const styles: StyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
+    root: {
+        padding: `${theme.spacing.unit}px 0`,
+    },
+    addButtonRoot: {
+        height: "36px",
+        width: "36px",
+        marginRight: "6px",
+        marginLeft: "6px",
+        marginTop: "12px",
+    },
+    addButtonPrimary: {
+        color: theme.palette.primary.contrastText,
+        background: theme.palette.primary.main,
+        "&:hover": {
+            background: theme.palette.primary.dark,
+        }
+    },
+    addButtonDisabled: {
+        background: 'none',
+    }
+});
+
+const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) => <StyledSharingInvitationFormComponent onSave={props.onSave} saveEnabled={props.saveEnabled} />
+
+export default SharingInvitationFormComponent;
+
+const StyledSharingInvitationFormComponent = withStyles(styles)(
+    ({ onSave, saveEnabled, classes }: { onSave: () => void, saveEnabled: boolean } & WithStyles<SharingStyles>) =>
+        <Grid container spacing={8} wrap='nowrap' className={classes.root} >
+            <Grid data-cy="invite-people-field" item xs={8}>
+                <InvitedPeopleField />
+            </Grid>
+            <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
+                <PermissionSelectField />
+                <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
+                    root: classes.addButtonRoot,
+                    colorPrimary: classes.addButtonPrimary,
+                    disabled: classes.addButtonDisabled
+                }}
+                    data-cy='add-invited-people'>
+                    <Tooltip title="Add authorization">
+                        <AddIcon />
+                    </Tooltip>
+                </IconButton>
+            </Grid>
+        </Grid >);
 
 const InvitedPeopleField = () =>
-    <Field
+    <FieldArray
         name='invitedPeople'
-        component={InvitedPeopleFieldComponent} />;
+        component={InvitedPeopleFieldComponent as any} />;
 
 
-const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
-    <PeopleSelect />;
+const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
+    <ParticipantSelect
+        items={fields.getAll() || []}
+        onSelect={fields.push}
+        onDelete={fields.remove} />;
 
 const PermissionSelectField = () =>
     <Field
-        name='permission'
-        component={PermissionSelectComponent} />;
+        name='permissions'
+        component={PermissionSelectComponent}
+        format={formatPermissionLevel}
+        parse={parsePermissionLevel} />;
 
 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
     <FormControl fullWidth>