From: Lucas Di Pentima Date: Fri, 13 May 2022 13:44:30 +0000 (-0300) Subject: 16115: Updates the sharing dialog to support sharing URLs. X-Git-Tag: 2.4.1~1^2~2^2~15 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/e239324108497e94222407d62b9c70ddffa42ab4 16115: Updates the sharing dialog to support sharing URLs. * When dealing with collections, adds a new tab for sharing URLs. * Removes the "Advanced" mode and always show the permissions. * Moves the "invitation form" to the dialog's action section so that it keeps being visible when lots of permissions are set. * Allow closing the dialog by clicking away or using the Esc key when no pending changes need saving. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- diff --git a/src/store/sharing-dialog/sharing-dialog-actions.ts b/src/store/sharing-dialog/sharing-dialog-actions.ts index 53c751e1..bb3b692f 100644 --- a/src/store/sharing-dialog/sharing-dialog-actions.ts +++ b/src/store/sharing-dialog/sharing-dialog-actions.ts @@ -20,7 +20,6 @@ import { withProgress } from "store/progress-indicator/with-progress"; import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions'; import { snackbarActions, SnackbarKind } from "../snackbar/snackbar-actions"; import { extractUuidKind, extractUuidObjectType, ResourceKind, ResourceObjectType } from "models/resource"; -import { ApiClientAuthorizationService } from "services/api-client-authorization-service/api-client-authorization-service"; import { resourcesActions } from "store/resources/resources-actions"; export const openSharingDialog = (resourceUuid: string, refresh?: () => void) => diff --git a/src/views-components/sharing-dialog/advanced-view-switch.tsx b/src/views-components/sharing-dialog/advanced-view-switch.tsx deleted file mode 100644 index 969128be..00000000 --- a/src/views-components/sharing-dialog/advanced-view-switch.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// Copyright (C) The Arvados Authors. All rights reserved. -// -// SPDX-License-Identifier: AGPL-3.0 - -import React from 'react'; - -export interface AdvancedViewSwitchInjectedProps { - toggleAdvancedView: () => void; - advancedViewOpen: boolean; -} - -export const connectAdvancedViewSwitch = (Component: React.ComponentType) => - class extends React.Component<{}, { advancedViewOpen: boolean }> { - - state = { advancedViewOpen: false }; - - toggleAdvancedView = () => { - this.setState(({ advancedViewOpen }) => ({ advancedViewOpen: !advancedViewOpen })); - } - - render() { - return ; - } - }; - \ No newline at end of file diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx index be15cce6..eca6dc2c 100644 --- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx +++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx @@ -3,56 +3,99 @@ // SPDX-License-Identifier: AGPL-3.0 import React from 'react'; -import { Dialog, DialogTitle, Button, Grid, DialogContent, CircularProgress, Paper } from '@material-ui/core'; +import { + Dialog, + DialogTitle, + Button, + Grid, + DialogContent, + CircularProgress, + Paper, + Tabs, + Tab, +} from '@material-ui/core'; +import { + StyleRulesCallback, + WithStyles, + withStyles +} from '@material-ui/core/styles'; import { DialogActions } from 'components/dialog-actions/dialog-actions'; -import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; - +import { SharingDialogContent } from './sharing-dialog-content'; +import { SharingURLsContent } from './sharing-urls'; +import { + extractUuidObjectType, + ResourceObjectType +} from 'models/resource'; +import { SharingInvitationForm } from './sharing-invitation-form'; export interface SharingDialogDataProps { open: boolean; loading: boolean; saveEnabled: boolean; - advancedEnabled: boolean; - children: React.ReactNode; + sharedResourceUuid: string; } export interface SharingDialogActionProps { onClose: () => void; - onExited: () => void; onSave: () => void; - onAdvanced: () => void; + onCreateSharingToken: () => void; +} +enum SharingDialogTab { + PERMISSIONS = 0, + URLS = 1, } export default (props: SharingDialogDataProps & SharingDialogActionProps) => { - const { children, open, loading, advancedEnabled, saveEnabled, onAdvanced, onClose, onExited, onSave } = props; + const { open, loading, saveEnabled, sharedResourceUuid, + onClose, onSave, onCreateSharingToken } = props; + const showTabs = extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION; + const [tabNr, setTabNr] = React.useState(SharingDialogTab.PERMISSIONS); + + // Sets up the dialog depending on the resource type + if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) { + setTabNr(SharingDialogTab.PERMISSIONS); + } + return + disableBackdropClick={saveEnabled} + disableEscapeKeyDown={saveEnabled}> Sharing settings - + + { showTabs && + setTabNr(tb)}> + + + + } - {children} + { tabNr === SharingDialogTab.PERMISSIONS && + + } + { tabNr === SharingDialogTab.URLS && + + } - {advancedEnabled && - - - - } - + { tabNr === SharingDialogTab.PERMISSIONS && + + + } + { tabNr === SharingDialogTab.URLS && - + } + + { tabNr === SharingDialogTab.PERMISSIONS && + } + + + { diff --git a/src/views-components/sharing-dialog/sharing-dialog-content.tsx b/src/views-components/sharing-dialog/sharing-dialog-content.tsx index 15df2245..ee1ccf87 100644 --- a/src/views-components/sharing-dialog/sharing-dialog-content.tsx +++ b/src/views-components/sharing-dialog/sharing-dialog-content.tsx @@ -3,26 +3,13 @@ // SPDX-License-Identifier: AGPL-3.0 import React from 'react'; -import { Grid, Typography } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; -import { SharingInvitationForm } from './sharing-invitation-form'; import { SharingManagementForm } from './sharing-management-form'; -import { SharingPublicAccessForm } from './sharing-public-access-form'; -export const SharingDialogContent = (props: { advancedViewOpen: boolean }) => +export const SharingDialogContent = () => - {props.advancedViewOpen && - <> - - - Who can access - - - - - - } - + ; diff --git a/src/views-components/sharing-dialog/sharing-dialog.tsx b/src/views-components/sharing-dialog/sharing-dialog.tsx index fe3b8396..a077f7ee 100644 --- a/src/views-components/sharing-dialog/sharing-dialog.tsx +++ b/src/views-components/sharing-dialog/sharing-dialog.tsx @@ -4,48 +4,50 @@ import { compose, Dispatch } from 'redux'; import { connect } from 'react-redux'; - -import React from 'react'; -import { connectSharingDialog, saveSharingDialogChanges, connectSharingDialogProgress, sendSharingInvitations } from 'store/sharing-dialog/sharing-dialog-actions'; -import { WithDialogProps } from 'store/dialog/with-dialog'; import { RootState } from 'store/store'; - -import SharingDialogComponent, { SharingDialogDataProps, SharingDialogActionProps } from './sharing-dialog-component'; -import { SharingDialogContent } from './sharing-dialog-content'; -import { connectAdvancedViewSwitch, AdvancedViewSwitchInjectedProps } from './advanced-view-switch'; -import { hasChanges } from 'store/sharing-dialog/sharing-dialog-types'; +import { + connectSharingDialog, + saveSharingDialogChanges, + connectSharingDialogProgress, + SharingDialogData, + createSharingToken +} from 'store/sharing-dialog/sharing-dialog-actions'; +import { WithDialogProps } from 'store/dialog/with-dialog'; +import SharingDialogComponent, { + SharingDialogDataProps, + SharingDialogActionProps +} from './sharing-dialog-component'; +import { + hasChanges, + SHARING_DIALOG_NAME +} from 'store/sharing-dialog/sharing-dialog-types'; import { WithProgressStateProps } from 'store/progress-indicator/with-progress'; +import { getDialog } from 'store/dialog/dialog-reducer'; -type Props = WithDialogProps & AdvancedViewSwitchInjectedProps & WithProgressStateProps; +type Props = WithDialogProps & WithProgressStateProps; -const mapStateToProps = (state: RootState, { advancedViewOpen, working, ...props }: Props): SharingDialogDataProps => ({ +const mapStateToProps = (state: RootState, { working, ...props }: Props): SharingDialogDataProps => { + const dialog = getDialog(state.dialog, SHARING_DIALOG_NAME); + return ({ ...props, saveEnabled: hasChanges(state), loading: working, - advancedEnabled: !advancedViewOpen, - children: , -}); + sharedResourceUuid: dialog?.data.resourceUuid || '', + }) +}; -const mapDispatchToProps = (dispatch: Dispatch, { toggleAdvancedView, advancedViewOpen, ...props }: Props): SharingDialogActionProps => ({ +const mapDispatchToProps = (dispatch: Dispatch, { ...props }: Props): SharingDialogActionProps => ({ ...props, onClose: props.closeDialog, - onExited: () => { - if (advancedViewOpen) { - toggleAdvancedView(); - } - }, onSave: () => { - if (advancedViewOpen) { - dispatch(saveSharingDialogChanges); - } else { - dispatch(sendSharingInvitations); - } + dispatch(saveSharingDialogChanges); }, - onAdvanced: toggleAdvancedView, + onCreateSharingToken: () => { + dispatch(createSharingToken); + } }); export const SharingDialog = compose( - connectAdvancedViewSwitch, connectSharingDialog, connectSharingDialogProgress, connect(mapStateToProps, mapDispatchToProps)