From 068b127f0e6a67623a3ab8466967d674665c7c8c Mon Sep 17 00:00:00 2001
From: ngondalia <113199503+ngondalia@users.noreply.github.com>
Date: Tue, 11 Jun 2024 14:31:40 -0400
Subject: [PATCH] Fix buttons shifting when loading icon is visible (#1081)

Loading button is now displayed in the search bar. This
fixes the issue where buttons shift whenever loading
icon is displayed

Signed-off-by: Neel Gondalia <ngondalia@blackberry.com>
---
 .../components/table-renderer-components.tsx  | 91 ++++++++++---------
 .../style/output-components-style.css         | 27 ++++++
 2 files changed, 76 insertions(+), 42 deletions(-)

diff --git a/packages/react-components/src/components/table-renderer-components.tsx b/packages/react-components/src/components/table-renderer-components.tsx
index e9d811871..bf5ac8839 100644
--- a/packages/react-components/src/components/table-renderer-components.tsx
+++ b/packages/react-components/src/components/table-renderer-components.tsx
@@ -137,50 +137,57 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
                     </div>
                 )}
                 {this.state.hasClicked && (
-                    <div>
-                        <input
-                            data-testid="search-filter-element-input"
-                            type="text"
-                            autoFocus={true}
-                            onKeyDown={this.onKeyDownEvent}
-                            onInput={this.onInputBoxChanged}
-                            style={{
-                                width: '50%',
-                                margin: '10px',
-                                color: this.state.isSearchSuccessful ? '' : 'red'
-                            }}
-                            defaultValue={this.props.filterModel.get(this.props.colName) ?? ''}
-                            title="Enter a regular expression, then press Enter"
-                        />
-                        {this.state.isSearching && (
+                    <div className="search-bar-container">
+                        <div className="input-container">
+                            <input
+                                data-testid="search-filter-element-input"
+                                type="text"
+                                autoFocus={true}
+                                onKeyDown={this.onKeyDownEvent}
+                                onInput={this.onInputBoxChanged}
+                                style={{
+                                    width: '100%',
+                                    marginTop: '5px',
+                                    paddingRight: this.state.isSearching ? '14px' : '4px',
+                                    color: this.state.isSearchSuccessful ? '' : 'red'
+                                }}
+                                defaultValue={this.props.filterModel.get(this.props.colName) ?? ''}
+                                title="Enter a regular expression, then press Enter"
+                            />
+                            {this.state.isSearching && (
+                                <div className="icon-container">
+                                    <FontAwesomeIcon
+                                        spin
+                                        icon={faSpinner}
+                                        title="Searching..."
+                                        style={{ fontSize: '10px' }}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                        <div className="toolbar-container">
+                            <FontAwesomeIcon
+                                className="hoverClass"
+                                icon={faTimes}
+                                style={{ marginLeft: '8px', marginTop: '5px' }}
+                                onClick={this.onCloseClickHandler}
+                                title="Clear search"
+                            />
+                            <FontAwesomeIcon
+                                className="hoverClass"
+                                icon={faAngleDown}
+                                style={{ marginLeft: '8px', marginTop: '5px' }}
+                                onClick={this.onDownClickHandler}
+                                title="Find next"
+                            />
                             <FontAwesomeIcon
-                                spin
-                                icon={faSpinner}
-                                style={{ marginRight: '10px', marginTop: '20px' }}
-                                title="Searching..."
+                                className="hoverClass"
+                                icon={faAngleUp}
+                                style={{ marginLeft: '8px', marginTop: '5px' }}
+                                onClick={this.onUpClickHandler}
+                                title="Find previous"
                             />
-                        )}
-                        <FontAwesomeIcon
-                            className="hoverClass"
-                            icon={faTimes}
-                            style={{ marginTop: '20px' }}
-                            onClick={this.onCloseClickHandler}
-                            title="Clear search"
-                        />
-                        <FontAwesomeIcon
-                            className="hoverClass"
-                            icon={faAngleDown}
-                            style={{ marginLeft: '10px', marginTop: '20px' }}
-                            onClick={this.onDownClickHandler}
-                            title="Find next"
-                        />
-                        <FontAwesomeIcon
-                            className="hoverClass"
-                            icon={faAngleUp}
-                            style={{ marginLeft: '10px', marginTop: '20px' }}
-                            onClick={this.onUpClickHandler}
-                            title="Find previous"
-                        />
+                        </div>
                     </div>
                 )}
             </div>
diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
index f0fe0e7d7..e3d013134 100644
--- a/packages/react-components/style/output-components-style.css
+++ b/packages/react-components/style/output-components-style.css
@@ -489,3 +489,30 @@ canvas {
     outline: none;
     box-shadow: none;
 }
+
+.search-bar-container {
+    display: flex;
+    align-items: center;
+}
+
+.input-container {
+    flex: 5;
+    padding: 5px;
+    display: flex;
+    position: relative;
+}
+
+.input-container input {
+    flex: 1;
+}
+
+.icon-container {
+    position: absolute;
+    right: 8px;
+    margin-top: 8px;
+}
+
+.toolbar-container {
+    flex: 1;
+    margin-right: 5px;
+}