Merge branch 'origin/master' into 14478-log-in-into-clusters
[arvados.git] / src / views-components / dialog-forms / create-group-dialog.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { compose } from "redux";
7 import { reduxForm, InjectedFormProps, Field, WrappedFieldArrayProps, FieldArray } from 'redux-form';
8 import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog";
9 import { FormDialog } from '~/components/form-dialog/form-dialog';
10 import { CREATE_GROUP_DIALOG, CREATE_GROUP_FORM, createGroup, CreateGroupFormData, CREATE_GROUP_NAME_FIELD_NAME, CREATE_GROUP_USERS_FIELD_NAME } from '~/store/groups-panel/groups-panel-actions';
11 import { TextField } from '~/components/text-field/text-field';
12 import { maxLength } from '~/validators/max-length';
13 import { require } from '~/validators/require';
14 import { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select';
15
16 export const CreateGroupDialog = compose(
17     withDialog(CREATE_GROUP_DIALOG),
18     reduxForm<CreateGroupFormData>({
19         form: CREATE_GROUP_FORM,
20         onSubmit: (data, dispatch) => {
21             dispatch(createGroup(data));
22         }
23     })
24 )(
25     (props: CreateGroupDialogComponentProps) =>
26         <FormDialog
27             dialogTitle='Create a group'
28             formFields={CreateGroupFormFields}
29             submitLabel='Create'
30             {...props}
31         />
32 );
33
34 type CreateGroupDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<CreateGroupFormData>;
35
36 const CreateGroupFormFields = () =>
37     <>
38         <GroupNameField />
39         <UsersField />
40     </>;
41
42 const GroupNameField = () =>
43     <Field
44         name={CREATE_GROUP_NAME_FIELD_NAME}
45         component={TextField}
46         validate={GROUP_NAME_VALIDATION}
47         label="Name"
48         autoFocus={true} />;
49
50 const GROUP_NAME_VALIDATION = [require, maxLength(255)];
51
52 const UsersField = () =>
53     <FieldArray
54         name={CREATE_GROUP_USERS_FIELD_NAME}
55         component={UsersSelect} />;
56
57 const UsersSelect = ({ fields }: WrappedFieldArrayProps<Person>) =>
58     <PeopleSelect
59         label='Enter email adresses '
60         items={fields.getAll() || []}
61         onSelect={fields.push}
62         onDelete={fields.remove} />;