Add latest changes from gitlab-org/gitlab@13-1-stable-ee

12 files changed, 176 insertions, 53 deletions

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index ee93ca020e8..99bc1b5c040 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -144,7 +144,7 @@ export default {
 
         <pre
           v-if="commit.description_html"
-          class="commit-row-description js-toggle-content append-bottom-8"
+          class="commit-row-description js-toggle-content gl-mb-3"
           v-html="commit.description_html"
         ></pre>
       </div>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index c680c3f4600..6f6fa312865 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -86,7 +86,7 @@ export default {
       <button
         v-gl-tooltip.hover
         type="button"
-        class="btn btn-default append-right-8 js-toggle-tree-list"
+        class="btn btn-default gl-mr-3 js-toggle-tree-list"
         :class="{
           active: showTreeList,
         }"
@@ -98,20 +98,20 @@ export default {
       <gl-sprintf
         v-if="showDropdowns"
         class="d-flex align-items-center compare-versions-container"
-        :message="s__('MergeRequest|Compare %{source} and %{target}')"
+        :message="s__('MergeRequest|Compare %{target} and %{source}')"
       >
-        <template #source>
-          <compare-dropdown-layout
-            :versions="diffCompareDropdownSourceVersions"
-            class="mr-version-dropdown"
-          />
-        </template>
         <template #target>
           <compare-dropdown-layout
             :versions="diffCompareDropdownTargetVersions"
             class="mr-version-compare-dropdown"
           />
         </template>
+        <template #source>
+          <compare-dropdown-layout
+            :versions="diffCompareDropdownSourceVersions"
+            class="mr-version-dropdown"
+          />
+        </template>
       </gl-sprintf>
       <div v-else-if="commit">
         {{ __('Viewing commit') }}
@@ -126,15 +126,11 @@ export default {
         <gl-deprecated-button
           v-if="commit || startVersion"
           :href="latestVersionPath"
-          class="append-right-8 js-latest-version"
+          class="gl-mr-3 js-latest-version"
         >
           {{ __('Show latest version') }}
         </gl-deprecated-button>
-        <gl-deprecated-button
-          v-show="hasCollapsedFile"
-          class="append-right-8"
-          @click="expandAllFiles"
-        >
+        <gl-deprecated-button v-show="hasCollapsedFile" class="gl-mr-3" @click="expandAllFiles">
           {{ __('Expand all') }}
         </gl-deprecated-button>
         <settings-dropdown />
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 5656bfc4707..741462a849c 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,11 +1,12 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
-import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
-import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
+import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
+import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
+import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -29,7 +30,7 @@ export default {
     NotDiffableViewer,
     NoPreviewViewer,
     userAvatarLink,
-    DiffFileDrafts: () => import('ee_component/batch_comments/components/diff_file_drafts.vue'),
+    DiffFileDrafts,
   },
   mixins: [diffLineNoteFormMixin, draftCommentsMixin],
   props: {
@@ -128,6 +129,7 @@ export default {
       <no-preview-viewer v-else-if="noPreview" />
       <diff-viewer
         v-else
+        :diff-file="diffFile"
         :diff-mode="diffMode"
         :diff-viewer-mode="diffViewerMode"
         :new-path="diffFile.new_path"
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index f81f50f8490..74305ee69bc 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -1,18 +1,22 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
+import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 import noteForm from '../../notes/components/note_form.vue';
+import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
 import autosave from '../../notes/mixins/autosave';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import { DIFF_NOTE_TYPE } from '../constants';
+import { commentLineOptions } from '../../notes/components/multiline_comment_utils';
 
 export default {
   components: {
     noteForm,
     userAvatarLink,
+    MultilineCommentForm,
   },
-  mixins: [autosave, diffLineNoteFormMixin],
+  mixins: [autosave, diffLineNoteFormMixin, glFeatureFlagsMixin()],
   props: {
     diffFileHash: {
       type: String,
@@ -37,6 +41,14 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      commentLineStart: {
+        lineCode: this.line.line_code,
+        type: this.line.type,
+      },
+    };
+  },
   computed: {
     ...mapState({
       noteableData: state => state.notes.noteableData,
@@ -62,11 +74,20 @@ export default {
         diffViewType: this.diffViewType,
         diffFile: this.diffFile,
         linePosition: this.linePosition,
+        lineRange: {
+          start_line_code: this.commentLineStart.lineCode,
+          start_line_type: this.commentLineStart.type,
+          end_line_code: this.line.line_code,
+          end_line_type: this.line.type,
+        },
       };
     },
     diffFile() {
       return this.getDiffFileByHash(this.diffFileHash);
     },
+    commentLineOptions() {
+      return commentLineOptions(this.diffFile.highlighted_diff_lines, this.line.line_code);
+    },
   },
   mounted() {
     if (this.isLoggedIn) {
@@ -83,7 +104,6 @@ export default {
   methods: {
     ...mapActions('diffs', [
       'cancelCommentForm',
-      'assignDiscussionsToDiff',
       'saveDiffDiscussion',
       'setSuggestPopoverDismissed',
     ]),
@@ -116,6 +136,16 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
+    <div
+      v-if="glFeatures.multilineComments"
+      class="gl-mb-3 gl-text-gray-700 gl-border-gray-200 gl-border-b-solid gl-border-b-1 gl-pb-3"
+    >
+      <multiline-comment-form
+        v-model="commentLineStart"
+        :line="line"
+        :comment-line-options="commentLineOptions"
+      />
+    </div>
     <user-avatar-link
       v-if="author"
       :link-href="author.path"
@@ -133,7 +163,7 @@ export default {
       :diff-file="diffFile"
       :show-suggest-popover="showSuggestPopover"
       save-button-title="Comment"
-      class="diff-comment-form"
+      class="diff-comment-form prepend-top-10"
       @handleFormUpdateAddToReview="addToReview"
       @cancelForm="handleCancelCommentForm"
       @handleFormUpdate="handleSaveNote"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index 8b25cdc2887..ad72016f03b 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
-import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
+import draftCommentsMixin from '~/diffs/mixins/draft_comments';
+import InlineDraftCommentRow from '~/batch_comments/components/inline_draft_comment_row.vue';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
 import inlineDiffExpansionRow from './inline_diff_expansion_row.vue';
@@ -9,8 +10,7 @@ export default {
   components: {
     inlineDiffCommentRow,
     inlineDiffTableRow,
-    InlineDraftCommentRow: () =>
-      import('ee_component/batch_comments/components/inline_draft_comment_row.vue'),
+    InlineDraftCommentRow,
     inlineDiffExpansionRow,
   },
   mixins: [draftCommentsMixin],
@@ -80,6 +80,8 @@ export default {
           v-if="shouldRenderDraftRow(diffFile.file_hash, line)"
           :key="`draft_${index}`"
           :draft="draftForLine(diffFile.file_hash, line)"
+          :diff-file="diffFile"
+          :line="line"
         />
       </template>
     </tbody>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index d796aad9d06..b5fcc50ce26 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
-import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
+import draftCommentsMixin from '~/diffs/mixins/draft_comments';
+import ParallelDraftCommentRow from '~/batch_comments/components/parallel_draft_comment_row.vue';
 import parallelDiffTableRow from './parallel_diff_table_row.vue';
 import parallelDiffCommentRow from './parallel_diff_comment_row.vue';
 import parallelDiffExpansionRow from './parallel_diff_expansion_row.vue';
@@ -10,8 +11,7 @@ export default {
     parallelDiffExpansionRow,
     parallelDiffTableRow,
     parallelDiffCommentRow,
-    ParallelDraftCommentRow: () =>
-      import('ee_component/batch_comments/components/parallel_draft_comment_row.vue'),
+    ParallelDraftCommentRow,
   },
   mixins: [draftCommentsMixin],
   props: {
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index eca9091f92f..52611f3c82a 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -64,7 +64,7 @@ export default {
 
 <template>
   <div class="tree-list-holder d-flex flex-column">
-    <div class="append-bottom-8 position-relative tree-list-search d-flex">
+    <div class="gl-mb-3 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
         <icon name="search" class="position-absolute tree-list-icon" />
         <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 40e1aec42ed..9269dacd582 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -61,3 +61,22 @@ export const DIFFS_PER_PAGE = 20;
 
 export const DIFF_COMPARE_BASE_VERSION_INDEX = -1;
 export const DIFF_COMPARE_HEAD_VERSION_INDEX = -2;
+
+// State machine states
+export const STATE_IDLING = 'idle';
+export const STATE_LOADING = 'loading';
+export const STATE_ERRORED = 'errored';
+
+// State machine transitions
+export const TRANSITION_LOAD_START = 'LOAD_START';
+export const TRANSITION_LOAD_ERROR = 'LOAD_ERROR';
+export const TRANSITION_LOAD_SUCCEED = 'LOAD_SUCCEED';
+export const TRANSITION_ACKNOWLEDGE_ERROR = 'ACKNOWLEDGE_ERROR';
+
+export const RENAMED_DIFF_TRANSITIONS = {
+  [`${STATE_IDLING}:${TRANSITION_LOAD_START}`]: STATE_LOADING,
+  [`${STATE_LOADING}:${TRANSITION_LOAD_ERROR}`]: STATE_ERRORED,
+  [`${STATE_LOADING}:${TRANSITION_LOAD_SUCCEED}`]: STATE_IDLING,
+  [`${STATE_ERRORED}:${TRANSITION_LOAD_START}`]: STATE_LOADING,
+  [`${STATE_ERRORED}:${TRANSITION_ACKNOWLEDGE_ERROR}`]: STATE_IDLING,
+};
diff --git a/app/assets/javascripts/diffs/mixins/draft_comments.js b/app/assets/javascripts/diffs/mixins/draft_comments.js
index b6c9b132aeb..693b4a84694 100644
--- a/app/assets/javascripts/diffs/mixins/draft_comments.js
+++ b/app/assets/javascripts/diffs/mixins/draft_comments.js
@@ -1,12 +1,17 @@
+import { mapGetters } from 'vuex';
+
 export default {
   computed: {
-    shouldRenderDraftRow: () => () => false,
-    shouldRenderParallelDraftRow: () => () => false,
-    draftForLine: () => () => ({}),
+    ...mapGetters('batchComments', [
+      'shouldRenderDraftRow',
+      'shouldRenderParallelDraftRow',
+      'draftForLine',
+      'draftsForFile',
+      'hasParallelDraftLeft',
+      'hasParallelDraftRight',
+    ]),
     imageDiscussions() {
-      return this.diffFile.discussions;
+      return this.diffFile.discussions.concat(this.draftsForFile(this.diffFile.file_hash));
     },
-    hasParallelDraftLeft: () => () => false,
-    hasParallelDraftRight: () => () => false,
   },
 };
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 1975d6996a5..a8d348e1836 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -118,12 +118,7 @@ export const fetchDiffFilesBatch = ({ commit, state }) => {
 
   const getBatch = (page = 1) =>
     axios
-      .get(state.endpointBatch, {
-        params: {
-          ...urlParams,
-          page,
-        },
-      })
+      .get(mergeUrlParams({ ...urlParams, page }, state.endpointBatch))
       .then(({ data: { pagination, diff_files } }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
         commit(types.SET_BATCH_LOADING, false);
@@ -507,9 +502,6 @@ export const cacheTreeListWidth = (_, size) => {
   localStorage.setItem(TREE_LIST_WIDTH_STORAGE_KEY, size);
 };
 
-export const requestFullDiff = ({ commit }, filePath) => commit(types.REQUEST_FULL_DIFF, filePath);
-export const receiveFullDiffSucess = ({ commit }, { filePath }) =>
-  commit(types.RECEIVE_FULL_DIFF_SUCCESS, { filePath });
 export const receiveFullDiffError = ({ commit }, filePath) => {
   commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
   createFlash(s__('MergeRequest|Error loading full diff. Please try again.'));
@@ -600,7 +592,7 @@ export const setExpandedDiffLines = ({ commit, state }, { file, data }) => {
   }
 };
 
-export const fetchFullDiff = ({ dispatch }, file) =>
+export const fetchFullDiff = ({ commit, dispatch }, file) =>
   axios
     .get(file.context_lines_path, {
       params: {
@@ -609,15 +601,16 @@ export const fetchFullDiff = ({ dispatch }, file) =>
       },
     })
     .then(({ data }) => {
-      dispatch('receiveFullDiffSucess', { filePath: file.file_path });
+      commit(types.RECEIVE_FULL_DIFF_SUCCESS, { filePath: file.file_path });
+
       dispatch('setExpandedDiffLines', { file, data });
     })
     .catch(() => dispatch('receiveFullDiffError', file.file_path));
 
-export const toggleFullDiff = ({ dispatch, getters, state }, filePath) => {
+export const toggleFullDiff = ({ dispatch, commit, getters, state }, filePath) => {
   const file = state.diffFiles.find(f => f.file_path === filePath);
 
-  dispatch('requestFullDiff', filePath);
+  commit(types.REQUEST_FULL_DIFF, filePath);
 
   if (file.isShowingFullFile) {
     dispatch('loadCollapsedDiff', file)
@@ -656,11 +649,6 @@ export function switchToFullDiffFromRenamedFile({ commit, dispatch, state }, { d
       commit(types.SET_CURRENT_VIEW_DIFF_FILE_LINES, { filePath: diffFile.file_path, lines });
 
       dispatch('startRenderDiffsQueue');
-    })
-    .catch(error => {
-      dispatch('receiveFullDiffError', diffFile.file_path);
-
-      throw error;
     });
 }
 
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index 2be71c77087..d261be1b550 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -40,6 +40,7 @@ export function getFormData(params) {
     diffViewType,
     linePosition,
     positionType,
+    lineRange,
   } = params;
 
   const position = JSON.stringify({
@@ -55,6 +56,7 @@ export function getFormData(params) {
     y: params.y,
     width: params.width,
     height: params.height,
+    line_range: lineRange,
   });
 
   const postData = {
diff --git a/app/assets/javascripts/diffs/utils/uuids.js b/app/assets/javascripts/diffs/utils/uuids.js
new file mode 100644
index 00000000000..1a529c07ccc
--- /dev/null
+++ b/app/assets/javascripts/diffs/utils/uuids.js
@@ -0,0 +1,79 @@
+/**
+ * @module uuids
+ */
+
+/**
+ * A string or number representing a start state for a random generator
+ * @typedef {(Number|String)} Seed
+ */
+/**
+ * A UUIDv4 string in the format <code>Hex{8}-Hex{4}-4Hex{3}-[89ab]Hex{3}-Hex{12}</code>
+ * @typedef {String} UUIDv4
+ */
+
+// https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/20
+/* eslint-disable import/prefer-default-export */
+
+import MersenneTwister from 'mersenne-twister';
+import stringHash from 'string-hash';
+import { isString } from 'lodash';
+import { v4 } from 'uuid';
+
+function getSeed(seeds) {
+  return seeds.reduce((seedling, seed, i) => {
+    let thisSeed = 0;
+
+    if (Number.isInteger(seed)) {
+      thisSeed = seed;
+    } else if (isString(seed)) {
+      thisSeed = stringHash(seed);
+    }
+
+    return seedling + (seeds.length - i) * thisSeed;
+  }, 0);
+}
+
+function getPseudoRandomNumberGenerator(...seeds) {
+  let seedNumber;
+
+  if (seeds.length) {
+    seedNumber = getSeed(seeds);
+  } else {
+    seedNumber = Math.floor(Math.random() * 10 ** 15);
+  }
+
+  return new MersenneTwister(seedNumber);
+}
+
+function randomValuesForUuid(prng) {
+  const randomValues = [];
+
+  for (let i = 0; i <= 3; i += 1) {
+    const buffer = new ArrayBuffer(4);
+    const view = new DataView(buffer);
+
+    view.setUint32(0, prng.random_int());
+
+    randomValues.push(view.getUint8(0), view.getUint8(1), view.getUint8(2), view.getUint8(3));
+  }
+
+  return randomValues;
+}
+
+/**
+ * Get an array of UUIDv4s
+ * @param {Object} [options={}]
+ * @param {Seed[]} [options.seeds=[]] - A list of mixed strings or numbers to seed the UUIDv4 generator
+ * @param {Number} [options.count=1] - A total number of UUIDv4s to generate
+ * @returns {UUIDv4[]} An array of UUIDv4s
+ */
+export function uuids({ seeds = [], count = 1 } = {}) {
+  const rng = getPseudoRandomNumberGenerator(...seeds);
+  return (
+    // Create an array the same size as the number of UUIDs requested
+    Array(count)
+      .fill(0)
+      // Replace each slot in the array with a UUID which needs 16 (pseudo)random values to generate
+      .map(() => v4({ random: randomValuesForUuid(rng) }))
+  );
+}