[Security Solution] Fixes alerts table Full screen button overlap (#…

…122901)

## [Security Solution] Fixes alerts table `Full screen` button overlap

This PR fixes an issue reported in <#122231> where the alerts table's `Full screen` button, recently [moved to the right side of `EuiDataGrid`](elastic/eui#5334) in [EUI 43.0.0](https://elastic.github.io/eui/#/package/changelog), overlapped the existing view selector.

### Details

In the `8.0` release of the Security Solution, the alerts table `Full screen` button appears above the table on the **left**, per the screenshot below:

![8_0_alerts_table](https://user-images.githubusercontent.com/4459398/149236219-9aac04de-4bbb-4cef-8705-f6bb712fb19e.png)

_Above: The alerts table `Full screen` button in `8.0`_

Starting with `8.1` (via [EUI 43.0.0](https://elastic.github.io/eui/#/package/changelog)), `EuiDataGrid`'s `Full screen` button has been [moved to the right side of `EuiDataGrid`](elastic/eui#5334), per the screenshot below:

![data_grid_before_after](https://user-images.githubusercontent.com/4459398/149237831-61aa7a30-695e-48d8-b016-89a0738d4bd9.png)

_Above: `EuiDataGrid`'s full screen icon has moved from left to right_

The new location of the `Full screen` button overlapped the existing alerts table view selector, per the `Before` screenshot below:

#### Before

![overlapped image](https://user-images.githubusercontent.com/60252716/148024399-24106303-baef-46bf-ad03-c4b53d78bbe8.png)

_Above: Overlapping icons reported in <https://github.com/elastic/kibana/issues/122231>_

This PR fixes the overlap, per the `After` screenshots below:

#### After

Chrome `97.0.4692.71`:

![after_chrome](https://user-images.githubusercontent.com/4459398/149239990-1039d659-67a9-4d09-a910-3f8bdfd179e4.png)

Firefox `96.0`:

![after_firefox](https://user-images.githubusercontent.com/4459398/149239483-590108d8-b6db-4c87-a3e7-579fc33e98a5.png)

Safari `15.2`:

![after_safari](https://user-images.githubusercontent.com/4459398/149239764-1751b89c-125b-44b8-b9b2-984b630e3925.png)

x-pack/plugins/timelines/public/components/t_grid/integrated/index.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { TGridIntegrated, TGridIntegratedProps } from './index';
@@ -64,4 +65,17 @@ describe('integrated t_grid', () => {
     );
     expect(screen.queryByTestId(dataTestSubj)).not.toBeNull();
   });
+
+  it(`prevents view selection from overlapping EuiDataGrid's 'Full screen' button`, () => {
+    render(
+      <TestProviders>
+        <TGridIntegrated {...defaultProps} />
+      </TestProviders>
+    );
+
+    expect(screen.queryByTestId('updated-flex-group')).toHaveStyleRule(
+      `margin-right`,
+      euiDarkVars.paddingSizes.xl
+    );
+  });
 });

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -327,7 +327,13 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
               data-timeline-id={id}
               data-test-subj={`events-container-loading-${loading}`}
             >
-              <UpdatedFlexGroup gutterSize="m" justifyContent="flexEnd" alignItems={alignItems}>
+              <UpdatedFlexGroup
+                alignItems={alignItems}
+                data-test-subj="updated-flex-group"
+                gutterSize="m"
+                justifyContent="flexEnd"
+                $view={tableView}
+              >
                 <UpdatedFlexItem grow={false} $show={!loading}>
                   <InspectButton title={justTitle} inspect={inspect} loading={loading} />
                 </UpdatedFlexItem>

x-pack/plugins/timelines/public/components/t_grid/styles.tsx

@@ -10,6 +10,7 @@ import { IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME } from '@kbn/securitysolution-t-g
 import { rgba } from 'polished';
 import styled, { createGlobalStyle } from 'styled-components';
 import type { TimelineEventsType } from '../../../common/types/timeline';
+import type { ViewSelection } from './event_rendered_view/selector';
 
 import { ACTIONS_COLUMN_ARIA_COL_INDEX } from './helpers';
 import { EVENTS_TABLE_ARIA_LABEL } from './translations';
@@ -466,7 +467,9 @@ export const FullWidthFlexGroup = styled(EuiFlexGroup)<{ $visible?: boolean }>`
   display: ${({ $visible = true }) => ($visible ? 'flex' : 'none')};
 `;
 
-export const UpdatedFlexGroup = styled(EuiFlexGroup)`
+export const UpdatedFlexGroup = styled(EuiFlexGroup)<{ $view?: ViewSelection }>`
+  ${({ $view, theme }) =>
+    $view === 'gridView' ? `margin-right: ${theme.eui.paddingSizes.xl};` : ''}
   position: absolute;
   z-index: ${({ theme }) => theme.eui.euiZLevel1};
   right: 0px;