From a39cc426fdcde42210966da888eb11634e3a321a Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curii.com>
Date: Fri, 31 Mar 2023 17:24:23 -0400
Subject: [PATCH] 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>
---
 .../sharing-dialog-component.tsx              | 12 +---
 .../sharing-invitation-form-component.tsx     | 57 ++++++++++++++-----
 .../sharing-management-form-component.tsx     | 17 +++---
 .../sharing-management-form.tsx               |  6 +-
 4 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index 74e44550..44824fe3 100644
--- 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);
     }
 
-    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);
@@ -127,7 +117,7 @@ export default (props: SharingDialogComponentProps) => {
                         <SharingPublicAccessForm />
                     </Grid>
                     <Grid item>
-                        <SharingManagementForm />
+                        <SharingManagementForm onSave={onSave} />
                     </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 201ddc7f..17f3250a 100644
--- 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 { 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`,
+    },
+    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;
 
+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'
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 a7e91ee7..43f95bb9 100644
--- 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';
 
+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) =>
-        <PermissionManagementRow key={field} {...{ field, index, fields }} />)}
+        <PermissionManagementRow key={field} {...{ field, index, fields }} onSave={onSave} />)}
         <Divider />
     </div>;
 
@@ -33,7 +34,7 @@ const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
 });
 
 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}>
@@ -45,8 +46,10 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
                         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>
diff --git a/src/views-components/sharing-dialog/sharing-management-form.tsx b/src/views-components/sharing-dialog/sharing-management-form.tsx
index 7ecff329..6cbf0f41 100644
--- 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';
 
-export const SharingManagementForm = reduxForm(
+interface SaveProps {
+    onSave: () => void;
+}
+
+export const SharingManagementForm = reduxForm<{}, SaveProps>(
     { form: SHARING_MANAGEMENT_FORM_NAME }
 )(SharingManagementFormComponent);
-- 
2.30.2