[Discover] recently closed tabs preview

src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tabs.stories.tsx

@@ -43,7 +43,7 @@ const TabbedContentTemplate: StoryFn<TabbedContentProps> = (args) => {
       {...args}
       items={managedItems}
       selectedItemId={managedSelectedItemId}
-      recentlyClosedItems={[]}
+      recentlyClosedItems={args.recentlyClosedItems}
       createItem={getNewTabDefaultProps}
       getPreviewData={getPreviewDataMock}
       services={servicesMock}
@@ -94,5 +94,12 @@ export const WithMultipleTabs: StoryObj<TabbedContentProps> = {
       },
     ],
     selectedItemId: '3',
+    recentlyClosedItems: [
+      {
+        id: '4',
+        label: 'Closed Tab',
+        closedAt: 123456789,
+      },
+    ],
   },
 };

src/platform/packages/shared/kbn-unified-tabs/src/components/tab_preview/tab_preview.tsx

@@ -37,6 +37,7 @@ export interface TabPreviewProps {
   previewData: TabPreviewData;
   stopPreviewOnHover?: boolean;
   previewDelay?: number;
+  position?: 'bottom' | 'left';
 }
 
 const getQueryLanguage = (tabPreviewData: TabPreviewData) => {
@@ -62,6 +63,7 @@ export const TabPreview: React.FC<TabPreviewProps> = ({
   tabItem,
   previewData,
   stopPreviewOnHover,
+  position = 'bottom',
   previewDelay = 1250, // as "long" EuiToolTip delay
 }) => {
   const { euiTheme } = useEuiTheme();
@@ -73,27 +75,42 @@ export const TabPreview: React.FC<TabPreviewProps> = ({
   useEffect(() => {
     if (showPreview && tabRef.current) {
       const rect = tabRef.current.getBoundingClientRect();
-      const windowWidth = window.innerWidth;
 
-      // Check if preview would extend beyond right edge
-      const wouldExtendBeyondRight = rect.left + PREVIEW_WIDTH > windowWidth;
+      setTabPreviewData(previewData);
 
-      // Calculate left position based on screen edge constraints
-      let leftPosition = rect.left + window.scrollX;
+      if (position === 'left') {
+        // Position to the left of the element
+        let leftPosition = rect.left + window.scrollX - PREVIEW_WIDTH - euiTheme.base - 30; // extra 30 to push it off the EUI selectable menu
+        const topPosition = rect.top + window.scrollY - euiTheme.base / 2;
 
-      if (wouldExtendBeyondRight) {
-        // Align right edge of preview with right edge of window
-        leftPosition = windowWidth - PREVIEW_WIDTH + window.scrollX;
-      }
+        // Ensure preview doesn't go off left edge
+        if (leftPosition < window.scrollX) {
+          leftPosition = window.scrollX + euiTheme.base;
+        }
 
-      setTabPreviewData(previewData);
+        setTabPosition({
+          top: topPosition,
+          left: leftPosition,
+        });
+      } else {
+        // Position below the element (default)
+        let leftPosition = rect.left + window.scrollX;
 
-      setTabPosition({
-        top: rect.bottom + window.scrollY + euiTheme.base / 2,
-        left: leftPosition,
-      });
+        // Check if preview would extend beyond right edge
+        const wouldExtendBeyondRight = rect.left + PREVIEW_WIDTH > window.innerWidth;
+
+        if (wouldExtendBeyondRight) {
+          // Align right edge of preview with right edge of window
+          leftPosition = window.innerWidth - PREVIEW_WIDTH + window.scrollX;
+        }
+
+        setTabPosition({
+          top: rect.bottom + window.scrollY + euiTheme.base / 2,
+          left: leftPosition,
+        });
+      }
     }
-  }, [showPreview, previewData, tabItem, euiTheme.base]);
+  }, [showPreview, previewData, tabItem, euiTheme.base, position]);
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {

src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx

@@ -24,7 +24,13 @@ import {
   closeOtherTabs,
   closeTabsToTheRight,
 } from '../../utils/manage_tabs';
-import type { TabItem, TabsServices, TabPreviewData, TabsEBTEvent } from '../../types';
+import type {
+  TabItem,
+  TabsServices,
+  TabPreviewData,
+  TabsEBTEvent,
+  RecentlyClosedTabItem,
+} from '../../types';
 import { TabsEventName } from '../../types';
 import { getNextTabNumber } from '../../utils/get_next_tab_number';
 import { MAX_ITEMS_COUNT, TAB_SWITCH_DEBOUNCE_MS } from '../../constants';
@@ -43,7 +49,7 @@ export interface TabbedContentProps
   > {
   items: TabItem[];
   selectedItemId?: string;
-  recentlyClosedItems: TabItem[];
+  recentlyClosedItems: RecentlyClosedTabItem[];
   'data-test-subj'?: string;
   services: TabsServices;
   hideTabsBar?: boolean;

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx

@@ -21,6 +21,7 @@ const items = Array.from({ length: 5 }).map((_, i) => ({
 const recentlyClosedItems = Array.from({ length: 3 }).map((_, i) => ({
   id: `closed-tab-${i}`,
   label: `Closed Tab ${i}`,
+  closedAt: 0,
 }));
 
 const tabContentId = 'test-content-id';

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx

@@ -31,7 +31,7 @@ import {
   keys,
 } from '@elastic/eui';
 import { Tab, type TabProps } from '../tab';
-import type { TabItem, TabsServices, TabsEBTEvent } from '../../types';
+import type { TabItem, TabsServices, TabsEBTEvent, RecentlyClosedTabItem } from '../../types';
 import { TabsEventName } from '../../types';
 import { getTabIdAttribute } from '../../utils/get_tab_attributes';
 import { useResponsiveTabs } from '../../hooks/use_responsive_tabs';
@@ -67,7 +67,7 @@ export type TabsBarProps = Pick<
 > & {
   items: TabItem[];
   selectedItem: TabItem | null;
-  recentlyClosedItems: TabItem[];
+  recentlyClosedItems: RecentlyClosedTabItem[];
   unsavedItemIds?: string[];
   maxItemsCount?: number;
   services: TabsServices;
@@ -385,6 +385,7 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
               items={items}
               selectedItem={selectedItem}
               recentlyClosedItems={recentlyClosedItems}
+              getPreviewData={getPreviewData}
               onSelect={onSelect}
               onSelectRecentlyClosed={onSelectRecentlyClosed}
               onClearRecentlyClosed={onClearRecentlyClosed}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.test.tsx

@@ -11,16 +11,18 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TabsBarMenu } from './tabs_bar_menu';
+import type { TabItem } from '../../types';
+import { TabStatus, type RecentlyClosedTabItem } from '../../types';
 
 const mockTabs = [
   { id: 'tab1', label: 'Tab 1' },
   { id: 'tab2', label: 'Tab 2' },
   { id: 'tab3', label: 'Tab 3' },
 ];
 
-const mockRecentlyClosedTabs = [
-  { id: 'closed1', label: 'Closed Tab 1' },
-  { id: 'closed2', label: 'Closed Tab 2' },
+const mockRecentlyClosedTabs: RecentlyClosedTabItem[] = [
+  { id: 'closed1', label: 'Closed Tab 1', closedAt: 0 },
+  { id: 'closed2', label: 'Closed Tab 2', closedAt: 0 },
 ];
 
 const tabsBarMenuButtonTestId = 'unifiedTabs_tabsBarMenuButton';
@@ -122,7 +124,9 @@ describe('TabsBarMenu', () => {
     const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
     await user.click(menuButton);
 
-    const closedTabOption = (await screen.findAllByTitle(mockRecentlyClosedTabs[0].label))[0];
+    const closedTabOption = await screen.findByTestId(
+      `unifiedTabs_tabsMenu_recentlyClosedTab_${mockRecentlyClosedTabs[0].id}`
+    );
     await user.click(closedTabOption);
 
     expect(mockOnSelectClosedTab).toHaveBeenCalledWith(mockRecentlyClosedTabs[0]);
@@ -154,7 +158,7 @@ describe('TabsBarMenu', () => {
     const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
     await user.click(menuButton);
 
-    const selectedTabOption = (await screen.findAllByTitle(mockTabs[0].label))[0];
+    const selectedTabOption = (await screen.findAllByText(mockTabs[0].label))[0];
     expect(selectedTabOption.closest('[aria-selected="true"]')).toBeInTheDocument();
   });
 
@@ -178,4 +182,34 @@ describe('TabsBarMenu', () => {
     expect(await screen.findByText(/5 minutes ago/i)).toBeVisible();
     expect(await screen.findByText(/10 minutes ago/i)).toBeVisible();
   });
+
+  it('shows preview when callback is provided', async () => {
+    const user = userEvent.setup();
+    const now = Date.now();
+    const propsWithTimestamps = {
+      ...defaultProps,
+      getPreviewData: (item: TabItem) => ({
+        title: `Preview of ${item.label}`,
+        query: { language: 'esql', query: 'SELECT * FROM table' },
+        status: TabStatus.DEFAULT,
+      }),
+      recentlyClosedItems: [
+        { id: 'closed1', label: 'Closed Tab 1', closedAt: now - 5 * 60 * 1000 }, // 5 minutes
+        { id: 'closed2', label: 'Closed Tab 2', closedAt: now - 10 * 60 * 1000 }, // 10 minutes
+      ],
+    };
+
+    render(<TabsBarMenu {...propsWithTimestamps} />);
+
+    const menuButton = screen.getByTestId(tabsBarMenuButtonTestId);
+    await user.click(menuButton);
+
+    expect(await screen.findByText('Recently closed')).toBeVisible();
+
+    // Hover over the closed tab item
+    await user.hover(screen.getByText('Closed Tab 1'));
+
+    // Wait for the preview to appear
+    expect(await screen.findByText('Preview of Closed Tab 1')).toBeVisible();
+  });
 });