Merge branch 'master' into ph-axios-2

8 files changed, 98 insertions, 76 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index d9341837149..87109a802e5 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import { s__ } from './locale';
+import { __ } from './locale';
 import { isInIssuePage, updateTooltipTitle } from './lib/utils/common_utils';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -451,7 +451,7 @@ class AwardsHandler {
           callback();
         }
       })
-      .catch(() => flash(s__('Something went wrong on our end.')));
+      .catch(() => flash(__('Something went wrong on our end.')));
     }
   }
 
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 0da32b4a3cc..586d188350f 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -1,6 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, object-shorthand, no-param-reassign, comma-dangle, prefer-template, no-unused-vars, no-return-assign */
 
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
 
 // highlight text(awefwbwgtc -> <b>a</b>wefw<b>b</b>wgt<b>c</b> )
 const highlighter = function(element, text, matches) {
@@ -72,19 +75,14 @@ export default class ProjectFindFile {
 
     // files pathes load
   load(url) {
-    return $.ajax({
-      url: url,
-      method: "get",
-      dataType: "json",
-      success: (function(_this) {
-        return function(data) {
-          _this.element.find(".loading").hide();
-          _this.filePaths = data;
-          _this.findFile();
-          return _this.element.find(".files-slider tr.tree-item").eq(0).addClass("selected").focus();
-        };
-      })(this)
-    });
+    axios.get(url)
+      .then(({ data }) => {
+        this.element.find('.loading').hide();
+        this.filePaths = data;
+        this.findFile();
+        this.element.find('.files-slider tr.tree-item').eq(0).addClass('selected').focus();
+      })
+      .catch(() => flash(__('An error occurred while loading filenames')));
   }
 
     // render result
diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js
index 15205d8a4e2..73b6aafdd12 100644
--- a/app/assets/javascripts/render_math.js
+++ b/app/assets/javascripts/render_math.js
@@ -7,7 +7,12 @@
 //
 //   <code class="js-render-math"></div>
 //
-  // Only load once
+
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
+
+// Only load once
 let katexLoaded = false;
 
 // Loop over all math elements and render math
@@ -33,19 +38,26 @@ export default function renderMath($els) {
   if (katexLoaded) {
     renderWithKaTeX($els);
   } else {
-    $.get(gon.katex_css_url, () => {
-      const css = $('<link>', {
-        rel: 'stylesheet',
-        type: 'text/css',
-        href: gon.katex_css_url,
-      });
-      css.appendTo('head');
-
-      // Load KaTeX js
-      $.getScript(gon.katex_js_url, () => {
+    axios.get(gon.katex_css_url)
+      .then(() => {
+        const css = $('<link>', {
+          rel: 'stylesheet',
+          type: 'text/css',
+          href: gon.katex_css_url,
+        });
+        css.appendTo('head');
+      })
+      .then(() => axios.get(gon.katex_js_url, {
+        responseType: 'text',
+      }))
+      .then(({ data }) => {
+        // Add katex js to our document
+        $.globalEval(data);
+      })
+      .then(() => {
         katexLoaded = true;
         renderWithKaTeX($els); // Run KaTeX
-      });
-    });
+      })
+      .catch(() => flash(__('An error occurred while rendering KaTeX')));
   }
 }
diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/users/activity_calendar.js
index 0ca54faa71c..57306322aa4 100644
--- a/app/assets/javascripts/users/activity_calendar.js
+++ b/app/assets/javascripts/users/activity_calendar.js
@@ -1,7 +1,10 @@
 import _ from 'underscore';
 import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { select } from 'd3-selection';
-import { getDayName, getDayDifference } from '../lib/utils/datetime_utility';
+import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
 
 const d3 = { select, scaleLinear, scaleThreshold };
 
@@ -221,14 +224,16 @@ export default class ActivityCalendar {
         this.currentSelectedDate.getDate(),
       ].join('-');
 
-      $.ajax({
-        url: this.calendarActivitiesPath,
-        data: { date },
-        cache: false,
-        dataType: 'html',
-        beforeSend: () => $('.user-calendar-activities').html(LOADING_HTML),
-        success: data => $('.user-calendar-activities').html(data),
-      });
+      $('.user-calendar-activities').html(LOADING_HTML);
+
+      axios.get(this.calendarActivitiesPath, {
+        params: {
+          date,
+        },
+        responseType: 'text',
+      })
+      .then(({ data }) => $('.user-calendar-activities').html(data))
+      .catch(() => flash(__('An error occurred while retrieving calendar activity')));
     } else {
       this.currentSelectedDate = '';
       $('.user-calendar-activities').html('');
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
deleted file mode 100644
index 563267ad044..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export default {
-  name: 'MRWidgetRelatedLinks',
-  props: {
-    relatedLinks: { type: Object, required: true },
-    state: { type: String, required: false },
-  },
-  computed: {
-    hasLinks() {
-      const { closing, mentioned, assignToMe } = this.relatedLinks;
-      return closing || mentioned || assignToMe;
-    },
-    closesText() {
-      if (this.state === 'merged') {
-        return 'Closed';
-      }
-      if (this.state === 'closed') {
-        return 'Did not close';
-      }
-      return 'Closes';
-    },
-  },
-  template: `
-    <section
-      v-if="hasLinks"
-      class="mr-info-list mr-links">
-      <p v-if="relatedLinks.closing">
-        {{closesText}} <span v-html="relatedLinks.closing"></span>
-      </p>
-      <p v-if="relatedLinks.mentioned">
-        Mentions <span v-html="relatedLinks.mentioned"></span>
-      </p>
-      <p v-if="relatedLinks.assignToMe">
-        <span v-html="relatedLinks.assignToMe"></span>
-      </p>
-    </section>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
new file mode 100644
index 00000000000..88d0fcd70f5
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -0,0 +1,43 @@
+<script>
+  import { s__ } from '~/locale';
+
+  export default {
+    name: 'MRWidgetRelatedLinks',
+    props: {
+      relatedLinks: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+      state: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      closesText() {
+        if (this.state === 'merged') {
+          return s__('mrWidget|Closed');
+        }
+        if (this.state === 'closed') {
+          return s__('mrWidget|Did not close');
+        }
+        return s__('mrWidget|Closes');
+      },
+    },
+  };
+</script>
+<template>
+  <section class="mr-info-list mr-links">
+    <p v-if="relatedLinks.closing">
+      {{ closesText }} <span v-html="relatedLinks.closing"></span>
+    </p>
+    <p v-if="relatedLinks.mentioned">
+      {{ s__("mrWidget|Mentions") }} <span v-html="relatedLinks.mentioned"></span>
+    </p>
+    <p v-if="relatedLinks.assignToMe">
+      <span v-html="relatedLinks.assignToMe"></span>
+    </p>
+  </section>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 2917090e073..515eb32f5d6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -15,7 +15,7 @@ export { default as WidgetHeader } from './components/mr_widget_header';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
-export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
+export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
 export { default as MergedState } from './components/states/mr_widget_merged.vue';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 98d33f9efaa..edf67fcd0a7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -257,7 +257,8 @@ export default {
         <mr-widget-related-links
           v-if="shouldRenderRelatedLinks"
           :state="mr.state"
-          :related-links="mr.relatedLinks" />
+          :related-links="mr.relatedLinks"
+          />
       </div>
       <div
         class="mr-widget-footer"