coverage search for user

client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx

@@ -126,6 +126,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
     render() {
         const {gettext} = superdeskApi.localization;
         const {coverage} = this.props;
+        const {SelectUser} = superdeskApi.components;
 
         const {allLanguages, language} = getLanguagesForCoverage(
             this.props.profile,
@@ -172,13 +173,16 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
                             testId="user"
                             noPadding={true}
                         >
-                            <SelectUserInput
-                                field="user"
-                                placeholder={gettext('Search users')}
-                                value={coverage.user}
-                                onChange={this.onUserChange}
-                                users={coverage.filteredUsers}
-                            />
+                            <Row style={{padding: '2rem 0'}}>
+                                <SelectUser
+                                    onSelect={(user) => {
+                                        this.onUserChange(null, user);
+                                    }}
+                                    autoFocus={false}
+                                    horizontalSpacing={true}
+                                    clearable={true}
+                                />
+                            </Row>
                         </Row>
                     </List.Row>
                     <List.Row>

e2e/cypress/support/common/inputs/coverageUserSelectInput.ts

@@ -0,0 +1,30 @@
+import {Input} from './input';
+import {Popup} from '../ui';
+
+/**
+ * Wrapper class for a searchable user select input field
+ * @extends Input
+ */
+export class CoverageUserSelectInput extends Input {
+    type(value) {
+        cy.log('Common.SearchableSelectInput.type');
+        const popup = new Popup('.p-dropdown-panel');
+
+        this.element.click();
+        popup.waitTillOpen();
+
+        popup.element.find('input')
+            .type(value);
+
+        popup.element.find('li')
+            .first()
+            .click();
+
+        popup.waitTillClosed();
+    }
+
+    expect(value) {
+        cy.log('Common.SearchableSelectInput.expect');
+        this.element.should('contain.text', value);
+    }
+}

e2e/cypress/support/common/inputs/index.ts

@@ -9,3 +9,4 @@ export {SpikeStateInput} from './spikeStateInput';
 export {LocationInput} from './locationInput';
 export {NewCheckboxInput} from './newCheckbox';
 export {TreeSelect} from './treeSelect';
+export {CoverageUserSelectInput} from './coverageUserSelectInput';

e2e/cypress/support/planning/events/embeddedCoverageEditor.ts

@@ -1,5 +1,5 @@
 import {EventEditor} from './eventEditor';
-import {SelectInput, NewCheckboxInput, UserSelectInput} from '../../common';
+import {SelectInput, NewCheckboxInput, CoverageUserSelectInput} from '../../common';
 
 export class EmbeddedCoverageEditor {
     editor: EventEditor;
@@ -36,7 +36,7 @@ export class EmbeddedCoverage {
     editor: EmbeddedCoverageEditor;
     planningIndex: number;
     coverageIndex: number;
-    fields: {[key: string]: SelectInput | NewCheckboxInput | UserSelectInput};
+    fields: {[key: string]: SelectInput | NewCheckboxInput | CoverageUserSelectInput};
 
     constructor(editor: EmbeddedCoverageEditor, planningIndex: number, coverageIndex: number) {
         this.editor = editor;
@@ -48,7 +48,7 @@ export class EmbeddedCoverage {
         this.fields = {
             enabled: new NewCheckboxInput(getParent, '[data-test-id="enabled"]'),
             desk: new SelectInput(getParent, '[data-test-id="desk"] select'),
-            user: new UserSelectInput(getParent, '[data-test-id="user"]'),
+            user: new CoverageUserSelectInput(getParent, '[data-test-id="user"]'),
             status: new SelectInput(getParent, '[data-test-id="status"] select'),
         };
     }