Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

14 files changed, 126 insertions, 100 deletions

diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue
index 9638c20e28c..84bda1b0b5c 100644
--- a/app/assets/javascripts/notes/components/comment_field_layout.vue
+++ b/app/assets/javascripts/notes/components/comment_field_layout.vue
@@ -14,7 +14,7 @@ export default {
       type: Object,
       required: true,
     },
-    noteIsConfidential: {
+    isInternalNote: {
       type: Boolean,
       required: false,
       default: false,
@@ -44,7 +44,7 @@ export default {
       return this.noteableData.issue_email_participants?.map(({ email }) => email) || [];
     },
     showEmailParticipantsWarning() {
-      return this.emailParticipants.length && !this.noteIsConfidential;
+      return this.emailParticipants.length && !this.isInternalNote;
     },
   },
 };
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 8ef071034e5..e7ac27c5e3e 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -60,7 +60,7 @@ export default {
       note: '',
       noteType: constants.COMMENT,
       errors: [],
-      noteIsConfidential: false,
+      noteIsInternal: false,
       isSubmitting: false,
     };
   },
@@ -91,13 +91,13 @@ export default {
     },
     commentButtonTitle() {
       const { comment, internalComment, startThread, startInternalThread } = this.$options.i18n;
-      if (this.noteIsConfidential) {
+      if (this.noteIsInternal) {
         return this.noteType === constants.COMMENT ? internalComment : startInternalThread;
       }
       return this.noteType === constants.COMMENT ? comment : startThread;
     },
     textareaPlaceholder() {
-      return this.noteIsConfidential
+      return this.noteIsInternal
         ? this.$options.i18n.bodyPlaceholderInternal
         : this.$options.i18n.bodyPlaceholder;
     },
@@ -110,7 +110,7 @@ export default {
     canCreateNote() {
       return this.getNoteableData.current_user.can_create_note;
     },
-    canSetConfidential() {
+    canSetInternalNote() {
       return this.getNoteableData.current_user.can_update && (this.isIssue || this.isEpic);
     },
     issueActionButtonTitle() {
@@ -172,7 +172,7 @@ export default {
     trackingLabel() {
       return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
     },
-    confidentialNotesEnabled() {
+    internalNotesEnabled() {
       return Boolean(this.glFeatures.confidentialNotes);
     },
     disableSubmitButton() {
@@ -217,7 +217,11 @@ export default {
             note: {
               noteable_type: this.noteableType,
               noteable_id: this.getNoteableData.id,
-              confidential: this.noteIsConfidential,
+              // Internal notes were identified as `confidential`
+              // before we decided to treat them as _internal_
+              // so now until API is updated we need to use `confidential`
+              // in request payload.
+              confidential: this.noteIsInternal,
               note: this.note,
             },
             merge_request_diff_head_sha: this.getNoteableData.diff_head_sha,
@@ -292,7 +296,7 @@ export default {
 
       if (shouldClear) {
         this.note = '';
-        this.noteIsConfidential = false;
+        this.noteIsInternal = false;
         this.resizeTextarea();
         this.$refs.markdownField.previewMarkdown = false;
       }
@@ -356,7 +360,7 @@ export default {
             <comment-field-layout
               :with-alert-container="true"
               :noteable-data="getNoteableData"
-              :note-is-confidential="noteIsConfidential"
+              :is-internal-note="noteIsInternal"
               :noteable-type="noteableType"
             >
               <markdown-field
@@ -410,17 +414,17 @@ export default {
               </template>
               <template v-else>
                 <gl-form-checkbox
-                  v-if="confidentialNotesEnabled && canSetConfidential"
-                  v-model="noteIsConfidential"
-                  class="gl-mb-6"
-                  data-testid="confidential-note-checkbox"
+                  v-if="internalNotesEnabled && canSetInternalNote"
+                  v-model="noteIsInternal"
+                  class="gl-mb-2"
+                  data-testid="internal-note-checkbox"
                 >
-                  {{ $options.i18n.confidential }}
+                  {{ $options.i18n.internal }}
                   <gl-icon
                     v-gl-tooltip:tooltipcontainer.bottom
                     name="question"
                     :size="16"
-                    :title="$options.i18n.confidentialVisibility"
+                    :title="$options.i18n.internalVisibility"
                     class="gl-text-gray-500"
                   />
                 </gl-form-checkbox>
@@ -429,7 +433,7 @@ export default {
                   class="gl-mr-3"
                   :disabled="disableSubmitButton"
                   :tracking-label="trackingLabel"
-                  :is-internal-note="noteIsConfidential"
+                  :is-internal-note="noteIsInternal"
                   :noteable-display-name="noteableDisplayName"
                   :discussions-require-resolution="discussionsRequireResolution"
                   @click="handleSave"
diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index 5210d2ca287..0e213028c7c 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -97,14 +97,17 @@ export default {
 </script>
 
 <template>
-  <div class="discussion-header note-wrapper">
-    <div v-once class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-mr-4">
+  <div class="discussion-header gl-display-flex gl-align-items-center gl-p-5">
+    <div
+      v-once
+      class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-ml-3 gl-mr-4"
+    >
       <user-avatar-link
         v-if="author"
         :link-href="author.path"
         :img-src="author.avatar_url"
         :img-alt="author.name"
-        :img-size="32"
+        :img-size="24"
         :img-css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (https://gitlab.com/groups/gitlab-org/-/epics/7731) */"
       />
     </div>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index e2b0c7fee32..3bdf8349a12 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,8 +1,5 @@
 <script>
-import {
-  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
-  GlSafeHtmlDirective as SafeHtml,
-} from '@gitlab/ui';
+import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
@@ -16,7 +13,7 @@ const FIRST_CHAR_REGEX = /^(\+|-| )/;
 export default {
   components: {
     DiffFileHeader,
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     DiffViewer,
     ImageDiffOverlay,
   },
@@ -107,7 +104,7 @@ export default {
           <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
             {{ __('Unable to load the diff') }}
             <button
-              class="btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button"
+              class="gl-button btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button gl-reset-font-size!"
               @click="fetchDiff"
             >
               {{ __('Try again') }}
@@ -115,7 +112,7 @@ export default {
           </td>
           <td v-else class="line_content js-success-lazy-load">
             <span></span>
-            <gl-skeleton-loading />
+            <gl-skeleton-loader />
             <span></span>
           </td>
         </tr>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index f746f7ed0ed..eedcb0c09d4 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -75,25 +75,25 @@ export default {
         <gl-button-group class="gl-ml-3">
           <gl-button
             v-gl-tooltip.hover
-            :title="__('Jump to previous unresolved thread')"
-            :aria-label="__('Jump to previous unresolved thread')"
+            :title="__('Go to previous unresolved thread')"
+            :aria-label="__('Go to previous unresolved thread')"
             class="discussion-previous-btn gl-rounded-base! gl-px-2!"
             data-track-action="click_button"
             data-track-label="mr_previous_unresolved_thread"
             data-track-property="click_previous_unresolved_thread_top"
-            icon="angle-up"
+            icon="chevron-lg-up"
             category="tertiary"
             @click="jumpToPreviousDiscussion"
           />
           <gl-button
             v-gl-tooltip.hover
-            :title="__('Jump to next unresolved thread')"
-            :aria-label="__('Jump to next unresolved thread')"
+            :title="__('Go to next unresolved thread')"
+            :aria-label="__('Go to next unresolved thread')"
             class="discussion-next-btn gl-rounded-base! gl-px-2!"
             data-track-action="click_button"
             data-track-label="mr_next_unresolved_thread"
             data-track-property="click_next_unresolved_thread_top"
-            icon="angle-down"
+            icon="chevron-lg-down"
             category="tertiary"
             @click="jumpToNextDiscussion"
           />
diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue
index ecf42fce1d2..1875d48e7b2 100644
--- a/app/assets/javascripts/notes/components/email_participants_warning.vue
+++ b/app/assets/javascripts/notes/components/email_participants_warning.vue
@@ -58,7 +58,7 @@ export default {
   <div class="issuable-note-warning" data-testid="email-participants-warning">
     <gl-sprintf :message="message">
       <template #andMore>
-        <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants">
+        <button type="button" class="gl-button btn-link" @click="showMoreParticipants">
           {{ moreLabel }}
         </button>
       </template>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 1bd2f879e6c..10e3f57a56d 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -294,14 +294,20 @@ export default {
     />
     <emoji-picker
       v-if="canAwardEmoji"
-      toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!"
+      toggle-class="note-action-button note-emoji-button btn-icon btn-default-tertiary"
       data-testid="note-emoji-button"
       @click="setAwardEmoji"
     >
       <template #button-content>
-        <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" />
-        <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" />
-        <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" />
+        <gl-icon class="award-control-icon-neutral gl-button-icon gl-icon" name="slight-smile" />
+        <gl-icon
+          class="award-control-icon-positive gl-button-icon gl-icon gl-left-3!"
+          name="smiley"
+        />
+        <gl-icon
+          class="award-control-icon-super-positive gl-button-icon gl-icon gl-left-3!"
+          name="smile"
+        />
       </template>
     </emoji-picker>
     <reply-button
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 6c9bc4461c2..cc74c2ee605 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -8,6 +8,7 @@ import { __ } from '~/locale';
 import '~/behaviors/markdown/render_gfm';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import autosave from '../mixins/autosave';
+import { INTERNAL_NOTE_CLASSES } from '../constants';
 import noteAttachment from './note_attachment.vue';
 import noteAwardsList from './note_awards_list.vue';
 import noteEditedText from './note_edited_text.vue';
@@ -54,6 +55,11 @@ export default {
       required: false,
       default: '',
     },
+    isInternalNote: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters(['getDiscussion', 'suggestionsCount', 'getSuggestionsFilePaths']),
@@ -95,6 +101,12 @@ export default {
 
       return escape(suggestion);
     },
+    internalNoteContainerClasses() {
+      if (this.isInternalNote && !this.isEditing) {
+        return INTERNAL_NOTE_CLASSES;
+      }
+      return '';
+    },
   },
   mounted() {
     this.renderGFM();
@@ -160,53 +172,61 @@ export default {
 </script>
 
 <template>
-  <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
-    <suggestions
-      v-if="hasSuggestion && !isEditing"
-      :suggestions="note.suggestions"
-      :suggestions-count="suggestionsCount"
-      :batch-suggestions-info="batchSuggestionsInfo"
-      :note-html="note.note_html"
-      :line-type="lineType"
-      :help-page-path="helpPagePath"
-      :default-commit-message="commitMessage"
-      :failed-to-load-metadata="failedToLoadMetadata"
-      @apply="applySuggestion"
-      @applyBatch="applySuggestionBatch"
-      @addToBatch="addSuggestionToBatch"
-      @removeFromBatch="removeSuggestionFromBatch"
-    />
-    <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
-    <note-form
-      v-if="isEditing"
-      ref="noteForm"
-      :note-body="noteBody"
-      :note-id="note.id"
-      :line="line"
-      :note="note"
-      :save-button-title="saveButtonTitle"
-      :help-page-path="helpPagePath"
-      :discussion="discussion"
-      :resolve-discussion="note.resolve_discussion"
-      @handleFormUpdate="handleFormUpdate"
-      @cancelForm="formCancelHandler"
-    />
-    <!-- eslint-disable vue/no-mutating-props -->
-    <textarea
-      v-if="canEdit"
-      v-model="note.note"
-      :data-update-url="note.path"
-      class="hidden js-task-list-field"
-      dir="auto"
-    ></textarea>
-    <!-- eslint-enable vue/no-mutating-props -->
-    <note-edited-text
-      v-if="note.last_edited_at"
-      :edited-at="note.last_edited_at"
-      :edited-by="note.last_edited_by"
-      action-text="Edited"
-      class="note_edited_ago"
-    />
+  <div
+    ref="note-body"
+    :class="{
+      'js-task-list-container': canEdit,
+    }"
+    class="note-body"
+  >
+    <div :class="internalNoteContainerClasses" data-testid="note-internal-container">
+      <suggestions
+        v-if="hasSuggestion && !isEditing"
+        :suggestions="note.suggestions"
+        :suggestions-count="suggestionsCount"
+        :batch-suggestions-info="batchSuggestionsInfo"
+        :note-html="note.note_html"
+        :line-type="lineType"
+        :help-page-path="helpPagePath"
+        :default-commit-message="commitMessage"
+        :failed-to-load-metadata="failedToLoadMetadata"
+        @apply="applySuggestion"
+        @applyBatch="applySuggestionBatch"
+        @addToBatch="addSuggestionToBatch"
+        @removeFromBatch="removeSuggestionFromBatch"
+      />
+      <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
+      <note-form
+        v-if="isEditing"
+        ref="noteForm"
+        :note-body="noteBody"
+        :note-id="note.id"
+        :line="line"
+        :note="note"
+        :save-button-title="saveButtonTitle"
+        :help-page-path="helpPagePath"
+        :discussion="discussion"
+        :resolve-discussion="note.resolve_discussion"
+        @handleFormUpdate="handleFormUpdate"
+        @cancelForm="formCancelHandler"
+      />
+      <!-- eslint-disable vue/no-mutating-props -->
+      <textarea
+        v-if="canEdit"
+        v-model="note.note"
+        :data-update-url="note.path"
+        class="hidden js-task-list-field"
+        dir="auto"
+      ></textarea>
+      <!-- eslint-enable vue/no-mutating-props -->
+      <note-edited-text
+        v-if="note.last_edited_at"
+        :edited-at="note.last_edited_at"
+        :edited-by="note.last_edited_by"
+        action-text="Edited"
+        class="note_edited_ago"
+      />
+    </div>
     <note-awards-list
       v-if="note.award_emoji && note.award_emoji.length"
       :note-id="note.id"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 5dd032abd72..a4cd20e6db8 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -329,7 +329,7 @@ export default {
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
       <comment-field-layout
         :noteable-data="getNoteableData"
-        :note-is-confidential="discussion.confidential"
+        :is-internal-note="discussion.confidential"
       >
         <markdown-field
           :markdown-preview-path="markdownPreviewPath"
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 1ad9d593ccc..9917249f0db 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -67,7 +67,7 @@ export default {
       required: false,
       default: true,
     },
-    isConfidential: {
+    isInternalNote: {
       type: Boolean,
       required: false,
       default: false,
@@ -110,7 +110,7 @@ export default {
     authorName() {
       return this.author.name;
     },
-    noteConfidentialityTooltip() {
+    internalNoteTooltip() {
       return s__('Notes|This internal note will always remain confidential');
     },
   },
@@ -231,12 +231,13 @@ export default {
         <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
       </template>
       <gl-badge
-        v-if="isConfidential"
+        v-if="isInternalNote"
         v-gl-tooltip:tooltipcontainer.bottom
         data-testid="internalNoteIndicator"
         variant="warning"
         size="sm"
-        :title="noteConfidentialityTooltip"
+        class="gl-mb-3 gl-ml-2"
+        :title="internalNoteTooltip"
       >
         {{ __('Internal note') }}
       </gl-badge>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 0f5a517a4c5..c5d174ed890 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -108,7 +108,7 @@ export default {
       return this.discussion.notes.slice(0, 1)[0];
     },
     saveButtonTitle() {
-      return this.discussion.confidential ? __('Reply internally') : __('Comment');
+      return this.discussion.confidential ? __('Reply internally') : __('Reply');
     },
     shouldShowJumpToNextDiscussion() {
       return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion');
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index cda22b58c5b..af0c1e9619e 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -447,7 +447,7 @@ export default {
           :author="author"
           :created-at="note.created_at"
           :note-id="note.id"
-          :is-confidential="note.confidential"
+          :is-internal-note="note.confidential"
           :noteable-type="noteableType"
         >
           <template #note-header-info>
@@ -493,9 +493,10 @@ export default {
         <note-body
           ref="noteBody"
           :note="note"
+          :can-edit="note.current_user.can_edit"
+          :is-internal-note="note.confidential"
           :line="line"
           :file="diffFile"
-          :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
           :help-page-path="helpPagePath"
           @handleFormUpdate="formUpdateHandler"
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 7d8d23335e0..754c2917182 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -3,7 +3,6 @@ import { mapGetters, mapActions } from 'vuex';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import initUserPopovers from '~/user_popovers';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -169,7 +168,6 @@ export default {
   updated() {
     this.$nextTick(() => {
       highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'));
-      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
     });
   },
   beforeDestroy() {
@@ -212,10 +210,6 @@ export default {
 
       this.setFetchingState(true);
 
-      if (this.glFeatures.paginatedNotes) {
-        return this.initPolling();
-      }
-
       return this.fetchDiscussions(this.getFetchDiscussionsConfig())
         .then(this.initPolling)
         .then(() => {
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 65b3fd6f8b3..8cd4477a3bb 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -72,7 +72,7 @@ export default {
         {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
       </gl-button>
       {{ __('Last reply by') }}
-      <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2">
+      <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button">
         {{ lastReply.author.name }}
       </a>
       <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />