[Security solution] [RAC] Add checkbox control column to t-grid (#107144

) (#107630) * Add checkbox control column to t-grid * Add unit tests * Update translations Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Aug 4, 2021 · 23e3037 · 23e3037
1 parent 6f7c022
commit 23e3037
Show file tree

Hide file tree

Showing 12 changed files with 299 additions and 66 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
@@ -120,7 +120,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
   const leadingControlColumns = [
     {
       id: 'expand',
-      width: 20,
+      width: 40,
       headerCellRender: () => {
         return (
           <EventsThContent>
@@ -149,7 +149,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     },
     {
       id: 'view_in_app',
-      width: 20,
+      width: 40,
       headerCellRender: () => null,
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});

diff --git a/...lugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx b/...lugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx
@@ -93,4 +93,36 @@ describe('Actions', () => {
 
     expect(wrapper.find('[data-test-subj="select-event"]').exists()).toBe(false);
   });
+
+  test('it does NOT render a checkbox for selecting the event when `tGridEnabled` is `true`', () => {
+    useIsExperimentalFeatureEnabledMock.mockReturnValue(true);
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          ariaRowindex={2}
+          checked={false}
+          columnValues={'abc def'}
+          data={mockTimelineData[0].data}
+          ecsData={mockTimelineData[0].ecs}
+          eventIdToNoteIds={{}}
+          showNotes={false}
+          isEventPinned={false}
+          rowIndex={10}
+          toggleShowNotes={jest.fn()}
+          timelineId={'test'}
+          refetch={jest.fn()}
+          columnId={''}
+          index={2}
+          eventId="abc"
+          loadingEventIds={[]}
+          onEventDetailsPanelOpened={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={true}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="select-event"]').exists()).toBe(false);
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx
@@ -11,6 +11,7 @@ import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elas
 import { noop } from 'lodash/fp';
 import styled from 'styled-components';
 
+import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
 import {
   eventHasNotes,
   getEventType,
@@ -52,13 +53,14 @@ const ActionsComponent: React.FC<ActionProps> = ({
   onEventDetailsPanelOpened,
   onRowSelected,
   refetch,
-  onRuleChange,
   showCheckboxes,
+  onRuleChange,
   showNotes,
   timelineId,
   toggleShowNotes,
 }) => {
   const dispatch = useDispatch();
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
   const emptyNotes: string[] = [];
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const { timelines: timelinesUi } = useKibana().services;
@@ -81,6 +83,7 @@ const ActionsComponent: React.FC<ActionProps> = ({
       }),
     [eventId, onRowSelected]
   );
+
   const handlePinClicked = useCallback(
     () =>
       getPinOnClick({
@@ -113,7 +116,7 @@ const ActionsComponent: React.FC<ActionProps> = ({
   }, [ariaRowindex, ecsData, casePermissions, insertTimelineHook, columnValues]);
   return (
     <ActionsContainer>
-      {showCheckboxes && (
+      {showCheckboxes && !tGridEnabled && (
         <div key="select-event-container" data-test-subj="select-event-container">
           <EventsTdContent textAlign="center" width={DEFAULT_ICON_BUTTON_WIDTH}>
             {loadingEventIds.includes(eventId) ? (

diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/checkbox.test.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/checkbox.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 { render, fireEvent } from '@testing-library/react';
+import { ActionProps, HeaderActionProps, TimelineTabs } from '../../../../../common';
+import { HeaderCheckBox, RowCheckBox } from './checkbox';
+import React from 'react';
+
+describe('checkbox control column', () => {
+  describe('RowCheckBox', () => {
+    const defaultProps: ActionProps = {
+      ariaRowindex: 1,
+      columnId: 'test-columnId',
+      columnValues: 'test-columnValues',
+      checked: false,
+      onRowSelected: jest.fn(),
+      eventId: 'test-event-id',
+      loadingEventIds: [],
+      onEventDetailsPanelOpened: jest.fn(),
+      showCheckboxes: true,
+      data: [],
+      ecsData: {
+        _id: 'test-ecsData-id',
+      },
+      index: 1,
+      rowIndex: 1,
+      showNotes: true,
+      timelineId: 'test-timelineId',
+    };
+    test('displays loader when id is included on loadingEventIds', () => {
+      const { getByTestId } = render(
+        <RowCheckBox {...defaultProps} loadingEventIds={[defaultProps.eventId]} />
+      );
+      expect(getByTestId('event-loader')).not.toBeNull();
+    });
+
+    test('calls onRowSelected when checked', () => {
+      const onRowSelected = jest.fn();
+      const { getByTestId } = render(
+        <RowCheckBox {...defaultProps} onRowSelected={onRowSelected} />
+      );
+
+      fireEvent.click(getByTestId('select-event'));
+
+      expect(onRowSelected).toHaveBeenCalled();
+    });
+  });
+  describe('HeaderCheckBox', () => {
+    const defaultProps: HeaderActionProps = {
+      width: 99999,
+      browserFields: {},
+      columnHeaders: [],
+      isSelectAllChecked: true,
+      onSelectAll: jest.fn(),
+      showEventsSelect: true,
+      showSelectAllCheckbox: true,
+      sort: [],
+      tabType: TimelineTabs.query,
+      timelineId: 'test-timelineId',
+    };
+
+    test('calls onSelectAll when checked', () => {
+      const onSelectAll = jest.fn();
+      const { getByTestId } = render(
+        <HeaderCheckBox {...defaultProps} onSelectAll={onSelectAll} />
+      );
+      fireEvent.click(getByTestId('select-all-events'));
+
+      expect(onSelectAll).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/checkbox.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/checkbox.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 { EuiCheckbox, EuiLoadingSpinner } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { ActionProps, HeaderActionProps } from '../../../../../common';
+import * as i18n from './translations';
+
+export const RowCheckBox = ({
+  eventId,
+  onRowSelected,
+  checked,
+  ariaRowindex,
+  columnValues,
+  loadingEventIds,
+}: ActionProps) => {
+  const handleSelectEvent = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) =>
+      onRowSelected({
+        eventIds: [eventId],
+        isSelected: event.currentTarget.checked,
+      }),
+    [eventId, onRowSelected]
+  );
+
+  return loadingEventIds.includes(eventId) ? (
+    <EuiLoadingSpinner size="m" data-test-subj="event-loader" />
+  ) : (
+    <EuiCheckbox
+      data-test-subj="select-event"
+      id={eventId}
+      checked={checked}
+      onChange={handleSelectEvent}
+      aria-label={i18n.CHECKBOX_FOR_ROW({ ariaRowindex, columnValues, checked })}
+    />
+  );
+};
+
+export const HeaderCheckBox = ({ onSelectAll, isSelectAllChecked }: HeaderActionProps) => {
+  const handleSelectPageChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onSelectAll({ isSelected: event.currentTarget.checked });
+    },
+    [onSelectAll]
+  );
+
+  return (
+    <EuiCheckbox
+      data-test-subj="select-all-events"
+      id="select-all-events"
+      checked={isSelectAllChecked}
+      onChange={handleSelectPageChange}
+    />
+  );
+};
diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/index.tsx
@@ -0,0 +1,16 @@
+/*
+ * 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 { ControlColumnProps } from '../../../../../common';
+import { HeaderCheckBox, RowCheckBox } from './checkbox';
+
+export const checkBoxControlColumn: ControlColumnProps = {
+  id: 'checkbox-control-column',
+  width: 32,
+  headerCellRender: HeaderCheckBox,
+  rowCellRender: RowCheckBox,
+};
diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/translations.ts b/x-pack/plugins/timelines/public/components/t_grid/body/control_columns/translations.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 CHECKBOX_FOR_ROW = ({
+  ariaRowindex,
+  columnValues,
+  checked,
+}: {
+  ariaRowindex: number;
+  columnValues: string;
+  checked: boolean;
+}) =>
+  i18n.translate('xpack.timelines.timeline.body.actions.checkboxForRowAriaLabel', {
+    values: { ariaRowindex, checked, columnValues },
+    defaultMessage:
+      '{checked, select, false {unchecked} true {checked}} checkbox for the alert or event in row {ariaRowindex}, with columns {columnValues}',
+  });