Typescriptify dashboard panel actions (elastic#19675) (elastic#19706)

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/build_context_menu.js

@@ -120,8 +120,8 @@ function convertPanelActionToContextMenuItem({ action, containerState, embeddabl
     name: action.displayName,
     icon: action.icon,
     panel: _.get(action, 'childContextMenuPanel.id'),
-    onClick: () => action.onClick({ containerState, embeddable }),
-    disabled: action.isDisabled({ containerState, embeddable }),
+    onClick: () => action.onClick({ embeddable, containerState }),
+    disabled: action.isDisabled({ embeddable, containerState }),
     'data-test-subj': `dashboardPanelAction-${action.id}`,
   };
 }

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_customize_panel_action.js

@@ -34,21 +34,27 @@ import { DashboardViewMode } from '../../../dashboard_view_mode';
  * @return {DashboardPanelAction}
  */
 export function getCustomizePanelAction({ onResetPanelTitle, onUpdatePanelTitle, title, closeContextMenu }) {
-  return new DashboardPanelAction({
-    displayName: 'Customize panel',
-    id: 'customizePanel',
-    parentPanelId: 'mainMenu',
-    icon: <EuiIcon type="pencil" />,
-    isVisible: ({ containerState }) => (containerState.viewMode === DashboardViewMode.EDIT),
-    childContextMenuPanel: new DashboardContextMenuPanel({
-      id: 'panelSubOptionsMenu',
-      title: 'Customize panel',
-      getContent: () => (<PanelOptionsMenuForm
-        onReset={onResetPanelTitle}
-        onUpdatePanelTitle={onUpdatePanelTitle}
-        title={title}
-        onClose={closeContextMenu}
-      />),
-    }),
-  });
+  return new DashboardPanelAction(
+    {
+      id: 'customizePanel',
+      displayName: 'Customize panel',
+      parentPanelId: 'mainMenu',
+    },
+    {
+      icon: <EuiIcon type="pencil" />,
+      isVisible: ({ containerState }) => (containerState.viewMode === DashboardViewMode.EDIT),
+      childContextMenuPanel: new DashboardContextMenuPanel(
+        {
+          id: 'panelSubOptionsMenu',
+          title: 'Customize panel',
+        },
+        {
+          getContent: () => (<PanelOptionsMenuForm
+            onReset={onResetPanelTitle}
+            onUpdatePanelTitle={onUpdatePanelTitle}
+            title={title}
+            onClose={closeContextMenu}
+          />),
+        }),
+    });
 }

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_edit_panel_action.js

@@ -31,13 +31,16 @@ import { DashboardViewMode } from '../../../dashboard_view_mode';
  * @return {DashboardPanelAction}
  */
 export function getEditPanelAction() {
-  return new DashboardPanelAction({
-    displayName: 'Edit visualization',
-    id: 'editPanel',
-    icon: <EuiIcon type="pencil" />,
-    parentPanelId: 'mainMenu',
-    onClick: ({ embeddable }) => { window.location = embeddable.metadata.editUrl; },
-    isVisible: ({ containerState }) => (containerState.viewMode === DashboardViewMode.EDIT),
-    isDisabled: ({ embeddable }) => (!embeddable || !embeddable.metadata || !embeddable.metadata.editUrl),
-  });
+  return new DashboardPanelAction(
+    {
+      displayName: 'Edit visualization',
+      id: 'editPanel',
+      parentPanelId: 'mainMenu',
+    },
+    {
+      icon: <EuiIcon type="pencil" />,
+      onClick: ({ embeddable }) => { window.location = embeddable.metadata.editUrl; },
+      isVisible: ({ containerState }) => (containerState.viewMode === DashboardViewMode.EDIT),
+      isDisabled: ({ embeddable }) => (!embeddable || !embeddable.metadata || !embeddable.metadata.editUrl),
+    });
 }

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_remove_panel_action.js

@@ -31,14 +31,17 @@ import { DashboardViewMode } from '../../../dashboard_view_mode';
  * @return {DashboardPanelAction}
  */
 export function getRemovePanelAction(onDeletePanel) {
-  return new DashboardPanelAction({
-    displayName: 'Delete from dashboard',
-    id: 'deletePanel',
-    parentPanelId: 'mainMenu',
-    icon: <EuiIcon type="trash" />,
-    isVisible: ({ containerState }) => (
-      containerState.viewMode === DashboardViewMode.EDIT && !containerState.isPanelExpanded
-    ),
-    onClick: onDeletePanel,
-  });
+  return new DashboardPanelAction(
+    {
+      displayName: 'Delete from dashboard',
+      id: 'deletePanel',
+      parentPanelId: 'mainMenu',
+    },
+    {
+      icon: <EuiIcon type="trash" />,
+      isVisible: ({ containerState }) => (
+        containerState.viewMode === DashboardViewMode.EDIT && !containerState.isPanelExpanded
+      ),
+      onClick: onDeletePanel,
+    });
 }

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_actions/get_toggle_expand_panel_action.js

@@ -31,12 +31,15 @@ import { DashboardPanelAction } from 'ui/dashboard_panel_actions';
  * @return {DashboardPanelAction}
  */
 export function getToggleExpandPanelAction({ isExpanded, toggleExpandedPanel }) {
-  return new DashboardPanelAction({
-    displayName: isExpanded ? 'Minimize' : 'Full screen',
-    id: 'togglePanel',
-    parentPanelId: 'mainMenu',
-    // TODO: Update to minimize icon when https://github.com/elastic/eui/issues/837 is complete.
-    icon: <EuiIcon type={isExpanded ? 'expand' : 'expand'} />,
-    onClick: toggleExpandedPanel,
-  });
+  return new DashboardPanelAction(
+    {
+      displayName: isExpanded ? 'Minimize' : 'Full screen',
+      id: 'togglePanel',
+      parentPanelId: 'mainMenu',
+    },
+    {
+      // TODO: Update to minimize icon when https://github.com/elastic/eui/issues/837 is complete.
+      icon: <EuiIcon type={isExpanded ? 'expand' : 'expand'} />,
+      onClick: toggleExpandedPanel,
+    });
 }

src/ui/public/dashboard_panel_actions/dashboard_context_menu_panel.ts

@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { PanelActionAPI } from './types';
+
+interface DashboardContextMenuPanelOptions {
+  getContent?: (panelActionAPI: PanelActionAPI) => HTMLElement | undefined;
+}
+
+interface DashboardContextMenuPanelConfig {
+  id: string;
+  title: string;
+}
+
+export abstract class DashboardContextMenuPanel {
+  public readonly id: string;
+  public readonly title: string;
+
+  constructor(
+    config: DashboardContextMenuPanelConfig,
+    options: DashboardContextMenuPanelOptions = {}
+  ) {
+    this.id = config.id;
+    this.title = config.title;
+
+    if (options.getContent) {
+      this.getContent = options.getContent;
+    }
+  }
+
+  /**
+   * Optional, could be composed of actions instead of content.
+   */
+  public getContent(panelActionAPI: PanelActionAPI): HTMLElement | undefined {
+    return;
+  }
+}