20085: Moving the (+) button trying to restyle it

[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 6c0b8d81a3c94f00c8bc223569666e46f6063812..201ddc7f64f0579df0eb65d69a5695216513c4a1 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -4,20 +4,36 @@
 
 import React from 'react';
 import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
-import { Grid, FormControl, InputLabel } from '@material-ui/core';
+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';
 
-export default () =>
-    <Grid container spacing={8}>
+const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
+    root: {
+        padding: `${theme.spacing.unit}px 0`,
+    }
+});
+
+const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) =>
+    <Grid container spacing={8} >
         <Grid data-cy="invite-people-field" item xs={8}>
             <InvitedPeopleField />
         </Grid>
-        <Grid data-cy="permission-select-field" item xs={4}>
+        <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
             <PermissionSelectField />
+            <Tooltip title="Add authorization">
+                <IconButton onClick={props.onSave} disabled={!props.saveEnabled} color="primary">
+                    <AddIcon />
+                </IconButton>
+            </Tooltip>
         </Grid>
     </Grid>;
 
+export default SharingInvitationFormComponent;
+
 const InvitedPeopleField = () =>
     <FieldArray
         name='invitedPeople'