[SECURITY] Bugs css/inspect (#74711)
* Fix inspection button when using topN * css left over
This commit is contained in:
parent
53828dab35
commit
d91e024f66
|
@ -42,6 +42,9 @@ const FormWrapper = styled.div`
|
|||
|
||||
padding-top: ${theme.eui.paddingSizes.xl};
|
||||
padding-bottom: ${theme.eui.paddingSizes.xl};
|
||||
.euiFlyout {
|
||||
z-index: ${theme.eui.euiZNavigation + 1};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
|
|
|
@ -41,14 +41,15 @@ const FlexItem = styled(EuiFlexItem)`
|
|||
`;
|
||||
FlexItem.displayName = 'FlexItem';
|
||||
|
||||
const FlexGroup = styled(EuiFlexGroup)<{ $globalFullScreen: boolean }>`
|
||||
${({ $globalFullScreen, theme }) => `
|
||||
const FlexGroup = styled(EuiFlexGroup)<{ $globalFullScreen: boolean; $hasSibling: boolean }>`
|
||||
${({ $globalFullScreen, $hasSibling, theme }) => `
|
||||
border-bottom: ${theme.eui.euiBorderThin};
|
||||
margin-bottom: 1px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: ${theme.eui.paddingSizes.l};
|
||||
padding-right: ${gutterTimeline};
|
||||
${$globalFullScreen ? 'display: none;' : ''}
|
||||
${$hasSibling ? `border-bottom: ${theme.eui.euiBorderThin};` : 'border-bottom-width: 0px;'}
|
||||
`}
|
||||
`;
|
||||
FlexGroup.displayName = 'FlexGroup';
|
||||
|
@ -75,6 +76,7 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
|
|||
<FlexGroup
|
||||
alignItems="center"
|
||||
$globalFullScreen={globalFullScreen}
|
||||
$hasSibling={globalHeaderPortalNode.hasChildNodes()}
|
||||
justifyContent="spaceBetween"
|
||||
wrap
|
||||
>
|
||||
|
|
|
@ -104,7 +104,7 @@ const StatefulTopNComponent: React.FC<Props> = ({
|
|||
value,
|
||||
}) => {
|
||||
const kibana = useKibana();
|
||||
const { from, deleteQuery, setQuery, to } = useGlobalTime();
|
||||
const { from, deleteQuery, setQuery, to } = useGlobalTime(false);
|
||||
|
||||
const options = getOptions(
|
||||
timelineId === TimelineId.active ? activeTimelineEventType : undefined
|
||||
|
|
|
@ -8,17 +8,22 @@ import { act, renderHook } from '@testing-library/react-hooks';
|
|||
|
||||
import { useGlobalTime } from '.';
|
||||
|
||||
const mockDispatch = jest.fn();
|
||||
|
||||
jest.mock('react-redux', () => {
|
||||
const originalModule = jest.requireActual('react-redux');
|
||||
|
||||
return {
|
||||
...originalModule,
|
||||
useDispatch: jest.fn().mockReturnValue(jest.fn()),
|
||||
useDispatch: () => mockDispatch,
|
||||
useSelector: jest.fn().mockReturnValue({ from: 0, to: 0 }),
|
||||
};
|
||||
});
|
||||
|
||||
describe('useGlobalTime', () => {
|
||||
beforeEach(() => {
|
||||
mockDispatch.mockReset();
|
||||
});
|
||||
test('returns memoized value', () => {
|
||||
const { result, rerender } = renderHook(() => useGlobalTime());
|
||||
|
||||
|
@ -30,4 +35,18 @@ describe('useGlobalTime', () => {
|
|||
expect(result1.from).toBe(0);
|
||||
expect(result1.to).toBe(0);
|
||||
});
|
||||
|
||||
test('clear all queries at unmount', () => {
|
||||
const { rerender } = renderHook(() => useGlobalTime());
|
||||
act(() => rerender());
|
||||
expect(mockDispatch.mock.calls[0][0].type).toEqual(
|
||||
'x-pack/security_solution/local/inputs/DELETE_ALL_QUERY'
|
||||
);
|
||||
});
|
||||
|
||||
test('do NOT clear all queries at unmount', () => {
|
||||
const { rerender } = renderHook(() => useGlobalTime(false));
|
||||
act(() => rerender());
|
||||
expect(mockDispatch.mock.calls.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -11,7 +11,7 @@ import { inputsSelectors } from '../../store';
|
|||
import { inputsActions } from '../../store/actions';
|
||||
import { SetQuery, DeleteQuery } from './types';
|
||||
|
||||
export const useGlobalTime = () => {
|
||||
export const useGlobalTime = (clearAllQuery: boolean = true) => {
|
||||
const dispatch = useDispatch();
|
||||
const { from, to } = useSelector(inputsSelectors.globalTimeRangeSelector);
|
||||
const [isInitializing, setIsInitializing] = useState(true);
|
||||
|
@ -32,9 +32,11 @@ export const useGlobalTime = () => {
|
|||
setIsInitializing(false);
|
||||
}
|
||||
return () => {
|
||||
dispatch(inputsActions.deleteAllQuery({ id: 'global' }));
|
||||
if (clearAllQuery) {
|
||||
dispatch(inputsActions.deleteAllQuery({ id: 'global' }));
|
||||
}
|
||||
};
|
||||
}, [dispatch, isInitializing]);
|
||||
}, [clearAllQuery, dispatch, isInitializing]);
|
||||
|
||||
const memoizedReturn = useMemo(
|
||||
() => ({
|
||||
|
|
Loading…
Reference in a new issue