200085: Added changes to share dialog layout

[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 15d7f660e0638caffaf631f180b70dd9680fd017..6c4d4f02ca4db6870bd76d5aa7beba3605e7a336 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -16,6 +16,7 @@ import {
     Checkbox,
     FormControlLabel,
     Typography,
+    Tooltip,
 } from '@material-ui/core';
 import {
     StyleRulesCallback,
@@ -39,6 +40,7 @@ import {
 import DateFnsUtils from "@date-io/date-fns";
 import moment from 'moment';
 import { SharingPublicAccessForm } from './sharing-public-access-form';
+import { AddIcon } from 'components/icon/icon';
 
 export interface SharingDialogDataProps {
     open: boolean;
@@ -47,6 +49,8 @@ export interface SharingDialogDataProps {
     sharedResourceUuid: string;
     sharingURLsNr: number;
     privateAccess: boolean;
+    sharingURLsDisabled: boolean;
+    permissions: any[];
 }
 export interface SharingDialogActionProps {
     onClose: () => void;
@@ -58,20 +62,33 @@ 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,
-        sharingURLsNr, privateAccess,
+        sharingURLsNr, privateAccess, sharingURLsDisabled, permissions,
         onClose, onSave, onCreateSharingToken, refreshPermissions } = props;
-    const showTabs = extractUuidObjectType(sharedResourceUuid) === ResourceObjectType.COLLECTION;
+    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);
+    const [permissionsCount, setPermissionsCount] = React.useState<number>(0);
 
     // Sets up the dialog depending on the resource type
     if (!showTabs && tabNr !== SharingDialogTab.PERMISSIONS) {
         setTabNr(SharingDialogTab.PERMISSIONS);
     }
 
+    React.useEffect(() => {
+        if (permissions && permissions.length !== permissionsCount) {
+            if (permissionsCount > permissions.length) {
+                setTimeout(onSave, 0);
+            }
+
+            setPermissionsCount(permissions.length);
+        }
+    }, [permissions, onSave, setPermissionsCount, permissionsCount])
+
     React.useEffect(() => {
         if (!withExpiration) {
             setExpDate(undefined);
@@ -151,7 +168,8 @@ export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
                 </Grid>
                 </>
                 }
-                { tabNr === SharingDialogTab.PERMISSIONS && privateAccess && sharingURLsNr > 0 &&
+                { 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).
@@ -176,10 +194,12 @@ export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
                 }
                 { tabNr === SharingDialogTab.PERMISSIONS &&
                 <Grid item>
-                    <Button onClick={onSave} variant="contained" color="primary"
-                        disabled={!saveEnabled}>
-                        Save changes
-                    </Button>
+                    <Tooltip title="Add authorization">
+                        <Button onClick={onSave} variant="contained" color="primary"
+                            disabled={!saveEnabled}>
+                            <AddIcon />
+                        </Button>
+                    </Tooltip>
                 </Grid>
                 }
                 <Grid item>