16115: Refresh permission management form on tab change.

[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 1792bd67d7f929c513f1a014549c76cd78bd6f44..259390aab7abfbec51188cea90479f3ac35b6b14 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -2,63 +2,124 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
-import { Dialog, DialogTitle, Button, Grid, DialogContent, CircularProgress, Paper } from '@material-ui/core';
-import { DialogActions } from '~/components/dialog-actions/dialog-actions';
-import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-
+import React from 'react';
+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 { SharingURLsContent } from './sharing-urls';
+import {
+    extractUuidObjectType,
+    ResourceObjectType
+} from 'models/resource';
+import { SharingInvitationForm } from './sharing-invitation-form';
+import { SharingManagementForm } from './sharing-management-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;
+    refreshPermissions: () => 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, refreshPermissions } = props;
+    const showTabs = extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
+    const [tabNr, setTabNr] = React.useState<number>(SharingDialogTab.PERMISSIONS);
+
+    // Sets up the dialog depending on the resource type
+    if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) {
+        setTabNr(SharingDialogTab.PERMISSIONS);
+    }
+
     return <Dialog
-        {...{ open, onClose, onExited }}
+        {...{ open, onClose }}
+        className="sharing-dialog"
         fullWidth
         maxWidth='sm'
-        disableBackdropClick
-        disableEscapeKeyDown>
+        disableBackdropClick={saveEnabled}
+        disableEscapeKeyDown={saveEnabled}>
         <DialogTitle>
             Sharing settings
-            </DialogTitle>
+        </DialogTitle>
+        { showTabs &&
+        <Tabs value={tabNr}
+            onChange={(_, tb) => {
+                if (tb === SharingDialogTab.PERMISSIONS) {
+                    refreshPermissions();
+                }
+                setTabNr(tb)}
+            }>
+            <Tab label="With users/groups" />
+            <Tab label="Sharing URLs" disabled={saveEnabled} />
+        </Tabs>
+        }
         <DialogContent>
-            {children}
+            { tabNr === SharingDialogTab.PERMISSIONS &&
+            <Grid container direction='column' spacing={24}>
+              <Grid item>
+                  <SharingManagementForm />
+              </Grid>
+            </Grid>
+            }
+            { tabNr === SharingDialogTab.URLS &&
+            <SharingURLsContent uuid={sharedResourceUuid} />
+            }
         </DialogContent>
         <DialogActions>
             <Grid container spacing={8}>
-                {advancedEnabled &&
-                    <Grid item>
-                        <Button
-                            color='primary'
-                            onClick={onAdvanced}>
-                            Advanced
-                    </Button>
-                    </Grid>
-                }
+                { tabNr === SharingDialogTab.PERMISSIONS &&
+                <Grid item md={12}>
+                    <SharingInvitationForm />
+                </Grid> }
                 <Grid item xs />
+                { tabNr === SharingDialogTab.URLS &&
                 <Grid item>
-                    <Button onClick={onClose}>
-                        Close
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={onCreateSharingToken}>
+                        Create sharing URL
                     </Button>
                 </Grid>
+                }
+                { tabNr === SharingDialogTab.PERMISSIONS &&
                 <Grid item>
                     <Button
                         variant='contained'
                         color='primary'
                         onClick={onSave}
                         disabled={!saveEnabled}>
-                        Save
+                        Save changes
+                    </Button>
+                </Grid>
+                }
+                <Grid item>
+                    <Button onClick={onClose}>
+                        Close
                     </Button>
                 </Grid>
             </Grid>