Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

10 files changed, 145 insertions, 85 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 2ebebd76e1e..4e31fdcd4f0 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -1,14 +1,5 @@
 <script>
-import {
-  GlAlert,
-  GlButton,
-  GlIcon,
-  GlFormCheckbox,
-  GlTooltipDirective,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-} from '@gitlab/ui';
+import { GlAlert, GlButton, GlIcon, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui';
 import Autosize from 'autosize';
 import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
@@ -34,6 +25,7 @@ import { COMMENT_FORM } from '../i18n';
 
 import issuableStateMixin from '../mixins/issuable_state';
 import CommentFieldLayout from './comment_field_layout.vue';
+import CommentTypeDropdown from './comment_type_dropdown.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 
@@ -42,8 +34,6 @@ const { UNPROCESSABLE_ENTITY } = httpStatusCodes;
 export default {
   name: 'CommentForm',
   i18n: COMMENT_FORM,
-  noteTypeComment: constants.COMMENT,
-  noteTypeDiscussion: constants.DISCUSSION,
   components: {
     noteSignedOutWidget,
     discussionLockedWidget,
@@ -53,10 +43,8 @@ export default {
     TimelineEntryItem,
     GlIcon,
     CommentFieldLayout,
+    CommentTypeDropdown,
     GlFormCheckbox,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -88,12 +76,6 @@ export default {
       'hasDrafts',
     ]),
     ...mapState(['isToggleStateButtonLoading']),
-    isNoteTypeComment() {
-      return this.noteType === constants.COMMENT;
-    },
-    isNoteTypeDiscussion() {
-      return this.noteType === constants.DISCUSSION;
-    },
     noteableDisplayName() {
       return splitCamelCase(this.noteableType).toLowerCase();
     },
@@ -105,15 +87,8 @@ export default {
         ? this.$options.i18n.comment
         : this.$options.i18n.startThread;
     },
-    startDiscussionDescription() {
-      return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
-        ? this.$options.i18n.discussionThatNeedsResolution
-        : this.$options.i18n.discussion;
-    },
-    commentDescription() {
-      return sprintf(this.$options.i18n.submitButton.commentHelp, {
-        noteableDisplayName: this.noteableDisplayName,
-      });
+    discussionsRequireResolution() {
+      return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE;
     },
     isOpen() {
       return this.openState === constants.OPENED || this.openState === constants.REOPENED;
@@ -314,15 +289,6 @@ export default {
 
       this.autosave.reset();
     },
-    setNoteType(type) {
-      this.noteType = type;
-    },
-    setNoteTypeToComment() {
-      this.setNoteType(constants.COMMENT);
-    },
-    setNoteTypeToDiscussion() {
-      this.setNoteType(constants.DISCUSSION);
-    },
     editCurrentUserLastNote() {
       if (this.note === '') {
         const lastNote = this.getCurrentUserLastNote;
@@ -448,40 +414,15 @@ export default {
                     class="gl-text-gray-500"
                   />
                 </gl-form-checkbox>
-                <gl-dropdown
-                  split
-                  :text="commentButtonTitle"
-                  class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown"
-                  category="primary"
-                  variant="confirm"
+                <comment-type-dropdown
+                  v-model="noteType"
+                  class="gl-mr-3"
                   :disabled="disableSubmitButton"
-                  data-testid="comment-button"
-                  data-qa-selector="comment_button"
-                  :data-track-label="trackingLabel"
-                  data-track-event="click_button"
-                  @click="handleSave()"
-                >
-                  <gl-dropdown-item
-                    is-check-item
-                    :is-checked="isNoteTypeComment"
-                    :selected="isNoteTypeComment"
-                    @click="setNoteTypeToComment"
-                  >
-                    <strong>{{ $options.i18n.submitButton.comment }}</strong>
-                    <p class="gl-m-0">{{ commentDescription }}</p>
-                  </gl-dropdown-item>
-                  <gl-dropdown-divider />
-                  <gl-dropdown-item
-                    is-check-item
-                    :is-checked="isNoteTypeDiscussion"
-                    :selected="isNoteTypeDiscussion"
-                    data-qa-selector="discussion_menu_item"
-                    @click="setNoteTypeToDiscussion"
-                  >
-                    <strong>{{ $options.i18n.submitButton.startThread }}</strong>
-                    <p class="gl-m-0">{{ startDiscussionDescription }}</p>
-                  </gl-dropdown-item>
-                </gl-dropdown>
+                  :tracking-label="trackingLabel"
+                  :noteable-display-name="noteableDisplayName"
+                  :discussions-require-resolution="discussionsRequireResolution"
+                  @click="handleSave"
+                />
               </template>
               <gl-button
                 v-if="canToggleIssueState"
diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
new file mode 100644
index 00000000000..663a912999d
--- /dev/null
+++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+
+import { sprintf } from '~/locale';
+import { COMMENT_FORM } from '~/notes/i18n';
+import * as constants from '../constants';
+
+export default {
+  i18n: COMMENT_FORM,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  model: {
+    prop: 'noteType',
+    event: 'change',
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trackingLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    discussionsRequireResolution: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    noteableDisplayName: {
+      type: String,
+      required: true,
+    },
+    noteType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isNoteTypeComment() {
+      return this.noteType === constants.COMMENT;
+    },
+    isNoteTypeDiscussion() {
+      return this.noteType === constants.DISCUSSION;
+    },
+    commentButtonTitle() {
+      return this.noteType === constants.COMMENT
+        ? this.$options.i18n.comment
+        : this.$options.i18n.startThread;
+    },
+    startDiscussionDescription() {
+      return this.discussionsRequireResolution
+        ? this.$options.i18n.discussionThatNeedsResolution
+        : this.$options.i18n.discussion;
+    },
+    commentDescription() {
+      return sprintf(this.$options.i18n.submitButton.commentHelp, {
+        noteableDisplayName: this.noteableDisplayName,
+      });
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+    setNoteTypeToComment() {
+      if (this.noteType !== constants.COMMENT) {
+        this.$emit('change', constants.COMMENT);
+      }
+    },
+    setNoteTypeToDiscussion() {
+      if (this.noteType !== constants.DISCUSSION) {
+        this.$emit('change', constants.DISCUSSION);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    split
+    :text="commentButtonTitle"
+    class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown"
+    category="primary"
+    variant="confirm"
+    :disabled="disabled"
+    data-testid="comment-button"
+    data-qa-selector="comment_button"
+    :data-track-label="trackingLabel"
+    data-track-action="click_button"
+    @click="$emit('click')"
+  >
+    <gl-dropdown-item is-check-item :is-checked="isNoteTypeComment" @click="setNoteTypeToComment">
+      <strong>{{ $options.i18n.submitButton.comment }}</strong>
+      <p class="gl-m-0">{{ commentDescription }}</p>
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+    <gl-dropdown-item
+      is-check-item
+      :is-checked="isNoteTypeDiscussion"
+      data-qa-selector="discussion_menu_item"
+      @click="setNoteTypeToDiscussion"
+    >
+      <strong>{{ $options.i18n.submitButton.startThread }}</strong>
+      <p class="gl-m-0">{{ startDiscussionDescription }}</p>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index e96e1204f76..b04aa74d46e 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
@@ -93,7 +92,11 @@ export default {
           >
             <td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
             <td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
-            <td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td>
+            <td
+              :class="line.type"
+              class="line_content"
+              v-html="trimChar(line.rich_text) /* eslint-disable-line vue/no-v-html */"
+            ></td>
           </tr>
         </template>
         <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 55cf75132a9..831e6dd8f92 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -78,8 +78,8 @@ export default {
         v-if="resolveAllDiscussionsIssuePath && !allResolved"
         v-gl-tooltip
         :href="resolveAllDiscussionsIssuePath"
-        :title="s__('Resolve all threads in new issue')"
-        :aria-label="s__('Resolve all threads in new issue')"
+        :title="s__('Create issue to resolve all threads')"
+        :aria-label="s__('Create issue to resolve all threads')"
         class="new-issue-for-discussion discussion-create-issue-btn"
         icon="issue-new"
       />
@@ -89,7 +89,7 @@ export default {
         :title="__('Jump to next unresolved thread')"
         :aria-label="__('Jump to next unresolved thread')"
         class="discussion-next-btn"
-        data-track-event="click_button"
+        data-track-action="click_button"
         data-track-label="mr_next_unresolved_thread"
         data-track-property="click_next_unresolved_thread_top"
         icon="comment-next"
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index 9119d319d72..4ccba011014 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -4,7 +4,7 @@ import { s__ } from '~/locale';
 
 export default {
   i18n: {
-    buttonLabel: s__('MergeRequests|Resolve this thread in a new issue'),
+    buttonLabel: s__('MergeRequests|Create issue to resolve thread'),
   },
   name: 'ResolveWithIssueButton',
   components: {
diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
index 0cd2afcf8a0..8c8cc7984b1 100644
--- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue
+++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
@@ -19,7 +19,7 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip
-    data-track-event="click_button"
+    data-track-action="click_button"
     data-track-label="reply_comment_button"
     category="tertiary"
     icon="comment"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 9864e91c009..93f71276120 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
@@ -163,7 +162,11 @@ export default {
       @addToBatch="addSuggestionToBatch"
       @removeFromBatch="removeSuggestionFromBatch"
     />
-    <div v-else class="note-text md" v-html="note.note_html"></div>
+    <div
+      v-else
+      class="note-text md"
+      v-html="note.note_html /* eslint-disable-line vue/no-v-html */"
+    ></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index f2336e1b6f5..a4f06a8d9f5 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
@@ -322,7 +321,7 @@ export default {
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger"
-      v-html="changedCommentText"
+      v-html="changedCommentText /* eslint-disable-line vue/no-v-html */"
     ></div>
     <div class="flash-container timeline-content"></div>
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 1a4a6c137a6..4e686ce8719 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -169,7 +168,7 @@ export default {
         v-on="
           authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
         "
-        v-html="authorStatus"
+        v-html="authorStatus /* eslint-disable-line vue/no-v-html */"
       ></span>
       <span class="text-nowrap author-username">
         <a
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 6a4a3263e4a..656591e0c32 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,3 +1,4 @@
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import $ from 'jquery';
 import Visibility from 'visibilityjs';
 import Vue from 'vue';