Recache coverage data when it gets loaded

Add `coverageLoaded` boolean to diffs store (default to `false)
Set it to `true` when coverage data is loaded successfully
Use it as part of the cache key so that inline coverage gets updated
when we get a 200 response after a 204 response from polling

app/assets/javascripts/diffs/components/diff_row.vue

@@ -42,6 +42,11 @@ export default {
       required: false,
       default: false,
     },
+    coverageLoaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     inline: {
       type: Boolean,
       required: false,
@@ -83,14 +88,15 @@ export default {
       if (!props.inline || !props.line.left) return {};
       return props.fileLineCoverage(props.filePath, props.line.left.new_line);
     },
-    (props) => [props.inline, props.filePath, props.line.left?.new_line].join(':'),
+    (props) =>
+      [props.inline, props.filePath, props.line.left?.new_line, props.coverageLoaded].join(':'),
   ),
   coverageStateRight: memoize(
     (props) => {
       if (!props.line.right) return {};
       return props.fileLineCoverage(props.filePath, props.line.right.new_line);
     },
-    (props) => [props.line.right?.new_line, props.filePath].join(':'),
+    (props) => [props.line.right?.new_line, props.filePath, props.coverageLoaded].join(':'),
   ),
   showCodequalityLeft: memoize(
     (props) => {

app/assets/javascripts/diffs/components/diff_view.vue

@@ -52,7 +52,7 @@ export default {
   },
   computed: {
     ...mapGetters('diffs', ['commitId', 'fileLineCoverage']),
-    ...mapState('diffs', ['codequalityDiff', 'highlightedRow']),
+    ...mapState('diffs', ['codequalityDiff', 'highlightedRow', 'coverageLoaded']),
     ...mapState({
       selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
       selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
@@ -180,6 +180,7 @@ export default {
         :index="index"
         :is-highlighted="isHighlighted(line)"
         :file-line-coverage="fileLineCoverage"
+        :coverage-loaded="coverageLoaded"
         @showCommentForm="(code) => singleLineComment(code, line)"
         @setHighlightedRow="setHighlightedRow"
         @toggleLineDiscussions="

app/assets/javascripts/diffs/store/modules/diff_state.js

@@ -21,6 +21,7 @@ export default () => ({
   startVersion: null, // Null unless a target diff is selected for comparison that is not the "base" diff
   diffFiles: [],
   coverageFiles: {},
+  coverageLoaded: false,
   mergeRequestDiffs: [],
   mergeRequestDiff: null,
   diffViewType: getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,

app/assets/javascripts/diffs/store/mutations.js

@@ -86,7 +86,7 @@ export default {
   },
 
   [types.SET_COVERAGE_DATA](state, coverageFiles) {
-    Object.assign(state, { coverageFiles });
+    Object.assign(state, { coverageFiles, coverageLoaded: true });
   },
 
   [types.RENDER_FILE](state, file) {

spec/frontend/diffs/components/diff_row_spec.js

@@ -294,17 +294,19 @@ describe('coverage state memoization', () => {
 
     const noCoverageProps = {
       fileLineCoverage: () => lineWithoutCoverage,
+      coverageLoaded: false,
       ...unchangedProps,
     };
     const coverageProps = {
       fileLineCoverage: () => lineWithCoverage,
+      coverageLoaded: true,
       ...unchangedProps,
     };
 
     // this caches no coverage for the line
     expect(DiffRow.coverageStateLeft(noCoverageProps)).toStrictEqual(lineWithoutCoverage);
 
-    // then this retrieves no coverage for the line from the cache
+    // this retrieves coverage for the line because it has been recached
     expect(DiffRow.coverageStateLeft(coverageProps)).toStrictEqual(lineWithCoverage);
   });
 });

spec/frontend/diffs/store/mutations_spec.js

@@ -112,6 +112,7 @@ describe('DiffsStoreMutations', () => {
       mutations[types.SET_COVERAGE_DATA](state, coverage);
 
       expect(state.coverageFiles).toEqual(coverage);
+      expect(state.coverageLoaded).toEqual(true);
     });
   });