diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx index 7e51edec968b9e..2faca21677863f 100644 --- a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx @@ -277,16 +277,17 @@ const InsightEditorComponent = ({ onCancel, }: EuiMarkdownEditorUiPluginEditorProps) => { const isEditMode = node != null; - const { sourcererDataView, indexPattern } = useSourcererDataView(SourcererScopeName.default); + const { indexPattern } = useSourcererDataView(SourcererScopeName.default); const { unifiedSearch: { ui: { FiltersBuilderLazy }, }, uiSettings, - fieldFormats, } = useKibana().services; - const dataView = useGetScopedSourcererDataView(SourcererScopeName.default); + const dataView = useGetScopedSourcererDataView({ + sourcererScope: SourcererScopeName.default, + }); const [providers, setProviders] = useState([[]]); const dateRangeChoices = useMemo(() => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx index 019a4a1ce41328..a7ef4080c6d5eb 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx @@ -27,40 +27,10 @@ import type { OnChangePage } from '../events'; import { EVENTS_COUNT_BUTTON_CLASS_NAME } from '../helpers'; import * as i18n from './translations'; -import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context'; import { timelineActions, timelineSelectors } from '../../../store'; import { useDeepEqualSelector } from '../../../../common/hooks/use_selector'; import { useKibana } from '../../../../common/lib/kibana'; - -export const isCompactFooter = (width: number): boolean => width < 600; - -interface FixedWidthLastUpdatedContainerProps { - updatedAt: number; -} - -const FixedWidthLastUpdatedContainer = React.memo( - ({ updatedAt }) => { - const { timelines } = useKibana().services; - const width = useEventDetailsWidthContext(); - const compact = useMemo(() => isCompactFooter(width), [width]); - - return updatedAt > 0 ? ( - - {timelines.getLastUpdated({ updatedAt, compact })} - - ) : null; - } -); - -FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer'; - -const FixedWidthLastUpdated = styled.div<{ compact?: boolean }>` - width: ${({ compact }) => (!compact ? 200 : 25)}px; - overflow: hidden; - text-align: end; -`; - -FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated'; +import { FixedWidthLastUpdatedContainer } from './last_updated'; interface HeightProp { height: number; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx new file mode 100644 index 00000000000000..fd26a06d0f3cb5 --- /dev/null +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx @@ -0,0 +1,61 @@ +/* + * 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 from 'react'; +import { render, screen } from '@testing-library/react'; +import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context'; +import { FixedWidthLastUpdatedContainer } from './last_updated'; +import { useKibana } from '../../../../common/lib/kibana'; +import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock'; + +jest.mock('../../../../common/components/events_viewer/event_details_width_context'); +jest.mock('../../../../common/lib/kibana'); + +const mockEventDetailsWidthContainer = jest.fn().mockImplementation(() => { + return 800; +}); + +const mockUseLastUpdatedTimelinesPlugin = jest.fn().mockImplementation(() => { + return `Updated 2 minutes ago`; +}); + +describe('FixWidthLastUpdateContainer', () => { + beforeEach(() => { + (useKibana as jest.Mock).mockImplementation(() => { + return { + services: { + ...createStartServicesMock(), + timelines: { + getLastUpdated: mockUseLastUpdatedTimelinesPlugin, + }, + }, + }; + }); + + (useEventDetailsWidthContext as jest.Mock).mockImplementation(mockEventDetailsWidthContainer); + }); + + it('should return normal version when width is greater than 600', () => { + render(); + expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent( + 'Updated 2 minutes ago' + ); + expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({ + width: '200px', + }); + }); + it('should return compact version when width is less than 600', () => { + mockEventDetailsWidthContainer.mockReturnValueOnce(400); + render(); + expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent( + 'Updated 2 minutes ago' + ); + expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({ + width: '25px', + }); + }); +}); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx similarity index 85% rename from x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx rename to x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx index 8fd943255c29db..02359cb7923783 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx @@ -7,16 +7,16 @@ import React, { useMemo } from 'react'; import styled from 'styled-components'; +import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context'; -import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context'; -import { useKibana } from '../../../../../common/lib/kibana'; - -export const isCompactFooter = (width: number): boolean => width < 600; +import { useKibana } from '../../../../common/lib/kibana'; interface FixedWidthLastUpdatedContainerProps { updatedAt: number; } +export const isCompactFooter = (width: number): boolean => width < 600; + export const FixedWidthLastUpdatedContainer = React.memo( ({ updatedAt }) => { const { timelines } = useKibana().services; @@ -35,6 +35,8 @@ FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer'; const FixedWidthLastUpdated = styled.span<{ compact?: boolean }>` width: ${({ compact }) => (!compact ? 200 : 25)}px; + text-overflow: ellipsis; + text-align: end; overflow: hidden; `; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx index ceb3fbeb6011a2..1c7fb202060950 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx @@ -14,9 +14,9 @@ import { useTimelineFullScreen, } from '../../../../../common/containers/use_full_screen'; import { StatefulRowRenderersBrowser } from '../../../row_renderers_browser'; -import { FixedWidthLastUpdatedContainer } from './last_updated'; import * as i18n from './translations'; import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../../../common/components/exit_full_screen'; +import { FixedWidthLastUpdatedContainer } from '../../footer/last_updated'; export const isFullScreen = ({ globalFullScreen, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx index 3b886ef2546ea6..3dd395bf3cfa13 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx @@ -192,7 +192,9 @@ export const UnifiedTimelineComponent: React.FC = ({ return columns.map((c) => c.id); }, [columns]); - const dataView = useGetScopedSourcererDataView(SourcererScopeName.timeline); + const dataView = useGetScopedSourcererDataView({ + sourcererScope: SourcererScopeName.timeline, + }); // Sorting const sortingColumns = useMemo(() => {