[Security Solution] Coverage overview dashboard filter and search bar

x-pack/plugins/security_solution/common/api/detection_engine/rule_management/coverage_overview/coverage_overview_route.mock.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { CoverageOverviewFilter } from './coverage_overview_route';
+import {
+  CoverageOverviewRuleSource,
+  CoverageOverviewRuleActivity,
+} from './coverage_overview_route';
+
+export const getCoverageOverviewFilterMock = (): CoverageOverviewFilter => ({
+  search_term: 'test query',
+  activity: [CoverageOverviewRuleActivity.Enabled],
+  source: [CoverageOverviewRuleSource.Prebuilt],
+});

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/constants.ts

@@ -6,13 +6,20 @@
  */
 
 import { euiPalettePositive } from '@elastic/eui';
+import {
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
+import * as i18n from './translations';
 
 export const coverageOverviewPaletteColors = euiPalettePositive(5);
 
 export const coverageOverviewPanelWidth = 160;
 
 export const coverageOverviewLegendWidth = 380;
 
+export const coverageOverviewFilterWidth = 300;
+
 /**
  * Rules count -> color map
  *
@@ -24,3 +31,29 @@ export const coverageOverviewCardColorThresholds = [
   { threshold: 3, color: coverageOverviewPaletteColors[1] },
   { threshold: 1, color: coverageOverviewPaletteColors[0] },
 ];
+
+export const ruleStatusFilterDefaultOptions = [
+  {
+    label: i18n.CoverageOverviewEnabledRuleStatus,
+    key: CoverageOverviewRuleActivity.Enabled,
+  },
+  {
+    label: i18n.CoverageOverviewDisabledRuleStatus,
+    key: CoverageOverviewRuleActivity.Disabled,
+  },
+];
+
+export const ruleTypeFilterDefaultOptions = [
+  {
+    label: i18n.CoverageOverviewElasticRuleType,
+    key: CoverageOverviewRuleSource.Prebuilt,
+  },
+  {
+    label: i18n.CoverageOverviewCustomizedRuleType,
+    key: CoverageOverviewRuleSource.Customized,
+  },
+  {
+    label: i18n.CoverageOverviewCustomRuleType,
+    key: CoverageOverviewRuleSource.Custom,
+  },
+];

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/coverage_overview_page.test.tsx

@@ -18,6 +18,8 @@ jest.mock('../../../rule_management/api/hooks/use_fetch_coverage_overview');
 
 (useFetchCoverageOverviewQuery as jest.Mock).mockReturnValue({
   data: getMockCoverageOverviewDashboard(),
+  isLoading: false,
+  refetch: () => {},
 });
 
 const renderCoverageOverviewDashboard = () => {

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/coverage_overview_page.tsx

@@ -4,8 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useCallback, useReducer } from 'react';
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { invariant } from '../../../../../common/utils/invariant';
 import { SecuritySolutionPageWrapper } from '../../../../common/components/page_wrapper';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
 import { SecurityPageName } from '../../../../app/types';
@@ -16,36 +17,37 @@ import { useFetchCoverageOverviewQuery } from '../../../rule_management/api/hook
 import { CoverageOverviewTacticPanel } from './tactic_panel';
 import { CoverageOverviewMitreTechniquePanelPopover } from './technique_panel_popover';
 import { CoverageOverviewFiltersPanel } from './filters_panel';
+import type { CoverageOverviewDashboardContextType } from './reducer';
 import { createCoverageOverviewDashboardReducer, initialState } from './reducer';
 
-const CoverageOverviewPageComponent = () => {
-  const { data } = useFetchCoverageOverviewQuery();
+export const CoverageOverviewDashboardContext =
+  createContext<CoverageOverviewDashboardContextType | null>(null);
 
-  const [{ showExpandedCells }, dispatch] = useReducer(
-    createCoverageOverviewDashboardReducer(),
-    initialState
+export const useCoverageOverviewDashboardContext = (): CoverageOverviewDashboardContextType => {
+  const dashboardContext = useContext(CoverageOverviewDashboardContext);
+  invariant(
+    dashboardContext,
+    'dashboardContext should be used inside CoverageOverviewDashboardContext'
   );
 
-  const setShowExpandedCells = useCallback(
-    (value: boolean): void => {
-      dispatch({
-        type: 'setShowExpandedCells',
-        value,
-      });
-    },
-    [dispatch]
-  );
+  return dashboardContext;
+};
+
+const CoverageOverviewPageComponent = () => {
+  const [state, dispatch] = useReducer(createCoverageOverviewDashboardReducer(), initialState);
+  const { data, isLoading, refetch } = useFetchCoverageOverviewQuery(state.filter);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch, state.filter]);
 
   return (
-    <>
+    <CoverageOverviewDashboardContext.Provider value={{ state, dispatch }}>
       <SecuritySolutionPageWrapper data-test-subj="coverageOverviewPage">
         <HeaderPage title={i18n.COVERAGE_OVERVIEW_DASHBOARD_TITLE} />
       </SecuritySolutionPageWrapper>
 
-      <CoverageOverviewFiltersPanel
-        setShowExpandedCells={setShowExpandedCells}
-        showExpandedCells={showExpandedCells}
-      />
+      <CoverageOverviewFiltersPanel isLoading={isLoading} />
       <EuiSpacer />
       <EuiFlexGroup gutterSize="m" className="eui-xScroll">
         {data?.mitreTactics.map((tactic) => (
@@ -56,17 +58,14 @@ const CoverageOverviewPageComponent = () => {
 
             {tactic.techniques.map((technique, techniqueKey) => (
               <EuiFlexItem grow={false} key={`${technique.id}-${techniqueKey}`}>
-                <CoverageOverviewMitreTechniquePanelPopover
-                  technique={technique}
-                  isExpanded={showExpandedCells}
-                />
+                <CoverageOverviewMitreTechniquePanelPopover technique={technique} />
               </EuiFlexItem>
             ))}
           </EuiFlexGroup>
         ))}
       </EuiFlexGroup>
       <SpyRoute pageName={SecurityPageName.coverageOverview} />
-    </>
+    </CoverageOverviewDashboardContext.Provider>
   );
 };
 

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filter_panel.test.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { fireEvent, render, within } from '@testing-library/react';
+import React, { useReducer } from 'react';
+
+import { TestProviders } from '../../../../common/mock';
+import { CoverageOverviewDashboardContext } from './coverage_overview_page';
+import { createCoverageOverviewDashboardReducer, initialState } from './reducer';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { CoverageOverviewFiltersPanel } from './filters_panel';
+import { ruleStatusFilterDefaultOptions, ruleTypeFilterDefaultOptions } from './constants';
+
+const renderFiltersPanel = () => {
+  const { result } = renderHook(() =>
+    useReducer(createCoverageOverviewDashboardReducer(), initialState)
+  );
+
+  const [state, dispatch] = result.current;
+
+  return {
+    wrapper: render(
+      <TestProviders>
+        <CoverageOverviewDashboardContext.Provider value={{ state, dispatch }}>
+          <CoverageOverviewFiltersPanel isLoading={false} />
+        </CoverageOverviewDashboardContext.Provider>
+      </TestProviders>
+    ),
+    context: result,
+  };
+};
+
+describe('CoverageOverviewFiltersPanel', () => {
+  test('it renders all correct rule status filter options', () => {
+    const { wrapper } = renderFiltersPanel();
+
+    act(() => {
+      fireEvent.click(wrapper.getByTestId('coverageOverviewRuleStatusFilterButton'));
+    });
+
+    expect(wrapper.getByTestId('coverageOverviewFilterList')).toBeInTheDocument();
+    ruleStatusFilterDefaultOptions.forEach((option) => {
+      expect(
+        within(wrapper.getByTestId('coverageOverviewFilterList')).getByText(option.label)
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('it renders all correct rule type filter options', () => {
+    const { wrapper } = renderFiltersPanel();
+
+    act(() => {
+      fireEvent.click(wrapper.getByTestId('coverageOverviewRuleTypeFilterButton'));
+    });
+
+    expect(wrapper.getByTestId('coverageOverviewFilterList')).toBeInTheDocument();
+    ruleTypeFilterDefaultOptions.forEach((option) => {
+      expect(
+        within(wrapper.getByTestId('coverageOverviewFilterList')).getByText(option.label)
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('it correctly populates rule status filter state', () => {
+    const { wrapper, context } = renderFiltersPanel();
+
+    act(() => {
+      fireEvent.click(wrapper.getByTestId('coverageOverviewRuleStatusFilterButton'));
+    });
+
+    act(() => {
+      fireEvent.click(
+        within(wrapper.getByTestId('coverageOverviewFilterList')).getByText(
+          ruleStatusFilterDefaultOptions[0].label
+        )
+      );
+    });
+    expect(context.current[0].filter).toMatchInlineSnapshot(`
+      Object {
+        "activity": Array [
+          "enabled",
+        ],
+      }
+    `);
+  });
+
+  test('it correctly populates rule type filter state', () => {
+    const { wrapper, context } = renderFiltersPanel();
+
+    act(() => {
+      fireEvent.click(wrapper.getByTestId('coverageOverviewRuleTypeFilterButton'));
+    });
+
+    act(() => {
+      fireEvent.click(
+        within(wrapper.getByTestId('coverageOverviewFilterList')).getByText(
+          ruleTypeFilterDefaultOptions[0].label
+        )
+      );
+    });
+    expect(context.current[0].filter).toMatchInlineSnapshot(`
+      Object {
+        "source": Array [
+          "prebuilt",
+        ],
+      }
+    `);
+  });
+
+  test('it correctly populates search filter state', () => {
+    const { wrapper, context } = renderFiltersPanel();
+
+    act(() => {
+      fireEvent.change(wrapper.getByTestId('coverageOverviewFilterSearchBar'), {
+        target: { value: 'test' },
+      });
+      fireEvent.submit(wrapper.getByTestId('coverageOverviewFilterSearchBar'));
+    });
+
+    expect(context.current[0].filter).toMatchInlineSnapshot(`
+      Object {
+        "search_term": "test",
+      }
+    `);
+  });
+});