fix: Hide navigator on sync page

src/layouts/Header/Header.test.tsx

@@ -98,13 +98,19 @@ afterAll(() => {
   server.close()
 })
 
-const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <MemoryRouter initialEntries={[`/gh/codecov/test-repo`]}>
-    <Route path="/:provider/:owner/:repo">
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </Route>
-  </MemoryRouter>
-)
+const wrapper =
+  (
+    initialEntries = '/gh/codecov/test-repo'
+  ): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <MemoryRouter initialEntries={[initialEntries]}>
+      <Route path="/:provider/:owner/:repo">
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </Route>
+    </MemoryRouter>
+  )
 
 type SetupArgs = {
   user?: User
@@ -124,7 +130,7 @@ describe('Header', () => {
     it('shows impersonating banner', async () => {
       setup({})
       mockedUseImpersonate.mockReturnValue({ isImpersonating: true })
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const impersonatingBanner = await screen.findByText('Impersonating')
       expect(impersonatingBanner).toBeInTheDocument()
@@ -133,23 +139,23 @@ describe('Header', () => {
   describe('when are not logged in', () => {
     it('shows guest header', async () => {
       setup({ user: mockNullUser })
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const guestHeader = await screen.findByText('Why Test Code?')
       expect(guestHeader).toBeInTheDocument()
     })
 
     it('shows navigator', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const navigator = await screen.findByText('Navigator')
       expect(navigator).toBeInTheDocument()
     })
 
     it('does not show user/help dropdowns', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const userDropdown = screen.queryByText('User Dropdown')
       expect(userDropdown).not.toBeInTheDocument()
@@ -161,31 +167,31 @@ describe('Header', () => {
   describe('when logged in', () => {
     it('shows navigator', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const navigator = await screen.findByText('Navigator')
       expect(navigator).toBeInTheDocument()
     })
 
     it('shows help dropdown', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const helpDropdown = await screen.findByText(/Help Dropdown/)
       expect(helpDropdown).toBeInTheDocument()
     })
 
     it('shows user dropdown', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const userDropdown = await screen.findByText(/User Dropdown/)
       expect(userDropdown).toBeInTheDocument()
     })
 
     it('has toggle for light/dark mode', async () => {
       setup({})
-      render(<Header />, { wrapper })
+      render(<Header />, { wrapper: wrapper() })
 
       const toggle = await screen.findByText(/Theme Toggle/)
       expect(toggle).toBeInTheDocument()
@@ -197,23 +203,23 @@ describe('Header', () => {
       it('shows guest header', async () => {
         config.IS_SELF_HOSTED = true
         setup({ user: mockNullUser })
-        render(<Header />, { wrapper })
+        render(<Header />, { wrapper: wrapper() })
 
         const guestHeader = await screen.findByText('Why Test Code?')
         expect(guestHeader).toBeInTheDocument()
       })
 
       it('shows navigator', async () => {
         setup({})
-        render(<Header />, { wrapper })
+        render(<Header />, { wrapper: wrapper() })
 
         const navigator = await screen.findByText('Navigator')
         expect(navigator).toBeInTheDocument()
       })
 
       it('does not show user/help dropdowns', async () => {
         setup({})
-        render(<Header />, { wrapper })
+        render(<Header />, { wrapper: wrapper() })
 
         const userDropdown = screen.queryByText('User Dropdown')
         expect(userDropdown).not.toBeInTheDocument()
@@ -226,7 +232,7 @@ describe('Header', () => {
       it('shows seat details', async () => {
         config.IS_SELF_HOSTED = true
         setup({})
-        render(<Header />, { wrapper })
+        render(<Header />, { wrapper: wrapper() })
 
         const text = await screen.findByText(/Seat Details/)
         expect(text).toBeInTheDocument()
@@ -235,11 +241,21 @@ describe('Header', () => {
       it('shows Admin link', async () => {
         config.IS_SELF_HOSTED = true
         setup({})
-        render(<Header />, { wrapper })
+        render(<Header />, { wrapper: wrapper() })
 
         const text = await screen.findByText(/Admin Link/)
         expect(text).toBeInTheDocument()
       })
     })
   })
+
+  describe('when on sync page', () => {
+    it('does not show navigator', async () => {
+      setup({})
+      render(<Header />, { wrapper: wrapper('/sync') })
+
+      const navigator = screen.queryByText('Navigator')
+      expect(navigator).not.toBeInTheDocument()
+    })
+  })
 })

src/layouts/Header/Header.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from 'react'
+import { useRouteMatch } from 'react-router-dom'
 
 import config from 'config'
 
@@ -16,6 +17,7 @@ import UserDropdown from './components/UserDropdown'
 function Header() {
   const { isImpersonating } = useImpersonate()
   const { data: currentUser } = useUser()
+  const syncPageMatch = useRouteMatch('/sync')
 
   return (
     <header>
@@ -26,9 +28,11 @@ function Header() {
         </div>
       ) : null}
       <nav className="container flex h-14 min-h-14 w-full items-center">
-        <div className="flex-1">
-          <Navigator currentUser={currentUser} />
-        </div>
+        {!syncPageMatch?.isExact ? (
+          <div className="flex-1">
+            <Navigator currentUser={currentUser} />
+          </div>
+        ) : null}
         {!currentUser ? null : (
           <div className="flex items-center justify-end gap-4">
             {config.IS_SELF_HOSTED ? (