Bust the cache for /whats-new

Using a query param to bust the cache on requests to /whats-new. While I
haven't personally experienced a cacheing issue, it has been reported
that the count and notification bubble are correct, though when loading
the "What's New" module, the content is stale.

Initially I combed over the cache headers, thinking maybe something was
missed there, but the headers seem correct. And given I can't reproduce
the experience, this issue is difficult to solve.

I chose this simple approach to see if it solves the issue, though I'm
open to other solutions.

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/325899

app/assets/javascripts/whats_new/components/app.vue

@@ -30,7 +30,7 @@ export default {
   },
   mounted() {
     this.openDrawer(this.versionDigest);
-    this.fetchItems();
+    this.fetchFreshItems();
 
     const body = document.querySelector('body');
     const namespaceId = body.getAttribute('data-namespace-id');
@@ -42,13 +42,18 @@ export default {
     bottomReached() {
       const page = this.pageInfo.nextPage;
       if (page) {
-        this.fetchItems({ page });
+        this.fetchFreshItems(page);
       }
     },
     handleResize() {
       const height = getDrawerBodyHeight(this.$refs.drawer.$el);
       this.setDrawerBodyHeight(height);
     },
+    fetchFreshItems(page) {
+      const { versionDigest } = this;
+
+      this.fetchItems({ page, versionDigest });
+    },
   },
 };
 </script>

app/assets/javascripts/whats_new/store/actions.js

@@ -14,17 +14,19 @@ export default {
       localStorage.setItem(STORAGE_KEY, versionDigest);
     }
   },
-  fetchItems({ commit, state }, { page } = { page: null }) {
+  fetchItems({ commit, state }, { page, versionDigest } = { page: null, versionDigest: null }) {
     if (state.fetching) {
       return false;
     }
 
     commit(types.SET_FETCHING, true);
 
+    const v = versionDigest;
     return axios
       .get('/-/whats_new', {
         params: {
           page,
+          v,
         },
       })
       .then(({ data, headers }) => {

changelogs/unreleased/jswain_whats_new_stale_content.yml

+---
+title: Bust the cache for /whats-new
+merge_request: 61081
+author:
+type: fixed

spec/frontend/whats_new/components/app_spec.js

@@ -149,7 +149,10 @@ describe('App', () => {
         wrapper.vm.$store.state.pageInfo = { nextPage: 840 };
         emitBottomReached();
 
-        expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), { page: 840 });
+        expect(actions.fetchItems).toHaveBeenCalledWith(expect.anything(), {
+          page: 840,
+          versionDigest: 'version-digest',
+        });
       });
 
       it('when nextPage does not exist it does not call fetchItems', () => {

spec/frontend/whats_new/store/actions_spec.js

@@ -44,16 +44,33 @@ describe('whats new actions', () => {
       axiosMock.restore();
     });
 
+    it("doesn't require arguments", () => {
+      axiosMock.reset();
+
+      axiosMock
+        .onGet('/-/whats_new', { params: { page: undefined, v: undefined } })
+        .replyOnce(200, [{ title: 'GitLab Stories' }]);
+
+      testAction(
+        actions.fetchItems,
+        {},
+        {},
+        expect.arrayContaining([
+          { type: types.ADD_FEATURES, payload: [{ title: 'GitLab Stories' }] },
+        ]),
+      );
+    });
+
     it('passes arguments', () => {
       axiosMock.reset();
 
       axiosMock
-        .onGet('/-/whats_new', { params: { page: 8 } })
+        .onGet('/-/whats_new', { params: { page: 8, v: 42 } })
         .replyOnce(200, [{ title: 'GitLab Stories' }]);
 
       testAction(
         actions.fetchItems,
-        { page: 8 },
+        { page: 8, versionDigest: 42 },
         {},
         expect.arrayContaining([
           { type: types.ADD_FEATURES, payload: [{ title: 'GitLab Stories' }] },