diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx index ce001bb53bb..7037971a2e6 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx +++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx @@ -30,10 +30,7 @@ describe('NavToolbarActions', () => { setup(); expect(screen.queryByText('Save dashboard')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Add visualization')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Add row')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Paste panel')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Add library panel')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('Add')).not.toBeInTheDocument(); expect(await screen.findByText('Edit')).toBeInTheDocument(); expect(await screen.findByText('Share')).toBeInTheDocument(); }); @@ -83,10 +80,7 @@ describe('NavToolbarActions', () => { expect(await screen.findByText('Save dashboard')).toBeInTheDocument(); expect(await screen.findByText('Exit edit')).toBeInTheDocument(); - expect(await screen.findByLabelText('Add visualization')).toBeInTheDocument(); - expect(await screen.findByLabelText('Add row')).toBeInTheDocument(); - expect(await screen.findByLabelText('Paste panel')).toBeInTheDocument(); - expect(await screen.findByLabelText('Add library panel')).toBeInTheDocument(); + expect(await screen.findByText('Add')).toBeInTheDocument(); expect(screen.queryByText('Edit')).not.toBeInTheDocument(); expect(screen.queryByText('Share')).not.toBeInTheDocument(); expect(screen.queryByText(selectors.pages.Dashboard.DashNav.playlistControls.prev)).not.toBeInTheDocument(); diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx index 3e7d396372b..ebf62af5d59 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx +++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx @@ -47,6 +47,7 @@ export function ToolbarActions({ dashboard }: Props) { hasCopiedPanel: copiedPanel, } = dashboard.useState(); const { isPlaying } = playlistSrv.useState(); + const [isAddPanelMenuOpen, setIsAddPanelMenuOpen] = useState(false); const canSaveAs = contextSrv.hasEditPermissionInFolders; const toolbarActions: ToolbarAction[] = []; @@ -66,73 +67,7 @@ export function ToolbarActions({ dashboard }: Props) { toolbarActions.push({ group: 'icon-actions', - condition: isEditingAndShowingDashboard, - render: () => ( - { - const id = dashboard.onCreateNewPanel(); - DashboardInteractions.toolbarAddButtonClicked({ item: 'add_visualization' }); - locationService.partial({ editPanel: id }); - }} - /> - ), - }); - - toolbarActions.push({ - group: 'icon-actions', - condition: isEditingAndShowingDashboard, - render: () => ( - { - dashboard.onCreateLibPanelWidget(); - DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' }); - }} - /> - ), - }); - - toolbarActions.push({ - group: 'icon-actions', - condition: isEditingAndShowingDashboard, - render: () => ( - { - dashboard.onCreateNewRow(); - DashboardInteractions.toolbarAddButtonClicked({ item: 'add_row' }); - }} - /> - ), - }); - - toolbarActions.push({ - group: 'icon-actions', - condition: isEditingAndShowingDashboard, - render: () => ( - { - dashboard.pastePanel(); - DashboardInteractions.toolbarAddButtonClicked({ item: 'paste_panel' }); - }} - /> - ), - }); - - toolbarActions.push({ - group: 'icon-actions', - condition: uid && Boolean(meta.canStar) && isShowingDashboard, + condition: uid && Boolean(meta.canStar) && isShowingDashboard && !isEditing, render: () => { let desc = meta.isStarred ? t('dashboard.toolbar.unmark-favorite', 'Unmark as favorite') @@ -157,7 +92,7 @@ export function ToolbarActions({ dashboard }: Props) { toolbarActions.push({ group: 'icon-actions', - condition: isDevEnv && uid && isShowingDashboard, + condition: isDevEnv && uid && isShowingDashboard && !isEditing, render: () => ( ( - + + ), + }); + + if (!isEditingPanel && !isEditing) { + // This adds the alert rules button and the dashboard insights button + addDynamicActions(toolbarActions, dynamicDashNavActions.right, 'icon-actions'); + } + + toolbarActions.push({ + group: 'add-panel', + condition: isEditingAndShowingDashboard, + render: () => ( + { + setIsAddPanelMenuOpen(isOpen); + DashboardInteractions.toolbarAddClick(); + }} + overlay={() => ( + + { + const id = dashboard.onCreateNewPanel(); + DashboardInteractions.toolbarAddButtonClicked({ item: 'add_visualization' }); + locationService.partial({ editPanel: id }); + }} + /> + { + dashboard.onCreateLibPanelWidget(); + DashboardInteractions.toolbarAddButtonClicked({ item: 'add_library_panel' }); + }} + /> + { + dashboard.onCreateNewRow(); + DashboardInteractions.toolbarAddButtonClicked({ item: 'add_row' }); + }} + /> + { + dashboard.pastePanel(); + DashboardInteractions.toolbarAddButtonClicked({ item: 'paste_panel' }); + }} + /> + + )} + placement="bottom" + offset={[0, 6]} + > + + ), }); @@ -221,11 +233,6 @@ export function ToolbarActions({ dashboard }: Props) { ), }); - if (!isEditingPanel) { - // This adds the alert rules button and the dashboard insights button - addDynamicActions(toolbarActions, dynamicDashNavActions.right, 'icon-actions'); - } - toolbarActions.push({ group: 'back-button', condition: (isViewingPanel || isEditingPanel) && !isEditingLibraryPanel,