[Vislib XY axis] Adds a deprecation notice in the UI and a docs secti…

…on (#105055) * [Vislib XY axis] Adds a deprecation notice in the UI and a docs section * Remove cyclic dependency * Fix link * Add functional test * fix functional tests * Apply PR comments * Update docs/user/dashboard/aggregation-based.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Apply PR changes * minor * Change the implementation * Use title calse in Advanced Settings Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
elastic · Jul 20, 2021 · 8b2ceae · 8b2ceae
1 parent 1f5be1e
commit 8b2ceae
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 32 deletions.
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
@@ -480,10 +480,11 @@ of buckets to try to represent.
 
 [horizontal]
 [[visualization-visualize-chartslibrary]]`visualization:visualize:legacyChartsLibrary`::
-Enables the legacy charts library for aggregation-based area, line, and bar charts in *Visualize*.
+**The legacy XY charts are deprecated and will not be supported as of 7.16.**
+The visualize editor uses a new XY charts library with improved performance, color palettes, fill capacity, and more. Enable this option if you prefer to use the legacy charts library.
 
 [[visualization-visualize-pieChartslibrary]]`visualization:visualize:legacyPieChartsLibrary`::
-Enables the legacy charts library for aggregation-based pie charts in *Visualize*.
+The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use to the legacy charts library.
 
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**

diff --git a/docs/user/dashboard/aggregation-based.asciidoc b/docs/user/dashboard/aggregation-based.asciidoc
@@ -178,4 +178,3 @@ image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data]
 
 
 
-
diff --git a/src/plugins/visualize/public/application/components/deprecation_vis_warning.tsx b/src/plugins/visualize/public/application/components/deprecation_vis_warning.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { useKibana } from '../../../../kibana_react/public';
+import { VisualizeServices } from '../types';
+
+export const LEGACY_CHARTS_LIBRARY = 'visualization:visualize:legacyChartsLibrary';
+
+export const DeprecationWarning = () => {
+  const { services } = useKibana<VisualizeServices>();
+  const canEditAdvancedSettings = services.application.capabilities.advancedSettings.save;
+  const advancedSettingsLink = services.application.getUrlForApp('management', {
+    path: `/kibana/settings?query=${LEGACY_CHARTS_LIBRARY}`,
+  });
+
+  return (
+    <EuiCallOut
+      data-test-subj="vizDeprecationWarning"
+      title={
+        <FormattedMessage
+          id="visualize.legacyCharts.notificationMessage"
+          defaultMessage="You are using the legacy charts library, which will be removed in 7.16. {conditionalMessage}"
+          values={{
+            conditionalMessage: (
+              <>
+                {canEditAdvancedSettings && (
+                  <FormattedMessage
+                    id="visualize.legacyCharts.conditionalMessage.newLibrary"
+                    defaultMessage="Switch to the new library in {link}"
+                    values={{
+                      link: (
+                        <EuiLink href={advancedSettingsLink}>
+                          <FormattedMessage
+                            id="visualize.legacyCharts.conditionalMessage.advanced settings link"
+                            defaultMessage="Advanced Settings."
+                          />
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                )}
+                {!canEditAdvancedSettings && (
+                  <FormattedMessage
+                    id="visualize.legacyCharts.conditionalMessage.noPermissions"
+                    defaultMessage="Contact your system administrator to switch to the new library."
+                  />
+                )}
+              </>
+            ),
+          }}
+        />
+      }
+      iconType="alert"
+      color="warning"
+      size="s"
+    />
+  );
+};
diff --git a/src/plugins/visualize/public/application/components/visualize_editor_common.tsx b/src/plugins/visualize/public/application/components/visualize_editor_common.tsx
@@ -13,12 +13,14 @@ import { EuiScreenReaderOnly } from '@elastic/eui';
 import { AppMountParameters } from 'kibana/public';
 import { VisualizeTopNav } from './visualize_top_nav';
 import { ExperimentalVisInfo } from './experimental_vis_info';
+import { DeprecationWarning, LEGACY_CHARTS_LIBRARY } from './deprecation_vis_warning';
 import {
   SavedVisInstance,
   VisualizeAppState,
   VisualizeAppStateContainer,
   VisualizeEditorVisInstance,
 } from '../types';
+import { getUISettings } from '../../services';
 
 interface VisualizeEditorCommonProps {
   visInstance?: VisualizeEditorVisInstance;
@@ -37,6 +39,13 @@ interface VisualizeEditorCommonProps {
   embeddableId?: string;
 }
 
+const isXYAxis = (visType: string | undefined): boolean => {
+  if (!visType) {
+    return false;
+  }
+  return ['area', 'line', 'histogram', 'horizontal_bar', 'point_series'].includes(visType);
+};
+
 export const VisualizeEditorCommon = ({
   visInstance,
   appState,
@@ -53,6 +62,7 @@ export const VisualizeEditorCommon = ({
   embeddableId,
   visEditorRef,
 }: VisualizeEditorCommonProps) => {
+  const hasXYLegacyChartsEnabled = getUISettings().get(LEGACY_CHARTS_LIBRARY);
   return (
     <div className={`app-container visEditor visEditor--${visInstance?.vis.type.name}`}>
       {visInstance && appState && currentAppState && (
@@ -73,6 +83,9 @@ export const VisualizeEditorCommon = ({
         />
       )}
       {visInstance?.vis?.type?.stage === 'experimental' && <ExperimentalVisInfo />}
+      {/* Adds a deprecation warning for vislib xy axis charts */}
+      {/* Should be removed when this issue is closed https://github.com/elastic/kibana/issues/103209 */}
+      {isXYAxis(visInstance?.vis.type.name) && hasXYLegacyChartsEnabled && <DeprecationWarning />}
       {visInstance?.vis?.type?.getInfoMessage?.(visInstance.vis)}
       {visInstance && (
         <EuiScreenReaderOnly>

diff --git a/src/plugins/visualize/public/services.ts b/src/plugins/visualize/public/services.ts
@@ -5,7 +5,6 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 import { createGetterSetter } from '../../../plugins/kibana_utils/public';
 
 import type { IUiSettingsClient } from '../../../core/public';

diff --git a/test/functional/apps/visualize/_area_chart.ts b/test/functional/apps/visualize/_area_chart.ts
@@ -94,6 +94,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.visChart.waitForVisualization();
     });
 
+    // Should be removed when this issue is closed https://github.com/elastic/kibana/issues/103209
+    it('should show/hide a deprecation warning depending on the library selected', async () => {
+      await PageObjects.visualize.getDeprecationWarningStatus();
+    });
+
     it('should have inspector enabled', async function () {
       await inspector.expectIsEnabled();
     });

diff --git a/test/functional/apps/visualize/_line_chart_split_series.ts b/test/functional/apps/visualize/_line_chart_split_series.ts
@@ -207,19 +207,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = await PageObjects.visChart.getExpectedValue(
-          [
-            '0',
-            '1,000',
-            '2,000',
-            '3,000',
-            '4,000',
-            '5,000',
-            '6,000',
-            '7,000',
-            '8,000',
-            '9,000',
-            '10,000',
-          ],
+          ['0', '2,000', '4,000', '6,000', '8,000', '10,000'],
           ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
         );
         expect(labels).to.eql(expectedLabels);
@@ -230,7 +218,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = await PageObjects.visChart.getExpectedValue(
-          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['2,000', '4,000', '6,000', '8,000'],
           ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
         );
         expect(labels).to.eql(expectedLabels);
@@ -243,19 +231,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const labels = await PageObjects.visChart.getYAxisLabels();
         log.debug(labels);
         const expectedLabels = await PageObjects.visChart.getExpectedValue(
-          [
-            '0',
-            '1,000',
-            '2,000',
-            '3,000',
-            '4,000',
-            '5,000',
-            '6,000',
-            '7,000',
-            '8,000',
-            '9,000',
-            '10,000',
-          ],
+          ['0', '2,000', '4,000', '6,000', '8,000', '10,000'],
           ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
         );
         expect(labels).to.eql(expectedLabels);
@@ -266,7 +242,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.visEditor.clickGo();
         const labels = await PageObjects.visChart.getYAxisLabels();
         const expectedLabels = await PageObjects.visChart.getExpectedValue(
-          ['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
+          ['2,000', '4,000', '6,000', '8,000'],
           ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
         );
         expect(labels).to.eql(expectedLabels);

diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts
@@ -451,6 +451,14 @@ export class VisualizePageObject extends FtrService {
     await this.testSubjects.click('visualizesaveAndReturnButton');
   }
 
+  public async getDeprecationWarningStatus() {
+    if (await this.visChart.isNewChartsLibraryEnabled()) {
+      await this.testSubjects.missingOrFail('vizDeprecationWarning');
+    } else {
+      await this.testSubjects.existOrFail('vizDeprecationWarning');
+    }
+  }
+
   public async linkedToOriginatingApp() {
     await this.header.waitUntilLoadingHasFinished();
     await this.testSubjects.existOrFail('visualizesaveAndReturnButton');