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 (
+
+
+ }
+ endAdornment={
+ !!inputValue && (
+
+
+
+ )
+ }
+ placeholder={placeholder}
+ label="Filter"
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+
+
+ );
+}
+
+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 (
theme.spacing(2) }}>
-
+ {isPartnerPreview ? : }
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 (
theme.spacing(2) }}>
-
+ {isPartnerPreview ? : }