From a60d90f0ee4d4cd71ccc876b112911f437ffb974 Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 26 Oct 2018 16:28:09 +0200
Subject: [PATCH] Create sharing invitation form

Feature #14365

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 src/components/select-field/select-field.tsx  | 30 +++++++-
 src/components/text-field/text-field.tsx      | 12 ++-
 .../sharing-dialog/permission-select.tsx      | 75 +++++++++++++++++++
 .../sharing-dialog/sharing-dialog.tsx         |  4 +-
 .../sharing-invitation-form-component.tsx     | 52 +++++++++++++
 .../sharing-dialog/sharing-simple-form.tsx    | 10 +++
 6 files changed, 176 insertions(+), 7 deletions(-)
 create mode 100644 src/views-components/sharing-dialog/permission-select.tsx
 create mode 100644 src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
 create mode 100644 src/views-components/sharing-dialog/sharing-simple-form.tsx

diff --git a/src/components/select-field/select-field.tsx b/src/components/select-field/select-field.tsx
index 1c3dec3510..4a25ea7019 100644
--- a/src/components/select-field/select-field.tsx
+++ b/src/components/select-field/select-field.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { WrappedFieldProps } from 'redux-form';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@material-ui/core';
 
 type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
 
@@ -55,4 +55,30 @@ export const NativeSelectField = withStyles(styles)
                 ))}
             </Select>
         </FormControl>
-    );
\ No newline at end of file
+    );
+
+interface SelectFieldProps {
+    children: React.ReactNode;
+    label: string;
+}
+
+type SelectFieldCssRules = 'formControl';
+
+const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
+    formControl: {
+        marginBottom: theme.spacing.unit * 3
+    },
+});
+export const SelectField = withStyles(selectFieldStyles)(
+    (props: WrappedFieldProps & SelectFieldProps &  WithStyles<SelectFieldCssRules>) =>
+        <FormControl error={props.meta.invalid} className={props.classes.formControl}>
+            <InputLabel>
+                {props.label}
+            </InputLabel>
+            <Select
+                {...props.input}>
+                {props.children}
+            </Select>
+            <FormHelperText>{props.meta.error}</FormHelperText>
+        </FormControl>
+);
\ No newline at end of file
diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index dd864a938b..d57c4a8c41 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -18,7 +18,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
 
-export const TextField = withStyles(styles)((props: TextFieldProps & { label?: string, autoFocus?: boolean, required?: boolean }) =>
+export const TextField = withStyles(styles)((props: TextFieldProps & { 
+    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode
+}) =>
     <MaterialTextField
         helperText={props.meta.touched && props.meta.error}
         className={props.classes.textField}
@@ -29,6 +31,8 @@ export const TextField = withStyles(styles)((props: TextFieldProps & { label?: s
         autoFocus={props.autoFocus}
         fullWidth={true}
         required={props.required}
+        select={props.select}
+        children={props.children}
         {...props.input}
     />);
 
@@ -51,7 +55,7 @@ export const RichEditorTextField = withStyles(styles)(
         }
 
         render() {
-            return <RichTextEditor 
+            return <RichTextEditor
                 value={this.state.value}
                 onChange={this.onChange}
                 placeholder={this.props.label} />;
@@ -60,7 +64,7 @@ export const RichEditorTextField = withStyles(styles)(
 );
 
 export const DateTextField = withStyles(styles)
-    ((props: TextFieldProps) => 
+    ((props: TextFieldProps) =>
         <MaterialTextField
             type="date"
             disabled={props.meta.submitting}
@@ -73,5 +77,5 @@ export const DateTextField = withStyles(styles)
             name={props.input.name}
             onChange={props.input.onChange}
             value={props.input.value}
-        />    
+        />
     );
\ No newline at end of file
diff --git a/src/views-components/sharing-dialog/permission-select.tsx b/src/views-components/sharing-dialog/permission-select.tsx
new file mode 100644
index 0000000000..6a889225f9
--- /dev/null
+++ b/src/views-components/sharing-dialog/permission-select.tsx
@@ -0,0 +1,75 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { MenuItem, Grid, 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';
+
+export enum PermissionSelectValue {
+    READ = 'Read',
+    WRITE = 'Write',
+    MANAGE = 'Manage',
+}
+
+type PermissionSelectClasses = 'value';
+
+const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
+    value: {
+        marginLeft: theme.spacing.unit,
+    }
+});
+
+export const PermissionSelect = withStyles(PermissionSelectStyles)(
+    ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
+        <Select
+            {...props}
+            renderValue={renderPermissionItem}
+            inputProps={{ classes }}>
+            <MenuItem value={PermissionSelectValue.READ}>
+                {renderPermissionItem(PermissionSelectValue.READ)}
+            </MenuItem>
+            <MenuItem value={PermissionSelectValue.WRITE}>
+                {renderPermissionItem(PermissionSelectValue.WRITE)}
+            </MenuItem>
+            <MenuItem value={PermissionSelectValue.MANAGE}>
+                {renderPermissionItem(PermissionSelectValue.MANAGE)}
+            </MenuItem>
+        </Select>);
+
+const renderPermissionItem = (value: string) =>
+    <PermissionItem {...{ value }} />;
+
+type PermissionItemClasses = 'value';
+
+const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
+    value: {
+        marginLeft: theme.spacing.unit,
+    }
+});
+
+const PermissionItem = withStyles(permissionItemStyles)(
+    ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) =>
+        <Grid container alignItems='center'>
+            {renderPermissionIcon(value)}
+            <span className={classes.value}>
+                {value}
+            </span>
+        </Grid>);
+
+const renderPermissionIcon = (value: string) => {
+    switch (value) {
+        case PermissionSelectValue.READ:
+            return <RemoveRedEye />;
+        case PermissionSelectValue.WRITE:
+            return <Edit />;
+        case PermissionSelectValue.MANAGE:
+            return <Computer />;
+        default:
+            return null;
+    }
+};
diff --git a/src/views-components/sharing-dialog/sharing-dialog.tsx b/src/views-components/sharing-dialog/sharing-dialog.tsx
index e83885ade1..c43d94e265 100644
--- a/src/views-components/sharing-dialog/sharing-dialog.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog.tsx
@@ -5,16 +5,18 @@
 import { compose, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 
+import * as React from 'react';
 import { connectSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
 import { RootState } from '~/store/store';
 
 import SharingDialogComponent, { SharingDialogDataProps, SharingDialogActionProps } from './sharing-dialog-component';
+import { SharingSimpleForm } from './sharing-simple-form';
 
 const mapStateToProps = (_: RootState, props: WithDialogProps<string>): SharingDialogDataProps => ({
     ...props,
     saveEnabled: false,
-    children: null,
+    children: <SharingSimpleForm />,
 });
 
 const mapDispatchToProps = (_: Dispatch, props: WithDialogProps<string>): SharingDialogActionProps => ({
diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
new file mode 100644
index 0000000000..9efbb1be71
--- /dev/null
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -0,0 +1,52 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Field, WrappedFieldProps } from 'redux-form';
+import { Grid, Input, FormControl, FormHelperText, FormLabel, InputLabel } from '@material-ui/core';
+import { ChipsInput } from '~/components/chips-input/chips-input';
+import { identity } from 'lodash';
+import { PermissionSelect } from './permission-select';
+
+export default () =>
+    <Grid container spacing={8}>
+        <Grid item xs={8}>
+            <InvitedPeopleField />
+        </Grid>
+        <Grid item xs={4}>
+            <PermissionSelectField />
+        </Grid>
+    </Grid>;
+
+const InvitedPeopleField = () =>
+    <Field
+        name='invitedPeople'
+        component={InvitedPeopleFieldComponent} />;
+
+
+const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
+    <FormControl fullWidth>
+        <FormLabel>
+            Invite people
+        </FormLabel>
+        <ChipsInput
+            {...props.input}
+            value={['Test User']}
+            createNewValue={identity}
+            inputComponent={Input} />
+        <FormHelperText>
+            Helper text
+        </FormHelperText>
+    </FormControl>;
+
+const PermissionSelectField = () =>
+    <Field
+        name='permission'
+        component={PermissionSelectComponent} />;
+
+const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
+    <FormControl fullWidth>
+        <InputLabel>Authorization</InputLabel>
+        <PermissionSelect {...input} />
+    </FormControl>;
diff --git a/src/views-components/sharing-dialog/sharing-simple-form.tsx b/src/views-components/sharing-dialog/sharing-simple-form.tsx
new file mode 100644
index 0000000000..4e3bf2b33a
--- /dev/null
+++ b/src/views-components/sharing-dialog/sharing-simple-form.tsx
@@ -0,0 +1,10 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+
+import { reduxForm } from 'redux-form';
+
+import SharingInvitationFormComponent from './sharing-invitation-form-component';
+
+export const SharingSimpleForm = reduxForm({form: 'SIMPLE_SHARING_FORM'})(SharingInvitationFormComponent);
\ No newline at end of file
-- 
2.30.2