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} />;