[8.15] [Dashboard] Fix share dashboard iframe embed code incorrectly (#…

…194366) (#194774) # Backport This will backport the following commits from `main` to `8.15`: - [[Dashboard] Fix share dashboard iframe embed code incorrectly (#194366)](#194366)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Jusheng Huang <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Oct 4, 2024 · 20c068b · 20c068b
1 parent 9d7cc69
commit 20c068b
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 18 deletions.
diff --git a/src/plugins/share/public/components/context/index.tsx b/src/plugins/share/public/components/context/index.tsx
@@ -28,7 +28,6 @@ export interface IShareContext extends ShareContext {
   anonymousAccess?: AnonymousAccessServiceContract;
   urlService: BrowserUrlService;
   snapshotShareWarning?: string;
-  isEmbedded: boolean;
   theme: ThemeServiceSetup;
   i18n: I18nStart;
   publicAPIEnabled?: boolean;

diff --git a/src/plugins/share/public/components/tabs/embed/embed_content.test.tsx b/src/plugins/share/public/components/tabs/embed/embed_content.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { EmbedContent } from './embed_content';
+import React from 'react';
+import { ReactWrapper } from 'enzyme';
+
+describe('Share modal embed content tab', () => {
+  describe('share url embedded', () => {
+    let component: ReactWrapper;
+
+    beforeEach(() => {
+      component = mountWithIntl(
+        <EmbedContent
+          objectType="dashboard"
+          setIsNotSaved={() => jest.fn()}
+          shareableUrl="/home#/"
+        />
+      );
+    });
+
+    it('works for simple url', async () => {
+      component.setProps({ shareableUrl: 'http://localhost:5601/app/home#/' });
+      component.update();
+
+      const shareUrl = component
+        .find('button[data-test-subj="copyEmbedUrlButton"]')
+        .prop('data-share-url');
+      expect(shareUrl).toBe(
+        '<iframe src="http://localhost:5601/app/home#/?embed=true&_g=" height="600" width="800"></iframe>'
+      );
+    });
+
+    it('works if the url has a query string', async () => {
+      component.setProps({
+        shareableUrl:
+          'http://localhost:5601/app/dashboards#/create?_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A60000)%2Ctime%3A(from%3Anow-15m%2Cto%3Anow))',
+      });
+      component.update();
+
+      const shareUrl = component
+        .find('button[data-test-subj="copyEmbedUrlButton"]')
+        .prop('data-share-url');
+      expect(shareUrl).toBe(
+        '<iframe src="http://localhost:5601/app/dashboards#/create?embed=true&_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A60000)%2Ctime%3A(from%3Anow-15m%2Cto%3Anow))" height="600" width="800"></iframe>'
+      );
+    });
+  });
+});
diff --git a/src/plugins/share/public/components/tabs/embed/embed_content.tsx b/src/plugins/share/public/components/tabs/embed/embed_content.tsx
@@ -29,7 +29,6 @@ type EmbedProps = Pick<
   | 'shareableUrlLocatorParams'
   | 'shareableUrlForSavedObject'
   | 'shareableUrl'
-  | 'isEmbedded'
   | 'embedUrlParamExtensions'
   | 'objectType'
 > & {
@@ -51,7 +50,6 @@ export const EmbedContent = ({
   embedUrlParamExtensions: urlParamExtensions,
   shareableUrlForSavedObject,
   shareableUrl,
-  isEmbedded,
   objectType,
   setIsNotSaved,
 }: EmbedProps) => {
@@ -68,6 +66,17 @@ export const EmbedContent = ({
     if (objectType !== 'dashboard') setIsNotSaved();
   }, [url, setIsNotSaved, objectType]);
 
+  const makeUrlEmbeddable = useCallback((tempUrl: string): string => {
+    const embedParam = '?embed=true';
+    const urlHasQueryString = tempUrl.indexOf('?') !== -1;
+
+    if (urlHasQueryString) {
+      return tempUrl.replace('?', `${embedParam}&`);
+    }
+
+    return `${tempUrl}${embedParam}`;
+  }, []);
+
   const getUrlParamExtensions = useCallback(
     (tempUrl: string): string => {
       return urlParams
@@ -89,10 +98,11 @@ export const EmbedContent = ({
 
   const updateUrlParams = useCallback(
     (tempUrl: string) => {
+      tempUrl = makeUrlEmbeddable(tempUrl);
       tempUrl = urlParams ? getUrlParamExtensions(tempUrl) : tempUrl;
       return tempUrl;
     },
-    [getUrlParamExtensions, urlParams]
+    [makeUrlEmbeddable, getUrlParamExtensions, urlParams]
   );
 
   const getSnapshotUrl = useCallback(
@@ -179,16 +189,14 @@ export const EmbedContent = ({
       tempUrl = addUrlAnonymousAccessParameters(tempUrl!);
     }
 
-    if (isEmbedded) {
-      tempUrl = makeIframeTag(tempUrl!);
-    }
+    tempUrl = makeIframeTag(tempUrl!);
+
     setUrl(tempUrl!);
   }, [
     addUrlAnonymousAccessParameters,
     exportUrlAs,
     getSavedObjectUrl,
     getSnapshotUrl,
-    isEmbedded,
     shortUrlCache,
     useShortUrl,
   ]);

diff --git a/src/plugins/share/public/components/tabs/embed/index.tsx b/src/plugins/share/public/components/tabs/embed/index.tsx
@@ -37,14 +37,8 @@ const embedTabReducer: IEmbedTab['reducer'] = (state = { url: '', isNotSaved: fa
 };
 
 const EmbedTabContent: NonNullable<IEmbedTab['content']> = ({ state, dispatch }) => {
-  const {
-    embedUrlParamExtensions,
-    shareableUrlForSavedObject,
-    shareableUrl,
-    isEmbedded,
-    objectType,
-    isDirty,
-  } = useShareTabsContext()!;
+  const { embedUrlParamExtensions, shareableUrlForSavedObject, shareableUrl, objectType, isDirty } =
+    useShareTabsContext()!;
 
   const setIsNotSaved = useCallback(() => {
     dispatch({
@@ -59,7 +53,6 @@ const EmbedTabContent: NonNullable<IEmbedTab['content']> = ({ state, dispatch })
         embedUrlParamExtensions,
         shareableUrlForSavedObject,
         shareableUrl,
-        isEmbedded,
         objectType,
         isNotSaved: state?.isNotSaved,
         setIsNotSaved,

diff --git a/src/plugins/share/public/services/share_menu_manager.tsx b/src/plugins/share/public/services/share_menu_manager.tsx
@@ -131,7 +131,6 @@ export class ShareMenuManager {
               snapshotShareWarning,
               disabledShareUrl,
               isDirty,
-              isEmbedded: allowEmbed,
               shareMenuItems: menuItems,
               toasts,
               onClose: () => {

diff --git a/src/plugins/share/tsconfig.json b/src/plugins/share/tsconfig.json
@@ -21,6 +21,7 @@
     "@kbn/react-kibana-mount",
     "@kbn/shared-ux-tabbed-modal",
     "@kbn/core-theme-browser",
+    "@kbn/test-jest-helpers",
   ],
   "exclude": [
     "target/**/*",