19049: Only show active users in add login participant select

[arvados-workbench2.git] / src / views-components / sharing-dialog / sharing-invitation-form-component.tsx

diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
index 9efbb1be715b3ba7b63cde3c9f8bbc94d6ea47a0..6c0b8d81a3c94f00c8bc223569666e46f6063812 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -2,48 +2,40 @@
 //
 // 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';
+import React from 'react';
+import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
+import { Grid, FormControl, InputLabel } from '@material-ui/core';
+import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
+import { ParticipantSelect, Participant } from './participant-select';
 
 export default () =>
     <Grid container spacing={8}>
-        <Grid item xs={8}>
+        <Grid data-cy="invite-people-field" item xs={8}>
             <InvitedPeopleField />
         </Grid>
-        <Grid item xs={4}>
+        <Grid data-cy="permission-select-field" item xs={4}>
             <PermissionSelectField />
         </Grid>
     </Grid>;
 
 const InvitedPeopleField = () =>
-    <Field
+    <FieldArray
         name='invitedPeople'
-        component={InvitedPeopleFieldComponent} />;
+        component={InvitedPeopleFieldComponent as any} />;
 
 
-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 InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Participant>) =>
+    <ParticipantSelect
+        items={fields.getAll() || []}
+        onSelect={fields.push}
+        onDelete={fields.remove} />;
 
 const PermissionSelectField = () =>
     <Field
-        name='permission'
-        component={PermissionSelectComponent} />;
+        name='permissions'
+        component={PermissionSelectComponent}
+        format={formatPermissionLevel}
+        parse={parsePermissionLevel} />;
 
 const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
     <FormControl fullWidth>