Fix #2871: Make search magnifying glass clickable to search (#2923)

* Fix #2871: Make search magnifying glass clickable to search

* Addressing review comments

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -194,24 +194,31 @@ const Appbar: React.FC = (): JSX.Element => {
     },
   ];
 
+  const searchHandler = (value: string) => {
+    setIsOpen(false);
+    addToRecentSearched(value);
+    history.push(
+      getExplorePathWithSearch(
+        value,
+        // this is for if user is searching from another page
+        location.pathname.startsWith(ROUTES.EXPLORE)
+          ? appState.explorePageTab
+          : 'tables'
+      )
+    );
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const target = e.target as HTMLInputElement;
     if (e.key === 'Enter') {
-      setIsOpen(false);
-
-      addToRecentSearched(target.value);
-      history.push(
-        getExplorePathWithSearch(
-          target.value,
-          // this is for if user is searching from another page
-          location.pathname.startsWith(ROUTES.EXPLORE)
-            ? appState.explorePageTab
-            : 'tables'
-        )
-      );
+      searchHandler(target.value);
     }
   };
 
+  const handleOnclick = () => {
+    searchHandler(searchValue ?? '');
+  };
+
   useEffect(() => {
     setSearchValue(searchQuery);
   }, [searchQuery]);
@@ -243,6 +250,7 @@ const Appbar: React.FC = (): JSX.Element => {
         <NavBar
           handleFeatureModal={handleFeatureModal}
           handleKeyDown={handleKeyDown}
+          handleOnClick={handleOnclick}
           handleSearchBoxOpen={setIsOpen}
           handleSearchChange={handleSearchChange}
           isFeatureModalOpen={isFeatureModalOpen}

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.interface.ts

@@ -26,5 +26,6 @@ export interface NavBarProps {
   handleSearchBoxOpen: (value: boolean) => void;
   handleFeatureModal: (value: boolean) => void;
   handleSearchChange: (value: string) => void;
+  handleOnClick: () => void;
   handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -43,6 +43,7 @@ const NavBar = ({
   handleFeatureModal,
   handleSearchChange,
   handleKeyDown,
+  handleOnClick,
 }: NavBarProps) => {
   const [searchIcon, setSearchIcon] = useState<string>('icon-searchv1');
   const navStyle = (value: boolean) => {
@@ -80,11 +81,15 @@ const NavBar = ({
           <div
             className="tw-flex-none tw-relative tw-justify-items-center tw-ml-auto"
             data-testid="appbar-item">
-            <SVGIcons
-              alt="icon-search"
-              className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-right-2.5 tw-top-2.5 tw-leading-8 tw-text-center tw-pointer-events-none"
-              icon={searchIcon}
-            />
+            <span
+              className="tw-cursor-pointer tw-absolute tw-right-2.5 tw-top-2 tw-block tw-z-40 tw-w-4 tw-h-4 tw-text-center"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleOnClick();
+              }}>
+              <SVGIcons alt="icon-search" icon={searchIcon} />
+            </span>
             <input
               autoComplete="off"
               className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs tw-ml-4"

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx

@@ -79,18 +79,25 @@ const TourPage = () => {
     setSearchValue('');
   };
 
+  const handleSearch = () => {
+    if (location.pathname.includes(ROUTES.TOUR)) {
+      if (searchValue === TOUR_SEARCH_TERM) {
+        AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE;
+        clearSearchTerm();
+      }
+
+      return;
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      if (location.pathname.includes(ROUTES.TOUR)) {
-        if (searchValue === TOUR_SEARCH_TERM) {
-          AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE;
-          clearSearchTerm();
-        }
-
-        return;
-      }
+      handleSearch();
     }
   };
+  const handleOnClick = () => {
+    handleSearch();
+  };
 
   useEffect(() => {
     handleIsTourOpen(true);
@@ -216,6 +223,7 @@ const TourPage = () => {
         isTourRoute
         handleFeatureModal={handleCountChange}
         handleKeyDown={handleKeyDown}
+        handleOnClick={handleOnClick}
         handleSearchBoxOpen={handleCountChange}
         handleSearchChange={(value) => setSearchValue(value)}
         isFeatureModalOpen={false}