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>
- const { label = 'Share' } = this.props;
+ const { label = 'Add people and groups' } = this.props;
renderChipValue={this.renderChipValue}
renderChipTooltip={this.renderChipTooltip}
renderSuggestion={this.renderSuggestion}
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>
{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>
<Grid item>
<SharingManagementForm onSave={onSave} />
</Grid>
+ <Grid item>
+ <SharingPublicAccessForm onSave={onSave} />
+ </Grid>
</Grid>
}
{tabNr === SharingDialogTab.URLS &&
</Grid>
}
{tabNr === SharingDialogTab.URLS &&
</DialogContent>
<DialogActions>
<Grid container spacing={8}>
</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}>
{tabNr === SharingDialogTab.URLS && withExpiration && <>
<Grid item container direction='row' md={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
WrappedFieldProps,
WrappedFieldArrayProps,
FieldArray,
WrappedFieldProps,
WrappedFieldArrayProps,
FieldArray,
+ 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';
} 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} />)}
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} />)}
</div>;
const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
</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'>) =>
<>
const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
({ field, index, fields, classes, onSave }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }>, onSave: () => void; } & WithStyles<'root'>) =>
<>
<Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>
<Grid item xs={8}>
<Typography noWrap variant='subtitle1'>{fields.get(index).email}</Typography>
<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>
</IconButton>
</Grid>
</Grid>
// SPDX-License-Identifier: AGPL-3.0
import { reduxForm } from 'redux-form';
// 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';
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);
export const SharingManagementForm = reduxForm<{}, SaveProps>(
{ form: SHARING_MANAGEMENT_FORM_NAME }
)(SharingManagementFormComponent);
const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
root: {
padding: `${theme.spacing.unit * 2}px 0`,
const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
root: {
padding: `${theme.spacing.unit * 2}px 0`,
+ },
+ heading: {
+ fontSize: '1.25rem',
}
const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
}
const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
- ({ classes, visibility, includePublic, onSave }: WithStyles<'root'> & AccessProps) =>
+ ({ classes, visibility, includePublic, onSave }: WithStyles<'root' | 'heading'> & AccessProps) =>
+ <Typography className={classes.heading}>General access</Typography>
<Grid container alignItems='center' spacing={8} className={classes.root}>
<Grid item xs={8}>
<Typography variant='subtitle1'>
<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:
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:
case VisibilityLevel.ALL_USERS:
- return 'All users on this cluster can access';
+ return 'Shared with all users on this cluster';
case VisibilityLevel.SHARED:
case VisibilityLevel.SHARED:
- return 'Specific people can access';
+ return 'Shared with specific people';
case VisibilityLevel.PRIVATE:
case VisibilityLevel.PRIVATE:
- return 'Only you can access';