Add Belga user search using credentials to the reassign modal [SDBELG…

…A-770] (#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
superdesk · Mar 6, 2024 · 69383a4 · 69383a4
1 parent 74735c9
commit 69383a4
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 407 deletions.
diff --git a/client/components/Assignments/AssignmentEditor.tsx b/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 && (

diff --git a/client/components/Assignments/EditCoverageAssignmentModal.tsx b/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>

diff --git a/client/components/Coverages/CoverageAddAdvancedModal.tsx b/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">

diff --git a/client/components/ModalWithForm/index.tsx b/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>

diff --git a/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx b/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx