Merge branch '14248_assigning_properties_to_projects_during_create'

[arvados-workbench2.git] / src / views-components / sharing-dialog / people-select.tsx

diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx
index f49d171edd152e5767d39cf696bcb51bea36cbd2..f62e6f55ac0d5a27986c8d719051174d9cc88843 100644 (file)
--- a/src/views-components/sharing-dialog/people-select.tsx
+++ b/src/views-components/sharing-dialog/people-select.tsx
@@ -9,7 +9,7 @@ import { connect, DispatchProp } from 'react-redux';
 import { ServiceRepository } from '~/services/services';
 import { FilterBuilder } from '../../services/api/filter-builder';
 import { debounce } from 'debounce';
-import { ListItemText } from '@material-ui/core';
+import { ListItemText, Typography } from '@material-ui/core';
 import { noop } from 'lodash/fp';
 
 export interface Person {
@@ -17,9 +17,12 @@ export interface Person {
     email: string;
     uuid: string;
 }
+
 export interface PeopleSelectProps {
 
     items: Person[];
+    label?: string;
+    autofocus?: boolean;
 
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -43,12 +46,16 @@ export const PeopleSelect = connect()(
         };
 
         render() {
+
+            const { label = 'Invite people' } = this.props;
+
             return (
                 <Autocomplete
-                    label='Invite people'
+                    label={label}
                     value={this.state.value}
                     items={this.props.items}
                     suggestions={this.state.suggestions}
+                    autofocus={this.props.autofocus}
                     onChange={this.handleChange}
                     onCreate={this.handleCreate}
                     onSelect={this.handleSelect}
@@ -67,7 +74,7 @@ export const PeopleSelect = connect()(
         renderSuggestion({ firstName, lastName, email }: UserResource) {
             return (
                 <ListItemText>
-                    {`${firstName} ${lastName} <<${email}>>`}
+                    <Typography noWrap>{`${firstName} ${lastName} <<${email}>>`}</Typography>
                 </ListItemText>
             );
         }
@@ -78,13 +85,15 @@ export const PeopleSelect = connect()(
         }
 
         handleCreate = () => {
-            const { onCreate = noop } = this.props;
-            this.setState({ value: '', suggestions: [] });
-            onCreate({
-                email: '',
-                name: '',
-                uuid: this.state.value,
-            });
+            const { onCreate } = this.props;
+            if (onCreate) {
+                this.setState({ value: '', suggestions: [] });
+                onCreate({
+                    email: '',
+                    name: '',
+                    uuid: this.state.value,
+                });
+            }
         }
 
         handleSelect = ({ email, firstName, lastName, uuid }: UserResource) => {