Add Apply button to the Filter popup

.eslintrc.js

@@ -36,8 +36,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["./**/*.tsx"],
-      excludedFiles: ["./src/common/icons/**/*Icon.tsx"],
+      files: ["./src/components/common/icons/**/*Icon.tsx"],
       rules: {
         "react/jsx-curly-brace-presence": "off"
       }

src/components/Assets/AssetList/index.tsx

@@ -144,7 +144,13 @@ export const AssetList = ({
         sortOrder: sorting.order,
         scopedSpanCodeObjectId: scopeSpanCodeObjectId,
         ...(search.length > 0 ? { displayName: search } : {}),
-        ...(scopeSpanCodeObjectId ? { ...filters, services: [] } : filters),
+        insights: filters?.insights ?? [],
+        operations: [
+          ...(filters?.endpoints ?? []),
+          ...(filters?.consumers ?? []),
+          ...(filters?.internals ?? [])
+        ],
+        services: scopeSpanCodeObjectId ? [] : filters?.services ?? [],
         directOnly: viewMode === "children"
       }
     }),

src/components/Assets/AssetTypeList/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { DigmaMessageError } from "../../../api/types";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { AssetsFilters } from "../../../store/assets/assetsSlice";
 import { useAssetsSelector } from "../../../store/assets/useAssetsSelector";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { useStore } from "../../../store/useStore";
@@ -12,7 +13,6 @@ import { SCOPE_CHANGE_EVENTS } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { ChildIcon } from "../../common/icons/30px/ChildIcon";
-import { AssetFilterQuery } from "../AssetsFilter/types";
 import { ViewMode } from "../AssetsViewScopeConfiguration/types";
 import { NoDataMessage } from "../NoDataMessage";
 import { actions } from "../actions";
@@ -23,7 +23,8 @@ import * as s from "./styles";
 import {
   AssetCategoriesData,
   AssetCategoryData,
-  AssetTypeListProps
+  AssetTypeListProps,
+  GetAssetCategoriesDataPayload
 } from "./types";
 
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
@@ -40,23 +41,26 @@ export const ASSET_TYPE_IDS = [
 ];
 
 const getData = (
-  filters: AssetFilterQuery,
+  filters: AssetsFilters | null,
   searchQuery: string,
   viewMode: ViewMode,
   scopeSpanCodeObjectId?: string
 ) => {
-  window.sendMessageToDigma({
+  window.sendMessageToDigma<GetAssetCategoriesDataPayload>({
     action: actions.GET_CATEGORIES_DATA,
     payload: {
       query: {
         directOnly: viewMode === "children",
         scopedSpanCodeObjectId: scopeSpanCodeObjectId,
-        ...(scopeSpanCodeObjectId
-          ? {
-              ...filters,
-              services: []
-            }
-          : filters),
+        ...{
+          insights: filters?.insights ?? [],
+          operations: [
+            ...(filters?.endpoints ?? []),
+            ...(filters?.consumers ?? []),
+            ...(filters?.internals ?? [])
+          ],
+          services: scopeSpanCodeObjectId ? [] : filters?.services ?? []
+        },
         ...(searchQuery.length > 0 ? { displayName: searchQuery } : {})
       }
     }

src/components/Assets/AssetTypeList/types.ts

@@ -21,3 +21,14 @@ export interface AssetCategoryData {
   label?: string;
   icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>;
 }
+
+export interface GetAssetCategoriesDataPayload {
+  query: {
+    directOnly: boolean;
+    scopedSpanCodeObjectId?: string;
+    services: string[];
+    operations: string[];
+    insights: string[];
+    displayName?: string;
+  };
+}