Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

5 files changed, 73 insertions, 14 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
index 10887aee689..90ac20fe748 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -34,6 +34,7 @@ export default {
     boundary="window"
     right
     menu-class="gl-w-full!"
+    data-qa-selector="apply_suggestion_button"
     @shown="$refs.commitMessage.$el.focus()"
   >
     <gl-dropdown-form class="gl-px-4! gl-m-0!">
@@ -44,12 +45,14 @@ export default {
         v-model="message"
         :placeholder="defaultCommitMessage"
         submit-on-enter
+        data-qa-selector="commit_message_textbox"
         @submit="onApply"
       />
       <gl-button
         class="gl-w-auto! gl-mt-3 gl-text-center! gl-hover-text-white! gl-transition-medium! float-right"
         category="primary"
         variant="success"
+        data-qa-selector="commit_with_custom_message_button"
         @click="onApply"
       >
         {{ __('Apply') }}
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 25d01dc550f..80b7a9b7d05 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -62,6 +62,11 @@ export default {
       required: false,
       default: true,
     },
+    uploadsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     enableAutocomplete: {
       type: Boolean,
       required: false,
@@ -72,6 +77,11 @@ export default {
       required: false,
       default: null,
     },
+    lines: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     note: {
       type: Object,
       required: false,
@@ -110,6 +120,20 @@ export default {
       return this.referencedUsers.length >= referencedUsersThreshold;
     },
     lineContent() {
+      if (this.lines.length) {
+        return this.lines
+          .map((line) => {
+            const { rich_text: richText, text } = line;
+
+            if (text) {
+              return text;
+            }
+
+            return unescape(stripHtml(richText).replace(/\n/g, ''));
+          })
+          .join('\\n');
+      }
+
       if (this.line) {
         const { rich_text: richText, text } = this.line;
 
@@ -144,6 +168,9 @@ export default {
         false,
       );
     },
+    suggestionsStartIndex() {
+      return Math.max(this.lines.length - 1, 0);
+    },
   },
   watch: {
     isSubmitting(isSubmitting) {
@@ -229,12 +256,14 @@ export default {
     ref="gl-form"
     :class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }"
     class="js-vue-markdown-field md-area position-relative gfm-form"
+    :data-uploads-path="uploadsPath"
   >
     <markdown-header
       :preview-markdown="previewMarkdown"
       :line-content="lineContent"
       :can-suggest="canSuggest"
       :show-suggest-popover="showSuggestPopover"
+      :suggestion-start-index="suggestionsStartIndex"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bc1786d692..01cf0beea3a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
+import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm';
@@ -36,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    suggestionStartIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -53,7 +59,9 @@ export default {
       ].join('\n');
     },
     mdSuggestion() {
-      return ['```suggestion:-0+0', `{text}`, '```'].join('\n');
+      return [['```', `suggestion:-${this.suggestionStartIndex}+0`].join(''), `{text}`, '```'].join(
+        '\n',
+      );
     },
     isMac() {
       // Accessing properties using ?. to allow tests to use
@@ -116,6 +124,11 @@ export default {
         .catch(() => {});
     },
   },
+  shortcuts: {
+    bold: keysFor(BOLD_TEXT),
+    italic: keysFor(ITALIC_TEXT),
+    link: keysFor(LINK_TEXT),
+  },
 };
 </script>
 
@@ -143,7 +156,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
             "
-            shortcuts="mod+b"
+            :shortcuts="$options.shortcuts.bold"
             icon="bold"
           />
           <toolbar-button
@@ -151,7 +164,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
             "
-            shortcuts="mod+i"
+            :shortcuts="$options.shortcuts.italic"
             icon="italic"
           />
           <toolbar-button
@@ -208,7 +221,7 @@ export default {
             :button-title="
               sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
             "
-            shortcuts="mod+k"
+            :shortcuts="$options.shortcuts.link"
             icon="link"
           />
         </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 7c28e74e256..83b8a6ae562 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -1,13 +1,11 @@
 <script>
 import { GlButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ApplySuggestion from './apply_suggestion.vue';
 
 export default {
   components: { GlIcon, GlButton, GlLoadingIcon, ApplySuggestion },
   directives: { 'gl-tooltip': GlTooltipDirective },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     batchSuggestionsCount: {
       type: Number,
@@ -59,9 +57,6 @@ export default {
     };
   },
   computed: {
-    canBeBatched() {
-      return Boolean(this.glFeatures.batchSuggestions);
-    },
     isApplying() {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
@@ -118,7 +113,7 @@ export default {
       <gl-loading-icon class="d-flex-center mr-2" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
-    <div v-else-if="canApply && canBeBatched && isBatched" class="d-flex align-items-center">
+    <div v-else-if="canApply && isBatched" class="d-flex align-items-center">
       <gl-button
         class="btn-inverted js-remove-from-batch-btn btn-grouped"
         :disabled="isApplying"
@@ -142,7 +137,7 @@ export default {
     </div>
     <div v-else class="d-flex align-items-center">
       <gl-button
-        v-if="suggestionsCount > 1 && canBeBatched && !isDisableButton"
+        v-if="suggestionsCount > 1 && !isDisableButton"
         class="btn-inverted js-add-to-batch-btn btn-grouped"
         data-qa-selector="add_suggestion_batch_button"
         :disabled="isDisableButton"
@@ -152,6 +147,7 @@ export default {
       </gl-button>
       <apply-suggestion
         v-if="isLoggedIn"
+        v-gl-tooltip.viewport="tooltipMessage"
         :disabled="isDisableButton"
         :default-commit-message="defaultCommitMessage"
         class="gl-ml-3"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 387b100a04f..7393a8791b7 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,13 +1,18 @@
 <script>
 import { GlButton, GlLink, GlLoadingIcon, GlSprintf, GlIcon } from '@gitlab/ui';
+import { isExperimentVariant } from '~/experimentation/utils';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import { INVITE_MEMBERS_IN_COMMENT } from '~/invite_members/constants';
 
 export default {
+  inviteMembersInComment: INVITE_MEMBERS_IN_COMMENT,
   components: {
     GlButton,
     GlLink,
     GlLoadingIcon,
     GlSprintf,
     GlIcon,
+    InviteMembersTrigger,
   },
   props: {
     markdownDocsPath: {
@@ -29,6 +34,9 @@ export default {
     hasQuickActionsDocsPath() {
       return this.quickActionsDocsPath !== '';
     },
+    inviteCommentEnabled() {
+      return isExperimentVariant(INVITE_MEMBERS_IN_COMMENT, 'invite_member_link');
+    },
   },
 };
 </script>
@@ -37,9 +45,9 @@ export default {
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank">{{
-          __('Markdown is supported')
-        }}</gl-link>
+        <gl-link :href="markdownDocsPath" target="_blank">
+          {{ __('Markdown is supported') }}
+        </gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
         <gl-sprintf
@@ -59,6 +67,16 @@ export default {
       </template>
     </div>
     <span v-if="canAttachFile" class="uploading-container">
+      <invite-members-trigger
+        v-if="inviteCommentEnabled"
+        classes="gl-mr-3 gl-vertical-align-text-bottom"
+        :display-text="s__('InviteMember|Invite Member')"
+        icon="assignee"
+        variant="link"
+        :track-experiment="$options.inviteMembersInComment"
+        :trigger-source="$options.inviteMembersInComment"
+        data-track-event="comment_invite_click"
+      />
       <span class="uploading-progress-container hide">
         <gl-icon name="media" />
         <span class="attaching-file-message"></span>