diff --git a/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts b/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts index 2e4ab554394e4..0a2e825a2b7f7 100644 --- a/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts +++ b/src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts @@ -142,12 +142,18 @@ export const shareModalStrings = { getDraftSharePanelChangesWarning: () => i18n.translate('dashboard.snapshotShare.panelChangesWarning', { defaultMessage: - 'One or more panels on this dashboard have changed. Before generating a link, save the dashboard.', + 'You are about to share a dashboard with unsaved changes, and the link may not work properly. Save the dashboard first to create a permanent link.', }), - getDraftShareWarning: () => + getEmbedSharePanelChangesWarning: () => + i18n.translate('dashboard.embedShare.draftWarning', { + defaultMessage: + 'You are about to create an embedded dashboard with unsaved changes, and the embed code may not work properly. Save the dashboard first to create a permanent embedded dashboard.', + }), + getDraftShareWarning: (shareType: 'embed' | 'link') => i18n.translate('dashboard.snapshotShare.draftWarning', { defaultMessage: - 'This dashboard has unsaved changes. Consider saving your dashboard before generating the link.', + 'This dashboard has unsaved changes. Consider saving your dashboard before generating the {shareType}.', + values: { shareType: shareType === 'embed' ? 'embed code' : 'link' }, }), }; diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx b/src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx index 2c83ef11df327..41a290844328a 100644 --- a/src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx +++ b/src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx @@ -225,7 +225,25 @@ export function ShowShareModal({ > {Boolean(unsavedDashboardState?.panels) ? shareModalStrings.getDraftSharePanelChangesWarning() - : shareModalStrings.getDraftShareWarning()} + : shareModalStrings.getDraftShareWarning('link')} + + ), + }, + embed: { + draftModeCallOut: ( + + } + > + {Boolean(unsavedDashboardState?.panels) + ? shareModalStrings.getEmbedSharePanelChangesWarning() + : shareModalStrings.getDraftShareWarning('embed')} ), }, 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 index be3d8c941b8ea..ee9fdf01588df 100644 --- a/src/plugins/share/public/components/tabs/embed/embed_content.test.tsx +++ b/src/plugins/share/public/components/tabs/embed/embed_content.test.tsx @@ -19,6 +19,7 @@ describe('Share modal embed content tab', () => { beforeEach(() => { component = mountWithIntl( jest.fn()} shareableUrl="/home#/" diff --git a/src/plugins/share/public/components/tabs/embed/embed_content.tsx b/src/plugins/share/public/components/tabs/embed/embed_content.tsx index 557a499a38021..5a9163097c8dc 100644 --- a/src/plugins/share/public/components/tabs/embed/embed_content.tsx +++ b/src/plugins/share/public/components/tabs/embed/embed_content.tsx @@ -23,7 +23,7 @@ import useMountedState from 'react-use/lib/useMountedState'; import { format as formatUrl, parse as parseUrl } from 'url'; import { AnonymousAccessState } from '../../../../common'; -import { type IShareContext } from '../../context'; +import type { IShareContext, ShareContextObjectTypeConfig } from '../../context'; type EmbedProps = Pick< IShareContext, @@ -32,8 +32,10 @@ type EmbedProps = Pick< | 'shareableUrl' | 'embedUrlParamExtensions' | 'objectType' + | 'isDirty' > & { setIsNotSaved: () => void; + objectConfig?: ShareContextObjectTypeConfig; }; interface UrlParams { @@ -52,7 +54,9 @@ export const EmbedContent = ({ shareableUrlForSavedObject, shareableUrl, objectType, + objectConfig = {}, setIsNotSaved, + isDirty, }: EmbedProps) => { const isMounted = useMountedState(); const [urlParams, setUrlParams] = useState(undefined); @@ -252,12 +256,20 @@ export const EmbedContent = ({ /> ); + const { draftModeCallOut: DraftModeCallout } = objectConfig; + return ( <> {helpText} {renderUrlParamExtensions()} + {isDirty && DraftModeCallout && ( + <> + + {DraftModeCallout} + + )} diff --git a/src/plugins/share/public/components/tabs/embed/index.tsx b/src/plugins/share/public/components/tabs/embed/index.tsx index 3c66b48f21c8c..44d61833268cd 100644 --- a/src/plugins/share/public/components/tabs/embed/index.tsx +++ b/src/plugins/share/public/components/tabs/embed/index.tsx @@ -38,8 +38,14 @@ const embedTabReducer: IEmbedTab['reducer'] = (state = { url: '', isNotSaved: fa }; const EmbedTabContent: NonNullable = ({ state, dispatch }) => { - const { embedUrlParamExtensions, shareableUrlForSavedObject, shareableUrl, objectType, isDirty } = - useShareTabsContext()!; + const { + embedUrlParamExtensions, + shareableUrlForSavedObject, + shareableUrl, + objectType, + objectTypeMeta, + isDirty, + } = useShareTabsContext()!; const setIsNotSaved = useCallback(() => { dispatch({ @@ -55,8 +61,10 @@ const EmbedTabContent: NonNullable = ({ state, dispatch }) shareableUrlForSavedObject, shareableUrl, objectType, + objectConfig: objectTypeMeta?.config?.embed, isNotSaved: state?.isNotSaved, setIsNotSaved, + isDirty, }} /> );