add implementation to pass callout for short links generated in draft…

… mode
elastic · Oct 24, 2024 · 111b4cf · 111b4cf
1 parent 46fc552
commit 111b4cf
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 27 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
@@ -154,6 +154,11 @@ export const shareModalStrings = {
       defaultMessage:
         'One or more panels on this dashboard have changed. Before you generate a snapshot, save the dashboard.',
     }),
+  getDraftShareWarning: () =>
+    i18n.translate('dashboard.snapshotShare.draftWarning', {
+      defaultMessage:
+        'One or more panels on this dashboard have changed, save the dashboard to create a permanent 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
@@ -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 { convertPanelMapToSavedPanels, DashboardPanelMap } from '../../../../common';
 import { DashboardLocatorParams } from '../../../dashboard_container';
 import {
@@ -195,18 +196,38 @@ 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: allowShortUrl ? (
+            <EuiCallOut
+              color="warning"
+              data-test-subj="DashboardDraftModeCopyLinkCallOut"
+              title={
+                <FormattedMessage
+                  id="dashboard.share.shareModal.draftModeCallout.title"
+                  defaultMessage="Unsaved changes"
+                />
+              }
+            >
+              {shareModalStrings.getDraftShareWarning()}
+            </EuiCallOut>
+          ) : null,
+        },
+      },
     },
     sharingData: {
       title:

diff --git a/src/plugins/share/public/components/context/index.tsx b/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;

diff --git a/src/plugins/share/public/components/tabs/link/index.tsx b/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,

diff --git a/src/plugins/share/public/components/tabs/link/link_content.tsx b/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 { 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]: {
@@ -42,8 +41,9 @@ interface UrlParams {
 }
 
 export const LinkContent = ({
-  objectType,
   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" />

diff --git a/src/plugins/share/public/types.ts b/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;
   /**

diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
@@ -17,6 +17,8 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { getManagedContentBadge } from '@kbn/managed-content-badge';
 import moment from 'moment';
+import { EuiCallOut } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { LENS_APP_LOCATOR } from '../../common/locator/locator';
 import { LENS_APP_NAME } from '../../common/constants';
 import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types';
@@ -634,6 +636,26 @@ export const LensTopNavMenu = ({
                 title: i18n.translate('xpack.lens.app.shareModal.title', {
                   defaultMessage: 'Share this Lens visualization',
                 }),
+                config: {
+                  link: {
+                    draftModeCallOut: (
+                      <EuiCallOut
+                        color="warning"
+                        title={
+                          <FormattedMessage
+                            id="xpack.lens.app.shareModal.draftModeCallout.title"
+                            defaultMessage="Unsaved changes"
+                          />
+                        }
+                      >
+                        <FormattedMessage
+                          id="xpack.lens.app.shareModal.draftModeCallout.link.warning"
+                          defaultMessage="Copy the link to get a temporary link. Save the lens visualization to create a permanent link."
+                        />
+                      </EuiCallOut>
+                    ),
+                  },
+                },
               },
               sharingData,
               // only want to know about changes when savedObjectURL.href

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -7153,8 +7153,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.",
@@ -24855,6 +24853,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.",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6907,8 +6907,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が変更されることがあります。",
@@ -24603,6 +24601,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": "複数レイヤーのビジュアライゼーションでは、基本データを表示できません",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6922,8 +6922,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 可能会发生更改。",
@@ -24637,6 +24635,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": "无法显示具有多个图层的可视化的底层数据",