Merge pull request #3 from Bonymol-aot/feature/FWF-3534-custom-search…

…-component

FWF-3534 [Feature] Added style for added seacrch component replaced s…

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;

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>
+
             </>
           )}