Add filetree on left of diff view (#21012)

This PR adds a filetree to the left side of the files/diff view.

Initially the filetree will not be shown and may be shown via a new
"Show file tree" button.

Showing and hiding is using the same icon as github. Folders are
collapsible. On small devices (max-width 991 PX) the file tree will be
hidden.

Close #18192

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

2 files changed, 39 insertions, 25 deletions

diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
new file mode 100644
index 0000000000..9eba3cf887
--- /dev/null
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import DiffFileTree from '../components/DiffFileTree.vue';
+import DiffFileList from '../components/DiffFileList.vue';
+
+export default function initDiffFileTree() {
+  const el = document.getElementById('diff-file-tree-container');
+  if (!el) return;
+
+  const View = Vue.extend({
+    render: (createElement) => createElement(DiffFileTree),
+  });
+  new View().$mount(el);
+
+  const fileListElement = document.getElementById('diff-file-list-container');
+  if (!fileListElement) return;
+
+  const fileListView = Vue.extend({
+    render: (createElement) => createElement(DiffFileList),
+  });
+  new fileListView().$mount(fileListElement);
+}
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 0a59bcf1c2..0fb7ee22d7 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -68,7 +68,6 @@ export function initRepoDiffConversationForm() {
     initCompReactionSelector($newConversationHolder);
   });
 
-
   $(document).on('click', '.resolve-conversation', async function (e) {
     e.preventDefault();
     const comment_id = $(this).data('comment-id');
@@ -118,32 +117,27 @@ function onShowMoreFiles() {
   countAndUpdateViewedFiles();
 }
 
-export function initRepoDiffShowMore() {
-  $('#diff-files, #diff-file-boxes').on('click', '#diff-show-more-files, #diff-show-more-files-stats', (e) => {
-    e.preventDefault();
-
-    if ($(e.target).hasClass('disabled')) {
+export function doLoadMoreFiles(link, diffEnd, callback) {
+  const url = `${link}?skip-to=${diffEnd}&file-only=true`;
+  $.ajax({
+    type: 'GET',
+    url,
+  }).done((resp) => {
+    if (!resp) {
+      callback(resp);
       return;
     }
-    $('#diff-show-more-files, #diff-show-more-files-stats').addClass('disabled');
-
-    const url = $('#diff-show-more-files, #diff-show-more-files-stats').data('href');
-    $.ajax({
-      type: 'GET',
-      url,
-    }).done((resp) => {
-      if (!resp) {
-        $('#diff-show-more-files, #diff-show-more-files-stats').removeClass('disabled');
-        return;
-      }
-      $('#diff-too-many-files-stats').remove();
-      $('#diff-files').append($(resp).find('#diff-files li'));
-      $('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children());
-      onShowMoreFiles();
-    }).fail(() => {
-      $('#diff-show-more-files, #diff-show-more-files-stats').removeClass('disabled');
-    });
+    // By simply rerunning the script we add the new data to our existing
+    // pagedata object. this triggers vue and the filetree and filelist will
+    // render the new elements.
+    $('body').append($(resp).find('script#diff-data-script'));
+    callback(resp);
+  }).fail(() => {
+    callback();
   });
+}
+
+export function initRepoDiffShowMore() {
   $(document).on('click', 'a.diff-show-more-button', (e) => {
     e.preventDefault();
     const $target = $(e.target);
@@ -163,7 +157,6 @@ export function initRepoDiffShowMore() {
         $target.removeClass('disabled');
         return;
       }
-
       $target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children());
       onShowMoreFiles();
     }).fail(() => {