feat: Implement new header's User dropdown (#2973)

src/layouts/BaseLayout/BaseLayout.spec.jsx

@@ -402,7 +402,7 @@ describe('BaseLayout', () => {
         wrapper: wrapper(),
       })
 
-      const newHeader = await screen.findByText('New header')
+      const newHeader = await screen.findByText('Navigation')
       expect(newHeader).toBeInTheDocument()
     })
   })

src/layouts/Header/Header.spec.tsx

@@ -1,12 +1,114 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { User } from 'services/user'
 
 import Header from './Header'
 
-describe('placeholder new header', () => {
-  it('renders', async () => {
-    render(<Header />)
+jest.mock(
+  'src/layouts/Header/components/UserDropdown',
+  () => () => 'User Dropdown'
+)
+
+const mockUser = {
+  me: {
+    owner: {
+      defaultOrgUsername: 'codecov',
+    },
+    email: '[email protected]',
+    privateAccess: true,
+    onboardingCompleted: true,
+    businessEmail: '[email protected]',
+    termsAgreement: true,
+    user: {
+      name: 'Jane Doe',
+      username: 'janedoe',
+      avatarUrl: 'http://127.0.0.1/avatar-url',
+      avatar: 'http://127.0.0.1/avatar-url',
+      student: false,
+      studentCreatedAt: null,
+      studentUpdatedAt: null,
+      customerIntent: 'PERSONAL',
+    },
+    trackingMetadata: {
+      service: 'github',
+      ownerid: 123,
+      serviceId: '123',
+      plan: 'users-basic',
+      staff: false,
+      hasYaml: false,
+      bot: null,
+      delinquent: null,
+      didTrial: null,
+      planProvider: null,
+      planUserCount: 1,
+      createdAt: 'timestamp',
+      updatedAt: 'timestamp',
+      profile: {
+        createdAt: 'timestamp',
+        otherGoal: null,
+        typeProjects: [],
+        goals: [],
+      },
+    },
+  },
+}
+
+const mockNullUser = { me: null }
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  queryClient.clear()
+})
+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>
+)
+
+type SetupArgs = {
+  user?: User
+}
+
+describe('Header', () => {
+  function setup({ user = mockUser }: SetupArgs) {
+    server.use(
+      graphql.query('CurrentUser', (req, res, ctx) =>
+        res(ctx.status(200), ctx.data(user))
+      )
+    )
+  }
+
+  describe('placeholder new header', () => {
+    it('shows when currentUser is defined', async () => {
+      setup({})
+      render(<Header />, { wrapper })
+
+      const text = await screen.findByText('Navigation')
+      expect(text).toBeInTheDocument()
+    })
+  })
+
+  describe('guest header', () => {
+    it('shows when currentUser is null', async () => {
+      setup({ user: mockNullUser })
+      render(<Header />, { wrapper })
 
-    const header = await screen.findByText('New header')
-    expect(header).toBeInTheDocument()
+      const link = await screen.findByText('Guest header')
+      expect(link).toBeInTheDocument()
+    })
   })
 })

src/layouts/Header/Header.tsx

@@ -1,5 +1,24 @@
+import { useUser } from 'services/user'
+
+import UserDropdown from './components/UserDropdown'
+
 function Header() {
-  return <h1>New header</h1>
+  const { data: currentUser } = useUser()
+
+  if (!currentUser) {
+    return <h1>Guest header</h1>
+  }
+
+  return (
+    <div className="container flex h-14 w-full items-center">
+      <div className="flex-1">Navigation</div>
+      <div className="flex items-center gap-2">
+        <div>Self hosted stuff</div>
+        <div>Help dropdown</div>
+        <UserDropdown />
+      </div>
+    </div>
+  )
 }
 
 export default Header