feat: Create modal for controlling bundle cache settings #3652

nicholas-codecov · 2025-01-13T13:31:24Z

Description

This PR adds in a new modal, that will be used in codecov/engineering-team#3157 on the bundles and repo configuration pages so that users can control which bundles are being cached.

Closes codecov/engineering-team#3156

Note

This modal isn't currently being used in the UI, and will be added in future PRs.

Notable Changes

Add in new modal that users can control which bundles are being cached
Slight tweaks to the mutation mutation
Add/Update tests

Screenshots

Light mode:

Dark mode:

…ion input being toggleCaching not isCached

codecov-staging · 2025-01-13T13:33:47Z

Bundle Report

Bundle size has no change ✅

codecov · 2025-01-13T13:34:23Z

Bundle Report

Changes will increase total bundle size by 22 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
gazebo-production-system	6.04MB	15 bytes (0.0%) ⬆️
gazebo-production-esm	6.09MB	7 bytes (0.0%) ⬆️

codecov-notifications · 2025-01-13T13:34:45Z

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

@@            Coverage Diff             @@
##             main    #3652      +/-   ##
==========================================
+ Coverage   98.93%   98.94%   +0.01%     
==========================================
  Files         814      815       +1     
  Lines       14612    14676      +64     
  Branches     4151     4156       +5     
==========================================
+ Hits        14456    14521      +65     
+ Misses        149      148       -1     
  Partials        7        7

Files with missing lines	Coverage Δ
...reCachedBundleModal/ConfigureCachedBundleModal.tsx	`100.00% <100.00%> (ø)`
...c/services/bundleAnalysis/useUpdateBundleCache.tsx	`100.00% <100.00%> (ø)`

... and 1 file with indirect coverage changes

Components	Coverage Δ
Assets	`100.00% <ø> (ø)`
Layouts	`99.71% <ø> (ø)`
Pages	`98.65% <100.00%> (+<0.01%)`	⬆️
Services	`99.34% <100.00%> (+<0.01%)`	⬆️
Shared	`99.37% <ø> (+0.06%)`	⬆️
UI	`99.14% <ø> (ø)`

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6807f02...703aee1. Read the comment docs.

codecov-public-qa · 2025-01-13T13:34:51Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.94%. Comparing base (6807f02) to head (703aee1).
Report is 3 commits behind head on main.

✅ All tests successful. No failed tests found.

@@            Coverage Diff             @@
##             main    #3652      +/-   ##
==========================================
+ Coverage   98.93%   98.94%   +0.01%     
==========================================
  Files         814      815       +1     
  Lines       14612    14676      +64     
  Branches     4151     4156       +5     
==========================================
+ Hits        14456    14521      +65     
+ Misses        149      148       -1     
  Partials        7        7

Files with missing lines	Coverage Δ
...reCachedBundleModal/ConfigureCachedBundleModal.tsx	`100.00% <100.00%> (ø)`
...c/services/bundleAnalysis/useUpdateBundleCache.tsx	`100.00% <100.00%> (ø)`

... and 1 file with indirect coverage changes

Components	Coverage Δ
Assets	`100.00% <ø> (ø)`
Layouts	`99.71% <ø> (ø)`
Pages	`98.65% <100.00%> (+<0.01%)`	⬆️
Services	`99.34% <100.00%> (+<0.01%)`	⬆️
Shared	`99.37% <ø> (+0.06%)`	⬆️
UI	`99.14% <ø> (ø)`

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6807f02...703aee1. Read the comment docs.

codecov · 2025-01-13T13:34:52Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.94%. Comparing base (6807f02) to head (703aee1).
Report is 3 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3652      +/-   ##
==========================================
+ Coverage   98.93%   98.94%   +0.01%     
==========================================
  Files         814      815       +1     
  Lines       14612    14676      +64     
  Branches     4144     4156      +12     
==========================================
+ Hits        14456    14521      +65     
+ Misses        149      148       -1     
  Partials        7        7

Files with missing lines	Coverage Δ
...reCachedBundleModal/ConfigureCachedBundleModal.tsx	`100.00% <100.00%> (ø)`
...c/services/bundleAnalysis/useUpdateBundleCache.tsx	`100.00% <100.00%> (ø)`

... and 1 file with indirect coverage changes

Components	Coverage Δ
Assets	`100.00% <ø> (ø)`
Layouts	`99.71% <ø> (ø)`
Pages	`98.65% <100.00%> (+<0.01%)`	⬆️
Services	`99.34% <100.00%> (+<0.01%)`	⬆️
Shared	`99.37% <ø> (+0.06%)`	⬆️
UI	`99.14% <ø> (ø)`

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6807f02...703aee1. Read the comment docs.

codecov-qa · 2025-01-13T13:37:16Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.94%. Comparing base (6807f02) to head (703aee1).
Report is 3 commits behind head on main.

✅ All tests successful. No failed tests found.

@@            Coverage Diff             @@
##             main    #3652      +/-   ##
==========================================
+ Coverage   98.93%   98.94%   +0.01%     
==========================================
  Files         814      815       +1     
  Lines       14612    14676      +64     
  Branches     4144     4156      +12     
==========================================
+ Hits        14456    14521      +65     
+ Misses        149      148       -1     
  Partials        7        7

Files with missing lines	Coverage Δ
...reCachedBundleModal/ConfigureCachedBundleModal.tsx	`100.00% <100.00%> (ø)`
...c/services/bundleAnalysis/useUpdateBundleCache.tsx	`100.00% <100.00%> (ø)`

... and 1 file with indirect coverage changes

Components	Coverage Δ
Assets	`100.00% <ø> (ø)`
Layouts	`99.71% <ø> (ø)`
Pages	`98.65% <100.00%> (+<0.01%)`	⬆️
Services	`99.34% <100.00%> (+<0.01%)`	⬆️
Shared	`99.37% <ø> (+0.06%)`	⬆️
UI	`99.14% <ø> (ø)`

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6807f02...703aee1. Read the comment docs.

codecov-releaser · 2025-01-13T13:37:23Z

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit	Created	Cloud	Enterprise
`3bb16b4`	Mon, 13 Jan 2025 13:37:23 GMT	Expired	Expired
`4d238f4`	Mon, 13 Jan 2025 14:19:49 GMT	Expired	Expired
`b1ce75a`	Mon, 13 Jan 2025 14:49:49 GMT	Expired	Expired
`7f26c1c`	Mon, 13 Jan 2025 17:48:34 GMT	Expired	Expired
`703aee1`	Tue, 14 Jan 2025 19:26:17 GMT	Cloud	Enterprise

nicholas-codecov · 2025-01-13T13:37:41Z

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

+                      queryClientV5.setQueryData(
+                        CachedBundlesQueryOpts({
+                          provider,
+                          owner,
+                          repo,
+                          branch: defaultBranch,
+                        }).queryKey,
+                        { bundles }
+                      )


Instead of invalidating the query, this mutation returns the updated state so we can just update the query state removing an extra network request (a "single flight mutation")! However, just incase when the modal is re-opened the data will be refetched if the data is stale.

If you wanna learn more about "single flight mutations", you can watch this short video.

nicholas-codecov · 2025-01-13T14:38:58Z

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

+  }
+
+  return (
+    <Modal


I originally wanted to use a <form> with react-hook-form however because of the way our modal component is built at this point in time, i wasn't able to do this.

As our modal component isn't composable, and it uses portals, you can't wrap the Modal component in a <form> so that you can utilize react-hook-form to control the inputs as it renders the content of the modal elsewhere in the DOM tree.

My work around to this, is to use simple plain old React state that is set with data returned from the API, and is updated when the user interacts with the form, and then the state is used when submitting the mutation.

nicholas-codecov · 2025-01-13T14:39:39Z

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

+
+  const closeModal = () => {
+    // this resets the state when the modal is closed
+    setBundleState([])


Just reseting the state if the user has been poking around with the toggles, but didn't save anything.

nicholas-codecov · 2025-01-13T14:40:45Z

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

+  const { data: bundleData, isLoading: isBundlesLoading } = useQueryV5({
+    ...CachedBundlesQueryOpts({ provider, owner, repo, branch: defaultBranch }),
+    // we can use the select hook to transform the data to the format we want
+    select: (data) =>
+      data.bundles.map((bundle) => ({
+        bundleName: bundle.bundleName,
+        toggleCaching: bundle.isCached,
+      })),


Thanks to the queryOptions API setup, we can utilize select like this and have all the correct types can be generated through inference 🥳

Unlike before, where we'd lose all type inference and would have to type things out manually and could end up being incorrect!

nicholas-codecov · 2025-01-13T14:44:00Z

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

+  })
+  const defaultBranch = repoOverview?.defaultBranch ?? ''
+
+  const { data: bundleData, isPending: isBundlesPending } = useQueryV5({


We're using isPending here because of a change in TS Query V5, you can read about it here.

TLDR: isLoading renamed to isPending

nicholas-codecov · 2025-01-13T14:44:51Z

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

+  const { data: bundleData, isPending: isBundlesPending } = useQueryV5({
+    ...CachedBundlesQueryOpts({ provider, owner, repo, branch: defaultBranch }),
+    // we can use the select hook to transform the data to the format we want
+    select: (data) =>
+      data.bundles.map((bundle) => ({
+        bundleName: bundle.bundleName,
+        toggleCaching: bundle.isCached,
+      })),
+    enabled: isOpen && !!defaultBranch,
+  })


Thanks to the queryOptions API, we're able to spread the details from it, and utilize the select option so that we can pre-format the data from this hook AND still have all the types be generated through inference and be correct! 🥳

nicholas-codecov · 2025-01-13T14:47:51Z

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

+                    queryClientV5.setQueryData(
+                      CachedBundlesQueryOpts({
+                        provider,
+                        owner,
+                        repo,
+                        branch: defaultBranch,
+                      }).queryKey,
+                      { bundles }
+                    )


Instead of invalidating a query here, the GQL mutation we're using actually returns the updated state so we're able to leverage it and update the cache directly without an extra network request!

There is a relatively new term coined for this call "Single-Flight Mutations`, and if you want to learn a little bit more about them, here's a 30s YT short talking about them.

ajay-sentry

couple comments to look at

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

ajay-sentry · 2025-01-13T20:24:46Z

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

+  })
+  const defaultBranch = repoOverview?.defaultBranch ?? ''
+
+  const { data: bundleData, isPending: isBundlesPending } = useQueryV5({


TLDR: isLoading renamed to isPending

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

ajay-sentry

lgtm!

nicholas-codecov added 3 commits January 13, 2025 07:42

update mutation to parse input properly and also fix issue with mutat…

2ecec1a

…ion input being toggleCaching not isCached

add in modal to control bundle cache settings

440a439

add in tests for new modal

3bb16b4

nicholas-codecov added 3 commits January 13, 2025 10:05

remove use of context as we can just use normal react state

213dd2b

update comments

4d238f4

tidy up isPending

b1ce75a

nicholas-codecov commented Jan 13, 2025

View reviewed changes

nicholas-codecov marked this pull request as ready for review January 13, 2025 14:49

move bundle cache modal to repo page shared directory

7f26c1c

This was referenced Jan 13, 2025

feat: Add bundle cache modal to bundles tab #3653

Merged

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

Merged

ajay-sentry reviewed Jan 13, 2025

View reviewed changes

nicholas-codecov added 2 commits January 14, 2025 07:07

address feedback

aef09e6

fix typo in test

c2be931

ajay-sentry approved these changes Jan 14, 2025

View reviewed changes

update copy

703aee1

nicholas-codecov added this pull request to the merge queue Jan 14, 2025

Merged via the queue into main with commit 333b4e9 Jan 14, 2025
62 checks passed

nicholas-codecov deleted the gh-eng-3156-create-modal-for-controlling-bundle-cache-settings branch January 14, 2025 19:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Create modal for controlling bundle cache settings #3652

feat: Create modal for controlling bundle cache settings #3652

nicholas-codecov commented Jan 13, 2025 •

edited

Loading

codecov-staging bot commented Jan 13, 2025 •

edited

Loading

codecov bot commented Jan 13, 2025 •

edited

Loading

codecov-notifications bot commented Jan 13, 2025 •

edited

Loading

codecov-public-qa bot commented Jan 13, 2025 •

edited

Loading

codecov bot commented Jan 13, 2025 •

edited

Loading

codecov-qa bot commented Jan 13, 2025 •

edited

Loading

codecov-releaser commented Jan 13, 2025 •

edited

Loading

nicholas-codecov Jan 13, 2025

nicholas-codecov Jan 13, 2025

nicholas-codecov Jan 13, 2025

nicholas-codecov Jan 13, 2025 •

edited

Loading

nicholas-codecov Jan 13, 2025

ajay-sentry Jan 13, 2025

nicholas-codecov Jan 13, 2025

nicholas-codecov Jan 13, 2025

ajay-sentry left a comment

ajay-sentry Jan 13, 2025

ajay-sentry left a comment

feat: Create modal for controlling bundle cache settings #3652

feat: Create modal for controlling bundle cache settings #3652

Conversation

nicholas-codecov commented Jan 13, 2025 • edited Loading

Description

Notable Changes

Screenshots

codecov-staging bot commented Jan 13, 2025 • edited Loading

Bundle Report

codecov bot commented Jan 13, 2025 • edited Loading

Bundle Report

codecov-notifications bot commented Jan 13, 2025 • edited Loading

Codecov Report

codecov-public-qa bot commented Jan 13, 2025 • edited Loading

Codecov Report

codecov bot commented Jan 13, 2025 • edited Loading

Codecov Report

codecov-qa bot commented Jan 13, 2025 • edited Loading

Codecov Report

codecov-releaser commented Jan 13, 2025 • edited Loading

✅ Deploy preview for gazebo ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicholas-codecov Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajay-sentry left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajay-sentry left a comment

Choose a reason for hiding this comment

nicholas-codecov commented Jan 13, 2025 •

edited

Loading

codecov-staging bot commented Jan 13, 2025 •

edited

Loading

codecov bot commented Jan 13, 2025 •

edited

Loading

codecov-notifications bot commented Jan 13, 2025 •

edited

Loading

codecov-public-qa bot commented Jan 13, 2025 •

edited

Loading

codecov bot commented Jan 13, 2025 •

edited

Loading

codecov-qa bot commented Jan 13, 2025 •

edited

Loading

codecov-releaser commented Jan 13, 2025 •

edited

Loading

nicholas-codecov Jan 13, 2025 •

edited

Loading