[Security Solution] - remove styled-components and cleanup for event viewer and data table components

x-pack/solutions/security/packages/data_table/components/data_table/index.tsx

@@ -6,20 +6,19 @@
  */
 
 import type {
-  EuiDataGridRefProps,
-  EuiDataGridColumn,
   EuiDataGridCellValueElementProps,
-  EuiDataGridStyle,
-  EuiDataGridToolBarVisibilityOptions,
+  EuiDataGridColumn,
   EuiDataGridControlColumn,
   EuiDataGridPaginationProps,
-  EuiDataGridRowHeightsOptions,
   EuiDataGridProps,
+  EuiDataGridRefProps,
+  EuiDataGridStyle,
+  EuiDataGridToolBarVisibilityOptions,
 } from '@elastic/eui';
 import { EuiDataGrid, EuiProgress } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
-import React, { useCallback, useEffect, useMemo, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import styled, { ThemeContext } from 'styled-components';
@@ -31,8 +30,8 @@ import type {
 import { i18n } from '@kbn/i18n';
 import {
   BrowserFields,
-  DeprecatedCellValueElementProps,
   ColumnHeaderOptions,
+  DeprecatedCellValueElementProps,
   DeprecatedRowRenderer,
   TimelineItem,
 } from '@kbn/timelines-plugin/common';
@@ -88,12 +87,9 @@ interface BaseDataTableProps {
   loadPage: (newActivePage: number) => void;
   renderCellValue: (props: DeprecatedCellValueElementProps) => React.ReactNode;
   rowRenderers: DeprecatedRowRenderer[];
-  hasCrudPermissions?: boolean;
   unitCountText: string;
   pagination: EuiDataGridPaginationProps & { pageSize: number };
   totalItems: number;
-  rowHeightsOptions?: EuiDataGridRowHeightsOptions;
-  isEventRenderedView?: boolean;
   getFieldBrowser: GetFieldBrowser;
   getFieldSpec: (fieldName: string) => FieldSpec | undefined;
   cellActionsTriggerId?: string;
@@ -103,41 +99,43 @@ export type DataTableProps = BaseDataTableProps & Omit<EuiDataGridProps, NonCust
 
 const ES_LIMIT_COUNT = 9999;
 
-const gridStyle = (isEventRenderedView: boolean | undefined = false): EuiDataGridStyle => ({
+const gridStyle: EuiDataGridStyle = {
   border: 'none',
   fontSize: 's',
   header: 'underline',
-  stripes: isEventRenderedView === true,
-});
+};
 
 const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
   ul.euiPagination__list {
     li.euiPagination__item:last-child {
       ${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
     }
   }
+
   div .euiDataGridRowCell {
     display: flex;
     align-items: center;
   }
+
   div .euiDataGridRowCell > [data-focus-lock-disabled] {
     display: flex;
     align-items: center;
     flex-grow: 1;
     width: 100%;
   }
+
   div .euiDataGridRowCell__content {
     flex-grow: 1;
   }
+
   div .siemEventsTable__trSupplement--summary {
     display: block;
   }
 `;
 
 const memoizedGetColumnHeaders: (
   headers: ColumnHeaderOptions[],
-  browserFields: BrowserFields,
-  isEventRenderedView: boolean
+  browserFields: BrowserFields
 ) => ColumnHeaderOptions[] = memoizeOne(getColumnHeaders);
 
 // eslint-disable-next-line react/display-name
@@ -148,7 +146,6 @@ export const DataTableComponent = React.memo<DataTableProps>(
     bulkActions = true,
     data,
     fieldBrowserOptions,
-    hasCrudPermissions,
     id,
     leadingControlColumns,
     loadPage,
@@ -157,8 +154,6 @@ export const DataTableComponent = React.memo<DataTableProps>(
     pagination,
     unitCountText,
     totalItems,
-    rowHeightsOptions,
-    isEventRenderedView = false,
     getFieldBrowser,
     getFieldSpec,
     cellActionsTriggerId,
@@ -178,7 +173,7 @@ export const DataTableComponent = React.memo<DataTableProps>(
       dataViewId,
     } = dataTable;
 
-    const columnHeaders = memoizedGetColumnHeaders(columns, browserFields, isEventRenderedView);
+    const columnHeaders = memoizedGetColumnHeaders(columns, browserFields);
 
     const dataGridRef = useRef<EuiDataGridRefProps>(null);
 
@@ -189,18 +184,14 @@ export const DataTableComponent = React.memo<DataTableProps>(
     const theme: EuiTheme = useContext(ThemeContext);
 
     const showBulkActions = useMemo(() => {
-      if (!hasCrudPermissions) {
-        return false;
-      }
-
       if (selectedCount === 0 || !showCheckboxes) {
         return false;
       }
       if (typeof bulkActions === 'boolean') {
         return bulkActions;
       }
       return (bulkActions?.customBulkActions?.length || bulkActions?.alertStatusActions) ?? true;
-    }, [hasCrudPermissions, selectedCount, showCheckboxes, bulkActions]);
+    }, [selectedCount, showCheckboxes, bulkActions]);
 
     const onResetColumns = useCallback(() => {
       dispatch(dataTableActions.updateColumns({ id, columns: defaultColumns }));
@@ -237,22 +228,18 @@ export const DataTableComponent = React.memo<DataTableProps>(
                 {isLoading && <EuiProgress size="xs" position="absolute" color="accent" />}
                 <UnitCount data-test-subj="server-side-event-count">{unitCountText}</UnitCount>
                 {additionalControls ?? null}
-                {!isEventRenderedView ? (
-                  getFieldBrowser({
-                    browserFields,
-                    options: fieldBrowserOptions,
-                    columnIds: columnHeaders.map(({ id: columnId }) => columnId),
-                    onResetColumns,
-                    onToggleColumn,
-                  })
-                ) : (
-                  <></>
-                )}
+                {getFieldBrowser({
+                  browserFields,
+                  options: fieldBrowserOptions,
+                  columnIds: columnHeaders.map(({ id: columnId }) => columnId),
+                  onResetColumns,
+                  onToggleColumn,
+                })}
               </>
             ),
           },
         },
-        ...(showBulkActions || isEventRenderedView
+        ...(showBulkActions
           ? {
               showColumnSelector: false,
               showSortSelector: false,
@@ -269,7 +256,6 @@ export const DataTableComponent = React.memo<DataTableProps>(
         isLoading,
         unitCountText,
         additionalControls,
-        isEventRenderedView,
         getFieldBrowser,
         browserFields,
         fieldBrowserOptions,
@@ -468,9 +454,9 @@ export const DataTableComponent = React.memo<DataTableProps>(
             id={'body-data-grid'}
             data-test-subj="body-data-grid"
             aria-label={DATA_TABLE_ARIA_LABEL}
-            columns={isEventRenderedView ? columnHeaders : columnsWithCellActions}
+            columns={columnsWithCellActions}
             columnVisibility={{ visibleColumns, setVisibleColumns: onSetVisibleColumns }}
-            gridStyle={gridStyle(isEventRenderedView)}
+            gridStyle={gridStyle}
             leadingControlColumns={leadingControlColumns}
             toolbarVisibility={toolbarVisibility}
             rowCount={totalItems}
@@ -479,7 +465,7 @@ export const DataTableComponent = React.memo<DataTableProps>(
             onColumnResize={onColumnResize}
             pagination={pagination}
             ref={dataGridRef}
-            rowHeightsOptions={rowHeightsOptions}
+            rowHeightsOptions={undefined}
           />
         </EuiDataGridContainer>
       </>

x-pack/solutions/security/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.test.tsx

@@ -7,11 +7,11 @@
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { TableId, dataTableActions } from '@kbn/securitysolution-data-table';
+import { dataTableActions, TableId } from '@kbn/securitysolution-data-table';
 import { HostsType } from '../../../explore/hosts/store/model';
 import { TestProviders } from '../../mock';
 import type { EventsQueryTabBodyComponentProps } from './events_query_tab_body';
-import { EventsQueryTabBody, ALERTS_EVENTS_HISTOGRAM_ID } from './events_query_tab_body';
+import { ALERTS_EVENTS_HISTOGRAM_ID, EventsQueryTabBody } from './events_query_tab_body';
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { licenseService } from '../../hooks/use_license';
 import { mockHistory } from '../../mock/router';
@@ -59,9 +59,13 @@ jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockReturnValue({ pathname: '/test' }),
 }));
 
-const FakeStatefulEventsViewer = ({ additionalFilters }: { additionalFilters: JSX.Element }) => (
+const FakeStatefulEventsViewer = ({
+  topRightMenuOptions,
+}: {
+  topRightMenuOptions: JSX.Element;
+}) => (
   <div>
-    {additionalFilters}
+    {topRightMenuOptions}
     {'MockedStatefulEventsViewer'}
   </div>
 );

x-pack/solutions/security/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.tsx

@@ -10,8 +10,8 @@ import { useDispatch } from 'react-redux';
 
 import { EuiCheckbox } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
-import { dataTableActions } from '@kbn/securitysolution-data-table';
 import type { TableId } from '@kbn/securitysolution-data-table';
+import { dataTableActions } from '@kbn/securitysolution-data-table';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 import type { CustomBulkAction } from '../../../../common/types';
 import { RowRendererValues } from '../../../../common/api/timeline';
@@ -177,7 +177,7 @@ const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> =
         />
       )}
       <StatefulEventsViewer
-        additionalFilters={toggleExternalAlertsCheckbox}
+        topRightMenuOptions={toggleExternalAlertsCheckbox}
         cellActionsTriggerId={SecurityCellActionsTrigger.DEFAULT}
         start={startDate}
         end={endDate}

x-pack/solutions/security/plugins/security_solution/public/common/components/events_viewer/helpers.tsx

@@ -5,13 +5,9 @@
  * 2.0.
  */
 
-import type { ViewSelection } from '@kbn/securitysolution-data-table';
-import { TableId } from '@kbn/securitysolution-data-table';
 import type { CombineQueries } from '../../lib/kuery';
 import { buildTimeRangeFilter, combineQueries } from '../../lib/kuery';
 
-import { EVENTS_TABLE_CLASS_NAME } from './styles';
-
 export const getCombinedFilterQuery = ({
   from,
   to,
@@ -25,41 +21,3 @@ export const getCombinedFilterQuery = ({
 
   return combinedQueries ? combinedQueries.filterQuery : undefined;
 };
-
-export const resolverIsShowing = (graphEventId: string | undefined): boolean =>
-  graphEventId != null && graphEventId !== '';
-
-export const EVENTS_COUNT_BUTTON_CLASS_NAME = 'local-events-count-button';
-
-/** Returns `true` when the element, or one of it's children has focus */
-export const elementOrChildrenHasFocus = (element: HTMLElement | null | undefined): boolean =>
-  element === document.activeElement || element?.querySelector(':focus-within') != null;
-
-/** Returns true if the events table has focus */
-export const tableHasFocus = (containerElement: HTMLElement | null): boolean =>
-  elementOrChildrenHasFocus(
-    containerElement?.querySelector<HTMLDivElement>(`.${EVENTS_TABLE_CLASS_NAME}`)
-  );
-
-export const isSelectableView = (tableId: string): boolean =>
-  tableId === TableId.alertsOnAlertsPage || tableId === TableId.alertsOnRuleDetailsPage;
-
-export const isViewSelection = (value: unknown): value is ViewSelection =>
-  value === 'gridView' || value === 'eventRenderedView';
-
-/** always returns a valid default `ViewSelection` */
-export const getDefaultViewSelection = ({
-  tableId,
-  value,
-}: {
-  tableId: string;
-  value: unknown;
-}): ViewSelection => {
-  const defaultViewSelection = 'gridView';
-
-  if (!isSelectableView(tableId)) {
-    return defaultViewSelection;
-  } else {
-    return isViewSelection(value) ? value : defaultViewSelection;
-  }
-};

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

@@ -12,7 +12,7 @@ import { render } from '@testing-library/react';
 import { TestProviders } from '../../mock';
 
 import { mockEventViewerResponse } from './mock';
-import { StatefulEventsViewer, type EventsViewerProps } from '.';
+import { type EventsViewerProps, StatefulEventsViewer } from '.';
 import { eventsDefaultModel } from './default_model';
 import { EntityType } from '@kbn/timelines-plugin/common';
 import { SourcererScopeName } from '../../../sourcerer/store/model';
@@ -54,18 +54,17 @@ const to = '2019-08-26T22:10:56.791Z';
 const ACTION_BUTTON_COUNT = 4;
 
 const testProps: EventsViewerProps = {
+  bulkActions: false,
   defaultModel: eventsDefaultModel,
   end: to,
   entityType: EntityType.EVENTS,
   indexNames: [],
-  tableId: TableId.test,
   leadingControlColumns: getDefaultControlColumn(ACTION_BUTTON_COUNT),
   renderCellValue: DefaultCellRenderer,
   rowRenderers: defaultRowRenderers,
   sourcererScope: SourcererScopeName.default,
   start: from,
-  bulkActions: false,
-  hasCrudPermissions: true,
+  tableId: TableId.test,
 };
 describe('StatefulEventsViewer', () => {
   beforeAll(() => {
@@ -93,7 +92,7 @@ describe('StatefulEventsViewer', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find(`[data-test-subj="hoverVisibilityContainer"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="inspect-icon-button"]`).exists()).toBeTruthy();
   });
 
   test('it closes field editor when unmounted', () => {
@@ -119,7 +118,7 @@ describe('StatefulEventsViewer', () => {
       <TestProviders>
         <StatefulEventsViewer
           {...testProps}
-          additionalRightMenuOptions={[<p data-test-subj="right-option" />]}
+          topRightMenuOptions={[<p data-test-subj="right-option" />]}
         />
       </TestProviders>
     );