[8.x] [Dashboard] Fix share dashboard iframe embed code incorrectly (#194366) (#194773)

# Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] Fix share dashboard iframe embed code incorrectly (#194366)](https://github.com/elastic/kibana/pull/194366)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jusheng Huang <117657272+viajes7@users.noreply.github.com>
2025-04-25 02:09:32 -04:00 · 2024-10-03 12:14:34 +10:00 · 2024-10-03 12:14:34 +10:00 · c9cb0fab40
commit c9cb0fab40
parent 69513090f2
6 changed files with 73 additions and 19 deletions
--- a/src/plugins/share/public/components/context/index.tsx
+++ b/src/plugins/share/public/components/context/index.tsx
@ -29,7 +29,6 @@ export interface IShareContext extends ShareContext {
  anonymousAccess?: AnonymousAccessServiceContract;
  urlService: BrowserUrlService;
  snapshotShareWarning?: string;
-  isEmbedded: boolean;
  theme: ThemeServiceSetup;
  i18n: I18nStart;
  publicAPIEnabled?: boolean;
--- a/src/plugins/share/public/components/share_tabs.test.tsx
+++ b/src/plugins/share/public/components/share_tabs.test.tsx
@ -53,7 +53,6 @@ const mockShareContext = {
  allowShortUrl: true,
  anonymousAccess: { getCapabilities: jest.fn(), getState: jest.fn() },
  urlService: service,
-  isEmbedded: true,
  theme: themeServiceMock.createStartContract(),
  objectTypeMeta: { title: 'title' },
  objectType: 'type',
--- 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,56 @@
+/*
+ * 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 { 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>'
+      );
+    });
+  });
+});
--- a/src/plugins/share/public/components/tabs/embed/embed_content.tsx
+++ b/src/plugins/share/public/components/tabs/embed/embed_content.tsx
@ -30,7 +30,6 @@ type EmbedProps = Pick<
  | 'shareableUrlLocatorParams'
  | 'shareableUrlForSavedObject'
  | 'shareableUrl'
-  | 'isEmbedded'
  | 'embedUrlParamExtensions'
  | 'objectType'
 > & {
@ -52,7 +51,6 @@ export const EmbedContent = ({
  embedUrlParamExtensions: urlParamExtensions,
  shareableUrlForSavedObject,
  shareableUrl,
-  isEmbedded,
  objectType,
  setIsNotSaved,
 }: EmbedProps) => {
@ -69,6 +67,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
@ -90,10 +99,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(
@ -180,16 +190,14 @@ export const EmbedContent = ({
      tempUrl = addUrlAnonymousAccessParameters(tempUrl!);
    }

-    if (isEmbedded) {
    tempUrl = makeIframeTag(tempUrl!);
-    }
+
    setUrl(tempUrl!);
  }, [
    addUrlAnonymousAccessParameters,
    exportUrlAs,
    getSavedObjectUrl,
    getSnapshotUrl,
-    isEmbedded,
    shortUrlCache,
    useShortUrl,
  ]);
--- a/src/plugins/share/public/components/tabs/embed/index.tsx
+++ b/src/plugins/share/public/components/tabs/embed/index.tsx
@ -38,14 +38,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({
@ -60,7 +54,6 @@ const EmbedTabContent: NonNullable<IEmbedTab['content']> = ({ state, dispatch })
        embedUrlParamExtensions,
        shareableUrlForSavedObject,
        shareableUrl,
-        isEmbedded,
        objectType,
        isNotSaved: state?.isNotSaved,
        setIsNotSaved,
--- a/src/plugins/share/public/services/share_menu_manager.tsx
+++ b/src/plugins/share/public/services/share_menu_manager.tsx
@ -129,7 +129,6 @@ export class ShareMenuManager {
          snapshotShareWarning,
          disabledShareUrl,
          isDirty,
-          isEmbedded: allowEmbed,
          shareMenuItems: menuItems,
          toasts,
          onClose: () => {