Merge pull request #998 from digma-ai/filters-unify

Filters unify
digma-ai · Aug 23, 2024 · b827cc8 · b827cc8
2 parents aa9d42b + 5255892
commit b827cc8
Show file tree

Hide file tree

Showing 17 changed files with 460 additions and 233 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,6 +11,7 @@
     "digma",
     "digmathon",
     "digmo",
+    "Hotspot",
     "leaderboard",
     "undismiss",
     "zustand"

diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "build:prod": "webpack --config webpack.prod.ts",
     "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
     "precommit": "lint-staged",
-    "prepare": "husky"
+    "prepare": "husky",
+    "start": "npm run storybook"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

diff --git a/src/components/Assets/AssetsFilter/index.tsx b/src/components/Assets/AssetsFilter/index.tsx
@@ -8,19 +8,16 @@ import { isNull } from "../../../typeGuards/isNull";
 import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
 import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
-import { FilterButton } from "../../common/FilterButton";
-import { NewButton } from "../../common/NewButton";
-import { NewPopover } from "../../common/NewPopover";
-import { Select } from "../../common/Select";
+import { FilterPopup } from "../../common/FilterPopup";
 import { WrenchIcon } from "../../common/icons/12px/WrenchIcon";
 import { EndpointIcon } from "../../common/icons/EndpointIcon";
 import { SparkleIcon } from "../../common/icons/SparkleIcon";
 import { IconProps } from "../../common/icons/types";
 import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
 import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
-import * as s from "./styles";
 import {
   AssetFilterCategory,
   AssetFilterQuery,
@@ -29,6 +26,8 @@ import {
   GetAssetFiltersDataPayload
 } from "./types";
 
+import * as s from "./styles";
+
 const PERSISTENCE_KEY = "assetsFilters";
 
 const getData = ({
@@ -53,7 +52,7 @@ const getData = ({
         insights,
         directOnly: Boolean(assetScopeOption?.isDirect),
         scopedSpanCodeObjectId: assetScopeOption?.scopedSpanCodeObjectId,
-        ...(searchQuery.length > 0 ? { displayName: searchQuery } : {})
+        ...(searchQuery?.length > 0 ? { displayName: searchQuery } : {})
       }
     }
   });
@@ -76,7 +75,7 @@ const renderFilterCategory = (
     })) ?? [];
 
   return (
-    <Select
+    <s.StyledSelect
       searchable={true}
       key={category.categoryName}
       items={items}
@@ -462,25 +461,20 @@ export const AssetsFilter = ({
     ...selectedInsights
   ];
 
-  return (
-    <NewPopover
-      width={"calc(100% - 16px)"}
-      content={
-        <s.Container>
-          <s.Header>Filters</s.Header>
-          {isServicesFilterEnabled && (
-            <>
-              <s.FilterCategoryName>Services</s.FilterCategoryName>
-              {renderFilterCategory(
-                servicesCategory,
-                WrenchIcon,
-                selectedServices.length > 0 ? "Services" : "All",
-                selectedServices,
-                handleSelectedItemsChange
-              )}
-            </>
-          )}
-          <s.FilterCategoryName>Operations</s.FilterCategoryName>
+  const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.FILTERS_POPUP_CLOSE_BUTTON_CLICKED
+    );
+  };
+  const handleOnStateChange = (state: boolean) => {
+    setIsOpen(state);
+  };
+
+  const filterComponents = [
+    {
+      title: "Operations",
+      component: (
+        <>
           {renderFilterCategory(
             endpointsCategory,
             EndpointIcon,
@@ -502,38 +496,46 @@ export const AssetsFilter = ({
             selectedInternals,
             handleSelectedItemsChange
           )}
-          <s.FilterCategoryName>Insights</s.FilterCategoryName>
-          {insightsCategory &&
-            renderFilterCategory(
-              insightsCategory,
-              SparkleIcon,
-              "Insights",
-              selectedInsights,
-              handleSelectedItemsChange,
-              (value) => getInsightTypeInfo(value)?.label ?? value
-            )}
-          <s.Footer>
-            <NewButton
-              buttonType={"tertiary"}
-              label={"Clear filters"}
-              disabled={selectedFilters.length === 0}
-              onClick={handleClearFiltersButtonClick}
-            />
-          </s.Footer>
-        </s.Container>
-      }
-      onOpenChange={setIsOpen}
-      isOpen={isOpen}
-      placement={"bottom-end"}
-    >
-      <div>
-        <FilterButton
-          title={"Filters"}
-          showCount={true}
-          selectedCount={selectedFilters.length}
-          isActive={isOpen}
-        />
-      </div>
-    </NewPopover>
+        </>
+      )
+    }
+  ];
+
+  if (insightsCategory) {
+    filterComponents.push({
+      title: "Insights",
+      component: renderFilterCategory(
+        insightsCategory,
+        SparkleIcon,
+        "Insights",
+        selectedInsights,
+        handleSelectedItemsChange,
+        (value) => getInsightTypeInfo(value)?.label ?? value
+      )
+    });
+  }
+
+  if (isServicesFilterEnabled) {
+    filterComponents.unshift({
+      title: "Services",
+      component: renderFilterCategory(
+        servicesCategory,
+        WrenchIcon,
+        selectedServices.length > 0 ? "Services" : "All",
+        selectedServices,
+        handleSelectedItemsChange
+      )
+    });
+  }
+
+  return (
+    <FilterPopup
+      onClose={handleCloseButtonClick}
+      onClearAll={handleClearFiltersButtonClick}
+      title="Filters"
+      filters={filterComponents}
+      selectedFiltersCount={selectedFilters.length}
+      onStateChange={handleOnStateChange}
+    />
   );
 };
diff --git a/src/components/Assets/AssetsFilter/styles.ts b/src/components/Assets/AssetsFilter/styles.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { grayScale } from "../../common/App/v2colors";
+import { Select } from "../../common/v3/Select";
 
 export const Container = styled.div`
   display: flex;
@@ -47,3 +48,7 @@ export const Footer = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
+export const StyledSelect = styled(Select)`
+  background: ${({ theme }) => theme.colors.surface.brandDark};
+`;
diff --git a/src/components/Assets/tracking.ts b/src/components/Assets/tracking.ts
@@ -6,7 +6,8 @@ export const trackingEvents = addPrefix(
   TRACKING_PREFIX,
   {
     FILTER_APPLIED: "filter applied",
-    REFRESH_BUTTON_CLICKED: "refresh button clicked"
+    REFRESH_BUTTON_CLICKED: "refresh button clicked",
+    FILTERS_POPUP_CLOSE_BUTTON_CLICKED: "filter popup close button clicked"
   },
   " "
 );
diff --git a/src/components/Dashboard/Report/ReportHeader/styles.ts b/src/components/Dashboard/Report/ReportHeader/styles.ts
@@ -46,5 +46,4 @@ export const Background = styled.div`
 export const FilterSelector = styled(Select)`
   width: 180px;
   height: 28px;
-  color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;