Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

3 files changed, 60 insertions, 13 deletions

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 300a81caa5c..e5408d0734a 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -116,11 +116,7 @@ export default {
         class="referenced-commands draft-note-commands"
       ></div>
 
-      <p
-        v-if="!glFeatures.mrReviewSubmitComment"
-        class="draft-note-actions d-flex"
-        data-qa-selector="draft_note_content"
-      >
+      <p v-if="!glFeatures.mrReviewSubmitComment" class="draft-note-actions d-flex">
         <publish-button
           :show-count="true"
           :should-publish="false"
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 3cd1a2525e9..111b670596b 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -2,10 +2,20 @@
 import { mapActions, mapGetters } from 'vuex';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
+import { PREVENT_LEAVING_PENDING_REVIEW } from '../i18n';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
 import SubmitDropdown from './submit_dropdown.vue';
 
+function closeInterrupt(event) {
+  event.preventDefault();
+
+  // This is the correct way to write backwards-compatible beforeunload listeners
+  // https://developer.chrome.com/blog/page-lifecycle-api/#the-beforeunload-event
+  /* eslint-disable-next-line no-return-assign, no-param-reassign */
+  return (event.returnValue = PREVENT_LEAVING_PENDING_REVIEW);
+}
+
 export default {
   components: {
     PreviewDropdown,
@@ -25,8 +35,26 @@ export default {
   },
   mounted() {
     document.body.classList.add(REVIEW_BAR_VISIBLE_CLASS_NAME);
+    /*
+     * This stuff is a lot trickier than it looks.
+     *
+     * Mandatory reading: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+     * Some notable sentences:
+     *     - "[...] browsers may not display prompts created in beforeunload event handlers unless the
+     *         page has been interacted with, or may even not display them at all."
+     *     - "Especially on mobile, the beforeunload event is not reliably fired."
+     *     - "The beforeunload event is not compatible with the back/forward cache (bfcache) [...]
+     *         It is recommended that developers listen for beforeunload only in this scenario, and only
+     *         when they actually have unsaved changes, so as to minimize the effect on performance."
+     *
+     * Please ensure that this is really not working before you modify it, because there are a LOT
+     * of scenarios where browser behavior will make it _seem_ like it's not working, but it actually
+     * is under the right combination of contexts.
+     */
+    window.addEventListener('beforeunload', closeInterrupt, { capture: true });
   },
   beforeDestroy() {
+    window.removeEventListener('beforeunload', closeInterrupt, { capture: true });
     document.body.classList.remove(REVIEW_BAR_VISIBLE_CLASS_NAME);
   },
   methods: {
diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index b070848cae9..54b9953270b 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -1,8 +1,11 @@
 <script>
-import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup } from '@gitlab/ui';
+import $ from 'jquery';
+import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup, GlLink } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
+import Autosave from '~/autosave';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   components: {
@@ -11,6 +14,7 @@ export default {
     GlIcon,
     GlForm,
     GlFormGroup,
+    GlLink,
     MarkdownField,
   },
   data() {
@@ -23,6 +27,11 @@ export default {
     ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']),
   },
   mounted() {
+    this.autosave = new Autosave(
+      $(this.$refs.textarea),
+      `submit_review_dropdown/${this.getNoteableData.id}`,
+    );
+
     // We override the Bootstrap Vue click outside behaviour
     // to allow for clicking in the autocomplete dropdowns
     // without this override the submit dropdown will close
@@ -47,6 +56,8 @@ export default {
 
       await this.publishReview(noteData);
 
+      this.autosave.reset();
+
       if (window.mrTabs && this.note) {
         window.location.hash = `note_${this.getCurrentUserLastNote.id}`;
         window.mrTabs.tabShown('show');
@@ -60,6 +71,9 @@ export default {
     },
   },
   restrictedToolbarItems: ['full-screen'],
+  helpPagePath: helpPagePath('user/project/merge_requests/reviews/index.html', {
+    anchor: 'submit-a-review',
+  }),
 };
 </script>
 
@@ -68,19 +82,27 @@ export default {
     ref="dropdown"
     right
     class="submit-review-dropdown"
+    data-qa-selector="submit_review_dropdown"
     variant="info"
-    category="secondary"
+    category="primary"
   >
     <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"
-      >
+      <gl-form-group label-for="review-note-body" label-class="gl-mb-2">
+        <template #label>
+          {{ __('Summary comment (optional)') }}
+          <gl-link
+            :href="$options.helpPagePath"
+            :aria-label="__('More information')"
+            target="_blank"
+            class="gl-ml-2"
+          >
+            <gl-icon name="question-o" />
+          </gl-link>
+        </template>
         <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"
@@ -117,13 +139,14 @@ export default {
           </div>
         </div>
       </gl-form-group>
-      <div class="gl-display-flex gl-justify-content-end gl-mt-5">
+      <div class="gl-display-flex gl-justify-content-start gl-mt-5">
         <gl-button
           :loading="isSubmitting"
           variant="confirm"
           type="submit"
           class="js-no-auto-disable"
           data-testid="submit-review-button"
+          data-qa-selector="submit_review_button"
         >
           {{ __('Submit review') }}
         </gl-button>