feat: Add bundle cache modal to bundles tab (#3653)

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.test.tsx

@@ -8,10 +8,19 @@ 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-dom'
 
 import BundleSelection from './BundleSelection'
 
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn().mockReturnValue({ displayBundleCachingModal: true }),
+}))
+
+vi.mock('shared/featureFlags', () => ({
+  useFlags: mocks.useFlags,
+}))
+
 const mockRepoOverview = {
   __typename: 'Repository',
   private: false,
@@ -61,6 +70,27 @@ const mockBranchBundles = {
   },
 }
 
+const mockCachedBundles = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      branch: {
+        head: {
+          bundleAnalysis: {
+            bundleAnalysisReport: {
+              __typename: 'BundleAnalysisReport',
+              bundles: [
+                { name: 'bundle1', isCached: true },
+                { name: 'bundle2', isCached: false },
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+}
+
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, suspense: true } },
@@ -85,6 +115,7 @@ const wrapper =
             ]}
           >
             <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+            <Toaster />
           </Route>
         </MemoryRouter>
       </QueryClientProvider>
@@ -136,6 +167,9 @@ describe('BundleSelection', () => {
       }),
       graphql.query('BranchBundlesNames', () => {
         return HttpResponse.json({ data: mockBranchBundles })
+      }),
+      graphql.query('CachedBundleList', () => {
+        return HttpResponse.json({ data: mockCachedBundles })
       })
     )
 
@@ -182,6 +216,16 @@ describe('BundleSelection', () => {
     expect(loadSelector).toBeInTheDocument()
   })
 
+  it('renders bundle caching button', async () => {
+    setup()
+    render(<BundleSelection />, { wrapper: wrapper() })
+
+    const bundleCachingButton = await screen.findByRole('button', {
+      name: 'Configure data caching',
+    })
+    expect(bundleCachingButton).toBeInTheDocument()
+  })
+
   describe('user interacts with branch and bundle selectors', () => {
     describe('user selects a branch', () => {
       it('resets the bundle selector to the first available bundle', async () => {
@@ -277,4 +321,21 @@ describe('BundleSelection', () => {
       })
     })
   })
+
+  describe('user clicks bundle caching button', () => {
+    it('renders bundle caching modal', async () => {
+      const { user } = setup()
+      render(<BundleSelection />, { wrapper: wrapper() })
+
+      const bundleCachingButton = await screen.findByRole('button', {
+        name: 'Configure data caching',
+      })
+      await user.click(bundleCachingButton)
+
+      const modalHeader = await screen.findByText(
+        'Configure bundle caching data'
+      )
+      expect(modalHeader).toBeInTheDocument()
+    })
+  })
 })

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.tsx

@@ -1,4 +1,8 @@
-import { lazy, useCallback, useRef } from 'react'
+import { lazy, useCallback, useRef, useState } from 'react'
+
+import { ConfigureCachedBundleModal } from 'pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal'
+import { useFlags } from 'shared/featureFlags'
+import Icon from 'ui/Icon'
 
 import BranchSelector from './BranchSelector'
 import { LoadSelector } from './LoadSelector'
@@ -10,6 +14,12 @@ const BundleSelection: React.FC = () => {
   const typesSelectRef = useRef<{ resetSelected: () => void }>(null)
   const loadingSelectRef = useRef<{ resetSelected: () => void }>(null)
 
+  const [showBundleCachingModal, setShowBundleCachingModal] = useState(false)
+
+  const { displayBundleCachingModal } = useFlags({
+    displayBundleCachingModal: false,
+  })
+
   const resetFilterSelects = useCallback(() => {
     typesSelectRef.current?.resetSelected()
     loadingSelectRef?.current?.resetSelected()
@@ -30,6 +40,21 @@ const BundleSelection: React.FC = () => {
         />
         <TypeSelector ref={typesSelectRef} />
         <LoadSelector ref={loadingSelectRef} />
+        {displayBundleCachingModal ? (
+          <div className="flex w-full justify-end self-start md:w-auto">
+            <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}
       </div>
     </div>
   )

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

@@ -177,7 +177,7 @@ describe('ConfigureCachedBundleModal', () => {
       expect(alertDescription).toBeInTheDocument()
 
       const alertDescription2 = await screen.findByText(
-        'Note, if caching is removed trend data will not be available.'
+        'Note, if caching is removed, trend data will not be available.'
       )
       expect(alertDescription2).toBeInTheDocument()
 

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

@@ -153,7 +153,7 @@ const BundleCachingModalBody: React.FC<BundleCachingModalBodyProps> = ({
         </Alert.Description>
         <br />
         <Alert.Description>
-          Note, if caching is removed trend data will not be available.
+          Note, if caching is removed, trend data will not be available.
         </Alert.Description>
       </Alert>
       {isBundlesPending ? (