github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

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

This PR fixes an issue reported in <https://github.com/elastic/kibana/issues/122231> where the alerts table's `Full screen` button, recently [moved to the right side of `EuiDataGrid`](https://github.com/elastic/eui/pull/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`](https://github.com/elastic/eui/pull/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)
This commit is contained in:
Andrew Goldstein 2022-01-13 07:55:55 -07:00 • committed by GitHub
parent 934c720ed1
commit 0da9156298
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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
);
});
});

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

@ -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>

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

@ -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;