From 8e9ccfc66e38e15e5b85924262c17c245dc7f51c Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 1 Mar 2023 15:31:32 +0000 Subject: [PATCH] Navigation: Fix broken layout at 544px (#63793) * ensure media queries transition properly * fix unit tests --- packages/grafana-data/src/themes/breakpoints.ts | 4 ++-- .../Organization/OrganizationSwitcher.test.tsx | 10 +++++++++- .../AppChrome/Organization/OrganizationSwitcher.tsx | 4 ++-- .../core/components/AppChrome/QuickAdd/QuickAdd.tsx | 4 ++-- .../AppChrome/TopBar/TopSearchBarSection.test.tsx | 4 ++-- .../AppChrome/TopBar/TopSearchBarSection.tsx | 4 ++-- .../AppChrome/TopSearchBarCommandPaletteTrigger.tsx | 4 ++-- public/app/core/hooks/useMediaQueryChange.ts | 2 +- 8 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/grafana-data/src/themes/breakpoints.ts b/packages/grafana-data/src/themes/breakpoints.ts index 4d6e1f67d64..1ad0d713781 100644 --- a/packages/grafana-data/src/themes/breakpoints.ts +++ b/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 */ diff --git a/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx b/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx index b256dbd1331..60a9e08d545 100644 --- a/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx +++ b/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx @@ -29,6 +29,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial { + 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: { diff --git a/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.tsx b/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.tsx index 3727b903a6b..bcd70326ad7 100644 --- a/public/app/core/components/AppChrome/Organization/OrganizationSwitcher.tsx +++ b/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); }, }); diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx index ac38c048f0b..9a13cfb57da 100644 --- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx +++ b/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); }, }); diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx index f9094a4716f..53be3e51f3b 100644 --- a/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx +++ b/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(); diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.tsx index 5f3b0419bc9..9098ac699e2 100644 --- a/public/app/core/components/AppChrome/TopBar/TopSearchBarSection.tsx +++ b/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); }, }); diff --git a/public/app/core/components/AppChrome/TopSearchBarCommandPaletteTrigger.tsx b/public/app/core/components/AppChrome/TopSearchBarCommandPaletteTrigger.tsx index 08a5c701c51..92ffcfc22d9 100644 --- a/public/app/core/components/AppChrome/TopSearchBarCommandPaletteTrigger.tsx +++ b/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); }, }); diff --git a/public/app/core/hooks/useMediaQueryChange.ts b/public/app/core/hooks/useMediaQueryChange.ts index 875898c5f5a..0e8d95cd3ce 100644 --- a/public/app/core/hooks/useMediaQueryChange.ts +++ b/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);