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@curii.com>

diff --git a/src/views-components/sharing-dialog/participant-select.tsx b/src/views-components/sharing-dialog/participant-select.tsx
index b43940f045e9f69b87b2dbb515826506e23c0a84..058d7234e47124ae32841462cfccc0bc9cf63523 100644 (file)
--- 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 089eee8d9683d82a0e2340be5deae3abb6f04204..aeb54f567e0aa6c1f80d32965971c12f55c893ae 100644 (file)
--- 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 43f95bb9bc4d5beb5972d1fe0e20cc435e08f3d8..b7ac8ced7612c1a234f7c64f5e61c037bb516660 100644 (file)
--- 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 6cbf0f4142a79ef752ea0a44fd555940cee97057..662199bb0747ea071f58abf3cc505a1acfbb78a6 100644 (file)
--- 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 bcee8dceae3f6bee49746666ebe000dc6211e5d4..03885a439d13c05587faac8bf088607367254efe 100644 (file)
--- 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 '';
     }