[Security Solution][Tech debt] T-Grid cleanup (#138581)

* [Security Solution][Tech debt] T-Grid cleanup: removed unused logic

* Renamed folder to correspond the logic inside

* Fixed types for isEventViewer

* Fixed tests, corrected names

* Fixed due to comments

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -61,7 +61,6 @@ export interface Props {
   onRuleChange?: () => void;
   renderCellValue: (props: CellValueElementProps) => React.ReactNode;
   rowRenderers: RowRenderer[];
-  utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
   additionalFilters?: React.ReactNode;
   hasAlertsCrud?: boolean;
   unit?: (n: number) => string;
@@ -86,7 +85,6 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   rowRenderers,
   start,
   scopeId,
-  utilityBar,
   additionalFilters,
   hasAlertsCrud = false,
   unit,

x-pack/plugins/security_solution/public/detections/components/alerts_table/additional_filters_action/index.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { AdditionalFiltersAction } from '.';
+import { TestProviders } from '../../../../common/mock/test_providers';
+
+jest.useFakeTimers();
+jest.mock('../../../../common/lib/kibana');
+
+describe('AdditionalFiltersAction', () => {
+  describe('UtilityBarAdditionalFiltersContent', () => {
+    test('does not show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is false', async () => {
+      const onShowBuildingBlockAlertsChanged = jest.fn();
+      render(
+        <TestProviders>
+          <AdditionalFiltersAction
+            onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+            areEventsLoading={false}
+            onShowOnlyThreatIndicatorAlertsChanged={jest.fn()}
+            showBuildingBlockAlerts={false}
+            showOnlyThreatIndicatorAlerts={false}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      const additionalFiltersButton = screen.findByTestId('additionalFilters-popover');
+      fireEvent.click(await additionalFiltersButton);
+
+      // The check box should be false
+      expect(await screen.findByTestId('showBuildingBlockAlertsCheckbox')).not.toBeChecked();
+    });
+
+    test('does not show the showOnlyThreatIndicatorAlerts checked if the showOnlyThreatIndicatorAlerts is true', async () => {
+      render(
+        <TestProviders>
+          <AdditionalFiltersAction
+            onShowBuildingBlockAlertsChanged={jest.fn()}
+            areEventsLoading={false}
+            onShowOnlyThreatIndicatorAlertsChanged={jest.fn()}
+            showBuildingBlockAlerts={false}
+            showOnlyThreatIndicatorAlerts={true}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      const additionalFiltersButton = screen.findByTestId('additionalFilters-popover');
+      fireEvent.click(await additionalFiltersButton);
+
+      expect(await screen.findByTestId('showOnlyThreatIndicatorAlertsCheckbox')).toBeChecked();
+    });
+
+    test('does show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is true', async () => {
+      const onShowBuildingBlockAlertsChanged = jest.fn();
+      render(
+        <TestProviders>
+          <AdditionalFiltersAction
+            onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+            areEventsLoading={false}
+            onShowOnlyThreatIndicatorAlertsChanged={jest.fn()}
+            showBuildingBlockAlerts={true}
+            showOnlyThreatIndicatorAlerts={false}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      const additionalFiltersButton = screen.findByTestId('additionalFilters-popover');
+      fireEvent.click(await additionalFiltersButton);
+
+      // The check box should be true
+      expect(await screen.findByTestId('showBuildingBlockAlertsCheckbox')).toBeChecked();
+    });
+  });
+});

x-pack/plugins/security_solution/public/detections/components/alerts_table/additional_filters_action/index.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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 React, { useCallback } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiCheckbox } from '@elastic/eui';
+import styled from 'styled-components';
+
+import { UtilityBarAction } from '../../../../common/components/utility_bar';
+import * as i18n from './translations';
+
+const UtilityBarFlexGroup = styled(EuiFlexGroup)`
+  min-width: 175px;
+`;
+
+const AdditionalFiltersItem = styled(EuiFlexItem)`
+  padding: ${({ theme }) => theme.eui.euiSizeS};
+`;
+
+const BuildingBlockContainer = styled(AdditionalFiltersItem)`
+  background: ${({ theme }) => theme.eui.euiColorHighlight};
+`;
+
+export const AdditionalFiltersAction = ({
+  areEventsLoading,
+  onShowBuildingBlockAlertsChanged,
+  showBuildingBlockAlerts,
+  onShowOnlyThreatIndicatorAlertsChanged,
+  showOnlyThreatIndicatorAlerts,
+}: {
+  areEventsLoading: boolean;
+  onShowBuildingBlockAlertsChanged: (showBuildingBlockAlerts: boolean) => void;
+  showBuildingBlockAlerts: boolean;
+  onShowOnlyThreatIndicatorAlertsChanged: (showOnlyThreatIndicatorAlerts: boolean) => void;
+  showOnlyThreatIndicatorAlerts: boolean;
+}) => {
+  const UtilityBarAdditionalFiltersContent = useCallback(
+    (closePopover: () => void) => (
+      <UtilityBarFlexGroup direction="column" gutterSize="none">
+        <BuildingBlockContainer>
+          <EuiCheckbox
+            id="showBuildingBlockAlertsCheckbox"
+            aria-label="showBuildingBlockAlerts"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              closePopover();
+              onShowBuildingBlockAlertsChanged(e.target.checked);
+            }}
+            checked={showBuildingBlockAlerts}
+            color="text"
+            data-test-subj="showBuildingBlockAlertsCheckbox"
+            label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_BUILDING_BLOCK}
+          />
+        </BuildingBlockContainer>
+        <AdditionalFiltersItem>
+          <EuiCheckbox
+            id="showOnlyThreatIndicatorAlertsCheckbox"
+            aria-label="showOnlyThreatIndicatorAlerts"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              closePopover();
+              onShowOnlyThreatIndicatorAlertsChanged(e.target.checked);
+            }}
+            checked={showOnlyThreatIndicatorAlerts}
+            color="text"
+            data-test-subj="showOnlyThreatIndicatorAlertsCheckbox"
+            label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_ONLY_THREAT_INDICATOR_ALERTS}
+          />
+        </AdditionalFiltersItem>
+      </UtilityBarFlexGroup>
+    ),
+    [
+      onShowBuildingBlockAlertsChanged,
+      onShowOnlyThreatIndicatorAlertsChanged,
+      showBuildingBlockAlerts,
+      showOnlyThreatIndicatorAlerts,
+    ]
+  );
+
+  return (
+    <UtilityBarAction
+      dataTestSubj="additionalFilters"
+      disabled={areEventsLoading}
+      iconType="arrowDown"
+      iconSide="right"
+      ownFocus
+      popoverContent={UtilityBarAdditionalFiltersContent}
+    >
+      {i18n.ADDITIONAL_FILTERS_ACTIONS}
+    </UtilityBarAction>
+  );
+};

x-pack/plugins/security_solution/public/detections/components/alerts_table/additional_filters_action/translations.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const ADDITIONAL_FILTERS_ACTIONS = i18n.translate(
+  'xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersTitle',
+  {
+    defaultMessage: 'Additional filters',
+  }
+);
+
+export const ADDITIONAL_FILTERS_ACTIONS_SHOW_BUILDING_BLOCK = i18n.translate(
+  'xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersActions.showBuildingBlockTitle',
+  {
+    defaultMessage: 'Include building block alerts',
+  }
+);
+
+export const ADDITIONAL_FILTERS_ACTIONS_SHOW_ONLY_THREAT_INDICATOR_ALERTS = i18n.translate(
+  'xpack.securitySolution.detectionEngine.alerts.utilityBar.additionalFiltersActions.showOnlyThreatIndicatorAlerts',
+  {
+    defaultMessage: 'Show only threat indicator alerts',
+  }
+);
+
+export const TAKE_ACTION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.alerts.utilityBar.takeActionTitle',
+  {
+    defaultMessage: 'Take action',
+  }
+);