elastic · stratoula · Apr 19, 2022 · Apr 18, 2022 · Apr 18, 2022
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
@@ -509,6 +509,7 @@ Enables the legacy time axis for charts in Lens, Discover, Visualize and TSVB
 The maximum number of buckets a datasource can return. High numbers can have a negative impact on your browser rendering performance.
 
 [[visualization-visualize-pieChartslibrary]]`visualization:visualize:legacyPieChartsLibrary`::
+**The legacy pie charts are deprecated and will not be supported in a future version.**
 The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use the legacy charts library.
 
 [[visualization-visualize-heatmapChartslibrary]]`visualization:visualize:legacyHeatmapChartsLibrary`::

diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers';
 import { VisualizeEditorCommon } from './visualize_editor_common';
 import { VisualizeEditorVisInstance } from '../types';
-import { SplitChartWarning } from './split_chart_warning';
+import { VizChartWarning } from './viz_chart_warning';
 
 const mockGetLegacyUrlConflict = jest.fn();
 const mockRedirectLegacyUrl = jest.fn(() => Promise.resolve());
@@ -42,7 +42,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => ({
 
 jest.mock('../../services', () => ({
   getUISettings: jest.fn(() => ({
-    get: jest.fn(),
+    get: jest.fn((token) => Boolean(token === 'visualization:visualize:legacyPieChartsLibrary')),
   })),
 }));
 
@@ -157,7 +157,7 @@ describe('VisualizeEditorCommon', () => {
         }
       />
     );
-    expect(wrapper.find(SplitChartWarning).length).toBe(1);
+    expect(wrapper.find(VizChartWarning).length).toBe(1);
   });
 
   it('should not display a warning callout for XY charts with split aggs', async () => {
@@ -198,6 +198,47 @@ describe('VisualizeEditorCommon', () => {
         }
       />
     );
-    expect(wrapper.find(SplitChartWarning).length).toBe(0);
+    expect(wrapper.find(VizChartWarning).length).toBe(0);
+  });
+
+  it('should display a warning callout for old pie implementation', async () => {
+    const wrapper = shallowWithIntl(
+      <VisualizeEditorCommon
+        appState={null}
+        hasUnsavedChanges={false}
+        setHasUnsavedChanges={() => {}}
+        hasUnappliedChanges={false}
+        isEmbeddableRendered={false}
+        onAppLeave={() => {}}
+        visEditorRef={React.createRef()}
+        visInstance={
+          {
+            savedVis: {
+              id: 'test',
+              sharingSavedObjectProps: {
+                outcome: 'conflict',
+                aliasTargetId: 'alias_id',
+              },
+            },
+            vis: {
+              type: {
+                title: 'pie',
+                name: 'pie',
+              },
+              data: {
+                aggs: {
+                  aggs: [
+                    {
+                      schema: 'buckets',
+                    },
+                  ],
+                },
+              },
+            },
+          } as unknown as VisualizeEditorVisInstance
+        }
+      />
+    );
+    expect(wrapper.find(VizChartWarning).length).toBe(1);
   });
 });
diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.tsx
@@ -17,7 +17,7 @@ import { VisualizeTopNav } from './visualize_top_nav';
 import { ExperimentalVisInfo } from './experimental_vis_info';
 import { urlFor } from '../..';
 import { getUISettings } from '../../services';
-import { SplitChartWarning } from './split_chart_warning';
+import { VizChartWarning } from './viz_chart_warning';
 import {
   SavedVisInstance,
   VisualizeAppState,
@@ -28,6 +28,7 @@ import {
 import {
   CHARTS_CONFIG_TOKENS,
   CHARTS_WITHOUT_SMALL_MULTIPLES,
+  CHARTS_TO_BE_DEPRECATED,
   isSplitChart as isSplitChartFn,
 } from '../utils/split_chart_warning_helpers';
 
@@ -121,8 +122,10 @@ export const VisualizeEditorCommon = ({
 
   const chartsWithoutSmallMultiples: string[] = Object.values(CHARTS_WITHOUT_SMALL_MULTIPLES);
   const chartNeedsWarning = chartName ? chartsWithoutSmallMultiples.includes(chartName) : false;
+  const deprecatedCharts: string[] = Object.values(CHARTS_TO_BE_DEPRECATED);
+  const deprecatedChartsNeedWarning = chartName ? deprecatedCharts.includes(chartName) : false;
   const chartToken =
-    chartName && chartNeedsWarning
+    chartName && (chartNeedsWarning || deprecatedChartsNeedWarning)
       ? CHARTS_CONFIG_TOKENS[chartName as CHARTS_WITHOUT_SMALL_MULTIPLES]
       : undefined;
 
@@ -150,11 +153,18 @@ export const VisualizeEditorCommon = ({
       )}
       {visInstance?.vis?.type?.stage === 'experimental' && <ExperimentalVisInfo />}
       {!hasLegacyChartsEnabled && isSplitChart && chartNeedsWarning && chartToken && chartName && (
-        <SplitChartWarning
+        <VizChartWarning
           chartType={chartName as CHARTS_WITHOUT_SMALL_MULTIPLES}
           chartConfigToken={chartToken}
         />
       )}
+      {hasLegacyChartsEnabled && deprecatedChartsNeedWarning && chartToken && chartName && (
+        <VizChartWarning
+          chartType={chartName as CHARTS_TO_BE_DEPRECATED}
+          chartConfigToken={chartToken}
+          mode="new"
+        />
+      )}
       {visInstance?.vis?.type?.getInfoMessage?.(visInstance.vis)}
       {getLegacyUrlConflictCallout()}
       {visInstance && (

diff --git a/...ze_app/components/split_chart_warning.tsx → ...lize_app/components/viz_chart_warning.tsx b/...ze_app/components/split_chart_warning.tsx → ...lize_app/components/viz_chart_warning.tsx
@@ -8,32 +8,42 @@
 
 import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import { EuiCallOut, EuiLink } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { VisualizeServices } from '../types';
-import { CHARTS_WITHOUT_SMALL_MULTIPLES } from '../utils/split_chart_warning_helpers';
-import type { CHARTS_WITHOUT_SMALL_MULTIPLES as CHART_WITHOUT_SMALL_MULTIPLES } from '../utils/split_chart_warning_helpers';
+import {
+  CHARTS_WITHOUT_SMALL_MULTIPLES,
+  CHARTS_TO_BE_DEPRECATED,
+} from '../utils/split_chart_warning_helpers';
+import type {
+  CHARTS_WITHOUT_SMALL_MULTIPLES as CHART_WITHOUT_SMALL_MULTIPLES,
+  CHARTS_TO_BE_DEPRECATED as CHART_TO_BE_DEPRECATED,
+} from '../utils/split_chart_warning_helpers';
 
 interface Props {
-  chartType: CHART_WITHOUT_SMALL_MULTIPLES;
+  chartType: CHART_WITHOUT_SMALL_MULTIPLES | CHART_TO_BE_DEPRECATED;
   chartConfigToken: string;
+  mode?: 'old' | 'new';
 }
 
 interface WarningMessageProps {
   canEditAdvancedSettings: boolean | Readonly<{ [x: string]: boolean }>;
   advancedSettingsLink: string;
+  mode?: 'old' | 'new';
 }
 
 const SwitchToOldLibraryMessage: FC<WarningMessageProps> = ({
   canEditAdvancedSettings,
   advancedSettingsLink,
+  mode = 'old',
 }) => {
   return (
     <>
       {canEditAdvancedSettings && (
         <FormattedMessage
           id="visualizations.newChart.conditionalMessage.newLibrary"
-          defaultMessage="Switch to the old library in {link}"
+          defaultMessage="Switch to the {type} library in {link}"
           values={{
             link: (
               <EuiLink href={advancedSettingsLink}>
@@ -43,6 +53,14 @@ const SwitchToOldLibraryMessage: FC<WarningMessageProps> = ({
                 />
               </EuiLink>
             ),
+            type:
+              mode === 'old'
+                ? i18n.translate('visualizations.newChart.libraryMode.old', {
+                    defaultMessage: 'old',
+                  })
+                : i18n.translate('visualizations.newChart.libraryMode.new', {
+                    defaultMessage: 'new',
+                  }),
           }}
         />
       )}
@@ -97,12 +115,30 @@ const HeatmapWarningFormatMessage: FC<WarningMessageProps> = (props) => {
   );
 };
 
+const PieWarningFormatMessage: FC<WarningMessageProps> = (props) => {
+  return (
+    <FormattedMessage
+      id="visualizations.oldPieChart.notificationMessage"
+      defaultMessage="You are using the legacy charts library, which will be removed in a future version. {conditionalMessage}"
+      values={{
+        conditionalMessage: (
+          <>
+            <SwitchToOldLibraryMessage {...props} />
+            <ContactAdminMessage {...props} />
+          </>
+        ),
+      }}
+    />
+  );
+};
+
 const warningMessages = {
   [CHARTS_WITHOUT_SMALL_MULTIPLES.heatmap]: HeatmapWarningFormatMessage,
   [CHARTS_WITHOUT_SMALL_MULTIPLES.gauge]: GaugeWarningFormatMessage,
+  [CHARTS_TO_BE_DEPRECATED.pie]: PieWarningFormatMessage,
 };
 
-export const SplitChartWarning: FC<Props> = ({ chartType, chartConfigToken }) => {
+export const VizChartWarning: FC<Props> = ({ chartType, chartConfigToken, mode }) => {
   const { services } = useKibana<VisualizeServices>();
   const canEditAdvancedSettings = services.application.capabilities.advancedSettings.save;
   const advancedSettingsLink = services.application.getUrlForApp('management', {
@@ -112,11 +148,12 @@ export const SplitChartWarning: FC<Props> = ({ chartType, chartConfigToken }) =>
   const WarningMessage = warningMessages[chartType];
   return (
     <EuiCallOut
-      data-test-subj="vizSplitChartWarning"
+      data-test-subj="vizChartWarning"
       title={
         <WarningMessage
           advancedSettingsLink={advancedSettingsLink}
           canEditAdvancedSettings={canEditAdvancedSettings}
+          mode={mode}
         />
       }
       iconType="alert"

diff --git a/src/plugins/visualizations/public/visualize_app/constants.ts b/src/plugins/visualizations/public/visualize_app/constants.ts
@@ -8,3 +8,4 @@
 
 export const NEW_HEATMAP_CHARTS_LIBRARY = 'visualization:visualize:legacyHeatmapChartsLibrary';
 export const NEW_GAUGE_CHARTS_LIBRARY = 'visualization:visualize:legacyGaugeChartsLibrary';
+export const NEW_PIE_CHARTS_LIBRARY = 'visualization:visualize:legacyPieChartsLibrary';
diff --git a/src/plugins/visualizations/public/visualize_app/utils/split_chart_warning_helpers.ts b/src/plugins/visualizations/public/visualize_app/utils/split_chart_warning_helpers.ts
@@ -8,18 +8,28 @@
 
 import { $Values } from '@kbn/utility-types';
 import { AggConfigs } from '@kbn/data-plugin/common';
-import { NEW_HEATMAP_CHARTS_LIBRARY, NEW_GAUGE_CHARTS_LIBRARY } from '../constants';
+import {
+  NEW_HEATMAP_CHARTS_LIBRARY,
+  NEW_GAUGE_CHARTS_LIBRARY,
+  NEW_PIE_CHARTS_LIBRARY,
+} from '../constants';
 
 export const CHARTS_WITHOUT_SMALL_MULTIPLES = {
   heatmap: 'heatmap',
   gauge: 'gauge',
 } as const;
 
+export const CHARTS_TO_BE_DEPRECATED = {
+  pie: 'pie',
+} as const;
+
 export type CHARTS_WITHOUT_SMALL_MULTIPLES = $Values<typeof CHARTS_WITHOUT_SMALL_MULTIPLES>;
+export type CHARTS_TO_BE_DEPRECATED = $Values<typeof CHARTS_TO_BE_DEPRECATED>;
 
 export const CHARTS_CONFIG_TOKENS = {
   [CHARTS_WITHOUT_SMALL_MULTIPLES.heatmap]: NEW_HEATMAP_CHARTS_LIBRARY,
   [CHARTS_WITHOUT_SMALL_MULTIPLES.gauge]: NEW_GAUGE_CHARTS_LIBRARY,
+  [CHARTS_TO_BE_DEPRECATED.pie]: NEW_PIE_CHARTS_LIBRARY,
 } as const;
 
 export const isSplitChart = (chartType: string | undefined, aggs?: AggConfigs) => {

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6411,7 +6411,6 @@
     "visualizations.listing.table.typeColumnName": "型",
     "visualizations.listingPageTitle": "Visualizeライブラリ",
     "visualizations.newChart.conditionalMessage.advancedSettingsLink": "高度な設定",
-    "visualizations.newChart.conditionalMessage.newLibrary": "{link}で古いライブラリに切り替える",
     "visualizations.newHeatmapChart.notificationMessage": "新しいヒートマップグラフライブラリはまだ分割グラフアグリゲーションをサポートしていません。{conditionalMessage}",
     "visualizations.newVisWizard.aggBasedGroupDescription": "クラシック Visualize ライブラリを使用して、アグリゲーションに基づいてグラフを作成します。",
     "visualizations.newVisWizard.aggBasedGroupTitle": "アグリゲーションに基づく",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6420,7 +6420,6 @@
     "visualizations.listing.table.typeColumnName": "类型",
     "visualizations.listingPageTitle": "Visualize 库",
     "visualizations.newChart.conditionalMessage.advancedSettingsLink": "免费的 API 密钥。",
-    "visualizations.newChart.conditionalMessage.newLibrary": "切换到{link}中的旧库",
     "visualizations.newHeatmapChart.notificationMessage": "新的热图图表库尚不支持拆分图表聚合。{conditionalMessage}",
     "visualizations.newVisWizard.aggBasedGroupDescription": "使用我们的经典可视化库，基于聚合创建图表。",
     "visualizations.newVisWizard.aggBasedGroupTitle": "基于聚合",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,3 +8,4 @@

		export const NEW_HEATMAP_CHARTS_LIBRARY = 'visualization:visualize:legacyHeatmapChartsLibrary';
		export const NEW_GAUGE_CHARTS_LIBRARY = 'visualization:visualize:legacyGaugeChartsLibrary';
		export const NEW_PIE_CHARTS_LIBRARY = 'visualization:visualize:legacyPieChartsLibrary';