diff --git a/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx b/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx index a394bce86..752b3ae61 100644 --- a/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx +++ b/client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx @@ -126,6 +126,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent { 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 { testId="user" noPadding={true} > - + + { + this.onUserChange(null, user); + }} + autoFocus={false} + horizontalSpacing={true} + clearable={true} + /> + diff --git a/e2e/cypress/support/common/inputs/coverageUserSelectInput.ts b/e2e/cypress/support/common/inputs/coverageUserSelectInput.ts new file mode 100644 index 000000000..457339b68 --- /dev/null +++ b/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); + } +} diff --git a/e2e/cypress/support/common/inputs/index.ts b/e2e/cypress/support/common/inputs/index.ts index 24a542a53..28705f1ee 100644 --- a/e2e/cypress/support/common/inputs/index.ts +++ b/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'; diff --git a/e2e/cypress/support/planning/events/embeddedCoverageEditor.ts b/e2e/cypress/support/planning/events/embeddedCoverageEditor.ts index 732289f9c..cbc3ff221 100644 --- a/e2e/cypress/support/planning/events/embeddedCoverageEditor.ts +++ b/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'), }; }