From db665d0fc84d22137f99ab30eaab0b73f5d9b612 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Mon, 19 Feb 2024 14:19:46 +0200
Subject: [PATCH] disable search if not home

---
 src/components/Insights/InsightsCatalog/index.tsx |  8 ++++++++
 src/components/common/SearchInput/index.tsx       |  2 ++
 src/components/common/SearchInput/styles.ts       | 10 ++++++++++
 src/components/common/SearchInput/types.ts        |  1 +
 4 files changed, 21 insertions(+)

diff --git a/src/components/Insights/InsightsCatalog/index.tsx b/src/components/Insights/InsightsCatalog/index.tsx
index fa40186bc..ace39bc19 100644
--- a/src/components/Insights/InsightsCatalog/index.tsx
+++ b/src/components/Insights/InsightsCatalog/index.tsx
@@ -31,6 +31,13 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   );
   const config = useContext(ConfigContext);
   const previousConfig = usePrevious(config);
+  const previousScope = usePrevious(config.scope?.span);
+
+  useEffect(() => {
+    if (!previousScope || previousScope !== config.scope?.span) {
+      setSearchInputValue("");
+    }
+  }, [config.scope, previousScope]);
 
   useEffect(() => {
     if (
@@ -76,6 +83,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     <>
       <s.Toolbar>
         <SearchInput
+          disabled={!!config.scope?.span}
           onChange={(val: string | null) => {
             setSearchInputValue(val);
           }}
diff --git a/src/components/common/SearchInput/index.tsx b/src/components/common/SearchInput/index.tsx
index 8c2cfb083..e392b0078 100644
--- a/src/components/common/SearchInput/index.tsx
+++ b/src/components/common/SearchInput/index.tsx
@@ -11,6 +11,7 @@ export const SearchInput = (props: SearchInputProps) => {
         <MagnifierIcon color={"currentColor"} size={14} />
       </s.SearchInputIconContainer>
       <s.SearchInput
+        disabled={props.disabled}
         placeholder={"Search"}
         onChange={(e: ChangeEvent<HTMLInputElement>) =>
           props.onChange(e.target.value)
@@ -18,6 +19,7 @@ export const SearchInput = (props: SearchInputProps) => {
         value={props.value || ""}
       />
       <s.DeleteTagButton
+        disabled={props.disabled}
         onClick={() => {
           props.onChange("");
         }}
diff --git a/src/components/common/SearchInput/styles.ts b/src/components/common/SearchInput/styles.ts
index 9daa67d81..71d59e945 100644
--- a/src/components/common/SearchInput/styles.ts
+++ b/src/components/common/SearchInput/styles.ts
@@ -54,6 +54,12 @@ export const SearchInput = styled.input`
     }
   }};
 
+  &:disabled {
+    border: 1px solid;
+    background: ${grayScale[700]};
+    pointer-events: none;
+  }
+
   &:focus,
   &:hover {
     border: 1px solid
@@ -91,4 +97,8 @@ export const DeleteTagButton = styled.button`
   top: 0;
   bottom: 0;
   color: ${({ theme }) => theme.colors.icon.disabledAlt};
+
+  &:disabled {
+    pointer-events: none;
+  }
 `;
diff --git a/src/components/common/SearchInput/types.ts b/src/components/common/SearchInput/types.ts
index 7ebbf739d..c5ec6761d 100644
--- a/src/components/common/SearchInput/types.ts
+++ b/src/components/common/SearchInput/types.ts
@@ -1,4 +1,5 @@
 export interface SearchInputProps {
   onChange: (value: string | null) => void;
   value?: string | null;
+  disabled?: boolean;
 }