[8.19] Share experience Improvements (#222242) (#225321)

eokoneyo · kibanamachine · web-flow · commit a8b390b424b1 · 2025-06-25T10:43:22.000-07:00
# Backport This will backport the following commits from `main` to `8.19`: - [Share experience Improvements (#222242)](#222242)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
diff --git a/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.test.tsx b/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.test.tsx
@@ -42,6 +42,7 @@ describe('TabbedModal', () => {
 
         return (
           <EuiFieldText
+            data-test-subj="log-user-input-field"
             placeholder="Placeholder text"
             value={state.inputText}
             onChange={onChange}
@@ -57,7 +58,7 @@ describe('TabbedModal', () => {
       },
     };
 
-    it('renders the modal component', async () => {
+    it("when a single tab definition is passed it simply renders it's content into the modal component without tabs", async () => {
       render(
         <TabbedModal
           tabs={[tabDefinition]}
@@ -66,6 +67,24 @@ describe('TabbedModal', () => {
         />
       );
 
+      expect(screen.queryByText(tabDefinition.name)).not.toBeInTheDocument();
+
+      expect(screen.getByTestId('log-user-input-field')).toBeInTheDocument();
+
+      await userEvent.click(await screen.findByTestId(tabDefinition.modalActionBtn!.dataTestSubj));
+
+      expect(mockedHandlerFn).toHaveBeenCalled();
+    });
+
+    it('renders the tabbed modal with tabs for tab definition with length greater than 1', async () => {
+      render(
+        <TabbedModal
+          tabs={[tabDefinition, { ...tabDefinition, id: 'anotherTab', name: 'another tab' }]}
+          defaultSelectedTabId="logUserInput"
+          onClose={modalOnCloseHandler}
+        />
+      );
+
       expect(screen.queryByText(tabDefinition.name)).toBeInTheDocument();
 
       await userEvent.click(await screen.findByTestId(tabDefinition.modalActionBtn!.dataTestSubj));
diff --git a/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.tsx b/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.tsx
@@ -127,21 +127,29 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
   );
 
   const renderTabs = useCallback(() => {
-    return tabs.map((tab, index) => {
-      return (
-        <EuiTab
-          key={index}
-          onClick={() => onSelectedTabChanged(tab.id)}
-          isSelected={tab.id === selectedTabId}
-          disabled={tab.disabled}
-          prepend={tab.prepend}
-          append={tab.append}
-          data-test-subj={tab.id}
-        >
-          {tab.name}
-        </EuiTab>
-      );
-    });
+    if (tabs.length === 1) {
+      return null;
+    }
+
+    return (
+      <EuiTabs>
+        {tabs.map((tab, index) => {
+          return (
+            <EuiTab
+              key={index}
+              onClick={() => onSelectedTabChanged(tab.id)}
+              isSelected={tab.id === selectedTabId}
+              disabled={tab.disabled}
+              prepend={tab.prepend}
+              append={tab.append}
+              data-test-subj={tab.id}
+            >
+              {tab.name}
+            </EuiTab>
+          );
+        })}
+      </EuiTabs>
+    );
   }, [onSelectedTabChanged, selectedTabId, tabs]);
 
   const modalPositionOverrideStyles: React.CSSProperties = {
@@ -170,17 +178,22 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
       </EuiModalHeader>
       <EuiModalBody>
         <Fragment>
-          <EuiTabs>{renderTabs()}</EuiTabs>
+          <Fragment>{renderTabs()}</Fragment>
           <EuiSpacer size="m" />
           {React.createElement(function RenderSelectedTabContent() {
             useLayoutEffect(onTabContentRender, []);
             return (
-              <SelectedTabContent
-                {...{
-                  state: selectedTabState,
-                  dispatch,
-                }}
-              />
+              <div
+                css={{ display: 'contents' }}
+                data-test-subj={`tabbedModal-${selectedTabId}-content`}
+              >
+                <SelectedTabContent
+                  {...{
+                    state: selectedTabState,
+                    dispatch,
+                  }}
+                />
+              </div>
             );
           })}
         </Fragment>
diff --git a/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.test.tsx b/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.test.tsx
@@ -12,8 +12,9 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
-import { ExportMenu } from './export_popover';
+import { ExportMenu } from './export_integrations';
 import type { IShareContext } from '../context';
+import type { ExportShareConfig } from '../../types';
 
 const mockShareContext: IShareContext = {
   shareMenuItems: [
@@ -51,15 +52,19 @@ const mockShareContext: IShareContext = {
   onClose: jest.fn(),
 };
 
-function ExportPopoverRender() {
+function ExportPopoverRender({
+  shareContext = mockShareContext,
+}: {
+  shareContext?: IShareContext;
+}) {
   const [clickTarget, setClickTarget] = React.useState<HTMLElement | null>();
 
   return (
     <IntlProvider locale="en">
       {Boolean(clickTarget) && (
         <ExportMenu
           shareContext={{
-            ...mockShareContext,
+            ...shareContext,
             anchorElement: clickTarget!,
           }}
         />
@@ -69,7 +74,7 @@ function ExportPopoverRender() {
   );
 }
 
-describe('ExportPopover', () => {
+describe('Export Integrations', () => {
   it('renders a popover with the list of registered export types', async () => {
     const user = userEvent.setup();
 
@@ -83,4 +88,33 @@ describe('ExportPopover', () => {
       expect(screen.getByText(label)).toBeInTheDocument();
     });
   });
+
+  it('will invoke the export integrations generateAssetExport config method if it is the singular export type available', async () => {
+    const user = userEvent.setup();
+
+    const singleExportShareContext: IShareContext = {
+      ...mockShareContext,
+      shareMenuItems: [
+        {
+          shareType: 'integration',
+          groupId: 'export',
+          id: 'csv',
+          config: {
+            icon: 'empty',
+            label: 'CSV',
+            generateAssetExport: jest.fn(() => Promise.resolve()),
+          },
+        } as unknown as ExportShareConfig,
+      ],
+    };
+
+    render(<ExportPopoverRender shareContext={singleExportShareContext} />);
+
+    await user.click(screen.getByText('click me'));
+
+    expect(
+      (singleExportShareContext.shareMenuItems[0] as ExportShareConfig).config.generateAssetExport
+    ).toHaveBeenCalled();
+    expect(singleExportShareContext.onClose).toHaveBeenCalled();
+  });
 });
diff --git a/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.tsx b/src/platform/plugins/shared/share/public/components/export_integrations/export_integrations.tsx
@@ -190,6 +190,7 @@ function ManagedFlyout({
                       <EuiCodeBlock
                         data-test-subj="exportAssetValue"
                         css={{ overflowWrap: 'break-word' }}
+                        overflowHeight={360}
                         language={exportIntegration.config.copyAssetURIConfig.contentType}
                         isCopyable
                         copyAriaLabel={i18n.translate('share.export.copyPostURLAriaLabel', {
@@ -286,34 +287,65 @@ function ExportMenuPopover({ intl }: ExportMenuProps) {
     setIsFlyoutVisible(true);
   }, []);
 
-  useEffect(() => {
-    // when there is only one share menu item, and no export derivatives registered,
-    // we want to open the flyout and not the popover
-    if (
-      exportIntegrations.length === 1 &&
-      exportDerivatives.length === 0 &&
-      !selectedMenuItemMeta
-    ) {
-      openFlyout(exportIntegrations[0]);
-    }
-  }, [exportIntegrations, exportDerivatives, openFlyout, selectedMenuItemMeta]);
+  const exportIntegrationInteractionHandler = useCallback(
+    async (menuItem: ExportShareConfig) => {
+      if (
+        !menuItem.config.copyAssetURIConfig &&
+        !menuItem.config.generateAssetComponent &&
+        menuItem.config.generateAssetExport
+      ) {
+        await menuItem.config
+          .generateAssetExport({
+            intl,
+            optimizedForPrinting: false,
+          })
+          .finally(() => {
+            onClose();
+          });
+      } else {
+        openFlyout(menuItem);
+      }
+    },
+    [intl, onClose, openFlyout]
+  );
+
+  const flyoutRef = useRef<HTMLDivElement | null>(null);
+
+  const canSkipDisplayingPopover = useMemo<boolean>(() => {
+    // when there is only one export share menu item, and no export derivatives registered,
+    // we'd like to skip displaying the popover
+    return exportIntegrations.length === 1 && !exportDerivatives.length;
+  }, [exportIntegrations, exportDerivatives]);
 
   const flyoutOnCloseHandler = useCallback(() => {
-    return exportIntegrations.length === 1 && exportDerivatives.length === 0
-      ? onClose()
-      : setIsFlyoutVisible(false);
-  }, [exportDerivatives.length, exportIntegrations.length, onClose]);
+    setIsFlyoutVisible(false);
+    if (canSkipDisplayingPopover) {
+      onClose();
+    }
+  }, [onClose, canSkipDisplayingPopover]);
 
-  const flyoutRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (canSkipDisplayingPopover && !selectedMenuItemMeta) {
+      exportIntegrationInteractionHandler(exportIntegrations[0]);
+    }
+  }, [
+    exportIntegrationInteractionHandler,
+    exportIntegrations,
+    onClose,
+    selectedMenuItemMeta,
+    canSkipDisplayingPopover,
+  ]);
 
   return (
     <Fragment>
       <EuiWrappingPopover
-        isOpen={!isFlyoutVisible}
-        data-test-subj="exportPopover"
+        isOpen={!isFlyoutVisible && !canSkipDisplayingPopover}
         button={anchorElement!}
         closePopover={onClose}
         panelPaddingSize="s"
+        panelProps={{
+          'data-test-subj': 'exportPopoverPanel',
+        }}
       >
         <EuiListGroup flush>
           {exportIntegrations.map((menuItem) => (
@@ -328,7 +360,7 @@ function ExportMenuPopover({ intl }: ExportMenuProps) {
                 label={menuItem.config.label}
                 data-test-subj={`exportMenuItem-${menuItem.config.label}`}
                 isDisabled={menuItem.config.disabled}
-                onClick={() => openFlyout(menuItem)}
+                onClick={exportIntegrationInteractionHandler.bind(null, menuItem)}
               />
             </EuiToolTip>
           ))}
@@ -368,6 +400,7 @@ function ExportMenuPopover({ intl }: ExportMenuProps) {
             ? selectedMenuItem.config.flyoutSizing || {}
             : {})}
         >
+          {/* TODO: remove this global style once https://github.com/elastic/eui/issues/8801 is resolved  */}
           <Global
             // @ts-expect-error -- we pass a z-index specifying important so we override the default z-index, so solve a known bug,
             // where when `headerZindexLocation` is set to `above`, the popover panel z-index is not high enough
diff --git a/src/platform/plugins/shared/share/public/components/export_integrations/index.ts b/src/platform/plugins/shared/share/public/components/export_integrations/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ExportMenu } from './export_popover';
+export { ExportMenu } from './export_integrations';
diff --git a/src/platform/plugins/shared/share/public/components/share_tabs.tsx b/src/platform/plugins/shared/share/public/components/share_tabs.tsx
@@ -34,7 +34,7 @@ export const ShareMenuTabs = () => {
     tabs.push(linkTab);
   }
 
-  // Embed is disabled in the serverless offering, hence the need to check that we received it
+  // Embed is disabled in the serverless offering, hence the need to check if the embed tab should be shown
   if (
     shareMenuItems.some(({ shareType }) => shareType === 'embed') &&
     !objectTypeMeta?.config?.embed?.disabled
diff --git a/src/platform/plugins/shared/share/public/services/share_menu_manager.tsx b/src/platform/plugins/shared/share/public/services/share_menu_manager.tsx
@@ -16,7 +16,7 @@ import { ShowShareMenuOptions } from '../types';
 import { ShareRegistry } from './share_menu_registry';
 import type { ShareConfigs } from '../types';
 import { ShareMenu } from '../components/share_tabs';
-import { ExportMenu } from '../components/export_popover';
+import { ExportMenu } from '../components/export_integrations';
 
 interface ShareMenuManagerStartDeps {
   core: CoreStart;
diff --git a/src/platform/test/functional/page_objects/export_page.ts b/src/platform/test/functional/page_objects/export_page.ts
@@ -24,7 +24,7 @@ export class ExportPageObject extends FtrService {
   }
 
   async isExportPopoverOpen() {
-    return await this.testSubjects.exists('exportPopover');
+    return await this.testSubjects.exists('exportPopoverPanel');
   }
 
   async isPopoverItemEnabled(label: string) {
diff --git a/x-pack/test/functional/apps/lens/group1/ad_hoc_data_view.ts b/x-pack/test/functional/apps/lens/group1/ad_hoc_data_view.ts
@@ -190,7 +190,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should be possible to download a visualization with adhoc dataViews', async () => {
       await lens.setCSVDownloadDebugFlag(true);
-      await lens.openCSVDownloadExport();
+      await lens.triggerCSVDownloadExport();
 
       const csv = await lens.getCSVContent();
       expect(csv).to.be.ok();
diff --git a/x-pack/test/functional/apps/lens/group4/share.ts b/x-pack/test/functional/apps/lens/group4/share.ts
@@ -56,9 +56,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should enable both download and URL sharing for valid configuration', async () => {
-      await lens.clickShareModal();
-
       expect(await lens.isExportActionEnabled()).to.eql(true);
+
+      await lens.clickShareButton();
       expect(await lens.isShareActionEnabled('link'));
     });
 
@@ -84,7 +84,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should be able to download CSV data of the current visualization', async () => {
       await lens.setCSVDownloadDebugFlag(true);
-      await lens.openCSVDownloadExport();
+      await lens.triggerCSVDownloadExport();
 
       const csv = await lens.getCSVContent();
       expect(csv).to.be.ok();
@@ -106,7 +106,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         field: 'bytes',
       });
 
-      await lens.openCSVDownloadExport();
+      await lens.triggerCSVDownloadExport();
 
       const csv = await lens.getCSVContent();
       expect(csv).to.be.ok();
diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export const ShareMenuTabs = () => {`
`34`	`34`	`tabs.push(linkTab);`
`35`	`35`	`}`
`36`	`36`
`37`		`- // Embed is disabled in the serverless offering, hence the need to check that we received it`
	`37`	`+ // Embed is disabled in the serverless offering, hence the need to check if the embed tab should be shown`
`38`	`38`	`if (`
`39`	`39`	`shareMenuItems.some(({ shareType }) => shareType === 'embed') &&`
`40`	`40`	`!objectTypeMeta?.config?.embed?.disabled`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export class ExportPageObject extends FtrService {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`async isExportPopoverOpen() {`
`27`		`- return await this.testSubjects.exists('exportPopover');`
	`27`	`+ return await this.testSubjects.exists('exportPopoverPanel');`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`async isPopoverItemEnabled(label: string) {`