From 937abb6fb8affeb3acf2172e489f0b2a36f02c5c Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 5 Dec 2023 02:54:07 +0400
Subject: [PATCH] Add pinned file to merge requests

---
 .../javascripts/diffs/components/app.vue      |  30 +++-
 .../diffs/components/diff_file.vue            |  15 +-
 .../diffs/components/diff_file_header.vue     |  34 +++-
 .../javascripts/diffs/components/diff_row.vue |   6 +-
 .../diffs/components/diff_row_utils.js        |  18 +-
 .../diffs/components/tree_list.vue            |  54 +++++-
 app/assets/javascripts/diffs/index.js         |   1 +
 app/assets/javascripts/diffs/store/actions.js |  77 +++++++--
 app/assets/javascripts/diffs/store/getters.js |  15 ++
 .../diffs/store/modules/diff_state.js         |   1 +
 .../javascripts/diffs/store/mutation_types.js |   2 +
 .../javascripts/diffs/store/mutations.js      |  21 ++-
 app/assets/javascripts/diffs/store/utils.js   |  28 ++-
 .../vue_shared/components/file_row.vue        |   4 +-
 app/assets/stylesheets/framework/diffs.scss   |   9 +
 .../projects/merge_requests_controller.rb     |  10 ++
 app/helpers/merge_requests_helper.rb          |   3 +-
 .../projects/merge_requests/_page.html.haml   |   1 +
 .../feature_flags/development/pinned_file.yml |   8 +
 locale/gitlab.pot                             |   6 +
 .../merge_requests_controller_spec.rb         |  18 ++
 .../__snapshots__/tree_list_spec.js.snap      | 160 ++++++++++++++++++
 spec/frontend/diffs/components/app_spec.js    |  39 ++++-
 .../diffs/components/diff_file_header_spec.js |  27 ++-
 .../diffs/components/diff_file_spec.js        | 146 ++++++++--------
 .../diffs/components/diff_row_utils_spec.js   |  39 ++++-
 .../diffs/components/tree_list_spec.js        | 103 ++++++++++-
 spec/frontend/diffs/store/actions_spec.js     | 124 +++++++++++---
 spec/frontend/diffs/store/getters_spec.js     |  32 ++++
 spec/frontend/diffs/store/mutations_spec.js   |  57 ++++++-
 spec/frontend/diffs/store/utils_spec.js       |  11 ++
 .../vue_shared/components/file_row_spec.js    |  13 ++
 32 files changed, 947 insertions(+), 165 deletions(-)
 create mode 100644 config/feature_flags/development/pinned_file.yml
 create mode 100644 spec/frontend/diffs/components/__snapshots__/tree_list_spec.js.snap

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 00fd9f43a4fb56..698fd3909edb51 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -144,6 +144,11 @@ export default {
       required: false,
       default: '',
     },
+    pinnedFileUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -153,6 +158,7 @@ export default {
       autoScrolled: false,
       activeProject: undefined,
       hasScannerError: false,
+      pinnedFileStatus: '',
     };
   },
   apollo: {
@@ -215,7 +221,6 @@ export default {
     ...mapState('findingsDrawer', ['activeDrawer']),
     ...mapState('diffs', [
       'isLoading',
-      'diffFiles',
       'diffViewType',
       'commit',
       'renderOverflowWarning',
@@ -245,6 +250,7 @@ export default {
       'isBatchLoading',
       'isBatchLoadingError',
       'flatBlobsList',
+      'diffFiles',
     ]),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     ...mapGetters('findingsDrawer', ['activeDrawer']),
@@ -355,7 +361,7 @@ export default {
     const id = window?.location?.hash;
 
     if (id && id.indexOf('#note') !== 0) {
-      this.setHighlightedRow(id.split('diff-content').pop().slice(1));
+      this.setHighlightedRow({ lineCode: id.split('diff-content').pop().slice(1) });
     }
 
     const events = [];
@@ -438,6 +444,7 @@ export default {
       'setFileByFile',
       'disableVirtualScroller',
       'setGenerateTestFilePath',
+      'fetchPinnedFile',
     ]),
     ...mapActions('findingsDrawer', ['setDrawer']),
     closeDrawer() {
@@ -509,6 +516,20 @@ export default {
       return !this.diffFiles.length;
     },
     fetchData({ toggleTree = true, fetchMeta = true } = {}) {
+      if (this.pinnedFileUrl && this.pinnedFileStatus !== 'loaded') {
+        this.pinnedFileStatus = 'loading';
+        this.fetchPinnedFile(this.pinnedFileUrl)
+          .then(() => {
+            this.pinnedFileStatus = 'loaded';
+            if (toggleTree) this.setTreeDisplay();
+          })
+          .catch(() => {
+            this.pinnedFileStatus = 'error';
+            createAlert({
+              message: __("Couldn't fetch the pinned file."),
+            });
+          });
+      }
       if (fetchMeta) {
         this.fetchDiffFilesMeta()
           .then((data) => {
@@ -539,7 +560,7 @@ export default {
       }
 
       if (!this.viewDiffsFileByFile) {
-        this.fetchDiffFilesBatch()
+        this.fetchDiffFilesBatch(Boolean(this.pinnedFileUrl))
           .then(() => {
             if (toggleTree) this.setTreeDisplay();
             // Guarantee the discussions are assigned after the batch finishes.
@@ -724,6 +745,9 @@ export default {
             <gl-loading-icon size="lg" />
           </div>
           <template v-else-if="renderDiffFiles">
+            <div v-if="pinnedFileStatus === 'loading'" class="loading">
+              <gl-loading-icon size="lg" />
+            </div>
             <dynamic-scroller
               v-if="isVirtualScrollingEnabled"
               :items="diffs"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 82b721da493a19..39f642b0831c4e 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -17,6 +17,7 @@ import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue';
 import NoteForm from '~/notes/components/note_form.vue';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 
+import { fileContentsId } from '~/diffs/components/diff_row_utils';
 import {
   DIFF_FILE_AUTOMATIC_COLLAPSE,
   DIFF_FILE_MANUAL_COLLAPSE,
@@ -110,7 +111,10 @@ export default {
       'canMerge',
     ]),
     ...mapGetters(['isNotesFetched', 'getNoteableData', 'noteableType']),
-    ...mapGetters('diffs', ['getDiffFileDiscussions', 'isVirtualScrollingEnabled']),
+    ...mapGetters('diffs', ['getDiffFileDiscussions', 'isVirtualScrollingEnabled', 'pinnedFile']),
+    isPinnedFile() {
+      return this.file === this.pinnedFile;
+    },
     viewBlobHref() {
       return escape(this.file.view_path);
     },
@@ -206,6 +210,9 @@ export default {
     diffFileHash() {
       return this.file.file_hash;
     },
+    fileId() {
+      return fileContentsId(this.file);
+    },
   },
   watch: {
     'file.id': {
@@ -293,7 +300,7 @@ export default {
     },
     handleToggle({ viaUserInteraction = false } = {}) {
       const collapsingNow = !this.isCollapsed;
-      const contentElement = this.$el.querySelector(`#diff-content-${this.file.file_hash}`);
+      const contentElement = this.$el.querySelector(`#${fileContentsId(this.file)}`);
 
       this.setFileCollapsedByUser({
         filePath: this.file.file_path,
@@ -386,6 +393,7 @@ export default {
       'comments-disabled': Boolean(file.brokenSymlink),
       'has-body': showBody,
       'is-virtual-scrolling': isVirtualScrollingEnabled,
+      'pinned-file': isPinnedFile,
     }"
     :data-path="file.new_path"
     class="diff-file file-holder gl-border-none gl-mb-0! gl-pb-5"
@@ -400,6 +408,7 @@ export default {
       :add-merge-request-buttons="true"
       :view-diffs-file-by-file="viewDiffsFileByFile"
       :show-local-file-reviews="showLocalFileReviews"
+      :pinned="isPinnedFile"
       class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100"
       :class="hasBodyClasses.header"
       @toggleFile="handleToggle({ viaUserInteraction: true })"
@@ -428,7 +437,7 @@ export default {
     </div>
     <template v-else>
       <div
-        :id="`diff-content-${file.file_hash}`"
+        :id="fileId"
         :class="hasBodyClasses.contentByHash"
         class="diff-content"
         data-testid="content-area"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index e45fd508a5b5ee..97db0fc1c24bab 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -22,6 +22,7 @@ import { __, s__, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
+import { fileContentsId, pinnedFileHref } from '~/diffs/components/diff_row_utils';
 import { DIFF_FILE_AUTOMATIC_COLLAPSE } from '../constants';
 import { DIFF_FILE_HEADER } from '../i18n';
 import { collapsedType, isCollapsed } from '../utils/diff_file';
@@ -102,6 +103,11 @@ export default {
       required: false,
       default: false,
     },
+    pinned: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   idState() {
     return {
@@ -113,9 +119,8 @@ export default {
     ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']),
     ...mapGetters(['getNoteableData']),
     diffContentIDSelector() {
-      return `#diff-content-${this.diffFile.file_hash}`;
+      return `${pinnedFileHref(this.diffFile)}#${fileContentsId(this.diffFile)}`;
     },
-
     titleLink() {
       if (this.diffFile.submodule) {
         return this.diffFile.submodule_tree_url || this.diffFile.submodule_link;
@@ -222,6 +227,7 @@ export default {
       'setFileForcedOpen',
       'setGenerateTestFilePath',
       'toggleFileCommentForm',
+      'unpinFile',
     ]),
     handleToggleFile() {
       this.setFileForcedOpen({
@@ -295,7 +301,19 @@ export default {
   >
     <div class="file-header-content">
       <gl-button
-        v-if="collapsible"
+        v-if="pinned"
+        v-gl-tooltip.hover.focus
+        :title="__('Unpin the file')"
+        :aria-label="__('Unpin the file')"
+        icon="thumbtack"
+        size="small"
+        class="btn-icon gl-mr-2"
+        category="tertiary"
+        data-testid="unpin-button"
+        @click="unpinFile"
+      />
+      <gl-button
+        v-else-if="collapsible"
         ref="collapseButton"
         class="gl-mr-2"
         category="tertiary"
@@ -305,10 +323,10 @@ export default {
         @click.stop="handleToggleFile"
       />
       <a
-        ref="titleWrapper"
         :v-once="!viewDiffsFileByFile"
         class="gl-mr-2 gl-text-decoration-none! gl-word-break-all"
         :href="titleLink"
+        data-testid="file-title"
         @click="handleFileNameClick"
       >
         <span v-if="isFileRenamed">
@@ -354,7 +372,7 @@ export default {
       <small
         v-if="isModeChanged"
         ref="fileMode"
-        v-gl-tooltip.hover
+        v-gl-tooltip.hover.focus
         class="mr-1"
         :title="$options.i18n.fileModeTooltip"
       >
@@ -377,7 +395,7 @@ export default {
       />
       <gl-form-checkbox
         v-if="isReviewable && showLocalFileReviews"
-        v-gl-tooltip.hover
+        v-gl-tooltip.hover.focus
         data-testid="fileReviewCheckbox"
         class="gl-mr-5 gl-mb-n3 gl-display-flex gl-align-items-center"
         :title="$options.i18n.fileReviewTooltip"
@@ -388,7 +406,7 @@ export default {
       </gl-form-checkbox>
       <gl-button
         v-if="showCommentButton"
-        v-gl-tooltip.hover
+        v-gl-tooltip.hover.focus
         :title="__('Comment on this file')"
         :aria-label="__('Comment on this file')"
         icon="comment"
@@ -402,7 +420,7 @@ export default {
         <gl-button
           v-if="diffFile.external_url"
           ref="externalLink"
-          v-gl-tooltip.hover
+          v-gl-tooltip.hover.focus
           :href="diffFile.external_url"
           :title="externalUrlLabel"
           :aria-label="externalUrlLabel"
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 3dad7a1a8e45ae..a9da77104d41d2 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -292,7 +292,7 @@ export default {
             v-if="props.line.left.old_line && props.line.left.type !== $options.CONFLICT_THEIR"
             :data-linenumber="props.line.left.old_line"
             :href="props.line.lineHrefOld"
-            @click="listeners.setHighlightedRow(props.line.lineCode)"
+            @click="listeners.setHighlightedRow({ lineCode: props.line.lineCode, event: $event })"
           >
           </a>
           <component
@@ -318,7 +318,7 @@ export default {
             v-if="props.line.left.new_line && props.line.left.type !== $options.CONFLICT_OUR"
             :data-linenumber="props.line.left.new_line"
             :href="props.line.lineHrefOld"
-            @click="listeners.setHighlightedRow(props.line.lineCode)"
+            @click="listeners.setHighlightedRow({ lineCode: props.line.lineCode, event: $event })"
           >
           </a>
         </div>
@@ -446,7 +446,7 @@ export default {
             v-if="props.line.right.new_line"
             :data-linenumber="props.line.right.new_line"
             :href="props.line.lineHrefNew"
-            @click="listeners.setHighlightedRow(props.line.lineCode)"
+            @click="listeners.setHighlightedRow({ lineCode: props.line.lineCode, event: $event })"
           >
           </a>
           <component
diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js
index a489c96b0c9574..5c62e0179ac81c 100644
--- a/app/assets/javascripts/diffs/components/diff_row_utils.js
+++ b/app/assets/javascripts/diffs/components/diff_row_utils.js
@@ -33,7 +33,19 @@ export const shouldRenderCommentButton = (isLoggedIn, isCommentButtonRendered) =
 
 export const hasDiscussions = (line) => line?.discussions?.length > 0;
 
-export const lineHref = (line) => `#${line?.line_code || ''}`;
+export const pinnedFileHref = (diffFile) => {
+  if (!window?.gon?.features?.pinnedFile) return '';
+  return `?pin=${diffFile.file_hash}`;
+};
+
+export const lineHref = (line, content) => {
+  if (!line || !line.line_code) return '';
+  return `${pinnedFileHref(content.diffFile)}#${line.line_code}`;
+};
+
+export const fileContentsId = (diffFile) => {
+  return `diff-content-${diffFile.file_hash}`;
+};
 
 export const lineCode = (line) => {
   if (!line) return undefined;
@@ -179,8 +191,8 @@ export const mapParallel = (content) => (line) => {
     isContextLineRight: isContextLine(right?.type),
     hasDiscussionsLeft: hasDiscussions(left),
     hasDiscussionsRight: hasDiscussions(right),
-    lineHrefOld: lineHref(left),
-    lineHrefNew: lineHref(right),
+    lineHrefOld: lineHref(left, content),
+    lineHrefNew: lineHref(right, content),
     lineCode: lineCode(line),
     isMetaLineLeft: isMetaLine(left?.type),
     isMetaLineRight: isMetaLine(right?.type),
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 07984beb709deb..ab21391b364c8f 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     ...mapState('diffs', ['tree', 'renderTreeList', 'currentDiffFileId', 'viewedDiffFileIds']),
-    ...mapGetters('diffs', ['allBlobs']),
+    ...mapGetters('diffs', ['allBlobs', 'pinnedFile']),
     filteredTreeList() {
       let search = this.search.toLowerCase().trim();
 
@@ -71,21 +71,59 @@ export default {
     // out: [{ path: 'a', tree: [{ path: 'b' }] }, { path: 'b' }, { path: 'c' }]
     flatFilteredTreeList() {
       const result = [];
-      const createFlatten = (level) => (item) => {
+      const createFlatten = (level, hidden) => (item) => {
         result.push({
           ...item,
+          hidden,
           level: item.isHeader ? 0 : level,
           key: item.key || item.path,
         });
-        if (item.opened || item.isHeader) {
-          item.tree.forEach(createFlatten(level + 1));
-        }
+        const isHidden = hidden || (item.type === 'tree' && !item.opened);
+        item.tree.forEach(createFlatten(level + 1, isHidden));
       };
 
       this.filteredTreeList.forEach(createFlatten(0));
 
       return result;
     },
+    flatListWithPinnedFile() {
+      const result = [...this.flatFilteredTreeList];
+      const pinnedIndex = result.findIndex((item) => item.path === this.pinnedFile.file_path);
+      const [pinnedItem] = result.splice(pinnedIndex, 1);
+
+      if (pinnedItem.parentPath === '/')
+        return [{ ...pinnedItem, level: 0, pinned: true, hidden: false }, ...result];
+
+      // remove detached folder from the tree
+      const next = result[pinnedIndex];
+      const prev = result[pinnedIndex - 1];
+      const hasContainingFolder =
+        prev && prev.type === 'tree' && prev.level === pinnedItem.level - 1;
+      const hasSibling = next && next.type !== 'tree' && next.level === pinnedItem.level;
+      if (hasContainingFolder && !hasSibling) {
+        // folder tree is always condensed so we only need to remove the parent folder
+        result.splice(pinnedIndex - 1, 1);
+      }
+
+      return [
+        {
+          level: 0,
+          key: 'pinned-path',
+          isHeader: true,
+          opened: true,
+          path: pinnedItem.parentPath,
+          type: 'tree',
+          hidden: false,
+        },
+        { ...pinnedItem, level: 1, pinned: true, hidden: false },
+        ...result,
+      ];
+    },
+    treeList() {
+      const list = this.pinnedFile ? this.flatListWithPinnedFile : this.flatFilteredTreeList;
+      if (this.search) return list;
+      return list.filter((item) => !item.hidden);
+    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'goToFile']),
@@ -125,13 +163,13 @@ export default {
         </button>
       </div>
     </div>
-    <tree-list-height class="gl-flex-grow-1 gl-min-h-0" :items-count="flatFilteredTreeList.length">
+    <tree-list-height class="gl-flex-grow-1 gl-min-h-0" :items-count="treeList.length">
       <template #default="{ scrollerHeight, rowHeight }">
         <div :class="{ 'tree-list-blobs': !renderTreeList || search }" class="mr-tree-list">
           <recycle-scroller
-            v-if="flatFilteredTreeList.length"
+            v-if="treeList.length"
             :style="{ height: `${scrollerHeight}px` }"
-            :items="flatFilteredTreeList"
+            :items="treeList"
             :item-size="rowHeight"
             :buffer="100"
             key-field="key"
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 15e4225f062d5b..b219b5499c9805 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -93,6 +93,7 @@ export default function initDiffsApp(store = notesStore) {
           helpPagePath: this.helpPagePath,
           shouldShow: this.activeTab === 'diffs',
           changesEmptyStateIllustration: this.changesEmptyStateIllustration,
+          pinnedFileUrl: dataset.pinnedFileUrl,
         },
       });
     },
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 1c0e20183e2334..061ea7a421e6b9 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -54,7 +54,6 @@ import {
 } from '../constants';
 import {
   DISCUSSION_SINGLE_DIFF_FAILED,
-  LOAD_SINGLE_DIFF_FAILED,
   BUILDING_YOUR_MR,
   SOMETHING_WENT_WRONG,
   ERROR_LOADING_FULL_DIFF,
@@ -210,7 +209,7 @@ export const fetchFileByFile = async ({ state, getters, commit }) => {
   }
 };
 
-export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
+export const fetchDiffFilesBatch = ({ commit, state, dispatch }, pinnedFileLoading = false) => {
   let perPage = state.viewDiffsFileByFile ? 1 : state.perPage;
   let increaseAmount = 1.4;
   const startPage = 0;
@@ -224,8 +223,10 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   let totalLoaded = 0;
   let scrolledVirtualScroller = hash === '';
 
-  commit(types.SET_BATCH_LOADING_STATE, 'loading');
-  commit(types.SET_RETRIEVING_BATCHES, true);
+  if (!pinnedFileLoading) {
+    commit(types.SET_BATCH_LOADING_STATE, 'loading');
+    commit(types.SET_RETRIEVING_BATCHES, true);
+  }
   eventHub.$emit(EVT_PERF_MARK_DIFF_FILES_START);
 
   const getBatch = (page = startPage) =>
@@ -237,7 +238,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files: diffFiles });
         commit(types.SET_BATCH_LOADING_STATE, 'loaded');
 
-        if (!scrolledVirtualScroller) {
+        if (!scrolledVirtualScroller && !pinnedFileLoading) {
           const index = state.diffFiles.findIndex(
             (f) =>
               f.file_hash === hash || f[INLINE_DIFF_LINES_KEY].find((l) => l.line_code === hash),
@@ -301,9 +302,10 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
 
         return null;
       })
-      .catch(() => {
+      .catch((error) => {
         commit(types.SET_RETRIEVING_BATCHES, false);
         commit(types.SET_BATCH_LOADING_STATE, 'error');
+        throw error;
       });
 
   return getBatch();
@@ -384,7 +386,11 @@ export const fetchCoverageFiles = ({ commit, state }) => {
   coveragePoll.makeRequest();
 };
 
-export const setHighlightedRow = ({ commit }, lineCode) => {
+export const setHighlightedRow = ({ commit }, { lineCode, event }) => {
+  if (event && event.target.href) {
+    event.preventDefault();
+    window.history.replaceState(null, undefined, event.target.href);
+  }
   const fileHash = lineCode.split('_')[0];
   commit(types.SET_HIGHLIGHTED_ROW, lineCode);
   commit(types.SET_CURRENT_DIFF_FILE, fileHash);
@@ -657,6 +663,8 @@ export const goToFile = ({ state, commit, dispatch, getters }, { path }) => {
   } else {
     if (!state.treeEntries[path]) return;
 
+    dispatch('unpinFile');
+
     const { fileHash } = state.treeEntries[path];
 
     commit(types.SET_CURRENT_DIFF_FILE, fileHash);
@@ -667,11 +675,7 @@ export const goToFile = ({ state, commit, dispatch, getters }, { path }) => {
     scrollToElement('.diff-files-holder', { duration: 0 });
 
     if (!getters.isTreePathLoaded(path)) {
-      dispatch('fetchFileByFile').catch(() => {
-        createAlert({
-          message: LOAD_SINGLE_DIFF_FAILED,
-        });
-      });
+      dispatch('fetchFileByFile');
     }
   }
 };
@@ -995,6 +999,8 @@ export const setCurrentDiffFileIdFromNote = ({ commit, getters, rootGetters }, n
 };
 
 export const navigateToDiffFileIndex = ({ state, getters, commit, dispatch }, index) => {
+  dispatch('unpinFile');
+
   const { fileHash } = getters.flatBlobsList[index];
   document.location.hash = fileHash;
 
@@ -1055,3 +1061,50 @@ export const toggleFileCommentForm = ({ state, commit }, filePath) => {
 
 export const addDraftToFile = ({ commit }, { filePath, draft }) =>
   commit(types.ADD_DRAFT_TO_FILE, { filePath, draft });
+
+export const fetchPinnedFile = ({ state, commit }, pinnedFileUrl) => {
+  const isNoteLink = isUrlHashNoteLink(window?.location?.hash);
+
+  commit(types.SET_BATCH_LOADING_STATE, 'loading');
+  commit(types.SET_RETRIEVING_BATCHES, true);
+
+  return axios
+    .get(pinnedFileUrl)
+    .then(({ data: diffData }) => {
+      const [{ file_hash }] = diffData.diff_files;
+
+      // we must store pinned file in the `diffs`, otherwise collapsing and commenting on a file won't work
+      // once the same file arrives in a file batch we must only update its' position
+      // we also must not update file's position since it's loaded out of order
+      commit(types.SET_DIFF_DATA_BATCH, { diff_files: diffData.diff_files, updatePosition: false });
+      commit(types.SET_PINNED_FILE_HASH, file_hash);
+
+      if (!isNoteLink && !state.currentDiffFileId) {
+        commit(types.SET_CURRENT_DIFF_FILE, file_hash);
+      }
+
+      commit(types.SET_BATCH_LOADING_STATE, 'loaded');
+
+      setTimeout(() => {
+        handleLocationHash();
+      });
+
+      eventHub.$emit('diffFilesModified');
+    })
+    .catch((error) => {
+      commit(types.SET_BATCH_LOADING_STATE, 'error');
+      throw error;
+    })
+    .finally(() => {
+      commit(types.SET_RETRIEVING_BATCHES, false);
+    });
+};
+
+export const unpinFile = ({ getters, commit }) => {
+  if (!getters.pinnedFile) return;
+  commit(types.SET_PINNED_FILE_HASH, null);
+  const newUrl = new URL(window.location);
+  newUrl.searchParams.delete('pin');
+  newUrl.hash = '';
+  window.history.replaceState(null, undefined, newUrl);
+};
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index bfafb4d281d0a9..f15c3d1693c4e6 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -201,3 +201,18 @@ export const isVirtualScrollingEnabled = (state) => {
 
 export const isBatchLoading = (state) => state.batchLoadingState === 'loading';
 export const isBatchLoadingError = (state) => state.batchLoadingState === 'error';
+
+export const diffFiles = (state, getters) => {
+  const { pinnedFile } = getters;
+  if (pinnedFile) {
+    const diffs = state.diffFiles.slice(0);
+    diffs.splice(diffs.indexOf(pinnedFile), 1);
+    return [pinnedFile, ...diffs];
+  }
+  return state.diffFiles;
+};
+
+export const pinnedFile = (state) => {
+  if (!state.pinnedFileHash) return null;
+  return state.diffFiles.find((file) => file.file_hash === state.pinnedFileHash);
+};
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index d5e1a05f4a59c6..3b6408e6d786b4 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -37,4 +37,5 @@ export default () => ({
   mrReviews: {},
   latestDiff: true,
   disableVirtualScroller: false,
+  pinnedFileHash: null,
 });
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index b155804c70cf6e..7b19f96b1514d6 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -6,6 +6,7 @@ export const SET_RETRIEVING_BATCHES = 'SET_RETRIEVING_BATCHES';
 export const SET_DIFF_METADATA = 'SET_DIFF_METADATA';
 export const SET_DIFF_DATA_BATCH = 'SET_DIFF_DATA_BATCH';
 export const SET_DIFF_FILES = 'SET_DIFF_FILES';
+export const SET_DIFF_TREE_ENTRY = 'SET_DIFF_TREE_ENTRY';
 
 export const SET_MR_FILE_REVIEWS = 'SET_MR_FILE_REVIEWS';
 
@@ -23,6 +24,7 @@ export const TREE_ENTRY_DIFF_LOADING = 'TREE_ENTRY_DIFF_LOADING';
 export const SET_SHOW_TREE_LIST = 'SET_SHOW_TREE_LIST';
 export const SET_CURRENT_DIFF_FILE = 'SET_CURRENT_DIFF_FILE';
 export const SET_DIFF_FILE_VIEWED = 'SET_DIFF_FILE_VIEWED';
+export const SET_PINNED_FILE_HASH = 'SET_PINNED_FILE_HASH';
 
 export const OPEN_DIFF_FILE_COMMENT_FORM = 'OPEN_DIFF_FILE_COMMENT_FORM';
 export const UPDATE_DIFF_FILE_COMMENT_FORM = 'UPDATE_DIFF_FILE_COMMENT_FORM';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index bc5ed3c40dfe23..3c750830baaf56 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -81,15 +81,27 @@ export default {
     });
   },
 
-  [types.SET_DIFF_DATA_BATCH](state, data) {
+  [types.SET_DIFF_DATA_BATCH](state, { diff_files: diffFiles, updatePosition = true }) {
     Object.assign(state, {
       diffFiles: prepareDiffData({
-        diff: data,
+        diff: { diff_files: diffFiles },
         priorFiles: state.diffFiles,
+        // when a pinned file is added to diffs its position may be incorrect since it's loaded out of order
+        // we need to ensure when we load it in batched request it updates it position
+        updatePosition,
       }),
       treeEntries: markTreeEntriesLoaded({
         priorEntries: state.treeEntries,
-        loadedFiles: data.diff_files,
+        loadedFiles: diffFiles,
+      }),
+    });
+  },
+
+  [types.SET_DIFF_TREE_ENTRY](state, diffFile) {
+    Object.assign(state, {
+      treeEntries: markTreeEntriesLoaded({
+        priorEntries: state.treeEntries,
+        loadedFiles: [diffFile],
       }),
     });
   },
@@ -404,4 +416,7 @@ export default {
 
     file?.drafts.push(draft);
   },
+  [types.SET_PINNED_FILE_HASH](state, fileHash) {
+    state.pinnedFileHash = fileHash;
+  },
 };
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index fb467a606b9d40..ad8cacf8504de6 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -395,9 +395,15 @@ function finalizeDiffFile(file) {
   return file;
 }
 
-function deduplicateFilesList(files) {
+function deduplicateFilesList(files, updatePosition) {
   const dedupedFiles = files.reduce((newList, file) => {
     const id = diffFileUniqueId(file);
+    if (updatePosition && id in newList) {
+      // Object.values preserves key order but doesn't update order when writing to the same key
+      // In order to update position of the item we have to delete it first and then add it back
+      // eslint-disable-next-line no-param-reassign
+      delete newList[id];
+    }
 
     return {
       ...newList,
@@ -408,14 +414,20 @@ function deduplicateFilesList(files) {
   return Object.values(dedupedFiles);
 }
 
-export function prepareDiffData({ diff, priorFiles = [], meta = false }) {
-  const cleanedFiles = (diff.diff_files || [])
-    .map((file, index, allFiles) => prepareRawDiffFile({ file, allFiles, meta, index }))
-    .map(ensureBasicDiffFileLines)
-    .map(prepareDiffFileLines)
-    .map((file) => finalizeDiffFile(file));
+export function prepareDiffData({ diff, priorFiles = [], meta = false, updatePosition = false }) {
+  const transformersChain = [
+    (file, index, allFiles) => prepareRawDiffFile({ file, index, allFiles, meta }),
+    ensureBasicDiffFileLines,
+    prepareDiffFileLines,
+    finalizeDiffFile,
+  ];
+  const cleanedFiles = (diff.diff_files || []).map((file, index, allFiles) => {
+    return transformersChain.reduce((fileResult, transformer) => {
+      return transformer(fileResult, index, allFiles);
+    }, file);
+  });
 
-  return deduplicateFilesList([...priorFiles, ...cleanedFiles]);
+  return deduplicateFilesList([...priorFiles, ...cleanedFiles], updatePosition);
 }
 
 export function getDiffPositionByLineCode(diffFiles) {
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 6ac75230d8891c..3419e6eb1b699c 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTruncate } from '@gitlab/ui';
+import { GlTruncate, GlIcon } from '@gitlab/ui';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
@@ -10,6 +10,7 @@ export default {
     FileHeader,
     FileIcon,
     GlTruncate,
+    GlIcon,
   },
   props: {
     file: {
@@ -141,6 +142,7 @@ export default {
         data-testid="file-row-name-container"
         :class="[fileClasses, { 'str-truncated': !truncateMiddle, 'gl-min-w-0': truncateMiddle }]"
       >
+        <gl-icon v-if="file.pinned" name="thumbtack" :size="16" />
         <file-icon
           class="file-row-icon"
           :class="{ 'text-secondary': file.type === 'tree' }"
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index c9ef9349c364a3..497a8a08a6fc1e 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -944,3 +944,12 @@ table.code {
     left: -2px !important;
   }
 }
+
+.diff-file.pinned-file .file-title {
+  background-color: $blue-50;
+  border-color: $blue-200;
+}
+
+.diff-file.pinned-file .diff-content {
+  border-color: $blue-200;
+}
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 09ba6e40efd0e1..6cb00fea922a3e 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -47,6 +47,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:mr_request_changes, current_user)
     push_frontend_feature_flag(:merge_blocked_component, current_user)
     push_frontend_feature_flag(:mention_autocomplete_backend_filtering, project)
+    push_frontend_feature_flag(:pinned_file, project)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:index, :show, :diffs, :discussions]
@@ -449,6 +450,15 @@ def render_html_page
     @update_current_user_path = expose_path(api_v4_user_preferences_path)
     @endpoint_metadata_url = endpoint_metadata_url(@project, @merge_request)
     @endpoint_diff_batch_url = endpoint_diff_batch_url(@project, @merge_request)
+    if params[:pin] && Feature.enabled?(:pinned_file)
+      @pinned_file_url = diff_by_file_hash_namespace_project_merge_request_path(
+        format: 'json',
+        id: merge_request.iid,
+        namespace_id: project&.namespace.to_param,
+        project_id: project&.path,
+        file_hash: params[:pin]
+      )
+    end
 
     if merge_request.diffs_batch_cache_with_max_age?
       @diffs_batch_cache_key = @merge_request.merge_head_diff&.patch_id_sha
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index 100b9349df670c..121676cd407e0c 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -204,7 +204,8 @@ def diffs_tab_pane_data(project, merge_request, params)
       is_forked: project.forked?.to_s,
       new_comment_template_path: profile_comment_templates_path,
       iid: merge_request.iid,
-      per_page: DIFF_BATCH_ENDPOINT_PER_PAGE
+      per_page: DIFF_BATCH_ENDPOINT_PER_PAGE,
+      pinned_file_url: @pinned_file_url
     }
   end
 
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 03a1f2f3179e0c..af8ad22fa50d7f 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -16,6 +16,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
+- add_page_startup_api_call @pinned_file_url if @pinned_file_url
 - if mr_action == 'diffs' && !@file_by_file_default
   - add_page_startup_api_call @endpoint_diff_batch_url
 
diff --git a/config/feature_flags/development/pinned_file.yml b/config/feature_flags/development/pinned_file.yml
new file mode 100644
index 00000000000000..712a35fd790a4d
--- /dev/null
+++ b/config/feature_flags/development/pinned_file.yml
@@ -0,0 +1,8 @@
+---
+name: pinned_file
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137544
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/433250
+milestone: '16.9'
+type: development
+group: group::code review
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 28cfe4f90a6a14..ee267a30b95e6f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -14348,6 +14348,9 @@ msgstr ""
 msgid "Couldn't assign policy to project or group"
 msgstr ""
 
+msgid "Couldn't fetch the pinned file."
+msgstr ""
+
 msgid "Couldn't find event type filters where audit event type(s): %{missing_filters}"
 msgstr ""
 
@@ -52228,6 +52231,9 @@ msgstr ""
 msgid "Unlocks the discussion."
 msgstr ""
 
+msgid "Unpin the file"
+msgstr ""
+
 msgid "Unreachable"
 msgstr ""
 
diff --git a/spec/controllers/projects/merge_requests_controller_spec.rb b/spec/controllers/projects/merge_requests_controller_spec.rb
index 55741a82862ca2..d04cda240fafc3 100644
--- a/spec/controllers/projects/merge_requests_controller_spec.rb
+++ b/spec/controllers/projects/merge_requests_controller_spec.rb
@@ -244,6 +244,24 @@ def go(extra_params = {})
           expect(response).to have_gitlab_http_status(:moved_permanently)
         end
       end
+
+      context 'when has pinned file' do
+        let(:file) { merge_request.merge_request_diff.diffs.diff_files.first }
+        let(:file_hash) { file.file_hash }
+
+        it 'adds pinned file url' do
+          go(pin: file_hash)
+
+          expect(assigns['pinned_file_url']).to eq(
+            diff_by_file_hash_namespace_project_merge_request_path(
+              format: 'json',
+              id: merge_request.iid,
+              namespace_id: project.namespace.to_param,
+              project_id: project.path,
+              file_hash: file_hash
+            ))
+        end
+      end
     end
 
     context 'when user is setting notes filters' do
diff --git a/spec/frontend/diffs/components/__snapshots__/tree_list_spec.js.snap b/spec/frontend/diffs/components/__snapshots__/tree_list_spec.js.snap
new file mode 100644
index 00000000000000..605f6335b5c6eb
--- /dev/null
+++ b/spec/frontend/diffs/components/__snapshots__/tree_list_spec.js.snap
@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Diffs tree list component pinned file files in folders pins 1.rb file 1`] = `
+Array [
+  "📁folder/",
+  "──1.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins 2.rb file 1`] = `
+Array [
+  "📁folder/",
+  "──2.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins 3.rb file 1`] = `
+Array [
+  "📁folder/",
+  "──3.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins nested-1.rb file 1`] = `
+Array [
+  "📁folder/sub-folder/",
+  "──nested-1.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins nested-2.rb file 1`] = `
+Array [
+  "📁folder/sub-folder/",
+  "──nested-2.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins nested-3.rb file 1`] = `
+Array [
+  "📁folder/sub-folder/",
+  "──nested-3.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins root-first.rb file 1`] = `
+Array [
+  "root-first.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-last.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins root-last.rb file 1`] = `
+Array [
+  "root-last.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "📁folder-single",
+  "──single.rb",
+  "root-first.rb",
+]
+`;
+
+exports[`Diffs tree list component pinned file files in folders pins single.rb file 1`] = `
+Array [
+  "📁folder-single/",
+  "──single.rb",
+  "📁folder",
+  "──📁sub-folder",
+  "────nested-1.rb",
+  "────nested-2.rb",
+  "────nested-3.rb",
+  "──1.rb",
+  "──2.rb",
+  "──3.rb",
+  "root-first.rb",
+  "root-last.rb",
+]
+`;
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 63d9a2471b624a..813db12e83fa4a 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -31,6 +31,9 @@ import * as urlUtils from '~/lib/utils/url_utility';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { stubPerformanceWebAPI } from 'helpers/performance';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
+import waitForPromises from 'helpers/wait_for_promises';
+import { diffMetadata } from 'jest/diffs/mock_data/diff_metadata';
 import createDiffsStore from '../create_diffs_store';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
@@ -38,6 +41,8 @@ const mergeRequestDiff = { version_index: 1 };
 const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
 const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
 const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
+const ENDPOINT_BATCH_URL = `${TEST_HOST}/diff/endpointBatch`;
+const ENDPOINT_METADATA_URL = `${TEST_HOST}/diff/endpointMetadata`;
 
 Vue.use(Vuex);
 Vue.use(VueApollo);
@@ -77,8 +82,8 @@ describe('diffs/components/app', () => {
 
     store.dispatch('diffs/setBaseConfig', {
       endpoint: TEST_ENDPOINT,
-      endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
-      endpointBatch: `${TEST_HOST}/diff/endpointBatch`,
+      endpointMetadata: ENDPOINT_METADATA_URL,
+      endpointBatch: ENDPOINT_BATCH_URL,
       endpointDiffForPath: TEST_ENDPOINT,
       projectPath: 'namespace/project',
       dismissEndpoint: '',
@@ -126,7 +131,7 @@ describe('diffs/components/app', () => {
       const fetchResolver = () => {
         store.state.diffs.retrievingBatches = false;
         store.state.notes.doneFetchingBatchDiscussions = true;
-        store.state.notes.discussions = 'test';
+        store.state.notes.discussions = [];
         return Promise.resolve({ real_size: 100 });
       };
       jest.spyOn(window, 'requestIdleCallback').mockImplementation((fn) => fn());
@@ -861,4 +866,32 @@ describe('diffs/components/app', () => {
       expect(loadSpy).not.toHaveBeenCalledWith({ file: store.state.diffs.diffFiles[0] });
     });
   });
+
+  describe('pinned file', () => {
+    const pinnedFileUrl = 'http://localhost.test/pinned-file';
+    let pinnedFile;
+
+    beforeEach(() => {
+      pinnedFile = getDiffFileMock();
+      mock.onGet(pinnedFileUrl).reply(HTTP_STATUS_OK, { diff_files: [pinnedFile] });
+      mock
+        .onGet(new RegExp(ENDPOINT_BATCH_URL))
+        .reply(HTTP_STATUS_OK, { diff_files: [], pagination: {} });
+      mock.onGet(new RegExp(ENDPOINT_METADATA_URL)).reply(HTTP_STATUS_OK, diffMetadata);
+
+      createComponent({ shouldShow: true, pinnedFileUrl });
+    });
+
+    it('fetches and displays pinned file', async () => {
+      await waitForPromises();
+
+      expect(wrapper.findComponent({ name: 'DynamicScroller' }).props('items')[0].file_hash).toBe(
+        pinnedFile.file_hash,
+      );
+    });
+
+    it('shows a spinner during loading', () => {
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js
index d6539a5bffaef9..c02875963fd664 100644
--- a/spec/frontend/diffs/components/diff_file_header_spec.js
+++ b/spec/frontend/diffs/components/diff_file_header_spec.js
@@ -1,8 +1,8 @@
-import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import { cloneDeep } from 'lodash';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 
@@ -20,6 +20,7 @@ import { truncateSha } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
+import { TEST_HOST } from 'spec/test_constants';
 import testAction from '../../__helpers__/vuex_action_helper';
 import diffDiscussionsMockData from '../mock_data/diff_discussions';
 
@@ -73,6 +74,7 @@ describe('DiffFileHeader component', () => {
           setFileCollapsedByUser: jest.fn(),
           setFileForcedOpen: jest.fn(),
           reviewFile: jest.fn(),
+          unpinFile: jest.fn(),
         },
       },
     },
@@ -87,7 +89,7 @@ describe('DiffFileHeader component', () => {
   });
 
   const findHeader = () => wrapper.findComponent({ ref: 'header' });
-  const findTitleLink = () => wrapper.findComponent({ ref: 'titleWrapper' });
+  const findTitleLink = () => wrapper.findByTestId('file-title');
   const findExpandButton = () => wrapper.findComponent({ ref: 'expandDiffToFullFileButton' });
   const findFileActions = () => wrapper.find('.file-actions');
   const findModeChangedLine = () => wrapper.findComponent({ ref: 'fileMode' });
@@ -105,7 +107,7 @@ describe('DiffFileHeader component', () => {
     mockStoreConfig = cloneDeep(defaultMockStoreConfig);
     const store = new Vuex.Store({ ...mockStoreConfig, ...options.store });
 
-    wrapper = shallowMount(DiffFileHeader, {
+    wrapper = shallowMountExtended(DiffFileHeader, {
       propsData: {
         diffFile,
         canCurrentUserFork: false,
@@ -711,4 +713,23 @@ describe('DiffFileHeader component', () => {
 
     expect(wrapper.find('[data-testid="comment-files-button"]').exists()).toEqual(true);
   });
+
+  describe('pinned file', () => {
+    beforeEach(() => {
+      window.gon.features = { pinnedFile: true };
+    });
+
+    it('has pinned URL search param', () => {
+      createComponent();
+      const url = new URL(TEST_HOST + findTitleLink().attributes('href'));
+      expect(url.searchParams.get('pin')).toBe(diffFile.file_hash);
+    });
+
+    it('can unpin file', () => {
+      createComponent({ props: { addMergeRequestButtons: true, pinned: true } });
+      const unpinButton = wrapper.findComponentByTestId('unpin-button');
+      unpinButton.vm.$emit('click');
+      expect(mockStoreConfig.modules.diffs.actions.unpinFile).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index a9fbf4632ac2eb..444f4102e2650a 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -29,6 +29,7 @@ import createNotesStore from '~/notes/stores/modules';
 import diffsModule from '~/diffs/store/modules';
 import { SOMETHING_WENT_WRONG, SAVING_THE_COMMENT_FAILED } from '~/diffs/i18n';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
+import { SET_PINNED_FILE_HASH } from '~/diffs/store/mutation_types';
 import { getDiffFileMock } from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 import diffsMockData from '../mock_data/merge_request_diffs';
@@ -90,49 +91,6 @@ function markFileToBeRendered(store, index = 0) {
   });
 }
 
-function createComponent({ file, first = false, last = false, options = {}, props = {} }) {
-  const diffs = diffsModule();
-  diffs.actions = {
-    ...diffs.actions,
-    prefetchFileNeighbors: prefetchFileNeighborsMock,
-    saveDiffDiscussion: saveDiffDiscussionMock,
-  };
-
-  diffs.getters = {
-    ...diffs.getters,
-    diffCompareDropdownTargetVersions: () => [],
-    diffCompareDropdownSourceVersions: () => [],
-  };
-
-  const store = new Vuex.Store({
-    ...createNotesStore(),
-    modules: { diffs },
-  });
-
-  store.state.diffs = {
-    mergeRequestDiff: diffsMockData[0],
-    diffFiles: [file],
-  };
-
-  const wrapper = shallowMountExtended(DiffFileComponent, {
-    store,
-    propsData: {
-      file,
-      canCurrentUserFork: false,
-      viewDiffsFileByFile: false,
-      isFirstFile: first,
-      isLastFile: last,
-      ...props,
-    },
-    ...options,
-  });
-
-  return {
-    wrapper,
-    store,
-  };
-}
-
 const findDiffHeader = (wrapper) => wrapper.findComponent(DiffFileHeaderComponent);
 const findDiffContentArea = (wrapper) => wrapper.findByTestId('content-area');
 const findLoader = (wrapper) => wrapper.findByTestId('loader-icon');
@@ -159,15 +117,58 @@ const triggerSaveDraftNote = (wrapper, note, parent, error) =>
   findNoteForm(wrapper).vm.$emit('handleFormUpdateAddToReview', note, false, parent, error);
 
 describe('DiffFile', () => {
-  let readableFile;
   let wrapper;
   let store;
   let axiosMock;
 
+  function createComponent({
+    file = getReadableFile(),
+    first = false,
+    last = false,
+    options = {},
+    props = {},
+  } = {}) {
+    const diffs = diffsModule();
+    diffs.actions = {
+      ...diffs.actions,
+      prefetchFileNeighbors: prefetchFileNeighborsMock,
+      saveDiffDiscussion: saveDiffDiscussionMock,
+    };
+
+    diffs.getters = {
+      ...diffs.getters,
+      diffCompareDropdownTargetVersions: () => [],
+      diffCompareDropdownSourceVersions: () => [],
+    };
+
+    store = new Vuex.Store({
+      ...createNotesStore(),
+      modules: { diffs },
+    });
+
+    store.state.diffs = {
+      ...store.state.diffs,
+      mergeRequestDiff: diffsMockData[0],
+      diffFiles: [file],
+    };
+
+    wrapper = shallowMountExtended(DiffFileComponent, {
+      store,
+      propsData: {
+        file,
+        canCurrentUserFork: false,
+        viewDiffsFileByFile: false,
+        isFirstFile: first,
+        isLastFile: last,
+        ...props,
+      },
+      ...options,
+    });
+  }
+
   beforeEach(() => {
-    readableFile = getReadableFile();
     axiosMock = new MockAdapter(axios);
-    ({ wrapper, store } = createComponent({ file: readableFile }));
+    createComponent();
   });
 
   afterEach(() => {
@@ -186,7 +187,6 @@ describe('DiffFile', () => {
     `('$description', ({ fileByFile }) => {
       createComponent({
         props: { viewDiffsFileByFile: fileByFile },
-        file: readableFile,
       });
 
       if (fileByFile) {
@@ -217,11 +217,11 @@ describe('DiffFile', () => {
             forceHasDiff({ store, ...file });
           }
 
-          ({ wrapper, store } = createComponent({
+          createComponent({
             file: store.state.diffs.diffFiles[0],
             first,
             last,
-          }));
+          });
 
           await nextTick();
 
@@ -233,14 +233,13 @@ describe('DiffFile', () => {
       );
 
       it('emits the "first file shown" and "files end" events when in File-by-File mode', async () => {
-        ({ wrapper, store } = createComponent({
-          file: getReadableFile(),
+        createComponent({
           first: false,
           last: false,
           props: {
             viewDiffsFileByFile: true,
           },
-        }));
+        });
 
         await nextTick();
 
@@ -253,11 +252,11 @@ describe('DiffFile', () => {
     describe('after loading the diff', () => {
       it('indicates that it loaded the file', async () => {
         forceHasDiff({ store, inlineLines: [], parallelLines: [], readableText: true });
-        ({ wrapper, store } = createComponent({
+        createComponent({
           file: store.state.diffs.diffFiles[0],
           first: true,
           last: true,
-        }));
+        });
 
         jest.spyOn(wrapper.vm, 'loadCollapsedDiff').mockResolvedValue(getReadableFile());
         jest.spyOn(window, 'requestIdleCallback').mockImplementation((fn) => fn());
@@ -314,11 +313,11 @@ describe('DiffFile', () => {
       `('should be $bool when { userIsLoggedIn: $loggedIn }', ({ loggedIn, bool }) => {
         setLoggedIn(loggedIn);
 
-        ({ wrapper } = createComponent({
+        createComponent({
           props: {
             file: store.state.diffs.diffFiles[0],
           },
-        }));
+        });
 
         expect(wrapper.vm.showLocalFileReviews).toBe(bool);
       });
@@ -556,7 +555,7 @@ describe('DiffFile', () => {
 
     describe('general (other) collapsed', () => {
       it('should be expandable for unreadable files', async () => {
-        ({ wrapper, store } = createComponent({ file: getUnreadableFile() }));
+        createComponent({ file: getUnreadableFile() });
         makeFileAutomaticallyCollapsed(store);
 
         await nextTick();
@@ -622,7 +621,7 @@ describe('DiffFile', () => {
         renderIt: true,
       };
 
-      ({ wrapper, store } = createComponent({ file }));
+      createComponent({ file });
 
       expect(wrapper.findByTestId('conflictsAlert').exists()).toBe(false);
     });
@@ -634,7 +633,7 @@ describe('DiffFile', () => {
         renderIt: true,
       };
 
-      ({ wrapper, store } = createComponent({ file }));
+      createComponent({ file });
 
       expect(wrapper.findByTestId('conflictsAlert').exists()).toBe(true);
     });
@@ -656,9 +655,9 @@ describe('DiffFile', () => {
           ...extraProps,
         };
 
-        ({ wrapper, store } = createComponent({
+        createComponent({
           file,
-        }));
+        });
 
         expect(wrapper.findByTestId('file-discussions').exists()).toEqual(exists);
       },
@@ -676,9 +675,9 @@ describe('DiffFile', () => {
           hasCommentForm,
         };
 
-        ({ wrapper, store } = createComponent({
+        createComponent({
           file,
-        }));
+        });
 
         expect(findNoteForm(wrapper).exists()).toEqual(exists);
       },
@@ -694,9 +693,9 @@ describe('DiffFile', () => {
         discussions,
       };
 
-      ({ wrapper, store } = createComponent({
+      createComponent({
         file,
-      }));
+      });
 
       expect(wrapper.findByTestId('diff-file-discussions').exists()).toEqual(exists);
     });
@@ -712,10 +711,10 @@ describe('DiffFile', () => {
       const errorCallback = jest.fn();
 
       beforeEach(() => {
-        ({ wrapper, store } = createComponent({
+        createComponent({
           file,
           options: { provide: { glFeatures: { commentOnFiles: true } } },
-        }));
+        });
       });
 
       it('calls saveDiffDiscussionMock', () => {
@@ -771,10 +770,10 @@ describe('DiffFile', () => {
       const errorCallback = jest.fn();
 
       beforeEach(async () => {
-        ({ wrapper, store } = createComponent({
+        createComponent({
           file,
           options: { provide: { glFeatures: { commentOnFiles: true } } },
-        }));
+        });
 
         triggerSaveDraftNote(wrapper, note, parentElement, errorCallback);
 
@@ -791,4 +790,13 @@ describe('DiffFile', () => {
       });
     });
   });
+
+  describe('pinned file', () => {
+    it('passes down pinned prop', async () => {
+      createComponent();
+      store.commit(`diffs/${SET_PINNED_FILE_HASH}`, getReadableFile().file_hash);
+      await nextTick();
+      expect(wrapper.findComponent(DiffFileHeaderComponent).props('pinned')).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
index 6e9eb433924a66..bd9592e4f5e313 100644
--- a/spec/frontend/diffs/components/diff_row_utils_spec.js
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -6,6 +6,7 @@ import {
   NEW_NO_NEW_LINE_TYPE,
   EMPTY_CELL_TYPE,
 } from '~/diffs/constants';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 
 const LINE_CODE = 'abc123';
 
@@ -108,15 +109,47 @@ describe('diff_row_utils', () => {
 
   describe('lineHref', () => {
     it(`should return #${LINE_CODE}`, () => {
-      expect(utils.lineHref({ line_code: LINE_CODE })).toEqual(`#${LINE_CODE}`);
+      expect(utils.lineHref({ line_code: LINE_CODE }, {})).toEqual(`#${LINE_CODE}`);
     });
 
     it(`should return '#' if line is undefined`, () => {
-      expect(utils.lineHref()).toEqual('#');
+      expect(utils.lineHref()).toEqual('');
     });
 
     it(`should return '#' if line_code is undefined`, () => {
-      expect(utils.lineHref({})).toEqual('#');
+      expect(utils.lineHref({}, {})).toEqual('');
+    });
+
+    describe('pinned file', () => {
+      beforeEach(() => {
+        window.gon.features = { pinnedFile: true };
+      });
+
+      afterEach(() => {
+        delete window.gon.features;
+      });
+
+      it(`should return pinned file URL`, () => {
+        const diffFile = getDiffFileMock();
+        expect(utils.lineHref({ line_code: LINE_CODE }, { diffFile })).toEqual(
+          `?pin=${diffFile.file_hash}#${LINE_CODE}`,
+        );
+      });
+    });
+  });
+
+  describe('pinnedFileHref', () => {
+    beforeEach(() => {
+      window.gon.features = { pinnedFile: true };
+    });
+
+    afterEach(() => {
+      delete window.gon.features;
+    });
+
+    it(`should return pinned file URL`, () => {
+      const diffFile = getDiffFileMock();
+      expect(utils.pinnedFileHref(diffFile)).toEqual(`?pin=${diffFile.file_hash}`);
     });
   });
 
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index a54cf9b8bff02d..230839f0ecf866 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -7,6 +7,9 @@ import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import DiffFileRow from '~/diffs/components//diff_file_row.vue';
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { SET_PINNED_FILE_HASH, SET_TREE_DATA, SET_DIFF_FILES } from '~/diffs/store/mutation_types';
+import { generateTreeList } from '~/diffs/utils/tree_worker_utils';
+import { sortTree } from '~/ide/stores/utils';
 
 describe('Diffs tree list component', () => {
   let wrapper;
@@ -58,6 +61,14 @@ describe('Diffs tree list component', () => {
 
   const setupFilesInState = () => {
     const treeEntries = {
+      app: {
+        key: 'app',
+        path: 'app',
+        name: 'app',
+        type: 'tree',
+        tree: [],
+        opened: true,
+      },
       'index.js': {
         addedLines: 0,
         changed: true,
@@ -71,6 +82,8 @@ describe('Diffs tree list component', () => {
         type: 'blob',
         parentPath: 'app',
         tree: [],
+        file_path: 'app/index.js',
+        file_hash: 'app-index',
       },
       'test.rb': {
         addedLines: 0,
@@ -85,20 +98,39 @@ describe('Diffs tree list component', () => {
         type: 'blob',
         parentPath: 'app',
         tree: [],
+        file_path: 'app/test.rb',
+        file_hash: 'app-test',
       },
-      app: {
-        key: 'app',
-        path: 'app',
-        name: 'app',
-        type: 'tree',
+      LICENSE: {
+        addedLines: 0,
+        changed: true,
+        deleted: false,
+        fileHash: 'LICENSE',
+        key: 'LICENSE',
+        name: 'LICENSE',
+        path: 'LICENSE',
+        removedLines: 0,
+        tempFile: true,
+        type: 'blob',
+        parentPath: '/',
         tree: [],
+        file_path: 'LICENSE',
+        file_hash: 'LICENSE',
       },
     };
 
     Object.assign(store.state.diffs, {
       treeEntries,
-      tree: [treeEntries['index.js'], treeEntries.app],
+      tree: [
+        treeEntries.LICENSE,
+        {
+          ...treeEntries.app,
+          tree: [treeEntries['index.js'], treeEntries['test.rb']],
+        },
+      ],
     });
+
+    return treeEntries;
   };
 
   describe('default', () => {
@@ -149,7 +181,7 @@ describe('Diffs tree list component', () => {
     });
 
     it('renders tree', () => {
-      expect(getScroller().props('items')).toHaveLength(2);
+      expect(getScroller().props('items')).toHaveLength(4);
     });
 
     it('hides file stats', () => {
@@ -169,7 +201,7 @@ describe('Diffs tree list component', () => {
       store.state.diffs.renderTreeList = false;
 
       await nextTick();
-      expect(getScroller().props('items')).toHaveLength(3);
+      expect(getScroller().props('items')).toHaveLength(5);
     });
   });
 
@@ -188,4 +220,59 @@ describe('Diffs tree list component', () => {
       expect(getFileRow().props('viewedFiles')).toBe(viewedDiffFileIds);
     });
   });
+
+  describe('pinned file', () => {
+    const filePaths = [
+      ['nested-1.rb', 'folder/sub-folder/'],
+      ['nested-2.rb', 'folder/sub-folder/'],
+      ['nested-3.rb', 'folder/sub-folder/'],
+      ['1.rb', 'folder/'],
+      ['2.rb', 'folder/'],
+      ['3.rb', 'folder/'],
+      ['single.rb', 'folder-single/'],
+      ['root-first.rb'],
+      ['root-last.rb'],
+    ];
+
+    const pinFile = (fileHash) => {
+      store.commit(`diffs/${SET_PINNED_FILE_HASH}`, fileHash);
+    };
+
+    const setupFiles = (diffFiles) => {
+      const { treeEntries, tree } = generateTreeList(diffFiles);
+      store.commit(`diffs/${SET_DIFF_FILES}`, diffFiles);
+      store.commit(`diffs/${SET_TREE_DATA}`, {
+        treeEntries,
+        tree: sortTree(tree),
+      });
+    };
+
+    const createFile = (name, path = '') => ({
+      file_hash: name,
+      path: `${path}${name}`,
+      new_path: `${path}${name}`,
+      file_path: `${path}${name}`,
+    });
+
+    beforeEach(() => {
+      createComponent();
+      setupFiles(filePaths.map(([name, path]) => createFile(name, path)));
+    });
+
+    describe('files in folders', () => {
+      it.each(filePaths.map((path) => path[0]))('pins %s file', async (pinnedFile) => {
+        pinFile(pinnedFile);
+        await nextTick();
+        const items = getScroller().props('items');
+        expect(
+          items.map(
+            (item) =>
+              `${'─'.repeat(item.level * 2)}${item.type === 'tree' ? '📁' : ''}${
+                item.name || item.path
+              }`,
+          ),
+        ).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index be3b30e8e7a9bc..c68f3c5991e765 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -11,7 +11,7 @@ import {
   PARALLEL_DIFF_VIEW_TYPE,
   EVT_MR_PREPARED,
 } from '~/diffs/constants';
-import { LOAD_SINGLE_DIFF_FAILED, BUILDING_YOUR_MR, SOMETHING_WENT_WRONG } from '~/diffs/i18n';
+import { BUILDING_YOUR_MR, SOMETHING_WENT_WRONG } from '~/diffs/i18n';
 import * as diffActions from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import * as utils from '~/diffs/store/utils';
@@ -28,6 +28,8 @@ import {
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
 import diffsEventHub from '~/diffs/event_hub';
+import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { diffMetadata } from '../mock_data/diff_metadata';
 
 jest.mock('~/alert');
@@ -37,6 +39,8 @@ jest.mock('~/lib/utils/secret_detection', () => ({
   containsSensitiveToken: jest.requireActual('~/lib/utils/secret_detection').containsSensitiveToken,
 }));
 
+const endpointDiffForPath = '/diffs/set/endpoint/path';
+
 describe('DiffsStoreActions', () => {
   let mock;
 
@@ -78,7 +82,6 @@ describe('DiffsStoreActions', () => {
       const endpoint = '/diffs/set/endpoint';
       const endpointMetadata = '/diffs/set/endpoint/metadata';
       const endpointBatch = '/diffs/set/endpoint/batch';
-      const endpointDiffForPath = '/diffs/set/endpoint/path';
       const endpointCoverage = '/diffs/set/coverage_reports';
       const projectPath = '/root/project';
       const dismissEndpoint = '/-/user_callouts';
@@ -181,7 +184,6 @@ describe('DiffsStoreActions', () => {
         w: '1',
         view: 'inline',
       };
-      const endpointDiffForPath = '/diffs/set/endpoint/path';
       const diffForPath = mergeUrlParams(defaultParams, endpointDiffForPath);
       const treeEntry = {
         fileHash: 'e334a2a10f036c00151a04cea7938a5d4213a818',
@@ -350,7 +352,6 @@ describe('DiffsStoreActions', () => {
         w: '1',
         view: 'inline',
       };
-      const endpointDiffForPath = '/diffs/set/endpoint/path';
       const diffForPath = mergeUrlParams(defaultParams, endpointDiffForPath);
       const treeEntry = {
         fileHash: 'e334a2a10f036c00151a04cea7938a5d4213a818',
@@ -490,8 +491,8 @@ describe('DiffsStoreActions', () => {
   describe('fetchDiffFilesBatch', () => {
     it('should fetch batch diff files', () => {
       const endpointBatch = '/fetch/diffs_batch';
-      const res1 = { diff_files: [{ file_hash: 'test' }], pagination: { total_pages: 7 } };
-      const res2 = { diff_files: [{ file_hash: 'test2' }], pagination: { total_pages: 7 } };
+      const res1 = { diff_files: [{ file_hash: 'test' }], pagination: { total_pages: 2 } };
+      const res2 = { diff_files: [{ file_hash: 'test2' }], pagination: { total_pages: 2 } };
       mock
         .onGet(
           mergeUrlParams(
@@ -520,7 +521,7 @@ describe('DiffsStoreActions', () => {
 
       return testAction(
         diffActions.fetchDiffFilesBatch,
-        {},
+        undefined,
         { endpointBatch, diffViewType: 'inline', diffFiles: [], perPage: 5 },
         [
           { type: types.SET_BATCH_LOADING_STATE, payload: 'loading' },
@@ -532,7 +533,6 @@ describe('DiffsStoreActions', () => {
           { type: types.SET_BATCH_LOADING_STATE, payload: 'loaded' },
           { type: types.SET_CURRENT_DIFF_FILE, payload: 'test2' },
           { type: types.SET_RETRIEVING_BATCHES, payload: false },
-          { type: types.SET_BATCH_LOADING_STATE, payload: 'error' },
         ],
         [],
       );
@@ -690,7 +690,7 @@ describe('DiffsStoreActions', () => {
 
   describe('setHighlightedRow', () => {
     it('should mark currently selected diff and set lineHash and fileHash of highlightedRow', () => {
-      return testAction(diffActions.setHighlightedRow, 'ABC_123', {}, [
+      return testAction(diffActions.setHighlightedRow, { lineCode: 'ABC_123' }, {}, [
         { type: types.SET_HIGHLIGHTED_ROW, payload: 'ABC_123' },
         { type: types.SET_CURRENT_DIFF_FILE, payload: 'ABC' },
       ]);
@@ -1310,14 +1310,17 @@ describe('DiffsStoreActions', () => {
         diffActions.goToFile({ state, dispatch, getters, commit }, file);
 
         expect(commit).toHaveBeenCalledWith(types.SET_CURRENT_DIFF_FILE, fileHash);
-        expect(dispatch).toHaveBeenCalledTimes(0);
+        expect(dispatch).not.toHaveBeenCalledWith('fetchFileByFile');
       });
 
       describe('when the tree entry has not been loaded', () => {
         it('updates location hash', () => {
           diffActions.goToFile({ state, commit, getters, dispatch }, file);
 
-          expect(document.location.hash).toBe('#test');
+          expect(historyPushState).toHaveBeenCalledWith(new URL(`${TEST_HOST}#test`), {
+            skipScrolling: true,
+          });
+          expect(scrollToElement).toHaveBeenCalledWith('.diff-files-holder', { duration: 0 });
         });
 
         it('loads the file and then scrolls to it', async () => {
@@ -1333,21 +1336,12 @@ describe('DiffsStoreActions', () => {
           expect(commonUtils.scrollToElement).toHaveBeenCalledWith('.diff-files-holder', {
             duration: 0,
           });
-          expect(dispatch).toHaveBeenCalledTimes(1);
+          expect(dispatch).toHaveBeenCalledWith('fetchFileByFile');
         });
 
-        it('shows an alert when there was an error fetching the file', async () => {
-          dispatch = jest.fn().mockRejectedValue();
-
+        it('unpins the file', () => {
           diffActions.goToFile({ state, commit, getters, dispatch }, file);
-
-          // Wait for the fetchFileByFile dispatch to return, to trigger the catch
-          await waitForPromises();
-
-          expect(createAlert).toHaveBeenCalledTimes(1);
-          expect(createAlert).toHaveBeenCalledWith({
-            message: expect.stringMatching(LOAD_SINGLE_DIFF_FAILED),
-          });
+          expect(dispatch).toHaveBeenCalledWith('unpinFile');
         });
       });
     });
@@ -1969,7 +1963,7 @@ describe('DiffsStoreActions', () => {
         0,
         { flatBlobsList: [{ fileHash: '123' }] },
         [{ type: types.SET_CURRENT_DIFF_FILE, payload: '123' }],
-        [],
+        [{ type: 'unpinFile' }],
       );
     });
 
@@ -1979,7 +1973,7 @@ describe('DiffsStoreActions', () => {
         0,
         { viewDiffsFileByFile: true, flatBlobsList: [{ fileHash: '123' }] },
         [{ type: types.SET_CURRENT_DIFF_FILE, payload: '123' }],
-        [{ type: 'fetchFileByFile' }],
+        [{ type: 'unpinFile' }, { type: 'fetchFileByFile' }],
       );
     });
   });
@@ -2120,4 +2114,84 @@ describe('DiffsStoreActions', () => {
       );
     });
   });
+
+  describe('fetchPinnedFile', () => {
+    it('fetches pinned file', async () => {
+      const pinnedFileHref = `${TEST_HOST}/pinned-file`;
+      const pinnedFile = getDiffFileMock();
+      const diffFiles = [pinnedFile];
+      const hubSpy = jest.spyOn(diffsEventHub, '$emit');
+      mock.onGet(new RegExp(pinnedFileHref)).reply(HTTP_STATUS_OK, { diff_files: diffFiles });
+
+      await testAction(
+        diffActions.fetchPinnedFile,
+        pinnedFileHref,
+        {},
+        [
+          { type: types.SET_BATCH_LOADING_STATE, payload: 'loading' },
+          { type: types.SET_RETRIEVING_BATCHES, payload: true },
+          {
+            type: types.SET_DIFF_DATA_BATCH,
+            payload: { diff_files: diffFiles, updatePosition: false },
+          },
+          { type: types.SET_PINNED_FILE_HASH, payload: pinnedFile.file_hash },
+          { type: types.SET_CURRENT_DIFF_FILE, payload: pinnedFile.file_hash },
+          { type: types.SET_BATCH_LOADING_STATE, payload: 'loaded' },
+          { type: types.SET_RETRIEVING_BATCHES, payload: false },
+        ],
+        [],
+      );
+
+      jest.runAllTimers();
+      expect(hubSpy).toHaveBeenCalledWith('diffFilesModified');
+      expect(handleLocationHash).toHaveBeenCalled();
+    });
+
+    it('handles load error', async () => {
+      const pinnedFileHref = `${TEST_HOST}/pinned-file`;
+      const hubSpy = jest.spyOn(diffsEventHub, '$emit');
+      mock.onGet(new RegExp(pinnedFileHref)).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+
+      try {
+        await testAction(
+          diffActions.fetchPinnedFile,
+          pinnedFileHref,
+          {},
+          [
+            { type: types.SET_BATCH_LOADING_STATE, payload: 'loading' },
+            { type: types.SET_RETRIEVING_BATCHES, payload: true },
+            { type: types.SET_BATCH_LOADING_STATE, payload: 'error' },
+            { type: types.SET_RETRIEVING_BATCHES, payload: false },
+          ],
+          [],
+        );
+      } catch (error) {
+        expect(error.response.status).toBe(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+      }
+
+      jest.runAllTimers();
+      expect(hubSpy).not.toHaveBeenCalledWith('diffFilesModified');
+      expect(handleLocationHash).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('unpinFile', () => {
+    it('unpins pinned file', () => {
+      const pinnedFile = getDiffFileMock();
+      setWindowLocation(`${TEST_HOST}/?pin=${pinnedFile.file_hash}#${pinnedFile.file_hash}_10_10`);
+      testAction(
+        diffActions.unpinFile,
+        undefined,
+        { pinnedFile },
+        [{ type: types.SET_PINNED_FILE_HASH, payload: null }],
+        [],
+      );
+      expect(window.location.hash).toBe('');
+      expect(window.location.search).toBe('');
+    });
+
+    it('does nothing when no pinned file present', () => {
+      testAction(diffActions.unpinFile, undefined, {}, [], []);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/getters_spec.js b/spec/frontend/diffs/store/getters_spec.js
index 8097f0976f6c17..cb0f40534fe7b5 100644
--- a/spec/frontend/diffs/store/getters_spec.js
+++ b/spec/frontend/diffs/store/getters_spec.js
@@ -1,6 +1,7 @@
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 import * as getters from '~/diffs/store/getters';
 import state from '~/diffs/store/modules/diff_state';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 import discussion from '../mock_data/diff_discussions';
 
 describe('Diffs Module Getters', () => {
@@ -495,4 +496,35 @@ describe('Diffs Module Getters', () => {
       },
     );
   });
+
+  describe('diffFiles', () => {
+    it('proxies diffFiles state', () => {
+      const diffFiles = [getDiffFileMock()];
+      expect(getters.diffFiles({ diffFiles }, {})).toBe(diffFiles);
+    });
+
+    it('pins the file', () => {
+      const pinnedFile = getDiffFileMock();
+      const regularFile = getDiffFileMock();
+      const diffFiles = [regularFile, pinnedFile];
+      expect(getters.diffFiles({ diffFiles }, { pinnedFile })).toStrictEqual([
+        pinnedFile,
+        regularFile,
+      ]);
+    });
+  });
+
+  describe('pinnedFile', () => {
+    it('returns pinnedFile', () => {
+      const pinnedFile = getDiffFileMock();
+      const diffFiles = [pinnedFile];
+      expect(getters.pinnedFile({ diffFiles, pinnedFileHash: pinnedFile.file_hash }, {})).toBe(
+        pinnedFile,
+      );
+    });
+
+    it('returns null if no pinned file is set', () => {
+      expect(getters.pinnedFile({}, {})).toBe(null);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/mutations_spec.js b/spec/frontend/diffs/store/mutations_spec.js
index a5be41aa69f49f..8d52cd39542744 100644
--- a/spec/frontend/diffs/store/mutations_spec.js
+++ b/spec/frontend/diffs/store/mutations_spec.js
@@ -92,7 +92,7 @@ describe('DiffsStoreMutations', () => {
     });
   });
 
-  describe('SET_DIFF_DATA_BATCH_DATA', () => {
+  describe('SET_DIFF_DATA_BATCH', () => {
     it('should set diff data batch type properly', () => {
       const mockFile = getDiffFileMock();
       const state = {
@@ -108,6 +108,39 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].collapsed).toEqual(false);
       expect(state.treeEntries[mockFile.file_path].diffLoaded).toBe(true);
     });
+
+    it('should update diff position by default', () => {
+      const mockFile = getDiffFileMock();
+      const state = {
+        diffFiles: [mockFile, { ...mockFile, file_hash: 'foo', file_path: 'foo' }],
+        treeEntries: { [mockFile.file_path]: { fileHash: mockFile.file_hash } },
+      };
+      const diffMock = {
+        diff_files: [mockFile],
+      };
+
+      mutations[types.SET_DIFF_DATA_BATCH](state, diffMock);
+
+      expect(state.diffFiles[1].file_hash).toBe(mockFile.file_hash);
+      expect(state.treeEntries[mockFile.file_path].diffLoaded).toBe(true);
+    });
+
+    it('should not update diff position', () => {
+      const mockFile = getDiffFileMock();
+      const state = {
+        diffFiles: [mockFile, { ...mockFile, file_hash: 'foo', file_path: 'foo' }],
+        treeEntries: { [mockFile.file_path]: { fileHash: mockFile.file_hash } },
+      };
+      const diffMock = {
+        diff_files: [mockFile],
+        updatePosition: false,
+      };
+
+      mutations[types.SET_DIFF_DATA_BATCH](state, diffMock);
+
+      expect(state.diffFiles[0].file_hash).toBe(mockFile.file_hash);
+      expect(state.treeEntries[mockFile.file_path].diffLoaded).toBe(true);
+    });
   });
 
   describe('SET_COVERAGE_DATA', () => {
@@ -122,6 +155,17 @@ describe('DiffsStoreMutations', () => {
     });
   });
 
+  describe('SET_DIFF_TREE_ENTRY', () => {
+    it('should set tree entry', () => {
+      const file = getDiffFileMock();
+      const state = { treeEntries: { [file.file_path]: {} } };
+
+      mutations[types.SET_DIFF_TREE_ENTRY](state, file);
+
+      expect(state.treeEntries[file.file_path].diffLoaded).toBe(true);
+    });
+  });
+
   describe('SET_DIFF_VIEW_TYPE', () => {
     it('should set diff view type properly', () => {
       const state = {};
@@ -1076,4 +1120,15 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].viewer.forceOpen).toBe(true);
     });
   });
+
+  describe('SET_PINNED_FILE_HASH', () => {
+    it('set pinned file hash', () => {
+      const state = {};
+      const file = getDiffFileMock();
+
+      mutations[types.SET_PINNED_FILE_HASH](state, file.file_hash);
+
+      expect(state.pinnedFileHash).toBe(file.file_hash);
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 6331269d6e8b7a..019ed663d82ff6 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -476,6 +476,17 @@ describe('DiffsStoreUtils', () => {
         expect(updatedFilesList).toEqual([mock, fakeNewFile]);
       });
 
+      it('updates diff position', () => {
+        const priorFiles = [mock, { ...mock, file_hash: 'foo', file_path: 'foo' }];
+        const updatedFilesList = utils.prepareDiffData({
+          diff: { diff_files: [mock] },
+          priorFiles,
+          updatePosition: true,
+        });
+
+        expect(updatedFilesList[1].file_hash).toEqual(mock.file_hash);
+      });
+
       it('completes an existing split diff without overwriting existing diffs', () => {
         // The current state has a file that has only loaded inline lines
         const priorFiles = [{ ...mock }];
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index 976866af27c0f8..d063db1e34b178 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { file } from 'jest/ide/helpers';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
@@ -153,4 +154,16 @@ describe('File row component', () => {
 
     expect(wrapper.findComponent(FileIcon).props('submodule')).toBe(submodule);
   });
+
+  it('renders pinned icon', () => {
+    createComponent({
+      file: {
+        ...file(),
+        pinned: true,
+      },
+      level: 0,
+    });
+
+    expect(wrapper.findComponent(GlIcon).props('name')).toBe('thumbtack');
+  });
 });
-- 
GitLab