Skip to content

Commit

Permalink
[Security Solution] Make analyzer full screen work with new eui using…
Browse files Browse the repository at this point in the history 
… existing hooks. (elastic#126117) (elastic#126218)

* Fix analyzer full screen with new eui data grid

* Add basic tests for full screen hook

(cherry picked from commit 9920e7b)

Co-authored-by: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>
  • Loading branch information
@kibanamachine @kqualters-elastic
kibanamachine and kqualters-elastic authored Feb 23, 2022
1 parent 92533d9 commit a893f7b
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 53 deletions.
95 changes: 95 additions & 0 deletions x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
* 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, { useEffect } from 'react';
import { TestProviders } from '../../mock';
import {
renderHook,
act,
RenderResult,
WaitForNextUpdate,
cleanup,
} from '@testing-library/react-hooks';
import { useGlobalFullScreen, GlobalFullScreen } from '.';

describe('useFullScreen', () => {
describe('with no data-grid present in the dom', () => {
let result: RenderResult<GlobalFullScreen>;
let waitForNextUpdate: WaitForNextUpdate;
test('Default values with no data grid in the dom', async () => {
await act(async () => {
const WrapperContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
<div className="euiDataGrid--fullScreen">
<TestProviders>{children}</TestProviders>
</div>
);
({ result, waitForNextUpdate } = renderHook(() => useGlobalFullScreen(), {
wrapper: WrapperContainer,
}));
await waitForNextUpdate();
expect(result.current.globalFullScreen).toEqual(false);
});
act(() => {
result.current.setGlobalFullScreen(true);
});
expect(result.current.globalFullScreen).toEqual(true);
cleanup();
});
});

describe('with a mock full screen data-grid in the dom', () => {
let result: RenderResult<GlobalFullScreen>;
let waitForNextUpdate: WaitForNextUpdate;
afterEach(() => {
cleanup();
});
test('setting globalFullScreen to true should not remove the chrome removal class and data grid remains open and full screen', async () => {
await act(async () => {
const WrapperContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
useEffect(() => {
document.body.classList.add('euiDataGrid__restrictBody');
}, []);
return (
<div className="euiDataGrid--fullScreen">
<TestProviders>{children}</TestProviders>
</div>
);
};
({ result, waitForNextUpdate } = renderHook(() => useGlobalFullScreen(), {
wrapper: WrapperContainer,
}));
await waitForNextUpdate();
});
act(() => {
result.current.setGlobalFullScreen(true);
});
expect(document.querySelector('.euiDataGrid__restrictBody')).toBeTruthy();
});
test('setting globalFullScreen to false should remove the chrome removal class and data grid remains open and full screen', async () => {
await act(async () => {
const WrapperContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
useEffect(() => {
document.body.classList.add('euiDataGrid__restrictBody');
}, []);
return (
<div className="euiDataGrid--fullScreen">
<TestProviders>{children}</TestProviders>
</div>
);
};
({ result, waitForNextUpdate } = renderHook(() => useGlobalFullScreen(), {
wrapper: WrapperContainer,
}));
await waitForNextUpdate();
});
act(() => {
result.current.setGlobalFullScreen(false);
});
expect(document.querySelector('.euiDataGrid__restrictBody')).toBeNull();
});
});
});
10 changes: 6 additions & 4 deletions x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ export const resetScroll = () => {
}
}, 0);
};
interface GlobalFullScreen {
export interface GlobalFullScreen {
globalFullScreen: boolean;
setGlobalFullScreen: (fullScreen: boolean) => void;
}

interface TimelineFullScreen {
export interface TimelineFullScreen {
timelineFullScreen: boolean;
setTimelineFullScreen: (fullScreen: boolean) => void;
}
Expand All @@ -44,10 +44,11 @@ export const useGlobalFullScreen = (): GlobalFullScreen => {
useShallowEqualSelector(inputsSelectors.globalFullScreenSelector) ?? false;
const setGlobalFullScreen = useCallback(
(fullScreen: boolean) => {
const isDataGridFullScreen = document.querySelector('.euiDataGrid--fullScreen') !== null;
if (fullScreen) {
document.body.classList.add(SCROLLING_DISABLED_CLASS_NAME, 'euiDataGrid__restrictBody');
resetScroll();
} else {
} else if (isDataGridFullScreen === false || fullScreen === false) {
document.body.classList.remove(SCROLLING_DISABLED_CLASS_NAME, 'euiDataGrid__restrictBody');
resetScroll();
}
Expand All @@ -72,9 +73,10 @@ export const useTimelineFullScreen = (): TimelineFullScreen => {
useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector) ?? false;
const setTimelineFullScreen = useCallback(
(fullScreen: boolean) => {
const isDataGridFullScreen = document.querySelector('.euiDataGrid--fullScreen') !== null;
if (fullScreen) {
document.body.classList.add('euiDataGrid__restrictBody');
} else {
} else if (isDataGridFullScreen === false || fullScreen === false) {
document.body.classList.remove('euiDataGrid__restrictBody');
}
dispatch(inputsActions.setFullScreen({ id: 'timeline', fullScreen }));
Expand Down
34 changes: 29 additions & 5 deletions x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,16 @@ import {
EuiToolTip,
EuiLoadingSpinner,
} from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';

import { FULL_SCREEN } from '../timeline/body/column_headers/translations';
import { EXIT_FULL_SCREEN } from '../../../common/components/exit_full_screen/translations';
import { FULL_SCREEN_TOGGLED_CLASS_NAME } from '../../../../common/constants';
import {
FULL_SCREEN_TOGGLED_CLASS_NAME,
SCROLLING_DISABLED_CLASS_NAME,
} from '../../../../common/constants';
import {
useGlobalFullScreen,
useTimelineFullScreen,
Expand All @@ -31,6 +34,7 @@ import { timelineSelectors } from '../../store/timeline';
import { timelineDefaults } from '../../store/timeline/defaults';
import { isFullScreen } from '../timeline/body/column_headers';
import { updateTimelineGraphEventId } from '../../../timelines/store/timeline/actions';
import { inputsActions } from '../../../common/store/actions';
import { Resolver } from '../../../resolver/view';
import {
isLoadingSelector,
Expand Down Expand Up @@ -160,14 +164,34 @@ const GraphOverlayComponent: React.FC<OwnProps> = ({ timelineId }) => {

const isInTimeline = timelineId === TimelineId.active;
const onCloseOverlay = useCallback(() => {
if (timelineId === TimelineId.active) {
setTimelineFullScreen(false);
const isDataGridFullScreen = document.querySelector('.euiDataGrid--fullScreen') !== null;
// Since EUI changes these values directly as a side effect, need to add them back on close.
if (isDataGridFullScreen) {
if (timelineId === TimelineId.active) {
document.body.classList.add('euiDataGrid__restrictBody');
} else {
document.body.classList.add(SCROLLING_DISABLED_CLASS_NAME, 'euiDataGrid__restrictBody');
}
} else {
setGlobalFullScreen(false);
if (timelineId === TimelineId.active) {
setTimelineFullScreen(false);
} else {
setGlobalFullScreen(false);
}
}
dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: '' }));
}, [dispatch, timelineId, setTimelineFullScreen, setGlobalFullScreen]);

useEffect(() => {
return () => {
if (timelineId === TimelineId.active) {
dispatch(inputsActions.setFullScreen({ id: 'timeline', fullScreen: false }));
} else {
dispatch(inputsActions.setFullScreen({ id: 'global', fullScreen: false }));
}
};
}, [dispatch, timelineId]);

const toggleFullScreen = useCallback(() => {
if (timelineId === TimelineId.active) {
setTimelineFullScreen(!timelineFullScreen);
Expand Down
86 changes: 42 additions & 44 deletions x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,50 +347,48 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
</UpdatedFlexItem>
)}
</UpdatedFlexGroup>
{!graphEventId && graphOverlay == null && (
<>
{!hasAlerts && !loading && <TGridEmpty height="short" />}
{hasAlerts && (
<FullWidthFlexGroup
$visible={!graphEventId && graphOverlay == null}
gutterSize="none"
>
<ScrollableFlexItem grow={1}>
<StatefulBody
activePage={pageInfo.activePage}
appId={appId}
browserFields={browserFields}
bulkActions={bulkActions}
createFieldComponent={createFieldComponent}
data={nonDeletedEvents}
defaultCellActions={defaultCellActions}
disabledCellActions={disabledCellActions}
filterQuery={filterQuery}
filters={filters}
filterStatus={filterStatus}
hasAlertsCrud={hasAlertsCrud}
id={id}
indexNames={indexNames}
isEventViewer={true}
itemsPerPageOptions={itemsPerPageOptions}
leadingControlColumns={leadingControlColumns}
loadPage={loadPage}
onRuleChange={onRuleChange}
pageSize={itemsPerPage}
refetch={refetch}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
tableView={tableView}
tabType={TimelineTabs.query}
totalItems={totalCountMinusDeleted}
trailingControlColumns={trailingControlColumns}
unit={unit}
/>
</ScrollableFlexItem>
</FullWidthFlexGroup>
)}
</>
)}
<>
{!hasAlerts && !loading && <TGridEmpty height="short" />}
{hasAlerts && (
<FullWidthFlexGroup
$visible={!graphEventId && graphOverlay == null}
gutterSize="none"
>
<ScrollableFlexItem grow={1}>
<StatefulBody
activePage={pageInfo.activePage}
appId={appId}
browserFields={browserFields}
bulkActions={bulkActions}
createFieldComponent={createFieldComponent}
data={nonDeletedEvents}
defaultCellActions={defaultCellActions}
disabledCellActions={disabledCellActions}
filterQuery={filterQuery}
filters={filters}
filterStatus={filterStatus}
hasAlertsCrud={hasAlertsCrud}
id={id}
indexNames={indexNames}
isEventViewer={true}
itemsPerPageOptions={itemsPerPageOptions}
leadingControlColumns={leadingControlColumns}
loadPage={loadPage}
onRuleChange={onRuleChange}
pageSize={itemsPerPage}
refetch={refetch}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
tableView={tableView}
tabType={TimelineTabs.query}
totalItems={totalCountMinusDeleted}
trailingControlColumns={trailingControlColumns}
unit={unit}
/>
</ScrollableFlexItem>
</FullWidthFlexGroup>
)}
</>
</EventsContainerLoading>
</TimelineContext.Provider>
)}
Expand Down

0 comments on commit a893f7b

Please sign in to comment.