src/views-components/dialog-forms/add-group-member-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, 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 { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select';
  11 import { ADD_GROUP_MEMBERS_DIALOG, ADD_GROUP_MEMBERS_FORM, AddGroupMembersFormData, ADD_GROUP_MEMBERS_USERS_FIELD_NAME } from '~/store/group-details-panel/group-details-panel-actions';
  12 import { minLength } from '~/validators/min-length';
  13
  14 export const AddGroupMembersDialog = compose(
  15     withDialog(ADD_GROUP_MEMBERS_DIALOG),
  16     reduxForm<AddGroupMembersFormData>({
  17         form: ADD_GROUP_MEMBERS_FORM,
  18     })
  19 )(
  20     (props: AddGroupMembersDialogProps) =>
  21         <FormDialog
  22             dialogTitle='Add users'
  23             formFields={UsersField}
  24             submitLabel='Add'
  25             {...props}
  26         />
  27 );
  28
  29 type AddGroupMembersDialogProps = WithDialogProps<{}> & InjectedFormProps<AddGroupMembersFormData>;
  30
  31 const UsersField = () =>
  32     <FieldArray
  33         name={ADD_GROUP_MEMBERS_USERS_FIELD_NAME}
  34         component={UsersSelect}
  35         validate={UsersFieldValidation} />;
  36
  37 const UsersFieldValidation = [minLength(1, () => 'Select at least one user')];
  38
  39 const UsersSelect = ({ fields }: WrappedFieldArrayProps<Person>) =>
  40     <PeopleSelect
  41         label='Enter email adresses '
  42         items={fields.getAll() || []}
  43         onSelect={fields.push}
  44         onDelete={fields.remove} />;