[arvados-workbench2] created: 2.5.0-145-g47c824dd
git repository hosting
git at public.arvados.org
Thu Apr 6 14:29:07 UTC 2023
at 47c824dd6472897b18738ad4b03dad5cf00e74bc (commit)
commit 47c824dd6472897b18738ad4b03dad5cf00e74bc
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Thu Apr 6 10:26:17 2023 -0400
20306: Reworked dialog layout to hopefully be less confusing
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 at curii.com>
diff --git a/src/views-components/sharing-dialog/participant-select.tsx b/src/views-components/sharing-dialog/participant-select.tsx
index b43940f0..058d7234 100644
--- a/src/views-components/sharing-dialog/participant-select.tsx
+++ b/src/views-components/sharing-dialog/participant-select.tsx
@@ -74,7 +74,7 @@ export const ParticipantSelect = connect()(
};
render() {
- const { label = 'Share' } = this.props;
+ const { label = 'Add people and groups' } = this.props;
return (
<Autocomplete
@@ -92,7 +92,7 @@ export const ParticipantSelect = connect()(
renderChipValue={this.renderChipValue}
renderChipTooltip={this.renderChipTooltip}
renderSuggestion={this.renderSuggestion}
- disabled={this.props.disabled}/>
+ disabled={this.props.disabled} />
);
}
diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index 089eee8d..aeb54f56 100644
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -113,11 +113,14 @@ export default (props: SharingDialogComponentProps) => {
{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 &&
@@ -126,11 +129,6 @@ export default (props: SharingDialogComponentProps) => {
</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}>
diff --git a/src/views-components/sharing-dialog/sharing-management-form-component.tsx b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
index 43f95bb9..b7ac8ced 100644
--- a/src/views-components/sharing-dialog/sharing-management-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
@@ -9,22 +9,37 @@ import {
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 => ({
@@ -36,7 +51,6 @@ 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>
@@ -54,6 +68,7 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
</IconButton>
</Grid>
</Grid>
+ <Divider />
</>
);
diff --git a/src/views-components/sharing-dialog/sharing-management-form.tsx b/src/views-components/sharing-dialog/sharing-management-form.tsx
index 6cbf0f41..662199bb 100644
--- a/src/views-components/sharing-dialog/sharing-management-form.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form.tsx
@@ -3,13 +3,9 @@
// 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);
diff --git a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
index bcee8dce..03885a43 100644
--- a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
@@ -13,6 +13,9 @@ import { VisibilityLevel } from 'store/sharing-dialog/sharing-dialog-types';
const sharingPublicAccessStyles: StyleRulesCallback<'root'> = theme => ({
root: {
padding: `${theme.spacing.unit * 2}px 0`,
+ },
+ heading: {
+ fontSize: '1.25rem',
}
});
@@ -23,9 +26,9 @@ interface AccessProps {
}
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'>
@@ -42,13 +45,13 @@ const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
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 '';
}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list