setTabNr(SharingDialogTab.PERMISSIONS);
}
- React.useEffect(() => {
- if (permissions && permissions.length !== permissionsCount) {
- if (permissionsCount > permissions.length) {
- setTimeout(onSave, 0);
- }
-
- setPermissionsCount(permissions.length);
- }
- }, [permissions, onSave, setPermissionsCount, permissionsCount])
-
React.useEffect(() => {
if (!withExpiration) {
setExpDate(undefined);
<SharingPublicAccessForm />
</Grid>
<Grid item>
- <SharingManagementForm />
+ <SharingManagementForm onSave={onSave} />
</Grid>
</Grid>
}
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';
-const permissionManagementRowStyles: StyleRulesCallback<'root'> = 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 }) =>
- <Grid container spacing={8} >
- <Grid data-cy="invite-people-field" item xs={8}>
- <InvitedPeopleField />
- </Grid>
- <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>;
+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 />
+ <Tooltip title="Add authorization">
+ <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
+ root: classes.addButtonRoot,
+ colorPrimary: classes.addButtonPrimary,
+ disabled: classes.addButtonDisabled
+ }}>
+ <AddIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
+ </Grid >);
+
const InvitedPeopleField = () =>
<FieldArray
name='invitedPeople'
import withStyles from '@material-ui/core/styles/withStyles';
import { CloseIcon } from 'components/icon/icon';
+const SharingManagementFormComponent = (props: { onSave: () => void; }) =>
+ <FieldArray<{ onSave: () => void }> name='permissions' component={SharingManagementFieldArray as any} props={props} />;
-export default () =>
- <FieldArray name='permissions' component={SharingManagementFieldArray as any} />;
+export default SharingManagementFormComponent;
-const SharingManagementFieldArray = ({ fields }: WrappedFieldArrayProps<{ email: string }>) =>
+const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string }>) =>
<div>{fields.map((field, index, fields) =>
- <PermissionManagementRow key={field} {...{ field, index, fields }} />)}
+ <PermissionManagementRow key={field} {...{ field, index, fields }} onSave={onSave} />)}
<Divider />
</div>;
});
const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
- ({ field, index, fields, classes }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }> } & WithStyles<'root'>) =>
+ ({ field, index, fields, classes, onSave }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }>, onSave: () => void; } & WithStyles<'root'>) =>
<>
<Divider />
<Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>
name={`${field}.permissions` as string}
component={PermissionSelectComponent}
format={formatPermissionLevel}
- parse={parsePermissionLevel} />
- <IconButton onClick={() => fields.remove(index)}>
+ parse={parsePermissionLevel}
+ onChange={onSave}
+ />
+ <IconButton onClick={() => { fields.remove(index); onSave(); }}>
<CloseIcon />
</IconButton>
</Grid>
import SharingManagementFormComponent from './sharing-management-form-component';
import { SHARING_MANAGEMENT_FORM_NAME } from 'store/sharing-dialog/sharing-dialog-types';
-export const SharingManagementForm = reduxForm(
+interface SaveProps {
+ onSave: () => void;
+}
+
+export const SharingManagementForm = reduxForm<{}, SaveProps>(
{ form: SHARING_MANAGEMENT_FORM_NAME }
)(SharingManagementFormComponent);