Explore: move items out of topnav & use canvas variant for toolbar buttons (#60630)

* Explore: remove topnav

* PageToolbar: fix left items margin when no title or page icon is set

* add missing key prop & fix tests

* use canvas variant in live logs

* avoid rendering empty space

* fix test

* avoid disabling split resize button when live tailing

* minor touchups

* Update packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -190,7 +190,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       min-width: 0;
     `,
     h1Styles: css`
-      margin: 0;
+      margin: ${spacing(0, 1, 0, 0)};
       line-height: inherit;
       flex-grow: 1;
       min-width: 0;
@@ -229,7 +229,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       ${theme.breakpoints.up('md')} {
         align-items: center;
         display: flex;
-        padding-left: ${spacing(0.5)};
+        padding-right: ${spacing(0.5)};
       }
     `,
   };

public/app/features/explore/AddToDashboard/index.tsx

@@ -20,6 +20,7 @@ export const AddToDashboard = ({ exploreId }: Props) => {
     <>
       <ToolbarButton
         icon="apps"
+        variant="canvas"
         onClick={() => setIsOpen(true)}
         aria-label="Add to dashboard"
         disabled={!explorePaneHasQueries}

public/app/features/explore/Explore.tsx

@@ -79,9 +79,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: ${theme.spacing(2)};
       padding-top: 0;
     `,
-    exploreContainerTopnav: css`
-      padding-top: ${theme.spacing(2)};
-    `,
   };
 };
 
@@ -409,7 +406,6 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
       showTrace,
       showNodeGraph,
       showFlameGraph,
-      splitted,
       timeZone,
       isFromCompactUrl,
     } = this.props;
@@ -441,11 +437,7 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
         {isFromCompactUrl ? this.renderCompactUrlWarning() : null}
         {datasourceMissing ? this.renderEmptyState(styles.exploreContainer) : null}
         {datasourceInstance && (
-          <div
+          <div className={styles.exploreContainer}>
-            className={cx(styles.exploreContainer, {
-              [styles.exploreContainerTopnav]: Boolean(config.featureToggles.topnav && !splitted),
-            })}
-          >
             <PanelContainer className={styles.queryContainer}>
               <QueryRows exploreId={exploreId} />
               <SecondaryActions

public/app/features/explore/ExploreTimeControls.tsx

@@ -88,6 +88,7 @@ export class ExploreTimeControls extends Component<Props> {
 
     return (
       <TimePickerWithHistory
+        isOnCanvas
         {...timePickerCommonProps}
         timeSyncButton={timeSyncButton}
         isSynced={syncedTimes}

public/app/features/explore/ExploreToolbar.tsx

@@ -4,14 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data';
 import { config, DataSourcePicker, reportInteraction } from '@grafana/runtime';
-import {
+import { defaultIntervals, PageToolbar, RefreshPicker, SetInterval, ToolbarButton, ButtonGroup } from '@grafana/ui';
-  defaultIntervals,
-  PageToolbar,
-  RefreshPicker,
-  SetInterval,
-  ToolbarButton,
-  ToolbarButtonRow,
-} from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { contextSrv } from 'app/core/core';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@@ -142,8 +135,6 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
       syncedTimes,
       onChangeTimeZone,
       onChangeFiscalYearStartMonth,
-      refreshInterval,
-      loading,
       isPaused,
       hasLiveOption,
       containerWidth,
@@ -168,6 +159,7 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
     return [
       !splitted ? (
         <ToolbarButton
+          variant="canvas"
           key="split"
           tooltip="Split the pane"
           onClick={this.onOpenSplitView}
@@ -177,19 +169,19 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
           Split
         </ToolbarButton>
       ) : (
-        <React.Fragment key="splitActions">
+        <ButtonGroup key="split-controls">
           <ToolbarButton
+            variant="canvas"
             tooltip={`${isLargerExploreId ? 'Narrow' : 'Widen'} pane`}
-            disabled={isLive}
             onClick={onClickResize}
             icon={isLargerExploreId ? 'gf-movepane-left' : 'gf-movepane-right'}
             iconOnly={true}
             className={styles.rotateIcon}
           />
-          <ToolbarButton tooltip="Close split pane" onClick={this.onCloseSplitView} icon="times">
+          <ToolbarButton tooltip="Close split pane" onClick={this.onCloseSplitView} icon="times" variant="canvas">
             Close
           </ToolbarButton>
-        </React.Fragment>
+        </ButtonGroup>
       ),
 
       showExploreToDashboard && (
@@ -217,10 +209,6 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
 
       this.renderRefreshPicker(showSmallTimePicker),
 
-      refreshInterval && (
-        <SetInterval key="setInterval" func={this.onRunQuery} interval={refreshInterval} loading={loading} />
-      ),
-
       hasLiveOption && (
         <LiveTailControls key="liveControls" exploreId={exploreId}>
           {(c) => {
@@ -251,12 +239,13 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
   };
 
   render() {
-    const { datasourceMissing, exploreId, splitted, containerWidth, topOfViewRef } = this.props;
+    const { datasourceMissing, exploreId, splitted, containerWidth, topOfViewRef, refreshInterval, loading } =
+      this.props;
 
     const showSmallDataSourcePicker = (splitted ? containerWidth < 700 : containerWidth < 800) || false;
     const isTopnav = config.featureToggles.topnav;
 
-    const getDashNav = () => (
+    const shareButton = (
       <DashNavButton
         key="share"
         tooltip="Copy shortened link"
@@ -278,39 +267,25 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
         />
       );
 
-    const topNavActions = [
+    const toolbarLeftItems = [
-      getDashNav(),
+      // We only want to show the shortened link button in the left Toolbar if topnav is not enabled as with topnav enabled it sits next to the brecrumbs
-      !splitted && getDataSourcePicker(),
+      !isTopnav && exploreId === ExploreId.left && shareButton,
-      <div style={{ flex: 1 }} key="spacer" />,
-      <ToolbarButtonRow key="actions" alignment="right">
-        {this.renderActions()}
-      </ToolbarButtonRow>,
-    ].filter(Boolean);
-
-    const toolbarLeftItems = [exploreId === ExploreId.left && getDashNav(), getDataSourcePicker()].filter(Boolean);
-
-    const toolbarLeftItemsTopNav = [
-      exploreId === ExploreId.left && (
-        <AppChromeUpdate
-          actions={[getDashNav(), !splitted && getDataSourcePicker(), <div style={{ flex: 1 }} key="spacer" />].filter(
-            Boolean
-          )}
-        />
-      ),
       getDataSourcePicker(),
     ].filter(Boolean);
 
-    return isTopnav && !splitted ? (
+    return (
-      <div ref={topOfViewRef}>
-        <AppChromeUpdate actions={topNavActions} />
-      </div>
-    ) : (
       <div ref={topOfViewRef}>
+        {refreshInterval && <SetInterval func={this.onRunQuery} interval={refreshInterval} loading={loading} />}
+        {isTopnav && (
+          <div ref={topOfViewRef}>
+            <AppChromeUpdate actions={[shareButton, <div style={{ flex: 1 }} key="spacer" />]} />
+          </div>
+        )}
         <PageToolbar
           aria-label="Explore toolbar"
           title={exploreId === ExploreId.left && !isTopnav ? 'Explore' : undefined}
           pageIcon={exploreId === ExploreId.left && !isTopnav ? 'compass' : undefined}
-          leftItems={isTopnav ? toolbarLeftItemsTopNav : toolbarLeftItems}
+          leftItems={toolbarLeftItems}
         >
           {this.renderActions()}
         </PageToolbar>

public/app/features/explore/LiveTailButton.tsx

@@ -16,7 +16,7 @@ type LiveTailButtonProps = {
 
 export function LiveTailButton(props: LiveTailButtonProps) {
   const { start, pause, resume, isLive, isPaused, stop, splitted } = props;
-  const buttonVariant = isLive && !isPaused ? 'active' : 'default';
+  const buttonVariant = isLive && !isPaused ? 'active' : 'canvas';
   const onClickMain = isLive ? (isPaused ? resume : pause) : start;
 
   return (

public/app/features/explore/TimeSyncButton.tsx

@@ -20,7 +20,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
     <Tooltip content={syncTimesTooltip} placement="bottom">
       <ToolbarButton
         icon="link"
-        variant={isSynced ? 'active' : 'default'}
+        variant={isSynced ? 'active' : 'canvas'}
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={onClick}
       />