fix: deduped last updated date component

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

@@ -277,16 +277,17 @@ const InsightEditorComponent = ({
   onCancel,
 }: EuiMarkdownEditorUiPluginEditorProps<InsightComponentProps & { relativeTimerange: string }>) => {
   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<Provider[][]>([[]]);
   const dateRangeChoices = useMemo(() => {

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<FixedWidthLastUpdatedContainerProps>(
-  ({ updatedAt }) => {
-    const { timelines } = useKibana().services;
-    const width = useEventDetailsWidthContext();
-    const compact = useMemo(() => isCompactFooter(width), [width]);
-
-    return updatedAt > 0 ? (
-      <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
-        {timelines.getLastUpdated({ updatedAt, compact })}
-      </FixedWidthLastUpdated>
-    ) : 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;

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(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
+    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(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent(
+      'Updated 2 minutes ago'
+    );
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({
+      width: '25px',
+    });
+  });
+});

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx → 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<FixedWidthLastUpdatedContainerProps>(
   ({ 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;
 `;
 

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,

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

@@ -192,7 +192,9 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
     return columns.map((c) => c.id);
   }, [columns]);
 
-  const dataView = useGetScopedSourcererDataView(SourcererScopeName.timeline);
+  const dataView = useGetScopedSourcererDataView({
+    sourcererScope: SourcererScopeName.timeline,
+  });
 
   // Sorting
   const sortingColumns = useMemo(() => {