Skip to content

N
nexpie-grafana-theme
Commit 75cb6703 by Torkel Ödegaard Committed by GitHub
Options

DashboardSettings & PanelEdit: Use new PageToolbar (#30675) 

* DashboardSettings & PanelEdit: Use new PageToolbar

* Update

* removed back button
parent e34d9e1c
Showing with 18 additions and 58 deletions
public/app/core/components/BackButton/BackButton.tsx deleted 100644 → 0
import React, { ButtonHTMLAttributes } from 'react';
import { IconButton } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
surface: 'dashboard' | 'panel' | 'header';
}
export const BackButton: React.FC<Props> = ({ surface, onClick }) => {
return (
<IconButton
name="arrow-left"
tooltip="Go back (Esc)"
tooltipPlacement="bottom"
size="xxl"
surface={surface}
aria-label={selectors.components.BackButton.backArrow}
onClick={onClick}
/>
);
};
BackButton.displayName = 'BackButton';
public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Button, CustomScrollbar, Icon, IconName, stylesFactory } from '@grafana/ui'; import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory } from '@grafana/ui';
import config from 'app/core/config'; import config from 'app/core/config';
import { contextSrv } from 'app/core/services/context_srv'; import { contextSrv } from 'app/core/services/context_srv';
import { BackButton } from 'app/core/components/BackButton/BackButton';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher'; import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { DashboardModel } from '../../state/DashboardModel'; import { DashboardModel } from '../../state/DashboardModel';
...@@ -146,7 +145,6 @@ export class DashboardSettings extends PureComponent<Props> { ...@@ -146,7 +145,6 @@ export class DashboardSettings extends PureComponent<Props> {
render() { render() {
const { dashboard, editview } = this.props; const { dashboard, editview } = this.props;
const folderTitle = dashboard.meta.folderTitle; const folderTitle = dashboard.meta.folderTitle;
const haveFolder = (dashboard.meta.folderId ?? 0) > 0;
const pages = this.getPages(); const pages = this.getPages();
const currentPage = pages.find((page) => page.id === editview) ?? pages[0]; const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
const canSaveAs = contextSrv.hasEditPermissionInFolders; const canSaveAs = contextSrv.hasEditPermissionInFolders;
...@@ -155,15 +153,7 @@ export class DashboardSettings extends PureComponent<Props> { ...@@ -155,15 +153,7 @@ export class DashboardSettings extends PureComponent<Props> {
return ( return (
<div className="dashboard-settings"> <div className="dashboard-settings">
<div className="navbar navbar--edit"> <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={this.onClose} />
<div className="navbar-edit">
<BackButton surface="panel" onClick={this.onClose} />
</div>
<div className="navbar-page-btn">
{haveFolder && <div className="navbar-page-btn__folder">{folderTitle} / </div>}
<span>{dashboard.title} / Settings</span>
</div>
</div>
<CustomScrollbar> <CustomScrollbar>
<div className={styles.scrollInner}> <div className={styles.scrollInner}>
<div className={styles.settingsWrapper}> <div className={styles.settingsWrapper}>
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
...@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs'; ...@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
import { FieldConfigSource, GrafanaTheme } from '@grafana/data'; import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Button, HorizontalGroup, Icon, RadioButtonGroup, stylesFactory } from '@grafana/ui'; import { HorizontalGroup, Icon, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui';
import config from 'app/core/config'; import config from 'app/core/config';
import { appEvents } from 'app/core/core'; import { appEvents } from 'app/core/core';
...@@ -17,8 +17,6 @@ import { DashNavTimeControls } from '../DashNav/DashNavTimeControls'; ...@@ -17,8 +17,6 @@ import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
import { OptionsPaneContent } from './OptionsPaneContent'; import { OptionsPaneContent } from './OptionsPaneContent';
import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton'; import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems'; import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems';
import { BackButton } from 'app/core/components/BackButton/BackButton';
import { PageToolbar } from 'app/core/components/PageToolbar/PageToolbar';
import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper'; import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy'; import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy';
import { DashboardPanel } from '../../dashgrid/DashboardPanel'; import { DashboardPanel } from '../../dashgrid/DashboardPanel';
...@@ -253,22 +251,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -253,22 +251,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
renderEditorActions() { renderEditorActions() {
return [ return [
<Button <ToolbarButton
icon="cog" icon="cog"
onClick={this.onOpenDashboardSettings} onClick={this.onOpenDashboardSettings}
variant="secondary"
title="Open dashboard settings" title="Open dashboard settings"
key="settings" key="settings"
/>, />,
<Button onClick={this.onDiscard} variant="secondary" title="Undo all changes" key="discard"> <ToolbarButton onClick={this.onDiscard} title="Undo all changes" key="discard">
Discard Discard
</Button>, </ToolbarButton>,
<Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard" key="save"> <ToolbarButton onClick={this.onSaveDashboard} title="Apply changes and save dashboard" key="save">
Save Save
</Button>, </ToolbarButton>,
<Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard" key="apply"> <ToolbarButton
onClick={this.onPanelExit}
variant="primary"
title="Apply changes and go back to dashboard"
key="apply"
>
Apply Apply
</Button>, </ToolbarButton>,
]; ];
} }
...@@ -308,11 +310,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -308,11 +310,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
return ( return (
<div className={styles.wrapper} aria-label={selectors.components.PanelEditor.General.content}> <div className={styles.wrapper} aria-label={selectors.components.PanelEditor.General.content}>
<PageToolbar <PageToolbar title={`${dashboard.title} / Edit Panel`} onGoBack={this.onPanelExit}>
title={`${dashboard.title} / Edit Panel`} {this.renderEditorActions()}
titlePrefix={<BackButton onClick={this.onPanelExit} surface="panel" />} </PageToolbar>
actions={this.renderEditorActions()}
/>
<div className={styles.verticalSplitPanesWrapper}> <div className={styles.verticalSplitPanesWrapper}>
<SplitPaneWrapper <SplitPaneWrapper
leftPaneComponents={this.renderPanelAndEditor(styles)} leftPaneComponents={this.renderPanelAndEditor(styles)}
......
public/sass/components/_navbar.scss
...@@ -121,10 +121,3 @@ ...@@ -121,10 +121,3 @@
} }
} }
} }
.navbar-edit {
display: flex;
height: $navbarHeight;
align-items: center;
padding-right: 16px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment