[8.x] Fix issue with short URL not working for dashboard (#197484)

src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts

@@ -130,6 +130,22 @@ export const shareModalStrings = {
       defaultMessage:
         'One or more panels on this dashboard have changed. Before you generate a snapshot, save the dashboard.',
     }),
+  getDraftSharePanelChangesWarning: () =>
+    i18n.translate('dashboard.snapshotShare.panelChangesWarning', {
+      defaultMessage:
+        '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.',
+    }),
+  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 {shareType}.',
+      values: { shareType: shareType === 'embed' ? 'embed code' : 'link' },
+    }),
 };
 
 /*

src/plugins/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx

@@ -11,14 +11,15 @@ import { omit } from 'lodash';
 import moment from 'moment';
 import React, { ReactElement, useState } from 'react';
 
-import { EuiCheckboxGroup } from '@elastic/eui';
+import { EuiCallOut, EuiCheckboxGroup } from '@elastic/eui';
 import type { Capabilities } from '@kbn/core/public';
 import { QueryState } from '@kbn/data-plugin/common';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { getStateFromKbnUrl, setStateToKbnUrl, unhashUrl } from '@kbn/kibana-utils-plugin/public';
 
+import { FormattedMessage } from '@kbn/i18n-react';
 import { convertPanelMapToPanelsArray, DashboardPanelMap } from '../../../../common';
 import { DashboardLocatorParams } from '../../../dashboard_container';
 import {
@@ -122,7 +123,7 @@ export function ShowShareModal({
   const allUnsavedPanels = (() => {
     if (
       Object.keys(unsavedDashboardState?.panels ?? {}).length === 0 &&
-      Object.keys(panelModifications ?? {}).length === 0
+      Object.keys(omit(panelModifications ?? {}, PANELS_CONTROL_GROUP_KEY)).length === 0
     ) {
       // if this dashboard has no modifications or unsaved panels return early. No overrides needed.
       return;
@@ -195,18 +196,58 @@ export function ShowShareModal({
     unhashUrl(baseUrl)
   );
 
+  const allowShortUrl = getDashboardCapabilities().createShortUrl;
+
   shareService.toggleShareContextMenu({
     isDirty,
     anchorElement,
     allowEmbed: true,
-    allowShortUrl: getDashboardCapabilities().createShortUrl,
+    allowShortUrl,
     shareableUrl,
     objectId: savedObjectId,
     objectType: 'dashboard',
     objectTypeMeta: {
       title: i18n.translate('dashboard.share.shareModal.title', {
         defaultMessage: 'Share this dashboard',
       }),
+      config: {
+        link: {
+          draftModeCallOut: (
+            <EuiCallOut
+              color="warning"
+              data-test-subj="DashboardDraftModeCopyLinkCallOut"
+              title={
+                <FormattedMessage
+                  id="dashboard.share.shareModal.draftModeCallout.title"
+                  defaultMessage="Unsaved changes"
+                />
+              }
+            >
+              {Boolean(unsavedDashboardState?.panels)
+                ? shareModalStrings.getDraftSharePanelChangesWarning()
+                : 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>
+          ),
+        },
+      },
     },
     sharingData: {
       title:

src/plugins/share/public/components/context/index.tsx

@@ -19,7 +19,7 @@ import type {
   ShareContext,
 } from '../../types';
 
-export type { ShareMenuItemV2 } from '../../types';
+export type { ShareMenuItemV2, ShareContextObjectTypeConfig } from '../../types';
 
 export interface IShareContext extends ShareContext {
   allowEmbed: boolean;

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#/"

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}>

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,
       }}
     />
   );

src/plugins/share/public/components/tabs/link/index.tsx

@@ -51,6 +51,7 @@ const linkTabReducer: ILinkTab['reducer'] = (
 const LinkTabContent: ILinkTab['content'] = ({ state, dispatch }) => {
   const {
     objectType,
+    objectTypeMeta,
     objectId,
     isDirty,
     shareableUrl,
@@ -86,6 +87,7 @@ const LinkTabContent: ILinkTab['content'] = ({ state, dispatch }) => {
     <LinkContent
       {...{
         objectType,
+        objectConfig: objectTypeMeta?.config?.link,
         objectId,
         isDirty,
         shareableUrl,

src/plugins/share/public/components/tabs/link/link_content.tsx

@@ -10,7 +10,6 @@
 import {
   copyToClipboard,
   EuiButton,
-  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
@@ -21,7 +20,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useCallback, useState, useRef, useEffect } from 'react';
-import type { IShareContext } from '../../context';
+import type { IShareContext, ShareContextObjectTypeConfig } from '../../context';
 
 type LinkProps = Pick<
   IShareContext,
@@ -33,7 +32,7 @@ type LinkProps = Pick<
   | 'delegatedShareUrlHandler'
   | 'shareableUrlLocatorParams'
   | 'allowShortUrl'
->;
+> & { objectConfig?: ShareContextObjectTypeConfig };
 
 interface UrlParams {
   [extensionName: string]: {
@@ -44,6 +43,7 @@ interface UrlParams {
 export const LinkContent = ({
   isDirty,
   objectType,
+  objectConfig = {},
   shareableUrl,
   urlService,
   shareableUrlLocatorParams,
@@ -116,6 +116,8 @@ export const LinkContent = ({
     setIsLoading(false);
   }, [snapshotUrl, delegatedShareUrlHandler, allowShortUrl, createShortUrl]);
 
+  const { draftModeCallOut: DraftModeCallout } = objectConfig;
+
   return (
     <>
       <EuiForm>
@@ -126,21 +128,10 @@ export const LinkContent = ({
             values={{ objectType }}
           />
         </EuiText>
-        {isDirty && objectType === 'lens' && (
+        {isDirty && DraftModeCallout && (
           <>
             <EuiSpacer size="m" />
-            <EuiCallOut
-              color="warning"
-              iconType="warning"
-              title={
-                <FormattedMessage id="share.link.warning.title" defaultMessage="Unsaved changes" />
-              }
-            >
-              <FormattedMessage
-                id="share.link.warning.lens"
-                defaultMessage="Copy the link to get a temporary link. Save the lens visualization to create a permanent link."
-              />
-            </EuiCallOut>
+            {DraftModeCallout}
           </>
         )}
         <EuiSpacer size="l" />

src/plugins/share/public/types.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { ComponentType, ReactElement } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { InjectedIntl } from '@kbn/i18n-react';
 import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiContextMenuPanelItemDescriptorEntry } from '@elastic/eui/src/components/context_menu/context_menu';
@@ -21,6 +21,10 @@ export type BrowserUrlService = UrlService<
   BrowserShortUrlClient
 >;
 
+export interface ShareContextObjectTypeConfig {
+  draftModeCallOut?: ReactNode;
+}
+
 /**
  * @public
  * Properties of the current object to share. Registered share
@@ -37,6 +41,7 @@ export interface ShareContext {
    */
   objectTypeMeta: {
     title: string;
+    config?: Partial<Record<'link' | 'export' | 'embed', ShareContextObjectTypeConfig>>;
   };
   objectId?: string;
   /**

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -7679,8 +7679,6 @@
     "share.link.copyEmbedCodeButton": "Copier le code intégré",
     "share.link.copyLinkButton": "Copier le lien",
     "share.link.helpText": "Partager un lien direct vers ce {objectType}.",
-    "share.link.warning.lens": "Copiez le lien afin d’obtenir un lien temporaire. Enregistrez la visualisation Lens pour créer un lien permanent.",
-    "share.link.warning.title": "Modifications non enregistrées",
     "share.modalContent.copyUrlButtonLabel": "Copier l'URL Post",
     "share.postURLWatcherMessage": "Copiez cette URL POST pour appeler la génération depuis l'extérieur de Kibana ou à partir de Watcher.",
     "share.postURLWatcherMessage.unsavedChanges": "L'URL peut changer si vous mettez Kibana à niveau.",
@@ -26269,6 +26267,8 @@
     "xpack.lens.app.share.defaultDashboardTitle": "Visualisation Lens [{date}]",
     "xpack.lens.app.shareButtonDisabledWarning": "La visualisation ne comprend aucune donnée à partager.",
     "xpack.lens.app.shareModal.title": "Partager cette visualisation Lens",
+    "xpack.lens.app.shareModal.draftModeCallout.link.warning": "Copiez le lien afin d’obtenir un lien temporaire. Enregistrez la visualisation Lens pour créer un lien permanent.",
+    "xpack.lens.app.shareModal.draftModeCallout.title": "Modifications non enregistrées",
     "xpack.lens.app.shareTitle": "Partager",
     "xpack.lens.app.shareTitleAria": "Partager la visualisation",
     "xpack.lens.app.showUnderlyingDataMultipleLayers": "Impossible d’afficher les données sous-jacentes pour les visualisations avec plusieurs calques.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -7555,8 +7555,6 @@
     "share.link.copyEmbedCodeButton": "埋め込みコードをコピー",
     "share.link.copyLinkButton": "リンクをコピー",
     "share.link.helpText": "この{objectType}への直接リンクを共有します。",
-    "share.link.warning.lens": "リンクをコピーして、一時リンクを取得します。Lensビジュアライゼーションを保存して、永続リンクを作成します。",
-    "share.link.warning.title": "保存されていない変更",
     "share.modalContent.copyUrlButtonLabel": "POST URLをコピー",
     "share.postURLWatcherMessage": "POST URLをコピーしてKibana外または旧Watcherから生成を呼び出します。",
     "share.postURLWatcherMessage.unsavedChanges": "Kibanaをアップグレードした場合、URLが変更されることがあります。",
@@ -26127,6 +26125,8 @@
     "xpack.lens.app.share.defaultDashboardTitle": "Lensビジュアライゼーション[{date}]",
     "xpack.lens.app.shareButtonDisabledWarning": "ビジュアライゼーションには共有するデータがありません。",
     "xpack.lens.app.shareModal.title": "このLensビジュアライゼーションを共有",
+    "xpack.lens.app.shareModal.draftModeCallout.link.warning": "リンクをコピーして、一時リンクを取得します。Lensビジュアライゼーションを保存して、永続リンクを作成します。",
+    "xpack.lens.app.shareModal.draftModeCallout.title": "保存されていない変更",
     "xpack.lens.app.shareTitle": "共有",
     "xpack.lens.app.shareTitleAria": "ビジュアライゼーションを共有",
     "xpack.lens.app.showUnderlyingDataMultipleLayers": "複数レイヤーのビジュアライゼーションでは、基本データを表示できません",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -7598,8 +7598,6 @@
     "share.link.copyEmbedCodeButton": "复制嵌入代码",
     "share.link.copyLinkButton": "复制链接",
     "share.link.helpText": "共享指向此 {objectType} 的直接链接。",
-    "share.link.warning.lens": "复制链接以获取临时链接。保存 Lens 可视化以创建永久链接。",
-    "share.link.warning.title": "未保存的更改",
     "share.modalContent.copyUrlButtonLabel": "复制 Post URL",
     "share.postURLWatcherMessage": "复制此 POST URL 以从 Kibana 外部或从 Watcher 调用生成。",
     "share.postURLWatcherMessage.unsavedChanges": "如果升级 Kibana，URL 可能会发生更改。",
@@ -26211,6 +26209,8 @@
     "xpack.lens.app.share.defaultDashboardTitle": "Lens 可视化 [{date}]",
     "xpack.lens.app.shareButtonDisabledWarning": "此可视化没有可共享的数据。",
     "xpack.lens.app.shareModal.title": "共享此 Lens 可视化",
+    "xpack.lens.app.shareModal.draftModeCallout.link.warning": "复制链接以获取临时链接。保存 Lens 可视化以创建永久链接。",
+    "xpack.lens.app.shareModal.draftModeCallout.title": "未保存的更改",
     "xpack.lens.app.shareTitle": "共享",
     "xpack.lens.app.shareTitleAria": "共享可视化",
     "xpack.lens.app.showUnderlyingDataMultipleLayers": "无法显示具有多个图层的可视化的底层数据",