Allow embeddable to specify edit label (#36296) (#36399)

* Allow embeddable to specify edit label * update test plugins * pass getDisplayName in options parameter to ContextMenuAction constructor in plugin example * more typescript clean-up magic * some more typescript error fun * change maps embeddable edit label i18n prefix * clean-up localization
2025-04-24 01:38:56 -04:00 · 2019-05-09 15:53:54 -06:00 · 2019-05-09 15:53:54 -06:00 · 95be609ba4
commit 95be609ba4
parent 48ddc41d8b
14 changed files with 88 additions and 45 deletions
--- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_customize_panel_action.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_customize_panel_action.tsx
@ -37,9 +37,6 @@ export function getCustomizePanelAction({
 }): ContextMenuAction {
  return new ContextMenuAction(
    {
-      displayName: i18n.translate('kbn.dashboard.panel.customizePanel.displayName', {
-        defaultMessage: 'Customize panel',
-      }),
      id: 'customizePanel',
      parentPanelId: 'mainMenu',
    },
@ -64,6 +61,11 @@ export function getCustomizePanelAction({
      ),
      icon: <EuiIcon type="pencil" />,
      isVisible: ({ containerState }) => containerState.viewMode === DashboardViewMode.EDIT,
+      getDisplayName: () => {
+        return i18n.translate('kbn.dashboard.panel.customizePanel.displayName', {
+          defaultMessage: 'Customize panel',
+        });
+      },
    }
  );
 }
--- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_edit_panel_action.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_edit_panel_action.tsx
@ -32,9 +32,6 @@ import { DashboardViewMode } from '../../../dashboard_view_mode';
 export function getEditPanelAction() {
  return new ContextMenuAction(
    {
-      displayName: i18n.translate('kbn.dashboard.panel.editPanel.displayName', {
-        defaultMessage: 'Edit visualization',
-      }),
      id: 'editPanel',
      parentPanelId: 'mainMenu',
    },
@ -54,6 +51,15 @@ export function getEditPanelAction() {
          return embeddable.metadata.editUrl;
        }
      },
+      getDisplayName: ({ embeddable }) => {
+        if (embeddable && embeddable.metadata.editLabel) {
+          return embeddable.metadata.editLabel;
+        }
+
+        return i18n.translate('kbn.dashboard.panel.editPanel.defaultDisplayName', {
+          defaultMessage: 'Edit',
+        });
+      },
    }
  );
 }
--- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_inspector_panel_action.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_inspector_panel_action.tsx
@ -40,12 +40,14 @@ export function getInspectorPanelAction({
  return new ContextMenuAction(
    {
      id: 'openInspector',
-      displayName: i18n.translate('kbn.dashboard.panel.inspectorPanel.displayName', {
-        defaultMessage: 'Inspect',
-      }),
      parentPanelId: 'mainMenu',
    },
    {
+      getDisplayName: () => {
+        return i18n.translate('kbn.dashboard.panel.inspectorPanel.displayName', {
+          defaultMessage: 'Inspect',
+        });
+      },
      icon: <EuiIcon type="inspect" />,
      isVisible: ({ embeddable }) => {
        if (!embeddable) {
--- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_remove_panel_action.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_remove_panel_action.tsx
@ -32,13 +32,15 @@ import { DashboardViewMode } from '../../../dashboard_view_mode';
 export function getRemovePanelAction(onDeletePanel: () => void) {
  return new ContextMenuAction(
    {
-      displayName: i18n.translate('kbn.dashboard.panel.removePanel.displayName', {
-        defaultMessage: 'Delete from dashboard',
-      }),
      id: 'deletePanel',
      parentPanelId: 'mainMenu',
    },
    {
+      getDisplayName: () => {
+        return i18n.translate('kbn.dashboard.panel.removePanel.displayName', {
+          defaultMessage: 'Delete from dashboard',
+        });
+      },
      icon: <EuiIcon type="trash" />,
      isVisible: ({ containerState }) =>
        containerState.viewMode === DashboardViewMode.EDIT && !containerState.isPanelExpanded,
--- a/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_toggle_expand_panel_action.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_toggle_expand_panel_action.tsx
@ -38,17 +38,19 @@ export function getToggleExpandPanelAction({
 }) {
  return new ContextMenuAction(
    {
-      displayName: isExpanded
-        ? i18n.translate('kbn.dashboard.panel.toggleExpandPanel.expandedDisplayName', {
-            defaultMessage: 'Minimize',
-          })
-        : i18n.translate('kbn.dashboard.panel.toggleExpandPanel.notExpandedDisplayName', {
-            defaultMessage: 'Full screen',
-          }),
      id: 'togglePanel',
      parentPanelId: 'mainMenu',
    },
    {
+      getDisplayName: () => {
+        return isExpanded
+          ? i18n.translate('kbn.dashboard.panel.toggleExpandPanel.expandedDisplayName', {
+              defaultMessage: 'Minimize',
+            })
+          : i18n.translate('kbn.dashboard.panel.toggleExpandPanel.notExpandedDisplayName', {
+              defaultMessage: 'Full screen',
+            });
+      },
      // TODO: Update to minimize icon when https://github.com/elastic/eui/issues/837 is complete.
      icon: <EuiIcon type={isExpanded ? 'expand' : 'expand'} />,
      onClick: toggleExpandedPanel,
--- a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts
@ -19,6 +19,7 @@

 import angular from 'angular';
 import _ from 'lodash';
+import { i18n } from '@kbn/i18n';
 import { SearchSource } from 'ui/courier';
 import {
  ContainerState,
@ -89,6 +90,9 @@ export class SearchEmbeddable extends Embeddable {
    super({
      title: savedSearch.title,
      editUrl,
+      editLabel: i18n.translate('kbn.embeddable.search.editLabel', {
+        defaultMessage: 'Edit saved search',
+      }),
      editable,
      indexPatterns: _.compact([savedSearch.searchSource.getField('index')]),
    });
--- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
+++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
@ -30,6 +30,7 @@ import {
  VisualizeLoaderParams,
  VisualizeUpdateParams,
 } from 'ui/visualize/loader/types';
+import { i18n } from '@kbn/i18n';

 export interface VisualizeEmbeddableConfiguration {
  onEmbeddableStateChanged: OnEmbeddableStateChanged;
@ -63,6 +64,9 @@ export class VisualizeEmbeddable extends Embeddable {
    super({
      title: savedVisualization.title,
      editUrl,
+      editLabel: i18n.translate('kbn.embeddable.visualize.editLabel', {
+        defaultMessage: 'Edit visualization',
+      }),
      editable,
      indexPatterns,
    });
--- a/src/legacy/ui/public/embeddable/context_menu_actions/build_eui_context_menu_panels.ts
+++ b/src/legacy/ui/public/embeddable/context_menu_actions/build_eui_context_menu_panels.ts
@ -141,7 +141,7 @@ function convertPanelActionToContextMenuItem({
  embeddable?: Embeddable;
 }): EuiContextMenuPanelItemDescriptor {
  const menuPanelItem: EuiContextMenuPanelItemDescriptor = {
-    name: action.displayName,
+    name: action.getDisplayName({ embeddable, containerState }),
    icon: action.icon,
    panel: _.get(action, 'childContextMenuPanel.id'),
    disabled: action.isDisabled({ embeddable, containerState }),
--- a/src/legacy/ui/public/embeddable/context_menu_actions/context_menu_action.ts
+++ b/src/legacy/ui/public/embeddable/context_menu_actions/context_menu_action.ts
@ -49,6 +49,11 @@ interface ContextMenuActionOptions {
   * Optional icon to display to the left of the action.
   */
  icon?: EuiContextMenuItemIcon;
+
+  /**
+   * Return display name of the action in the menu
+   */
+  getDisplayName: (actionAPI: PanelActionAPI) => string;
 }

 interface ContextMenuButtonOptions extends ContextMenuActionOptions {
@ -69,11 +74,6 @@ interface ContextMenuLinkOptions extends ContextMenuActionOptions {
 interface ContextMenuActionsConfig {
  id: string;

-  /**
-   * Display name of the action in the menu
-   */
-  displayName: string;
-
  /**
   * Determines which ContextMenuPanel this action is displayed on.
   */
@ -88,11 +88,6 @@ export class ContextMenuAction {
   */
  public readonly icon?: EuiContextMenuItemIcon;

-  /**
-   * Display name of the action in the menu
-   */
-  public readonly displayName: string;
-
  /**
   * Optional child context menu to open when the action is clicked.
   */
@ -113,28 +108,33 @@ export class ContextMenuAction {
   */
  public readonly getHref?: (panelActionAPI: PanelActionAPI) => string;

+  /**
+   * @param {PanelActionAPI} panelActionAPI
+   */
+  public readonly getDisplayName: (panelActionAPI: PanelActionAPI) => string;
+
  /**
   *
   * @param {string} config.id
-   * @param {string} config.displayName
   * @param {string} config.parentPanelId - set if this action belongs on a nested child panel
   * @param {function} options.onClick
   * @param {ContextMenuPanel} options.childContextMenuPanel - optional child panel to open when clicked.
   * @param {function} options.isDisabled - optionally set a custom disabled function
   * @param {function} options.isVisible - optionally set a custom isVisible function
   * @param {function} options.getHref
+   * @param {function} options.getDisplayName
   * @param {Element} options.icon
   */
  public constructor(
    config: ContextMenuActionsConfig,
-    options: ContextMenuButtonOptions | ContextMenuLinkOptions = {}
+    options: ContextMenuButtonOptions | ContextMenuLinkOptions
  ) {
    this.id = config.id;
-    this.displayName = config.displayName;
    this.parentPanelId = config.parentPanelId;

    this.icon = options.icon;
    this.childContextMenuPanel = options.childContextMenuPanel;
+    this.getDisplayName = options.getDisplayName;

    if ('onClick' in options) {
      this.onClick = options.onClick;
--- a/src/legacy/ui/public/embeddable/embeddable.ts
+++ b/src/legacy/ui/public/embeddable/embeddable.ts
@ -40,6 +40,8 @@ export interface EmbeddableMetadata {
   */
  editUrl?: string;

+  editLabel?: string;
+
  /**
   * A flag indicating if this embeddable can be edited.
   */
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx
@ -28,11 +28,17 @@ import {

 class SamplePanelAction extends ContextMenuAction {
  constructor() {
-    super({
-      displayName: 'Sample Panel Action',
-      id: 'samplePanelAction',
-      parentPanelId: 'mainMenu',
-    });
+    super(
+      {
+        id: 'samplePanelAction',
+        parentPanelId: 'mainMenu',
+      },
+      {
+        getDisplayName: () => {
+          return 'Sample Panel Action';
+        },
+      }
+    );
  }
  public onClick = ({ embeddable }: PanelActionAPI) => {
    if (!embeddable) {
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_link.ts
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_link.ts
@ -20,11 +20,17 @@ import { ContextMenuAction, ContextMenuActionsRegistryProvider } from 'ui/embedd

 class SamplePanelLink extends ContextMenuAction {
  constructor() {
-    super({
-      displayName: 'Sample Panel Link',
-      id: 'samplePanelLink',
-      parentPanelId: 'mainMenu',
-    });
+    super(
+      {
+        id: 'samplePanelLink',
+        parentPanelId: 'mainMenu',
+      },
+      {
+        getDisplayName: () => {
+          return 'Sample Panel Link';
+        },
+      }
+    );
  }

  public getHref = () => {
--- a/x-pack/plugins/maps/public/embeddable/map_embeddable.js
+++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.js
@ -34,6 +34,7 @@ import {
 } from '../store/ui';
 import { getInspectorAdapters } from '../store/non_serializable_instances';
 import { getMapCenter, getMapZoom } from '../selectors/map_selectors';
+import { i18n } from '@kbn/i18n';

 export class MapEmbeddable extends Embeddable {

@ -45,7 +46,14 @@ export class MapEmbeddable extends Embeddable {
    editable,
    indexPatterns = []
  }) {
-    super({ title: savedMap.title, editUrl, editable, indexPatterns });
+    super({
+      title: savedMap.title,
+      editUrl,
+      editLabel: i18n.translate('xpack.maps.embeddable.editLabel', {
+        defaultMessage: 'Edit map',
+      }),
+      editable,
+      indexPatterns });

    this._onEmbeddableStateChanged = onEmbeddableStateChanged;
    this._embeddableConfig = _.cloneDeep(embeddableConfig);
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -1113,7 +1113,6 @@
    "kbn.dashboard.panel.customizePanel.displayName": "定制面板",
    "kbn.dashboard.panel.customizePanelTitle": "定制面板",
    "kbn.dashboard.panel.dashboardPanelAriaLabel": "仪表板面板：{title}",
-    "kbn.dashboard.panel.editPanel.displayName": "编辑可视化",
    "kbn.dashboard.panel.inspectorPanel.displayName": "检查",
    "kbn.dashboard.panel.invalidVersionErrorMessage": "版本 {version} 无效，应为 {semver}",
    "kbn.dashboard.panel.noFoundEmbeddableFactoryErrorMessage": "未找到面板类型 {panelType} 的 Embeddable 工厂",