Skip to content

Commit

Permalink
[Dashboard] Fix share dashboard iframe embed code incorrectly (#194366)
Browse files Browse the repository at this point in the history
## Summary

Fixes [#192980](#193447)

Maybe related pr: #179037 

After fix it, having an URL that is like this:
```
?embed=true&_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A60000)%2Ctime%3A(from%3Anow-15m%2Cto%3Anow))&hide-filter-bar=true
```

**Screenshot**
<img width="1918" alt="image"
src="https://github.com/user-attachments/assets/de069fdb-895e-479a-b868-891bbb55594e">

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Tim Sullivan <[email protected]>
  • Loading branch information
3 people authored Oct 3, 2024
1 parent af53714 commit e4ff3bb
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 19 deletions.
1 change: 0 additions & 1 deletion src/plugins/share/public/components/context/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export interface IShareContext extends ShareContext {
anonymousAccess?: AnonymousAccessServiceContract;
urlService: BrowserUrlService;
snapshotShareWarning?: string;
isEmbedded: boolean;
theme: ThemeServiceSetup;
i18n: I18nStart;
publicAPIEnabled?: boolean;
Expand Down
1 change: 0 additions & 1 deletion src/plugins/share/public/components/share_tabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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>'
);
});
});
});
22 changes: 15 additions & 7 deletions src/plugins/share/public/components/tabs/embed/embed_content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ type EmbedProps = Pick<
| 'shareableUrlLocatorParams'
| 'shareableUrlForSavedObject'
| 'shareableUrl'
| 'isEmbedded'
| 'embedUrlParamExtensions'
| 'objectType'
> & {
Expand All @@ -52,7 +51,6 @@ export const EmbedContent = ({
embedUrlParamExtensions: urlParamExtensions,
shareableUrlForSavedObject,
shareableUrl,
isEmbedded,
objectType,
setIsNotSaved,
}: EmbedProps) => {
Expand All @@ -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
Expand All @@ -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(
Expand Down Expand Up @@ -180,16 +190,14 @@ export const EmbedContent = ({
tempUrl = addUrlAnonymousAccessParameters(tempUrl!);
}

if (isEmbedded) {
tempUrl = makeIframeTag(tempUrl!);
}
tempUrl = makeIframeTag(tempUrl!);

setUrl(tempUrl!);
}, [
addUrlAnonymousAccessParameters,
exportUrlAs,
getSavedObjectUrl,
getSnapshotUrl,
isEmbedded,
shortUrlCache,
useShortUrl,
]);
Expand Down
11 changes: 2 additions & 9 deletions src/plugins/share/public/components/tabs/embed/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -60,7 +54,6 @@ const EmbedTabContent: NonNullable<IEmbedTab['content']> = ({ state, dispatch })
embedUrlParamExtensions,
shareableUrlForSavedObject,
shareableUrl,
isEmbedded,
objectType,
isNotSaved: state?.isNotSaved,
setIsNotSaved,
Expand Down
1 change: 0 additions & 1 deletion src/plugins/share/public/services/share_menu_manager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ export class ShareMenuManager {
snapshotShareWarning,
disabledShareUrl,
isDirty,
isEmbedded: allowEmbed,
shareMenuItems: menuItems,
toasts,
onClose: () => {
Expand Down

0 comments on commit e4ff3bb

Please sign in to comment.