Hide old header when flag is true

src/layouts/BaseLayout/BaseLayout.jsx

@@ -2,12 +2,14 @@ import { lazy, Suspense } from 'react'
 import { Redirect } from 'react-router-dom'
 
 import Footer from 'layouts/Footer'
-import Header from 'layouts/OldHeader'
+import Header from 'layouts/Header'
+import OldHeader from 'layouts/OldHeader'
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
 import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
 import ToastNotifications from 'layouts/ToastNotifications'
 import { useImpersonate } from 'services/impersonate'
 import { useTracking } from 'services/tracking'
+import { useFlags } from 'shared/featureFlags'
 import GlobalBanners from 'shared/GlobalBanners'
 import GlobalTopBanners from 'shared/GlobalTopBanners'
 import LoadingLogo from 'ui/LoadingLogo'
@@ -64,6 +66,10 @@ function BaseLayout({ children }) {
     useUserAccessGate()
   useTracking()
 
+  const { newHeader } = useFlags({
+    newHeader: false,
+  })
+
   // Pause rendering of a page till we know if the user is logged in or not
   if (isLoading) return <FullPageLoader />
 
@@ -72,7 +78,7 @@ function BaseLayout({ children }) {
       <SessionExpiryTracker />
       {isFullExperience ? (
         <>
-          <Header />
+          {newHeader ? <Header /> : <OldHeader />}
           <GlobalTopBanners />
         </>
       ) : (

src/layouts/BaseLayout/BaseLayout.spec.jsx

@@ -8,6 +8,7 @@ import config from 'config'
 
 import { useImage } from 'services/image'
 import { useImpersonate } from 'services/impersonate'
+import { useFlags } from 'shared/featureFlags'
 
 import BaseLayout from './BaseLayout'
 
@@ -18,6 +19,8 @@ jest.mock('./InstallationHelpBanner', () => () => 'InstallationHelpBanner')
 jest.mock('pages/TermsOfService', () => () => 'TermsOfService')
 jest.mock('pages/DefaultOrgSelector', () => () => 'DefaultOrgSelector')
 
+jest.mock('shared/featureFlags')
+
 const mockOwner = {
   owner: {
     me: {},
@@ -138,6 +141,9 @@ describe('BaseLayout', () => {
       currentUser: loggedInUser,
     }
   ) {
+    useFlags.mockReturnValue({
+      newHeader: false,
+    })
     useImage.mockReturnValue({
       src: 'http://photo.com/codecov.png',
       isLoading: false,
@@ -341,4 +347,31 @@ describe('BaseLayout', () => {
       expect(selectInput).toBeInTheDocument()
     })
   })
+
+  describe('header feature flaging', () => {
+    it('renders old header when feature flag is false', async () => {
+      setup({ currentUser: userHasDefaultOrg })
+
+      render(<BaseLayout>hello</BaseLayout>, {
+        wrapper: wrapper(),
+      })
+
+      const blogLink = await screen.findByText('Blog')
+      expect(blogLink).toBeInTheDocument()
+    })
+
+    it('renders new header when feature flag is true', async () => {
+      setup({ currentUser: userHasDefaultOrg, newHeaderFlag: true })
+      useFlags.mockReturnValue({
+        newHeader: true,
+      })
+
+      render(<BaseLayout>hello</BaseLayout>, {
+        wrapper: wrapper(),
+      })
+
+      const newHeader = await screen.findByText('New header')
+      expect(newHeader).toBeInTheDocument()
+    })
+  })
 })

src/layouts/Header/Header.spec.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react'
+
+import Header from './Header'
+
+describe('placeholder new header', () => {
+  it('renders', async () => {
+    render(<Header />)
+
+    const header = await screen.findByText('New header')
+    expect(header).toBeInTheDocument()
+  })
+})

src/layouts/Header/Header.tsx

@@ -0,0 +1,5 @@
+function Header() {
+  return <h1>New header</h1>
+}
+
+export default Header

src/layouts/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header'

src/layouts/LoginLayout/LoginLayout.spec.tsx

@@ -5,14 +5,18 @@ import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router'
 import { useLocation } from 'react-router-dom'
 
+import { useFlags } from 'shared/featureFlags'
+
 import LoginLayout from './LoginLayout'
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn(),
 }))
+jest.mock('shared/featureFlags')
 
 const mockedUseLocation = useLocation as jest.Mock
+const mockedUseFlags = useFlags as jest.Mock
 
 const server = setupServer()
 const queryClient = new QueryClient()
@@ -54,6 +58,7 @@ describe('LoginLayout', () => {
       graphql.query('CurrentUser', (req, res, ctx) => res(ctx.status(200)))
     )
     mockedUseLocation.mockReturnValue({ search: [] })
+    mockedUseFlags.mockReturnValue({ newHeader: false })
   }
 
   describe('rendering component', () => {
@@ -117,4 +122,25 @@ describe('LoginLayout', () => {
       })
     })
   })
+
+  describe('header feature flaging', () => {
+    it('renders old header when feature flag is false', async () => {
+      setup()
+
+      render(<LoginLayout>child content</LoginLayout>, { wrapper: wrapper() })
+
+      const blogLink = await screen.findByText('Why Test Code?')
+      expect(blogLink).toBeInTheDocument()
+    })
+
+    it('renders new header when feature flag is true', async () => {
+      setup()
+      mockedUseFlags.mockReturnValue({ newHeader: true })
+
+      render(<LoginLayout>child content</LoginLayout>, { wrapper: wrapper() })
+
+      const newHeader = await screen.findByText('New header')
+      expect(newHeader).toBeInTheDocument()
+    })
+  })
 })

src/layouts/LoginLayout/LoginLayout.tsx

@@ -4,8 +4,10 @@ import { useLocation } from 'react-router-dom'
 import { LOCAL_STORAGE_SESSION_EXPIRED_KEY } from 'config'
 
 import Footer from 'layouts/Footer'
-import Header from 'layouts/OldHeader'
+import Header from 'layouts/Header'
+import OldHeader from 'layouts/OldHeader'
 import SessionExpiredBanner from 'pages/LoginPage/SessionExpiredBanner'
+import { useFlags } from 'shared/featureFlags'
 import LoadingLogo from 'ui/LoadingLogo'
 
 const FullPageLoader = () => (
@@ -17,6 +19,10 @@ const FullPageLoader = () => (
 const LoginLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   const location = useLocation()
 
+  const { newHeader } = useFlags({
+    newHeader: false,
+  })
+
   const showExpiryBanner = localStorage.getItem(
     LOCAL_STORAGE_SESSION_EXPIRED_KEY
   )
@@ -25,7 +31,7 @@ const LoginLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
       {(location.search.includes('expired') || showExpiryBanner) && (
         <SessionExpiredBanner />
       )}
-      <Header />
+      {newHeader ? <Header /> : <OldHeader />}
       <Suspense fallback={<FullPageLoader />}>
         <main className="container mb-8 mt-2 flex grow flex-col gap-2 md:p-0">
           {children}