From 5d00557900c540804b45fcd5dfeb13855e84894a Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Sun, 22 Sep 2024 20:12:12 -0700
Subject: [PATCH 1/2] chore: Remove dark mode feature flag

---
 src/layouts/Header/Header.test.tsx            | 19 ----------------
 src/layouts/Header/Header.tsx                 |  7 +-----
 .../GuestHeader/GuestHeader.test.tsx          | 22 -------------------
 .../components/GuestHeader/GuestHeader.tsx    |  7 +-----
 4 files changed, 2 insertions(+), 53 deletions(-)

diff --git a/src/layouts/Header/Header.test.tsx b/src/layouts/Header/Header.test.tsx
index da72163f87..ffe86904a4 100644
--- a/src/layouts/Header/Header.test.tsx
+++ b/src/layouts/Header/Header.test.tsx
@@ -9,7 +9,6 @@ import config from 'config'
 
 import { useImpersonate } from 'services/impersonate'
 import { User } from 'services/user'
-import { useFlags } from 'shared/featureFlags'
 
 import Header from './Header'
 
@@ -33,9 +32,7 @@ vi.mock('src/layouts/Header/components/ThemeToggle', () => ({
 }))
 
 vi.mock('services/impersonate')
-vi.mock('shared/featureFlags')
 const mockedUseImpersonate = useImpersonate as Mock
-const mockedUseFlags = useFlags as Mock
 
 const mockUser = {
   me: {
@@ -117,7 +114,6 @@ type SetupArgs = {
 describe('Header', () => {
   function setup({ user = mockUser }: SetupArgs) {
     mockedUseImpersonate.mockReturnValue({ isImpersonating: false })
-    mockedUseFlags.mockReturnValue({ darkMode: false })
     server.use(
       graphql.query('CurrentUser', (info) => {
         return HttpResponse.json({ data: user })
@@ -187,21 +183,6 @@ describe('Header', () => {
       const userDropdown = await screen.findByText(/User Dropdown/)
       expect(userDropdown).toBeInTheDocument()
     })
-    it('has toggle for light/dark mode when flag on', async () => {
-      setup({})
-      mockedUseFlags.mockReturnValue({ darkMode: true })
-      render(<Header />, { wrapper })
-
-      const toggle = await screen.findByText(/Theme Toggle/)
-      expect(toggle).toBeInTheDocument()
-    })
-    it('has no toggle for light/dark mode when flag off', () => {
-      setup({})
-      render(<Header />, { wrapper })
-
-      const toggle = screen.queryAllByText(/Theme Toggle/)
-      expect(toggle).toEqual([])
-    })
   })
 
   describe('when on self-hosted', () => {
diff --git a/src/layouts/Header/Header.tsx b/src/layouts/Header/Header.tsx
index 12f1ba3c67..92d736f474 100644
--- a/src/layouts/Header/Header.tsx
+++ b/src/layouts/Header/Header.tsx
@@ -4,7 +4,6 @@ import config from 'config'
 
 import { useImpersonate } from 'services/impersonate'
 import { useUser } from 'services/user'
-import { useFlags } from 'shared/featureFlags'
 
 import AdminLink from './components/AdminLink'
 import GuestHeader from './components/GuestHeader'
@@ -18,10 +17,6 @@ function Header() {
   const { isImpersonating } = useImpersonate()
   const { data: currentUser } = useUser()
 
-  const { darkMode } = useFlags({
-    darkMode: false,
-  })
-
   return (
     <header>
       {!currentUser ? <GuestHeader /> : null}
@@ -44,7 +39,7 @@ function Header() {
                 </Suspense>
               </div>
             ) : null}
-            {darkMode ? <ThemeToggle /> : null}
+            <ThemeToggle />
             <HelpDropdown />
             <UserDropdown />
           </div>
diff --git a/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx b/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
index 609c42f6a9..ee62e4996f 100644
--- a/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
+++ b/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
@@ -2,17 +2,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { cleanup, render, screen } from '@testing-library/react'
 import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
-import { type Mock } from 'vitest'
 
 import config from 'config'
 
-import { useFlags } from 'shared/featureFlags'
 import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import GuestHeader from './GuestHeader'
 
 vi.mock('config')
-vi.mock('shared/featureFlags')
 
 // silence console errors
 console.error = () => {}
@@ -33,12 +30,6 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   </QueryClientProvider>
 )
 
-const mockedUseFlags = useFlags as Mock
-
-beforeEach(() => {
-  mockedUseFlags.mockReturnValue({ darkMode: false })
-})
-
 afterEach(() => {
   cleanup()
   queryClient.clear()
@@ -118,19 +109,6 @@ describe('GuestHeader', () => {
         )
       })
     })
-    it('has toggle for light/dark mode when flag on', async () => {
-      mockedUseFlags.mockReturnValueOnce({ darkMode: true })
-      render(<GuestHeader />, { wrapper })
-
-      const toggle = await screen.findByTestId('theme-toggle')
-      expect(toggle).toBeInTheDocument()
-    })
-    it('has no toggle for light/dark mode when flag off', () => {
-      render(<GuestHeader />, { wrapper })
-
-      const toggle = screen.queryAllByTestId('theme-toggle')
-      expect(toggle).toEqual([])
-    })
   })
 
   describe('self hosted build', () => {
diff --git a/src/layouts/Header/components/GuestHeader/GuestHeader.tsx b/src/layouts/Header/components/GuestHeader/GuestHeader.tsx
index 60e2c894a3..d8a65c169d 100644
--- a/src/layouts/Header/components/GuestHeader/GuestHeader.tsx
+++ b/src/layouts/Header/components/GuestHeader/GuestHeader.tsx
@@ -1,7 +1,6 @@
 import config from 'config'
 
 import { CodecovIcon } from 'assets/svg/codecov'
-import { useFlags } from 'shared/featureFlags'
 import A from 'ui/A'
 import Button from 'ui/Button'
 
@@ -26,10 +25,6 @@ const LogoButton = () => {
 }
 
 function GuestHeader() {
-  const { darkMode } = useFlags({
-    darkMode: false,
-  })
-
   const isSelfHosted = config.IS_SELF_HOSTED
 
   return (
@@ -71,7 +66,7 @@ function GuestHeader() {
           )}
         </div>
         <div className="flex items-center gap-4 md:mx-4">
-          {darkMode ? <ThemeToggle /> : null}
+          <ThemeToggle />
           {isSelfHosted ? (
             <Button
               to={{ pageName: 'login' }}

From d32da95fff8886ccbd18069fbb23053763c36e9d Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Sun, 22 Sep 2024 20:24:23 -0700
Subject: [PATCH 2/2] fix tests

---
 src/layouts/Header/Header.test.tsx                     |  8 ++++++++
 .../Header/components/GuestHeader/GuestHeader.test.tsx |  7 +++++++
 src/layouts/LoginLayout/LoginLayout.test.tsx           | 10 +++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Header/Header.test.tsx b/src/layouts/Header/Header.test.tsx
index ffe86904a4..70a9059484 100644
--- a/src/layouts/Header/Header.test.tsx
+++ b/src/layouts/Header/Header.test.tsx
@@ -183,6 +183,14 @@ describe('Header', () => {
       const userDropdown = await screen.findByText(/User Dropdown/)
       expect(userDropdown).toBeInTheDocument()
     })
+
+    it('has toggle for light/dark mode', async () => {
+      setup({})
+      render(<Header />, { wrapper })
+
+      const toggle = await screen.findByText(/Theme Toggle/)
+      expect(toggle).toBeInTheDocument()
+    })
   })
 
   describe('when on self-hosted', () => {
diff --git a/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx b/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
index ee62e4996f..aa2fc26038 100644
--- a/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
+++ b/src/layouts/Header/components/GuestHeader/GuestHeader.test.tsx
@@ -109,6 +109,13 @@ describe('GuestHeader', () => {
         )
       })
     })
+
+    it('has toggle for light/dark mode', async () => {
+      render(<GuestHeader />, { wrapper })
+
+      const toggle = await screen.findByTestId('theme-toggle')
+      expect(toggle).toBeInTheDocument()
+    })
   })
 
   describe('self hosted build', () => {
diff --git a/src/layouts/LoginLayout/LoginLayout.test.tsx b/src/layouts/LoginLayout/LoginLayout.test.tsx
index c0dc61c571..4c339170cf 100644
--- a/src/layouts/LoginLayout/LoginLayout.test.tsx
+++ b/src/layouts/LoginLayout/LoginLayout.test.tsx
@@ -4,6 +4,8 @@ import { graphql, HttpResponse } from 'msw2'
 import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { ThemeContextProvider } from 'shared/ThemeContext'
+
 import LoginLayout from './LoginLayout'
 
 const mocks = vi.hoisted(() => ({
@@ -30,9 +32,11 @@ const wrapper =
   ): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
     <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path={path}>{children}</Route>
-      </MemoryRouter>
+      <ThemeContextProvider>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path={path}>{children}</Route>
+        </MemoryRouter>
+      </ThemeContextProvider>
     </QueryClientProvider>
   )