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 ? ( +
+ + +
+ ) : 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 ? (