Improve people select styles and behaviour

Feature #14365

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx
index f49d171edd152e5767d39cf696bcb51bea36cbd2..2aada00e8ae7c75aee8266ccdcf7c3267c89fca3 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 {
@@ -67,7 +67,7 @@ export const PeopleSelect = connect()(
         renderSuggestion({ firstName, lastName, email }: UserResource) {
             return (
                 <ListItemText>
-                    {`${firstName} ${lastName} <<${email}>>`}
+                    <Typography noWrap>{`${firstName} ${lastName} <<${email}>>`}</Typography>
                 </ListItemText>
             );
         }
@@ -78,13 +78,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) => {

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 eafa480b518d9b50d90a5567eb4716a6318d1aa8..5aec8febed3252b9e4bf3768466ac04fb20ef4a3 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -27,7 +27,6 @@ const InvitedPeopleField = () =>
 const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Person>) =>
     <PeopleSelect
         items={fields.getAll() || []}
-        onCreate={fields.push}
         onSelect={fields.push}
         onDelete={fields.remove} />;