From 1c0b2549eba1e51f62a80edd15c83bc091980a93 Mon Sep 17 00:00:00 2001
From: Eyo Okon Eyo <eyo.eyo@elastic.co>
Date: Mon, 4 Nov 2024 19:39:02 +0100
Subject: [PATCH] add config to support showing warning for embed when a
 dashboard has unsaved drafts

---
 .../dashboard_app/_dashboard_app_strings.ts   | 12 ++++++++---
 .../top_nav/share/show_share_modal.tsx        | 20 ++++++++++++++++++-
 .../tabs/embed/embed_content.test.tsx         |  1 +
 .../components/tabs/embed/embed_content.tsx   | 14 ++++++++++++-
 .../public/components/tabs/embed/index.tsx    | 12 +++++++++--
 5 files changed, 52 insertions(+), 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
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')}
+            </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
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(
         <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
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<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
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<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,
       }}
     />
   );