20085: Almost works, needs to save on change to share/public/private

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index 74e445503d250874a1e9b6ca0d85a2f47f293291..44824fe3142ededdd863d4e445a67eba18addfd4 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -79,16 +79,6 @@ export default (props: SharingDialogComponentProps) => {
         setTabNr(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);
     React.useEffect(() => {
         if (!withExpiration) {
             setExpDate(undefined);


@@ -127,7 +117,7 @@ export default (props: SharingDialogComponentProps) => {
                         <SharingPublicAccessForm />
                     </Grid>
                     <Grid item>
                         <SharingPublicAccessForm />
                     </Grid>
                     <Grid item>

-                        <SharingManagementForm />
+                        <SharingManagementForm onSave={onSave} />

                     </Grid>
                 </Grid>
             }
                     </Grid>
                 </Grid>
             }

diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
index 201ddc7f64f0579df0eb65d69a5695216513c4a1..17f3250a416c9b464c9117b7da0b41af2218779f 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -10,30 +10,57 @@ import { ParticipantSelect, Participant } from './participant-select';
 import { AddIcon } from 'components/icon/icon';
 import { WithStyles } from '@material-ui/core/styles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { AddIcon } from 'components/icon/icon';
 import { WithStyles } from '@material-ui/core/styles';
 import withStyles from '@material-ui/core/styles/withStyles';

+import { ArvadosTheme } from 'common/custom-theme';

 
 

-const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
+type SharingStyles = 'root' | 'addButtonRoot' | 'addButtonPrimary' | 'addButtonDisabled';
+
+const styles: StyleRulesCallback<SharingStyles> = (theme: ArvadosTheme) => ({

     root: {
         padding: `${theme.spacing.unit}px 0`,
     root: {
         padding: `${theme.spacing.unit}px 0`,

+    },
+    addButtonRoot: {
+        height: "36px",
+        width: "36px",
+        marginRight: "6px",
+        marginLeft: "6px",
+        marginTop: "12px",
+    },
+    addButtonPrimary: {
+        color: theme.palette.primary.contrastText,
+        background: theme.palette.primary.main,
+        "&:hover": {
+            background: theme.palette.primary.dark,
+        }
+    },
+    addButtonDisabled: {
+        background: 'none',

     }
 });
 
     }
 });
 

-const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) =>
-    <Grid container spacing={8} >
-        <Grid data-cy="invite-people-field" item xs={8}>
-            <InvitedPeopleField />
-        </Grid>
-        <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
-            <PermissionSelectField />
-            <Tooltip title="Add authorization">
-                <IconButton onClick={props.onSave} disabled={!props.saveEnabled} color="primary">
-                    <AddIcon />
-                </IconButton>
-            </Tooltip>
-        </Grid>
-    </Grid>;
+const SharingInvitationFormComponent = (props: { onSave: () => void, saveEnabled: boolean }) => <StyledSharingInvitationFormComponent onSave={props.onSave} saveEnabled={props.saveEnabled} />

 
 export default SharingInvitationFormComponent;
 
 
 export default SharingInvitationFormComponent;
 

+const StyledSharingInvitationFormComponent = withStyles(styles)(
+    ({ onSave, saveEnabled, classes }: { onSave: () => void, saveEnabled: boolean } & WithStyles<SharingStyles>) =>
+        <Grid container spacing={8} wrap='nowrap' className={classes.root} >
+            <Grid data-cy="invite-people-field" item xs={8}>
+                <InvitedPeopleField />
+            </Grid>
+            <Grid data-cy="permission-select-field" item xs={4} container wrap='nowrap'>
+                <PermissionSelectField />
+                <Tooltip title="Add authorization">
+                    <IconButton onClick={onSave} disabled={!saveEnabled} color="primary" classes={{
+                        root: classes.addButtonRoot,
+                        colorPrimary: classes.addButtonPrimary,
+                        disabled: classes.addButtonDisabled
+                    }}>
+                        <AddIcon />
+                    </IconButton>
+                </Tooltip>
+            </Grid>
+        </Grid >);
+

 const InvitedPeopleField = () =>
     <FieldArray
         name='invitedPeople'
 const InvitedPeopleField = () =>
     <FieldArray
         name='invitedPeople'

diff --git a/src/views-components/sharing-dialog/sharing-management-form-component.tsx b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
index a7e91ee72c2e1a42966a5410b6b5b7fb2346f632..43f95bb9bc4d5beb5972d1fe0e20cc435e08f3d8 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-management-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
@@ -16,13 +16,14 @@ import { WithStyles } from '@material-ui/core/styles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { CloseIcon } from 'components/icon/icon';
 
 import withStyles from '@material-ui/core/styles/withStyles';
 import { CloseIcon } from 'components/icon/icon';
 

+const SharingManagementFormComponent = (props: { onSave: () => void; }) =>
+    <FieldArray<{ onSave: () => void }> name='permissions' component={SharingManagementFieldArray as any} props={props} />;

 
 

-export default () =>
-    <FieldArray name='permissions' component={SharingManagementFieldArray as any} />;
+export default SharingManagementFormComponent;

 
 

-const SharingManagementFieldArray = ({ fields }: WrappedFieldArrayProps<{ email: string }>) =>
+const SharingManagementFieldArray = ({ fields, onSave }: { onSave: () => void } & WrappedFieldArrayProps<{ email: string }>) =>

     <div>{fields.map((field, index, fields) =>
     <div>{fields.map((field, index, fields) =>

-        <PermissionManagementRow key={field} {...{ field, index, fields }} />)}
+        <PermissionManagementRow key={field} {...{ field, index, fields }} onSave={onSave} />)}

         <Divider />
     </div>;
 
         <Divider />
     </div>;
 


@@ -33,7 +34,7 @@ const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
 });
 
 const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
 });
 
 const PermissionManagementRow = withStyles(permissionManagementRowStyles)(

-    ({ field, index, fields, classes }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }> } & WithStyles<'root'>) =>
+    ({ field, index, fields, classes, onSave }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }>, onSave: () => void; } & WithStyles<'root'>) =>

         <>
             <Divider />
             <Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>
         <>
             <Divider />
             <Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>


@@ -45,8 +46,10 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
                         name={`${field}.permissions` as string}
                         component={PermissionSelectComponent}
                         format={formatPermissionLevel}
                         name={`${field}.permissions` as string}
                         component={PermissionSelectComponent}
                         format={formatPermissionLevel}

-                        parse={parsePermissionLevel} />
-                    <IconButton onClick={() => fields.remove(index)}>
+                        parse={parsePermissionLevel}
+                        onChange={onSave}
+                    />
+                    <IconButton onClick={() => { fields.remove(index); onSave(); }}>

                         <CloseIcon />
                     </IconButton>
                 </Grid>
                         <CloseIcon />
                     </IconButton>
                 </Grid>

diff --git a/src/views-components/sharing-dialog/sharing-management-form.tsx b/src/views-components/sharing-dialog/sharing-management-form.tsx
index 7ecff329b8b6e95eb058ae81ee315e620b0b36df..6cbf0f4142a79ef752ea0a44fd555940cee97057 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-management-form.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form.tsx
@@ -6,6 +6,10 @@ import { reduxForm } from 'redux-form';
 import SharingManagementFormComponent from './sharing-management-form-component';
 import { SHARING_MANAGEMENT_FORM_NAME } from 'store/sharing-dialog/sharing-dialog-types';
 
 import SharingManagementFormComponent from './sharing-management-form-component';
 import { SHARING_MANAGEMENT_FORM_NAME } from 'store/sharing-dialog/sharing-dialog-types';
 

-export const SharingManagementForm = reduxForm(
+interface SaveProps {
+    onSave: () => void;
+}
+
+export const SharingManagementForm = reduxForm<{}, SaveProps>(

     { form: SHARING_MANAGEMENT_FORM_NAME }
 )(SharingManagementFormComponent);
     { form: SHARING_MANAGEMENT_FORM_NAME }
 )(SharingManagementFormComponent);