DashboardSettings & PanelEdit: Use new PageToolbar (#30675)

* DashboardSettings & PanelEdit: Use new PageToolbar

* Update

* removed back button

public/app/core/components/BackButton/BackButton.tsx

-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 { css, cx } from 'emotion';
 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 { contextSrv } from 'app/core/services/context_srv';
-import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { updateLocation } from 'app/core/actions';
 import { DashboardModel } from '../../state/DashboardModel';
@@ -146,7 +145,6 @@ export class DashboardSettings extends PureComponent<Props> {
   render() {
     const { dashboard, editview } = this.props;
     const folderTitle = dashboard.meta.folderTitle;
-    const haveFolder = (dashboard.meta.folderId ?? 0) > 0;
     const pages = this.getPages();
     const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
     const canSaveAs = contextSrv.hasEditPermissionInFolders;
@@ -155,15 +153,7 @@ export class DashboardSettings extends PureComponent<Props> {
 
     return (
       <div className="dashboard-settings">
-        <div className="navbar navbar--edit">
-          <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>
+        <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={this.onClose} />
         <CustomScrollbar>
           <div className={styles.scrollInner}>
             <div className={styles.settingsWrapper}>

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
 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 { appEvents } from 'app/core/core';
@@ -17,8 +17,6 @@ import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
 import { OptionsPaneContent } from './OptionsPaneContent';
 import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 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 { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy';
 import { DashboardPanel } from '../../dashgrid/DashboardPanel';
@@ -253,22 +251,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
   renderEditorActions() {
     return [
-      <Button
+      <ToolbarButton
         icon="cog"
         onClick={this.onOpenDashboardSettings}
-        variant="secondary"
         title="Open dashboard 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
-      </Button>,
-      <Button onClick={this.onSaveDashboard} variant="secondary" title="Apply changes and save dashboard" key="save">
+      </ToolbarButton>,
+      <ToolbarButton onClick={this.onSaveDashboard} title="Apply changes and save dashboard" key="save">
         Save
-      </Button>,
-      <Button onClick={this.onPanelExit} title="Apply changes and go back to dashboard" key="apply">
+      </ToolbarButton>,
+      <ToolbarButton
+        onClick={this.onPanelExit}
+        variant="primary"
+        title="Apply changes and go back to dashboard"
+        key="apply"
+      >
         Apply
-      </Button>,
+      </ToolbarButton>,
     ];
   }
 
@@ -308,11 +310,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
 
     return (
       <div className={styles.wrapper} aria-label={selectors.components.PanelEditor.General.content}>
-        <PageToolbar
-          title={`${dashboard.title} / Edit Panel`}
-          titlePrefix={<BackButton onClick={this.onPanelExit} surface="panel" />}
-          actions={this.renderEditorActions()}
-        />
+        <PageToolbar title={`${dashboard.title} / Edit Panel`} onGoBack={this.onPanelExit}>
+          {this.renderEditorActions()}
+        </PageToolbar>
         <div className={styles.verticalSplitPanesWrapper}>
           <SplitPaneWrapper
             leftPaneComponents={this.renderPanelAndEditor(styles)}

public/sass/components/_navbar.scss

@@ -121,10 +121,3 @@
     }
   }
 }
-
-.navbar-edit {
-  display: flex;
-  height: $navbarHeight;
-  align-items: center;
-  padding-right: 16px;
-}