services/workbench2/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     Checkbox,
  17     FormControlLabel,
  18     Typography,
  19 } from '@mui/material';
  20 import { CustomStyleRulesCallback } from 'common/custom-theme';
  21 import { WithStyles } from '@mui/styles';
  22 import withStyles from '@mui/styles/withStyles';
  23 import { DialogActions } from 'components/dialog-actions/dialog-actions';
  24 import { SharingURLsContent } from './sharing-urls';
  25 import {
  26     extractUuidObjectType,
  27     ResourceObjectType
  28 } from 'models/resource';
  29 import { SharingInvitationForm } from './sharing-invitation-form';
  30 import { SharingManagementForm } from './sharing-management-form';
  31 import moment, { Moment } from 'moment';
  32 import { SharingPublicAccessForm } from './sharing-public-access-form';
  33 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  34 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
  35 import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
  36
  37 export interface SharingDialogDataProps {
  38     open: boolean;
  39     loading: boolean;
  40     saveEnabled: boolean;
  41     sharedResourceUuid: string;
  42     sharingURLsNr: number;
  43     privateAccess: boolean;
  44     sharingURLsDisabled: boolean;
  45     permissions: any[];
  46 }
  47 export interface SharingDialogActionProps {
  48     onClose: () => void;
  49     onSave: () => void;
  50     onCreateSharingToken: (d: Date | undefined) => () => void;
  51     refreshPermissions: () => void;
  52 }
  53 enum SharingDialogTab {
  54     PERMISSIONS = 0,
  55     URLS = 1,
  56 }
  57 export type SharingDialogComponentProps = SharingDialogDataProps & SharingDialogActionProps;
  58
  59 export const SharingDialogComponent = (props: SharingDialogComponentProps) => {
  60     const { open, loading, saveEnabled, sharedResourceUuid,
  61         sharingURLsNr, privateAccess, sharingURLsDisabled,
  62         onClose, onSave, onCreateSharingToken, refreshPermissions } = props;
  63     const showTabs = !sharingURLsDisabled && extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
  64     const [tabNr, setTabNr] = React.useState<number>(SharingDialogTab.PERMISSIONS);
  65     const [expDate, setExpDate] = React.useState<Moment>();
  66     const [withExpiration, setWithExpiration] = React.useState<boolean>(false);
  67
  68     const handleChange = (newValue: moment.Moment) => setExpDate(newValue);
  69
  70     // Sets up the dialog depending on the resource type
  71     if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) {
  72         setTabNr(SharingDialogTab.PERMISSIONS);
  73     }
  74
  75     React.useEffect(() => {
  76         if (!withExpiration) {
  77             setExpDate(undefined);
  78         } else {
  79             setExpDate(moment().add(2, 'hour'));
  80         }
  81     }, [withExpiration]);
  82
  83     return (
  84         <Dialog {...{ open, onClose }} className="sharing-dialog" fullWidth maxWidth='sm' >
  85             <DialogTitle>
  86                 Sharing settings
  87             </DialogTitle>
  88             {showTabs &&
  89                 <Tabs value={tabNr}
  90                     onChange={(_, tb) => {
  91                         if (tb === SharingDialogTab.PERMISSIONS) {
  92                             refreshPermissions();
  93                         }
  94                         setTabNr(tb)
  95                     }
  96                     }>
  97                     <Tab label="With users/groups" />
  98                     <Tab label={`Sharing URLs ${sharingURLsNr > 0 ? '(' + sharingURLsNr + ')' : ''}`} disabled={saveEnabled} />
  99                 </Tabs>
 100             }
 101             <DialogContent>
 102                 {tabNr === SharingDialogTab.PERMISSIONS &&
 103                     <Grid container direction='column' spacing={3}>
 104                         <Grid item>
 105                             <SharingInvitationForm onSave={onSave} />
 106                         </Grid>
 107                         <Grid item>
 108                             <SharingManagementForm onSave={onSave} />
 109                         </Grid>
 110                         <Grid item>
 111                             <SharingPublicAccessForm onSave={onSave} />
 112                         </Grid>
 113                     </Grid>
 114                 }
 115                 {tabNr === SharingDialogTab.URLS &&
 116                     <SharingURLsContent uuid={sharedResourceUuid} />
 117                 }
 118             </DialogContent>
 119             <DialogActions>
 120                 <Grid container spacing={1} style={{ display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'center'}}>
 121                     {tabNr === SharingDialogTab.URLS && withExpiration &&
 122                         <section style={{minHeight: '42dvh', display: 'flex', flexDirection: 'column' }}>
 123                             <LocalizationProvider dateAdapter={AdapterMoment}>
 124                                 <StaticDateTimePicker
 125                                     orientation="landscape"
 126                                     onChange={handleChange}
 127                                     value={expDate || moment().add(2, 'hour')}
 128                                     disablePast
 129                                     minutesStep={5}
 130                                     ampm={false}
 131                                     slots={{
 132                                         //removes redundant action bar
 133                                         actionBar: () => null,
 134                                     }}
 135                                 />
 136                             </LocalizationProvider>
 137                         </section>
 138                     }
 139                         <Typography variant='caption' align='center' marginBottom='1rem'>
 140                             Maximum expiration date may be limited by the cluster configuration.
 141                         </Typography>
 142                     {tabNr === SharingDialogTab.PERMISSIONS && !sharingURLsDisabled &&
 143                         privateAccess && sharingURLsNr > 0 &&
 144                         <Grid item md={12}>
 145                             <Typography variant='caption' align='center' color='error'>
 146                                 Although there aren't specific permissions set, this is publicly accessible via Sharing URL(s).
 147                             </Typography>
 148                         </Grid>
 149                     }
 150                     <Grid container>
 151                         {tabNr === SharingDialogTab.URLS &&
 152                             <Grid container style={{ display: 'flex', justifyContent: 'space-between'}}>
 153                                 <Grid display='flex'>
 154                                     <Grid item>
 155                                         <FormControlLabel
 156                                             control={<Checkbox color="primary" checked={withExpiration}
 157                                                 onChange={(e) => setWithExpiration(e.target.checked)} />}
 158                                             label="With expiration" />
 159                                     </Grid>
 160                                     <Grid item>
 161                                         <Button variant="contained" color="primary"
 162                                             disabled={expDate !== undefined && expDate.toDate() <= new Date()}
 163                                             onClick={onCreateSharingToken(expDate?.toDate())}>
 164                                             Create sharing URL
 165                                         </Button>
 166                                     </Grid>
 167                                 </Grid>
 168                                 <Grid>
 169                                     <Grid>
 170                                     <Button onClick={() => {
 171                                         onClose();
 172                                         setWithExpiration(false);
 173                                         }}
 174                                         disabled={saveEnabled}
 175                                         color='primary'
 176                                         size='small'
 177                                         style={{ marginLeft: '10px' }}
 178                                         >
 179                                             Close
 180                                     </Button>
 181                                     <Button onClick={() => {
 182                                             onSave();
 183                                         }}
 184                                         data-cy="add-invited-people"
 185                                         disabled={!saveEnabled}
 186                                         color='primary'
 187                                         variant='contained'
 188                                         size='small'
 189                                         style={{ marginLeft: '10px' }}
 190                                         >
 191                                             Save
 192                                     </Button>
 193                                     </Grid>
 194                                 </Grid>
 195                             </Grid>
 196                         }
 197                     </Grid>
 198                 </Grid>
 199             </DialogActions>
 200             {
 201                 loading && <LoadingIndicator />
 202             }
 203         </Dialog>
 204     );
 205 };
 206
 207 const loadingIndicatorStyles: CustomStyleRulesCallback<'root'> = theme => ({
 208     root: {
 209         position: 'absolute',
 210         top: 0,
 211         right: 0,
 212         bottom: 0,
 213         left: 0,
 214         display: 'flex',
 215         alignItems: 'center',
 216         justifyContent: 'center',
 217         backgroundColor: 'rgba(255, 255, 255, 0.8)',
 218     },
 219 });
 220
 221 const LoadingIndicator = withStyles(loadingIndicatorStyles)(
 222     (props: WithStyles<'root'>) =>
 223         <Paper classes={props.classes}>
 224             <CircularProgress />
 225         </Paper>
 226 );