From 47c824dd6472897b18738ad4b03dad5cf00e74bc Mon Sep 17 00:00:00 2001 From: Peter Amstutz Date: Thu, 6 Apr 2023 10:26:17 -0400 Subject: [PATCH] 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 --- .../sharing-dialog/participant-select.tsx | 4 +-- .../sharing-dialog-component.tsx | 10 +++----- .../sharing-management-form-component.tsx | 25 +++++++++++++++---- .../sharing-management-form.tsx | 6 +---- .../sharing-public-access-form-component.tsx | 15 ++++++----- 5 files changed, 36 insertions(+), 24 deletions(-) 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 ( + 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 && - + + + + } {tabNr === SharingDialogTab.URLS && @@ -126,11 +129,6 @@ export default (props: SharingDialogComponentProps) => { - {tabNr === SharingDialogTab.PERMISSIONS && - - - - } {tabNr === SharingDialogTab.URLS && withExpiration && <> 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; }) => - 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>) => + <> + People with access + void }> name='permissions' component={SharingManagementFieldArray as any} props={{ onSave }} /> + ); export default SharingManagementFormComponent; const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string }>) =>
{fields.map((field, index, fields) => )} -
; 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'>) => <> - {fields.get(index).email} @@ -54,6 +68,7 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)( + ); 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) => <> - + General access @@ -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 ''; } -- 2.30.2