Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

11 files changed, 39 insertions, 29 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index f5c0776ca35..bc49464a560 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -11,7 +11,7 @@ import {
   MR_COMMITS_NEXT_COMMIT,
   MR_COMMITS_PREVIOUS_COMMIT,
 } from '~/behaviors/shortcuts/keybindings';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -471,8 +471,8 @@ export default {
     },
     fetchData(toggleTree = true) {
       this.fetchDiffFilesMeta()
-        .then(({ real_size }) => {
-          this.diffFilesLength = parseInt(real_size, 10);
+        .then(({ real_size = 0 }) => {
+          this.diffFilesLength = parseInt(real_size, 10) || 0;
           if (toggleTree) {
             this.setTreeDisplay();
           }
@@ -480,7 +480,7 @@ export default {
           this.updateChangesTabCount();
         })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: __('Something went wrong on our end. Please try again!'),
           });
         });
@@ -495,7 +495,7 @@ export default {
           this.setDiscussions();
         })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: __('Something went wrong on our end. Please try again!'),
           });
         });
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 0e5acd0928b..5a45797ed98 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -128,7 +128,7 @@ export default {
             :img-src="authorAvatar"
             :img-alt="authorName"
             :img-size="32"
-            class="avatar-cell d-none d-sm-block"
+            class="avatar-cell d-none d-sm-block gl-my-2 gl-mr-4"
           />
         </div>
         <div
@@ -172,7 +172,7 @@ export default {
         v-if="commit.description_html"
         v-safe-html:[$options.safeHtmlConfig]="commitDescription"
         :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
-        class="commit-row-description gl-mb-3 gl-text-body"
+        class="commit-row-description gl-mb-3 gl-text-body gl-white-space-pre-line"
       ></pre>
     </div>
   </li>
diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue
index b1a2b2a72ea..facfc553053 100644
--- a/app/assets/javascripts/diffs/components/commit_widget.vue
+++ b/app/assets/javascripts/diffs/components/commit_widget.vue
@@ -22,7 +22,7 @@ export default {
 <template>
   <div class="info-well mw-100 mx-0">
     <div class="well-segment">
-      <ul class="blob-commit-info">
+      <ul class="gl-list-style-none gl-m-0 gl-p-0">
         <commit-item :commit="commit" :collapsible="collapsible" />
       </ul>
     </div>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 8a5325cf218..6104a304fbd 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -80,7 +80,7 @@ export default {
 
 <template>
   <div class="mr-version-controls">
-    <div class="mr-version-menus-container content-block">
+    <div class="mr-version-menus-container gl-px-5 gl-pt-3 gl-pb-2">
       <gl-button
         v-if="hasChanges"
         v-gl-tooltip.hover
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index 3082ba0f16f..b2098b9e82d 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants';
 import * as utils from '../store/utils';
@@ -92,7 +92,7 @@ export default {
     ) {
       this.loadMoreLines({ endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: s__('Diffs|Something went wrong while fetching diff lines.'),
           });
         })
@@ -224,6 +224,7 @@ export default {
       <button
         v-if="showExpandDown"
         :title="s__('Diffs|Next 20 lines')"
+        :aria-label="s__('Diffs|Next 20 lines')"
         :disabled="loading.down"
         type="button"
         class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button"
@@ -235,6 +236,7 @@ export default {
       <button
         v-if="lineCountBetween !== -1 && lineCountBetween < 20"
         :title="s__('Diffs|Expand all lines')"
+        :aria-label="s__('Diffs|Expand all lines')"
         :disabled="loading.all"
         type="button"
         class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button"
@@ -246,6 +248,7 @@ export default {
       <button
         v-if="showExpandUp"
         :title="s__('Diffs|Previous 20 lines')"
+        :aria-label="s__('Diffs|Previous 20 lines')"
         :disabled="loading.up"
         type="button"
         class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index aec608007d5..422bf52a1fa 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -10,7 +10,7 @@ import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
 import { diffViewerErrors } from '~/ide/constants';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -309,7 +309,7 @@ export default {
         })
         .catch(() => {
           idState.isLoadingCollapsedDiff = false;
-          createFlash({
+          createAlert({
             message: this.$options.i18n.genericError,
           });
         });
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 705b43a222d..91c3df39e32 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -281,7 +281,7 @@ export default {
       'gl-z-dropdown-menu!': idState.moreActionsShown,
       'is-sidebar-moved': glFeatures.movedMrSidebar,
     }"
-    class="js-file-title file-title file-title-flex-parent"
+    class="js-file-title file-title file-title-flex-parent gl-border"
     data-qa-selector="file_title_container"
     :data-qa-file-name="filePath"
     @click.self="handleToggleFile"
diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js
index f610ac979ca..7732badde34 100644
--- a/app/assets/javascripts/diffs/components/diff_row_utils.js
+++ b/app/assets/javascripts/diffs/components/diff_row_utils.js
@@ -108,7 +108,7 @@ export const mapParallel = (content) => (line) => {
       ...left,
       renderDiscussion: hasExpandedDiscussionOnLeft,
       hasDraft: content.hasParallelDraftLeft(content.diffFile.file_hash, line),
-      lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'left'),
+      lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'left'),
       hasCommentForm: left.hasForm,
       isConflictMarker:
         line.left.type === CONFLICT_MARKER_OUR || line.left.type === CONFLICT_MARKER_THEIR,
@@ -123,7 +123,7 @@ export const mapParallel = (content) => (line) => {
         hasExpandedDiscussionOnRight && right.type && right.type !== EXPANDED_LINE_TYPE,
       ),
       hasDraft: content.hasParallelDraftRight(content.diffFile.file_hash, line),
-      lineDraft: content.draftForLine(content.diffFile.file_hash, line, 'right'),
+      lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'right'),
       hasCommentForm: Boolean(right.hasForm && right.type && right.type !== EXPANDED_LINE_TYPE),
       emptyCellClassMap: { conflict_their: line.left?.type === CONFLICT_OUR },
       addCommentTooltip: addCommentTooltip(line.right),
@@ -145,7 +145,7 @@ export const mapParallel = (content) => (line) => {
     lineCode: lineCode(line),
     isMetaLineLeft: isMetaLine(left?.type),
     isMetaLineRight: isMetaLine(right?.type),
-    draftRowClasses: left?.lineDraft > 0 || right?.lineDraft > 0 ? '' : 'js-temp-notes-holder',
+    draftRowClasses: left?.hasDraft || right?.hasDraft ? '' : 'js-temp-notes-holder',
     renderCommentRow,
     commentRowClasses: hasDiscussions(left) || hasDiscussions(right) ? '' : 'js-temp-notes-holder',
   };
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index 91bf3283379..5ea118afe78 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -177,6 +177,12 @@ export default {
     getCodeQualityLine(line) {
       return (line.left ?? line.right)?.codequality?.[0]?.line;
     },
+    lineDrafts(line, side) {
+      return (line[side]?.lineDrafts || []).filter((entry) => entry.isDraft);
+    },
+    lineHasDrafts(line, side) {
+      return this.lineDrafts(line, side).length > 0;
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -297,19 +303,19 @@ export default {
         class="diff-grid-drafts diff-tr notes_holder"
       >
         <div
-          v-if="!inline || (line.left && line.left.lineDraft.isDraft)"
+          v-if="!inline || lineHasDrafts(line, 'left')"
           class="diff-td notes-content parallel old"
         >
-          <div v-if="line.left && line.left.lineDraft.isDraft" class="content">
-            <draft-note :draft="line.left.lineDraft" :line="line.left" />
+          <div v-for="draft in lineDrafts(line, 'left')" :key="draft.id" class="content">
+            <draft-note :draft="draft" :line="line.left" />
           </div>
         </div>
         <div
-          v-if="!inline || (line.right && line.right.lineDraft.isDraft)"
+          v-if="!inline || lineHasDrafts(line, 'right')"
           class="diff-td notes-content parallel new"
         >
-          <div v-if="line.right && line.right.lineDraft.isDraft" class="content">
-            <draft-note :draft="line.right.lineDraft" :line="line.right" />
+          <div v-for="draft in lineDrafts(line, 'right')" :key="draft.id" class="content">
+            <draft-note :draft="draft" :line="line.right" />
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/diffs/mixins/draft_comments.js b/app/assets/javascripts/diffs/mixins/draft_comments.js
index 693b4a84694..d41bb160e96 100644
--- a/app/assets/javascripts/diffs/mixins/draft_comments.js
+++ b/app/assets/javascripts/diffs/mixins/draft_comments.js
@@ -5,7 +5,7 @@ export default {
     ...mapGetters('batchComments', [
       'shouldRenderDraftRow',
       'shouldRenderParallelDraftRow',
-      'draftForLine',
+      'draftsForLine',
       'draftsForFile',
       'hasParallelDraftLeft',
       'hasParallelDraftRight',
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 5e74a7206b3..5234be44b05 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -5,7 +5,7 @@ import {
   historyPushState,
   scrollToElement,
 } from '~/lib/utils/common_utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 
@@ -202,6 +202,7 @@ export const fetchDiffFilesMeta = ({ commit, state }) => {
   const worker = new TreeWorker();
   const urlParams = {
     view: 'inline',
+    w: state.showWhitespace ? '0' : '1',
   };
 
   commit(types.SET_LOADING, true);
@@ -246,7 +247,7 @@ export const fetchCoverageFiles = ({ commit, state }) => {
       }
     },
     errorCallback: () =>
-      createFlash({
+      createAlert({
         message: __('Something went wrong on our end. Please try again!'),
       }),
   });
@@ -509,7 +510,7 @@ export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => {
     .then(() => dispatch('updateResolvableDiscussionsCounts', null, { root: true }))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
     .catch(() =>
-      createFlash({
+      createAlert({
         message: s__('MergeRequests|Saving the comment failed'),
       }),
     );
@@ -619,7 +620,7 @@ export const cacheTreeListWidth = (_, size) => {
 
 export const receiveFullDiffError = ({ commit }, filePath) => {
   commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
-  createFlash({
+  createAlert({
     message: s__('MergeRequest|Error loading full diff. Please try again.'),
   });
 };
@@ -757,7 +758,7 @@ export const setSuggestPopoverDismissed = ({ commit, state }) =>
       commit(types.SET_SHOW_SUGGEST_POPOVER);
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: s__('MergeRequest|Error dismissing suggestion popover. Please try again.'),
       });
     });