Tweaked to mimic the Google docs sharing dialog.
Put the "Add users" input box at the top, so people start there.
Added section headings.
Adusted the "general access" text to hopefully be more clear.
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
};
render() {
- const { label = 'Share' } = this.props;
+ const { label = 'Add people and groups' } = this.props;
return (
<Autocomplete
renderChipValue={this.renderChipValue}
renderChipTooltip={this.renderChipTooltip}
renderSuggestion={this.renderSuggestion}
- disabled={this.props.disabled}/>
+ disabled={this.props.disabled} />
);
}
{tabNr === SharingDialogTab.PERMISSIONS &&
<Grid container direction='column' spacing={24}>
<Grid item>
- <SharingPublicAccessForm onSave={onSave} />
+ <SharingInvitationForm onSave={onSave} saveEnabled={saveEnabled} />
</Grid>
<Grid item>
<SharingManagementForm onSave={onSave} />
</Grid>
+ <Grid item>
+ <SharingPublicAccessForm onSave={onSave} />
+ </Grid>
</Grid>
}
{tabNr === SharingDialogTab.URLS &&
</DialogContent>
<DialogActions>
<Grid container spacing={8}>
- {tabNr === SharingDialogTab.PERMISSIONS &&
- <Grid item md={12}>
- <SharingInvitationForm onSave={onSave} saveEnabled={saveEnabled} />
- </Grid>
- }
{tabNr === SharingDialogTab.URLS && withExpiration && <>
<Grid item container direction='row' md={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
WrappedFieldProps,
WrappedFieldArrayProps,
FieldArray,
- FieldArrayFieldsProps
+ FieldArrayFieldsProps,
+ InjectedFormProps
} from 'redux-form';
import { PermissionSelect, formatPermissionLevel, parsePermissionLevel } from './permission-select';
import { WithStyles } from '@material-ui/core/styles';
import withStyles from '@material-ui/core/styles/withStyles';
import { CloseIcon } from 'components/icon/icon';
+import { ArvadosTheme } from 'common/custom-theme';
-const SharingManagementFormComponent = (props: { onSave: () => void; }) =>
- <FieldArray<{ onSave: () => void }> name='permissions' component={SharingManagementFieldArray as any} props={props} />;
+export interface SaveProps {
+ onSave: () => void;
+}
+
+const headerStyles: StyleRulesCallback<'heading'> = (theme: ArvadosTheme) => ({
+ heading: {
+ fontSize: '1.25rem',
+ }
+});
+
+export const SharingManagementFormComponent = withStyles(headerStyles)(
+ ({ classes, onSave }: WithStyles<'heading'> & SaveProps & InjectedFormProps<{}, SaveProps>) =>
+ <>
+ <Typography className={classes.heading}>People with access</Typography>
+ <FieldArray<{ onSave: () => void }> name='permissions' component={SharingManagementFieldArray as any} props={{ onSave }} />
+ </>);
export default SharingManagementFormComponent;
const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string }>) =>
<div>{fields.map((field, index, fields) =>
<PermissionManagementRow key={field} {...{ field, index, fields }} onSave={onSave} />)}
- <Divider />
</div>;
const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
({ 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}>
<Grid item xs={8}>
<Typography noWrap variant='subtitle1'>{fields.get(index).email}</Typography>
</IconButton>
</Grid>
</Grid>
+ <Divider />
</>
);
// SPDX-License-Identifier: AGPL-3.0
import { reduxForm } from 'redux-form';
-import SharingManagementFormComponent from './sharing-management-form-component';
+import { SharingManagementFormComponent, SaveProps } from './sharing-management-form-component';
import { SHARING_MANAGEMENT_FORM_NAME } from 'store/sharing-dialog/sharing-dialog-types';
-interface SaveProps {
- onSave: () => void;
-}
-
export const SharingManagementForm = reduxForm<{}, SaveProps>(
{ form: SHARING_MANAGEMENT_FORM_NAME }
)(SharingManagementFormComponent);
const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
root: {
padding: `${theme.spacing.unit * 2}px 0`,
+ },
+ heading: {
+ fontSize: '1.25rem',
}
});
}
const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
- ({ classes, visibility, includePublic, onSave }: WithStyles<'root'> & AccessProps) =>
+ ({ classes, visibility, includePublic, onSave }: WithStyles<'root' | 'heading'> & AccessProps) =>
<>
- <Divider />
+ <Typography className={classes.heading}>General access</Typography>
<Grid container alignItems='center' spacing={8} className={classes.root}>
<Grid item xs={8}>
<Typography variant='subtitle1'>
const renderVisibilityInfo = (visibility: VisibilityLevel) => {
switch (visibility) {
case VisibilityLevel.PUBLIC:
- return 'Anyone on the Internet can access';
+ return 'Shared with anyone on the Internet';
case VisibilityLevel.ALL_USERS:
- return 'All users on this cluster can access';
+ return 'Shared with all users on this cluster';
case VisibilityLevel.SHARED:
- return 'Specific people can access';
+ return 'Shared with specific people';
case VisibilityLevel.PRIVATE:
- return 'Only you can access';
+ return 'Not shared';
default:
return '';
}