200085: Added changes to share dialog layout

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index b2f313973ea7ef7abb71e0d422877aced717ce47..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;
@@ -48,6 +50,7 @@ export interface SharingDialogDataProps {
     sharingURLsNr: number;
     privateAccess: boolean;
     sharingURLsDisabled: boolean;
+    permissions: any[];
 }
 export interface SharingDialogActionProps {
     onClose: () => void;
@@ -63,18 +66,29 @@ export type SharingDialogComponentProps = SharingDialogDataProps & SharingDialog
 
 export default (props: SharingDialogComponentProps) => {
     const { open, loading, saveEnabled, sharedResourceUuid,
-        sharingURLsNr, privateAccess, sharingURLsDisabled,
+        sharingURLsNr, privateAccess, sharingURLsDisabled, permissions,
         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);
+    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);
@@ -180,10 +194,12 @@ export default (props: SharingDialogComponentProps) => {
                 }
                 { 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>

diff --git a/src/views-components/sharing-dialog/sharing-dialog.tsx b/src/views-components/sharing-dialog/sharing-dialog.tsx
index 01cd390b07f7a2263400954fbba3b9c41f17cb5d..283f1a67339ca4d63069fa5d4caf166c1274378c 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog.tsx
@@ -5,6 +5,7 @@
 import { compose, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { RootState } from 'store/store';
+import { formValueSelector } from 'redux-form'
 import {
     connectSharingDialog,
     saveSharingDialogChanges,
@@ -22,6 +23,7 @@ import {
     getSharingPublicAccessFormData,
     hasChanges,
     SHARING_DIALOG_NAME,
+    SHARING_MANAGEMENT_FORM_NAME,
     VisibilityLevel
 } from 'store/sharing-dialog/sharing-dialog-types';
 import { WithProgressStateProps } from 'store/progress-indicator/with-progress';
@@ -32,12 +34,15 @@ import { ResourceKind } from 'models/resource';
 
 type Props = WithDialogProps<string> & WithProgressStateProps;
 
+const sharingManagementFormSelector = formValueSelector(SHARING_MANAGEMENT_FORM_NAME);
+
 const mapStateToProps = (state: RootState, { working, ...props }: Props): SharingDialogDataProps => {
     const dialog = getDialog<SharingDialogData>(state.dialog, SHARING_DIALOG_NAME);
     const sharedResourceUuid = dialog?.data.resourceUuid || '';
     const sharingURLsDisabled = state.auth.config.clusterConfig.Workbench.DisableSharingURLsUI;
     return ({
     ...props,
+    permissions: sharingManagementFormSelector(state, 'permissions'),
     saveEnabled: hasChanges(state),
     loading: working,
     sharedResourceUuid,