[Controls] Deprecate old controls (#132562)

* Deprecate old controls * Use badge instead of changing the name * Fix warning message * Add i18n support for deprecated tag * Fix functional and jest tests * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Add an isDeprecated flag to the visTypes * Fix wording of enable labs setting * Stylize technical preview message Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
2025-04-24 09:48:58 -04:00 · 2022-05-24 11:55:30 -06:00 · 2022-05-24 11:55:30 -06:00 · dbeee7a88a
commit dbeee7a88a
parent 0e1f9681a2
11 changed files with 92 additions and 33 deletions
--- a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
@ -11,6 +11,9 @@ import {
  EuiContextMenu,
  EuiContextMenuPanelItemDescriptor,
  EuiContextMenuItemIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
 } from '@elastic/eui';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
@ -124,9 +127,30 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
  });

  const getVisTypeMenuItem = (visType: BaseVisType): EuiContextMenuPanelItemDescriptor => {
-    const { name, title, titleInWizard, description, icon = 'empty', group } = visType;
+    const {
+      name,
+      title,
+      titleInWizard,
+      description,
+      icon = 'empty',
+      group,
+      isDeprecated,
+    } = visType;
    return {
-      name: titleInWizard || title,
+      name: !isDeprecated ? (
+        titleInWizard || title
+      ) : (
+        <EuiFlexGroup wrap responsive={false} gutterSize="s">
+          <EuiFlexItem grow={false}>{titleInWizard || title}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="warning">
+              {i18n.translate('dashboard.editorMenu.deprecatedTag', {
+                defaultMessage: 'Deprecated',
+              })}
+            </EuiBadge>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
      icon: icon as string,
      onClick:
        // not all the agg-based visualizations need to be created via the wizard
--- a/src/plugins/input_control_vis/public/input_control_vis_type.ts
+++ b/src/plugins/input_control_vis/public/input_control_vis_type.ts
@ -21,14 +21,15 @@ export function createInputControlVisTypeDefinition(
  return {
    name: 'input_control_vis',
    title: i18n.translate('inputControl.register.controlsTitle', {
-      defaultMessage: 'Controls',
+      defaultMessage: 'Input controls',
    }),
    icon: 'controlsHorizontal',
    group: VisGroups.TOOLS,
    description: i18n.translate('inputControl.register.controlsDescription', {
-      defaultMessage: 'Add dropdown menus and range sliders to your dashboard.',
+      defaultMessage: 'Input controls are deprecated and will be removed in a future version.',
    }),
    stage: 'experimental',
+    isDeprecated: true,
    visConfig: {
      defaults: {
        controls: [],
--- a/src/plugins/visualizations/public/vis_types/base_vis_type.ts
+++ b/src/plugins/visualizations/public/vis_types/base_vis_type.ts
@ -32,6 +32,7 @@ export class BaseVisType<TVisParams = VisParams> {
  public readonly icon;
  public readonly image;
  public readonly stage;
+  public readonly isDeprecated;
  public readonly group;
  public readonly titleInWizard;
  public readonly options: VisTypeOptions;
@ -65,6 +66,7 @@ export class BaseVisType<TVisParams = VisParams> {
    this.editorConfig = defaultsDeep({}, opts.editorConfig, { collections: {} });
    this.options = defaultsDeep({}, opts.options, defaultOptions);
    this.stage = opts.stage ?? 'production';
+    this.isDeprecated = opts.isDeprecated ?? false;
    this.group = opts.group ?? VisGroups.AGGBASED;
    this.titleInWizard = opts.titleInWizard ?? '';
    this.hidden = opts.hidden ?? false;
--- a/src/plugins/visualizations/public/vis_types/types.ts
+++ b/src/plugins/visualizations/public/vis_types/types.ts
@ -194,6 +194,10 @@ export interface VisTypeDefinition<TVisParams> {
   * @default 'production'
   */
  readonly stage?: 'experimental' | 'beta' | 'production';
+  /**
+   * It sets the vis type on a deprecated mode when is true
+   */
+  readonly isDeprecated?: boolean;
  /**
   * Describes the experience group that the visualization belongs.
   * It can be on tools, aggregation based or promoted group.
--- a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
+++ b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
@ -44,6 +44,7 @@ export interface VisTypeAlias {
  note?: string;
  getSupportedTriggers?: () => string[];
  stage: VisualizationStage;
+  isDeprecated?: boolean;

  appExtensions?: {
    visualizations: VisualizationsAppExtension;
--- a/src/plugins/visualizations/public/visualize_app/components/experimental_vis_info.tsx
+++ b/src/plugins/visualizations/public/visualize_app/components/experimental_vis_info.tsx
@ -12,26 +12,31 @@ import { FormattedMessage } from '@kbn/i18n-react';

 export const InfoComponent = () => {
  const title = (
-    <>
-      <FormattedMessage
-        id="visualizations.experimentalVisInfoText"
-        defaultMessage="This functionality is in technical preview and may be changed or removed completely in a future release.
-          Elastic will take a best effort approach to fix any issues, but features in technical preview
-          are not subject to the support SLA of official GA features.
+    <FormattedMessage
+      id="visualizations.experimentalVisInfoTitle"
+      defaultMessage="This functionality is in technical preview."
+    />
+  );
+
+  const text = (
+    <FormattedMessage
+      id="visualizations.experimentalVisInfoText"
+      defaultMessage="It may be changed or removed completely in a future release.
+          Elastic will take a best effort approach to fix any issues, but features
+          in technical preview are not subject to the support SLA of official GA features.
          For feedback, please create an issue in {githubLink}."
-        values={{
-          githubLink: (
-            <EuiLink
-              external
-              href="https://github.com/elastic/kibana/issues/new/choose"
-              target="_blank"
-            >
-              GitHub
-            </EuiLink>
-          ),
-        }}
-      />
-    </>
+      values={{
+        githubLink: (
+          <EuiLink
+            external
+            href="https://github.com/elastic/kibana/issues/new/choose"
+            target="_blank"
+          >
+            GitHub
+          </EuiLink>
+        ),
+      }}
+    />
  );

  return (
@ -41,7 +46,9 @@ export const InfoComponent = () => {
      size="s"
      title={title}
      iconType="beaker"
-    />
+    >
+      {text}
+    </EuiCallOut>
  );
 };

--- a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.tsx
+++ b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.tsx
@ -128,7 +128,6 @@ export const VisualizeEditorCommon = ({
    chartName && (chartNeedsWarning || deprecatedChartsNeedWarning)
      ? CHARTS_CONFIG_TOKENS[chartName as CHARTS_WITHOUT_SMALL_MULTIPLES]
      : undefined;
-
  const hasLegacyChartsEnabled = chartToken ? getUISettings().get(chartToken) : true;

  return (
@ -151,17 +150,19 @@ export const VisualizeEditorCommon = ({
          onAppLeave={onAppLeave}
        />
      )}
-      {visInstance?.vis?.type?.stage === 'experimental' && <ExperimentalVisInfo />}
+      {visInstance?.vis?.type?.stage === 'experimental' &&
+        !visInstance?.vis?.type?.isDeprecated && <ExperimentalVisInfo />}
      {!hasLegacyChartsEnabled && isSplitChart && chartNeedsWarning && chartToken && chartName && (
        <VizChartWarning
          chartType={chartName as CHARTS_WITHOUT_SMALL_MULTIPLES}
          chartConfigToken={chartToken}
        />
      )}
-      {hasLegacyChartsEnabled && deprecatedChartsNeedWarning && chartToken && chartName && (
+      {((hasLegacyChartsEnabled && deprecatedChartsNeedWarning && chartToken && chartName) ||
+        visInstance?.vis?.type?.isDeprecated) && (
        <VizChartWarning
          chartType={chartName as CHARTS_TO_BE_DEPRECATED}
-          chartConfigToken={chartToken}
+          chartConfigToken={chartToken ?? undefined}
          mode="new"
        />
      )}
--- a/src/plugins/visualizations/public/visualize_app/components/viz_chart_warning.tsx
+++ b/src/plugins/visualizations/public/visualize_app/components/viz_chart_warning.tsx
@ -23,7 +23,7 @@ import type {

 interface Props {
  chartType: CHART_WITHOUT_SMALL_MULTIPLES | CHART_TO_BE_DEPRECATED;
-  chartConfigToken: string;
+  chartConfigToken?: string;
  mode?: 'old' | 'new';
 }

@ -149,11 +149,21 @@ const TimelionWarningFormatMessage: FC<WarningMessageProps> = (props) => {
  );
 };

+const ControlsWarningFormatMessage: FC<WarningMessageProps> = (props) => {
+  return (
+    <FormattedMessage
+      id="visualizations.controls.notificationMessage"
+      defaultMessage="Input controls are deprecated and will be removed in a future release. Use the new Controls to filter and interact with your dashboard data. "
+    />
+  );
+};
+
 const warningMessages = {
  [CHARTS_WITHOUT_SMALL_MULTIPLES.heatmap]: HeatmapWarningFormatMessage,
  [CHARTS_WITHOUT_SMALL_MULTIPLES.gauge]: GaugeWarningFormatMessage,
  [CHARTS_TO_BE_DEPRECATED.pie]: PieWarningFormatMessage,
  [CHARTS_TO_BE_DEPRECATED.timelion]: TimelionWarningFormatMessage,
+  [CHARTS_TO_BE_DEPRECATED.controls]: ControlsWarningFormatMessage,
 };

 export const VizChartWarning: FC<Props> = ({ chartType, chartConfigToken, mode }) => {
--- 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
@ -23,6 +23,7 @@ export const CHARTS_WITHOUT_SMALL_MULTIPLES = {
 export const CHARTS_TO_BE_DEPRECATED = {
  pie: 'pie',
  timelion: 'timelion',
+  controls: 'input_control_vis',
 } as const;

 export type CHARTS_WITHOUT_SMALL_MULTIPLES = $Values<typeof CHARTS_WITHOUT_SMALL_MULTIPLES>;
--- a/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx
+++ b/src/plugins/visualizations/public/wizard/group_selection/group_selection.tsx
@ -26,6 +26,7 @@ import {
  EuiDescriptionListTitle,
  EuiDescriptionListDescription,
  EuiDescriptionList,
+  EuiBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DocLinksStart } from '@kbn/core/public';
@ -224,7 +225,7 @@ const ToolsGroup = ({ visType, onVisTypeSelected, showExperimental }: VisCardPro
        <EuiIcon type={visType.icon || 'empty'} size="l" />
      </EuiFlexItem>
      <EuiFlexItem>
-        <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
          <EuiFlexItem grow={false}>
            <EuiLink data-test-subj={`visType-${visType.name}`} onClick={onClick}>
              {'titleInWizard' in visType && visType.titleInWizard
@ -232,7 +233,7 @@ const ToolsGroup = ({ visType, onVisTypeSelected, showExperimental }: VisCardPro
                : visType.title}
            </EuiLink>
          </EuiFlexItem>
-          {visType.stage === 'experimental' && (
+          {visType.stage === 'experimental' && !visType.isDeprecated ? (
            <EuiFlexItem grow={false}>
              <EuiBetaBadge
                iconType="beaker"
@ -245,6 +246,14 @@ const ToolsGroup = ({ visType, onVisTypeSelected, showExperimental }: VisCardPro
                })}
              />
            </EuiFlexItem>
+          ) : (
+            visType.isDeprecated && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge color="warning">
+                  <FormattedMessage id="visualizations.deprecatedTag" defaultMessage="Deprecated" />
+                </EuiBadge>
+              </EuiFlexItem>
+            )
          )}
        </EuiFlexGroup>
        <EuiText color="subdued" size="s">
--- a/src/plugins/visualizations/server/plugin.ts
+++ b/src/plugins/visualizations/server/plugin.ts
@ -59,8 +59,7 @@ export class VisualizationsPlugin
        }),
        value: true,
        description: i18n.translate('visualizations.advancedSettings.visualizeEnableLabsText', {
-          defaultMessage: `Allows users to create, view, and edit visualizations that are in technical preview.
-            If disabled, only visualizations that are considered production-ready are available to the user.`,
+          defaultMessage: `When enabled, allows you to create, view, and edit visualizations that are in technical preview. When disabled, only production-ready visualizations are available.`,
        }),
        category: ['visualization'],
        schema: schema.boolean(),