PanelEdit: Get rid of last remaining usage of navbar-button (#30682)

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

@@ -145,11 +145,9 @@ class DashNav extends PureComponent<Props> {
       buttons.push(
         <DashNavButton
           tooltip="Mark as favorite"
-          classSuffix="star"
           icon={isStarred ? 'favorite' : 'star'}
           iconType={isStarred ? 'mono' : 'default'}
           iconSize="lg"
-          noBorder={true}
           onClick={this.onStarDashboard}
           key="button-star"
         />
@@ -162,10 +160,8 @@ class DashNav extends PureComponent<Props> {
           {({ showModal, hideModal }) => (
             <DashNavButton
               tooltip="Share dashboard"
-              classSuffix="share"
               icon="share-alt"
               iconSize="lg"
-              noBorder={true}
               onClick={() => {
                 showModal(ShareModal, {
                   dashboard,

public/app/features/dashboard/components/DashNav/DashNavButton.tsx

@@ -2,71 +2,37 @@
 import React, { FunctionComponent } from 'react';
 import { css } from 'emotion';
 // Components
-import { Tooltip, Icon, IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
+import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
 interface Props {
   icon?: IconName;
   tooltip: string;
-  classSuffix?: string;
   onClick?: () => void;
   href?: string;
   children?: React.ReactNode;
   iconType?: IconType;
   iconSize?: IconSize;
-  noBorder?: boolean;
 }
 
-export const DashNavButton: FunctionComponent<Props> = ({
-  icon,
-  iconType,
-  iconSize,
-  tooltip,
-  classSuffix,
-  onClick,
-  href,
-  children,
-  noBorder,
-}) => {
+export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSize, tooltip, onClick, children }) => {
   const theme = useTheme();
   const styles = getStyles(theme);
 
-  if (noBorder) {
-    return (
-      <div className={styles.noBorderContainer}>
-        {icon && (
-          <IconButton
-            name={icon}
-            size={iconSize}
-            iconType={iconType}
-            tooltip={tooltip}
-            tooltipPlacement="bottom"
-            onClick={onClick}
-          />
-        )}
-        {children}
-      </div>
-    );
-  }
   return (
-    <Tooltip content={tooltip} placement="bottom">
-      {onClick ? (
-        <button
-          className={`btn navbar-button navbar-button--${classSuffix}`}
+    <div className={styles.noBorderContainer}>
+      {icon && (
+        <IconButton
+          name={icon}
+          size={iconSize}
+          iconType={iconType}
+          tooltip={tooltip}
+          tooltipPlacement="bottom"
           onClick={onClick}
-          aria-label={selectors.components.PageToolbar.item(tooltip)}
-        >
-          {icon && <Icon name={icon} type={iconType} size={iconSize || 'lg'} />}
-          {children}
-        </button>
-      ) : (
-        <a className={`btn navbar-button navbar-button--${classSuffix}`} href={href}>
-          {icon && <Icon name={icon} type={iconType} size="lg" />}
-          {children}
-        </a>
+        />
       )}
-    </Tooltip>
+      {children}
+    </div>
   );
 };
 

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

@@ -2,12 +2,22 @@ import React, { CSSProperties, useCallback, useState } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { FieldConfigSource, GrafanaTheme, PanelPlugin, SelectableValue } from '@grafana/data';
 import { DashboardModel, PanelModel } from '../../state';
-import { CustomScrollbar, Icon, Input, Select, stylesFactory, Tab, TabContent, TabsBar, useTheme } from '@grafana/ui';
+import {
+  CustomScrollbar,
+  Icon,
+  Input,
+  Select,
+  stylesFactory,
+  Tab,
+  TabContent,
+  TabsBar,
+  ToolbarButton,
+  useTheme,
+} from '@grafana/ui';
 import { OverrideFieldConfigEditor } from './OverrideFieldConfigEditor';
 import { DefaultFieldConfigEditor } from './DefaultFieldConfigEditor';
 import { css } from 'emotion';
 import { PanelOptionsTab } from './PanelOptionsTab';
-import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 import { usePanelLatestData } from './usePanelLatestData';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -213,13 +223,7 @@ export const TabsBarContent: React.FC<{
         </>
       )}
       <div className={styles.tabsButton}>
-        <DashNavButton
-          icon="angle-right"
-          tooltip="Close options pane"
-          classSuffix="close-options"
-          onClick={onClose}
-          iconSize="lg"
-        />
+        <ToolbarButton icon="angle-right" tooltip="Close options pane" onClick={onClose} />
       </div>
     </>
   );

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 { HorizontalGroup, Icon, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui';
+import { HorizontalGroup, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui';
 
 import config from 'app/core/config';
 import { appEvents } from 'app/core/core';
@@ -15,7 +15,6 @@ import { calculatePanelSize } from './utils';
 import { PanelEditorTabs } from './PanelEditorTabs';
 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 { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
 import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy';
@@ -235,13 +234,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
               onChangeTimeZone={updateTimeZoneForSession}
             />
             {!uiState.isPanelOptionsVisible && (
-              <DashNavButton
-                onClick={this.onTogglePanelOptions}
-                tooltip="Open options pane"
-                classSuffix="close-options"
-              >
-                <Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
-              </DashNavButton>
+              <ToolbarButton onClick={this.onTogglePanelOptions} tooltip="Open options pane" icon="angle-left">
+                Show options
+              </ToolbarButton>
             )}
           </HorizontalGroup>
         </HorizontalGroup>