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, addGroupMembers } 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         onSubmit: (data, dispatch) => {
  19             dispatch(addGroupMembers(data));
  20         },
  21     })
  22 )(
  23     (props: AddGroupMembersDialogProps) =>
  24         <FormDialog
  25             dialogTitle='Add users'
  26             formFields={UsersField}
  27             submitLabel='Add'
  28             {...props}
  29         />
  30 );
  31
  32 type AddGroupMembersDialogProps = WithDialogProps<{}> & InjectedFormProps<AddGroupMembersFormData>;
  33
  34 const UsersField = () =>
  35     <FieldArray
  36         name={ADD_GROUP_MEMBERS_USERS_FIELD_NAME}
  37         component={UsersSelect}
  38         validate={UsersFieldValidation} />;
  39
  40 const UsersFieldValidation = [minLength(1, () => 'Select at least one user')];
  41
  42 const UsersSelect = ({ fields }: WrappedFieldArrayProps<Person>) =>
  43     <PeopleSelect
  44         autofocus
  45         label='Enter email adresses '
  46         items={fields.getAll() || []}
  47         onSelect={fields.push}
  48         onDelete={fields.remove} />;