[arvados-workbench2] updated: 2.5.0-106-ga39cc426
git repository hosting
git at public.arvados.org
Fri Mar 31 21:25:14 UTC 2023
Summary of changes:
.../sharing-dialog/sharing-dialog-component.tsx | 157 +++++++++------------
.../sharing-invitation-form-component.tsx | 63 +++++++--
.../sharing-dialog/sharing-invitation-form.tsx | 20 ++-
.../sharing-management-form-component.tsx | 20 +--
.../sharing-dialog/sharing-management-form.tsx | 6 +-
5 files changed, 154 insertions(+), 112 deletions(-)
via a39cc426fdcde42210966da888eb11634e3a321a (commit)
via cbebc4630ca0e966b10193d77c41f3ed72567e7e (commit)
from 95f1dba808337fed91cbcba656f94b68fc421e41 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit a39cc426fdcde42210966da888eb11634e3a321a
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Fri Mar 31 17:24:23 2023 -0400
20085: Almost works, needs to save on change to share/public/private
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at 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 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);
commit cbebc4630ca0e966b10193d77c41f3ed72567e7e
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Fri Mar 31 15:39:23 2023 -0400
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 at 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 6c4d4f02..74e44550 100644
--- 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 6c0b8d81..201ddc7f 100644
--- 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 e82edf7c..702add91 100644
--- 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 d4d10952..a7e91ee7 100644
--- 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'>) =>
<>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list