wip: panel-header: More merge conflicts during cherry pick

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -122,7 +122,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
         <div className={panelWrapperClass}>
           <PanelChrome
             component={pluginExports.PanelComponent}
-            withMenuOptions={pluginExports.withMenuOptions}
+            // withMenuOptions={pluginExports.withMenuOptions}
             panel={this.props.panel}
             dashboard={this.props.dashboard}
             moduleMenu={pluginExports.moduleMenu}

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -20,7 +20,7 @@ export interface PanelChromeProps {
   panel: PanelModel;
   dashboard: DashboardModel;
   component: ComponentClass<PanelProps>;
-  withMenuOptions?: (c: typeof PanelHeaderMenu, p: PanelModel) => typeof PanelHeaderMenu;
+  // withMenuOptions?: (c: typeof PanelHeaderMenu, p: PanelModel) => typeof PanelHeaderMenu;
   moduleMenu?: any;
 }
 
@@ -99,18 +99,15 @@ export class PanelChrome extends PureComponent<PanelChromeProps, PanelChromeStat
     const { refreshCounter, timeRange, dataSourceApi, timeSeries, renderCounter } = this.state;
     const { targets } = panel;
     const PanelComponent = this.props.component;
-    console.log('Panel chrome render');
-    // const PanelHeaderMenuComponent: typeof PanelHeaderMenu = withMenuOptions ? withMenuOptions(PanelHeaderMenu, panel) : PanelHeaderMenu;
-    const PanelHeaderMenuComponent = PanelHeaderMenu;
-    const mm = moduleMenu(panel, dataSourceApi, timeSeries);
-    const additionalMenuItems = mm.getAdditionalMenuItems || undefined;
-    const additionalSubMenuItems = mm.getAdditionalSubMenuItems || undefined;
+    const panelSpecificMenuOptions = moduleMenu(panel, dataSourceApi, timeSeries);
+    const additionalMenuItems = panelSpecificMenuOptions.additionalMenuItems || undefined;
+    const additionalSubMenuItems = panelSpecificMenuOptions.additionalSubMenuItems || undefined;
 
     console.log('panelChrome render');
     return (
       <div className="panel-container">
         <PanelHeader title={panel.title}>
-          <PanelHeaderMenuComponent
+          <PanelHeaderMenu
             panel={panel}
             dashboard={dashboard}
             dataSourceApi={dataSourceApi}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

 import React, { PureComponent } from 'react';
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
-import { PanelHeaderMenuItem, PanelHeaderMenuItemProps } from './PanelHeaderMenuItem';
+import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
+import { PanelHeaderMenuItemProps } from 'app/types/panel';
 import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
 import { DataSourceApi } from 'app/types/series';
 import { TimeSeries } from 'app/types';

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx

 import React, { SFC } from 'react';
-
-export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove?
-  Button = 'Button', // ?
-  Divider = 'Divider',
-  Link = 'Link',
-  SubMenu = 'SubMenu',
-}
-
-export interface PanelHeaderMenuItemProps {
-  type: PanelHeaderMenuItemTypes;
-  text?: string;
-  iconClassName?: string;
-  handleClick?: () => void;
-  shortcut?: string;
-  children?: any;
-  subMenu?: PanelHeaderMenuItemProps[];
-  role?: string;
-}
+import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
 
 export const PanelHeaderMenuItem: SFC<PanelHeaderMenuItemProps> = props => {
   const isSubMenu = props.type === PanelHeaderMenuItemTypes.SubMenu;

public/app/features/dashboard/utils/panel_menu.ts

-import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from './../dashgrid/PanelHeader/PanelHeaderMenuItem';
+import { PanelHeaderMenuItemTypes, PanelHeaderMenuItemProps } from 'app/types/panel';
 import { store } from 'app/store/configureStore';
 import { updateLocation } from 'app/core/actions';
 import { PanelModel } from 'app/features/dashboard/panel_model';

public/app/plugins/panel/graph2/module.tsx

@@ -75,5 +75,4 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
 }
 
 export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
-export { withMenuOptions } from './withMenuOptions';
 export { moduleMenu } from './moduleMenu';

public/app/plugins/panel/graph2/moduleMenu.tsx

@@ -6,11 +6,7 @@ import { getTimeSrv } from 'app/features/dashboard/time_srv';
 import { store } from 'app/store/configureStore';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import appEvents from 'app/core/app_events';
-
-import {
-  PanelHeaderMenuItemProps,
-  PanelHeaderMenuItemTypes,
-} from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
+import { PanelHeaderMenuItemProps, PanelHeaderMenuItemTypes } from 'app/types/panel';
 
 export const moduleMenu = (panel, dataSourceApi, timeSeries) => {
   const onExploreClick = async () => {
@@ -70,7 +66,7 @@ export const moduleMenu = (panel, dataSourceApi, timeSeries) => {
   };
 
   return {
-    getAdditionalMenuItems: getAdditionalMenuItems(),
-    getAdditionalSubMenuItems: getAdditionalSubMenuItems(),
+    additionalMenuItems: getAdditionalMenuItems(),
+    additionalSubMenuItems: getAdditionalSubMenuItems(),
   };
 };

public/app/plugins/panel/graph2/withMenuOptions.tsx

-// Libraries
-import React, { PureComponent } from 'react';
-
-// Services
-import { getTimeSrv } from 'app/features/dashboard/time_srv';
-import { contextSrv } from 'app/core/services/context_srv';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { store } from 'app/store/configureStore';
-
-// Components
-import { PanelHeaderMenu } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
-import config from 'app/core/config';
-import { getExploreUrl } from 'app/core/utils/explore';
-import { updateLocation } from 'app/core/actions';
-
-// Types
-import { PanelModel } from 'app/features/dashboard/panel_model';
-import { PanelHeaderMenuProps } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu';
-import {
-  PanelHeaderMenuItemProps,
-  PanelHeaderMenuItemTypes,
-} from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
-
-interface LocalState {
-  datasource: any;
-}
-
-export const withMenuOptions = (WrappedPanelHeaderMenu: typeof PanelHeaderMenu, panel: PanelModel) => {
-  return class extends PureComponent<PanelHeaderMenuProps, LocalState> {
-    private datasourceSrv = getDatasourceSrv();
-    private timeSrv = getTimeSrv();
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        datasource: undefined,
-      };
-    }
-
-    componentDidMount() {
-      const dsPromise = getDatasourceSrv().get(panel.datasource);
-      dsPromise.then((datasource: any) => {
-        this.setState(() => ({ datasource }));
-      });
-    }
-
-    onExploreClick = async () => {
-      const { datasource } = this.state;
-      const url = await getExploreUrl(panel, panel.targets, datasource, this.datasourceSrv, this.timeSrv);
-      if (url) {
-        store.dispatch(updateLocation({ path: url }));
-      }
-    };
-
-    getAdditionalMenuItems = () => {
-      const { datasource } = this.state;
-      const items = [];
-      if (
-        config.exploreEnabled &&
-        contextSrv.isEditor &&
-        datasource &&
-        (datasource.meta.explore || datasource.meta.id === 'mixed')
-      ) {
-        items.push({
-          type: PanelHeaderMenuItemTypes.Link,
-          text: 'Explore',
-          handleClick: this.onExploreClick,
-          iconClassName: 'fa fa-fw fa-rocket',
-          shortcut: 'x',
-        });
-      }
-      return items;
-    };
-
-    getAdditionalSubMenuItems = () => {
-      return [
-        {
-          type: PanelHeaderMenuItemTypes.Link,
-          text: 'Hello Sub Menu',
-          handleClick: () => {
-            alert('Hello world from HOC!');
-          },
-          shortcut: 's h w',
-        },
-      ] as PanelHeaderMenuItemProps[];
-    };
-
-    render() {
-      const menu: PanelHeaderMenuItemProps[] = this.getAdditionalMenuItems();
-      const subMenu: PanelHeaderMenuItemProps[] = this.getAdditionalSubMenuItems();
-      return <WrappedPanelHeaderMenu {...this.props} additionalMenuItems={menu} additionalSubMenuItems={subMenu} />;
-    }
-  };
-};

public/app/types/panel.ts

@@ -12,3 +12,26 @@ export interface PanelOptionsProps<T = any> {
   options: T;
   onChange: (options: T) => void;
 }
+
+export enum PanelHeaderMenuItemTypes { // TODO: Evaluate. Remove?
+  Button = 'Button', // ?
+  Divider = 'Divider',
+  Link = 'Link',
+  SubMenu = 'SubMenu',
+}
+
+export interface PanelHeaderMenuItemProps {
+  type: PanelHeaderMenuItemTypes;
+  text?: string;
+  iconClassName?: string;
+  handleClick?: () => void;
+  shortcut?: string;
+  children?: any;
+  subMenu?: PanelHeaderMenuItemProps[];
+  role?: string;
+}
+
+export interface PanelMenuExtras {
+  additionalMenuItems: PanelHeaderMenuItemProps[];
+  additionalSubMenuItems: PanelHeaderMenuItemProps[];
+}

public/app/types/plugins.ts

@@ -13,7 +13,6 @@ export interface PluginExports {
   PanelCtrl?;
   PanelComponent?: ComponentClass<PanelProps>;
   PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
-  withMenuOptions?: any;
   moduleMenu?: any;
 }