diff --git a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.test.tsx b/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.test.tsx
index 5b764059af..86205ad215 100644
--- a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.test.tsx
+++ b/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 =
]}
>
Loading
}>{children}
+
@@ -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( , { 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( , { 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()
+ })
+ })
})
diff --git a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.tsx b/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.tsx
index 4faf31d4ba..df9dd9fc2d 100644
--- a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.tsx
+++ b/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 = () => {
/>
+ {displayBundleCachingModal ? (
+
+ setShowBundleCachingModal(true)}
+ className="flex items-center gap-0.5 text-xs font-semibold text-ds-blue-darker hover:cursor-pointer hover:underline"
+ >
+
+ Configure data caching
+
+
+
+ ) : null}
)
diff --git a/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.test.tsx b/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.test.tsx
index 2b5929ed12..1d45541d8e 100644
--- a/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.test.tsx
+++ b/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()
diff --git a/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.tsx b/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.tsx
index c8a2638315..124582e6e0 100644
--- a/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.tsx
+++ b/src/pages/RepoPage/shared/ConfigureCachedBundleModal/ConfigureCachedBundleModal.tsx
@@ -153,7 +153,7 @@ const BundleCachingModalBody: React.FC = ({
- Note, if caching is removed trend data will not be available.
+ Note, if caching is removed, trend data will not be available.
{isBundlesPending ? (