Add latest changes from gitlab-org/gitlab@12-6-stable-ee

app/assets/javascripts/create_merge_request_dropdown.js

@@ -311,6 +311,7 @@ export default class CreateMergeRequestDropdown {
   }
   onChangeInput(event) {
+    this.disable();
     let target;
     let value;

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
+import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {

app/assets/javascripts/deploy_keys/components/app.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Flash from '~/flash';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -6,7 +7,6 @@ import eventHub from '../eventhub';
 import DeployKeysService from '../service';
 import DeployKeysStore from '../store';
 import KeysPanel from './keys_panel.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
 export default {
   components: {
@@ -133,7 +133,7 @@ export default {
         :keys="keys[currentTab]"
         :store="store"
         :endpoint="endpoint"
-        class="qa-project-deploy-keys"
+        data-qa-selector="project_deploy_keys"
       />
     </template>
   </div>

app/assets/javascripts/deploy_keys/components/key.vue

@@ -159,7 +159,7 @@ export default {
       <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
       <div class="table-mobile-content text-secondary key-created-at">
         <span v-tooltip :title="tooltipTitle(deployKey.created_at)">
-          <icon name="calendar" /> <span>{{ timeFormated(deployKey.created_at) }}</span>
+          <icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>

app/assets/javascripts/diffs/components/app.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import Mousetrap from 'mousetrap';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
-import { GlLoadingIcon } from '@gitlab/ui';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
-import Mousetrap from 'mousetrap';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../notes/event_hub';
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
@@ -36,11 +37,20 @@ export default {
     GlLoadingIcon,
     PanelResizer,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
       required: true,
     },
+    endpointMetadata: {
+      type: String,
+      required: true,
+    },
+    endpointBatch: {
+      type: String,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
@@ -92,6 +102,7 @@ export default {
   computed: {
     ...mapState({
       isLoading: state => state.diffs.isLoading,
+      isBatchLoading: state => state.diffs.isBatchLoading,
       diffFiles: state => state.diffs.diffFiles,
       diffViewType: state => state.diffs.diffViewType,
       mergeRequestDiffs: state => state.diffs.mergeRequestDiffs,
@@ -133,6 +144,9 @@ export default {
     isLimitedContainer() {
       return !this.showTreeList && !this.isParallelView && !this.isFluidLayout;
     },
+    shouldSetDiscussions() {
+      return this.isNotesFetched && !this.assignedDiscussions && !this.isLoading;
+    },
   },
   watch: {
     diffViewType() {
@@ -149,13 +163,21 @@ export default {
     },
     isLoading: 'adjustView',
     showTreeList: 'adjustView',
+    shouldSetDiscussions(newVal) {
+      if (newVal) {
+        this.setDiscussions();
+      }
+    },
   },
   mounted() {
     this.setBaseConfig({
       endpoint: this.endpoint,
+      endpointMetadata: this.endpointMetadata,
+      endpointBatch: this.endpointBatch,
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
+      useSingleDiffStyle: this.glFeatures.singleMrDiffView,
     });
     if (this.shouldShow) {
@@ -185,6 +207,8 @@ export default {
     ...mapActions('diffs', [
       'setBaseConfig',
       'fetchDiffFiles',
+      'fetchDiffFilesMeta',
+      'fetchDiffFilesBatch',
       'startRenderDiffsQueue',
       'assignDiscussionsToDiff',
       'setHighlightedRow',
@@ -196,31 +220,56 @@ export default {
       this.assignedDiscussions = false;
       this.fetchData(false);
     },
+    startDiffRendering() {
+      requestIdleCallback(
+        () => {
+          this.startRenderDiffsQueue();
+        },
+        { timeout: 1000 },
+      );
+    },
     fetchData(toggleTree = true) {
-      this.fetchDiffFiles()
-        .then(() => {
-          if (toggleTree) {
-            this.hideTreeListIfJustOneFile();
-          }
-          requestIdleCallback(
-            () => {
-              this.setDiscussions();
-              this.startRenderDiffsQueue();
-            },
-            { timeout: 1000 },
-          );
-        })
-        .catch(() => {
-          createFlash(__('Something went wrong on our end. Please try again!'));
-        });
+      if (this.glFeatures.diffsBatchLoad) {
+        this.fetchDiffFilesMeta()
+          .then(() => {
+            if (toggleTree) this.hideTreeListIfJustOneFile();
+            this.startDiffRendering();
+          })
+          .catch(() => {
+            createFlash(__('Something went wrong on our end. Please try again!'));
+          });
+
+        this.fetchDiffFilesBatch()
+          .then(() => this.startDiffRendering())
+          .catch(() => {
+            createFlash(__('Something went wrong on our end. Please try again!'));
+          });
+      } else {
+        this.fetchDiffFiles()
+          .then(() => {
+            if (toggleTree) {
+              this.hideTreeListIfJustOneFile();
+            }
+
+            requestIdleCallback(
+              () => {
+                this.startRenderDiffsQueue();
+              },
+              { timeout: 1000 },
+            );
+          })
+          .catch(() => {
+            createFlash(__('Something went wrong on our end. Please try again!'));
+          });
+      }
       if (!this.isNotesFetched) {
         eventHub.$emit('fetchNotesData');
       }
     },
     setDiscussions() {
-      if (this.isNotesFetched && !this.assignedDiscussions && !this.isLoading) {
+      if (this.shouldSetDiscussions) {
         this.assignedDiscussions = true;
         requestIdleCallback(
@@ -324,7 +373,8 @@ export default {
           }"
         >
           <commit-widget v-if="commit" :commit="commit" />
-          <template v-if="renderDiffFiles">
+          <div v-if="isBatchLoading" class="loading"><gl-loading-icon /></div>
+          <template v-else-if="renderDiffFiles">
             <diff-file
               v-for="file in diffFiles"
               :key="file.newPath"

app/assets/javascripts/diffs/components/diff_expansion_cell.vue

 <script>
+import { mapState, mapActions } from 'vuex';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
-import { mapState, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { UNFOLD_COUNT } from '../constants';
 import * as utils from '../store/utils';
@@ -226,7 +226,7 @@ export default {
         <icon :size="12" name="expand-up" aria-hidden="true" />
       </a>
       <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
-        <span>{{ s__('Diffs|Show all lines') }}</span>
+        <span>{{ s__('Diffs|Show unchanged lines') }}</span>
       </a>
       <a
         v-if="canExpandDown"

app/assets/javascripts/diffs/components/diff_file.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
-import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../../notes/event_hub';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';

app/assets/javascripts/diffs/components/diff_file_header.vue

 <script>
 import _ from 'underscore';
 import { mapActions, mapGetters } from 'vuex';
-import { polyfillSticky, stickyMonitor } from '~/lib/utils/sticky';
+import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
+import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import { diffViewerModes } from '~/ide/constants';
 import EditButton from './edit_button.vue';
 import DiffStats from './diff_stats.vue';
-import { scrollToElement, contentTop } from '~/lib/utils/common_utils';
+import { scrollToElement } from '~/lib/utils/common_utils';
 export default {
   components: {
@@ -127,8 +127,6 @@ export default {
   },
   mounted() {
     polyfillSticky(this.$refs.header);
-    const fileHeaderHeight = this.$refs.header.clientHeight;
-    stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false);
   },
   methods: {
     ...mapActions('diffs', [

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import { truncate } from '~/lib/utils/text_utility';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import { GlTooltipDirective } from '@gitlab/ui';
 import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants';
 export default {

app/assets/javascripts/diffs/components/diff_line_gutter_content.vue

@@ -72,7 +72,7 @@ export default {
     lineCode() {
       return (
         this.line.line_code ||
-        (this.line.left && this.line.line.left.line_code) ||
+        (this.line.left && this.line.left.line_code) ||
         (this.line.right && this.line.right.line_code)
       );
     },

app/assets/javascripts/diffs/components/diff_line_note_form.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { s__ } from '~/locale';
 import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
+import { s__ } from '~/locale';
 import noteForm from '../../notes/components/note_form.vue';
 import autosave from '../../notes/mixins/autosave';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';

app/assets/javascripts/diffs/constants.js

@@ -57,3 +57,4 @@ export const MIN_RENDERING_MS = 2;
 export const START_RENDERING_INDEX = 200;
 export const INLINE_DIFF_LINES_KEY = 'highlighted_diff_lines';
 export const PARALLEL_DIFF_LINES_KEY = 'parallel_diff_lines';
+export const DIFFS_PER_PAGE = 20;

app/assets/javascripts/diffs/index.js

@@ -67,6 +67,8 @@ export default function initDiffsApp(store) {
       return {
         endpoint: dataset.endpoint,
+        endpointMetadata: dataset.endpointMetadata || '',
+        endpointBatch: dataset.endpointBatch || '',
         projectPath: dataset.projectPath,
         helpPagePath: dataset.helpPagePath,
         currentUser: JSON.parse(dataset.currentUserData) || {},
@@ -100,6 +102,8 @@ export default function initDiffsApp(store) {
       return createElement('diffs-app', {
         props: {
           endpoint: this.endpoint,
+          endpointMetadata: this.endpointMetadata,
+          endpointBatch: this.endpointBatch,
           currentUser: this.currentUser,
           projectPath: this.projectPath,
           helpPagePath: this.helpPagePath,

app/assets/javascripts/diffs/store/actions.js

 import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
 import Cookies from 'js-cookie';
+import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
@@ -13,6 +13,7 @@ import {
   convertExpandLines,
   idleCallback,
   allDiscussionWrappersExpanded,
+  prepareDiffData,
 } from './utils';
 import * as types from './mutation_types';
 import {
@@ -33,16 +34,36 @@ import {
   START_RENDERING_INDEX,
   INLINE_DIFF_LINES_KEY,
   PARALLEL_DIFF_LINES_KEY,
+  DIFFS_PER_PAGE,
 } from '../constants';
 import { diffViewerModes } from '~/ide/constants';
 export const setBaseConfig = ({ commit }, options) => {
-  const { endpoint, projectPath, dismissEndpoint, showSuggestPopover } = options;
-  commit(types.SET_BASE_CONFIG, { endpoint, projectPath, dismissEndpoint, showSuggestPopover });
+  const {
+    endpoint,
+    endpointMetadata,
+    endpointBatch,
+    projectPath,
+    dismissEndpoint,
+    showSuggestPopover,
+    useSingleDiffStyle,
+  } = options;
+  commit(types.SET_BASE_CONFIG, {
+    endpoint,
+    endpointMetadata,
+    endpointBatch,
+    projectPath,
+    dismissEndpoint,
+    showSuggestPopover,
+    useSingleDiffStyle,
+  });
 };
 export const fetchDiffFiles = ({ state, commit }) => {
   const worker = new TreeWorker();
+  const urlParams = {
+    w: state.showWhitespace ? '0' : '1',
+  };
   commit(types.SET_LOADING, true);
@@ -53,9 +74,10 @@ export const fetchDiffFiles = ({ state, commit }) => {
   });
   return axios
-    .get(mergeUrlParams({ w: state.showWhitespace ? '0' : '1' }, state.endpoint))
+    .get(mergeUrlParams(urlParams, state.endpoint))
     .then(res => {
       commit(types.SET_LOADING, false);
+
       commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
       commit(types.SET_DIFF_DATA, res.data);
@@ -67,6 +89,52 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .catch(() => worker.terminate());
 };
+export const fetchDiffFilesBatch = ({ commit, state }) => {
+  commit(types.SET_BATCH_LOADING, true);
+
+  const getBatch = page =>
+    axios
+      .get(state.endpointBatch, {
+        params: { page, per_page: DIFFS_PER_PAGE, w: state.showWhitespace ? '0' : '1' },
+      })
+      .then(({ data: { pagination, diff_files } }) => {
+        commit(types.SET_DIFF_DATA_BATCH, { diff_files });
+        commit(types.SET_BATCH_LOADING, false);
+        return pagination.next_page;
+      })
+      .then(nextPage => nextPage && getBatch(nextPage));
+
+  return getBatch()
+    .then(handleLocationHash)
+    .catch(() => null);
+};
+
+export const fetchDiffFilesMeta = ({ commit, state }) => {
+  const worker = new TreeWorker();
+
+  commit(types.SET_LOADING, true);
+
+  worker.addEventListener('message', ({ data }) => {
+    commit(types.SET_TREE_DATA, data);
+
+    worker.terminate();
+  });
+
+  return axios
+    .get(state.endpointMetadata)
+    .then(({ data }) => {
+      const strippedData = { ...data };
+      delete strippedData.diff_files;
+      commit(types.SET_LOADING, false);
+      commit(types.SET_MERGE_REQUEST_DIFFS, data.merge_request_diffs || []);
+      commit(types.SET_DIFF_DATA, strippedData);
+
+      prepareDiffData(data);
+      worker.postMessage(data.diff_files);
+    })
+    .catch(() => worker.terminate());
+};
+
 export const setHighlightedRow = ({ commit }, lineCode) => {
   const fileHash = lineCode.split('_')[0];
   commit(types.SET_HIGHLIGHTED_ROW, lineCode);

app/assets/javascripts/diffs/store/modules/diff_state.js

@@ -8,6 +8,7 @@ const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 export default () => ({
   isLoading: true,
+  isBatchLoading: false,
   addedLines: null,
   removedLines: null,
   endpoint: '',
@@ -30,4 +31,5 @@ export default () => ({
   fileFinderVisible: false,
   dismissEndpoint: '',
   showSuggestPopover: true,
+  useSingleDiffStyle: false,
 });

app/assets/javascripts/diffs/store/mutation_types.js

 export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
 export const SET_LOADING = 'SET_LOADING';
+export const SET_BATCH_LOADING = 'SET_BATCH_LOADING';
 export const SET_DIFF_DATA = 'SET_DIFF_DATA';
+export const SET_DIFF_DATA_BATCH = 'SET_DIFF_DATA_BATCH';
 export const SET_DIFF_VIEW_TYPE = 'SET_DIFF_VIEW_TYPE';
 export const SET_MERGE_REQUEST_DIFFS = 'SET_MERGE_REQUEST_DIFFS';
 export const TOGGLE_LINE_HAS_FORM = 'TOGGLE_LINE_HAS_FORM';

app/assets/javascripts/diffs/store/mutations.js

@@ -12,22 +12,57 @@ import * as types from './mutation_types';
 export default {
   [types.SET_BASE_CONFIG](state, options) {
-    const { endpoint, projectPath, dismissEndpoint, showSuggestPopover } = options;
-    Object.assign(state, { endpoint, projectPath, dismissEndpoint, showSuggestPopover });
+    const {
+      endpoint,
+      endpointMetadata,
+      endpointBatch,
+      projectPath,
+      dismissEndpoint,
+      showSuggestPopover,
+      useSingleDiffStyle,
+    } = options;
+    Object.assign(state, {
+      endpoint,
+      endpointMetadata,
+      endpointBatch,
+      projectPath,
+      dismissEndpoint,
+      showSuggestPopover,
+      useSingleDiffStyle,
+    });
   },
   [types.SET_LOADING](state, isLoading) {
     Object.assign(state, { isLoading });
   },
+  [types.SET_BATCH_LOADING](state, isBatchLoading) {
+    Object.assign(state, { isBatchLoading });
+  },
+
   [types.SET_DIFF_DATA](state, data) {
-    prepareDiffData(data);
+    if (
+      !(
+        gon &&
+        gon.features &&
+        gon.features.diffsBatchLoad &&
+        window.location.search.indexOf('diff_id') === -1
+      )
+    ) {
+      prepareDiffData(data);
+    }
     Object.assign(state, {
       ...convertObjectPropsToCamelCase(data),
     });
   },
+  [types.SET_DIFF_DATA_BATCH](state, data) {
+    prepareDiffData(data);
+
+    state.diffFiles.push(...data.diff_files);
+  },
+
   [types.RENDER_FILE](state, file) {
     Object.assign(file, {
       renderIt: true,

app/assets/javascripts/diffs/store/utils.js

@@ -252,10 +252,11 @@ export function prepareDiffData(diffData) {
       showingLines += file.parallel_diff_lines.length;
     }
+    const name = (file.viewer && file.viewer.name) || diffViewerModes.text;
+
     Object.assign(file, {
       renderIt: showingLines < LINES_TO_BE_RENDERED_DIRECTLY,
-      collapsed:
-        file.viewer.name === diffViewerModes.text && showingLines > MAX_LINES_TO_BE_RENDERED,
+      collapsed: name === diffViewerModes.text && showingLines > MAX_LINES_TO_BE_RENDERED,
       isShowingFullFile: false,
       isLoadingFullFile: false,
       discussions: [],
@@ -497,7 +498,7 @@ export const allDiscussionWrappersExpanded = diff => {
       }
     });
   } else if (diff.highlighted_diff_lines) {
-    diff.parallel_diff_lines.forEach(line => {
+    diff.highlighted_diff_lines.forEach(line => {
       if (line.discussions.length) {
         discussionsExpandedArray.push(line.discussionsExpanded);
       }

app/assets/javascripts/emoji/no_emoji_validator.js

-import { __ } from '~/locale';
 import emojiRegex from 'emoji-regex';
+import { __ } from '~/locale';
 import InputValidator from '../validators/input_validator';
 export default class NoEmojiValidator extends InputValidator {

app/assets/javascripts/environments/components/container.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import containerMixin from 'ee_else_ce/environments/mixins/container_mixin';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import EnvironmentTable from '../components/environments_table.vue';
 export default {