Change user select message (#4576)

* change user select

* change select user to search user

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -100,7 +100,7 @@ class AddReviewerDialog extends React.Component {
           <p>{gettext('Add new reviewer')}</p>
           <div className='add-reviewer'>
             <UserSelect
-              placeholder={gettext('Select users...')}
+              placeholder={gettext('Search users...')}
               onSelectChange={this.handleSelectChange}
               ref="reviewSelect"
               isMulti={true}

frontend/src/components/dialog/file-participant-dialog.js

@@ -125,7 +125,7 @@ class FileParticipantDialog extends Component {
               ref="userSelect"
               isMulti={true}
               className="participant-select"
-              placeholder={gettext('Select users...')}
+              placeholder={gettext('Search users...')}
               onSelectChange={this.handleSelectChange}
             />
             <Button className="btn btn-secondary ml-2" onClick={this.addFileParticipant}>{gettext('Add')}</Button>

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -262,7 +262,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                   ref="userSelect"
                   isMulti={true}
                   className="reviewer-select"
-                  placeholder={gettext('Select users...')}
+                  placeholder={gettext('Search users...')}
                   onSelectChange={this.handleUserSelectChange}
                   value={this.state.selectedUsers}
                 />

frontend/src/components/dialog/manage-members-dialog.js

@@ -94,7 +94,7 @@ class ManageMembersDialog extends React.Component {
           <p>{gettext('Add group member')}</p>
           <div className='add-members'>
             <UserSelect
-              placeholder={gettext('Select users...')}
+              placeholder={gettext('Search users...')}
               onSelectChange={this.onSelectChange}
               ref="userSelect"
               isMulti={true}

frontend/src/components/dialog/org-add-member-dialog.js

@@ -55,7 +55,7 @@ class AddMemberDialog extends React.Component {
         <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
         <ModalBody>
           <UserSelect
-            placeholder={gettext('Select users...')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
             ref="orgSelect"
             isMulti={false}

frontend/src/components/dialog/share-to-user.js

@@ -292,7 +292,7 @@ class ShareToUser extends React.Component {
                   ref="userSelect"
                   isMulti={true}
                   className="reviewer-select"
-                  placeholder={gettext('Select users...')}
+                  placeholder={gettext('Search users...')}
                   onSelectChange={this.handleSelectChange}
                 />
               </td>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js

@@ -34,7 +34,7 @@ class AddMemberDialog extends React.Component {
         <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
         <ModalBody>
           <UserSelect
-            placeholder={gettext('Select users...')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
             isMulti={true}
             className='org-add-member-select'

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js

@@ -53,7 +53,7 @@ class AddMemberDialog extends React.Component {
         <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
         <ModalBody>
           <UserSelect
-            placeholder={gettext('Select users...')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
             ref="orgSelect"
             isMulti={true}

frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js

@@ -49,7 +49,7 @@ class SysAdminBatchAddAdminDialog extends React.Component {
           <UserSelect
             isMulti={true}
             className="reviewer-select"
-            placeholder={gettext('Select users...')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
           />  
         </ModalBody>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js

@@ -42,7 +42,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
             ref="userSelect"
             isMulti={true}
             className="reviewer-select"
-            placeholder={gettext('Search users')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
           /> 
         </ModalBody>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js

@@ -43,7 +43,7 @@ class SysAdminRepoTransferDialog extends React.Component {
             ref="userSelect"
             isMulti={false}
             className="reviewer-select"
-            placeholder={gettext('Search users')}
+            placeholder={gettext('Search users...')}
             onSelectChange={this.handleSelectChange}
           /> 
         </ModalBody>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js

@@ -221,7 +221,7 @@ class SysAdminShareToUser extends React.Component {
                   ref="userSelect"
                   isMulti={true}
                   className="reviewer-select"
-                  placeholder={gettext('Select users...')}
+                  placeholder={gettext('Search users...')}
                   onSelectChange={this.handleSelectChange}
                 />
               </td>

frontend/src/components/user-select.js

@@ -11,12 +11,7 @@ const propTypes = {
   onSelectChange: PropTypes.func.isRequired,
   isMulti: PropTypes.bool.isRequired,
   className: PropTypes.string,
-};
+  value: PropTypes.string,
-
-const NoOptionsMessage = (props) => {
-  return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('User not found')}</div>
-  );
 };
 
 class UserSelect extends React.Component {
@@ -24,6 +19,13 @@ class UserSelect extends React.Component {
   constructor(props) {
     super(props);
     this.options = [];
+    this.state = {
+      searchValue: '',
+    };
+  }
+
+  onInputChange = (searchValue) => {
+    this.setState({ searchValue });
   }
 
   handleSelectChange = (option) => {
@@ -61,14 +63,23 @@ class UserSelect extends React.Component {
   }
 
   render() {
+    const searchValue = this.state.searchValue;
+    const style = { margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)' };
     return (
       <AsyncSelect
         isClearable
         classNamePrefix
-        components={{ NoOptionsMessage }}
+        components={{
+          NoOptionsMessage: (props) => {
+            return (
+              <div {...props.innerProps} style={style}>{searchValue ? gettext('User not found') : gettext('Enter characters to start searching')}</div>
+            );
+          } 
+        }}
         isMulti={this.props.isMulti}
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}
+        onInputChange={this.onInputChange}
         placeholder={this.props.placeholder}
         className={`user-select ${this.props.className}`}
         value={this.props.value}