21313: moved save button to bottom of share dialog Arvados-DCO-1.1-Signed-off-by...

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

diff --git a/services/workbench2/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/services/workbench2/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
index 871ea503ecee45b0281eeb0bdd81d12138130c9d..ca1a83d9c00f4467fc828646107e5de509e208f3 100644 (file)
--- a/services/workbench2/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/services/workbench2/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
-import { Grid, FormControl, InputLabel, Tooltip, IconButton, StyleRulesCallback } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Tooltip, IconButton, StyleRulesCallback, Typography } from '@material-ui/core';
 import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
 import { ParticipantSelect, Participant } from './participant-select';
 import { AddIcon } from 'components/icon/icon';
@@ -12,7 +12,7 @@ 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';
+type SharingStyles = 'root' | 'addButtonRoot' | 'addButtonPrimary' | 'addButtonDisabled' | 'shareWarning' ;
 
 const styles: StyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
     root: {
@@ -34,7 +34,13 @@ const styles: StyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({
     },
     addButtonDisabled: {
         background: 'none',
-    }
+    },
+    shareWarning: {
+        color: theme.palette.error.main,
+        marginTop: '-1.1rem',
+        marginBottom: 0,
+        fontSize: '0.75rem',
+    },
 });
 
 const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) => <StyledSharingInvitationFormComponent onSave={props.onSave} saveEnabled={props.saveEnabled} />
@@ -42,23 +48,13 @@ const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled
 export default SharingInvitationFormComponent;
 
 const StyledSharingInvitationFormComponent = withStyles(styles)(
-    ({ onSave, saveEnabled, classes }: { onSave: () => void, saveEnabled: boolean } & WithStyles<SharingStyles>) =>
+    ({ 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 >);