From 08fbbb4895196bcf7b75de2a4a20d228e9d357d6 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Wed, 23 Oct 2024 15:29:35 -0500 Subject: [PATCH] [Share] Cleanup share model UI and warning logic (#196401) cleanup share modal UI with better context around warnings and styles (cherry picked from commit 67de9246a7d0f718e7aa97d8edbf569597964ebf) --- .../register_pdf_png_modal_reporting.tsx | 21 ---- .../components/tabs/export/export_content.tsx | 98 +++++++++++++------ .../components/tabs/link/link_content.tsx | 1 + src/plugins/share/public/types.ts | 3 +- .../csv_download_panel_content.tsx | 52 ---------- .../csv_download_panel_content_lazy.tsx | 39 -------- .../csv_download_provider.tsx | 58 +++++------ .../translations/translations/fr-FR.json | 10 +- .../translations/translations/ja-JP.json | 10 +- .../translations/translations/zh-CN.json | 10 +- 10 files changed, 101 insertions(+), 201 deletions(-) delete mode 100644 x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content.tsx delete mode 100644 x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content_lazy.tsx diff --git a/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx b/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx index 949e7bc593072..54ced9511d103 100644 --- a/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx +++ b/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx @@ -237,18 +237,6 @@ export const reportingExportModalProvider = ({ generateExportUrl: generateExportUrlPDF, reportType: 'printablePdfV2', requiresSavedState, - helpText: ( - - ), - generateExportButton: ( - - ), layoutOption: objectType === 'dashboard' ? ('print' as const) : undefined, renderLayoutOptionSwitch: objectType === 'dashboard', renderCopyURLButton: true, @@ -268,15 +256,6 @@ export const reportingExportModalProvider = ({ generateExportUrl: generateExportUrlPNG, reportType: 'pngV2', requiresSavedState, - helpText: ( - - ), - generateExportButton: ( - - ), layoutOption: objectType === 'dashboard' ? ('print' as const) : undefined, renderCopyURLButton: true, }); diff --git a/src/plugins/share/public/components/tabs/export/export_content.tsx b/src/plugins/share/public/components/tabs/export/export_content.tsx index 109014d7784f5..a9638c5843d7c 100644 --- a/src/plugins/share/public/components/tabs/export/export_content.tsx +++ b/src/plugins/share/public/components/tabs/export/export_content.tsx @@ -48,11 +48,16 @@ const ExportContentUi = ({ const [usePrintLayout, setPrintLayout] = useState(false); const radioOptions = useMemo(() => { - return aggregateReportTypes - .filter(({ reportType }) => reportType) - .map(({ reportType, label }) => { - return { id: reportType, label, 'data-test-subj': `${reportType}-radioOption` }; - }) as EuiRadioGroupOption[]; + return aggregateReportTypes.reduce((acc, { reportType, label }) => { + if (reportType) { + acc.push({ + id: reportType, + label, + 'data-test-subj': `${reportType}-radioOption`, + }); + } + return acc; + }, []); }, [aggregateReportTypes]); const [selectedRadio, setSelectedRadio] = useState( @@ -62,6 +67,7 @@ const ExportContentUi = ({ const { generateExportButton, helpText, + warnings = [], renderCopyURLButton, generateExport, generateExportUrl, @@ -168,42 +174,56 @@ const ExportContentUi = ({ return ( 0 ? 'warning' : 'primary'} onClick={getReport} data-test-subj="generateReportButton" isLoading={isCreatingExport} > - {generateExportButton} + {generateExportButton ?? ( + + )} ); - }, [generateExportButton, getReport, isCreatingExport, isDirty]); + }, [ + generateExportButton, + getReport, + isCreatingExport, + isDirty, + renderCopyURLButton, + warnings.length, + ]); const renderRadioOptions = () => { if (radioOptions.length > 1) { return ( - - setSelectedRadio(id as SupportedExportTypes)} - name="image reporting radio group" - idSelected={selectedRadio} - legend={{ - children: , - }} - /> - + <> + + + setSelectedRadio(id as SupportedExportTypes)} + name="image reporting radio group" + idSelected={selectedRadio} + legend={{ + children: , + }} + /> + + ); } }; - const renderHelpText = () => { - const showHelpText = publicAPIEnabled && isDirty; + const renderDirtyWarning = () => { return ( - showHelpText && ( + renderCopyURLButton && + publicAPIEnabled && + isDirty && ( <> - + } @@ -218,19 +238,35 @@ const ExportContentUi = ({ ); }; + const renderWarnings = (warning: { title: string; message: string }) => ( + <> + + + {warning.message} + + + ); + return ( <> - <>{helpText} - - <>{renderRadioOptions()} - {renderHelpText()} - + + {helpText ?? ( + + )} + + {renderRadioOptions()} + {renderDirtyWarning()} + {warnings.map(renderWarnings)} + - <>{renderLayoutOptionsSwitch()} - <>{showCopyURLButton()} - <>{renderGenerateReportButton()} + {renderLayoutOptionsSwitch()} + {showCopyURLButton()} + {renderGenerateReportButton()} ); diff --git a/src/plugins/share/public/components/tabs/link/link_content.tsx b/src/plugins/share/public/components/tabs/link/link_content.tsx index 389080cc37296..0871599a524ba 100644 --- a/src/plugins/share/public/components/tabs/link/link_content.tsx +++ b/src/plugins/share/public/components/tabs/link/link_content.tsx @@ -138,6 +138,7 @@ export const LinkContent = ({ } diff --git a/src/plugins/share/public/types.ts b/src/plugins/share/public/types.ts index 5c727dc2d299c..930b1b1d5f127 100644 --- a/src/plugins/share/public/types.ts +++ b/src/plugins/share/public/types.ts @@ -132,11 +132,12 @@ export interface ShareMenuItemV2 extends ShareMenuItemBase { layoutOption?: 'print'; generateCopyUrl?: URL; renderCopyURLButton?: boolean; + warnings?: Array<{ title: string; message: string }>; } export interface ShareMenuProviderV2 { readonly id: string; - getShareMenuItems: (context: ShareContext) => Array>; + getShareMenuItems: (context: ShareContext) => ShareMenuItemV2[]; } export interface ShareMenuProviderLegacy { readonly id: string; diff --git a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content.tsx b/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content.tsx deleted file mode 100644 index 0b877363ad55f..0000000000000 --- a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiButton, EuiForm, EuiModalFooter, EuiSpacer, EuiText } from '@elastic/eui'; -import React from 'react'; -import { FormattedMessage } from '@kbn/i18n-react'; - -export interface DownloadPanelContentProps { - isDisabled: boolean; - onClick: () => void; - warnings?: React.ReactNode[]; -} - -export function DownloadPanelContent({ - isDisabled, - onClick, - warnings = [], -}: DownloadPanelContentProps) { - return ( - <> - - - - {warnings.map((warning, i) => ( -

{warning}

- ))} - - - - - - - - - - ); -} diff --git a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content_lazy.tsx b/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content_lazy.tsx deleted file mode 100644 index dded4f4768a16..0000000000000 --- a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_panel_content_lazy.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; -import * as React from 'react'; -import { FC, lazy, Suspense } from 'react'; -import type { DownloadPanelContentProps } from './csv_download_panel_content'; - -const LazyComponent = lazy(() => - import('./csv_download_panel_content').then(({ DownloadPanelContent }) => ({ - default: DownloadPanelContent, - })) -); - -export const PanelSpinner: React.FC = (props) => { - return ( - <> - - - - - - - - - ); -}; - -export const DownloadPanelContent: FC> = (props) => { - return ( - }> - - - ); -}; diff --git a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_provider.tsx b/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_provider.tsx index db04a48ad3803..92aadcbbb3997 100644 --- a/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_provider.tsx +++ b/x-pack/plugins/lens/public/app_plugin/csv_download_provider/csv_download_provider.tsx @@ -8,10 +8,11 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { tableHasFormulas } from '@kbn/data-plugin/common'; -import { downloadMultipleAs, ShareContext, ShareMenuProvider } from '@kbn/share-plugin/public'; +import { downloadMultipleAs } from '@kbn/share-plugin/public'; import { exporters } from '@kbn/data-plugin/public'; import { IUiSettingsClient } from '@kbn/core-ui-settings-browser'; import { FormattedMessage } from '@kbn/i18n-react'; +import { ShareMenuItemV2, ShareMenuProviderV2 } from '@kbn/share-plugin/public/types'; import { FormatFactory } from '../../../common/types'; import { TableInspectorAdapter } from '../../editor_frame_service/types'; @@ -75,22 +76,25 @@ async function downloadCSVs({ } function getWarnings(activeData: TableInspectorAdapter) { - const messages: string[] = []; + const warnings: Array<{ title: string; message: string }> = []; if (activeData) { const datatables = Object.values(activeData); const formulaDetected = datatables.some((datatable) => { return tableHasFormulas(datatable.columns, datatable.rows); }); if (formulaDetected) { - messages.push( - i18n.translate('xpack.lens.app.downloadButtonFormulasWarning', { + warnings.push({ + title: i18n.translate('xpack.lens.app.downloadButtonFormulasWarningTitle', { + defaultMessage: 'Formulas detected', + }), + message: i18n.translate('xpack.lens.app.downloadButtonFormulasWarningMessage', { defaultMessage: 'Your CSV contains characters that spreadsheet applications might interpret as formulas.', - }) - ); + }), + }); } } - return messages; + return warnings; } interface DownloadPanelShareOpts { @@ -103,8 +107,11 @@ export const downloadCsvShareProvider = ({ uiSettings, formatFactoryFn, atLeastGold, -}: DownloadPanelShareOpts): ShareMenuProvider => { - const getShareMenuItems = ({ objectType, sharingData }: ShareContext) => { +}: DownloadPanelShareOpts): ShareMenuProviderV2 => { + const getShareMenuItems: ShareMenuProviderV2['getShareMenuItems'] = ({ + objectType, + sharingData, + }) => { if ('lens' !== objectType) { return []; } @@ -123,15 +130,6 @@ export const downloadCsvShareProvider = ({ } ); - const menuItemMetadata = { - shareMenuItem: { - name: panelTitle, - icon: 'document', - disabled: !csvEnabled, - sortOrder: 1, - }, - }; - const downloadCSVHandler = () => downloadCSVs({ title, @@ -143,28 +141,23 @@ export const downloadCsvShareProvider = ({ return [ { - ...menuItemMetadata, + shareMenuItem: { + name: panelTitle, + icon: 'document', + disabled: !csvEnabled, + sortOrder: 1, + }, label: 'CSV' as const, reportType: 'lens_csv' as const, generateExport: downloadCSVHandler, + warnings: getWarnings(activeData), ...(atLeastGold() ? { - helpText: ( - - ), - generateExportButton: ( - - ), + disabled: !csvEnabled, renderLayoutOptionSwitch: false, getJobParams: undefined, - showRadios: true, } : { - isDisabled: !csvEnabled, - warnings: getWarnings(activeData), helpText: ( ), - showRadios: false, }), - }, + } satisfies ShareMenuItemV2, ]; }; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index b8a26c2dea89e..e2ee4e5db5ecb 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -6109,10 +6109,6 @@ "reporting.jobWarning.csvContainsFormulas": "Votre fichier CSV contient des caractères que les applications de feuilles de calcul pourraient considérer comme des formules.", "reporting.jobWarning.exportTypeDeprecated": "Il s'agit d'un type d'exportation déclassé. L'automatisation de ce rapport devra être à nouveau créée pour une question de compatibilité avec les futures versions de Kibana.", "reporting.jobWarning.maxSizeReachedTooltip": "Votre recherche a atteint la taille maximale et contient des données partielles.", - "reporting.pngV2.generateButtonLabel": "Exporter un fichier", - "reporting.pngV2.helpText": "Sélectionnez le type de fichier que vous souhaitez exporter pour cette visualisation.", - "reporting.printablePdfV2.generateButtonLabel": "Exporter un fichier", - "reporting.printablePdfV2.helpText": "Sélectionnez le type de fichier que vous souhaitez exporter pour cette visualisation.", "reporting.share.contextMenu.export.csvReportsButtonLabel": "Exporter", "reporting.share.csv.reporting.helpTextCSV": "Exporter un fichier CSV à partir de ce {objectType}.", "reporting.share.generateButtonLabelCSV": "Générer un CSV", @@ -7150,6 +7146,8 @@ "share.dashboard.link.description": "Partagez un lien direct avec cette recherche.", "share.embed.dashboard.helpText": "Intégrez ce tableau de bord dans une autre page web. Sélectionnez les éléments à inclure dans la vue intégrable.", "share.embed.helpText": "Intégrez ce {objectType} dans une autre page web.", + "share.export.generateButtonLabel": "Exporter un fichier", + "share.export.helpText": "Sélectionnez le type de fichier que vous souhaitez exporter pour cette visualisation.", "share.fileType": "Type de fichier", "share.link.copied": "Texte copié", "share.link.copyEmbedCodeButton": "Copier le code intégré", @@ -24835,7 +24833,6 @@ "xpack.lens.app.convertedLabel": "{title} (converti)", "xpack.lens.app.createVisualizationLabel": "ES|QL", "xpack.lens.app.docLoadingError": "Erreur lors du chargement du document enregistré", - "xpack.lens.app.downloadButtonFormulasWarning": "Votre fichier CSV contient des caractères que les applications de feuilles de calcul pourraient considérer comme des formules.", "xpack.lens.app.editLensEmbeddableLabel": "Modifier la visualisation", "xpack.lens.app.editVisualizationLabel": "Modifier la visualisation {lang}", "xpack.lens.app.exploreDataInDiscover": "Explorer dans Discover", @@ -24875,7 +24872,6 @@ "xpack.lens.app.unsavedWorkTitle": "Modifications non enregistrées", "xpack.lens.app.updatePanel": "Mettre à jour le panneau sur {originatingAppName}", "xpack.lens.app404": "404 Page introuvable", - "xpack.lens.application.csvPanelContent.downloadButtonLabel": "Générer un CSV", "xpack.lens.application.csvPanelContent.generationDescription": "Téléchargez les données affichées dans la visualisation.", "xpack.lens.appName": "Visualisation Lens", "xpack.lens.axisExtent.axisExtent.custom": "Personnalisé", @@ -25629,8 +25625,6 @@ "xpack.lens.settings.title": "Paramètres Lens", "xpack.lens.settingWithSiblingFlyout.back": "Retour", "xpack.lens.share.csvButton": "Télécharger CSV", - "xpack.lens.share.export": "Exporter un fichier", - "xpack.lens.share.helpText": "Exportez un CVS de cette visualisation.", "xpack.lens.shared.axisNameLabel": "Titre de l'axe", "xpack.lens.shared.labelTruncation": "Troncature d'étiquette", "xpack.lens.shared.Lagend ": "Ligne d'en-tête", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 0718df2993175..58b477f1a870d 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -5863,10 +5863,6 @@ "reporting.jobWarning.csvContainsFormulas": "CSVには、スプレッドシートアプリケーションで式と解釈される可能性のある文字が含まれています。", "reporting.jobWarning.exportTypeDeprecated": "これは廃止予定のエクスポートタイプです。将来のバージョンのKibanaとの互換性のためには、このレポートの自動化を再作成する必要があります。", "reporting.jobWarning.maxSizeReachedTooltip": "レポートが最大サイズに達し、部分データが含まれています。", - "reporting.pngV2.generateButtonLabel": "ファイルのエクスポート", - "reporting.pngV2.helpText": "このビジュアライゼーションでエクスポートするファイルタイプを選択します。", - "reporting.printablePdfV2.generateButtonLabel": "ファイルのエクスポート", - "reporting.printablePdfV2.helpText": "このビジュアライゼーションでエクスポートするファイルタイプを選択します。", "reporting.share.contextMenu.export.csvReportsButtonLabel": "エクスポート", "reporting.share.csv.reporting.helpTextCSV": "この{objectType}のCSVをエクスポートします。", "reporting.share.generateButtonLabelCSV": "CSVを生成", @@ -6904,6 +6900,8 @@ "share.dashboard.link.description": "この検索への直接リンクを共有します。", "share.embed.dashboard.helpText": "このダッシュボードを別のWebページに埋め込みます。埋め込み可能なビューに含める項目を選択します。", "share.embed.helpText": "この{objectType}を別のWebページに埋め込みます。", + "share.export.generateButtonLabel": "ファイルのエクスポート", + "share.export.helpText": "このビジュアライゼーションでエクスポートするファイルタイプを選択します。", "share.fileType": "ファイルタイプ", "share.link.copied": "テキストがコピーされました", "share.link.copyEmbedCodeButton": "埋め込みコードをコピー", @@ -24582,7 +24580,6 @@ "xpack.lens.app.convertedLabel": "{title}（変換後）", "xpack.lens.app.createVisualizationLabel": "ES|QL", "xpack.lens.app.docLoadingError": "保存されたドキュメントの保存中にエラーが発生", - "xpack.lens.app.downloadButtonFormulasWarning": "CSVには、スプレッドシートアプリケーションで式と解釈される可能性のある文字が含まれています。", "xpack.lens.app.editLensEmbeddableLabel": "ビジュアライゼーションを編集", "xpack.lens.app.editVisualizationLabel": "{lang}ビジュアライゼーションを編集", "xpack.lens.app.exploreDataInDiscover": "Discoverで探索", @@ -24623,7 +24620,6 @@ "xpack.lens.app.unsavedWorkTitle": "保存されていない変更", "xpack.lens.app.updatePanel": "{originatingAppName}でパネルを更新", "xpack.lens.app404": "404 Not Found", - "xpack.lens.application.csvPanelContent.downloadButtonLabel": "CSVを生成", "xpack.lens.application.csvPanelContent.generationDescription": "ビジュアライゼーションに表示されるデータをダウンロードします。", "xpack.lens.appName": "Lensビジュアライゼーション", "xpack.lens.axisExtent.axisExtent.custom": "カスタム", @@ -25376,8 +25372,6 @@ "xpack.lens.settings.title": "Lens設定", "xpack.lens.settingWithSiblingFlyout.back": "戻る", "xpack.lens.share.csvButton": "CSV をダウンロード", - "xpack.lens.share.export": "ファイルのエクスポート", - "xpack.lens.share.helpText": "このビジュアライゼーションのCSVをエクスポートします。", "xpack.lens.shared.axisNameLabel": "軸のタイトル", "xpack.lens.shared.labelTruncation": "ラベルの切り捨て", "xpack.lens.shared.Lagend ": "系列ヘッダー", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 9dbe4c00d09bd..f653524df865d 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -5876,10 +5876,6 @@ "reporting.jobWarning.csvContainsFormulas": "您的 CSV 包含电子表格应用程序可能解释为公式的字符。", "reporting.jobWarning.exportTypeDeprecated": "这是已弃用的导出类型。此报告的自动化将需要重新创建，才能与未来版本的 Kibana 兼容。", "reporting.jobWarning.maxSizeReachedTooltip": "您的搜索已达到最大大小，仅包含部分数据。", - "reporting.pngV2.generateButtonLabel": "导出文件", - "reporting.pngV2.helpText": "为此可视化选择您要导出的文件类型。", - "reporting.printablePdfV2.generateButtonLabel": "导出文件", - "reporting.printablePdfV2.helpText": "为此可视化选择您要导出的文件类型。", "reporting.share.contextMenu.export.csvReportsButtonLabel": "导出", "reporting.share.csv.reporting.helpTextCSV": "导出此 {objectType} 的 CSV。", "reporting.share.generateButtonLabelCSV": "生成 CSV", @@ -6919,6 +6915,8 @@ "share.dashboard.link.description": "共享指向此搜索的直接链接。", "share.embed.dashboard.helpText": "将此仪表板嵌入到其他网页。选择要在可嵌入视图中包括哪些项目。", "share.embed.helpText": "将此 {objectType} 嵌入到其他网页。", + "share.export.generateButtonLabel": "导出文件", + "share.export.helpText": "为此可视化选择您要导出的文件类型。", "share.fileType": "文件类型", "share.link.copied": "文本已复制", "share.link.copyEmbedCodeButton": "复制嵌入代码", @@ -24616,7 +24614,6 @@ "xpack.lens.app.convertedLabel": "{title}（已转换）", "xpack.lens.app.createVisualizationLabel": "ES|QL", "xpack.lens.app.docLoadingError": "加载已保存文档时出错", - "xpack.lens.app.downloadButtonFormulasWarning": "您的 CSV 包含电子表格应用程序可能解释为公式的字符。", "xpack.lens.app.editLensEmbeddableLabel": "编辑可视化", "xpack.lens.app.editVisualizationLabel": "编辑 {lang} 可视化", "xpack.lens.app.exploreDataInDiscover": "在 Discover 中浏览", @@ -24657,7 +24654,6 @@ "xpack.lens.app.unsavedWorkTitle": "未保存的更改", "xpack.lens.app.updatePanel": "更新 {originatingAppName} 中的面板", "xpack.lens.app404": "404 找不到", - "xpack.lens.application.csvPanelContent.downloadButtonLabel": "生成 CSV", "xpack.lens.application.csvPanelContent.generationDescription": "下载在可视化中显示的数据。", "xpack.lens.appName": "Lens 可视化", "xpack.lens.axisExtent.axisExtent.custom": "定制", @@ -25411,8 +25407,6 @@ "xpack.lens.settings.title": "Lens 设置", "xpack.lens.settingWithSiblingFlyout.back": "返回", "xpack.lens.share.csvButton": "下载 CSV", - "xpack.lens.share.export": "导出文件", - "xpack.lens.share.helpText": "导出此可视化的 CSV。", "xpack.lens.shared.axisNameLabel": "轴标题", "xpack.lens.shared.labelTruncation": "标签截断", "xpack.lens.shared.Lagend ": "序列标题",