src/views-components/sharing-dialog/sharing-dialog-component.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import {
   7     Dialog,
   8     DialogTitle,
   9     Button,
  10     Grid,
  11     DialogContent,
  12     CircularProgress,
  13     Paper,
  14     Tabs,
  15     Tab,
  16 } from '@material-ui/core';
  17 import {
  18     StyleRulesCallback,
  19     WithStyles,
  20     withStyles
  21 } from '@material-ui/core/styles';
  22 import { DialogActions } from 'components/dialog-actions/dialog-actions';
  23 import { SharingURLsContent } from './sharing-urls';
  24 import {
  25     extractUuidObjectType,
  26     ResourceObjectType
  27 } from 'models/resource';
  28 import { SharingInvitationForm } from './sharing-invitation-form';
  29 import { SharingManagementForm } from './sharing-management-form';
  30
  31 export interface SharingDialogDataProps {
  32     open: boolean;
  33     loading: boolean;
  34     saveEnabled: boolean;
  35     sharedResourceUuid: string;
  36 }
  37 export interface SharingDialogActionProps {
  38     onClose: () => void;
  39     onSave: () => void;
  40     onCreateSharingToken: () => void;
  41 }
  42 enum SharingDialogTab {
  43     PERMISSIONS = 0,
  44     URLS = 1,
  45 }
  46 export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
  47     const { open, loading, saveEnabled, sharedResourceUuid,
  48         onClose, onSave, onCreateSharingToken } = props;
  49     const showTabs = extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
  50     const [tabNr, setTabNr] = React.useState<number>(SharingDialogTab.PERMISSIONS);
  51
  52     // Sets up the dialog depending on the resource type
  53     if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) {
  54         setTabNr(SharingDialogTab.PERMISSIONS);
  55     }
  56
  57     return <Dialog
  58         {...{ open, onClose }}
  59         className="sharing-dialog"
  60         fullWidth
  61         maxWidth='sm'
  62         disableBackdropClick={saveEnabled}
  63         disableEscapeKeyDown={saveEnabled}>
  64         <DialogTitle>
  65             Sharing settings
  66         </DialogTitle>
  67         { showTabs &&
  68         <Tabs value={tabNr} onChange={(_, tb) => setTabNr(tb)}>
  69             <Tab label="With users/groups" />
  70             <Tab label="Sharing URLs" disabled={saveEnabled} />
  71         </Tabs>
  72         }
  73         <DialogContent>
  74             { tabNr === SharingDialogTab.PERMISSIONS &&
  75             <Grid container direction='column' spacing={24}>
  76               <Grid item>
  77                   <SharingManagementForm />
  78               </Grid>
  79             </Grid>
  80             }
  81             { tabNr === SharingDialogTab.URLS &&
  82             <SharingURLsContent uuid={sharedResourceUuid} />
  83             }
  84         </DialogContent>
  85         <DialogActions>
  86             <Grid container spacing={8}>
  87                 { tabNr === SharingDialogTab.PERMISSIONS &&
  88                 <Grid item md={12}>
  89                     <SharingInvitationForm />
  90                 </Grid> }
  91                 <Grid item xs />
  92                 { tabNr === SharingDialogTab.URLS &&
  93                 <Grid item>
  94                     <Button
  95                         variant="contained"
  96                         color="primary"
  97                         onClick={onCreateSharingToken}>
  98                         Create sharing URL
  99                     </Button>
 100                 </Grid>
 101                 }
 102                 { tabNr === SharingDialogTab.PERMISSIONS &&
 103                 <Grid item>
 104                     <Button
 105                         variant='contained'
 106                         color='primary'
 107                         onClick={onSave}
 108                         disabled={!saveEnabled}>
 109                         Save changes
 110                     </Button>
 111                 </Grid>
 112                 }
 113                 <Grid item>
 114                     <Button onClick={onClose}>
 115                         Close
 116                     </Button>
 117                 </Grid>
 118             </Grid>
 119         </DialogActions>
 120         {
 121             loading && <LoadingIndicator />
 122         }
 123     </Dialog>;
 124 };
 125
 126 const loadingIndicatorStyles: StyleRulesCallback<'root'> = theme => ({
 127     root: {
 128         position: 'absolute',
 129         top: 0,
 130         right: 0,
 131         bottom: 0,
 132         left: 0,
 133         display: 'flex',
 134         alignItems: 'center',
 135         justifyContent: 'center',
 136         backgroundColor: 'rgba(255, 255, 255, 0.8)',
 137     },
 138 });
 139
 140 const LoadingIndicator = withStyles(loadingIndicatorStyles)(
 141     (props: WithStyles<'root'>) =>
 142         <Paper classes={props.classes}>
 143             <CircularProgress />
 144         </Paper>
 145 );