Merge branch 'tor/defect/file-viewed-reviews/convert-to-vuex' into 'master'

Resolve "Mark as viewed stays checked in Single File Mode"

See merge request gitlab-org/gitlab!55922

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

@@ -125,7 +125,7 @@ export default {
       required: false,
       default: '',
     },
-    mrReviews: {
+    rehydratedMrReviews: {
       type: Object,
       required: false,
       default: () => ({}),
@@ -164,6 +164,7 @@ export default {
       'canMerge',
       'hasConflicts',
       'viewDiffsFileByFile',
+      'mrReviews',
     ]),
     ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
@@ -268,7 +269,7 @@ export default {
       showSuggestPopover: this.showSuggestPopover,
       viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
       defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
-      mrReviews: this.mrReviews || {},
+      mrReviews: this.rehydratedMrReviews,
     });
 
     if (this.shouldShow) {
@@ -513,7 +514,7 @@ export default {
               v-for="(file, index) in diffs"
               :key="file.newPath"
               :file="file"
-              :reviewed="fileReviews[index]"
+              :reviewed="fileReviews[file.id]"
               :is-first-file="index === 0"
               :is-last-file="index === diffFilesLength - 1"
               :help-page-path="helpPagePath"

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

@@ -150,6 +150,11 @@ export default {
     },
   },
   watch: {
+    'file.id': {
+      handler: function fileIdHandler() {
+        this.manageViewedEffects();
+      },
+    },
     'file.file_hash': {
       handler: function hashChangeWatch(newHash, oldHash) {
         this.isCollapsed = isCollapsed(this.file);
@@ -186,9 +191,7 @@ export default {
       this.postRender();
     }
 
-    if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) {
-      this.handleToggle();
-    }
+    this.manageViewedEffects();
   },
   beforeDestroy() {
     eventHub.$off(EVT_EXPAND_ALL_FILES, this.expandAllListener);
@@ -200,6 +203,11 @@ export default {
       'setRenderIt',
       'setFileCollapsedByUser',
     ]),
+    manageViewedEffects() {
+      if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) {
+        this.handleToggle();
+      }
+    },
     expandAllListener() {
       if (this.isCollapsed) {
         this.handleToggle();

app/assets/javascripts/diffs/index.js

@@ -124,7 +124,7 @@ export default function initDiffsApp(store) {
           showSuggestPopover: this.showSuggestPopover,
           fileByFileUserPreference: this.viewDiffsFileByFile,
           defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
-          mrReviews: getReviewsForMergeRequest(mrPath),
+          rehydratedMrReviews: getReviewsForMergeRequest(mrPath),
         },
       });
     },

app/assets/javascripts/diffs/utils/file_reviews.js

@@ -9,7 +9,12 @@ export function isFileReviewed(reviews, file) {
 }
 
 export function reviewStatuses(files, reviews) {
-  return files.map((file) => isFileReviewed(reviews, file));
+  return files.reduce((flat, file) => {
+    return {
+      ...flat,
+      [file.id]: isFileReviewed(reviews, file),
+    };
+  }, {});
 }
 
 export function getReviewsForMergeRequest(mrPath) {

changelogs/unreleased/tor-defect-file-viewed-reviews-convert-to-vuex.yml

+---
+title: Fix 'viewed' checkbox in single-file view mode
+merge_request: 55922
+author:
+type: fixed

spec/frontend/diffs/utils/file_reviews_spec.js

@@ -49,11 +49,11 @@ describe('File Review(s) utilities', () => {
 
     it.each`
       mrReviews                         | files             | fileReviews
-      ${{}}                             | ${[file1, file2]} | ${[false, false]}
-      ${{ abc: ['123'] }}               | ${[file1, file2]} | ${[true, false]}
-      ${{ abc: ['098'] }}               | ${[file1, file2]} | ${[false, true]}
-      ${{ def: ['123'] }}               | ${[file1, file2]} | ${[false, false]}
-      ${{ abc: ['123'], def: ['098'] }} | ${[]}             | ${[]}
+      ${{}}                             | ${[file1, file2]} | ${{ 123: false, '098': false }}
+      ${{ abc: ['123'] }}               | ${[file1, file2]} | ${{ 123: true, '098': false }}
+      ${{ abc: ['098'] }}               | ${[file1, file2]} | ${{ 123: false, '098': true }}
+      ${{ def: ['123'] }}               | ${[file1, file2]} | ${{ 123: false, '098': false }}
+      ${{ abc: ['123'], def: ['098'] }} | ${[]}             | ${{}}
     `(
       'returns $fileReviews based on the diff files in state and the existing reviews $reviews',
       ({ mrReviews, files, fileReviews }) => {