From fa0bfe92adc1d0172e9f8789ce33e4b6969e8c1a Mon Sep 17 00:00:00 2001
From: Bonymol-aot <bonymol@aot-technologies.com>
Date: Sun, 18 Aug 2024 21:24:17 -0700
Subject: [PATCH] FWF-3534 [Feature] Added style for added seacrch component
 replaced search in list

---
 .../src/components/CustomComponents/Search.js | 58 +++++++++++
 forms-flow-web/src/components/Form/List.js    | 96 ++++++++++---------
 .../src/components/Modals/SearchBox.js        | 66 -------------
 3 files changed, 108 insertions(+), 112 deletions(-)
 create mode 100644 forms-flow-web/src/components/CustomComponents/Search.js
 delete mode 100644 forms-flow-web/src/components/Modals/SearchBox.js

diff --git a/forms-flow-web/src/components/CustomComponents/Search.js b/forms-flow-web/src/components/CustomComponents/Search.js
new file mode 100644
index 0000000000..c6437db76c
--- /dev/null
+++ b/forms-flow-web/src/components/CustomComponents/Search.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { InputGroup, FormControl, Spinner } from 'react-bootstrap';
+
+const customSearch = ({
+  searchFormLoading,
+  handleClearSearch,
+  search,
+  setSearch,
+  handleSearch,
+  placeholder,
+  title
+}) => {
+  const inputClassNames = `d-flex align-items-center bg-white out-line search-box-input ${
+    searchFormLoading ? 'is-searching' : search ? 'has-value' : ''
+  }`;
+
+  return (
+    <InputGroup className="d-flex align-items-center p-0 search-box input-group">
+      <div className="form-control-with-icon">
+        <FormControl
+          className={inputClassNames}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+          onKeyDown={(e) => (e.keyCode === 13 ? handleSearch() : "")}
+          placeholder={placeholder}
+          title={title}
+          data-testid="form-search-input-box"
+          aria-label={placeholder}
+        />
+        {search && searchFormLoading ? (
+          <span className="d-flex search-box-icon loading">
+            <Spinner animation="border" size="sm" />
+          </span>
+        ) : (
+          search && !searchFormLoading ? (
+            <span
+              className="search-box-icon clear"
+              onClick={handleClearSearch}
+              data-testid="form-search-clear-button"
+            >
+              <i className="fa fa-times"></i>
+            </span>
+          ) : null
+        )}
+      </div>
+    </InputGroup>
+  );
+};
+
+
+customSearch.defaultProps = {
+  placeholder: "Search...",
+  title: "Search"
+};
+
+export default customSearch;
diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js
index 25ad08c7fb..1f5193944c 100644
--- a/forms-flow-web/src/components/Form/List.js
+++ b/forms-flow-web/src/components/Form/List.js
@@ -3,7 +3,6 @@ import { connect, useSelector, useDispatch } from "react-redux";
 import CreateFormModal from "../Modals/CreateFormModal.js";
 import BuildFormModal from '../Modals/BuildFormModal';
 import ImportFormModal from "../Modals/ImportFormModal.js";
-import SearchBox from "../Modals/SearchBox";
 import { push } from "connected-react-router";
 import { toast } from "react-toastify";
 import { addTenantkey } from "../../helper/helper";
@@ -42,6 +41,7 @@ import { addHiddenApplicationComponent } from "../../constants/applicationCompon
 import { setFormSuccessData } from "../../actions/formActions";
 import { handleAuthorization } from "../../apiManager/services/authorizationService";
 import { saveFormProcessMapperPost } from "../../apiManager/services/processServices";
+import CustomSearch from "../CustomComponents/Search.js";
 import userRoles from "../../constants/permissions.js";
 
 
@@ -286,51 +286,55 @@ const List = React.memo((props) => {
           <Errors errors={errors} />
           {createDesigns && (
             <>
-              <div className="d-md-flex  justify-content-between align-items-center pb-3">
-                <SearchBox
-                  search={search}
-                  setSearch={setSearch}
-                  handleSearch={handleSearch}
-                  searchFormLoading={searchFormLoading}
-                  handleClearSearch={handleClearSearch}
-                  placeholder={t("Search Form Name or Description")}
-                  title={t("Search Form Name and Description")}
-                />
-                <div className=" d-md-flex justify-content-end align-items-center">
-                  {createDesigns && (
-                    <Button
-                      variant="primary"
-                      size="md"
-                      label="New Form"
-                      onClick={() =>
-                        setNewFormModal(true)
-                      }
-                      className=""
-                      dataTestid="create-form-button"
-                      ariaLabel="Create Form"
-                    />
-                  )}
-                  <CreateFormModal newFormModal={newFormModal}
-                    actionType={ActionType}
-                    onClose={onClose}
-                    onAction={handleAction}
-                  />
-                  <BuildFormModal showBuildForm={showBuildForm}
-                    formSubmitted={formSubmitted}
-                    onClose={onCloseBuildModal}
-                    onAction={handleAction}
-                    handleChange={handleChange}
-                    handleBuild={handleBuild}
-                    setFormDescription={setFormDescription}
-                    setNameError={setNameError}
-                    nameError={nameError}
-                  />
-                  <ImportFormModal importFormModal={importFormModal}
-                    onClose={onCloseimportModal}
-                    uploadAction={uploadAction}
-                  />
-                </div>
-              </div>
+              <div className="d-md-flex justify-content-between align-items-center pb-3 flex-wrap">
+  <div className="d-md-flex align-items-center flex-grow-1 me-2">
+    <CustomSearch
+      search={search}
+      setSearch={setSearch}
+      handleSearch={handleSearch}
+      handleClearSearch={handleClearSearch}
+      placeholder={t("Search Form Name and Description")}
+      searchFormLoading={searchFormLoading}
+      title={t("Search Form Name and Description")}
+    />
+  </div>
+  <div className="d-md-flex justify-content-end align-items-center">
+    {createDesigns && (
+      <Button
+        variant="primary"
+        size="md"
+        label="New Form"
+        onClick={() => setNewFormModal(true)}
+        className=""
+        dataTestid="create-form-button"
+        ariaLabel="Create Form"
+      />
+    )}
+    <CreateFormModal
+      newFormModal={newFormModal}
+      actionType={ActionType}
+      onClose={onClose}
+      onAction={handleAction}
+    />
+    <BuildFormModal
+      showBuildForm={showBuildForm}
+      formSubmitted={formSubmitted}
+      onClose={onCloseBuildModal}
+      onAction={handleAction}
+      handleChange={handleChange}
+      handleBuild={handleBuild}
+      setFormDescription={setFormDescription}
+      setNameError={setNameError}
+      nameError={nameError}
+    />
+    <ImportFormModal
+      importFormModal={importFormModal}
+      onClose={onCloseimportModal}
+      uploadAction={uploadAction}
+    />
+  </div>
+</div>
+
             </>
           )}
 
diff --git a/forms-flow-web/src/components/Modals/SearchBox.js b/forms-flow-web/src/components/Modals/SearchBox.js
deleted file mode 100644
index 0f61455790..0000000000
--- a/forms-flow-web/src/components/Modals/SearchBox.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { InputGroup, FormControl } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-
-const SearchBox = ({
-    searchFormLoading,
-    handleClearSearch,
-    search,
-    setSearch,
-    handleSearch,
-    placeholder,
-    title
-}) => {
-    return (
-        <>
-            <InputGroup className="d-flex align-items-center p-0 search-box input-group" style={{ width: "24%" }}>
-                <div className="form-control-with-icon">
-                    <FormControl
-                        className=" d-flex align-items-center bg-white out-line search-box"
-                        value={search}
-                        onChange={(e) => {
-                            setSearch(e.target.value);
-                        }}
-                        onKeyDown={(e) => (e.keyCode === 13 ? handleSearch() : "")}
-                        placeholder={placeholder}
-                        title={title}
-                        data-testid="form-search-input-box"
-                        aria-label={placeholder}
-                        icon={"fa fa-times"}
-                    />
-                    { search && searchFormLoading ? (
-                        <span className="d-flex search-box-icon spinner"> loading</span>
-                    ) : (
-                        search && !searchFormLoading ? (
-                            <span
-                                className="search-box-icon"
-                                onClick={handleClearSearch}
-                                data-testid="form-search-clear-button"
-                            >
-                                <i className="fa fa-times"></i>
-                            </span>
-                        ) : null
-                    )}
-                    
-                </div>
-            </InputGroup>
-
-        </>
-    );
-};
-
-SearchBox.propTypes = {
-    search: PropTypes.string.isRequired,
-    setSearch: PropTypes.func.isRequired,
-    handleSearch: PropTypes.func.isRequired,
-    handleClearSearch: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
-    title: PropTypes.string
-};
-
-SearchBox.defaultProps = {
-    placeholder: "Search...",
-    title: "Search"
-};
-
-export default SearchBox;
\ No newline at end of file