Add latest changes from gitlab-org/gitlab@master

11 files changed, 176 insertions, 37 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 19b85710710..8039a9a7602 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
@@ -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,
@@ -153,6 +164,8 @@ export default {
   mounted() {
     this.setBaseConfig({
       endpoint: this.endpoint,
+      endpointMetadata: this.endpointMetadata,
+      endpointBatch: this.endpointBatch,
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
@@ -185,6 +198,8 @@ export default {
     ...mapActions('diffs', [
       'setBaseConfig',
       'fetchDiffFiles',
+      'fetchDiffFilesMeta',
+      'fetchDiffFilesBatch',
       'startRenderDiffsQueue',
       'assignDiscussionsToDiff',
       'setHighlightedRow',
@@ -196,24 +211,51 @@ export default {
       this.assignedDiscussions = false;
       this.fetchData(false);
     },
+    isLatestVersion() {
+      return window.location.search.indexOf('diff_id') === -1;
+    },
     fetchData(toggleTree = true) {
-      this.fetchDiffFiles()
-        .then(() => {
-          if (toggleTree) {
-            this.hideTreeListIfJustOneFile();
-          }
+      if (this.isLatestVersion() && this.glFeatures.diffsBatchLoad) {
+        this.fetchDiffFilesMeta()
+          .then(() => {
+            if (toggleTree) this.hideTreeListIfJustOneFile();
+          })
+          .catch(() => {
+            createFlash(__('Something went wrong on our end. Please try again!'));
+          });
 
-          requestIdleCallback(
-            () => {
-              this.setDiscussions();
-              this.startRenderDiffsQueue();
-            },
-            { timeout: 1000 },
-          );
-        })
-        .catch(() => {
-          createFlash(__('Something went wrong on our end. Please try again!'));
-        });
+        this.fetchDiffFilesBatch()
+          .then(() => {
+            requestIdleCallback(
+              () => {
+                this.setDiscussions();
+                this.startRenderDiffsQueue();
+              },
+              { timeout: 1000 },
+            );
+          })
+          .catch(() => {
+            createFlash(__('Something went wrong on our end. Please try again!'));
+          });
+      } else {
+        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.isNotesFetched) {
         eventHub.$emit('fetchNotesData');
@@ -324,7 +366,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"
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index d84e1af11f3..9de4c38bdf0 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/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 = 10;
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index c9580e3d3b4..375ac80021f 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/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,
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 6695d9fe96c..d4594399ff5 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -13,6 +13,7 @@ import {
   convertExpandLines,
   idleCallback,
   allDiscussionWrappersExpanded,
+  prepareDiffData,
 } from './utils';
 import * as types from './mutation_types';
 import {
@@ -33,12 +34,27 @@ 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,
+  } = options;
+  commit(types.SET_BASE_CONFIG, {
+    endpoint,
+    endpointMetadata,
+    endpointBatch,
+    projectPath,
+    dismissEndpoint,
+    showSuggestPopover,
+  });
 };
 
 export const fetchDiffFiles = ({ state, commit }) => {
@@ -67,6 +83,53 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .catch(() => worker.terminate());
 };
 
+export const fetchDiffFilesBatch = ({ commit, state }) => {
+  const baseUrl = `${state.endpointBatch}?per_page=${DIFFS_PER_PAGE}`;
+  const url = page => (page ? `${baseUrl}&page=${page}` : baseUrl);
+
+  commit(types.SET_BATCH_LOADING, true);
+
+  const getBatch = page =>
+    axios
+      .get(url(page))
+      .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 };
+      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);
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 6821c8445ea..8c52e3178e5 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/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: '',
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 9db56331faa..5a90d78b2bc 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -1,6 +1,8 @@
 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';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index a6915a46c00..de2f68d729c 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -12,14 +12,32 @@ 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,
+    } = options;
+    Object.assign(state, {
+      endpoint,
+      endpointMetadata,
+      endpointBatch,
+      projectPath,
+      dismissEndpoint,
+      showSuggestPopover,
+    });
   },
 
   [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);
 
@@ -28,6 +46,12 @@ export default {
     });
   },
 
+  [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,
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index d46bdea9b50..2326018b999 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/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: [],
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index c94039326aa..dfd4d5474ff 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -6,6 +6,7 @@ import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -26,7 +27,6 @@ const timeagoInstance = new Timeago();
 
 export default {
   components: {
-    UserAvatarLink,
     CommitComponent,
     Icon,
     ActionsComponent,
@@ -35,6 +35,8 @@ export default {
     RollbackComponent,
     TerminalButtonComponent,
     MonitoringButtonComponent,
+    TooltipOnTruncate,
+    UserAvatarLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -508,12 +510,16 @@ export default {
     </div>
 
     <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
-      <a
-        v-if="shouldRenderBuildName"
-        :href="buildPath"
-        class="build-link cgray flex-truncate-parent"
-      >
-        <span class="flex-truncate-child">{{ buildName }}</span>
+      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray">
+        <tooltip-on-truncate
+          :title="buildName"
+          truncate-target="child"
+          class="flex-truncate-parent"
+        >
+          <span class="flex-truncate-child">
+            {{ buildName }}
+          </span>
+        </tooltip-on-truncate>
       </a>
     </div>
 
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 81927d18f8b..50c667e6966 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -31,10 +31,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    cssContainerClass: {
-      type: String,
-      required: true,
-    },
     newEnvironmentPath: {
       type: String,
       required: true,
@@ -93,7 +89,7 @@ export default {
 };
 </script>
 <template>
-  <div :class="cssContainerClass">
+  <div>
     <stop-environment-modal :environment="environmentInStopModal" />
     <confirm-rollback-modal :environment="environmentInRollbackModal" />
 
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index dcdaf8731f8..9a68619d4f7 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -21,7 +21,6 @@ export default () =>
         newEnvironmentPath: environmentsData.newEnvironmentPath,
         helpPagePath: environmentsData.helpPagePath,
         deployBoardsHelpPath: environmentsData.deployBoardsHelpPath,
-        cssContainerClass: environmentsData.cssClass,
         canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment),
         canReadEnvironment: parseBoolean(environmentsData.canReadEnvironment),
       };
@@ -33,7 +32,6 @@ export default () =>
           newEnvironmentPath: this.newEnvironmentPath,
           helpPagePath: this.helpPagePath,
           deployBoardsHelpPath: this.deployBoardsHelpPath,
-          cssContainerClass: this.cssContainerClass,
           canCreateEnvironment: this.canCreateEnvironment,
           canReadEnvironment: this.canReadEnvironment,
           ...this.canaryCalloutProps,