PanelHeaderMenu: Use UI/Menu component (#63040)

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

@@ -20,6 +20,7 @@ export interface Props {
   isEditable: boolean;
   editPanel: PanelModel | null;
   viewPanel: PanelModel | null;
+  hidePanelMenus?: boolean;
 }
 
 export interface State {
@@ -196,6 +197,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
         isViewing={panel.isViewing}
         width={width}
         height={height}
+        hideMenu={this.props.hidePanelMenus}
       />
     );
   }

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

@@ -21,6 +21,7 @@ export interface OwnProps {
   height: number;
   lazy?: boolean;
   timezone?: string;
+  hideMenu?: boolean;
 }
 
 const mapStateToProps = (state: StoreState, props: OwnProps) => {
@@ -71,7 +72,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
   };
 
   renderPanel = (isInView: boolean) => {
-    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone } = this.props;
+    const { dashboard, panel, isViewing, isEditing, width, height, plugin, timezone, hideMenu } = this.props;
 
     if (!plugin) {
       return null;
@@ -104,6 +105,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props> {
         height={height}
         onInstanceStateChange={this.onInstanceStateChange}
         timezone={timezone}
+        hideMenu={hideMenu}
       />
     );
   };

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

@@ -63,9 +63,7 @@ export function PanelHeader({ panel, error, isViewing, isEditing, data, alertSta
                   {!dashboard.meta.publicDashboardAccessToken && (
                     <div data-testid="panel-dropdown">
                       <Icon name="angle-down" className="panel-menu-toggle" />
-                      {panelMenuOpen ? (
-                        <PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} onClose={closeMenu} />
-                      ) : null}
+                      {panelMenuOpen ? <PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} /> : null}
                     </div>
                   )}
                   {data.request && data.request.timeInfo && (

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

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import React, { PureComponent } from 'react';
 
 import { PanelMenuItem } from '@grafana/data';
+import { Menu } from '@grafana/ui';
 
 import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
 
@@ -46,3 +47,25 @@ export class PanelHeaderMenu extends PureComponent<Props> {
     );
   }
 }
+
+export function PanelHeaderMenuNew({ items }: Props) {
+  const renderItems = (items: PanelMenuItem[]) => {
+    return items.map((item) =>
+      item.type === 'divider' ? (
+        <Menu.Divider key={item.text} />
+      ) : (
+        <Menu.Item
+          key={item.text}
+          label={item.text}
+          icon={item.iconClassName}
+          childItems={item.subMenu ? renderItems(item.subMenu) : undefined}
+          url={item.href}
+          onClick={item.onClick}
+          shortcut={item.shortcut}
+        />
+      )
+    );
+  };
+
+  return <Menu>{renderItems(items)}</Menu>;
+}

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

@@ -4,24 +4,23 @@ import { LoadingState } from '@grafana/data';
 
 import { DashboardModel, PanelModel } from '../../state';
 
-import { PanelHeaderMenu } from './PanelHeaderMenu';
+import { PanelHeaderMenu, PanelHeaderMenuNew } from './PanelHeaderMenu';
 import { PanelHeaderMenuProvider } from './PanelHeaderMenuProvider';
 
 interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
   loadingState?: LoadingState;
-  onClose: () => void;
   style?: React.CSSProperties;
   menuItemsClassName?: string;
   menuWrapperClassName?: string;
 }
 
 export function PanelHeaderMenuWrapper({
-  style,
   panel,
   dashboard,
   loadingState,
+  style,
   menuItemsClassName,
   menuWrapperClassName,
 }: Props) {
@@ -38,3 +37,11 @@ export function PanelHeaderMenuWrapper({
     </PanelHeaderMenuProvider>
   );
 }
+
+export function PanelHeaderMenuWrapperNew({ style, panel, dashboard, loadingState }: Props) {
+  return (
+    <PanelHeaderMenuProvider panel={panel} dashboard={dashboard} loadingState={loadingState}>
+      {({ items }) => <PanelHeaderMenuNew style={style} items={items} />}
+    </PanelHeaderMenuProvider>
+  );
+}

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

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import classNames from 'classnames';
 import React, { PureComponent } from 'react';
 import { Subscription } from 'rxjs';
@@ -55,7 +54,7 @@ import { DashboardModel, PanelModel } from '../state';
 import { loadSnapshotData } from '../utils/loadSnapshotData';
 
 import { PanelHeader } from './PanelHeader/PanelHeader';
-import { PanelHeaderMenuWrapper } from './PanelHeader/PanelHeaderMenuWrapper';
+import { PanelHeaderMenuWrapperNew } from './PanelHeader/PanelHeaderMenuWrapper';
 import { PanelHeaderTitleItems } from './PanelHeader/PanelHeaderTitleItems';
 import { seriesVisibilityConfigFactory } from './SeriesVisibilityConfigFactory';
 import { liveTimer } from './liveTimer';
@@ -73,6 +72,7 @@ export interface Props {
   height: number;
   onInstanceStateChange: (value: any) => void;
   timezone?: string;
+  hideMenu?: boolean;
 }
 
 export interface State {
@@ -653,57 +653,17 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
       />
     );
 
-    const overrideStyles: { menuItemsClassName?: string; menuWrapperClassName?: string; pos?: React.CSSProperties } = {
-      menuItemsClassName: undefined,
-      menuWrapperClassName: undefined,
-      pos: { top: 0, left: '-156px' },
-    };
-
-    if (config.featureToggles.newPanelChromeUI) {
-      // set override styles
-      overrideStyles.menuItemsClassName = css`
-        width: inherit;
-        top: inherit;
-        left: inherit;
-        position: inherit;
-        float: inherit;
-      `;
-      overrideStyles.menuWrapperClassName = css`
-        position: inherit;
-        width: inherit;
-        top: inherit;
-        left: inherit;
-        float: inherit;
-        .dropdown-submenu > .dropdown-menu {
-          position: absolute;
-        }
-      `;
-      overrideStyles.pos = undefined;
-    }
-
-    // custom styles is neeeded to override legacy panel-menu styles and prevent menu from being cut off
-    let menu;
-    if (!dashboard.meta.publicDashboardAccessToken) {
-      menu = (
-        <div data-testid="panel-dropdown">
-          <PanelHeaderMenuWrapper
-            style={overrideStyles.pos}
-            panel={panel}
-            dashboard={dashboard}
-            loadingState={data.state}
-            onClose={() => {}}
-            menuItemsClassName={overrideStyles.menuItemsClassName}
-            menuWrapperClassName={overrideStyles.menuWrapperClassName}
-          />
-        </div>
-      );
-    }
-
     const dragClass = !(isViewing || isEditing) ? 'grid-drag-handle' : '';
     if (config.featureToggles.newPanelChromeUI) {
       // Shift the hover menu down if it's on the top row so it doesn't get clipped by topnav
       const hoverHeaderOffset = (panel.gridPos?.y ?? 0) === 0 ? -16 : undefined;
 
+      const menu = (
+        <div data-testid="panel-dropdown">
+          <PanelHeaderMenuWrapperNew panel={panel} dashboard={dashboard} loadingState={data.state} />
+        </div>
+      );
+
       return (
         <PanelChrome
           width={width}
@@ -714,7 +674,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           statusMessageOnClick={this.onOpenErrorInspect}
           description={!!panel.description ? this.onShowPanelDescription : undefined}
           titleItems={titleItems}
-          menu={menu}
+          menu={this.props.hideMenu ? undefined : menu}
           dragClass={dragClass}
           dragClassCancel="grid-drag-cancel"
           padding={padding}