Add latest changes from gitlab-org/gitlab@master

6 files changed, 138 insertions, 6 deletions

diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index 61718b766d8..0cd093823bc 100644
--- a/app/assets/javascripts/batch_comments/components/drafts_count.vue
+++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue
@@ -6,13 +6,20 @@ export default {
   components: {
     GlBadge,
   },
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: 'info',
+    },
+  },
   computed: {
     ...mapGetters('batchComments', ['draftsCount']),
   },
 };
 </script>
 <template>
-  <gl-badge size="sm" variant="info" class="gl-ml-2">
+  <gl-badge size="sm" :variant="variant" class="gl-ml-2">
     {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
   </gl-badge>
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index e90c29e939f..f839056daf8 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import PreviewItem from './preview_item.vue';
+import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
@@ -9,7 +11,9 @@ export default {
     GlDropdownItem,
     GlIcon,
     PreviewItem,
+    DraftsCount,
   },
+  mixins: [glFeatureFlagMixin()],
   computed: {
     ...mapState('diffs', ['viewDiffsFileByFile']),
     ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']),
@@ -39,6 +43,7 @@ export default {
   >
     <template #button-content>
       {{ __('Pending comments') }}
+      <drafts-count v-if="glFeatures.mrReviewSubmitComment" variant="neutral" />
       <gl-icon class="dropdown-chevron" name="chevron-up" />
     </template>
     <gl-dropdown-item
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index bce13751448..3cd1a2525e9 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -1,14 +1,18 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
+import SubmitDropdown from './submit_dropdown.vue';
 
 export default {
   components: {
     PreviewDropdown,
     PublishButton,
+    SubmitDropdown,
   },
+  mixins: [glFeatureFlagMixin()],
   computed: {
     ...mapGetters(['isNotesFetched']),
   },
@@ -38,7 +42,8 @@ export default {
         data-qa-selector="review_bar_content"
       >
         <preview-dropdown />
-        <publish-button class="gl-ml-3" show-count />
+        <publish-button v-if="!glFeatures.mrReviewSubmitComment" class="gl-ml-3" show-count />
+        <submit-dropdown v-else />
       </div>
     </nav>
   </div>
diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
new file mode 100644
index 00000000000..5f4a1e44ea3
--- /dev/null
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -0,0 +1,115 @@
+<script>
+import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup } from '@gitlab/ui';
+import { mapGetters, mapActions } from 'vuex';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { scrollToElement } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    GlDropdown,
+    GlButton,
+    GlIcon,
+    GlForm,
+    GlFormGroup,
+    MarkdownField,
+  },
+  data() {
+    return {
+      isSubmitting: false,
+      note: '',
+    };
+  },
+  computed: {
+    ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']),
+  },
+  methods: {
+    ...mapActions('batchComments', ['publishReview']),
+    async submitReview() {
+      const noteData = {
+        noteable_type: this.noteableType,
+        noteable_id: this.getNoteableData.id,
+        note: this.note,
+      };
+
+      this.isSubmitting = true;
+
+      await this.publishReview(noteData);
+
+      if (window.mrTabs && this.note) {
+        window.location.hash = `note_${this.getCurrentUserLastNote.id}`;
+        window.mrTabs.tabShown('show');
+
+        setTimeout(() =>
+          scrollToElement(document.getElementById(`note_${this.getCurrentUserLastNote.id}`)),
+        );
+      }
+
+      this.isSubmitting = false;
+    },
+  },
+  restrictedToolbarItems: ['full-screen'],
+};
+</script>
+
+<template>
+  <gl-dropdown right class="submit-review-dropdown" variant="info" category="secondary">
+    <template #button-content>
+      {{ __('Finish review') }}
+      <gl-icon class="dropdown-chevron" name="chevron-up" />
+    </template>
+    <gl-form data-testid="submit-gl-form" @submit.prevent="submitReview">
+      <gl-form-group
+        :label="__('Summary comment (optional)')"
+        label-for="review-note-body"
+        label-class="gl-mb-2"
+      >
+        <div class="common-note-form gfm-form">
+          <div
+            class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100"
+          >
+            <markdown-field
+              :is-submitting="isSubmitting"
+              :add-spacing-classes="false"
+              :textarea-value="note"
+              :markdown-preview-path="getNoteableData.preview_note_path"
+              :markdown-docs-path="getNotesData.markdownDocsPath"
+              :quick-actions-docs-path="getNotesData.quickActionsDocsPath"
+              :restricted-tool-bar-items="$options.restrictedToolbarItems"
+              :force-autosize="false"
+              class="js-no-autosize"
+            >
+              <template #textarea>
+                <textarea
+                  id="review-note-body"
+                  ref="textarea"
+                  v-model="note"
+                  dir="auto"
+                  :disabled="isSubmitting"
+                  name="review[note]"
+                  class="note-textarea js-gfm-input markdown-area"
+                  data-supports-quick-actions="true"
+                  data-testid="comment-textarea"
+                  :aria-label="__('Comment')"
+                  :placeholder="__('Write a comment or drag your files here…')"
+                  @keydown.meta.enter="submitReview"
+                  @keydown.ctrl.enter="submitReview"
+                ></textarea>
+              </template>
+            </markdown-field>
+          </div>
+        </div>
+      </gl-form-group>
+      <div class="gl-display-flex gl-justify-content-end gl-mt-5">
+        <gl-button
+          :loading="isSubmitting"
+          variant="confirm"
+          type="submit"
+          class="js-no-auto-disable"
+          data-testid="submit-review-button"
+        >
+          {{ __('Submit review') }}
+        </gl-button>
+      </div>
+    </gl-form>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/batch_comments/services/drafts_service.js b/app/assets/javascripts/batch_comments/services/drafts_service.js
index 36d2f8df612..b52e573d55d 100644
--- a/app/assets/javascripts/batch_comments/services/drafts_service.js
+++ b/app/assets/javascripts/batch_comments/services/drafts_service.js
@@ -19,8 +19,8 @@ export default {
   fetchDrafts(endpoint) {
     return axios.get(endpoint);
   },
-  publish(endpoint) {
-    return axios.post(endpoint);
+  publish(endpoint, noteData) {
+    return axios.post(endpoint, noteData);
   },
   discard(endpoint) {
     return axios.delete(endpoint);
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 5e5191dc311..908cbfd6dc8 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -77,11 +77,11 @@ export const publishSingleDraft = ({ commit, dispatch, getters }, draftId) => {
     .catch(() => commit(types.RECEIVE_PUBLISH_DRAFT_ERROR, draftId));
 };
 
-export const publishReview = ({ commit, dispatch, getters }) => {
+export const publishReview = ({ commit, dispatch, getters }, noteData = {}) => {
   commit(types.REQUEST_PUBLISH_REVIEW);
 
   return service
-    .publish(getters.getNotesData.draftsPublishPath)
+    .publish(getters.getNotesData.draftsPublishPath, noteData)
     .then(() => dispatch('updateDiscussionsAfterPublish'))
     .then(() => commit(types.RECEIVE_PUBLISH_REVIEW_SUCCESS))
     .catch(() => commit(types.RECEIVE_PUBLISH_REVIEW_ERROR));