Add latest changes from gitlab-org/gitlab@master

22 files changed, 153 insertions, 71 deletions

diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 7ff3271394d..f4014e3cc55 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -156,6 +156,9 @@ export default {
   },
   mounted() {
     Mousetrap.bind('esc', this.closeDesign);
+    this.trackEvent();
+    // We need to reset the active discussion when opening a new design
+    this.updateActiveDiscussion();
   },
   beforeDestroy() {
     Mousetrap.unbind('esc', this.closeDesign);
@@ -279,23 +282,6 @@ export default {
       });
     },
   },
-  beforeRouteEnter(to, from, next) {
-    next(vm => {
-      vm.trackEvent();
-    });
-  },
-  beforeRouteUpdate(to, from, next) {
-    this.trackEvent();
-    this.closeCommentForm();
-    // We need to reset the active discussion when opening a new design
-    this.updateActiveDiscussion();
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    // We need to reset the active discussion when moving to design list view
-    this.updateActiveDiscussion();
-    next();
-  },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
 };
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 7d419bc3ded..922c800009f 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -318,6 +318,6 @@ export default {
         </li>
       </ol>
     </div>
-    <router-view />
+    <router-view :key="$route.fullPath" />
   </div>
 </template>
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 5656bfc4707..e3fb0650e45 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -128,6 +128,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/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/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 1975d6996a5..085dd34179e 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -656,11 +656,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/ide/commit_icon.js b/app/assets/javascripts/ide/commit_icon.js
new file mode 100644
index 00000000000..4984b5bb91d
--- /dev/null
+++ b/app/assets/javascripts/ide/commit_icon.js
@@ -0,0 +1,11 @@
+import { commitItemIconMap } from './constants';
+
+export default file => {
+  if (file.deleted) {
+    return commitItemIconMap.deleted;
+  } else if (file.tempFile && !file.prevPath) {
+    return commitItemIconMap.addition;
+  }
+
+  return commitItemIconMap.modified;
+};
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index e70e251c117..5ae44c0d9a8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -4,7 +4,7 @@ import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import { viewerTypes } from '../../constants';
-import { getCommitIconMap } from '../../utils';
+import getCommitIconMap from '../../commit_icon';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index e32b5ac7bdc..479def40013 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -297,6 +297,3 @@ export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';
 export * from './actions/merge_request';
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 5d0a8570906..d148d0cd993 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -161,6 +161,3 @@ export const canCreateMergeRequests = (state, getters) =>
 
 export const canPushCode = (state, getters) =>
   Boolean(getters.findProjectPermissions(state.currentProjectId)[PERMISSION_PUSH_CODE]);
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/clientside/actions.js b/app/assets/javascripts/ide/stores/modules/clientside/actions.js
index eb3bcdff2ae..2bebf8b90ce 100644
--- a/app/assets/javascripts/ide/stores/modules/clientside/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/clientside/actions.js
@@ -8,5 +8,4 @@ export const pingUsage = ({ rootGetters }) => {
   return axios.post(url);
 };
 
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
+export default pingUsage;
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index 592c7e15918..65e2726a976 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -234,6 +234,3 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
       window.dispatchEvent(new Event('resize'));
     });
 };
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index 413c4b0110d..37f887bcf0a 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -59,6 +59,3 @@ export const shouldDisableNewMrOption = (state, getters, rootState, rootGetters)
 
 export const shouldCreateMR = (state, getters) =>
   state.shouldCreateMR && !getters.shouldDisableNewMrOption;
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
index 59ead8a3dcf..6b2c929cd44 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
@@ -117,6 +117,3 @@ export const undoFileTemplate = ({ dispatch, commit, rootGetters }) => {
     dispatch('discardFileChanges', file.path, { root: true });
   }
 };
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/stores/modules/pane/actions.js b/app/assets/javascripts/ide/stores/modules/pane/actions.js
index a8fcdf539ec..b7cff368fe4 100644
--- a/app/assets/javascripts/ide/stores/modules/pane/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pane/actions.js
@@ -25,6 +25,3 @@ export const open = ({ state, commit }, view) => {
 export const close = ({ commit }) => {
   commit(types.SET_OPEN, false);
 };
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index 1ea2b199237..9d14b7f7d48 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -1,4 +1,3 @@
-import { commitItemIconMap } from './constants';
 import { languages } from 'monaco-editor';
 import { flatten } from 'lodash';
 
@@ -53,16 +52,6 @@ export function isTextFile(content, mimeType, fileName) {
   return asciiRegex.test(content);
 }
 
-export const getCommitIconMap = file => {
-  if (file.deleted) {
-    return commitItemIconMap.deleted;
-  } else if (file.tempFile && !file.prevPath) {
-    return commitItemIconMap.addition;
-  }
-
-  return commitItemIconMap.modified;
-};
-
 export const createPathWithExt = p => {
   const ext = p.lastIndexOf('.') >= 0 ? p.substring(p.lastIndexOf('.') + 1) : '';
 
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index 2bbf9ef9d78..5acb9ebc043 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -22,6 +22,8 @@ export default (props = {}) => {
           props: {
             ...el.dataset,
             currentDashboard,
+            customMetricsAvailable: parseBoolean(el.dataset.customMetricsAvailable),
+            prometheusAlertsAvailable: parseBoolean(el.dataset.prometheusAlertsAvailable),
             hasMetrics: parseBoolean(el.dataset.hasMetrics),
             ...props,
           },
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle_with_alerts.js b/app/assets/javascripts/monitoring/monitoring_bundle_with_alerts.js
deleted file mode 100644
index afe5ee0938d..00000000000
--- a/app/assets/javascripts/monitoring/monitoring_bundle_with_alerts.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { parseBoolean } from '~/lib/utils/common_utils';
-import initCeBundle from '~/monitoring/monitoring_bundle';
-
-export default () => {
-  const el = document.getElementById('prometheus-graphs');
-
-  if (el && el.dataset) {
-    initCeBundle({
-      customMetricsAvailable: parseBoolean(el.dataset.customMetricsAvailable),
-      prometheusAlertsAvailable: parseBoolean(el.dataset.prometheusAlertsAvailable),
-    });
-  }
-};
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index cd5cfc09ea0..8897b54fac7 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -116,6 +116,7 @@ export default {
     </div>
     <div v-else>
       <diff-viewer
+        :diff-file="discussion.diff_file"
         :diff-mode="diffMode"
         :diff-viewer-mode="diffViewerMode"
         :new-path="discussion.diff_file.new_path"
diff --git a/app/assets/javascripts/pages/projects/environments/metrics/index.js b/app/assets/javascripts/pages/projects/environments/metrics/index.js
index 31ec4e29ad2..0b644780ad4 100644
--- a/app/assets/javascripts/pages/projects/environments/metrics/index.js
+++ b/app/assets/javascripts/pages/projects/environments/metrics/index.js
@@ -1,3 +1,3 @@
-import monitoringBundle from '~/monitoring/monitoring_bundle_with_alerts';
+import monitoringBundle from '~/monitoring/monitoring_bundle';
 
 document.addEventListener('DOMContentLoaded', monitoringBundle);
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index 60e41a16854..7431b7e9ed4 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import { getCommitIconMap } from '~/ide/utils';
+import getCommitIconMap from '~/ide/commit_icon';
 import { __ } from '~/locale';
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index bf3c3666300..a2fe19f9672 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -7,6 +7,10 @@ import ModeChanged from './viewers/mode_changed.vue';
 
 export default {
   props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
     diffMode: {
       type: String,
       required: true,
@@ -92,6 +96,7 @@ export default {
   <div v-if="viewer" class="diff-file preview-container">
     <component
       :is="viewer"
+      :diff-file="diffFile"
       :diff-mode="diffMode"
       :new-path="fullNewPath"
       :old-path="fullOldPath"
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
index 5c1ea59b471..eba6dd4d14c 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
@@ -1,3 +1,108 @@
+<script>
+import { mapActions } from 'vuex';
+import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+import {
+  TRANSITION_LOAD_START,
+  TRANSITION_LOAD_ERROR,
+  TRANSITION_LOAD_SUCCEED,
+  TRANSITION_ACKNOWLEDGE_ERROR,
+  STATE_IDLING,
+  STATE_LOADING,
+  STATE_ERRORED,
+  RENAMED_DIFF_TRANSITIONS,
+} from '~/diffs/constants';
+import { truncateSha } from '~/lib/utils/text_utility';
+
+export default {
+  STATE_LOADING,
+  STATE_ERRORED,
+  TRANSITIONS: RENAMED_DIFF_TRANSITIONS,
+  uiText: {
+    showLink: __('Show file contents'),
+    commitLink: __('View file @ %{commitSha}'),
+    description: __('File renamed with no changes.'),
+    loadError: __('Unable to load file contents. Try again later.'),
+  },
+  components: {
+    GlAlert,
+    GlLink,
+    GlLoadingIcon,
+    GlSprintf,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    state: STATE_IDLING,
+  }),
+  computed: {
+    shortSha() {
+      return truncateSha(this.diffFile.content_sha);
+    },
+    canLoadFullDiff() {
+      return this.diffFile.alternate_viewer.name === 'text';
+    },
+  },
+  methods: {
+    ...mapActions('diffs', ['switchToFullDiffFromRenamedFile']),
+    transition(transitionEvent) {
+      const key = `${this.state}:${transitionEvent}`;
+
+      if (this.$options.TRANSITIONS[key]) {
+        this.state = this.$options.TRANSITIONS[key];
+      }
+    },
+    is(state) {
+      return this.state === state;
+    },
+    switchToFull() {
+      this.transition(TRANSITION_LOAD_START);
+
+      this.switchToFullDiffFromRenamedFile({ diffFile: this.diffFile })
+        .then(() => {
+          this.transition(TRANSITION_LOAD_SUCCEED);
+        })
+        .catch(() => {
+          this.transition(TRANSITION_LOAD_ERROR);
+        });
+    },
+    clickLink(event) {
+      if (this.canLoadFullDiff) {
+        event.preventDefault();
+
+        this.switchToFull();
+      }
+    },
+    dismissError() {
+      this.transition(TRANSITION_ACKNOWLEDGE_ERROR);
+    },
+  },
+};
+</script>
+
 <template>
-  <div class="nothing-here-block">{{ __('File moved') }}</div>
+  <div class="nothing-here-block">
+    <gl-loading-icon v-if="is($options.STATE_LOADING)" />
+    <template v-else>
+      <gl-alert
+        v-show="is($options.STATE_ERRORED)"
+        class="gl-mb-5 gl-text-left"
+        variant="danger"
+        @dismiss="dismissError"
+        >{{ $options.uiText.loadError }}</gl-alert
+      >
+      <span test-id="plaintext">{{ $options.uiText.description }}</span>
+      <gl-link :href="diffFile.view_path" @click="clickLink">
+        <span v-if="canLoadFullDiff">{{ $options.uiText.showLink }}</span>
+        <gl-sprintf v-else :message="$options.uiText.commitLink">
+          <template #commitSha>{{ shortSha }}</template>
+        </gl-sprintf>
+      </gl-link>
+    </template>
+  </div>
 </template>