diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.test.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.test.tsx index 48cc1fd7ea9..d6080eed261 100644 --- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.test.tsx +++ b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.test.tsx @@ -22,6 +22,8 @@ import { import { contextSrv } from 'app/core/services/context_srv'; import { GetExploreUrlArguments } from 'app/core/utils/explore'; +import { buildPanelEditScene } from '../panel-edit/PanelEditor'; + import { DashboardScene } from './DashboardScene'; import { VizPanelLinks, VizPanelLinksMenu } from './PanelLinks'; import { panelMenuBehavior } from './PanelMenuBehavior'; @@ -93,6 +95,30 @@ describe('panelMenuBehavior', () => { expect(menu.state.items?.[4].subMenu?.length).toBe(3); }); + it('should have reduced menu options when panel editor is open', async () => { + const { scene, menu, panel } = await buildTestScene({}); + scene.setState({ editPanel: buildPanelEditScene(panel) }); + panel.getPlugin = () => getPanelPlugin({ skipDataQuery: false }); + + mocks.contextSrv.hasAccessToExplore.mockReturnValue(true); + mocks.getExploreUrl.mockReturnValue(Promise.resolve('/explore')); + + menu.activate(); + + await new Promise((r) => setTimeout(r, 1)); + + expect(menu.state.items?.length).toBe(4); + expect(menu.state.items?.[0].text).toBe('Share'); + expect(menu.state.items?.[1].text).toBe('Explore'); + expect(menu.state.items?.[2].text).toBe('Inspect'); + expect(menu.state.items?.[3].text).toBe('More...'); + expect(menu.state.items?.[3].subMenu).toBeDefined(); + + expect(menu.state.items?.[3].subMenu?.length).toBe(2); + expect(menu.state.items?.[3].subMenu?.[0].text).toBe('New alert rule'); + expect(menu.state.items?.[3].subMenu?.[1].text).toBe('Get help'); + }); + describe('when extending panel menu from plugins', () => { it('should contain menu item from link extension', async () => { getPluginLinkExtensionsMock.mockReturnValue({ diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx index 487b0970cdb..6ebf570080c 100644 --- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx +++ b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx @@ -55,15 +55,18 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) { return; } - items.push({ - text: t('panel.header-menu.view', `View`), - iconClassName: 'eye', - shortcut: 'v', - onClick: () => DashboardInteractions.panelMenuItemClicked('view'), - href: getViewPanelUrl(panel), - }); + const isEditingPanel = Boolean(dashboard.state.editPanel); + if (!isEditingPanel) { + items.push({ + text: t('panel.header-menu.view', `View`), + iconClassName: 'eye', + shortcut: 'v', + onClick: () => DashboardInteractions.panelMenuItemClicked('view'), + href: getViewPanelUrl(panel), + }); + } - if (dashboard.canEditDashboard() && !isRepeat) { + if (dashboard.canEditDashboard() && !isRepeat && !isEditingPanel) { // We could check isEditing here but I kind of think this should always be in the menu, // and going into panel edit should make the dashboard go into edit mode is it's not already items.push({ @@ -85,7 +88,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) { shortcut: 'p s', }); - if (dashboard.state.isEditing && !isRepeat) { + if (dashboard.state.isEditing && !isRepeat && !isEditingPanel) { moreSubMenu.push({ text: t('panel.header-menu.duplicate', `Duplicate`), onClick: () => { @@ -96,15 +99,17 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) { }); } - moreSubMenu.push({ - text: t('panel.header-menu.copy', `Copy`), - onClick: () => { - DashboardInteractions.panelMenuItemClicked('copy'); - dashboard.copyPanel(panel); - }, - }); + if (!isEditingPanel) { + moreSubMenu.push({ + text: t('panel.header-menu.copy', `Copy`), + onClick: () => { + DashboardInteractions.panelMenuItemClicked('copy'); + dashboard.copyPanel(panel); + }, + }); + } - if (dashboard.state.isEditing && !isRepeat) { + if (dashboard.state.isEditing && !isRepeat && !isEditingPanel) { if (parent instanceof LibraryVizPanel) { moreSubMenu.push({ text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`), @@ -139,7 +144,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) { onClick: (e) => onCreateAlert(panel), }); - if (hasLegendOptions(panel.state.options)) { + if (hasLegendOptions(panel.state.options) && !isEditingPanel) { moreSubMenu.push({ text: panel.state.options.legend.showLegend ? t('panel.header-menu.hide-legend', 'Hide legend') @@ -199,7 +204,7 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) { }); } - if (dashboard.state.isEditing && !isRepeat) { + if (dashboard.state.isEditing && !isRepeat && !isEditingPanel) { items.push({ text: '', type: 'divider',