Scenes: Restrict panel menu options when in edit mode (#84509)

This commit is contained in:
kay delaney 2024-03-15 10:06:05 +00:00 committed by GitHub
parent 9d453d0dcc
commit 6e6d6e368e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 19 deletions

View File

@ -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({

View File

@ -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',