From 4a4b1cfd41081b93fdc14ff8e30983af8c5318d0 Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Wed, 26 Jun 2024 15:18:02 +0100
Subject: [PATCH] [Platform]: Rollback `AotF` search input in public (#400)

---
 .../components/SearchInput.jsx                | 62 +++++++++++++++++++
 .../components/AssociationsToolkit/index.ts   |  1 +
 .../DiseaseAssociations.tsx                   |  5 +-
 .../TargetAssociations/TargetAssociations.tsx |  5 +-
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 apps/platform/src/components/AssociationsToolkit/components/SearchInput.jsx

diff --git a/apps/platform/src/components/AssociationsToolkit/components/SearchInput.jsx b/apps/platform/src/components/AssociationsToolkit/components/SearchInput.jsx
new file mode 100644
index 000000000..01a722a1f
--- /dev/null
+++ b/apps/platform/src/components/AssociationsToolkit/components/SearchInput.jsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { Grid, Input, IconButton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { faXmark, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useDebounce } from "ui";
+import useAotfContext from "../hooks/useAotfContext";
+
+const InputContainer = styled(Grid)({
+  marginRight: "15px",
+  width: "250px",
+  "& input": {
+    width: "220px",
+  },
+});
+
+function SearchInput({ placeholder = "Search" }) {
+  const { handleSearchInputChange } = useAotfContext();
+  const [inputValue, setInputValue] = useState("");
+  const debouncedInputValue = useDebounce(inputValue, 200);
+
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputClean = () => {
+    setInputValue("");
+  };
+
+  useEffect(
+    () => {
+      handleSearchInputChange(debouncedInputValue);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [debouncedInputValue]
+  );
+
+  return (
+    <InputContainer container>
+      <Grid item xs={12}>
+        <Input
+          name="associationsSearchInput"
+          autoComplete="off"
+          startAdornment={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          endAdornment={
+            !!inputValue && (
+              <IconButton onClick={handleInputClean}>
+                <FontAwesomeIcon icon={faXmark} size="2xs" />
+              </IconButton>
+            )
+          }
+          placeholder={placeholder}
+          label="Filter"
+          onChange={handleInputChange}
+          value={inputValue}
+        />
+      </Grid>
+    </InputContainer>
+  );
+}
+
+export default SearchInput;
diff --git a/apps/platform/src/components/AssociationsToolkit/index.ts b/apps/platform/src/components/AssociationsToolkit/index.ts
index c74d02b76..747d4d9f7 100644
--- a/apps/platform/src/components/AssociationsToolkit/index.ts
+++ b/apps/platform/src/components/AssociationsToolkit/index.ts
@@ -3,6 +3,7 @@ export { default as TableAssociations } from "./components/Table/TableAssociatio
 export { default as TargetPrioritisationSwitch } from "./components/TargetPrioritisationSwitch";
 export { default as DataDownloader } from "./components/DataDownloader";
 export { default as DataUploader } from "./components/DataUploader/DataUploader";
+export { default as SearchInput } from "./components/SearchInput";
 export { default as AotfApiPlayground } from "./components/AotfApiPlayground";
 export {
   default as AssociationsContext,
diff --git a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
index e51fda586..647e355e0 100644
--- a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
+++ b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { Box, Divider } from "@mui/material";
+import { usePermissions } from "ui";
 import {
   TableAssociations,
   AdvanceOptionsMenu,
@@ -9,6 +10,7 @@ import {
   ControlsSection,
   DataUploader,
   AotfApiPlayground,
+  SearchInput,
 } from "../../../components/AssociationsToolkit";
 import { ENTITY } from "../../../components/AssociationsToolkit/types";
 import DISEASE_ASSOCIATIONS_QUERY from "./DiseaseAssociationsQuery.gql";
@@ -19,6 +21,7 @@ type DiseaseAssociationsProps = {
 };
 
 function DiseaseAssociations(pros: DiseaseAssociationsProps): ReactElement {
+  const { isPartnerPreview } = usePermissions();
   return (
     <AssociationsProvider
       id={pros.efoId}
@@ -27,7 +30,7 @@ function DiseaseAssociations(pros: DiseaseAssociationsProps): ReactElement {
     >
       <ControlsSection>
         <Box sx={{ flex: 2, display: "flex", flexWrap: "wrap", gap: theme => theme.spacing(2) }}>
-          <FacetsSearch />
+          {isPartnerPreview ? <FacetsSearch /> : <SearchInput />}
           <AdvanceOptionsMenu />
           <DataUploader />
           <Divider orientation="vertical" />
diff --git a/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx b/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
index 5f7b4f692..94c828bf7 100644
--- a/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
+++ b/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { Box, Divider } from "@mui/material";
+import { usePermissions } from "ui";
 import {
   TableAssociations,
   AdvanceOptionsMenu,
@@ -8,6 +9,7 @@ import {
   ControlsSection,
   DataUploader,
   AotfApiPlayground,
+  SearchInput,
 } from "../../../components/AssociationsToolkit";
 import { ENTITY } from "../../../components/AssociationsToolkit/types";
 import TARGET_ASSOCIATIONS_QUERY from "./TargetAssociationsQuery.gql";
@@ -18,11 +20,12 @@ type TargetAssociationsProps = {
 };
 
 function TargetAssociations({ ensgId }: TargetAssociationsProps): ReactElement {
+  const { isPartnerPreview } = usePermissions();
   return (
     <AssociationsProvider id={ensgId} entity={ENTITY.TARGET} query={TARGET_ASSOCIATIONS_QUERY}>
       <ControlsSection>
         <Box sx={{ flex: 2, display: "flex", flexWrap: "wrap", gap: theme => theme.spacing(2) }}>
-          <FacetsSearch />
+          {isPartnerPreview ? <FacetsSearch /> : <SearchInput />}
           <AdvanceOptionsMenu />
           <DataUploader />
           <Divider orientation="vertical" />