From 1cd9bf16173b40896acfada0ced5cb16d8cf7fcd Mon Sep 17 00:00:00 2001
From: awildturtok <1553491+awildturtok@users.noreply.github.com>
Date: Mon, 1 Jul 2024 15:58:42 +0200
Subject: [PATCH] Revert "Make projec titems search and concept tree search
 debounced input fields instead of working with enter"

This reverts commit ee1c9b8488ffa542c1df27adfc7b94eeb675e0a8.
---
 .../js/concept-trees/ConceptTreeSearchBox.tsx |  7 +-
 .../previous-queries/list/ProjectItemsTab.tsx |  7 +-
 .../search/ProjectItemsSearchBox.tsx          |  9 ++-
 frontend/src/js/search-bar/SearchBar.tsx      | 68 ++++++++++++++-----
 4 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx b/frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx
index 607dd3479f..a127df832d 100644
--- a/frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx
+++ b/frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useCallback, useRef } from "react";
+import { FC, useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -48,8 +48,11 @@ const TopRow = styled("div")`
   align-items: center;
   gap: 5px;
 `;
+interface PropsT {
+  className?: string;
+}
 
-const ConceptTreeSearchBox = ({ className }: { className?: string }) => {
+const ConceptTreeSearchBox: FC<PropsT> = ({ className }) => {
   const showMismatches = useSelector<StateT, boolean>(
     (state) => state.conceptTrees.search.showMismatches,
   );
diff --git a/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx b/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx
index 6be3e9099e..14ea3f3b48 100644
--- a/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx
+++ b/frontend/src/js/previous-queries/list/ProjectItemsTab.tsx
@@ -13,13 +13,13 @@ import { canUploadResult } from "../../user/selectors";
 import ProjectItemsFilter from "../filter/ProjectItemsFilter";
 import type { ProjectItemsFilterStateT } from "../filter/reducer";
 import { toggleFoldersOpen } from "../folder-filter/actions";
+import ProjectItemsSearchBox from "../search/ProjectItemsSearchBox";
 import ProjectItemsTypeFilter from "../type-filter/ProjectItemsTypeFilter";
 import { ProjectItemsTypeFilterStateT } from "../type-filter/reducer";
 import UploadQueryResults from "../upload/UploadQueryResults";
 
 import { Panel, PanelGroup } from "react-resizable-panels";
 import { ResizeHandle } from "../../common/ResizeHandle";
-import ProjectItemsSearchBox from "../search/ProjectItemsSearchBox";
 import Folders from "./Folders";
 import FoldersToggleButton from "./FoldersToggleButton";
 import { ProjectItemT } from "./ProjectItem";
@@ -46,6 +46,9 @@ const FoldersAndQueries = styled(Row)`
   overflow: hidden;
   position: relative;
 `;
+const SxProjectItemsSearchBox = styled(ProjectItemsSearchBox)`
+  flex-grow: 1;
+`;
 
 const Filters = styled("div")`
   display: flex;
@@ -116,7 +119,7 @@ const ProjectItemsTab = ({ datasetId }: PropsT) => {
           active={areFoldersOpen}
           onClick={onToggleFoldersOpen}
         />
-        <ProjectItemsSearchBox />
+        <SxProjectItemsSearchBox />
         {hasPermissionToUpload && (
           <SxUploadQueryResults datasetId={datasetId} />
         )}
diff --git a/frontend/src/js/previous-queries/search/ProjectItemsSearchBox.tsx b/frontend/src/js/previous-queries/search/ProjectItemsSearchBox.tsx
index 25465a6c69..b353e38730 100644
--- a/frontend/src/js/previous-queries/search/ProjectItemsSearchBox.tsx
+++ b/frontend/src/js/previous-queries/search/ProjectItemsSearchBox.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -8,7 +8,11 @@ import SearchBar from "../../search-bar/SearchBar";
 import { clearSearch, useSearchItems } from "./actions";
 import type { ProjectItemsSearchStateT } from "./reducer";
 
-const ProjectItemsSearchBox = () => {
+interface Props {
+  className?: string;
+}
+
+const ProjectItemsSearchBox: FC<Props> = ({ className }) => {
   const { t } = useTranslation();
   const search = useSelector<StateT, ProjectItemsSearchStateT>(
     (state) => state.projectItemsSearch,
@@ -21,6 +25,7 @@ const ProjectItemsSearchBox = () => {
 
   return (
     <SearchBar
+      className={className}
       searchTerm={search.searchTerm}
       placeholder={t("previousQueries.searchPlaceholder")}
       onClear={onClear}
diff --git a/frontend/src/js/search-bar/SearchBar.tsx b/frontend/src/js/search-bar/SearchBar.tsx
index 9d9612f83b..bf61576ffe 100644
--- a/frontend/src/js/search-bar/SearchBar.tsx
+++ b/frontend/src/js/search-bar/SearchBar.tsx
@@ -1,13 +1,20 @@
 import styled from "@emotion/styled";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { memo, useEffect, useState } from "react";
 
+import IconButton from "../button/IconButton";
 import { exists } from "../common/helpers/exists";
-import { useDebounce } from "../common/helpers/useDebounce";
 import BaseInput from "../ui-components/BaseInput";
 
+const InputContainer = styled("div")`
+  flex-grow: 1;
+  position: relative;
+`;
+
 const SxBaseInput = styled(BaseInput)`
   width: 100%;
   input {
+    padding-right: 60px;
     height: 34px;
     width: 100%;
     &::placeholder {
@@ -17,33 +24,44 @@ const SxBaseInput = styled(BaseInput)`
   }
 `;
 
+const Right = styled("div")`
+  position: absolute;
+  top: 0px;
+  right: 30px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 34px;
+`;
+
+const StyledIconButton = styled(IconButton)`
+  padding: 8px 10px;
+  color: ${({ theme }) => theme.col.gray};
+`;
+
+interface Props {
+  className?: string;
+  searchTerm: string | null;
+  placeholder: string;
+  onSearch: (value: string) => void;
+  onClear: () => void;
+}
+
 const SearchBar = ({
+  className,
   searchTerm,
   placeholder,
   onSearch,
   onClear,
-}: {
-  searchTerm: string | null;
-  placeholder: string;
-  onSearch: (value: string) => void;
-  onClear: () => void;
-}) => {
+}: Props) => {
   const [localSearchTerm, setLocalSearchTerm] = useState<string | null>(null);
 
-  useDebounce(
-    () => {
-      if (exists(localSearchTerm)) onSearch(localSearchTerm);
-    },
-    500,
-    [localSearchTerm],
-  );
-
   useEffect(() => {
     setLocalSearchTerm(searchTerm);
   }, [searchTerm]);
 
   return (
-    <div className="flex-grow">
+    <InputContainer className={className}>
       <SxBaseInput
         inputType="text"
         placeholder={placeholder}
@@ -53,8 +71,24 @@ const SearchBar = ({
 
           setLocalSearchTerm(value as string | null);
         }}
+        inputProps={{
+          onKeyPress: (e) => {
+            return e.key === "Enter" && exists(localSearchTerm)
+              ? onSearch(localSearchTerm)
+              : null;
+          },
+        }}
       />
-    </div>
+      {exists(localSearchTerm) && (
+        <Right>
+          <StyledIconButton
+            icon={faSearch}
+            aria-hidden="true"
+            onClick={() => onSearch(localSearchTerm)}
+          />
+        </Right>
+      )}
+    </InputContainer>
   );
 };