Add latest changes from gitlab-org/gitlab@16-1-stable-eev16.1.0-rc42

5 files changed, 89 insertions, 26 deletions

diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 0668551902a..029be6ebad9 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -50,6 +50,7 @@ import {
   TRACKING_SINGLE_FILE_MODE,
   TRACKING_MULTIPLE_FILES_MODE,
   EVT_MR_PREPARED,
+  FILE_DIFF_POSITION_TYPE,
 } from '../constants';
 import { DISCUSSION_SINGLE_DIFF_FAILED, LOAD_SINGLE_DIFF_FAILED } from '../i18n';
 import eventHub from '../event_hub';
@@ -461,6 +462,26 @@ export const setParallelDiffViewType = ({ commit }) => {
 
 export const showCommentForm = ({ commit }, { lineCode, fileHash }) => {
   commit(types.TOGGLE_LINE_HAS_FORM, { lineCode, fileHash, hasForm: true });
+
+  // The comment form for diffs gets focussed differently due to the way the virtual scroller
+  // works. If we focus the comment form on mount and the comment form gets removed and then
+  // added again the page will scroll in unexpected ways
+  setTimeout(() => {
+    const el = document.querySelector(`[data-line-code="${lineCode}"] textarea`);
+
+    if (!el) return;
+
+    const { bottom } = el.getBoundingClientRect();
+    const overflowBottom = bottom - window.innerHeight;
+
+    // Prevent the browser scrolling for us
+    // We handle the scrolling to not break the diffs virtual scroller
+    el.focus({ preventScroll: true });
+
+    if (overflowBottom > 0) {
+      window.scrollBy(0, Math.floor(Math.abs(overflowBottom)) + 150);
+    }
+  });
 };
 
 export const cancelCommentForm = ({ commit }, { lineCode, fileHash }) => {
@@ -505,11 +526,12 @@ export const scrollToLineIfNeededParallel = (_, line) => {
   }
 };
 
-export const loadCollapsedDiff = ({ commit, getters, state }, file) => {
+export const loadCollapsedDiff = ({ commit, getters, state }, { file, params = {} }) => {
   const versionPath = state.mergeRequestDiff?.version_path;
   const loadParams = {
     commit_id: getters.commitId,
     w: state.showWhitespace ? '0' : '1',
+    ...params,
   };
 
   if (versionPath) {
@@ -577,6 +599,7 @@ export const saveDiffDiscussion = async ({ state, dispatch }, { note, formData }
   const postData = getNoteFormData({
     commit: state.commit,
     note,
+    showWhitespace: state.showWhitespace,
     ...formData,
   });
 
@@ -592,6 +615,11 @@ export const saveDiffDiscussion = async ({ state, dispatch }, { note, formData }
     .then((discussion) => dispatch('assignDiscussionsToDiff', [discussion]))
     .then(() => dispatch('updateResolvableDiscussionsCounts', null, { root: true }))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
+    .then(() => {
+      if (formData.positionType === FILE_DIFF_POSITION_TYPE) {
+        dispatch('toggleFileCommentForm', formData.diffFile.file_path);
+      }
+    })
     .catch(() =>
       createAlert({
         message: s__('MergeRequests|Saving the comment failed'),
@@ -607,8 +635,8 @@ export const setCurrentFileHash = ({ commit }, hash) => {
   commit(types.SET_CURRENT_DIFF_FILE, hash);
 };
 
-export const goToFile = ({ state, commit, dispatch, getters }, { path, singleFile }) => {
-  if (!state.viewDiffsFileByFile || !singleFile) {
+export const goToFile = ({ state, commit, dispatch, getters }, { path }) => {
+  if (!state.viewDiffsFileByFile) {
     dispatch('scrollToFile', { path });
   } else {
     if (!state.treeEntries[path]) return;
@@ -809,7 +837,7 @@ export const toggleFullDiff = ({ dispatch, commit, getters, state }, filePath) =
   commit(types.REQUEST_FULL_DIFF, filePath);
 
   if (file.isShowingFullFile) {
-    dispatch('loadCollapsedDiff', file)
+    dispatch('loadCollapsedDiff', { file })
       .then(() => dispatch('assignDiscussionsToDiff', getters.getDiffFileDiscussions(file)))
       .catch(() => dispatch('receiveFullDiffError', filePath));
   } else {
@@ -942,16 +970,13 @@ export const setCurrentDiffFileIdFromNote = ({ commit, getters, rootGetters }, n
   }
 };
 
-export const navigateToDiffFileIndex = (
-  { state, getters, commit, dispatch },
-  { index, singleFile },
-) => {
+export const navigateToDiffFileIndex = ({ state, getters, commit, dispatch }, index) => {
   const { fileHash } = getters.flatBlobsList[index];
   document.location.hash = fileHash;
 
   commit(types.SET_CURRENT_DIFF_FILE, fileHash);
 
-  if (state.viewDiffsFileByFile && singleFile) {
+  if (state.viewDiffsFileByFile) {
     dispatch('fetchFileByFile');
   }
 };
@@ -993,3 +1018,9 @@ export function reviewFile({ commit, state }, { file, reviewed = true }) {
 }
 
 export const disableVirtualScroller = ({ commit }) => commit(types.DISABLE_VIRTUAL_SCROLLING);
+
+export const toggleFileCommentForm = ({ commit }, filePath) =>
+  commit(types.TOGGLE_FILE_COMMENT_FORM, filePath);
+
+export const addDraftToFile = ({ commit }, { filePath, draft }) =>
+  commit(types.ADD_DRAFT_TO_FILE, { filePath, draft });
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index 10a6a872fe4..a8a831fb269 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -63,9 +63,12 @@ export const diffHasAllCollapsedDiscussions = (state, getters) => (diff) => {
  * @returns {Boolean}
  */
 export const diffHasExpandedDiscussions = () => (diff) => {
-  return diff[INLINE_DIFF_LINES_KEY].filter((l) => l.discussions.length >= 1).some(
-    (l) => l.discussionsExpanded,
-  );
+  const diffLineDiscussionsExpanded = diff[INLINE_DIFF_LINES_KEY].filter(
+    (l) => l.discussions.length >= 1,
+  ).some((l) => l.discussionsExpanded);
+  const diffFileDiscussionsExpanded = diff.discussions?.some((d) => d.expanded);
+
+  return diffFileDiscussionsExpanded || diffLineDiscussionsExpanded;
 };
 
 /**
@@ -74,7 +77,10 @@ export const diffHasExpandedDiscussions = () => (diff) => {
  * @returns {Boolean}
  */
 export const diffHasDiscussions = () => (diff) => {
-  return diff[INLINE_DIFF_LINES_KEY].some((l) => l.discussions.length >= 1);
+  return (
+    diff.discussions?.length >= 1 ||
+    diff[INLINE_DIFF_LINES_KEY].some((l) => l.discussions.length >= 1)
+  );
 };
 
 /**
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 51c21c1bfc4..c32d82faad0 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -49,3 +49,6 @@ export const SET_SHOW_SUGGEST_POPOVER = 'SET_SHOW_SUGGEST_POPOVER';
 
 export const TOGGLE_LINE_DISCUSSIONS = 'TOGGLE_LINE_DISCUSSIONS';
 export const DISABLE_VIRTUAL_SCROLLING = 'DISABLE_VIRTUAL_SCROLLING';
+
+export const TOGGLE_FILE_COMMENT_FORM = 'TOGGLE_FILE_COMMENT_FORM';
+export const ADD_DRAFT_TO_FILE = 'ADD_DRAFT_TO_FILE';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 5e7fe8b5cd8..2786e971f4b 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -5,6 +5,7 @@ import {
   DIFF_FILE_AUTOMATIC_COLLAPSE,
   INLINE_DIFF_LINES_KEY,
   EXPANDED_LINE_TYPE,
+  FILE_DIFF_POSITION_TYPE,
 } from '../constants';
 import * as types from './mutation_types';
 import {
@@ -168,6 +169,7 @@ export default {
     const { latestDiff } = state;
 
     const originalStartLineCode = discussion.original_position?.line_range?.start?.line_code;
+    const positionType = discussion.position?.position_type;
     const discussionLineCodes = [
       discussion.line_code,
       originalStartLineCode,
@@ -212,16 +214,7 @@ export default {
 
     state.diffFiles.forEach((file) => {
       if (file.file_hash === fileHash) {
-        if (file[INLINE_DIFF_LINES_KEY].length) {
-          file[INLINE_DIFF_LINES_KEY].forEach((line) => {
-            Object.assign(
-              line,
-              setDiscussionsExpanded(lineCheck(line) ? mapDiscussions(line) : line),
-            );
-          });
-        }
-
-        if (!file[INLINE_DIFF_LINES_KEY].length) {
+        if (positionType === FILE_DIFF_POSITION_TYPE) {
           const newDiscussions = (file.discussions || [])
             .filter((d) => d.id !== discussion.id)
             .concat(discussion);
@@ -229,6 +222,25 @@ export default {
           Object.assign(file, {
             discussions: newDiscussions,
           });
+        } else {
+          if (file[INLINE_DIFF_LINES_KEY].length) {
+            file[INLINE_DIFF_LINES_KEY].forEach((line) => {
+              Object.assign(
+                line,
+                setDiscussionsExpanded(lineCheck(line) ? mapDiscussions(line) : line),
+              );
+            });
+          }
+
+          if (!file[INLINE_DIFF_LINES_KEY].length) {
+            const newDiscussions = (file.discussions || [])
+              .filter((d) => d.id !== discussion.id)
+              .concat(discussion);
+
+            Object.assign(file, {
+              discussions: newDiscussions,
+            });
+          }
         }
       }
     });
@@ -378,4 +390,14 @@ export default {
   [types.DISABLE_VIRTUAL_SCROLLING](state) {
     state.disableVirtualScroller = true;
   },
+  [types.TOGGLE_FILE_COMMENT_FORM](state, filePath) {
+    const file = findDiffFile(state.diffFiles, filePath, 'file_path');
+
+    file.hasCommentForm = !file.hasCommentForm;
+  },
+  [types.ADD_DRAFT_TO_FILE](state, { filePath, draft }) {
+    const file = findDiffFile(state.diffFiles, filePath, 'file_path');
+
+    file?.drafts.push(draft);
+  },
 };
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 4ca353333b7..68536d36ac0 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -140,6 +140,7 @@ export function getFormData(params) {
     linePosition,
     positionType,
     lineRange,
+    showWhitespace,
   } = params;
 
   const position = JSON.stringify({
@@ -156,6 +157,7 @@ export function getFormData(params) {
     width: params.width,
     height: params.height,
     line_range: lineRange,
+    ignore_whitespace_change: !showWhitespace,
   });
 
   const postData = {
@@ -486,9 +488,8 @@ export const getDiffMode = (diffFile) => {
   const diffModeKey = Object.keys(diffModes).find((key) => diffFile[`${key}_file`]);
   return (
     diffModes[diffModeKey] ||
-    (diffFile.viewer &&
-      diffFile.viewer.name === diffViewerModes.mode_changed &&
-      diffViewerModes.mode_changed) ||
+    (diffFile.viewer?.name === diffViewerModes.mode_changed && diffViewerModes.mode_changed) ||
+    (diffFile.viewer?.name === diffViewerModes.no_preview && diffViewerModes.no_preview) ||
     diffModes.replaced
   );
 };