From df6abfff17f6d7d63a6739aefa467948b156b134 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 29 Nov 2023 17:23:15 +0400
Subject: [PATCH] Diffs SSR POC

---
 .../components/diff_file_drafts.vue           |  14 +-
 .../components/diff_discussion_reply.vue      |   7 +-
 .../diffs/components/diff_line_note_form.vue  |   5 +-
 .../diffs/components/diffs_file_tree.vue      |   9 +-
 .../diffs/components/tree_list.vue            |  17 +-
 app/assets/javascripts/main.js                |  12 +-
 app/assets/javascripts/mr_notes/init.js       |  14 +-
 .../merge_requests/diffs/diff_file.js         | 194 ++++++++++++++++++
 .../merge_requests/diffs/diff_store.js        |  56 +++++
 .../merge_requests/diffs/file_group.js        |  39 ++++
 .../projects/merge_requests/diffs/index.js    |  37 +++-
 .../merge_requests/diffs/render_streams.js    |  24 +++
 .../projects/merge_requests/diffs/store.js    |   4 +
 app/assets/javascripts/streaming/constants.js |   2 +-
 .../javascripts/streaming/render_balancer.js  |   2 +-
 .../vue_shared/components/file_row.vue        |  11 +-
 .../page_bundles/merge_request.scss           |   2 +-
 .../page_bundles/merge_requests.scss          |   3 +
 app/assets/stylesheets/pages/notes.scss       |   8 +
 .../projects/merge_requests_controller.rb     |   5 +
 app/helpers/commits_helper.rb                 |  16 ++
 app/helpers/diff_helper.rb                    |   6 +-
 app/helpers/merge_requests_helper.rb          |   1 +
 app/models/commit.rb                          |   2 +
 app/models/diff_viewer/base.rb                |   1 +
 app/views/projects/diffs/_file.html.haml      |  11 +-
 app/views/projects/diffs/_files.html.haml     |   6 +
 .../projects/diffs/_parallel_view.html.haml   | 101 ++++-----
 .../projects/merge_requests/_page.html.haml   |   5 +-
 .../projects/merge_requests/diffs.html.haml   |  11 +-
 config/routes/merge_requests.rb               |   1 +
 lib/gitlab/git/diff.rb                        |   1 +
 32 files changed, 545 insertions(+), 82 deletions(-)
 create mode 100644 app/assets/javascripts/pages/projects/merge_requests/diffs/diff_file.js
 create mode 100644 app/assets/javascripts/pages/projects/merge_requests/diffs/diff_store.js
 create mode 100644 app/assets/javascripts/pages/projects/merge_requests/diffs/file_group.js
 create mode 100644 app/assets/javascripts/pages/projects/merge_requests/diffs/render_streams.js
 create mode 100644 app/assets/javascripts/pages/projects/merge_requests/diffs/store.js
 create mode 100644 app/views/projects/diffs/_files.html.haml

diff --git a/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue b/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
index 62fd77ed5342fc..fa6b1dd2184c96 100644
--- a/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
+++ b/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
@@ -12,9 +12,15 @@ export default {
   },
   mixins: [imageDiff],
   props: {
+    drafts: {
+      type: Array,
+      required: false,
+      default: null,
+    },
     fileHash: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     showPin: {
       type: Boolean,
@@ -29,8 +35,8 @@ export default {
   },
   computed: {
     ...mapGetters('batchComments', ['draftsForFile']),
-    drafts() {
-      return this.draftsForFile(this.fileHash).filter(
+    _drafts() {
+      return (this.draftsForFile(this.fileHash) || this.drafts).filter(
         (f) => f.position?.position_type === this.positionType,
       );
     },
@@ -41,7 +47,7 @@ export default {
 <template>
   <div>
     <div
-      v-for="(draft, index) in drafts"
+      v-for="(draft, index) in _drafts"
       :key="draft.id"
       class="discussion-notes diff-discussions position-relative"
     >
diff --git a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
index 4de38b09be6717..643c987abdf379 100644
--- a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
+++ b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
@@ -25,6 +25,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    canReply: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     ...mapGetters({
@@ -37,7 +42,7 @@ export default {
 
 <template>
   <div class="discussion-reply-holder d-flex clearfix">
-    <template v-if="userCanReply">
+    <template v-if="userCanReply || canReply">
       <slot v-if="hasForm" name="form"></slot>
       <template v-else-if="renderReplyPlaceholder">
         <gl-button @click="$emit('showNewDiscussionForm')">
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 287b2fc1973d85..8ca61d28639ae7 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -30,7 +30,8 @@ export default {
   props: {
     diffFileHash: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     line: {
       type: Object,
@@ -97,6 +98,7 @@ export default {
       };
     },
     diffFile() {
+      if (!this.diffFileHash) return { [INLINE_DIFF_LINES_KEY]: [], diff_refs: {} };
       return this.getDiffFileByHash(this.diffFileHash);
     },
     commentLineOptions() {
@@ -195,6 +197,7 @@ export default {
       shouldConfirm,
       isDirty,
     ) {
+      this.$emit('cancel');
       if (shouldConfirm && isDirty) {
         const msg = s__('Notes|Are you sure you want to cancel creating this comment?');
 
diff --git a/app/assets/javascripts/diffs/components/diffs_file_tree.vue b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
index 34cd901dd0c22b..b967ed33d69d74 100644
--- a/app/assets/javascripts/diffs/components/diffs_file_tree.vue
+++ b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
@@ -24,6 +24,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    diffFiles: {
+      type: Array,
+      required: false,
+      default: null,
+    },
   },
   data() {
     const treeWidth =
@@ -36,7 +41,7 @@ export default {
   computed: {
     ...mapState('diffs', ['showTreeList']),
     renderFileTree() {
-      return this.renderDiffFiles && this.showTreeList;
+      return this.renderDiffFiles && (this.showTreeList || this.diffFiles);
     },
     hideFileStats() {
       return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
@@ -74,6 +79,6 @@ export default {
       side="right"
       @resize-end="cacheTreeListWidth"
     />
-    <tree-list :hide-file-stats="hideFileStats" />
+    <tree-list :diff-files="diffFiles" :hide-file-stats="hideFileStats" />
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 07984beb709deb..1d2daf5e77ae29 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -8,6 +8,8 @@ import { s__, sprintf } from '~/locale';
 import { RecycleScroller } from 'vendor/vue-virtual-scroller';
 import DiffFileRow from './diff_file_row.vue';
 import TreeListHeight from './tree_list_height.vue';
+import { generateTreeList } from '~/diffs/utils/tree_worker_utils';
+import { sortTree } from '~/ide/stores/utils';
 
 const MODIFIER_KEY = getModifierKey();
 
@@ -26,6 +28,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    diffFiles: {
+      type: Array,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -35,11 +42,16 @@ export default {
   computed: {
     ...mapState('diffs', ['tree', 'renderTreeList', 'currentDiffFileId', 'viewedDiffFileIds']),
     ...mapGetters('diffs', ['allBlobs']),
+    ...mapGetters(['isLoadedFile']),
+    diffs() {
+      if (!this.diffFiles) return this.tree;
+      return sortTree(generateTreeList(this.diffFiles).tree);
+    },
     filteredTreeList() {
       let search = this.search.toLowerCase().trim();
 
       if (search === '') {
-        return this.renderTreeList ? this.tree : this.allBlobs;
+        return this.renderTreeList ? this.diffs : this.allBlobs;
       }
 
       const searchSplit = search.split(',').filter((t) => t);
@@ -71,10 +83,13 @@ export default {
     // out: [{ path: 'a', tree: [{ path: 'b' }] }, { path: 'b' }, { path: 'c' }]
     flatFilteredTreeList() {
       const result = [];
+      const isLoaded = this.isLoadedFile || (() => true);
       const createFlatten = (level) => (item) => {
+        const disabled = item.fileHash && !isLoaded(item.fileHash);
         result.push({
           ...item,
           level: item.isHeader ? 0 : level,
+          disabled,
           key: item.key || item.path,
         });
         if (item.opened || item.isHeader) {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 43ae13915ad21e..a7392ff7567895 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -72,10 +72,11 @@ window.addEventListener(
   false,
 );
 
-gl.lazyLoader = new LazyLoader({
-  scrollContainer: window,
-  observerNode: '#content-body',
-});
+// TODO: fix for streaming
+// gl.lazyLoader = new LazyLoader({
+//   scrollContainer: window,
+//   observerNode: '#content-body',
+// });
 
 initRails();
 
@@ -94,7 +95,8 @@ function deferredInitialisation() {
   initPersistentUserCallouts();
   initDefaultTrackers();
   initFeatureHighlight();
-  initCopyCodeButton();
+  // TODO: fix for streaming
+  // initCopyCodeButton();
   initGitlabVersionCheck();
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
diff --git a/app/assets/javascripts/mr_notes/init.js b/app/assets/javascripts/mr_notes/init.js
index 5594e71641b94c..a947f2d4718985 100644
--- a/app/assets/javascripts/mr_notes/init.js
+++ b/app/assets/javascripts/mr_notes/init.js
@@ -9,7 +9,7 @@ import { getDerivedMergeRequestInformation } from '~/diffs/utils/merge_request';
 import { getReviewsForMergeRequest } from '~/diffs/utils/file_reviews';
 import { DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 
-function setupMrNotesState(store, notesDataset, diffsDataset) {
+export function setupNotesState(store, notesDataset) {
   const noteableData = JSON.parse(notesDataset.noteableData);
   noteableData.noteableType = notesDataset.noteableType;
   noteableData.targetType = notesDataset.targetType;
@@ -18,13 +18,16 @@ function setupMrNotesState(store, notesDataset, diffsDataset) {
   const currentUserData = JSON.parse(notesDataset.currentUserData);
   const endpoints = { metadata: notesDataset.endpointMetadata };
 
-  const { mrPath } = getDerivedMergeRequestInformation({ endpoint: diffsDataset.endpoint });
-
   store.dispatch('setNotesData', notesData);
   store.dispatch('setNoteableData', noteableData);
   store.dispatch('setUserData', currentUserData);
   store.dispatch('setTargetNoteHash', getLocationHash());
   store.dispatch('setEndpoints', endpoints);
+}
+
+export function setupDiffsState(store, diffsDataset) {
+  const { mrPath } = getDerivedMergeRequestInformation({ endpoint: diffsDataset.endpoint });
+
   store.dispatch('diffs/setBaseConfig', {
     endpoint: diffsDataset.endpoint,
     endpointMetadata: diffsDataset.endpointMetadata,
@@ -44,6 +47,11 @@ function setupMrNotesState(store, notesDataset, diffsDataset) {
   });
 }
 
+function setupMrNotesState(store, notesDataset, diffsDataset) {
+  setupNotesState(store, notesDataset);
+  setupDiffsState(store, diffsDataset);
+}
+
 export function initMrStateLazyLoad(store = mrNotes, { reviewBarParams } = {}) {
   store.dispatch('setActiveTab', window.mrTabs.getCurrentAction());
   window.mrTabs.eventHub.$on('MergeRequestTabChange', (value) =>
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_file.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_file.js
new file mode 100644
index 00000000000000..acbbc93f7ecdaa
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_file.js
@@ -0,0 +1,194 @@
+import Vue from 'vue';
+import { once } from 'lodash';
+import DiffDiscussions from '~/diffs/components/diff_discussions.vue';
+import DiffDiscussionReply from '~/diffs/components/diff_discussion_reply.vue';
+import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
+import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue';
+import { store } from './store';
+
+const setAutoVisibility = (el) => {
+  const { height } = el.getBoundingClientRect();
+  el.style = `content-visibility: auto; contain-intrinsic-size: 0px ${height}px`;
+};
+
+export function registerDiscussionClicks() {
+  document.addEventListener('click', (event) => {
+    const { target } = event;
+    if (!target || !target.classList.contains('js-add-diff-note-button')) return;
+    const { id } = target.closest('.diff-file');
+    const diffFile = document.querySelector(`diff-file[data-id="${id}"]`);
+    diffFile.addDiscussion(target.closest('tr'));
+  });
+}
+
+let currentForm = null;
+
+export class DiffFile extends HTMLElement {
+  rootId = null;
+
+  connectedCallback() {
+    this.rootId = this.dataset.id;
+    this.renderDiscussions();
+    this.handleVisibility();
+    store.commit('setLoadedFile', this.rootId);
+  }
+
+  handleVisibility() {
+    const onVisibleOnce = once(this.onFirstVisible.bind(this));
+    const setVisibilityOnce = once(this.setContentVisibility.bind(this));
+    let observer = null;
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setVisibilityOnce(entry);
+          if (entry.isIntersecting) {
+            onVisibleOnce();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: `${window.innerHeight}px 0px` },
+    );
+    observer.observe(this.root);
+  }
+
+  onFirstVisible() {
+    const slices = this.root.querySelectorAll('.diff-slice');
+    if (slices.length > 1) {
+      slices.forEach(setAutoVisibility);
+    }
+  }
+
+  get root() {
+    return document.getElementById(this.rootId);
+  }
+
+  setContentVisibility(entry) {
+    const { height } = entry.boundingClientRect;
+    const ctx = this;
+    requestIdleCallback(() => {
+      ctx.root.style = `content-visibility: auto; contain-intrinsic-size: 0px ${height}px`;
+    });
+  }
+
+  updateHeight() {
+    const ctx = this;
+    ctx.root.style.contentVisiblity = null;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const { height } = entry.boundingClientRect;
+          ctx.root.style.contentVisiblity = 'auto';
+          ctx.root.style.containIntrinsicSize = `contain-intrinsic-size: 0px ${height}px`;
+          ctx.dispatchEvent(new CustomEvent('sizeupdated', { bubbles: true }));
+          observer.disconnect();
+        });
+      },
+      { rootMargin: `${window.innerHeight}px 0px` },
+    );
+    observer.observe(this.root);
+  }
+
+  renderDiscussions() {
+    let stop = () => {};
+    stop = store.watch(
+      (state) => state.discussions,
+      () => {
+        const discussions = store.getters.getDiscussions(this.rootId);
+        if (!discussions || !discussions.length) return;
+        stop();
+        const table = this.root.querySelector('table');
+        discussions.forEach((discussion) => {
+          const idx = document.getElementById(discussion.line_code).cellIndex;
+          const row = table.insertRow(idx + 1);
+          const cell = row.insertCell(0);
+          cell.colSpan = 99;
+          const el = document.createElement('div');
+          cell.appendChild(el);
+          // eslint-disable-next-line no-new
+          new Vue({
+            el,
+            store,
+            render(h) {
+              return h(DiffDiscussions, {
+                props: {
+                  discussions,
+                },
+              });
+            },
+          });
+          requestAnimationFrame(() => this.updateHeight());
+        });
+      },
+      { immediate: true },
+    );
+  }
+
+  addDiscussion(row) {
+    requestAnimationFrame(() => this.updateHeight());
+    if (currentForm) {
+      currentForm.form.hasForm = false;
+      const { instance } = currentForm;
+      requestAnimationFrame(() => instance.updateHeight());
+    }
+    if (row._replyForm) {
+      currentForm = { form: row._replyForm, instance: this };
+      row._replyForm.hasForm = true;
+      return;
+    }
+    const line = { line_code: row.querySelector('[id]').id, rich_text: '', text: '' };
+    const table = this.root.querySelector('table');
+    const newRow = table.insertRow(row.rowIndex + 1);
+    const cell = newRow.insertCell(0);
+    cell.colSpan = 99;
+    const el = document.createElement('div');
+    cell.appendChild(el);
+    row._replyForm = new Vue({
+      el,
+      store,
+      data() {
+        return {
+          hasForm: true,
+        };
+      },
+      render(h) {
+        const nodes = [];
+        const rowDiscussions = this.$store.getters.getRowDiscussions?.(row.id);
+        if (rowDiscussions && rowDiscussions.length) {
+          nodes.push(h(DiffDiscussions, { props: { discussions: rowDiscussions } }));
+        }
+        const rowDrafts = this.$store.getters.getRowDrafts?.(row.id);
+        if (rowDrafts && rowDrafts.length) {
+          nodes.push(h(DiffFileDrafts, { props: { drafts: rowDrafts } }));
+        }
+        if (this.hasForm) {
+          nodes.push(
+            h(DiffDiscussionReply, {
+              props: {
+                hasForm: this.hasForm,
+                renderReplyPlaceholder: false,
+              },
+              scopedSlots: {
+                form: () => {
+                  return h(DiffLineNoteForm, {
+                    props: {
+                      line,
+                      noteTargetLine: line,
+                    },
+                    on: {
+                      cancel: () => {
+                        this.hasForm = false;
+                      },
+                    },
+                  });
+                },
+              },
+            }),
+          );
+        }
+        return h('div', nodes);
+      },
+    });
+    currentForm = { form: row._replyForm, instance: this };
+  }
+}
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_store.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_store.js
new file mode 100644
index 00000000000000..649f1ff74e617b
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/diff_store.js
@@ -0,0 +1,56 @@
+import axios from '~/lib/utils/axios_utils';
+import diffs from '~/diffs/store/modules';
+import notesModule from '~/notes/stores/modules';
+
+export const diffStore = {
+  modules: {
+    diffs: diffs(),
+    notes: notesModule(),
+  },
+  state() {
+    return {
+      discussions: [],
+      loadedFiles: {},
+    };
+  },
+  actions: {
+    async fetchDiffDiscussions({ commit }) {
+      const { notesData } = document.querySelector('#js-vue-mr-discussions').dataset;
+      const endpoint = JSON.parse(notesData).discussionsPath;
+      const { data } = await axios.get(endpoint);
+      commit(
+        'setDiscussions',
+        data.filter((d) => d.diff_discussion),
+      );
+    },
+  },
+  mutations: {
+    setDiscussions(state, discussions) {
+      state.discussions = discussions;
+    },
+    setLoadedFile(state, fileHash) {
+      state.loadedFiles = {
+        ...state.loadedFiles,
+        [fileHash]: true,
+      };
+    },
+  },
+  getters: {
+    diffDiscussions(state) {
+      return state.discussions.reduce((acc, discussion) => {
+        acc[discussion.diff_file.file_hash] = acc[discussion.diff_file.file_hash] || [];
+        acc[discussion.diff_file.file_hash].push(discussion);
+        return acc;
+      }, {});
+    },
+    getDiscussions(state, getters) {
+      return (fileHash) => getters.diffDiscussions[fileHash];
+    },
+    isLoggedIn() {
+      return true;
+    },
+    isLoadedFile(state) {
+      return (fileHash) => state.loadedFiles[fileHash];
+    },
+  },
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/file_group.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/file_group.js
new file mode 100644
index 00000000000000..1d729c817203c1
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/file_group.js
@@ -0,0 +1,39 @@
+import { once } from 'lodash';
+
+export class FileGroup extends HTMLElement {
+  rootId = null;
+
+  connectedCallback() {
+    this.rootId = this.dataset.id;
+    this.handleVisibility();
+    this.addEventListener('sizeupdated', () => {
+      this.handleVisibility();
+    });
+  }
+
+  handleVisibility() {
+    const setVisibilityOnce = once(this.setContentVisibility.bind(this));
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setVisibilityOnce(entry);
+          observer.disconnect();
+        });
+      },
+      { rootMargin: `${window.innerHeight}px 0px` },
+    );
+    observer.observe(this.root);
+  }
+
+  get root() {
+    return document.getElementById(this.rootId);
+  }
+
+  setContentVisibility(entry) {
+    const { height } = entry.boundingClientRect;
+    const ctx = this;
+    requestIdleCallback(() => {
+      ctx.root.style = `content-visibility: auto; contain-intrinsic-size: 0px ${height}px`;
+    });
+  }
+}
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/index.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/index.js
index b15e9a14b6a51a..4994e0b91d81b8 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/diffs/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/index.js
@@ -1,5 +1,38 @@
-import initDiffsApp from '~/diffs';
+import Vue from 'vue';
 import { initMrPage } from 'ee_else_ce/pages/projects/merge_requests/page';
+import { setupDiffsState, setupNotesState } from '~/mr_notes/init';
+import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
+import { DiffFile, registerDiscussionClicks } from './diff_file';
+import { FileGroup } from './file_group';
+import { store } from './store';
+import { renderStreams } from './render_streams';
 
 initMrPage();
-initDiffsApp();
+setupDiffsState(store, document.getElementById('js-diffs-app').dataset);
+setupNotesState(store, document.getElementById('js-vue-mr-discussions').dataset);
+store.state.diffs.disableVirtualScroller = true;
+
+const renderSidebar = () => {
+  const sidebarEl = document.getElementById('diffs-sidebar');
+  const diffFiles = JSON.parse(sidebarEl.dataset.diffFiles);
+  new Vue({
+    el: sidebarEl,
+    store,
+    render(h) {
+      return h(DiffsFileTree, {
+        props: {
+          renderDiffFiles: true,
+          diffFiles,
+        },
+      });
+    },
+  });
+};
+
+store.dispatch('fetchDiffDiscussions');
+renderSidebar();
+renderStreams();
+
+customElements.define('diff-file', DiffFile);
+customElements.define('file-group', FileGroup);
+registerDiscussionClicks();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/render_streams.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/render_streams.js
new file mode 100644
index 00000000000000..fd4c79d1562b25
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/render_streams.js
@@ -0,0 +1,24 @@
+import { rateLimitStreamRequests } from '~/streaming/rate_limit_stream_requests';
+import { toPolyfillReadable } from '~/streaming/polyfills';
+import { renderHtmlStreams } from '~/streaming/render_html_streams';
+
+export async function renderStreams() {
+  const element = document.querySelector('#stream-container');
+  const { dataset } = document.querySelector('#js-diffs-app');
+  const perPage = 20;
+  const totalExtraPages = Math.ceil(parseInt(dataset.totalPages, 10) / perPage);
+
+  const streams = rateLimitStreamRequests({
+    factory: (index) => {
+      const url = new URL(window.location);
+      url.pathname += '_page';
+      url.searchParams.set('page', index + 2);
+      url.searchParams.set('per_page', perPage);
+      return fetch(url).then((response) => toPolyfillReadable(response.body));
+    },
+    maxConcurrentRequests: 4,
+    total: totalExtraPages,
+  });
+
+  await renderHtmlStreams(streams, element);
+}
diff --git a/app/assets/javascripts/pages/projects/merge_requests/diffs/store.js b/app/assets/javascripts/pages/projects/merge_requests/diffs/store.js
new file mode 100644
index 00000000000000..4aab2adb6def88
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/diffs/store.js
@@ -0,0 +1,4 @@
+import Vuex from 'vuex';
+import { diffStore } from '~/pages/projects/merge_requests/diffs/diff_store';
+
+export const store = new Vuex.Store(diffStore);
diff --git a/app/assets/javascripts/streaming/constants.js b/app/assets/javascripts/streaming/constants.js
index 224d93a7ac1863..5ac73d835f2eeb 100644
--- a/app/assets/javascripts/streaming/constants.js
+++ b/app/assets/javascripts/streaming/constants.js
@@ -6,4 +6,4 @@ export const LOW_FRAME_TIME = 32;
 // https://web.dev/optimize-long-tasks/
 export const HIGH_FRAME_TIME = 64;
 export const BALANCE_RATE = 1.2;
-export const TIMEOUT = 500;
+export const TIMEOUT = 2000;
diff --git a/app/assets/javascripts/streaming/render_balancer.js b/app/assets/javascripts/streaming/render_balancer.js
index 66929ff3a54ad4..9cd5729d684388 100644
--- a/app/assets/javascripts/streaming/render_balancer.js
+++ b/app/assets/javascripts/streaming/render_balancer.js
@@ -15,7 +15,7 @@ export class RenderBalancer {
         if (fn()) requestAnimationFrame(callback);
         else resolve();
       };
-      requestAnimationFrame(callback);
+      callback();
     });
   }
 
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 6ac75230d8891c..0662c0b31b406c 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -79,6 +79,7 @@ export default {
       this.$emit('clickFile', path);
     },
     clickFile() {
+      if (this.file.disabled) return;
       // Manual Action if a tree is selected/opened
       if (this.isTree && this.hasUrlAtCurrentRoute()) {
         this.toggleTreeOpen(this.file.path);
@@ -86,7 +87,10 @@ export default {
 
       if (this.$router && !this.hasUrlAtCurrentRoute()) this.$router.push(this.fileRouterUrl);
 
-      if (this.isBlob) this.clickedFile(this.file.path);
+      if (this.isBlob) {
+        document.location.hash = this.file.fileHash;
+        this.clickedFile(this.file.path);
+      }
     },
     scrollIntoView(isInit = false) {
       const block = isInit && this.isTree ? 'center' : 'nearest';
@@ -127,6 +131,7 @@ export default {
     :class="fileClass"
     :title="textForTitle"
     :data-level="level"
+    :disabled="file.disabled"
     class="file-row"
     role="button"
     @click="clickFile"
@@ -172,6 +177,10 @@ export default {
   cursor: pointer;
 }
 
+.file-row[disabled] {
+  opacity: 0.5;
+}
+
 .file-row-name-container {
   display: flex;
   width: 100%;
diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss
index 70aeedb10bfc9b..9bc97d1421daa3 100644
--- a/app/assets/stylesheets/page_bundles/merge_request.scss
+++ b/app/assets/stylesheets/page_bundles/merge_request.scss
@@ -254,7 +254,7 @@ $comparison-empty-state-height: 62px;
   @include media-breakpoint-up(md) {
     // ensure consistent page height when selected file is loading
     // https://gitlab.com/gitlab-org/gitlab/-/issues/426250
-    min-height: 100vh;
+    //min-height: 100vh;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index e65f716d71afc9..d6a22e0b15d058 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -256,6 +256,9 @@ $tabs-holder-z-index: 250;
   // to the top at different heights, which is a bad-looking defect
   $diff-file-header-top: 11px;
 
+  flex: none;
+  margin-right: 16px;
+  min-width: 100px;
   position: sticky;
   top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
   // height calc is fully delegated to the tree_list_height.vue component
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index eb2061081ae900..d51f9d617bda37 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -961,6 +961,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     color: $gray-300;
     cursor: not-allowed;
   }
+
+  svg {
+    pointer-events: none;
+  }
+}
+
+.line_holder:hover .note-button.add-diff-note {
+  opacity: 1;
 }
 
 .unified-diff-components-diff-note-button {
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 5a079b465b7d50..ffe9c901475e14 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -12,6 +12,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   include DiffHelper
   include Gitlab::Cache::Helpers
   include MergeRequestsHelper
+  include CommitsHelper
 
   prepend_before_action(only: [:index]) { authenticate_sessionless_user!(:rss) }
   skip_before_action :merge_request, only: [:index, :bulk_update, :export_csv]
@@ -113,6 +114,10 @@ def diffs
     show_merge_request
   end
 
+  def diffs_page
+    render partial: 'projects/diffs/files'
+  end
+
   def commits
     # Get context commits from repository
     @context_commits =
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 6ffef1b612b1db..08dc320ebd536c 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module CommitsHelper
+  include DiffHelper
   # Returns a link to the commit author. If the author has a matching user and
   # is a member of the current @project it will link to the team member page.
   # Otherwise it will link to the author email as specified in the commit.
@@ -144,6 +145,21 @@ def conditionally_paginate_diff_files(diffs, paginate:, page:, per:)
     end
   end
 
+  def diff_files(merge_request)
+    options = {
+      merge_request: merge_request,
+      merge_request_diffs: merge_request.diffs,
+      only_context_commits:
+        !!params[:only_context_commits] || merge_request.has_no_commits?
+    }
+    DiffFileMetadataEntity.represent(
+      merge_request.diffs.raw_diff_files(sorted: true),
+      options.merge(
+        conflicts: conflicts(allow_tree_conflicts: true, mr: @merge_request)
+      )
+    )
+  end
+
   def local_committed_date(commit, user)
     server_timezone = Time.zone
     user_timezone = user.timezone if user
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 9031d0556dacf6..4aebb790093302 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -224,10 +224,10 @@ def render_fork_suggestion
     end
   end
 
-  def conflicts(allow_tree_conflicts: false)
-    return unless merge_request.cannot_be_merged? && merge_request.source_branch_exists? && merge_request.target_branch_exists?
+  def conflicts(allow_tree_conflicts: false, mr: merge_request)
+    return unless mr.cannot_be_merged? && mr.source_branch_exists? && mr.target_branch_exists?
 
-    conflicts_service = MergeRequests::Conflicts::ListService.new(merge_request, allow_tree_conflicts: allow_tree_conflicts) # rubocop:disable CodeReuse/ServiceClass
+    conflicts_service = MergeRequests::Conflicts::ListService.new(mr, allow_tree_conflicts: allow_tree_conflicts) # rubocop:disable CodeReuse/ServiceClass
 
     return unless allow_tree_conflicts || conflicts_service.can_be_resolved_in_ui?
 
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index 1dc4c393bf242f..43557520664990 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -203,6 +203,7 @@ def diffs_tab_pane_data(project, merge_request, params)
       source_project_full_path: merge_request.source_project&.full_path,
       is_forked: project.forked?.to_s,
       new_comment_template_path: profile_comment_templates_path,
+      total_pages: @merge_request.diffs.count,
       iid: merge_request.iid,
       per_page: DIFF_BATCH_ENDPOINT_PER_PAGE
     }
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 886e6e9fbd76b8..645e16ba192d9a 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -86,10 +86,12 @@ def truncate_sha(sha)
     end
 
     def diff_max_files
+      return 10000
       Gitlab::CurrentSettings.diff_max_files
     end
 
     def diff_max_lines
+      return 9999999
       Gitlab::CurrentSettings.diff_max_lines
     end
 
diff --git a/app/models/diff_viewer/base.rb b/app/models/diff_viewer/base.rb
index 3111879107567f..d7bdc891366562 100644
--- a/app/models/diff_viewer/base.rb
+++ b/app/models/diff_viewer/base.rb
@@ -55,6 +55,7 @@ def self.can_render_blob?(blob, verify_binary: true)
     end
 
     def collapsed?
+      return false
       return @collapsed if defined?(@collapsed)
       return @collapsed = true if diff_file.collapsed?
 
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 3db1467df60f4e..8ea259d7fef3c0 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -4,7 +4,7 @@
 - image_diff = diff_file.rich_viewer && diff_file.rich_viewer.partial_name == 'image'
 - image_replaced = diff_file.old_content_sha && diff_file.old_content_sha != diff_file.content_sha
 
-.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_file.content_sha) }
+.diff-file.file-holder{ id: file_hash }<
   .js-file-title.file-title-flex-parent{ class: diff_page_context }
     .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, url: "##{file_hash}"
@@ -18,7 +18,9 @@
         #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
           - unless @diff_notes_disabled
-            = link_button_to nil, '#', class: 'js-toggle-diff-comments has-tooltip', icon: 'comment', title: _("Toggle comments for this file")
+            %span.has-tooltip{ title: _("Toggle comments for this file") }
+              = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected' do
+                = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}
@@ -39,3 +41,8 @@
   = render_fork_suggestion
 
   = render 'projects/diffs/content', diff_file: diff_file
+
+%diff-file.foobar{ data: { id: file_hash } }
+= javascript_tag nonce: content_security_policy_nonce do
+  :plain
+    console.log(performance.now())
diff --git a/app/views/projects/diffs/_files.html.haml b/app/views/projects/diffs/_files.html.haml
new file mode 100644
index 00000000000000..5adf5da26db10b
--- /dev/null
+++ b/app/views/projects/diffs/_files.html.haml
@@ -0,0 +1,6 @@
+-# - cache [@merge_request.merge_request_diffs, params[:page], params[:per_page], @diff_view] do
+- diffs =  conditionally_paginate_diff_files(@merge_request.diffs, paginate: true, page: params[:page], per: params[:per_page])
+- id = "g-#{rand(36**8).to_s(36)}"
+.file-group{ id: id }
+  = render partial: 'projects/diffs/file', layout: false, collection: diffs, as: :diff_file, locals: { project: @project }
+%file-group{ data: { id: id } }
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 03fe3e6edf5c6d..d55ef86a344840 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -1,56 +1,57 @@
 / Side-by-side diff view
 
-.text-file{ data: diff_view_data }
-  %table.diff-wrap-lines.code.code-commit.js-syntax-highlight
-    - diff_file.parallel_diff_lines.each do |line|
-      - left = line[:left]
-      - right = line[:right]
-      - discussions_left, discussions_right = parallel_diff_discussions(left, right, diff_file)
-      %tr.line_holder.parallel
-        - if left
-          - case left.type
-          - when 'match'
-            = diff_match_line left.old_pos, nil, text: left.text, view: :parallel
-          - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
-            = diff_nomappinginraw_line left, %w[old_line diff-line-num], nil, %w[line_content parallel left-side]
-          - when 'old-nonewline', 'new-nonewline'
-            %td.old_line.diff-line-num
-            %td.line_content.match.left-side= left.text
+.text-file.diff-wrap-lines.code-commit{ data: diff_view_data }
+  - diff_file.parallel_diff_lines.each_slice(100) do |slice|
+    %table.code.diff-slice.js-syntax-highlight{ class: user_color_scheme }
+      - slice.each do |line|
+        - left = line[:left]
+        - right = line[:right]
+        - discussions_left, discussions_right = parallel_diff_discussions(left, right, diff_file)
+        %tr.line_holder.parallel
+          - if left
+            - case left.type
+            - when 'match'
+              = diff_match_line left.old_pos, nil, text: left.text, view: :parallel
+            - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+              = diff_nomappinginraw_line left, %w[old_line diff-line-num], nil, %w[line_content parallel left-side]
+            - when 'old-nonewline', 'new-nonewline'
+              %td.old_line.diff-line-num
+              %td.line_content.match.left-side= left.text
+            - else
+              - left_line_code = diff_file.line_code(left)
+              - left_position = diff_file.position(left)
+              %td.old_line.diff-line-num.js-avatar-container{ class: left.type, data: { linenumber: left.old_pos } }
+                = add_diff_note_button(left_line_code, left_position, 'old')
+                %a{ href: "##{left_line_code}", data: { linenumber: left.old_pos } }
+              %td.line_content.parallel.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
           - else
-            - left_line_code = diff_file.line_code(left)
-            - left_position = diff_file.position(left)
-            %td.old_line.diff-line-num.js-avatar-container{ class: left.type, data: { linenumber: left.old_pos } }
-              = add_diff_note_button(left_line_code, left_position, 'old')
-              %a{ href: "##{left_line_code}", data: { linenumber: left.old_pos } }
-            %td.line_content.parallel.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
-        - else
-          %td.old_line.diff-line-num.empty-cell
-          %td.line_content.parallel.left-side
+            %td.old_line.diff-line-num.empty-cell
+            %td.line_content.parallel.left-side
 
-        - if right
-          - case right.type
-          - when 'match'
-            = diff_match_line nil, right.new_pos, text: left.text, view: :parallel
-          - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
-            = diff_nomappinginraw_line right, %w[new_line diff-line-num], nil, %w[line_content parallel right-side]
-          - when 'old-nonewline', 'new-nonewline'
-            %td.new_line.diff-line-num
-            %td.line_content.match.right-side= right.text
+          - if right
+            - case right.type
+            - when 'match'
+              = diff_match_line nil, right.new_pos, text: left.text, view: :parallel
+            - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+              = diff_nomappinginraw_line right, %w[new_line diff-line-num], nil, %w[line_content parallel right-side]
+            - when 'old-nonewline', 'new-nonewline'
+              %td.new_line.diff-line-num
+              %td.line_content.match.right-side= right.text
+            - else
+              - right_line_code = diff_file.line_code(right)
+              - right_position = diff_file.position(right)
+              %td.new_line.diff-line-num.js-avatar-container{ class: right.type, data: { linenumber: right.new_pos } }
+                = add_diff_note_button(right_line_code, right_position, 'new')
+                %a{ href: "##{right_line_code}", data: { linenumber: right.new_pos } }
+              %td.line_content.parallel.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
           - else
-            - right_line_code = diff_file.line_code(right)
-            - right_position = diff_file.position(right)
-            %td.new_line.diff-line-num.js-avatar-container{ class: right.type, data: { linenumber: right.new_pos } }
-              = add_diff_note_button(right_line_code, right_position, 'new')
-              %a{ href: "##{right_line_code}", data: { linenumber: right.new_pos } }
-            %td.line_content.parallel.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
-        - else
-          %td.old_line.diff-line-num.empty-cell
-          %td.line_content.parallel.right-side
+            %td.old_line.diff-line-num.empty-cell
+            %td.line_content.parallel.right-side
 
-      - if discussions_left || discussions_right
-        = render "discussions/parallel_diff_discussion", discussions_left: discussions_left, discussions_right: discussions_right
-    - if !diff_file.new_file? && !diff_file.deleted_file? && diff_file.diff_lines.any?
-      - last_line = diff_file.diff_lines.last
-      - if last_line.new_pos < total_lines
-        %tr.line_holder.parallel
-          = diff_match_line last_line.old_pos, last_line.new_pos, bottom: true, view: :parallel
+        - if discussions_left || discussions_right
+          = render "discussions/parallel_diff_discussion", discussions_left: discussions_left, discussions_right: discussions_right
+      - if !diff_file.new_file? && !diff_file.deleted_file? && diff_file.diff_lines.any?
+        - last_line = diff_file.diff_lines.last
+        - if last_line.new_pos < total_lines
+          %tr.line_holder.parallel
+            = diff_match_line last_line.old_pos, last_line.new_pos, bottom: true, view: :parallel
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 03a1f2f3179e0c..53526686756d2d 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -16,8 +16,8 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
-- if mr_action == 'diffs' && !@file_by_file_default
-  - add_page_startup_api_call @endpoint_diff_batch_url
+-# - if mr_action == 'diffs' && !@file_by_file_default
+-#   - add_page_startup_api_call @endpoint_diff_batch_url
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version, diffs_batch_cache_key: @diffs_batch_cache_key } }
   = render "projects/merge_requests/mr_title"
@@ -99,6 +99,7 @@
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
       - params = request.query_parameters.merge(ck: @diffs_batch_cache_key, diff_head: true)
       = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: diffs_tab_pane_data(@project, @merge_request, params)
+      = yield
 
     .mr-loading-status
       .loading.hide
diff --git a/app/views/projects/merge_requests/diffs.html.haml b/app/views/projects/merge_requests/diffs.html.haml
index 03306e98407455..3d3fed50405c74 100644
--- a/app/views/projects/merge_requests/diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs.html.haml
@@ -1,3 +1,10 @@
 - add_page_specific_style 'page_bundles/merge_request'
-
-= render 'page'
+- per_page = 20
+- diffs = conditionally_paginate_diff_files(@merge_request.diffs, paginate: true, page: 1, per: per_page)
+= render 'page' do
+  .gl-display-flex
+    #diffs-sidebar.diff-tree-list{ data: { diff_files: diff_files(@merge_request).to_json } }
+    %div
+      -# - cache [@merge_request.merge_request_diffs, per_page, @diff_view] do
+      = render partial: 'projects/diffs/file', collection: diffs, as: :diff_file, locals: { project: @project }
+      #stream-container
diff --git a/config/routes/merge_requests.rb b/config/routes/merge_requests.rb
index adfc9bcd19b262..69b4806afed849 100644
--- a/config/routes/merge_requests.rb
+++ b/config/routes/merge_requests.rb
@@ -38,6 +38,7 @@
       get :commits, defaults: { tab: 'commits' }
       get :pipelines, defaults: { tab: 'pipelines' }
       get :diffs, to: 'merge_requests#diffs', defaults: { tab: 'diffs' }
+      get :diffs_page, to: 'merge_requests#diffs_page'
     end
 
     get :diff_for_path, controller: 'merge_requests/diffs'
diff --git a/lib/gitlab/git/diff.rb b/lib/gitlab/git/diff.rb
index 743bac62764ef1..fafe73781f4fb3 100644
--- a/lib/gitlab/git/diff.rb
+++ b/lib/gitlab/git/diff.rb
@@ -223,6 +223,7 @@ def too_large!
       end
 
       def collapsed?
+        return false
         return @collapsed if defined?(@collapsed)
 
         @collapsed = !expanded && diff_bytesize >= self.class.patch_safe_limit_bytes
-- 
GitLab