Skip to content

Commit 4c8fe91

Browse files
logeekallogeekal
committed
fix: deduped last updated date component
1 parent 1fe3ea6 commit 4c8fe91

6 files changed

Lines changed: 76 additions & 40 deletions

File tree

‎x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -277,16 +277,17 @@ const InsightEditorComponent = ({
277277
onCancel,
278278
}: EuiMarkdownEditorUiPluginEditorProps<InsightComponentProps & { relativeTimerange: string }>) => {
279279
const isEditMode = node != null;
280-
const { sourcererDataView, indexPattern } = useSourcererDataView(SourcererScopeName.default);
280+
const { indexPattern } = useSourcererDataView(SourcererScopeName.default);
281281
const {
282282
unifiedSearch: {
283283
ui: { FiltersBuilderLazy },
284284
},
285285
uiSettings,
286-
fieldFormats,
287286
} = useKibana().services;
288287

289-
const dataView = useGetScopedSourcererDataView(SourcererScopeName.default);
288+
const dataView = useGetScopedSourcererDataView({
289+
sourcererScope: SourcererScopeName.default,
290+
});
290291

291292
const [providers, setProviders] = useState<Provider[][]>([[]]);
292293
const dateRangeChoices = useMemo(() => {

‎x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -27,40 +27,10 @@ import type { OnChangePage } from '../events';
2727
import { EVENTS_COUNT_BUTTON_CLASS_NAME } from '../helpers';
2828

2929
import * as i18n from './translations';
30-
import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
3130
import { timelineActions, timelineSelectors } from '../../../store';
3231
import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
3332
import { useKibana } from '../../../../common/lib/kibana';
34-
35-
export const isCompactFooter = (width: number): boolean => width < 600;
36-
37-
interface FixedWidthLastUpdatedContainerProps {
38-
updatedAt: number;
39-
}
40-
41-
const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
42-
({ updatedAt }) => {
43-
const { timelines } = useKibana().services;
44-
const width = useEventDetailsWidthContext();
45-
const compact = useMemo(() => isCompactFooter(width), [width]);
46-
47-
return updatedAt > 0 ? (
48-
<FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
49-
{timelines.getLastUpdated({ updatedAt, compact })}
50-
</FixedWidthLastUpdated>
51-
) : null;
52-
}
53-
);
54-
55-
FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
56-
57-
const FixedWidthLastUpdated = styled.div<{ compact?: boolean }>`
58-
width: ${({ compact }) => (!compact ? 200 : 25)}px;
59-
overflow: hidden;
60-
text-align: end;
61-
`;
62-
63-
FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
33+
import { FixedWidthLastUpdatedContainer } from './last_updated';
6434

6535
interface HeightProp {
6636
height: number;

‎x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React from 'react';
9+
import { render, screen } from '@testing-library/react';
10+
import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
11+
import { FixedWidthLastUpdatedContainer } from './last_updated';
12+
import { useKibana } from '../../../../common/lib/kibana';
13+
import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
14+
15+
jest.mock('../../../../common/components/events_viewer/event_details_width_context');
16+
jest.mock('../../../../common/lib/kibana');
17+
18+
const mockEventDetailsWidthContainer = jest.fn().mockImplementation(() => {
19+
return 800;
20+
});
21+
22+
const mockUseLastUpdatedTimelinesPlugin = jest.fn().mockImplementation(() => {
23+
return `Updated 2 minutes ago`;
24+
});
25+
26+
describe('FixWidthLastUpdateContainer', () => {
27+
beforeEach(() => {
28+
(useKibana as jest.Mock).mockImplementation(() => {
29+
return {
30+
services: {
31+
...createStartServicesMock(),
32+
timelines: {
33+
getLastUpdated: mockUseLastUpdatedTimelinesPlugin,
34+
},
35+
},
36+
};
37+
});
38+
39+
(useEventDetailsWidthContext as jest.Mock).mockImplementation(mockEventDetailsWidthContainer);
40+
});
41+
42+
it('should return normal version when width is greater than 600', () => {
43+
render(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
44+
expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent(
45+
'Updated 2 minutes ago'
46+
);
47+
expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({
48+
width: '200px',
49+
});
50+
});
51+
it('should return compact version when width is less than 600', () => {
52+
mockEventDetailsWidthContainer.mockReturnValueOnce(400);
53+
render(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
54+
expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent(
55+
'Updated 2 minutes ago'
56+
);
57+
expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({
58+
width: '25px',
59+
});
60+
});
61+
});

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx renamed to x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77

88
import React, { useMemo } from 'react';
99
import styled from 'styled-components';
10+
import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
1011

11-
import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context';
12-
import { useKibana } from '../../../../../common/lib/kibana';
13-
14-
export const isCompactFooter = (width: number): boolean => width < 600;
12+
import { useKibana } from '../../../../common/lib/kibana';
1513

1614
interface FixedWidthLastUpdatedContainerProps {
1715
updatedAt: number;
1816
}
1917

18+
export const isCompactFooter = (width: number): boolean => width < 600;
19+
2020
export const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
2121
({ updatedAt }) => {
2222
const { timelines } = useKibana().services;
@@ -35,6 +35,8 @@ FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
3535

3636
const FixedWidthLastUpdated = styled.span<{ compact?: boolean }>`
3737
width: ${({ compact }) => (!compact ? 200 : 25)}px;
38+
text-overflow: ellipsis;
39+
text-align: end;
3840
overflow: hidden;
3941
`;
4042

‎x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import {
1414
useTimelineFullScreen,
1515
} from '../../../../../common/containers/use_full_screen';
1616
import { StatefulRowRenderersBrowser } from '../../../row_renderers_browser';
17-
import { FixedWidthLastUpdatedContainer } from './last_updated';
1817
import * as i18n from './translations';
1918
import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../../../common/components/exit_full_screen';
19+
import { FixedWidthLastUpdatedContainer } from '../../footer/last_updated';
2020

2121
export const isFullScreen = ({
2222
globalFullScreen,

‎x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,9 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
192192
return columns.map((c) => c.id);
193193
}, [columns]);
194194

195-
const dataView = useGetScopedSourcererDataView(SourcererScopeName.timeline);
195+
const dataView = useGetScopedSourcererDataView({
196+
sourcererScope: SourcererScopeName.timeline,
197+
});
196198

197199
// Sorting
198200
const sortingColumns = useMemo(() => {

0 commit comments

Comments
 (0)