Merge branch '19294-sharing-dialog-overflow' into main. Closes #19294

[arvados-workbench2.git] / src / views-components / sharing-dialog / sharing-dialog-component.tsx

diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index 4ff9150b10c49d24b1c75a12d17159fb1f0b7d23..b2f313973ea7ef7abb71e0d422877aced717ce47 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -13,6 +13,9 @@ import {
     Paper,
     Tabs,
     Tab,
+    Checkbox,
+    FormControlLabel,
+    Typography,
 } from '@material-ui/core';
 import {
     StyleRulesCallback,
@@ -27,33 +30,59 @@ import {
 } from 'models/resource';
 import { SharingInvitationForm } from './sharing-invitation-form';
 import { SharingManagementForm } from './sharing-management-form';
+import {
+    BasePicker,
+    Calendar,
+    MuiPickersUtilsProvider,
+    TimePickerView
+} from 'material-ui-pickers';
+import DateFnsUtils from "@date-io/date-fns";
+import moment from 'moment';
+import { SharingPublicAccessForm } from './sharing-public-access-form';
 
 export interface SharingDialogDataProps {
     open: boolean;
     loading: boolean;
     saveEnabled: boolean;
     sharedResourceUuid: string;
+    sharingURLsNr: number;
+    privateAccess: boolean;
+    sharingURLsDisabled: boolean;
 }
 export interface SharingDialogActionProps {
     onClose: () => void;
     onSave: () => void;
-    onCreateSharingToken: () => void;
+    onCreateSharingToken: (d: Date | undefined) => () => void;
+    refreshPermissions: () => void;
 }
 enum SharingDialogTab {
     PERMISSIONS = 0,
     URLS = 1,
 }
-export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
+export type SharingDialogComponentProps = SharingDialogDataProps & SharingDialogActionProps;
+
+export default (props: SharingDialogComponentProps) => {
     const { open, loading, saveEnabled, sharedResourceUuid,
-        onClose, onSave, onCreateSharingToken } = props;
-    const showTabs = extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
+        sharingURLsNr, privateAccess, sharingURLsDisabled,
+        onClose, onSave, onCreateSharingToken, refreshPermissions } = props;
+    const showTabs = !sharingURLsDisabled && extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
     const [tabNr, setTabNr] = React.useState<number>(SharingDialogTab.PERMISSIONS);
+    const [expDate, setExpDate] = React.useState<Date>();
+    const [withExpiration, setWithExpiration] = React.useState<boolean>(false);
 
     // Sets up the dialog depending on the resource type
     if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) {
         setTabNr(SharingDialogTab.PERMISSIONS);
     }
 
+    React.useEffect(() => {
+        if (!withExpiration) {
+            setExpDate(undefined);
+        } else {
+            setExpDate(moment().add(2, 'hour').minutes(0).seconds(0).toDate());
+        }
+    }, [withExpiration]);
+
     return <Dialog
         {...{ open, onClose }}
         className="sharing-dialog"
@@ -65,17 +94,26 @@ export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
             Sharing settings
         </DialogTitle>
         { showTabs &&
-        <Tabs value={tabNr} onChange={(_, tb) => setTabNr(tb)}>
+        <Tabs value={tabNr}
+            onChange={(_, tb) => {
+                if (tb === SharingDialogTab.PERMISSIONS) {
+                    refreshPermissions();
+                }
+                setTabNr(tb)}
+            }>
             <Tab label="With users/groups" />
-            <Tab label="Sharing URLs" disabled={saveEnabled} />
+            <Tab label={`Sharing URLs ${sharingURLsNr > 0 ? '('+sharingURLsNr+')' : ''}`} disabled={saveEnabled} />
         </Tabs>
         }
         <DialogContent>
             { tabNr === SharingDialogTab.PERMISSIONS &&
             <Grid container direction='column' spacing={24}>
-              <Grid item>
-                  <SharingManagementForm />
-              </Grid>
+                <Grid item>
+                    <SharingPublicAccessForm />
+                </Grid>
+                <Grid item>
+                    <SharingManagementForm />
+                </Grid>
             </Grid>
             }
             { tabNr === SharingDialogTab.URLS &&
@@ -87,31 +125,72 @@ export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
                 { tabNr === SharingDialogTab.PERMISSIONS &&
                 <Grid item md={12}>
                     <SharingInvitationForm />
-                </Grid> }
+                </Grid>
+                }
+                { tabNr === SharingDialogTab.URLS && withExpiration && <>
+                <Grid item container direction='row' md={12}>
+                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                        <BasePicker autoOk value={expDate} onChange={setExpDate}>
+                        {({ date, handleChange }) => (<>
+                            <Grid item md={6}>
+                                <Calendar date={date} minDate={new Date()} maxDate={undefined}
+                                    onChange={handleChange} />
+                            </Grid>
+                            <Grid item md={6}>
+                                <TimePickerView type="hours" date={date} ampm={false}
+                                    onMinutesChange={() => {}}
+                                    onSecondsChange={() => {}}
+                                    onHourChange={handleChange}
+                                />
+                            </Grid>
+                        </>)}
+                        </BasePicker>
+                    </MuiPickersUtilsProvider>
+                </Grid>
+                <Grid item md={12}>
+                    <Typography variant='caption' align='center'>
+                        Maximum expiration date may be limited by the cluster configuration.
+                    </Typography>
+                </Grid>
+                </>
+                }
+                { tabNr === SharingDialogTab.PERMISSIONS && !sharingURLsDisabled &&
+                    privateAccess && sharingURLsNr > 0 &&
+                <Grid item md={12}>
+                    <Typography variant='caption' align='center' color='error'>
+                        Although there aren't specific permissions set, this is publicly accessible via Sharing URL(s).
+                    </Typography>
+                </Grid>
+                }
                 <Grid item xs />
-                { tabNr === SharingDialogTab.URLS &&
+                { tabNr === SharingDialogTab.URLS && <>
+                <Grid item><FormControlLabel
+                    control={<Checkbox color="primary" checked={withExpiration}
+                        onChange={(e) => setWithExpiration(e.target.checked)} />}
+                    label="With expiration" />
+                </Grid>
                 <Grid item>
-                    <Button
-                        variant="contained"
-                        color="primary"
-                        onClick={onCreateSharingToken}>
+                    <Button variant="contained" color="primary"
+                        disabled={expDate !== undefined && expDate <= new Date()}
+                        onClick={onCreateSharingToken(expDate)}>
                         Create sharing URL
                     </Button>
                 </Grid>
+                </>
                 }
                 { tabNr === SharingDialogTab.PERMISSIONS &&
                 <Grid item>
-                    <Button
-                        variant='contained'
-                        color='primary'
-                        onClick={onSave}
+                    <Button onClick={onSave} variant="contained" color="primary"
                         disabled={!saveEnabled}>
                         Save changes
                     </Button>
                 </Grid>
                 }
                 <Grid item>
-                    <Button onClick={onClose}>
+                    <Button onClick={() => {
+                        onClose();
+                        setWithExpiration(false);
+                    }}>
                         Close
                     </Button>
                 </Grid>