disable search if not home

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);
           }}

src/components/common/SearchInput/index.tsx

@@ -11,13 +11,15 @@ 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)
         }
         value={props.value || ""}
       />
       <s.DeleteTagButton
+        disabled={props.disabled}
         onClick={() => {
           props.onChange("");
         }}

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;
+  }
 `;

src/components/common/SearchInput/types.ts

@@ -1,4 +1,5 @@
 export interface SearchInputProps {
   onChange: (value: string | null) => void;
   value?: string | null;
+  disabled?: boolean;
 }