From a1b2234ac87f1b88696751b77403ef0705d1e4c3 Mon Sep 17 00:00:00 2001
From: olehp <opoliarush@digma.ai>
Date: Wed, 14 Aug 2024 19:24:28 +0300
Subject: [PATCH] Improve issues filters

---
 .../Insights/Issues/IssuesFilter/index.tsx          | 13 ++++++++++++-
 .../Insights/Issues/IssuesFilter/styles.ts          | 10 ++++++++++
 .../Insights/Issues/IssuesFilter/tracking.ts        |  3 ++-
 src/components/common/v3/Select/styles.ts           |  2 +-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx
index 1a9cfd3a5..6fc85a596 100644
--- a/src/components/Insights/Issues/IssuesFilter/index.tsx
+++ b/src/components/Insights/Issues/IssuesFilter/index.tsx
@@ -11,6 +11,7 @@ import { NewPopover } from "../../../common/NewPopover";
 import { EyeIcon } from "../../../common/icons/12px/EyeIcon";
 import { FourPointedStarIcon } from "../../../common/icons/12px/FourPointedStarIcon";
 import { WrenchIcon } from "../../../common/icons/12px/WrenchIcon";
+import { CrossIcon } from "../../../common/icons/16px/CrossIcon";
 import { WarningTriangleIcon } from "../../../common/icons/WarningTriangleIcon";
 import { IconProps } from "../../../common/icons/types";
 import { Select } from "../../../common/v3/Select";
@@ -95,6 +96,11 @@ export const IssuesFilter = () => {
     setFilteredServices(newFilteredServices);
   };
 
+  const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.CLOSE_FILTER_DIALOG_CLICKED);
+    setIsOpen(false);
+  };
+
   const handleToggleFilterChange = (
     value: string | string[],
     filterType: InsightFilterType
@@ -173,7 +179,12 @@ export const IssuesFilter = () => {
       width={"100%"}
       content={
         <s.Container>
-          <s.Header>Filters</s.Header>
+          <s.Header>
+            Filters
+            <s.CloseButton onClick={handleCloseButtonClick}>
+              <CrossIcon color={"currentColor"} size={16} />
+            </s.CloseButton>
+          </s.Header>
           <s.FilterCategoryName>Issues</s.FilterCategoryName>
           <Select
             key={"issues"}
diff --git a/src/components/Insights/Issues/IssuesFilter/styles.ts b/src/components/Insights/Issues/IssuesFilter/styles.ts
index b0e338051..ef86706eb 100644
--- a/src/components/Insights/Issues/IssuesFilter/styles.ts
+++ b/src/components/Insights/Issues/IssuesFilter/styles.ts
@@ -23,6 +23,7 @@ export const Header = styled.div`
   padding: 0 4px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   ${bodyBoldTypography}
 `;
 
@@ -75,3 +76,12 @@ export const InsightIconContainer = styled.div`
   display: flex;
   color: ${({ theme }) => theme.colors.v3.icon.tertiary};
 `;
+
+export const CloseButton = styled.button`
+  padding: 0;
+  cursor: pointer;
+  background: none;
+  border: none;
+  height: 14px;
+  color: inherit;
+`;
diff --git a/src/components/Insights/Issues/IssuesFilter/tracking.ts b/src/components/Insights/Issues/IssuesFilter/tracking.ts
index 49db7c351..32ef8f6d2 100644
--- a/src/components/Insights/Issues/IssuesFilter/tracking.ts
+++ b/src/components/Insights/Issues/IssuesFilter/tracking.ts
@@ -6,7 +6,8 @@ export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
     FILTER_OPTION_SELECTED: "filter option selected",
-    CLEAR_ALL_FILTERS_BUTTON_CLICKED: "clear all filters button clicked"
+    CLEAR_ALL_FILTERS_BUTTON_CLICKED: "clear all filters button clicked",
+    CLOSE_FILTER_DIALOG_CLICKED: "close filter dialog clicked"
   },
   " "
 );
diff --git a/src/components/common/v3/Select/styles.ts b/src/components/common/v3/Select/styles.ts
index 9459943c8..b203da115 100644
--- a/src/components/common/v3/Select/styles.ts
+++ b/src/components/common/v3/Select/styles.ts
@@ -104,7 +104,7 @@ export const OptionList = styled.ul`
 export const OptionListItem = styled.li<OptionListItemProps>`
   display: flex;
   gap: 8px;
-  height: 28px;
+  max-height: 28px;
   align-self: stretch;
   align-items: center;
   padding: 5px 8px;