feat: Add bundle cache modal to repo config tab (#3655)

Author: nsdeschenes

src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.test.tsx

@@ -4,15 +4,26 @@ import {
   QueryClient as QueryClientV5,
 } from '@tanstack/react-queryV5'
 import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
+import { Toaster } from 'react-hot-toast'
 import { MemoryRouter, Route } from 'react-router'
 
 import { TierNames, TTierNames } from 'services/tier'
 
 import ConfigurationManager from './ConfigurationManager'
 import { RepositoryConfiguration } from './hooks/useRepoConfigurationStatus/RepoConfigurationStatusQueryOpts'
 
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn().mockReturnValue({ displayBundleCachingModal: true }),
+}))
+
+vi.mock('shared/featureFlags', () => ({
+  useFlags: mocks.useFlags,
+}))
+
 interface mockRepoConfigArgs {
   tierName?: TTierNames
   flags?: boolean
@@ -55,6 +66,27 @@ function mockRepoConfig({
   }
 }
 
+const mockCachedBundles = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      branch: {
+        head: {
+          bundleAnalysis: {
+            bundleAnalysisReport: {
+              __typename: 'BundleAnalysisReport',
+              bundles: [
+                { name: 'bundle1', isCached: true },
+                { name: 'bundle2', isCached: false },
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+}
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -66,8 +98,11 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProviderV5 client={queryClientV5}>
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={['/gh/codecov/cool-repo/config']}>
-        <Route path="/:provider/:owner/:repo/config">{children}</Route>
+        <Route path="/:provider/:owner/:repo/config">
+          <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+        </Route>
       </MemoryRouter>
+      <Toaster />
     </QueryClientProvider>
   </QueryClientProviderV5>
 )
@@ -90,11 +125,18 @@ interface SetupArgs {
 
 describe('Configuration Manager', () => {
   function setup({ repoConfig = mockRepoConfig({}) }: SetupArgs) {
+    const user = userEvent.setup()
+
     server.use(
       graphql.query('GetRepoConfigurationStatus', () => {
         return HttpResponse.json({ data: { owner: repoConfig } })
+      }),
+      graphql.query('CachedBundleList', () => {
+        return HttpResponse.json({ data: mockCachedBundles })
       })
     )
+
+    return { user }
   }
 
   describe('CoverageConfiguration', () => {
@@ -374,6 +416,41 @@ describe('Configuration Manager', () => {
         expect(configuredStatus).toBeInTheDocument()
       })
     })
+
+    describe('bundle caching', () => {
+      it('renders bundle caching button', async () => {
+        setup({
+          repoConfig: mockRepoConfig({
+            bundleAnalysis: true,
+            languages: ['typescript'],
+          }),
+        })
+        render(<ConfigurationManager />, { wrapper })
+
+        const button = await screen.findByText('Configure data caching')
+        expect(button).toBeInTheDocument()
+      })
+
+      it('renders bundle caching modal', async () => {
+        const { user } = setup({
+          repoConfig: mockRepoConfig({
+            bundleAnalysis: true,
+            languages: ['typescript'],
+          }),
+        })
+        render(<ConfigurationManager />, { wrapper })
+
+        const button = await screen.findByText('Configure data caching')
+        expect(button).toBeInTheDocument()
+
+        await user.click(button)
+
+        const modalHeader = await screen.findByText(
+          'Configure bundle caching data'
+        )
+        expect(modalHeader).toBeInTheDocument()
+      })
+    })
   })
 
   describe('TestAnalyticsConfiguration', () => {

src/pages/RepoPage/ConfigTab/tabs/ConfigurationManager/ConfigurationManager.tsx

@@ -1,7 +1,11 @@
 import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useState } from 'react'
 import { useParams } from 'react-router'
 
+import { ConfigureCachedBundleModal } from 'pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal'
 import { TierNames } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
+import Icon from 'ui/Icon'
 
 import FeatureGroup from './components/FeatureGroup'
 import FeatureItem from './components/FeatureItem/FeatureItem'
@@ -141,6 +145,11 @@ function TestAnalyticsConfiguration({
 function BundleAnalysisConfiguration({
   repoConfiguration,
 }: ConfigurationGroupProps) {
+  const { displayBundleCachingModal } = useFlags({
+    displayBundleCachingModal: false,
+  })
+
+  const [showBundleCachingModal, setShowBundleCachingModal] = useState(false)
   const jsOrTsPresent = !!repoConfiguration?.repository?.languages?.some(
     (lang) =>
       lang.toLowerCase() === 'javascript' || lang.toLowerCase() === 'typescript'
@@ -169,6 +178,21 @@ function BundleAnalysisConfiguration({
         >
           Track, monitor, and manage your bundle
         </FeatureItem>
+        {displayBundleCachingModal ? (
+          <div>
+            <button
+              onClick={() => setShowBundleCachingModal(true)}
+              className="flex items-center gap-0.5 text-xs font-semibold text-ds-blue-darker hover:cursor-pointer hover:underline"
+            >
+              <Icon name="cog" size="sm" variant="outline" />
+              Configure data caching
+            </button>
+            <ConfigureCachedBundleModal
+              isOpen={showBundleCachingModal}
+              setIsOpen={setShowBundleCachingModal}
+            />
+          </div>
+        ) : null}
       </FeatureGroup.UniversalItems>
     </FeatureGroup>
   )

src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.tsx

@@ -203,7 +203,6 @@ export const ConfigureCachedBundleModal = ({
 
   const { data: bundleData, isPending: isBundlesPending } = useQueryV5({
     ...CachedBundlesQueryOpts({ provider, owner, repo, branch: defaultBranch }),
-
     select: (data) =>
       data.bundles.map((bundle) => ({
         bundleName: bundle.bundleName,