feat: Allow build time configuration of sunburst (#3689)

Author: nsdeschenes

src/config.js

@@ -12,6 +12,7 @@ const defaultConfig = {
   SENTRY_ERROR_SAMPLE_RATE: 1.0,
   GH_APP: DEFAULT_GH_APP,
   GH_APP_AI: 'codecov-ai',
+  SUNBURST_ENABLED: true,
 }
 
 export function removeReactAppPrefix(obj) {
@@ -33,6 +34,10 @@ export function removeReactAppPrefix(obj) {
     keys['HIDE_ACCESS_TAB'] = keys['HIDE_ACCESS_TAB'].toLowerCase() === 'true'
   }
 
+  if ('SUNBURST_ENABLED' in keys) {
+    keys['SUNBURST_ENABLED'] = keys['SUNBURST_ENABLED'].toLowerCase() === 'true'
+  }
+
   if ('SENTRY_TRACING_SAMPLE_RATE' in keys) {
     keys['SENTRY_TRACING_SAMPLE_RATE'] = parseFloat(
       keys['SENTRY_TRACING_SAMPLE_RATE']

src/config.test.js

@@ -3,18 +3,14 @@ import { removeReactAppPrefix } from 'config'
 describe('config', () => {
   describe('removeReactAppPrefix', () => {
     it('removes REACT_APP prefix', () => {
-      const obj = {
-        REACT_APP_TEST_ENV: 'test env',
-      }
+      const obj = { REACT_APP_TEST_ENV: 'test env' }
 
       expect(removeReactAppPrefix(obj)).toEqual({ TEST_ENV: 'test env' })
     })
 
     describe('sets IS_SELF_HOSTED to boolean', () => {
       it('sets to true', () => {
-        const obj = {
-          ENV: 'enterprise',
-        }
+        const obj = { ENV: 'enterprise' }
 
         expect(removeReactAppPrefix(obj)).toEqual({
           ENV: 'enterprise',
@@ -23,9 +19,7 @@ describe('config', () => {
       })
 
       it('sets to false', () => {
-        const obj = {
-          ENV: 'production',
-        }
+        const obj = { ENV: 'production' }
 
         expect(removeReactAppPrefix(obj)).toEqual({
           ENV: 'production',
@@ -68,6 +62,14 @@ describe('config', () => {
       })
     })
 
+    describe('sets SUNBURST_ENABLED to boolean', () => {
+      it('sets to true', () => {
+        const obj = { SUNBURST_ENABLED: 'true' }
+
+        expect(removeReactAppPrefix(obj)).toEqual({ SUNBURST_ENABLED: true })
+      })
+    })
+
     describe('sets IS_DEDICATED_NAMESPACE to boolean', () => {
       it('sets to true', () => {
         const obj = {

src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx

@@ -9,6 +9,8 @@ import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import config from 'config'
+
 import CoverageOverviewTab from './OverviewTab'
 
 declare global {
@@ -17,6 +19,8 @@ declare global {
   }
 }
 
+vi.mock('config')
+
 vi.mock('recharts', async () => {
   const OriginalModule = await vi.importActual('recharts')
   return {
@@ -35,22 +39,6 @@ vi.mock('./SummaryTeamPlan', () => ({ default: () => 'SummaryTeamPlan' }))
 vi.mock('./subroute/Sunburst', () => ({ default: () => 'Sunburst' }))
 vi.mock('./subroute/Fileviewer', () => ({ default: () => 'FileViewer' }))
 
-const mockRepoSettings = (isPrivate = false) => ({
-  owner: {
-    isCurrentUserPartOfOrg: true,
-    repository: {
-      defaultBranch: 'master',
-      private: isPrivate,
-      uploadToken: 'token',
-      graphToken: 'token',
-      yaml: 'yaml',
-      bot: {
-        username: 'test',
-      },
-    },
-  },
-})
-
 const mockRepo = (isPrivate = false, isFirstPullRequest = false) => ({
   owner: {
     isCurrentUserPartOfOrg: true,
@@ -268,6 +256,24 @@ const mockBackfillFlag = {
   },
 }
 
+const mockRepoSettingsTeamData = (isPrivate = false) => ({
+  owner: {
+    isCurrentUserPartOfOrg: null,
+    repository: {
+      __typename: 'Repository',
+      defaultBranch: 'master',
+      private: isPrivate,
+      uploadToken: 'token',
+      graphToken: 'token',
+      yaml: 'yaml',
+      bot: {
+        username: 'test',
+      },
+      activated: true,
+    },
+  },
+})
+
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -326,6 +332,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
+  vi.clearAllMocks()
   queryClient.clear()
   queryClientV5.clear()
   server.resetHandlers()
@@ -340,6 +347,7 @@ interface SetupArgs {
   isPrivate?: boolean
   isTeamPlan?: boolean
   fileCount?: number
+  sunburstEnabled?: boolean
 }
 
 describe('Coverage overview tab', () => {
@@ -348,7 +356,10 @@ describe('Coverage overview tab', () => {
     isPrivate = false,
     isTeamPlan = false,
     fileCount = 10,
+    sunburstEnabled = true,
   }: SetupArgs) {
+    config.SUNBURST_ENABLED = sunburstEnabled
+
     server.use(
       graphql.query('GetRepo', () => {
         return HttpResponse.json({
@@ -389,7 +400,7 @@ describe('Coverage overview tab', () => {
         })
       }),
       graphql.query('GetRepoSettingsTeam', () => {
-        return HttpResponse.json({ data: mockRepoSettings(isPrivate) })
+        return HttpResponse.json({ data: mockRepoSettingsTeamData(isPrivate) })
       }),
       graphql.query('CoverageTabData', () => {
         return HttpResponse.json({ data: mockCoverageTabData(fileCount) })
@@ -426,33 +437,69 @@ describe('Coverage overview tab', () => {
     expect(summary).toBeInTheDocument()
   })
 
-  describe('file count is under 200_000', () => {
-    it('renders the sunburst chart', async () => {
-      setup({ fileCount: 100 })
-      render(<CoverageOverviewTab />, {
-        wrapper: wrapper(['/gh/test-org/repoName']),
+  describe('rendering sunburst', () => {
+    describe('file count is under 200_000', () => {
+      describe('sunburst is enabled', () => {
+        it('renders the sunburst chart', async () => {
+          setup({ fileCount: 100, sunburstEnabled: true })
+          render(<CoverageOverviewTab />, {
+            wrapper: wrapper(['/gh/test-org/repoName']),
+          })
+
+          const hideChart = await screen.findByText(/Hide charts/)
+          expect(hideChart).toBeInTheDocument()
+
+          const sunburst = await screen.findByText('Sunburst')
+          expect(sunburst).toBeInTheDocument()
+        })
       })
 
-      const hideChart = await screen.findByText(/Hide charts/)
-      expect(hideChart).toBeInTheDocument()
+      describe('sunburst is disabled', () => {
+        it('does not render the sunburst chart', async () => {
+          setup({ fileCount: 100, sunburstEnabled: false })
+          render(<CoverageOverviewTab />, {
+            wrapper: wrapper(['/gh/test-org/repoName']),
+          })
 
-      const sunburst = await screen.findByText('Sunburst')
-      expect(sunburst).toBeInTheDocument()
+          const hideChart = await screen.findByText(/Hide charts/)
+          expect(hideChart).toBeInTheDocument()
+
+          const sunburst = screen.queryByText('Sunburst')
+          await waitFor(() => expect(sunburst).not.toBeInTheDocument())
+        })
+      })
     })
-  })
 
-  describe('file count is above 200_000', () => {
-    it('does not render the sunburst chart', async () => {
-      setup({ fileCount: 500_000 })
-      render(<CoverageOverviewTab />, {
-        wrapper: wrapper(['/gh/test-org/repoName']),
+    describe('file count is above 200_000', () => {
+      describe('sunburst is enabled', () => {
+        it('does not render the sunburst chart', async () => {
+          setup({ fileCount: 500_000, sunburstEnabled: true })
+          render(<CoverageOverviewTab />, {
+            wrapper: wrapper(['/gh/test-org/repoName']),
+          })
+
+          const hideChart = await screen.findByText(/Hide charts/)
+          expect(hideChart).toBeInTheDocument()
+
+          const sunburst = screen.queryByText('Sunburst')
+          await waitFor(() => expect(sunburst).not.toBeInTheDocument())
+        })
       })
 
-      const hideChart = await screen.findByText(/Hide charts/)
-      expect(hideChart).toBeInTheDocument()
+      describe('sunburst is disabled', () => {
+        it('does not render the sunburst chart', async () => {
+          setup({ fileCount: 500_000, sunburstEnabled: false })
+          render(<CoverageOverviewTab />, {
+            wrapper: wrapper(['/gh/test-org/repoName']),
+          })
 
-      const sunburst = screen.queryByText('Sunburst')
-      await waitFor(() => expect(sunburst).not.toBeInTheDocument())
+          const hideChart = await screen.findByText(/Hide charts/)
+          expect(hideChart).toBeInTheDocument()
+
+          const sunburst = screen.queryByText('Sunburst')
+          await waitFor(() => expect(sunburst).not.toBeInTheDocument())
+        })
+      })
     })
   })
 

src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx

@@ -2,6 +2,8 @@ import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
 import { Switch, useParams } from 'react-router-dom'
 
+import config from 'config'
+
 import { SentryRoute } from 'sentry'
 
 import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
@@ -71,7 +73,8 @@ function CoverageOverviewTab() {
     typeof fileCount === 'number' && fileCount <= MAX_FILE_COUNT
 
   let displaySunburst = false
-  if (withinFileCount) {
+  // only enable sunburst when both cases are met
+  if (withinFileCount && config.SUNBURST_ENABLED) {
     displaySunburst = true
   }