From d4bb8122cbf975a02a709f63bc6cce3b9c8a3d82 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 4 Oct 2024 09:54:17 +0100
Subject: [PATCH] SingleTopNav: Tweaks for mobile responsiveness (#94188)

tweaks for mobile responsiveness
---
 .../components/AppChrome/QuickAdd/QuickAdd.tsx  |  6 ++++--
 .../AppChrome/TopBar/SingleTopBar.tsx           | 17 ++++++++---------
 .../TopSearchBarCommandPaletteTrigger.tsx       |  4 +++-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
index f097d0073a1..f2d3d7d0808 100644
--- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
+++ b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { useSelector } from 'app/types';
@@ -22,6 +22,8 @@ export const QuickAdd = ({}: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
   const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
+  const isSingleTopNav = config.featureToggles.singleTopNav;
+  const showQuickAdd = createActions.length > 0 && (!isSingleTopNav || !isSmallScreen);
 
   useMediaQueryChange({
     breakpoint,
@@ -45,7 +47,7 @@ export const QuickAdd = ({}: Props) => {
     );
   };
 
-  return createActions.length > 0 ? (
+  return showQuickAdd ? (
     <>
       <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
         <ToolbarButton
diff --git a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
index 4d8a8aa6b73..ec10fcb7a58 100644
--- a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
@@ -23,7 +23,6 @@ import { TOP_BAR_LEVEL_HEIGHT } from '../types';
 import { SignInLink } from './SignInLink';
 import { TopNavBarMenu } from './TopNavBarMenu';
 import { TopSearchBarCommandPaletteTrigger } from './TopSearchBarCommandPaletteTrigger';
-import { TopSearchBarSection } from './TopSearchBarSection';
 
 interface Props {
   sectionNav: NavModelItem;
@@ -52,7 +51,7 @@ export const SingleTopBar = memo(function SingleTopBar({
 
   return (
     <div className={styles.layout}>
-      <TopSearchBarSection>
+      <Stack minWidth={0} gap={0.5} alignItems="center">
         {!menuDockedAndOpen && (
           <ToolbarButton narrow onClick={onToggleMegaMenu} tooltip={t('navigation.megamenu.open', 'Open menu')}>
             <Stack gap={0} alignItems="center">
@@ -63,9 +62,9 @@ export const SingleTopBar = memo(function SingleTopBar({
         )}
         <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />
         <ScopesSelector />
-      </TopSearchBarSection>
+      </Stack>
 
-      <TopSearchBarSection align="right">
+      <Stack gap={0.5} alignItems="center">
         <TopSearchBarCommandPaletteTrigger />
         <QuickAdd />
         {enrichedHelpNode && (
@@ -88,7 +87,7 @@ export const SingleTopBar = memo(function SingleTopBar({
         <ToolbarButton className={styles.kioskToggle} onClick={onToggleKioskMode} narrow aria-label="Enable kiosk mode">
           <Icon name="angle-up" size="xl" />
         </ToolbarButton>
-      </TopSearchBarSection>
+      </Stack>
     </div>
   );
 });
@@ -97,15 +96,15 @@ const getStyles = (theme: GrafanaTheme2, menuDockedAndOpen: boolean) => ({
   layout: css({
     height: TOP_BAR_LEVEL_HEIGHT,
     display: 'flex',
-    gap: theme.spacing(1),
+    gap: theme.spacing(2),
     alignItems: 'center',
     padding: theme.spacing(0, 1),
     paddingLeft: menuDockedAndOpen ? theme.spacing(3.5) : theme.spacing(0.75),
     borderBottom: `1px solid ${theme.colors.border.weak}`,
     justifyContent: 'space-between',
 
-    [theme.breakpoints.up('sm')]: {
-      gridTemplateColumns: '2fr minmax(240px, 1fr)', // TODO probably change these values
+    [theme.breakpoints.up('lg')]: {
+      gridTemplateColumns: '2fr minmax(440px, 1fr)',
       display: 'grid',
 
       justifyContent: 'flex-start',
@@ -115,7 +114,7 @@ const getStyles = (theme: GrafanaTheme2, menuDockedAndOpen: boolean) => ({
     display: 'flex',
     overflow: 'hidden',
     [theme.breakpoints.down('sm')]: {
-      minWidth: '50%',
+      minWidth: '40%',
     },
   }),
   img: css({
diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
index 8ad8eac711c..40092260310 100644
--- a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
@@ -3,6 +3,7 @@ import { useKBar, VisualState } from 'kbar';
 import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { focusCss } from '@grafana/ui/src/themes/mixins';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
@@ -11,12 +12,13 @@ import { getModKey } from 'app/core/utils/browser';
 
 export function TopSearchBarCommandPaletteTrigger() {
   const theme = useTheme2();
+  const isSingleTopNav = config.featureToggles.singleTopNav;
   const { query: kbar } = useKBar((kbarState) => ({
     kbarSearchQuery: kbarState.searchQuery,
     kbarIsOpen: kbarState.visualState === VisualState.showing,
   }));
 
-  const breakpoint = theme.breakpoints.values.sm;
+  const breakpoint = isSingleTopNav ? theme.breakpoints.values.lg : theme.breakpoints.values.sm;
 
   const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);