Add latest changes from gitlab-org/gitlab@master

5 files changed, 73 insertions, 39 deletions

diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index f949142d90a..c53d3203327 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -5,6 +5,7 @@ import { mapActions } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, __, sprintf } from '~/locale';
+import { FILE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 import NoteEditedText from './note_edited_text.vue';
 import NoteHeader from './note_header.vue';
 
@@ -62,6 +63,7 @@ export default {
         for_commit: isForCommit,
         diff_discussion: isDiffDiscussion,
         active: isActive,
+        position,
       } = this.discussion;
 
       let text = s__('MergeRequests|started a thread');
@@ -75,6 +77,10 @@ export default {
           : s__(
               'MergeRequests|started a thread on an outdated change in commit %{linkStart}%{commitDisplay}%{linkEnd}',
             );
+      } else if (isDiffDiscussion && position?.position_type === FILE_DIFF_POSITION_TYPE) {
+        text = isActive
+          ? s__('MergeRequests|started a thread on %{linkStart}a file%{linkEnd}')
+          : s__('MergeRequests|started a thread on %{linkStart}an old version of a file%{linkEnd}');
       } else if (isDiffDiscussion) {
         text = isActive
           ? s__('MergeRequests|started a thread on %{linkStart}the diff%{linkEnd}')
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index aabdc1c99b6..3c12ca70c2a 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -8,6 +8,7 @@ import { getDiffMode } from '~/diffs/store/utils';
 import { diffViewerModes } from '~/ide/constants';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import { isCollapsed } from '~/diffs/utils/diff_file';
+import { FILE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 
 const FIRST_CHAR_REGEX = /^(\+|-| )/;
 
@@ -53,6 +54,12 @@ export default {
     isCollapsed() {
       return isCollapsed(this.discussion.diff_file);
     },
+    positionType() {
+      return this.discussion.position?.position_type;
+    },
+    isFileDiscussion() {
+      return this.positionType === FILE_DIFF_POSITION_TYPE;
+    },
   },
   mounted() {
     if (this.isTextFile && !this.hasTruncatedDiffLines) {
@@ -87,43 +94,52 @@ export default {
     />
     <div v-if="isTextFile" class="diff-content">
       <table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
-        <template v-if="hasTruncatedDiffLines">
-          <tr
-            v-for="line in discussion.truncated_diff_lines"
-            v-once
-            :key="line.line_code"
-            class="line_holder"
-          >
-            <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 v-safe-html="trimChar(line.rich_text)" :class="line.type" class="line_content"></td>
+        <template v-if="!isFileDiscussion">
+          <template v-if="hasTruncatedDiffLines">
+            <tr
+              v-for="line in discussion.truncated_diff_lines"
+              v-once
+              :key="line.line_code"
+              class="line_holder"
+            >
+              <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
+                v-safe-html="trimChar(line.rich_text)"
+                :class="line.type"
+                class="line_content"
+              ></td>
+            </tr>
+          </template>
+          <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
+            <td class="old_line diff-line-num"></td>
+            <td class="new_line diff-line-num"></td>
+            <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
+              {{ __('Unable to load the diff') }}
+              <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') }}
+              </button>
+            </td>
+            <td v-else class="line_content js-success-lazy-load">
+              <span></span>
+              <gl-skeleton-loader />
+              <span></span>
+            </td>
           </tr>
         </template>
-        <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
-          <td class="old_line diff-line-num"></td>
-          <td class="new_line diff-line-num"></td>
-          <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
-            {{ __('Unable to load the diff') }}
-            <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') }}
-            </button>
-          </td>
-          <td v-else class="line_content js-success-lazy-load">
-            <span></span>
-            <gl-skeleton-loader />
-            <span></span>
-          </td>
-        </tr>
         <tr class="notes_holder">
-          <td class="notes-content" colspan="3"><slot></slot></td>
+          <td :class="{ 'gl-border-top-0!': isFileDiscussion }" class="notes-content" colspan="3">
+            <slot></slot>
+          </td>
         </tr>
       </table>
     </div>
-    <div v-else>
+    <div v-else class="diff-content">
       <diff-viewer
+        v-if="!isFileDiscussion"
         :diff-file="discussion.diff_file"
         :diff-mode="diffMode"
         :diff-viewer-mode="diffViewerMode"
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index a3034e550ed..9fb027fb955 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -4,6 +4,7 @@ import { __ } from '~/locale';
 import PlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
 import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
 import SystemNote from '~/vue_shared/components/notes/system_note.vue';
+import { FILE_DIFF_POSITION_TYPE } from '~/diffs/constants';
 import { SYSTEM_NOTE } from '../constants';
 import DiscussionNotesRepliesWrapper from './discussion_notes_replies_wrapper.vue';
 import NoteEditedText from './note_edited_text.vue';
@@ -85,6 +86,9 @@ export default {
     isDiscussionInternal() {
       return this.discussion.notes[0]?.internal;
     },
+    isFileDiscussion() {
+      return this.discussion.position?.position_type === FILE_DIFF_POSITION_TYPE;
+    },
   },
   methods: {
     ...mapActions(['toggleDiscussion', 'setSelectedCommentPositionHover']),
@@ -143,6 +147,7 @@ export default {
           :is-overview-tab="isOverviewTab"
           :should-scroll-to-note="shouldScrollToNote"
           :internal-note="isDiscussionInternal"
+          :class="{ 'gl-border-top-0!': isFileDiscussion }"
           @handleDeleteNote="$emit('deleteNote')"
           @startReplying="$emit('startReplying')"
         >
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 2feca0bd7a5..b80262622eb 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -170,6 +170,7 @@ export default {
       return {
         'is-replying gl-pt-0!': this.isReplying,
         'internal-note': this.isDiscussionInternal,
+        'gl-pt-0!': !this.discussion.diff_discussion && this.isReplying,
       };
     },
   },
diff --git a/app/assets/javascripts/notes/mixins/diff_line_note_form.js b/app/assets/javascripts/notes/mixins/diff_line_note_form.js
index 20ffcda282a..1ea78f18aca 100644
--- a/app/assets/javascripts/notes/mixins/diff_line_note_form.js
+++ b/app/assets/javascripts/notes/mixins/diff_line_note_form.js
@@ -1,6 +1,10 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { getDraftReplyFormData, getDraftFormData } from '~/batch_comments/utils';
-import { TEXT_DIFF_POSITION_TYPE, IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
+import {
+  TEXT_DIFF_POSITION_TYPE,
+  IMAGE_DIFF_POSITION_TYPE,
+  FILE_DIFF_POSITION_TYPE,
+} from '~/diffs/constants';
 import { createAlert } from '~/alert';
 import { clearDraft } from '~/lib/utils/autosave';
 import { s__ } from '~/locale';
@@ -18,7 +22,7 @@ export default {
     ...mapState('diffs', ['commit', 'showWhitespace']),
   },
   methods: {
-    ...mapActions('diffs', ['cancelCommentForm']),
+    ...mapActions('diffs', ['cancelCommentForm', 'toggleFileCommentForm']),
     ...mapActions('batchComments', ['addDraftToReview', 'saveDraft', 'insertDraftIntoDrafts']),
     addReplyToReview(noteText, isResolving) {
       const postData = getDraftReplyFormData({
@@ -47,13 +51,13 @@ export default {
           });
         });
     },
-    addToReview(note) {
+    addToReview(note, positionType = null) {
       const lineRange =
         (this.line && this.commentLineStart && formatLineRange(this.commentLineStart, this.line)) ||
         {};
-      const positionType = this.diffFileCommentForm
-        ? IMAGE_DIFF_POSITION_TYPE
-        : TEXT_DIFF_POSITION_TYPE;
+      const position =
+        positionType ||
+        (this.diffFileCommentForm ? IMAGE_DIFF_POSITION_TYPE : TEXT_DIFF_POSITION_TYPE);
       const selectedDiffFile = this.getDiffFileByHash(this.diffFileHash);
       const postData = getDraftFormData({
         note,
@@ -64,7 +68,7 @@ export default {
         diffViewType: this.diffViewType,
         diffFile: selectedDiffFile,
         linePosition: this.position,
-        positionType,
+        positionType: position,
         ...this.diffFileCommentForm,
         lineRange,
         showWhitespace: this.showWhitespace,
@@ -76,10 +80,12 @@ export default {
 
       return this.saveDraft(postData)
         .then(() => {
-          if (positionType === IMAGE_DIFF_POSITION_TYPE) {
+          if (position === IMAGE_DIFF_POSITION_TYPE) {
             this.closeDiffFileCommentForm(this.diffFileHash);
-          } else {
+          } else if (this.line?.line_code) {
             this.handleClearForm(this.line.line_code);
+          } else if (position === FILE_DIFF_POSITION_TYPE) {
+            this.toggleFileCommentForm(this.diffFile.file_path);
           }
         })
         .catch(() => {