[8.17] fix issue with generating short url when copying share link (#…

…201475) (#201593) # Backport This will backport the following commits from `main` to `8.17`: - [fix issue with generating short url when copying share link (#201475)](#201475)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"197e606bdf812438dbcfe5bb783198a0ea874b52","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:SharedUX","backport:prev-major"],"title":"fix issue with generating short url when copying share link","number":201475,"url":"https://github.com/elastic/kibana/pull/201475","mergeCommit":{"message":"fix issue with generating short url when copying share link (#201475)\n\n## Summary\r\n\r\nExtracted from #197484, to make it\r\nmuch easier to backport this fix to other releases that require this\r\nfix.\r\n\r\nThis PR fixes the issue with generating short URL for the share link.\r\n\r\n### Checklist\r\n\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"197e606bdf812438dbcfe5bb783198a0ea874b52"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201475","number":201475,"mergeCommit":{"message":"fix issue with generating short url when copying share link (#201475)\n\n## Summary\r\n\r\nExtracted from #197484, to make it\r\nmuch easier to backport this fix to other releases that require this\r\nfix.\r\n\r\nThis PR fixes the issue with generating short URL for the share link.\r\n\r\n### Checklist\r\n\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"197e606bdf812438dbcfe5bb783198a0ea874b52"}}]}] BACKPORT--> Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Nov 25, 2024 · a61a2bb · a61a2bb
1 parent bc5363a
commit a61a2bb
Show file tree

Hide file tree

Showing 6 changed files with 300 additions and 78 deletions.
diff --git a/src/plugins/share/public/components/context/index.test.tsx b/src/plugins/share/public/components/context/index.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useShareTabsContext } from '.';
+
+describe('share menu context', () => {
+  describe('useShareTabsContext', () => {
+    it('throws an error if used outside of ShareMenuProvider tree', () => {
+      const { result } = renderHook(() => useShareTabsContext());
+
+      expect(result.error?.message).toEqual(
+        expect.stringContaining(
+          'Failed to call `useShareTabsContext` because the context from ShareMenuProvider is missing.'
+        )
+      );
+    });
+  });
+});
diff --git a/src/plugins/share/public/components/context/index.tsx b/src/plugins/share/public/components/context/index.tsx
@@ -9,7 +9,7 @@
 
 import { ThemeServiceSetup } from '@kbn/core-theme-browser';
 import { I18nStart } from '@kbn/core/public';
-import { createContext, useContext } from 'react';
+import React, { type PropsWithChildren, createContext, useContext } from 'react';
 
 import { AnonymousAccessServiceContract } from '../../../common';
 import type {
@@ -35,6 +35,23 @@ export interface IShareContext extends ShareContext {
   anchorElement?: HTMLElement;
 }
 
-export const ShareTabsContext = createContext<IShareContext | null>(null);
+const ShareTabsContext = createContext<IShareContext | null>(null);
 
-export const useShareTabsContext = () => useContext(ShareTabsContext);
+export const ShareMenuProvider = ({
+  shareContext,
+  children,
+}: PropsWithChildren<{ shareContext: IShareContext }>) => {
+  return <ShareTabsContext.Provider value={shareContext}>{children}</ShareTabsContext.Provider>;
+};
+
+export const useShareTabsContext = () => {
+  const context = useContext(ShareTabsContext);
+
+  if (!context) {
+    throw new Error(
+      'Failed to call `useShareTabsContext` because the context from ShareMenuProvider is missing. Ensure the component or React root is wrapped with ShareMenuProvider'
+    );
+  }
+
+  return context;
+};
diff --git a/src/plugins/share/public/components/share_tabs.test.tsx b/src/plugins/share/public/components/share_tabs.test.tsx
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { ShareMenuTabs } from './share_tabs';
-import { ShareTabsContext } from './context';
+import { ShareMenuProvider } from './context';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { KibanaLocation, LocatorGetUrlParams, UrlService } from '../../common/url_service';
 import {
@@ -77,9 +77,9 @@ describe('Share modal tabs', () => {
       },
     ];
     const wrapper = mountWithIntl(
-      <ShareTabsContext.Provider value={{ ...mockShareContext, shareMenuItems: testItem }}>
+      <ShareMenuProvider shareContext={{ ...mockShareContext, shareMenuItems: testItem }}>
         <ShareMenuTabs />
-      </ShareTabsContext.Provider>
+      </ShareMenuProvider>
     );
     expect(wrapper.find('[data-test-subj="export"]').exists()).toBeTruthy();
   });
@@ -92,11 +92,13 @@ describe('Share modal tabs', () => {
         generateExportUrl: mockGenerateExportUrl,
       },
     ];
+
     const wrapper = mountWithIntl(
-      <ShareTabsContext.Provider value={{ ...mockShareContext, shareMenuItems: testItems }}>
+      <ShareMenuProvider shareContext={{ ...mockShareContext, shareMenuItems: testItems }}>
         <ShareMenuTabs />
-      </ShareTabsContext.Provider>
+      </ShareMenuProvider>
     );
+
     expect(wrapper.find('[data-test-subj="export"]').exists()).toBeFalsy();
   });
 
@@ -116,9 +118,9 @@ describe('Share modal tabs', () => {
       },
     ];
     const wrapper = mountWithIntl(
-      <ShareTabsContext.Provider value={{ ...mockShareContext, shareMenuItems: testItem }}>
+      <ShareMenuProvider shareContext={{ ...mockShareContext, shareMenuItems: testItem }}>
         <ShareMenuTabs />
-      </ShareTabsContext.Provider>
+      </ShareMenuProvider>
     );
     expect(wrapper.find('[data-test-subj="export"]').exists()).toBeTruthy();
   });

diff --git a/src/plugins/share/public/components/share_tabs.tsx b/src/plugins/share/public/components/share_tabs.tsx
@@ -8,32 +8,26 @@
  */
 
 import React, { type FC } from 'react';
-import { TabbedModal } from '@kbn/shared-ux-tabbed-modal';
+import { TabbedModal, type IModalTabDeclaration } from '@kbn/shared-ux-tabbed-modal';
 
-import { ShareTabsContext, useShareTabsContext, type IShareContext } from './context';
+import { ShareMenuProvider, useShareTabsContext, type IShareContext } from './context';
 import { linkTab, embedTab, exportTab } from './tabs';
 
 export const ShareMenu: FC<{ shareContext: IShareContext }> = ({ shareContext }) => {
   return (
-    <ShareTabsContext.Provider value={shareContext}>
+    <ShareMenuProvider {...{ shareContext }}>
       <ShareMenuTabs />
-    </ShareTabsContext.Provider>
+    </ShareMenuProvider>
   );
 };
 
 // this file is intended to replace share_context_menu
 export const ShareMenuTabs = () => {
   const shareContext = useShareTabsContext();
 
-  if (!shareContext) {
-    return null;
-  }
-
   const { allowEmbed, objectTypeMeta, onClose, shareMenuItems, anchorElement } = shareContext;
 
-  const tabs = [];
-
-  tabs.push(linkTab);
+  const tabs: Array<IModalTabDeclaration<any>> = [linkTab];
 
   const enabledItems = shareMenuItems.filter(({ shareMenuItem }) => !shareMenuItem?.disabled);
 

diff --git a/src/plugins/share/public/components/tabs/link/link_content.test.tsx b/src/plugins/share/public/components/tabs/link/link_content.test.tsx
@@ -0,0 +1,191 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { type ComponentProps } from 'react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+
+import { urlServiceTestSetup } from '../../../../common/url_service/__tests__/setup';
+import { MockLocatorDefinition } from '../../../../common/url_service/mocks';
+import { BrowserShortUrlClientFactory } from '../../../url_service/short_urls/short_url_client_factory';
+import {
+  BrowserShortUrlClientHttp,
+  BrowserShortUrlClient,
+} from '../../../url_service/short_urls/short_url_client';
+import { BrowserUrlService } from '../../../types';
+import { LinkContent } from './link_content';
+
+const renderComponent = (props: ComponentProps<typeof LinkContent>) => {
+  render(
+    <IntlProvider locale="en">
+      <LinkContent {...props} />
+    </IntlProvider>
+  );
+};
+
+describe('LinkContent', () => {
+  const shareableUrl = 'http://localhost:5601/app/dashboards#/view/123';
+
+  const http: BrowserShortUrlClientHttp = {
+    basePath: {
+      get: () => '/xyz',
+    },
+    fetch: jest.fn(async () => {
+      return {} as any;
+    }),
+  };
+
+  let urlService: BrowserUrlService;
+
+  // @ts-expect-error there is a type because we override the shortUrls implementation
+  // eslint-disable-next-line prefer-const
+  ({ service: urlService } = urlServiceTestSetup({
+    shortUrls: ({ locators }) =>
+      new BrowserShortUrlClientFactory({
+        http,
+        locators,
+      }),
+  }));
+
+  beforeAll(() => {
+    Object.defineProperty(document, 'execCommand', {
+      value: jest.fn(() => true),
+    });
+  });
+
+  it('uses the delegatedShareUrlHandler to generate the shareable URL when it is provided', async () => {
+    const user = userEvent.setup();
+    const objectType = 'dashboard';
+    const objectId = '123';
+    const isDirty = false;
+
+    const delegatedShareUrlHandler = jest.fn();
+
+    renderComponent({
+      objectType,
+      objectId,
+      isDirty,
+      shareableUrl,
+      urlService,
+      allowShortUrl: true,
+      delegatedShareUrlHandler,
+    });
+
+    await user.click(screen.getByTestId('copyShareUrlButton'));
+
+    expect(delegatedShareUrlHandler).toHaveBeenCalled();
+  });
+
+  it('returns the shareable URL when the delegatedShareUrlHandler is not provided and shortURLs are not allowed', async () => {
+    const user = userEvent.setup();
+    const objectType = 'dashboard';
+    const objectId = '123';
+    const isDirty = false;
+
+    renderComponent({
+      objectType,
+      objectId,
+      isDirty,
+      shareableUrl,
+      urlService,
+      allowShortUrl: false,
+    });
+
+    const copyButton = screen.getByTestId('copyShareUrlButton');
+
+    await user.click(copyButton);
+
+    waitFor(() => {
+      expect(copyButton.getAttribute('data-share-url')).toBe(shareableUrl);
+    });
+  });
+
+  it('invokes the createWithLocator method on the shortURL service if a locator is present when the copy button is clicked', async () => {
+    const user = userEvent.setup();
+    const objectType = 'dashboard';
+    const objectId = '123';
+    const isDirty = false;
+    const shareableUrlLocatorParams = {
+      locator: new MockLocatorDefinition('TEST_LOCATOR'),
+      params: {},
+    };
+
+    const shortURL = 'http://localhost:5601/xyz/r/s/yellow-orange-tomato';
+
+    const createWithLocatorSpy = jest.spyOn(BrowserShortUrlClient.prototype, 'createWithLocator');
+
+    createWithLocatorSpy.mockResolvedValue({
+      // @ts-expect-error we only return locator property, as that's all we need for this test
+      locator: {
+        getUrl: jest.fn(() => Promise.resolve(shortURL)),
+      },
+    });
+
+    renderComponent({
+      objectType,
+      objectId,
+      isDirty,
+      shareableUrl,
+      urlService,
+      allowShortUrl: true,
+      // @ts-ignore this locator is passed mainly to test the code path that invokes createWithLocator
+      shareableUrlLocatorParams,
+    });
+
+    const copyButton = screen.getByTestId('copyShareUrlButton');
+
+    const numberOfClicks = 4;
+
+    for (const _click of Array.from({ length: numberOfClicks })) {
+      await user.click(copyButton);
+    }
+
+    // should only invoke once no matter how many times the button is clicked
+    expect(createWithLocatorSpy).toHaveBeenCalledTimes(1);
+    expect(copyButton.getAttribute('data-share-url')).toBe(shortURL);
+  });
+
+  it('invokes the createFromLongUrl method on the shortURL service if a locator is not present when the copy button is clicked', async () => {
+    const user = userEvent.setup();
+    const objectType = 'dashboard';
+    const objectId = '123';
+    const isDirty = false;
+
+    const shortURL = 'http://localhost:5601/xyz/r/s/yellow-orange-tomato';
+
+    const createFromLongUrlSpy = jest.spyOn(BrowserShortUrlClient.prototype, 'createFromLongUrl');
+
+    // @ts-expect-error we only return url property, as that's all we need for this test
+    createFromLongUrlSpy.mockResolvedValue({
+      url: shortURL,
+    });
+
+    renderComponent({
+      objectType,
+      objectId,
+      isDirty,
+      shareableUrl,
+      urlService,
+      allowShortUrl: true,
+    });
+
+    const copyButton = screen.getByTestId('copyShareUrlButton');
+
+    const numberOfClicks = 4;
+
+    for (const _click of Array.from({ length: numberOfClicks })) {
+      await user.click(copyButton);
+    }
+
+    // should only invoke once no matter how many times the button is clicked
+    expect(createFromLongUrlSpy).toHaveBeenCalledTimes(1);
+    expect(copyButton.getAttribute('data-share-url')).toBe(shortURL);
+  });
+});