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 { SharingDialogContent } from './sharing-dialog-content';
  24 import { SharingURLsContent } from './sharing-urls';
  25 import {
  26     extractUuidObjectType,
  27     ResourceObjectType
  28 } from 'models/resource';
  29 import { SharingInvitationForm } from './sharing-invitation-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             <SharingDialogContent />
  76             }
  77             { tabNr === SharingDialogTab.URLS &&
  78             <SharingURLsContent uuid={sharedResourceUuid} />
  79             }
  80         </DialogContent>
  81         <DialogActions>
  82             <Grid container spacing={8}>
  83                 { tabNr === SharingDialogTab.PERMISSIONS &&
  84                 <Grid item md={12}>
  85                     <SharingInvitationForm />
  86                 </Grid> }
  87                 { tabNr === SharingDialogTab.URLS &&
  88                 <Grid item>
  89                     <Button
  90                         variant="contained"
  91                         color="primary"
  92                         onClick={onCreateSharingToken}>
  93                         Create sharing URL
  94                     </Button>
  95                 </Grid>
  96                 }
  97                 <Grid item xs />
  98                 { tabNr === SharingDialogTab.PERMISSIONS &&
  99                 <Grid item>
 100                     <Button
 101                         variant='contained'
 102                         color='primary'
 103                         onClick={onSave}
 104                         disabled={!saveEnabled}>
 105                         Save
 106                     </Button>
 107                 </Grid>
 108                 }
 109                 <Grid item>
 110                     <Button onClick={onClose}>
 111                         Close
 112                     </Button>
 113                 </Grid>
 114             </Grid>
 115         </DialogActions>
 116         {
 117             loading && <LoadingIndicator />
 118         }
 119     </Dialog>;
 120 };
 121
 122 const loadingIndicatorStyles: StyleRulesCallback<'root'> = theme => ({
 123     root: {
 124         position: 'absolute',
 125         top: 0,
 126         right: 0,
 127         bottom: 0,
 128         left: 0,
 129         display: 'flex',
 130         alignItems: 'center',
 131         justifyContent: 'center',
 132         backgroundColor: 'rgba(255, 255, 255, 0.8)',
 133     },
 134 });
 135
 136 const LoadingIndicator = withStyles(loadingIndicatorStyles)(
 137     (props: WithStyles<'root'>) =>
 138         <Paper classes={props.classes}>
 139             <CircularProgress />
 140         </Paper>
 141 );