[Unified Tabs] Make props renderContent and getPreviewData optional (#240987)

## Summary

Follow up to #239590.
Fixes #241002.

- Removes `disablePreview` prop and instead makes `getPreviewData`
callback prop optional. If `getPreviewData` is not provided we render
the tab without `TabPreview`.
- Makes `renderContent` callback prop optional. If `renderContent` is
not provided, we return the tabs without the flex group and content
wrapper. This is for a use case where package users want to manage how
and where to render tab content on their own.

The use case for both updates is the usage of the unified tabs package
in Lens (#235372). The defaults (both prop callbacks provided) are how
Discover continues to work with unified tabs, no update needed.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: walterra

src/platform/packages/shared/kbn-unified-tabs/index.ts

@@ -16,3 +16,4 @@ export {
 } from './src/components/tabbed_content';
 export { useNewTabProps } from './src/hooks/use_new_tab_props';
 export { getNextTabNumber } from './src/utils/get_next_tab_number';
+export { getTabIdAttribute } from './src/utils/get_tab_attributes';

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

@@ -256,7 +256,7 @@ describe('Tab', () => {
     expect(onLabelEdited).not.toHaveBeenCalled();
   });
 
-  it('shows preview when disablePreview is false', async () => {
+  it('shows preview when getPreviewData is set', async () => {
     const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
     const onLabelEdited = jest.fn();
     const onSelect = jest.fn();
@@ -273,7 +273,6 @@ describe('Tab', () => {
         onLabelEdited={onLabelEdited}
         onSelect={onSelect}
         onClose={onClose}
-        disablePreview={false}
       />
     );
 
@@ -288,12 +287,14 @@ describe('Tab', () => {
     });
 
     await waitFor(() => {
+      const tabWithBackground = screen.getByTestId(`unifiedTabs_tab_${tabItem.id}`);
+      expect(tabWithBackground).toBeInTheDocument();
       const preview = screen.getByTestId(`unifiedTabs_tabPreviewCodeBlock_${tabItem.id}`);
       expect(preview).toBeInTheDocument();
     });
   });
 
-  it('does not show preview when disablePreview is true', async () => {
+  it('does not show preview when getPreviewData is not set', async () => {
     const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
     const onLabelEdited = jest.fn();
     const onSelect = jest.fn();
@@ -306,11 +307,9 @@ describe('Tab', () => {
         item={tabItem}
         isSelected={false}
         services={servicesMock}
-        getPreviewData={getPreviewDataMock}
         onLabelEdited={onLabelEdited}
         onSelect={onSelect}
         onClose={onClose}
-        disablePreview={true}
       />
     );
 
@@ -325,6 +324,8 @@ describe('Tab', () => {
     });
 
     await waitFor(() => {
+      const tabWithBackground = screen.getByTestId(`unifiedTabs_tab_${tabItem.id}`);
+      expect(tabWithBackground).toBeInTheDocument();
       const preview = screen.queryByTestId(`unifiedTabs_tabPreviewCodeBlock_${tabItem.id}`);
       expect(preview).not.toBeInTheDocument();
     });

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

@@ -44,15 +44,14 @@ export interface TabProps {
   tabContentId: string;
   tabsSizeConfig: TabsSizeConfig;
   getTabMenuItems?: GetTabMenuItems;
-  getPreviewData: (item: TabItem) => TabPreviewData;
+  getPreviewData?: (item: TabItem) => TabPreviewData;
   services: TabsServices;
   onLabelEdited: EditTabLabelProps['onLabelEdited'];
   onSelect: (item: TabItem) => Promise<void>;
   onClose: ((item: TabItem) => Promise<void>) | undefined;
   onSelectedTabKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => Promise<void>;
   disableCloseButton?: boolean;
   disableInlineLabelEditing?: boolean;
-  disablePreview?: boolean;
   disableDragAndDrop?: boolean;
 }
 
@@ -82,7 +81,6 @@ export const Tab: React.FC<TabProps> = (props) => {
     onSelectedTabKeyDown,
     disableCloseButton = false,
     disableInlineLabelEditing = false,
-    disablePreview = false,
     disableDragAndDrop = false,
   } = props;
   const { euiTheme } = useEuiTheme();
@@ -91,7 +89,7 @@ export const Tab: React.FC<TabProps> = (props) => {
   const [isInlineEditActive, setIsInlineEditActive] = useState<boolean>(false);
   const [showPreview, setShowPreview] = useState<boolean>(false);
   const [isActionPopoverOpen, setActionPopover] = useState<boolean>(false);
-  const previewData = useMemo(() => getPreviewData(item), [getPreviewData, item]);
+  const previewData = useMemo(() => getPreviewData?.(item), [getPreviewData, item]);
 
   const hidePreview = useCallback(() => setShowPreview(false), [setShowPreview]);
 
@@ -218,7 +216,7 @@ export const Tab: React.FC<TabProps> = (props) => {
             />
           ) : (
             <div css={getTabLabelContainerCss(euiTheme)} className="unifiedTabs__tabLabel">
-              {previewData.status === TabStatus.RUNNING && (
+              {previewData?.status === TabStatus.RUNNING && (
                 <EuiProgress size="xs" color="accent" position="absolute" />
               )}
               <EuiFlexGroup
@@ -279,7 +277,6 @@ export const Tab: React.FC<TabProps> = (props) => {
                   <EuiButtonIcon
                     // semantically role="tablist" does not allow other buttons in tabs
                     aria-hidden={true}
-                    tabIndex={-1}
                     color="text"
                     data-test-subj={`unifiedTabs_closeTabBtn_${item.id}`}
                     iconType="cross"
@@ -294,22 +291,30 @@ export const Tab: React.FC<TabProps> = (props) => {
     </div>
   );
 
+  const tabWithBackground = (
+    <TabWithBackground
+      data-test-subj={`unifiedTabs_tab_${item.id}`}
+      isSelected={isSelected}
+      isDragging={isDragging}
+      services={services}
+    >
+      {mainTabContent}
+    </TabWithBackground>
+  );
+
+  if (!previewData) {
+    return tabWithBackground;
+  }
+
   return (
     <TabPreview
-      showPreview={!disablePreview && showPreview}
+      showPreview={showPreview}
       setShowPreview={setShowPreview}
       stopPreviewOnHover={isInlineEditActive || isActionPopoverOpen}
       tabItem={item}
       previewData={previewData}
     >
-      <TabWithBackground
-        data-test-subj={`unifiedTabs_tab_${item.id}`}
-        isSelected={isSelected}
-        isDragging={isDragging}
-        services={services}
-      >
-        {mainTabContent}
-      </TabWithBackground>
+      {tabWithBackground}
     </TabPreview>
   );
 };

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

@@ -10,7 +10,8 @@
 import React, { useState } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { TabbedContent, type TabbedContentProps } from './tabbed_content';
+import type { TabbedContentProps } from './tabbed_content';
+import { TabbedContent } from './tabbed_content';
 import { getPreviewDataMock } from '../../../__mocks__/get_preview_data';
 import { servicesMock } from '../../../__mocks__/services';
 
@@ -20,18 +21,18 @@ const NEW_TAB = {
 };
 
 describe('TabbedContent', () => {
-  const user = userEvent.setup();
-
   const TabsWrapper = ({
     initialItems,
     initialSelectedItemId,
     onChanged,
     onEBTEvent,
+    disableRenderContent = false,
   }: {
     initialItems: TabbedContentProps['items'];
     initialSelectedItemId?: TabbedContentProps['selectedItemId'];
     onChanged: TabbedContentProps['onChanged'];
     onEBTEvent: TabbedContentProps['onEBTEvent'];
+    disableRenderContent?: boolean;
   }) => {
     const [{ managedItems, managedSelectedItemId }, setState] = useState<{
       managedItems: TabbedContentProps['items'];
@@ -57,9 +58,11 @@ describe('TabbedContent', () => {
         }}
         onEBTEvent={onEBTEvent}
         onClearRecentlyClosed={jest.fn()}
-        renderContent={(item) => (
-          <div style={{ paddingTop: '16px' }}>Content for tab: {item.label}</div>
-        )}
+        renderContent={
+          !disableRenderContent
+            ? (item) => <div style={{ paddingTop: '16px' }}>Content for tab: {item.label}</div>
+            : undefined
+        }
       />
     );
   };
@@ -198,6 +201,12 @@ describe('TabbedContent', () => {
   });
 
   it('correctly numbers duplicate tabs when multiple copies exist', async () => {
+    const user = userEvent.setup({
+      delay: null,
+      advanceTimers: jest.advanceTimersByTime,
+      pointerEventsCheck: 0,
+    });
+
     const initialItems = [
       { id: 'tab1', label: 'Tab 1' },
       { id: 'tab2', label: 'Tab 1 (copy)' },
@@ -237,6 +246,8 @@ describe('TabbedContent', () => {
   });
 
   it('correctly duplicates tabs with regex special characters in the label', async () => {
+    const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
+
     const tabWithSpecialChars = { id: 'tab1', label: 'Tab (1+2)*.?' };
     const initialItems = [tabWithSpecialChars, { id: 'tab2', label: 'Regular Tab' }];
     const onChanged = jest.fn();
@@ -270,6 +281,8 @@ describe('TabbedContent', () => {
   });
 
   it('can switch to a different tab and sends tabSwitched event', async () => {
+    const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
+
     const initialItems = [
       { id: 'tab1', label: 'Tab 1' },
       { id: 'tab2', label: 'Tab 2' },
@@ -287,7 +300,7 @@ describe('TabbedContent', () => {
       />
     );
 
-    await userEvent.click(screen.getByTestId(`unifiedTabs_selectTabBtn_${secondTab.id}`));
+    await user.click(screen.getByTestId(`unifiedTabs_selectTabBtn_${secondTab.id}`));
     await waitFor(() => {
       expect(onEBTEvent).toHaveBeenCalledWith({
         eventName: 'tabSwitched',
@@ -303,6 +316,8 @@ describe('TabbedContent', () => {
   });
 
   it('can close other tabs and sends tabClosedOthers event', async () => {
+    const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
+
     const initialItems = [
       { id: 'tab1', label: 'Tab 1' },
       { id: 'tab2', label: 'Tab 2' },
@@ -347,6 +362,8 @@ describe('TabbedContent', () => {
   });
 
   it('can close tabs to the right and sends tabClosedToTheRight event', async () => {
+    const user = userEvent.setup({ delay: null, advanceTimers: jest.advanceTimersByTime });
+
     const initialItems = [
       { id: 'tab1', label: 'Tab 1' },
       { id: 'tab2', label: 'Tab 2' },
@@ -387,4 +404,52 @@ describe('TabbedContent', () => {
       });
     });
   });
+
+  it('renders tab content when renderContent is provided', () => {
+    const initialItems = [
+      { id: 'tab1', label: 'Tab 1' },
+      { id: 'tab2', label: 'Tab 2' },
+    ];
+    const onChanged = jest.fn();
+    const onEBTEvent = jest.fn();
+
+    render(
+      <TabsWrapper
+        initialItems={initialItems}
+        initialSelectedItemId={initialItems[0].id}
+        onChanged={onChanged}
+        onEBTEvent={onEBTEvent}
+      />
+    );
+
+    // The tabs bar should be rendered
+    expect(screen.queryByTestId('unifiedTabs_tabsBar')).toBeInTheDocument();
+    // When renderContent is provided, the tab content area should be rendered
+    expect(screen.getByTestId('unifiedTabs_selectedTabContent')).toBeInTheDocument();
+    expect(screen.getByText('Content for tab: Tab 1')).toBeInTheDocument();
+  });
+
+  it('does not render tab content when renderContent is not provided', () => {
+    const initialItems = [
+      { id: 'tab1', label: 'Tab 1' },
+      { id: 'tab2', label: 'Tab 2' },
+    ];
+    const onChanged = jest.fn();
+    const onEBTEvent = jest.fn();
+
+    render(
+      <TabsWrapper
+        initialItems={initialItems}
+        initialSelectedItemId={initialItems[0].id}
+        onChanged={onChanged}
+        onEBTEvent={onEBTEvent}
+        disableRenderContent={true}
+      />
+    );
+
+    // The tabs bar should still be rendered
+    expect(screen.queryByTestId('unifiedTabs_tabsBar')).toBeInTheDocument();
+    // When renderContent is not provided, the tab content area should NOT be rendered
+    expect(screen.queryByTestId('unifiedTabs_selectedTabContent')).not.toBeInTheDocument();
+  });
 });