From a1b8e174a75a1b9865496f7c265c041f6c63ae2f Mon Sep 17 00:00:00 2001
From: Stefanos Hadjipetrou <stefanos@zimmerman.team>
Date: Tue, 21 Mar 2023 12:50:30 +0200
Subject: [PATCH] feat: add search reset icon in grants table

---
 .../components/filters/common/group/index.tsx   |  5 -----
 .../grants-module/components/Search/layout.tsx  | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
index 3b6f3e67b..4a17e826f 100644
--- a/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
+++ b/src/app/components/ToolBoxPanel/components/filters/common/group/index.tsx
@@ -31,11 +31,6 @@ export function FilterGroup(props: FilterGroupCompProps) {
   });
 
   function onFilterRemove(option: string) {
-    console.log(
-      appliedFilters,
-      appliedFiltersChildren,
-      appliedFiltersGrandChildren
-    );
     let fAppliedFilterOption: FilterGroupOptionModel | undefined;
     props.options.every((o) => {
       if (o.value === option) {
diff --git a/src/app/modules/grants-module/components/Search/layout.tsx b/src/app/modules/grants-module/components/Search/layout.tsx
index b97de7e7c..b90961b9a 100644
--- a/src/app/modules/grants-module/components/Search/layout.tsx
+++ b/src/app/modules/grants-module/components/Search/layout.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import get from "lodash/get";
+import CloseIcon from "@material-ui/icons/Close";
+import { useCMSData } from "app/hooks/useCMSData";
 import { SearchIcon } from "app/assets/icons/Search";
+import IconButton from "@material-ui/core/IconButton";
 import {
   container,
   input,
 } from "app/modules/grants-module/components/Search/styles";
-import { useCMSData } from "app/hooks/useCMSData";
 
 interface SearchLayoutProps {
   value: string;
@@ -26,7 +28,18 @@ export function SearchLayout(props: SearchLayoutProps) {
           props.setValue(e.target.value)
         }
       />
-      <SearchIcon />
+      {props.value.length === 0 ? (
+        <SearchIcon />
+      ) : (
+        <IconButton
+          onClick={() => props.setValue("")}
+          css={`
+            padding: 0;
+          `}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
     </div>
   );
 }