20085: Moving the (+) button trying to restyle it

Typescript is fighting me every step of the way, something that should
take like 15 minutes is taking 3 hours, argh.

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 6c4d4f02ca4db6870bd76d5aa7beba3605e7a336..74e445503d250874a1e9b6ca0d85a2f47f293291 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -107,100 +107,91 @@ export default (props: SharingDialogComponentProps) => {
         <DialogTitle>
             Sharing settings
         </DialogTitle>
-        { showTabs &&
-        <Tabs value={tabNr}
-            onChange={(_, tb) => {
-                if (tb === SharingDialogTab.PERMISSIONS) {
-                    refreshPermissions();
+        {showTabs &&
+            <Tabs value={tabNr}
+                onChange={(_, tb) => {
+                    if (tb === SharingDialogTab.PERMISSIONS) {
+                        refreshPermissions();
+                    }
+                    setTabNr(tb)
                 }
-                setTabNr(tb)}
-            }>
-            <Tab label="With users/groups" />
-            <Tab label={`Sharing URLs ${sharingURLsNr > 0 ? '('+sharingURLsNr+')' : ''}`} disabled={saveEnabled} />
-        </Tabs>
+                }>
+                <Tab label="With users/groups" />
+                <Tab label={`Sharing URLs ${sharingURLsNr > 0 ? '(' + sharingURLsNr + ')' : ''}`} disabled={saveEnabled} />
+            </Tabs>
         }
         <DialogContent>
-            { tabNr === SharingDialogTab.PERMISSIONS &&
-            <Grid container direction='column' spacing={24}>
-                <Grid item>
-                    <SharingPublicAccessForm />
-                </Grid>
-                <Grid item>
-                    <SharingManagementForm />
+            {tabNr === SharingDialogTab.PERMISSIONS &&
+                <Grid container direction='column' spacing={24}>
+                    <Grid item>
+                        <SharingPublicAccessForm />
+                    </Grid>
+                    <Grid item>
+                        <SharingManagementForm />
+                    </Grid>
                 </Grid>
-            </Grid>
             }
-            { tabNr === SharingDialogTab.URLS &&
-            <SharingURLsContent uuid={sharedResourceUuid} />
+            {tabNr === SharingDialogTab.URLS &&
+                <SharingURLsContent uuid={sharedResourceUuid} />
             }
         </DialogContent>
         <DialogActions>
             <Grid container spacing={8}>
-                { tabNr === SharingDialogTab.PERMISSIONS &&
-                <Grid item md={12}>
-                    <SharingInvitationForm />
-                </Grid>
+                {tabNr === SharingDialogTab.PERMISSIONS &&
+                    <Grid item md={12}>
+                        <SharingInvitationForm onSave={onSave} saveEnabled={saveEnabled} />
+                    </Grid>
                 }
-                { tabNr === SharingDialogTab.URLS && withExpiration && <>
-                <Grid item container direction='row' md={12}>
-                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                        <BasePicker autoOk value={expDate} onChange={setExpDate}>
-                        {({ date, handleChange }) => (<>
-                            <Grid item md={6}>
-                                <Calendar date={date} minDate={new Date()} maxDate={undefined}
-                                    onChange={handleChange} />
-                            </Grid>
-                            <Grid item md={6}>
-                                <TimePickerView type="hours" date={date} ampm={false}
-                                    onMinutesChange={() => {}}
-                                    onSecondsChange={() => {}}
-                                    onHourChange={handleChange}
-                                />
-                            </Grid>
-                        </>)}
-                        </BasePicker>
-                    </MuiPickersUtilsProvider>
-                </Grid>
-                <Grid item md={12}>
-                    <Typography variant='caption' align='center'>
-                        Maximum expiration date may be limited by the cluster configuration.
-                    </Typography>
-                </Grid>
+                {tabNr === SharingDialogTab.URLS && withExpiration && <>
+                    <Grid item container direction='row' md={12}>
+                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                            <BasePicker autoOk value={expDate} onChange={setExpDate}>
+                                {({ date, handleChange }) => (<>
+                                    <Grid item md={6}>
+                                        <Calendar date={date} minDate={new Date()} maxDate={undefined}
+                                            onChange={handleChange} />
+                                    </Grid>
+                                    <Grid item md={6}>
+                                        <TimePickerView type="hours" date={date} ampm={false}
+                                            onMinutesChange={() => { }}
+                                            onSecondsChange={() => { }}
+                                            onHourChange={handleChange}
+                                        />
+                                    </Grid>
+                                </>)}
+                            </BasePicker>
+                        </MuiPickersUtilsProvider>
+                    </Grid>
+                    <Grid item md={12}>
+                        <Typography variant='caption' align='center'>
+                            Maximum expiration date may be limited by the cluster configuration.
+                        </Typography>
+                    </Grid>
                 </>
                 }
-                { tabNr === SharingDialogTab.PERMISSIONS && !sharingURLsDisabled &&
+                {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).
-                    </Typography>
-                </Grid>
+                    <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).
+                        </Typography>
+                    </Grid>
                 }
                 <Grid item xs />
-                { tabNr === SharingDialogTab.URLS && <>
-                <Grid item><FormControlLabel
-                    control={<Checkbox color="primary" checked={withExpiration}
-                        onChange={(e) => setWithExpiration(e.target.checked)} />}
-                    label="With expiration" />
-                </Grid>
-                <Grid item>
-                    <Button variant="contained" color="primary"
-                        disabled={expDate !== undefined && expDate <= new Date()}
-                        onClick={onCreateSharingToken(expDate)}>
-                        Create sharing URL
-                    </Button>
-                </Grid>
-                </>
-                }
-                { tabNr === SharingDialogTab.PERMISSIONS &&
-                <Grid item>
-                    <Tooltip title="Add authorization">
-                        <Button onClick={onSave} variant="contained" color="primary"
-                            disabled={!saveEnabled}>
-                            <AddIcon />
+                {tabNr === SharingDialogTab.URLS && <>
+                    <Grid item><FormControlLabel
+                        control={<Checkbox color="primary" checked={withExpiration}
+                            onChange={(e) => setWithExpiration(e.target.checked)} />}
+                        label="With expiration" />
+                    </Grid>
+                    <Grid item>
+                        <Button variant="contained" color="primary"
+                            disabled={expDate !== undefined && expDate <= new Date()}
+                            onClick={onCreateSharingToken(expDate)}>
+                            Create sharing URL
                         </Button>
-                    </Tooltip>
-                </Grid>
+                    </Grid>
+                </>
                 }
                 <Grid item>
                     <Button onClick={() => {

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 6c0b8d81a3c94f00c8bc223569666e46f6063812..201ddc7f64f0579df0eb65d69a5695216513c4a1 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -4,20 +4,36 @@
 
 import React from 'react';
 import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
-import { Grid, FormControl, InputLabel } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Tooltip, IconButton, StyleRulesCallback } from '@material-ui/core';
 import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
 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';
 
-export default () =>
-    <Grid container spacing={8}>
+const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
+    root: {
+        padding: `${theme.spacing.unit}px 0`,
+    }
+});
+
+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}>
+        <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>;
 
+export default SharingInvitationFormComponent;
+
 const InvitedPeopleField = () =>
     <FieldArray
         name='invitedPeople'

diff --git a/src/views-components/sharing-dialog/sharing-invitation-form.tsx b/src/views-components/sharing-dialog/sharing-invitation-form.tsx
index e82edf7c6b85a02fb2ae23054e7bbc6b159188ed..702add91ad5641cf00241ce4f9401aaed3534027 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form.tsx
@@ -8,13 +8,23 @@ import { compose } from 'redux';
 import SharingInvitationFormComponent from './sharing-invitation-form-component';
 import { SHARING_INVITATION_FORM_NAME } from 'store/sharing-dialog/sharing-dialog-types';
 import { PermissionLevel } from 'models/permission';
+import { WithStyles } from '@material-ui/core/styles';
 
-export const SharingInvitationForm = compose(
-    connect(() => ({
+interface InvitationFormData {
+    permissions: PermissionLevel;
+    invitedPeople: string[];
+}
+
+interface SaveProps {
+    onSave: () => void;
+    saveEnabled: boolean;
+}
+
+export const SharingInvitationForm =
+    reduxForm<InvitationFormData, SaveProps>({
+        form: SHARING_INVITATION_FORM_NAME,
         initialValues: {
             permissions: PermissionLevel.CAN_READ,
             invitedPeople: [],
         }
-    })),
-    reduxForm({ form: SHARING_INVITATION_FORM_NAME })
-)(SharingInvitationFormComponent);
\ No newline at end of file
+    })(SharingInvitationFormComponent);

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 d4d1095292748a629e502064da862bc12c6bd4d3..a7e91ee72c2e1a42966a5410b6b5b7fb2346f632 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-management-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
@@ -21,8 +21,8 @@ export default () =>
     <FieldArray name='permissions' component={SharingManagementFieldArray as any} />;
 
 const SharingManagementFieldArray = ({ fields }: WrappedFieldArrayProps<{ email: string }>) =>
-    <div>{ fields.map((field, index, fields) =>
-        <PermissionManagementRow key={field} {...{ field, index, fields }} />) }
+    <div>{fields.map((field, index, fields) =>
+        <PermissionManagementRow key={field} {...{ field, index, fields }} />)}
         <Divider />
     </div>;
 
@@ -31,6 +31,7 @@ const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
         padding: `${theme.spacing.unit}px 0`,
     }
 });
+
 const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
     ({ field, index, fields, classes }: { field: string, index: number, fields: FieldArrayFieldsProps<{ email: string }> } & WithStyles<'root'>) =>
         <>