Restore function to "Show more" buttons (#22399)

There was a serious regression in #21012 which broke the Show More
button on the diff page, and the show more button was also broken on the
file tree too.

This PR fixes this by resetting the pageData.diffFiles as the vue
watched value and reattachs a function to the show more button outside
of the file tree view.

Fix #22380

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

web_src/js/components/DiffFileTree.vue

@@ -8,7 +8,7 @@
       <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
     </div>
     <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
-      <span>{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
+      <span class="mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
     </div>
   </div>
 </template>
@@ -94,6 +94,9 @@ export default {
   mounted() {
     // ensure correct buttons when we are mounted to the dom
     this.adjustToggleButton(this.fileTreeIsVisible);
+    // replace the pageData.diffFileInfo.files with our watched data so we get updates
+    pageData.diffFileInfo.files = this.files;
+
     document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
   },
   unmounted() {