ref: 1548 Part 1: Convert all Header files to TS (#2821)

* ref all header files to TS

* remove prop types and rebase

src/layouts/Header/AdminLink.spec.jsx → src/layouts/Header/AdminLink.spec.tsx

@@ -6,6 +6,23 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import AdminLink from './AdminLink'
 
+const wrapper: ({
+  initialEntries,
+}: {
+  initialEntries?: string
+}) => React.FC<React.PropsWithChildren> =
+  ({ initialEntries = '/gh' }) =>
+  ({ children }) =>
+    (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider" exact>
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -19,24 +36,12 @@ beforeEach(() => {
 afterAll(() => server.close())
 
 describe('AdminLink', () => {
-  let renderData
-
   function setup(data = {}) {
     server.use(
       rest.get('/internal/users/current', (req, res, ctx) =>
         res(ctx.status(200), ctx.json(data))
       )
     )
-
-    renderData = render(
-      <MemoryRouter initialEntries={['/gh']}>
-        <Route path="/:provider">
-          <QueryClientProvider client={queryClient}>
-            <AdminLink />
-          </QueryClientProvider>
-        </Route>
-      </MemoryRouter>
-    )
   }
 
   describe('user is an admin', () => {
@@ -52,6 +57,7 @@ describe('AdminLink', () => {
     })
 
     it('renders link to access page', async () => {
+      render(<AdminLink />, { wrapper: wrapper({}) })
       const link = await screen.findByText(/Admin/)
 
       expect(link).toBeInTheDocument()
@@ -71,8 +77,10 @@ describe('AdminLink', () => {
       })
     })
 
+    const { container } = render(<AdminLink />, { wrapper: wrapper({}) })
+
     it('renders nothing', () => {
-      expect(renderData.container).toBeEmptyDOMElement()
+      expect(container).toBeEmptyDOMElement()
     })
   })
 })

src/layouts/Header/AdminLink.jsx → src/layouts/Header/AdminLink.tsx

@@ -10,7 +10,12 @@ function AdminLink() {
   }
 
   return (
-    <A variant="header" to={{ pageName: 'access' }}>
+    <A
+      variant="header"
+      to={{ pageName: 'access' }}
+      isExternal={false}
+      hook="header-admin-link"
+    >
       <Icon size="md" name="cog" variant="solid" /> Admin
     </A>
   )

src/layouts/Header/DesktopMenu.spec.jsx → src/layouts/Header/DesktopMenu.spec.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor, within } from '@testing-library/react'
 import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
+import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
@@ -13,7 +14,7 @@ jest.mock('config')
 const loggedInUser = {
   me: {
     owner: {
-      defaultOrgUsername: 'codecov',
+      defaultOrgUsername: 'codecov' as string | null,
     },
     user: {
       username: 'p',
@@ -46,7 +47,13 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-const wrapper =
+const wrapper: ({
+  initialEntries,
+  path,
+}: {
+  initialEntries?: string
+  path?: string
+}) => React.FC<React.PropsWithChildren> =
   (
     { initialEntries = '/gh', path = '/:provider' } = {
       initialEntries: '/gh',
@@ -72,12 +79,7 @@ beforeEach(() => {
 afterAll(() => server.close())
 
 describe('DesktopMenu', () => {
-  function setup(
-    { hasLoggedInUser = true, user = loggedInUser } = {
-      hasLoggedInUser: true,
-      user: loggedInUser,
-    }
-  ) {
+  function setup({ hasLoggedInUser = true, user = loggedInUser }) {
     server.use(
       graphql.query('Seats', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockSeatData))
@@ -97,7 +99,7 @@ describe('DesktopMenu', () => {
   describe('rendering logo button', () => {
     describe('when default org does not exist', () => {
       it('directs user to about codecov io', async () => {
-        setup()
+        setup({})
 
         render(<DesktopMenu />, {
           wrapper: wrapper({
@@ -184,7 +186,7 @@ describe('DesktopMenu', () => {
   })
 
   it('renders static links', async () => {
-    setup()
+    setup({})
 
     render(<DesktopMenu />, {
       wrapper: wrapper({
@@ -218,7 +220,7 @@ describe('DesktopMenu', () => {
   })
 
   it('renders the dropdown when user is logged in', async () => {
-    setup()
+    setup({})
 
     render(<DesktopMenu />, {
       wrapper: wrapper({
@@ -268,7 +270,7 @@ describe('DesktopMenu', () => {
   describe('when running in self hosted mode', () => {
     it('renders the seat count when user is logged in', async () => {
       config.IS_SELF_HOSTED = true
-      setup()
+      setup({})
 
       render(<DesktopMenu />, {
         wrapper: wrapper({
@@ -283,7 +285,7 @@ describe('DesktopMenu', () => {
 
     it('renders the admin link when user is logged in', async () => {
       config.IS_SELF_HOSTED = true
-      setup()
+      setup({})
 
       render(<DesktopMenu />, {
         wrapper: wrapper({
@@ -301,7 +303,7 @@ describe('DesktopMenu', () => {
 describe('LoginPrompt', () => {
   describe('with a provider available', () => {
     it('renders a login button and a sign up button', () => {
-      render(<LoginPrompt />, { wrapper: wrapper() })
+      render(<LoginPrompt />, { wrapper: wrapper({}) })
 
       const loginPrompt = screen.getByTestId('login-prompt')
 

src/layouts/Header/DesktopMenu.jsx → src/layouts/Header/DesktopMenu.tsx

@@ -12,8 +12,12 @@ import AdminLink from './AdminLink'
 import Dropdown from './Dropdown'
 import SeatDetails from './SeatDetails'
 
+interface URLParams {
+  provider: string
+}
+
 export function LoginPrompt() {
-  const { provider } = useParams()
+  const { provider } = useParams<URLParams>()
 
   const to = window.location.href
   const { pathname } = useLocation()
@@ -25,7 +29,12 @@ export function LoginPrompt() {
     return (
       <div className="text-ds-gray-tertiary">
         New to Codecov?{' '}
-        <A to={{ pageName: 'root' }} variant="header">
+        <A
+          to={{ pageName: 'root' }}
+          variant="header"
+          isExternal={true}
+          hook="desktop-menu-learn-more"
+        >
           Learn more
         </A>
       </div>
@@ -36,17 +45,27 @@ export function LoginPrompt() {
       data-testid="login-prompt"
       className="mx-2 flex items-center justify-between gap-4 md:mx-0"
     >
-      <A to={{ pageName: 'signIn', options: { to } }} variant="header">
+      <A
+        to={{ pageName: 'signIn', options: { to } }}
+        variant="header"
+        isExternal={false}
+        hook="desktop-menu-login-link"
+      >
         Log in
       </A>
-      <Button to={{ pageName: 'signUp' }} variant="primary">
+      <Button
+        to={{ pageName: 'signUp' }}
+        variant="primary"
+        disabled={false}
+        hook="desktop-menu-login-button"
+      >
         Sign up
       </Button>
     </div>
   )
 }
 
-const LogoButton = ({ defaultOrg }) => {
+const LogoButton = ({ defaultOrg }: { defaultOrg: string }) => {
   let pageName = 'root'
   if (defaultOrg) {
     pageName = 'owner'
@@ -60,6 +79,8 @@ const LogoButton = ({ defaultOrg }) => {
       }}
       variant="header"
       data-testid="homepage-link"
+      isExternal={pageName === 'root' ? true : false}
+      hook="desktop-menu-homepage-link"
     >
       <span className="sr-only">Link to Homepage</span>
       <CodecovIcon />
@@ -82,17 +103,31 @@ function DesktopMenu() {
     <>
       <div data-testid="desktop-menu" className="flex items-center gap-4">
         <LogoButton defaultOrg={defaultOrg} />
-        <A to={{ pageName: 'docs' }} variant="header" showExternalIcon={false}>
+        <A
+          to={{ pageName: 'docs' }}
+          variant="header"
+          isExternal={false}
+          showExternalIcon={false}
+          hook="desktop-menu-docs-link"
+        >
           Docs
         </A>
         <A
           to={{ pageName: 'support' }}
           variant="header"
+          isExternal={false}
           showExternalIcon={false}
+          hook="desktop-menu-support-link"
         >
           Support
         </A>
-        <A to={{ pageName: 'blog' }} variant="header" showExternalIcon={false}>
+        <A
+          to={{ pageName: 'blog' }}
+          variant="header"
+          isExternal={false}
+          showExternalIcon={false}
+          hook="desktop-menu-blog-link"
+        >
           Blog
         </A>
       </div>

src/layouts/Header/Dropdown.spec.jsx → src/layouts/Header/Dropdown.spec.tsx

@@ -20,11 +20,11 @@ const currentUser = {
 jest.mock('services/image')
 jest.mock('config')
 
-const Wrapper =
-  ({ provider }) =>
+const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
+  (initialEntries = '/gh') =>
   ({ children }) =>
     (
-      <MemoryRouter initialEntries={[`/${provider}`]}>
+      <MemoryRouter initialEntries={[initialEntries]}>
         <Switch>
           <Route path="/:provider" exact>
             {children}
@@ -35,7 +35,12 @@ const Wrapper =
 
 describe('Dropdown', () => {
   function setup({ selfHosted } = { selfHosted: false }) {
-    useImage.mockReturnValue({ src: 'imageUrl', isLoading: false, error: null })
+    const mockUseImage = useImage as jest.Mock
+    mockUseImage.mockReturnValue({
+      src: 'imageUrl',
+      isLoading: false,
+      error: null,
+    })
     config.IS_SELF_HOSTED = selfHosted
     const mockRemoveItem = jest.spyOn(
       window.localStorage.__proto__,
@@ -53,7 +58,7 @@ describe('Dropdown', () => {
 
     it('renders the users avatar', () => {
       render(<Dropdown currentUser={currentUser} />, {
-        wrapper: Wrapper({ provider: 'gh' }),
+        wrapper: wrapper(),
       })
 
       const img = screen.getByRole('img')
@@ -69,7 +74,7 @@ describe('Dropdown', () => {
       it('shows settings link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gh' }),
+          wrapper: wrapper(),
         })
 
         expect(screen.queryByText('Settings')).not.toBeInTheDocument()
@@ -85,7 +90,7 @@ describe('Dropdown', () => {
       it('shows sign out link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gh' }),
+          wrapper: wrapper(),
         })
 
         expect(screen.queryByText('Sign Out')).not.toBeInTheDocument()
@@ -103,7 +108,7 @@ describe('Dropdown', () => {
 
         jest.spyOn(console, 'error').mockImplementation()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gh' }),
+          wrapper: wrapper(),
         })
 
         const openSelect = screen.getByRole('combobox')
@@ -121,7 +126,7 @@ describe('Dropdown', () => {
       it('shows manage app access link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gh' }),
+          wrapper: wrapper(),
         })
 
         expect(
@@ -145,7 +150,7 @@ describe('Dropdown', () => {
       it('shows settings link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gl' }),
+          wrapper: wrapper('/gl'),
         })
 
         expect(screen.queryByText('Settings')).not.toBeInTheDocument()
@@ -161,7 +166,7 @@ describe('Dropdown', () => {
       it('shows sign out link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gl' }),
+          wrapper: wrapper('/gl'),
         })
 
         expect(screen.queryByText('Sign Out')).not.toBeInTheDocument()
@@ -177,7 +182,7 @@ describe('Dropdown', () => {
       it('does not show manage app access link', async () => {
         const { user } = setup()
         render(<Dropdown currentUser={currentUser} />, {
-          wrapper: Wrapper({ provider: 'gl' }),
+          wrapper: wrapper('/gl'),
         })
 
         expect(