@@ -83,7 +84,7 @@ function getStyles(theme: GrafanaTheme2) {
position: 'sticky',
top: 0,
background: theme.colors.background.canvas,
- zIndex: theme.zIndex.navbarFixed,
+ zIndex: theme.zIndex.activePanel,
padding: theme.spacing(2, 0),
}),
};
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx
new file mode 100644
index 00000000000..993c1e97a7b
--- /dev/null
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.test.tsx
@@ -0,0 +1,83 @@
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { TestProvider } from 'test/helpers/TestProvider';
+import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
+
+import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
+import { transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel';
+
+import { ToolbarActions } from './NavToolbarActions';
+
+describe('NavToolbarActions', () => {
+ describe('Give an already saved dashboard', () => {
+ it('Should show correct buttons when not in editing', async () => {
+ setup();
+
+ expect(screen.queryByText('Save dashboard')).not.toBeInTheDocument();
+ expect(await screen.findByText('Edit')).toBeInTheDocument();
+ expect(await screen.findByText('Share')).toBeInTheDocument();
+ });
+
+ it('Should show correct buttons when editing', async () => {
+ setup();
+
+ await userEvent.click(await screen.findByText('Edit'));
+
+ expect(await screen.findByText('Save dashboard')).toBeInTheDocument();
+ expect(await screen.findByText('Exit edit')).toBeInTheDocument();
+ expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+ expect(screen.queryByText('Share')).not.toBeInTheDocument();
+ });
+
+ it('Should show correct buttons when in settings menu', async () => {
+ setup();
+
+ await userEvent.click(await screen.findByText('Edit'));
+ await userEvent.click(await screen.findByText('Settings'));
+
+ expect(await screen.findByText('Save dashboard')).toBeInTheDocument();
+ expect(await screen.findByText('Back to dashboard')).toBeInTheDocument();
+ });
+ });
+});
+
+let cleanUp = () => {};
+
+function setup() {
+ const dashboard = transformSaveModelToScene({
+ dashboard: {
+ title: 'hello',
+ uid: 'my-uid',
+ schemaVersion: 30,
+ panels: [],
+ version: 10,
+ },
+ meta: {
+ canSave: true,
+ },
+ });
+
+ // Clear any data layers
+ dashboard.setState({ $data: undefined });
+
+ const initialSaveModel = transformSceneToSaveModel(dashboard);
+ dashboard.setInitialSaveModel(initialSaveModel);
+
+ dashboard.startUrlSync();
+
+ cleanUp();
+ cleanUp = dashboard.activate();
+
+ const context = getGrafanaContextMock();
+
+ render(
+
+
+
+ );
+
+ const actions = context.chrome.state.getValue().actions;
+
+ return { dashboard, actions };
+}
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index 0f3bbfdfb0c..31f61c7ad82 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -1,11 +1,13 @@
+import { css } from '@emotion/css';
import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
import { locationService } from '@grafana/runtime';
-import { Button } from '@grafana/ui';
+import { Button, ButtonGroup, Dropdown, Icon, Menu, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
+import { contextSrv } from 'app/core/core';
import { t } from 'app/core/internationalization';
-import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { ShareModal } from '../sharing/ShareModal';
@@ -19,164 +21,300 @@ interface Props {
}
export const NavToolbarActions = React.memo
(({ dashboard }) => {
- const { actions = [], isEditing, viewPanelScene, isDirty, uid, meta, editview } = dashboard.useState();
- const toolbarActions = (actions ?? []).map((action) => );
- const rightToolbarActions: JSX.Element[] = [];
- const _legacyDashboardModel = getDashboardSrv().getCurrent();
+ const actions = (
+
+
+
+ );
- if (uid && !editview) {
- if (meta.canStar) {
+ return ;
+});
+
+NavToolbarActions.displayName = 'NavToolbarActions';
+
+/**
+ * This part is split into a separate componet to help test this
+ */
+export function ToolbarActions({ dashboard }: Props) {
+ const { isEditing, viewPanelScene, isDirty, uid, meta, editview } = dashboard.useState();
+ const canSaveAs = contextSrv.hasEditPermissionInFolders;
+ const toolbarActions: ToolbarAction[] = [];
+ const buttonWithExtraMargin = useStyles2(getStyles);
+
+ toolbarActions.push({
+ group: 'icon-actions',
+ condition: uid && !editview && Boolean(meta.canStar),
+ render: () => {
let desc = meta.isStarred
? t('dashboard.toolbar.unmark-favorite', 'Unmark as favorite')
: t('dashboard.toolbar.mark-favorite', 'Mark as favorite');
-
- toolbarActions.push(
-
+ }
+ key="star-dashboard-button"
onClick={() => {
DashboardInteractions.toolbarFavoritesClick();
dashboard.onStarDashboard();
}}
/>
);
- }
- toolbarActions.push(
- {
- DashboardInteractions.toolbarShareClick();
- dashboard.showModal(new ShareModal({ dashboardRef: dashboard.getRef() }));
- }}
- />
- );
+ },
+ });
- toolbarActions.push(
- (
+ locationService.push(`/d/${uid}`)}
/>
- );
- if (dynamicDashNavActions.left.length > 0) {
- dynamicDashNavActions.left.map((action, index) => {
+ ),
+ });
+
+ if (dynamicDashNavActions.left.length > 0) {
+ dynamicDashNavActions.left.map((action, index) => {
+ const props = { dashboard: getDashboardSrv().getCurrent()! };
+ if (action.show(props)) {
const Component = action.component;
- const element = ;
- typeof action.index === 'number'
- ? toolbarActions.splice(action.index, 0, element)
- : toolbarActions.push(element);
- });
- }
- }
-
- toolbarActions.push();
-
- if (dynamicDashNavActions.right.length > 0) {
- dynamicDashNavActions.right.map((action, index) => {
- const Component = action.component;
- const element = ;
- typeof action.index === 'number'
- ? rightToolbarActions.splice(action.index, 0, element)
- : rightToolbarActions.push(element);
+ toolbarActions.push({
+ group: 'icon-actions',
+ condition: true,
+ render: () => ,
+ });
+ }
});
-
- toolbarActions.push(...rightToolbarActions);
}
- if (viewPanelScene) {
- toolbarActions.push(
+ toolbarActions.push({
+ group: 'back-button',
+ condition: Boolean(viewPanelScene),
+ render: () => (
- );
+ ),
+ });
- return ;
- }
+ toolbarActions.push({
+ group: 'back-button',
+ condition: Boolean(editview),
+ render: () => (
+
+ ),
+ });
- if (!isEditing) {
- if (dashboard.canEditDashboard()) {
- toolbarActions.push(
-
- );
- }
- } else {
- if (dashboard.canEditDashboard()) {
- if (!dashboard.state.meta.isNew) {
- toolbarActions.push(
+ toolbarActions.push({
+ group: 'main-buttons',
+ condition: uid && !isEditing,
+ render: () => (
+
+ ),
+ });
+
+ toolbarActions.push({
+ group: 'main-buttons',
+ condition: !isEditing && dashboard.canEditDashboard() && !viewPanelScene,
+ render: () => (
+
+ ),
+ });
+
+ toolbarActions.push({
+ group: 'settings',
+ condition: isEditing && dashboard.canEditDashboard() && !viewPanelScene && !editview,
+ render: () => (
+
+ ),
+ });
+
+ toolbarActions.push({
+ group: 'main-buttons',
+ condition: isEditing && !editview && !meta.isNew,
+ render: () => (
+
+ ),
+ });
+
+ toolbarActions.push({
+ group: 'main-buttons',
+ condition: isEditing && (meta.canSave || canSaveAs),
+ render: () => {
+ // if we only can save
+ if (meta.isNew) {
+ return (
+ );
+ }
+
+ // If we only can save as copy
+ if (canSaveAs && !meta.canSave) {
+ return (
+
);
}
- if (dashboard.canDiscard()) {
- toolbarActions.push(
+
+ // If we can do both save and save as copy we show a button group with dropdown menu
+ const menu = (
+
+ );
+
+ return (
+
- );
- }
- toolbarActions.push(
-
+
+
+
+
);
+ },
+ });
+
+ const actionElements: React.ReactNode[] = [];
+ let lastGroup = '';
+
+ for (const action of toolbarActions) {
+ if (!action.condition) {
+ continue;
}
+
+ if (lastGroup && lastGroup !== action.group) {
+ lastGroup && actionElements.push();
+ }
+
+ actionElements.push(action.render());
+ lastGroup = action.group;
}
- return ;
-});
+ return actionElements;
+}
-NavToolbarActions.displayName = 'NavToolbarActions';
+interface ToolbarAction {
+ group: string;
+ condition?: boolean | string;
+ render: () => React.ReactNode;
+}
+
+function getStyles(theme: GrafanaTheme2) {
+ return css({ margin: theme.spacing(0, 0.5) });
+}
diff --git a/public/app/features/dashboard-scene/utils/interactions.ts b/public/app/features/dashboard-scene/utils/interactions.ts
index d96ecd166e2..a4da3b1b0be 100644
--- a/public/app/features/dashboard-scene/utils/interactions.ts
+++ b/public/app/features/dashboard-scene/utils/interactions.ts
@@ -135,7 +135,9 @@ export const DashboardInteractions = {
toolbarSaveClick: () => {
reportDashboardInteraction('toolbar_actions_clicked', { item: 'save' });
},
-
+ toolbarSaveAsClick: () => {
+ reportDashboardInteraction('toolbar_actions_clicked', { item: 'save_as' });
+ },
toolbarAddClick: () => {
reportDashboardInteraction('toolbar_actions_clicked', { item: 'add' });
},