Add Belga user search using credentials to the reassign modal [SDBELGA-770] (superdesk#1919)

* Add Belga user search using credentials to the reassign modal [SDBELGA-770]

* fix bootstarp by using removeTabIndexAttribute

* fix test

* fix e2e

* refactore code and update coverageAdvancedModal

* removed selectUserInput component

* refactore code

* add SelectUser stub to superdeskApi

* update e2e testcases

Author: devketanpro

client/components/Assignments/AssignmentEditor.tsx

@@ -14,9 +14,9 @@ import {
     Row,
     SelectInput,
     ColouredValueInput,
-    SelectUserInput,
 } from '../UI/Form';
 import {ContactsPreviewList, SelectSearchContactsField} from '../Contacts';
+import {superdeskApi} from '../../superdeskApi';
 
 export class AssignmentEditorComponent extends React.Component {
     constructor(props) {
@@ -243,6 +243,7 @@ export class AssignmentEditorComponent extends React.Component {
             showPriority,
             className,
         } = this.props;
+        const {SelectUser} = superdeskApi.components;
 
         return (
             <div className={className}>
@@ -297,15 +298,19 @@ export class AssignmentEditorComponent extends React.Component {
                         />
                     </Row>
                 ) : (
-                    <SelectUserInput
-                        field={this.FIELDS.USER}
-                        label={gettext('User')}
-                        value={this.state.user}
-                        onChange={this.onUserChange}
-                        users={this.state.filteredUsers}
-                        popupContainer={popupContainer}
-                        readOnly={disableUserSelection}
-                    />
+                    <Row style={{padding: '2rem 0', margin: '0 0 1.8em 0'}}>
+                        <div data-test-id={this.FIELDS.USER}>
+                            <SelectUser
+                                selectedUserId = {this.state.userId}
+                                onSelect={(user) => {
+                                    this.onUserChange(null, user);
+                                }}
+                                autoFocus={false}
+                                horizontalSpacing={true}
+                                clearable={true}
+                            />
+                        </div>
+                    </Row>
                 )}
 
                 {showPriority && (

client/components/Assignments/EditCoverageAssignmentModal.tsx

@@ -70,6 +70,7 @@ export class EditCoverageAssignmentModalComponent extends React.Component {
                 show={true}
                 onHide={handleHide}
                 fill={false}
+                removeTabIndexAttribute={true}
             >
                 <Modal.Header>
                     <h3 className="modal__heading">{gettext('Coverage Assignment Details')}</h3>

client/components/Coverages/CoverageAddAdvancedModal.tsx

@@ -9,7 +9,8 @@ import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import {getVocabularyItemFieldTranslated} from '../../utils/vocabularies';
 
 import Modal from '../Modal';
-import {SelectInput, SelectUserInput} from '../UI/Form';
+import {SelectInput} from '../UI/Form';
+import {superdeskApi} from '../../superdeskApi';
 
 const isInvalid = (coverage) => coverage.user && !coverage.desk;
 
@@ -35,7 +36,7 @@ interface ICoverageSelector {
     name: IG2ContentType['name'];
     icon: string;
     desk: IDesk['_id'];
-    user: IUser['_id'];
+    user: IUser;
     status: IPlanningNewsCoverageStatus;
     popupContainer: any;
     filteredDesks: Array<IDesk>;
@@ -218,6 +219,7 @@ export class CoverageAddAdvancedModal extends React.Component<IProps, IState> {
 
     render() {
         const language = getUserInterfaceLanguageFromCV();
+        const {SelectUser} = superdeskApi.components;
 
         return (
             <Modal
@@ -228,6 +230,7 @@ export class CoverageAddAdvancedModal extends React.Component<IProps, IState> {
                     event.stopPropagation();
                     this.props.close();
                 }}
+                removeTabIndexAttribute={true}
             >
                 <Modal.Header>
                     <h3 className="modal__heading">
@@ -276,18 +279,25 @@ export class CoverageAddAdvancedModal extends React.Component<IProps, IState> {
                                                 </div>
 
                                                 <div className="grid__item grid__item--col4">
-                                                    <SelectUserInput
-                                                        field={'user'}
-                                                        value={coverage.user}
-                                                        onChange={(field, value) => this.onUserChange(coverage, value)}
-                                                        labelField="name"
-                                                        keyField="_id"
-                                                        users={coverage.filteredUsers}
-                                                        clearable={true}
-                                                        popupContainer={() => coverage.popupContainer}
-                                                        inline={true}
-                                                    />
-                                                    <div ref={(node) => coverage.popupContainer = node} />
+                                                    <div
+                                                        style={
+                                                            {
+                                                                margin: '0 0 1.8em 0',
+                                                                paddingBlockStart: '1.8rem',
+                                                                position: 'relative'}
+                                                        }
+                                                    >
+                                                        <SelectUser
+                                                            selectedUserId = {coverage.user?._id}
+                                                            onSelect={(user) => {
+                                                                this.onUserChange(coverage, user);
+                                                            }}
+                                                            autoFocus={false}
+                                                            horizontalSpacing={true}
+                                                            clearable={true}
+                                                        />
+                                                        <div ref={(node) => coverage.popupContainer = node} />
+                                                    </div>
                                                 </div>
 
                                                 <div className="grid__item grid__item--col4">

client/components/ModalWithForm/index.tsx

@@ -101,6 +101,7 @@ export class ModalWithForm extends React.Component {
                 fill={fill}
                 fullscreen={fullscreen}
                 white={white}
+                removeTabIndexAttribute={true}
             >
                 <Modal.Header>
                     <h3 className="modal__heading">{title}</h3>