Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

5 files changed, 71 insertions, 60 deletions

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index ad163a2a615..0e5acd0928b 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -104,12 +104,9 @@ export default {
           class="d-inline-flex mb-2"
         />
         <gl-button-group class="gl-ml-4 gl-mb-4" data-testid="commit-sha-group">
-          <gl-button
-            label
-            class="gl-font-monospace"
-            data-testid="commit-sha-short-id"
-            v-text="commit.short_id"
-          />
+          <gl-button label class="gl-font-monospace" data-testid="commit-sha-short-id">{{
+            commit.short_id
+          }}</gl-button>
           <modal-copy-button
             :text="commit.id"
             :title="__('Copy commit SHA')"
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index fc5766a23ef..3082ba0f16f 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -217,52 +217,47 @@ export default {
 </script>
 
 <template>
-  <div class="diff-grid-row diff-grid-row-full diff-tr line_holder match expansion">
-    <div :class="{ parallel: !inline }" class="diff-grid-left diff-grid-2-col left-side">
-      <div
-        class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column"
+  <div>
+    <div
+      class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column"
+    >
+      <button
+        v-if="showExpandDown"
+        :title="s__('Diffs|Next 20 lines')"
+        :disabled="loading.down"
+        type="button"
+        class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines($options.EXPAND_DOWN)"
       >
-        <button
-          v-if="showExpandDown"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Next 20 lines')"
-          :disabled="loading.down"
-          type="button"
-          class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines($options.EXPAND_DOWN)"
-        >
-          <gl-loading-icon v-if="loading.down" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand-down" />
-        </button>
-        <button
-          v-if="lineCountBetween !== -1 && lineCountBetween < 20"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Expand all lines')"
-          :disabled="loading.all"
-          type="button"
-          class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines()"
-        >
-          <gl-loading-icon v-if="loading.all" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand" />
-        </button>
-        <button
-          v-if="showExpandUp"
-          v-gl-tooltip.left
-          :title="s__('Diffs|Previous 20 lines')"
-          :disabled="loading.up"
-          type="button"
-          class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button"
-          @click="handleExpandLines($options.EXPAND_UP)"
-        >
-          <gl-loading-icon v-if="loading.up" size="sm" color="dark" inline />
-          <gl-icon v-else name="expand-up" />
-        </button>
-      </div>
-      <div
-        v-safe-html="line.rich_text"
-        class="gl-display-flex! gl-flex-direction-column gl-justify-content-center diff-td line_content left-side gl-white-space-normal!"
-      ></div>
+        <gl-loading-icon v-if="loading.down" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand-down" />
+      </button>
+      <button
+        v-if="lineCountBetween !== -1 && lineCountBetween < 20"
+        :title="s__('Diffs|Expand all lines')"
+        :disabled="loading.all"
+        type="button"
+        class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines()"
+      >
+        <gl-loading-icon v-if="loading.all" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand" />
+      </button>
+      <button
+        v-if="showExpandUp"
+        :title="s__('Diffs|Previous 20 lines')"
+        :disabled="loading.up"
+        type="button"
+        class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button"
+        @click="handleExpandLines($options.EXPAND_UP)"
+      >
+        <gl-loading-icon v-if="loading.up" size="sm" color="dark" inline />
+        <gl-icon v-else name="expand-up" />
+      </button>
     </div>
+    <div
+      v-safe-html="line.rich_text"
+      class="gl-display-flex! gl-flex-direction-column gl-justify-content-center diff-td line_content left-side gl-white-space-normal!"
+    ></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index ad406947561..ea94df1ad5b 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -197,17 +197,33 @@ export default {
     @mousedown="handleParallelLineMouseDown"
   >
     <template v-for="(line, index) in diffLines">
-      <template v-if="line.isMatchLineLeft || line.isMatchLineRight">
+      <div
+        v-if="line.isMatchLineLeft || line.isMatchLineRight"
+        :key="`expand-${index}`"
+        class="diff-grid-row diff-tr line_holder match expansion"
+      >
         <diff-expansion-cell
-          :key="`expand-${index}`"
           :file="diffFile"
           :line="line.left"
           :is-top="index === 0"
           :is-bottom="index + 1 === diffLinesLength"
           :inline="inline"
           :line-count-between="getCountBetweenIndex(index)"
+          :class="{ parallel: !inline }"
+          class="diff-grid-left diff-grid-2-col left-side"
         />
-      </template>
+        <diff-expansion-cell
+          v-if="!inline"
+          :file="diffFile"
+          :line="line.left"
+          :is-top="index === 0"
+          :is-bottom="index + 1 === diffLinesLength"
+          :inline="inline"
+          :line-count-between="getCountBetweenIndex(index)"
+          :class="{ parallel: !inline }"
+          class="diff-grid-right diff-grid-2-col right-side"
+        />
+      </div>
       <diff-row
         v-if="!line.isMatchLineLeft && !line.isMatchLineRight"
         :key="line.line_code"
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 6c0c9c4e1d0..1cc96ef3d54 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -71,12 +71,15 @@ export const DIFF_FILE_MANUAL_COLLAPSE = 'manual';
 export const STATE_IDLING = 'idle';
 export const STATE_LOADING = 'loading';
 export const STATE_ERRORED = 'errored';
+export const STATE_PENDING_REVIEW = 'pending_comments';
 
 // State machine transitions
 export const TRANSITION_LOAD_START = 'LOAD_START';
 export const TRANSITION_LOAD_ERROR = 'LOAD_ERROR';
 export const TRANSITION_LOAD_SUCCEED = 'LOAD_SUCCEED';
 export const TRANSITION_ACKNOWLEDGE_ERROR = 'ACKNOWLEDGE_ERROR';
+export const TRANSITION_HAS_PENDING_REVIEW = 'PENDING_REVIEW';
+export const TRANSITION_NO_REVIEW = 'NO_REVIEW';
 
 export const RENAMED_DIFF_TRANSITIONS = {
   [`${STATE_IDLING}:${TRANSITION_LOAD_START}`]: STATE_LOADING,
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index ace507f601a..5e74a7206b3 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -119,10 +119,10 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   const getBatch = (page = startPage) =>
     axios
       .get(mergeUrlParams({ ...urlParams, page, per_page: perPage }, state.endpointBatch))
-      .then(({ data: { pagination, diff_files } }) => {
-        totalLoaded += diff_files.length;
+      .then(({ data: { pagination, diff_files: diffFiles } }) => {
+        totalLoaded += diffFiles.length;
 
-        commit(types.SET_DIFF_DATA_BATCH, { diff_files });
+        commit(types.SET_DIFF_DATA_BATCH, { diff_files: diffFiles });
         commit(types.SET_BATCH_LOADING_STATE, 'loaded');
 
         if (!scrolledVirtualScroller) {
@@ -138,7 +138,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         }
 
         if (!isNoteLink && !state.currentDiffFileId) {
-          commit(types.SET_CURRENT_DIFF_FILE, diff_files[0]?.file_hash);
+          commit(types.SET_CURRENT_DIFF_FILE, diffFiles[0]?.file_hash);
         }
 
         if (isNoteLink) {
@@ -293,8 +293,8 @@ export const assignDiscussionsToDiff = (
 };
 
 export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {
-  const { file_hash, line_code, id } = removeDiscussion;
-  commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash: file_hash, lineCode: line_code, id });
+  const { file_hash: fileHash, line_code: lineCode, id } = removeDiscussion;
+  commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash, lineCode, id });
 };
 
 export const toggleLineDiscussions = ({ commit }, options) => {