add config to support showing warning for embed when a dashboard has …

…unsaved drafts
elastic · Dec 10, 2024 · 1c0b254 · 1c0b254
1 parent d0a5912
commit 1c0b254
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 7 deletions.
diff --git 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
@@ -225,7 +225,25 @@ export function ShowShareModal({
             >
               {Boolean(unsavedDashboardState?.panels)
                 ? shareModalStrings.getDraftSharePanelChangesWarning()
-                : shareModalStrings.getDraftShareWarning()}
+                : shareModalStrings.getDraftShareWarning('link')}
+            </EuiCallOut>
+          ),
+        },
+        embed: {
+          draftModeCallOut: (
+            <EuiCallOut
+              color="warning"
+              data-test-subj="DashboardDraftModeEmbedCallOut"
+              title={
+                <FormattedMessage
+                  id="dashboard.share.shareModal.draftModeCallout.title"
+                  defaultMessage="Unsaved changes"
+                />
+              }
+            >
+              {Boolean(unsavedDashboardState?.panels)
+                ? shareModalStrings.getEmbedSharePanelChangesWarning()
+                : shareModalStrings.getDraftShareWarning('embed')}
             </EuiCallOut>
           ),
         },

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
@@ -19,6 +19,7 @@ describe('Share modal embed content tab', () => {
     beforeEach(() => {
       component = mountWithIntl(
         <EmbedContent
+          isDirty={false}
           objectType="dashboard"
           setIsNotSaved={() => 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
@@ -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<UrlParams | undefined>(undefined);
@@ -252,12 +256,20 @@ export const EmbedContent = ({
       />
     );
 
+  const { draftModeCallOut: DraftModeCallout } = objectConfig;
+
   return (
     <>
       <EuiForm>
         <EuiText size="s">{helpText}</EuiText>
         <EuiSpacer />
         {renderUrlParamExtensions()}
+        {isDirty && DraftModeCallout && (
+          <>
+            <EuiSpacer size="m" />
+            {DraftModeCallout}
+          </>
+        )}
         <EuiSpacer />
       </EuiForm>
       <EuiFlexGroup justifyContent="flexEnd" responsive={false}>

diff --git 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<IEmbedTab['content']> = ({ 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<IEmbedTab['content']> = ({ state, dispatch })
         shareableUrlForSavedObject,
         shareableUrl,
         objectType,
+        objectConfig: objectTypeMeta?.config?.embed,
         isNotSaved: state?.isNotSaved,
         setIsNotSaved,
+        isDirty,
       }}
     />
   );