// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { MenuItem, Grid, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
+import { MenuItem, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
import Edit from '@material-ui/icons/Edit';
import Computer from '@material-ui/icons/Computer';
import { WithStyles } from '@material-ui/core/styles';
import { SelectProps } from '@material-ui/core/Select';
+import { SelectItem } from './select-item';
export enum PermissionSelectValue {
READ = 'Read',
</Select>);
const renderPermissionItem = (value: string) =>
- <PermissionItem {...{ value }} />;
-
-type PermissionItemClasses = 'value' | 'icon';
-
-const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
- value: {
- marginLeft: theme.spacing.unit,
- },
- icon: {
- margin: `-${theme.spacing.unit / 2}px 0`
- }
-});
-
-const PermissionItem = withStyles(permissionItemStyles)(
- ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) => {
- const Icon = getIcon(value);
- return (
- <Grid container alignItems='center'>
- <Icon className={classes.icon} />
- <span className={classes.value}>
- {value}
- </span>
- </Grid>);
- });
+ <SelectItem {...{ value, icon: getIcon(value) }} />;
const getIcon = (value: string) => {
switch (value) {
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Grid, withStyles, StyleRulesCallback } from '@material-ui/core';
+import { WithStyles } from '@material-ui/core/styles';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+type SelectItemClasses = 'value' | 'icon';
+
+const permissionItemStyles: StyleRulesCallback<SelectItemClasses> = theme => ({
+ value: {
+ marginLeft: theme.spacing.unit,
+ },
+ icon: {
+ margin: `-${theme.spacing.unit / 2}px 0`
+ }
+});
+
+/**
+ * This component should be used as a child of MenuItem component.
+ */
+export const SelectItem = withStyles(permissionItemStyles)(
+ ({ value, icon: Icon, classes }: { value: string, icon: React.ComponentType<SvgIconProps> } & WithStyles<SelectItemClasses>) => {
+ return (
+ <Grid container alignItems='center'>
+ <Icon className={classes.icon} />
+ <span className={classes.value}>
+ {value}
+ </span>
+ </Grid>);
+ });
+
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+
+import { SharingInvitationForm } from './sharing-invitation-form';
+import { SharingManagementForm } from './sharing-management-form';
+import { Grid } from '@material-ui/core';
+
+export const SharingDialogContent = () =>
+ <Grid container direction='column' spacing={24}>
+ <Grid item>
+ <SharingManagementForm />
+ </Grid>
+ <Grid item>
+ <SharingInvitationForm />
+ </Grid>
+ </Grid>;
import { RootState } from '~/store/store';
import SharingDialogComponent, { SharingDialogDataProps, SharingDialogActionProps } from './sharing-dialog-component';
-import { SharingSimpleForm } from './sharing-simple-form';
+import { SharingDialogContent } from './sharing-dialog-content';
const mapStateToProps = (_: RootState, props: WithDialogProps<string>): SharingDialogDataProps => ({
...props,
saveEnabled: false,
- children: <SharingSimpleForm />,
+ children: <SharingDialogContent />,
});
const mapDispatchToProps = (_: Dispatch, props: WithDialogProps<string>): SharingDialogActionProps => ({
import SharingInvitationFormComponent from './sharing-invitation-form-component';
import { PermissionSelectValue } from './permission-select';
-export const SharingSimpleForm = compose(
+export const SharingInvitationForm = compose(
connect(() => ({
initialValues: {
permission: PermissionSelectValue.READ
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Grid, StyleRulesCallback, Divider } from '@material-ui/core';
+import { Field, WrappedFieldProps, WrappedFieldArrayProps, FieldArray, FieldsProps } from 'redux-form';
+import { PermissionSelect } from './permission-select';
+import { WithStyles } from '@material-ui/core/styles';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+
+export default () =>
+ <FieldArray name='permissions' component={SharingManagementFieldArray} />;
+
+const SharingManagementFieldArray = ({ fields }: WrappedFieldArrayProps<{ email: string }>) =>
+ <div>
+ {
+ fields.map((field, index, fields) =>
+ <PermissionManagementRow key={field} {...{ field, index, fields }} />)
+ }
+ <Divider />
+ </div>;
+
+const permissionManagementRowStyles: StyleRulesCallback<'root'> = theme => ({
+ root: {
+ padding: `${theme.spacing.unit}px 0`,
+ }
+});
+const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
+ ({ field, index, fields, classes }: { field: string, index: number, fields: FieldsProps<{ email: string }> } & WithStyles<'root'>) =>
+ <>
+ <Divider />
+ <Grid container alignItems='center' spacing={8} className={classes.root}>
+ <Grid item xs={8}>
+ {fields.get(index).email}
+ </Grid>
+ <Grid item xs={4}>
+ <Field name={`${field}.permissions`} component={PermissionSelectComponent} />
+ </Grid>
+ </Grid>
+ </>
+);
+
+const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
+ <PermissionSelect fullWidth disableUnderline {...input} />;
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { reduxForm } from 'redux-form';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import SharingManagementFormComponent from './sharing-management-form-component';
+
+export const SharingManagementForm = compose(
+ connect(() => ({
+ initialValues: {
+ permissions: [
+ { email: 'chrystian.klingenberg@contractors.roche.com', permissions: 'Read' },
+ { email: 'artur.janicki@contractors.roche.com', permissions: 'Write' },
+ ],
+ }
+ })),
+ reduxForm({ form: 'SHARING_MANAGEMENT_FORM' })
+)(SharingManagementFormComponent);
\ No newline at end of file