Explore: Remove use of AppChrome navbar (#114680)

* Explore: Remove use of AppChrome navbar

* fix lint

* Active state

go.work.sum

@@ -2239,4 +2239,4 @@ sigs.k8s.io/yaml v1.4.0/go.mod h1:Ejl7/uTz7PSA4eKMyQCUTnhZYNmLIl+5c2lQPGR2BPY=
 sigs.k8s.io/yaml v1.5.0/go.mod h1:wZs27Rbxoai4C0f8/9urLZtZtF3avA3gKvGyPdDqTO4=
 tags.cncf.io/container-device-interface v0.7.2/go.mod h1:Xb1PvXv2BhfNb3tla4r9JL129ck1Lxv9KuU6eVOfKto=
 tags.cncf.io/container-device-interface/specs-go v0.7.0/go.mod h1:hMAwAbMZyBLdmYqWgYcKH0F/yctNpV3P35f+/088A80=
-xorm.io/builder v0.3.6/go.mod h1:LEFAPISnRzG+zxaxj2vPicRwz67BdhFreKg8yv8/TgU=
+xorm.io/builder v0.3.6/go.mod h1:LEFAPISnRzG+zxaxj2vPicRwz67BdhFreKg8yv8/TgU=

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

@@ -189,7 +189,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       gap: theme.spacing(2),
       justifyContent: 'space-between',
-      padding: theme.spacing(1.5, 2),
+      padding: theme.spacing(2, 2),
 
       [theme.breakpoints.down('md')]: {
         paddingLeft: '53px',

public/app/features/explore/ExploreToolbar.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { shallowEqual } from 'react-redux';
 
 import { DataSourceInstanceSettings, RawTimeRange, GrafanaTheme2 } from '@grafana/data';
-import { Components } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
 import {
@@ -15,9 +14,7 @@ import {
   ToolbarButton,
   ButtonGroup,
   useStyles2,
-  Button,
 } from '@grafana/ui';
-import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 import { CORRELATION_EDITOR_POST_CONFIRM_ACTION } from 'app/types/explore';
@@ -28,7 +25,6 @@ import { getFiscalYearStartMonth, getTimeZone } from '../profile/state/selectors
 
 import { ExploreTimeControls } from './ExploreTimeControls';
 import { LiveTailButton } from './LiveTailButton';
-import { useQueriesDrawerContext } from './QueriesDrawer/QueriesDrawerContext';
 import { ShortLinkButtonMenu } from './ShortLinkButtonMenu';
 import { ToolbarExtensionPoint } from './extensions/ToolbarExtensionPoint';
 import { changeDatasource } from './state/datasource';
@@ -91,7 +87,6 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
   const correlationDetails = useSelector(selectCorrelationDetails);
   const isCorrelationsEditorMode = correlationDetails?.editorMode || false;
   const isLeftPane = useSelector(isLeftPaneSelector(exploreId));
-  const { drawerOpened, setDrawerOpened } = useQueriesDrawerContext();
 
   const shouldRotateSplitIcon = useMemo(
     () => (isLeftPane && isLargerPane) || (!isLeftPane && !isLargerPane),
@@ -204,25 +199,9 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
     dispatch(changeRefreshInterval({ exploreId, refreshInterval }));
   };
 
-  const navBarActions = [
-    <Button
-      key="query-history"
-      size="sm"
-      variant={'secondary'}
-      aria-label={t('explore.secondary-actions.query-history-button-aria-label', 'Query history')}
-      onClick={() => setDrawerOpened(!drawerOpened)}
-      data-testid={Components.QueryTab.queryHistoryButton}
-      icon="history"
-    >
-      <Trans i18nKey="explore.secondary-actions.query-history-button">Query history</Trans>
-    </Button>,
-    <ShortLinkButtonMenu key="share" />,
-  ];
-
   return (
     <div>
       {refreshInterval && <SetInterval func={onRunQuery} interval={refreshInterval} loading={loading} />}
-      <AppChromeUpdate actions={navBarActions} />
       <PageToolbar
         aria-label={t('explore.toolbar.aria-label', 'Explore toolbar')}
         leftItems={[
@@ -328,6 +307,7 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
             primary={true}
             width={(showSmallTimePicker ? 35 : 108) + 'px'}
           />,
+          (!splitted || !isLeftPane) && <ShortLinkButtonMenu key="share" hideText={showSmallTimePicker} />,
           datasourceInstance?.meta.streaming && (
             <LiveTailControls key="liveControls" exploreId={exploreId}>
               {(c) => {

public/app/features/explore/SecondaryActions.tsx

@@ -1,10 +1,11 @@
 import { css } from '@emotion/css';
 
 import { CoreApp, GrafanaTheme2 } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
+import { Components, selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { ToolbarButton, useTheme2 } from '@grafana/ui';
 
+import { useQueriesDrawerContext } from './QueriesDrawer/QueriesDrawerContext';
 import { useQueryLibraryContext } from './QueryLibrary/QueryLibraryContext';
 import { type OnSelectQueryType } from './QueryLibrary/types';
 
@@ -41,6 +42,7 @@ export function SecondaryActions({
   const theme = useTheme2();
   const styles = getStyles(theme);
   const { queryLibraryEnabled, openDrawer: openQueryLibraryDrawer } = useQueryLibraryContext();
+  const { drawerOpened, setDrawerOpened } = useQueriesDrawerContext();
 
   return (
     <div className={styles.containerMargin}>
@@ -74,6 +76,16 @@ export function SecondaryActions({
           )}
         </>
       )}
+      <ToolbarButton
+        key="query-history"
+        variant={drawerOpened ? 'active' : 'canvas'}
+        aria-label={t('explore.secondary-actions.query-history-button-aria-label', 'Query history')}
+        onClick={() => setDrawerOpened(!drawerOpened)}
+        data-testid={Components.QueryTab.queryHistoryButton}
+        icon="history"
+      >
+        <Trans i18nKey="explore.secondary-actions.query-history-button">Query history</Trans>
+      </ToolbarButton>
       <ToolbarButton
         variant={queryInspectorButtonActive ? 'active' : 'canvas'}
         aria-label={t('explore.secondary-actions.query-inspector-button-aria-label', 'Query inspector')}

public/app/features/explore/ShortLinkButtonMenu.tsx

@@ -26,7 +26,7 @@ interface ShortLinkMenuItemData {
   absTime: boolean;
 }
 
-export function ShortLinkButtonMenu() {
+export function ShortLinkButtonMenu({ hideText }: { hideText: boolean }) {
   const defaultMode: ShortLinkMenuItemData = {
     key: 'copy-link',
     label: t('explore.toolbar.copy-shortened-link', 'Copy shortened URL'),
@@ -134,7 +134,6 @@ export function ShortLinkButtonMenu() {
       <Button
         tooltip={lastSelected.label}
         icon={lastSelected.icon}
-        size="sm"
         variant="secondary"
         onClick={() => {
           const url = lastSelected.getUrl();
@@ -142,12 +141,11 @@ export function ShortLinkButtonMenu() {
         }}
         aria-label={t('explore.toolbar.copy-shortened-link', 'Copy shortened URL')}
       >
-        <Trans i18nKey="explore.toolbar.copy-shortened-link-label">Share</Trans>
+        {!hideText && <Trans i18nKey="explore.toolbar.copy-shortened-link-label">Share</Trans>}
       </Button>
       <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
         <Button
           variant={'secondary'}
-          size="sm"
           icon={isOpen ? 'angle-up' : 'angle-down'}
           aria-label={t('explore.toolbar.copy-shortened-link-menu', 'Open copy link options')}
         />