Navigation: Fix broken layout at 544px (#63793)

* ensure media queries transition properly

* fix unit tests

packages/grafana-data/src/themes/breakpoints.ts

@@ -16,8 +16,8 @@ export interface ThemeBreakpoints {
   values: ThemeBreakpointValues;
   keys: string[];
   unit: string;
-  up: (key: ThemeBreakpointsKey) => string;
-  down: (key: ThemeBreakpointsKey) => string;
+  up: (key: ThemeBreakpointsKey | number) => string;
+  down: (key: ThemeBreakpointsKey | number) => string;
 }
 
 /** @internal */

public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx

@@ -29,6 +29,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial<appTypes.
 };
 
 describe('OrganisationSwitcher', () => {
+  beforeEach(() => {
+    (window.matchMedia as jest.Mock).mockImplementation(() => ({
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      matches: true,
+    }));
+  });
+
   it('should only render if more than one organisations', () => {
     renderWithProvider({
       initialState: {
@@ -75,7 +83,7 @@ describe('OrganisationSwitcher', () => {
     (window.matchMedia as jest.Mock).mockImplementation(() => ({
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      matches: () => true,
+      matches: false,
     }));
     renderWithProvider({
       initialState: {

public/app/core/components/AppChrome/Organization/OrganizationSwitcher.tsx

@@ -31,12 +31,12 @@ export function OrganizationSwitcher() {
 
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
 
   useMediaQueryChange({
     breakpoint,
     onChange: (e) => {
-      setIsSmallScreen(e.matches);
+      setIsSmallScreen(!e.matches);
     },
   });
 

public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx

@@ -19,13 +19,13 @@ export const QuickAdd = ({}: Props) => {
   const navBarTree = useSelector((state) => state.navBarTree);
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
   const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
 
   useMediaQueryChange({
     breakpoint,
     onChange: (e) => {
-      setIsSmallScreen(e.matches);
+      setIsSmallScreen(!e.matches);
     },
   });
 

public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx

@@ -17,7 +17,7 @@ describe('TopSearchBarSection', () => {
     (window.matchMedia as jest.Mock).mockImplementation(() => ({
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      matches: () => false,
+      matches: true,
     }));
 
     const { container } = renderComponent();
@@ -30,7 +30,7 @@ describe('TopSearchBarSection', () => {
     (window.matchMedia as jest.Mock).mockImplementation(() => ({
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      matches: () => true,
+      matches: false,
     }));
 
     const { container } = renderComponent();

public/app/core/components/AppChrome/TopBar/TopSearchBarSection.tsx

@@ -15,12 +15,12 @@ export function TopSearchBarSection({ children, align = 'left' }: TopSearchBarSe
   const theme = useTheme2();
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
 
   useMediaQueryChange({
     breakpoint,
     onChange: (e: MediaQueryListEvent) => {
-      setIsSmallScreen(e.matches);
+      setIsSmallScreen(!e.matches);
     },
   });
 

public/app/core/components/AppChrome/TopSearchBarCommandPaletteTrigger.tsx

@@ -18,12 +18,12 @@ export function TopSearchBarCommandPaletteTrigger() {
 
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
 
   useMediaQueryChange({
     breakpoint,
     onChange: (e) => {
-      setIsSmallScreen(e.matches);
+      setIsSmallScreen(!e.matches);
     },
   });
 

public/app/core/hooks/useMediaQueryChange.ts

@@ -8,7 +8,7 @@ export function useMediaQueryChange({
   onChange: (e: MediaQueryListEvent) => void;
 }) {
   useEffect(() => {
-    const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);
     const onMediaQueryChange = (e: MediaQueryListEvent) => onChange(e);
     mediaQuery.addEventListener('change', onMediaQueryChange);