From 2ad947d4e1c6fff7a5f41f1c47504e1c8b69147b Mon Sep 17 00:00:00 2001
From: Artem Blazhko <artem_blazhko@epam.com>
Date: Mon, 30 Dec 2024 13:00:08 +0200
Subject: [PATCH] Add default styles to "Enter" buttons (#1257)

---
 CHANGELOG.md                                  |  1 +
 .../InstanceInformation.css                   | 12 ++++++
 .../InstanceInformation.js                    | 13 ++++---
 .../ItemInformation/ItemInformation.css       | 12 ++++++
 .../ItemInformation/ItemInformation.js        | 13 ++++---
 .../RequesterInformation.css                  | 12 ++++++
 .../RequesterInformation.js                   | 39 ++++++++++---------
 .../InstanceInformation.css                   |  9 +++++
 .../InstanceInformation.js                    | 11 +++---
 .../ItemInformation/ItemInformation.css       |  9 +++++
 .../ItemInformation/ItemInformation.js        | 11 +++---
 src/requests.css                              |  4 --
 12 files changed, 101 insertions(+), 45 deletions(-)
 create mode 100644 src/components/InstanceInformation/InstanceInformation.css
 create mode 100644 src/components/ItemInformation/ItemInformation.css
 create mode 100644 src/components/RequesterInformation/RequesterInformation.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61da1a995..dee18146c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * Add "Retrieval service point" filter. Refs UIREQ-1190.
 * Include `Retrieval service point` column in csv exports. Refs UIREQ-1191.
 * Add icons to requests action menu. Refs UIREQ-1116.
+* Revise "Enter" button on New request page. Refs UIREQ-1114.
 
 ## [11.0.2] (https://github.com/folio-org/ui-requests/tree/v11.0.2) (2024-12-10)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v11.0.1...v11.0.2)
diff --git a/src/components/InstanceInformation/InstanceInformation.css b/src/components/InstanceInformation/InstanceInformation.css
new file mode 100644
index 000000000..03a83a0a4
--- /dev/null
+++ b/src/components/InstanceInformation/InstanceInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.instanceHridField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/InstanceInformation/InstanceInformation.js b/src/components/InstanceInformation/InstanceInformation.js
index 745b0d818..d1bc1348d 100644
--- a/src/components/InstanceInformation/InstanceInformation.js
+++ b/src/components/InstanceInformation/InstanceInformation.js
@@ -24,7 +24,7 @@ import {
   memoizeValidation,
 } from '../../utils';
 
-import css from '../../requests.css';
+import css from './InstanceInformation.css';
 
 export const INSTANCE_SEGMENT_FOR_PLUGIN = 'instances';
 
@@ -174,7 +174,10 @@ class InstanceInformation extends Component {
             !isEditForm &&
             <>
               <Row>
-                <Col xs={9}>
+                <Col
+                  xs={12}
+                  className={css.fieldWrapper}
+                >
                   <FormattedMessage id="ui-requests.instance.scanOrEnterBarcode">
                     {placeholder => {
                       const key = values.keyOfInstanceIdField ?? 0;
@@ -202,6 +205,7 @@ class InstanceInformation extends Component {
                                 onChange={this.handleChange}
                                 onBlur={this.handleBlur(input)}
                                 onKeyDown={this.onKeyDown}
+                                className={css.instanceHridField}
                               />
                             );
                           }}
@@ -209,12 +213,9 @@ class InstanceInformation extends Component {
                       );
                     }}
                   </FormattedMessage>
-                </Col>
-                <Col xs={3}>
                   <Button
-                    buttonStyle="primary noRadius"
+                    buttonStyle="default"
                     buttonClass={css.enterButton}
-                    fullWidth
                     onClick={this.handleClick}
                     disabled={submitting}
                   >
diff --git a/src/components/ItemInformation/ItemInformation.css b/src/components/ItemInformation/ItemInformation.css
new file mode 100644
index 000000000..e655f5772
--- /dev/null
+++ b/src/components/ItemInformation/ItemInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.itemBarcodeField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/ItemInformation/ItemInformation.js b/src/components/ItemInformation/ItemInformation.js
index 3b1e9f1a0..9de6be05a 100644
--- a/src/components/ItemInformation/ItemInformation.js
+++ b/src/components/ItemInformation/ItemInformation.js
@@ -24,7 +24,7 @@ import {
   memoizeValidation,
 } from '../../utils';
 
-import css from '../../requests.css';
+import css from './ItemInformation.css';
 
 class ItemInformation extends Component {
   static propTypes = {
@@ -176,7 +176,10 @@ class ItemInformation extends Component {
           {
             !isEditForm &&
             <Row>
-              <Col xs={9}>
+              <Col
+                xs={12}
+                className={css.fieldWrapper}
+              >
                 <FormattedMessage id="ui-requests.item.scanOrEnterBarcode">
                   {placeholder => {
                     const key = values.keyOfItemBarcodeField ?? 0;
@@ -204,6 +207,7 @@ class ItemInformation extends Component {
                               onChange={this.handleChange}
                               onBlur={this.handleBlur(input)}
                               onKeyDown={this.onKeyDown}
+                              className={css.itemBarcodeField}
                             />
                           );
                         }}
@@ -211,13 +215,10 @@ class ItemInformation extends Component {
                     );
                   }}
                 </FormattedMessage>
-              </Col>
-              <Col xs={3}>
                 <Button
                   id="clickable-select-item"
-                  buttonStyle="primary noRadius"
+                  buttonStyle="default"
                   buttonClass={css.enterButton}
-                  fullWidth
                   onClick={this.handleClick}
                   disabled={submitting}
                 >
diff --git a/src/components/RequesterInformation/RequesterInformation.css b/src/components/RequesterInformation/RequesterInformation.css
new file mode 100644
index 000000000..a9aff6466
--- /dev/null
+++ b/src/components/RequesterInformation/RequesterInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.requesterBarcodeField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/RequesterInformation/RequesterInformation.js b/src/components/RequesterInformation/RequesterInformation.js
index c1c16eb2d..e52b93984 100644
--- a/src/components/RequesterInformation/RequesterInformation.js
+++ b/src/components/RequesterInformation/RequesterInformation.js
@@ -28,7 +28,7 @@ import {
   BASE_SPINNER_PROPS,
 } from '../../constants';
 
-import css from '../../requests.css';
+import css from './RequesterInformation.css';
 
 export const VISIBLE_COLUMNS = ['active', 'name', 'patronGroup', 'username', 'barcode'];
 export const COLUMN_MAPPING = {
@@ -224,7 +224,10 @@ class RequesterInformation extends Component {
         <Col xs={12}>
           {!isEditForm &&
           <Row>
-            <Col xs={9}>
+            <Col
+              xs={12}
+              className={css.fieldWrapper}
+            >
               <FormattedMessage id="ui-requests.requester.scanOrEnterBarcode">
                 {placeholder => {
                   const key = values.keyOfUserBarcodeField ?? 0;
@@ -252,6 +255,7 @@ class RequesterInformation extends Component {
                             onChange={this.handleChange}
                             onBlur={this.handleBlur(input)}
                             onKeyDown={this.onKeyDown}
+                            className={css.requesterBarcodeField}
                           />
                         );
                       }}
@@ -259,26 +263,10 @@ class RequesterInformation extends Component {
                   );
                 }}
               </FormattedMessage>
-              <Pluggable
-                {...this.props}
-                aria-haspopup="true"
-                type="find-user"
-                searchLabel={<FormattedMessage id="ui-requests.requester.findUserPluginLabel" />}
-                searchButtonStyle="link"
-                dataKey="users"
-                selectUser={this.onSelectUser}
-                visibleColumns={VISIBLE_COLUMNS}
-                columnMapping={COLUMN_MAPPING}
-                disableRecordCreation
-                marginTop0
-              />
-            </Col>
-            <Col xs={3}>
               <Button
                 id="clickable-select-requester"
-                buttonStyle="primary noRadius"
+                buttonStyle="default"
                 buttonClass={css.enterButton}
-                fullWidth
                 onClick={this.handleClick}
                 disabled={submitting}
               >
@@ -286,6 +274,19 @@ class RequesterInformation extends Component {
               </Button>
             </Col>
           </Row>}
+          <Pluggable
+            {...this.props}
+            aria-haspopup="true"
+            type="find-user"
+            searchLabel={<FormattedMessage id="ui-requests.requester.findUserPluginLabel" />}
+            searchButtonStyle="link"
+            dataKey="users"
+            selectUser={this.onSelectUser}
+            visibleColumns={VISIBLE_COLUMNS}
+            columnMapping={COLUMN_MAPPING}
+            disableRecordCreation
+            marginTop0
+          />
           {(selectedUser?.id || isEditForm) &&
             <UserForm
               user={request ? request.requester : selectedUser}
diff --git a/src/deprecated/components/InstanceInformation/InstanceInformation.css b/src/deprecated/components/InstanceInformation/InstanceInformation.css
index 97c034ab1..03a83a0a4 100644
--- a/src/deprecated/components/InstanceInformation/InstanceInformation.css
+++ b/src/deprecated/components/InstanceInformation/InstanceInformation.css
@@ -1,3 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.instanceHridField {
+  margin-right: 20px;
+}
+
 .enterButton {
   margin-top: 25px;
 }
diff --git a/src/deprecated/components/InstanceInformation/InstanceInformation.js b/src/deprecated/components/InstanceInformation/InstanceInformation.js
index c6eafab7f..9bf3591ce 100644
--- a/src/deprecated/components/InstanceInformation/InstanceInformation.js
+++ b/src/deprecated/components/InstanceInformation/InstanceInformation.js
@@ -176,7 +176,10 @@ class InstanceInformation extends Component {
             !isEditForm &&
             <>
               <Row>
-                <Col xs={9}>
+                <Col
+                  xs={12}
+                  className={css.fieldWrapper}
+                >
                   <FormattedMessage id="ui-requests.instance.scanOrEnterBarcode">
                     {placeholder => {
                       const key = values.keyOfInstanceIdField ?? 0;
@@ -204,6 +207,7 @@ class InstanceInformation extends Component {
                                 onChange={this.handleChange}
                                 onBlur={this.handleBlur(input)}
                                 onKeyDown={this.onKeyDown}
+                                className={css.instanceHridField}
                               />
                             );
                           }}
@@ -211,12 +215,9 @@ class InstanceInformation extends Component {
                       );
                     }}
                   </FormattedMessage>
-                </Col>
-                <Col xs={3}>
                   <Button
-                    buttonStyle="primary noRadius"
+                    buttonStyle="default"
                     buttonClass={css.enterButton}
-                    fullWidth
                     onClick={this.handleClick}
                     disabled={submitting}
                   >
diff --git a/src/deprecated/components/ItemInformation/ItemInformation.css b/src/deprecated/components/ItemInformation/ItemInformation.css
index 97c034ab1..e655f5772 100644
--- a/src/deprecated/components/ItemInformation/ItemInformation.css
+++ b/src/deprecated/components/ItemInformation/ItemInformation.css
@@ -1,3 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.itemBarcodeField {
+  margin-right: 20px;
+}
+
 .enterButton {
   margin-top: 25px;
 }
diff --git a/src/deprecated/components/ItemInformation/ItemInformation.js b/src/deprecated/components/ItemInformation/ItemInformation.js
index 58e517e36..8e283bc0c 100644
--- a/src/deprecated/components/ItemInformation/ItemInformation.js
+++ b/src/deprecated/components/ItemInformation/ItemInformation.js
@@ -178,7 +178,10 @@ class ItemInformation extends Component {
           {
             !isEditForm &&
             <Row>
-              <Col xs={9}>
+              <Col
+                xs={12}
+                className={css.fieldWrapper}
+              >
                 <FormattedMessage id="ui-requests.item.scanOrEnterBarcode">
                   {placeholder => {
                     const key = values.keyOfItemBarcodeField ?? 0;
@@ -206,6 +209,7 @@ class ItemInformation extends Component {
                               onChange={this.handleChange}
                               onBlur={this.handleBlur(input)}
                               onKeyDown={this.onKeyDown}
+                              className={css.itemBarcodeField}
                             />
                           );
                         }}
@@ -213,13 +217,10 @@ class ItemInformation extends Component {
                     );
                   }}
                 </FormattedMessage>
-              </Col>
-              <Col xs={3}>
                 <Button
                   id="clickable-select-item"
-                  buttonStyle="primary noRadius"
+                  buttonStyle="default"
                   buttonClass={css.enterButton}
-                  fullWidth
                   onClick={this.handleClick}
                   disabled={submitting}
                 >
diff --git a/src/requests.css b/src/requests.css
index 29b86738b..5062784c4 100644
--- a/src/requests.css
+++ b/src/requests.css
@@ -26,7 +26,3 @@
   margin-bottom: 0.5em;
   user-select: none;
 }
-
-.enterButton {
-  margin-top: 25px;
-}