Merge branch 'master' into fl-mr-widget-1

* master: (38 commits)
  Added more tests and corrected typos
  Ban Rugged from Repository
  Improve doc/development/automatic_ce_ee_merge.md
  fixed infinite loop crashing tests
  Converted todos.js to axios
  Converted usage_ping.js to use axios
  Converted pager.js to axios
  Converted notifications_form.js to axios
  Converted notes.js to axios
  Converted branch_graph.js to axios
  Converted mini_pipeline_graph_dropdown.js to axios
  Include subgroup issuables on the group page
  Remove grpc and google-protobuf platform-specific version markers in Gemfile.lock
  Replace $.ajax in find file with axios
  Replace $.ajax in activity calendar with axios
  Remove namespaced internationalization import
  Fix subgroup creation docs
  Fix a JSON schema that doesn't include enough fields
  Make user/author use project.creator in most factories
  Enable RuboCop Style/RegexpLiteral
  ...

19 files changed, 351 insertions, 197 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/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 03918762842..8018ec411c1 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -1,4 +1,5 @@
 import { getLocationHash } from './url_utility';
+import axios from './axios_utils';
 
 export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
 
@@ -382,22 +383,16 @@ export const resetFavicon = () => {
   }
 };
 
-export const setCiStatusFavicon = (pageUrl) => {
-  $.ajax({
-    url: pageUrl,
-    dataType: 'json',
-    success: (data) => {
+export const setCiStatusFavicon = pageUrl =>
+  axios.get(pageUrl)
+    .then(({ data }) => {
       if (data && data.favicon) {
         setFavicon(data.favicon);
       } else {
         resetFavicon();
       }
-    },
-    error: () => {
-      resetFavicon();
-    },
-  });
-};
+    })
+    .catch(resetFavicon);
 
 export const spriteIcon = (icon, className = '') => {
   const classAttribute = className.length > 0 ? `class="${className}"` : '';
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index ca3d271663b..c7bccd483ac 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-new */
-import Flash from './flash';
+import flash from './flash';
+import axios from './lib/utils/axios_utils';
 
 /**
  * In each pipelines table we have a mini pipeline graph for each pipeline.
@@ -78,27 +79,22 @@ export default class MiniPipelineGraph {
     const button = e.relatedTarget;
     const endpoint = button.dataset.stageEndpoint;
 
-    return $.ajax({
-      dataType: 'json',
-      type: 'GET',
-      url: endpoint,
-      beforeSend: () => {
-        this.renderBuildsList(button, '');
-        this.toggleLoading(button);
-      },
-      success: (data) => {
+    this.renderBuildsList(button, '');
+    this.toggleLoading(button);
+
+    axios.get(endpoint)
+      .then(({ data }) => {
         this.toggleLoading(button);
         this.renderBuildsList(button, data.html);
         this.stopDropdownClickPropagation();
-      },
-      error: () => {
+      })
+      .catch(() => {
         this.toggleLoading(button);
         if ($(button).parent().hasClass('open')) {
           $(button).dropdown('toggle');
         }
-        new Flash('An error occurred while fetching the builds.', 'alert');
-      },
-    });
+        flash('An error occurred while fetching the builds.', 'alert');
+      });
   }
 
   /**
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 5aad3908eb6..d3edcb724f1 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,5 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
 
+import { __ } from '../locale';
+import axios from '../lib/utils/axios_utils';
+import flash from '../flash';
 import Raphael from './raphael';
 
 export default (function() {
@@ -26,16 +29,13 @@ export default (function() {
   }
 
   BranchGraph.prototype.load = function() {
-    return $.ajax({
-      url: this.options.url,
-      method: "get",
-      dataType: "json",
-      success: $.proxy(function(data) {
+    axios.get(this.options.url)
+      .then(({ data }) => {
         $(".loading", this.element).hide();
         this.prepareData(data.days, data.commits);
-        return this.buildGraph();
-      }, this)
-    });
+        this.buildGraph();
+      })
+      .catch(() => __('Error fetching network graph.'));
   };
 
   BranchGraph.prototype.prepareData = function(days, commits) {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index a2b8e6f6495..bcb342f407f 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -16,6 +16,7 @@ import Autosize from 'autosize';
 import 'vendor/jquery.caret'; // required by jquery.atwho
 import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
+import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
 import CommentTypeToggle from './comment_type_toggle';
@@ -252,26 +253,20 @@ export default class Notes {
       return;
     }
     this.refreshing = true;
-    return $.ajax({
-      url: this.notes_url,
-      headers: { 'X-Last-Fetched-At': this.last_fetched_at },
-      dataType: 'json',
-      success: (function(_this) {
-        return function(data) {
-          var notes;
-          notes = data.notes;
-          _this.last_fetched_at = data.last_fetched_at;
-          _this.setPollingInterval(data.notes.length);
-          return $.each(notes, function(i, note) {
-            _this.renderNote(note);
-          });
-        };
-      })(this)
-    }).always((function(_this) {
-      return function() {
-        return _this.refreshing = false;
-      };
-    })(this));
+    axios.get(this.notes_url, {
+      headers: {
+        'X-Last-Fetched-At': this.last_fetched_at,
+      },
+    }).then(({ data }) => {
+      const notes = data.notes;
+      this.last_fetched_at = data.last_fetched_at;
+      this.setPollingInterval(data.notes.length);
+      $.each(notes, (i, note) => this.renderNote(note));
+
+      this.refreshing = false;
+    }).catch(() => {
+      this.refreshing = false;
+    });
   }
 
   /**
diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 4534360d577..4e0afe13590 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -1,3 +1,7 @@
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
+
 export default class NotificationsForm {
   constructor() {
     this.toggleCheckbox = this.toggleCheckbox.bind(this);
@@ -27,24 +31,20 @@ export default class NotificationsForm {
   saveEvent($checkbox, $parent) {
     const form = $parent.parents('form:first');
 
-    return $.ajax({
-      url: form.attr('action'),
-      method: form.attr('method'),
-      dataType: 'json',
-      data: form.serialize(),
-      beforeSend: () => {
-        this.showCheckboxLoadingSpinner($parent);
-      },
-    }).done((data) => {
-      $checkbox.enable();
-      if (data.saved) {
-        $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
-        setTimeout(() => {
-          $parent.removeClass('is-loading')
-            .find('.custom-notification-event-loading')
-            .toggleClass('fa-spin fa-spinner fa-check is-done');
-        }, 2000);
-      }
-    });
+    this.showCheckboxLoadingSpinner($parent);
+
+    axios[form.attr('method')](form.attr('action'), form.serialize())
+      .then(({ data }) => {
+        $checkbox.enable();
+        if (data.saved) {
+          $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
+          setTimeout(() => {
+            $parent.removeClass('is-loading')
+              .find('.custom-notification-event-loading')
+              .toggleClass('fa-spin fa-spinner fa-check is-done');
+          }, 2000);
+        }
+      })
+      .catch(() => flash(__('There was an error saving your notification settings.')));
   }
 }
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 6552a88b606..fd3105b1960 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -1,4 +1,5 @@
 import { getParameterByName } from '~/lib/utils/common_utils';
+import axios from './lib/utils/axios_utils';
 import { removeParams } from './lib/utils/url_utility';
 
 const ENDLESS_SCROLL_BOTTOM_PX = 400;
@@ -22,24 +23,22 @@ export default {
 
   getOld() {
     this.loading.show();
-    $.ajax({
-      type: 'GET',
-      url: this.url,
-      data: `limit=${this.limit}&offset=${this.offset}`,
-      dataType: 'json',
-      error: () => this.loading.hide(),
-      success: (data) => {
-        this.append(data.count, this.prepareData(data.html));
-        this.callback();
-
-        // keep loading until we've filled the viewport height
-        if (!this.disable && !this.isScrollable()) {
-          this.getOld();
-        } else {
-          this.loading.hide();
-        }
+    axios.get(this.url, {
+      params: {
+        limit: this.limit,
+        offset: this.offset,
       },
-    });
+    }).then(({ data }) => {
+      this.append(data.count, this.prepareData(data.html));
+      this.callback();
+
+      // keep loading until we've filled the viewport height
+      if (!this.disable && !this.isScrollable()) {
+        this.getOld();
+      } else {
+        this.loading.hide();
+      }
+    }).catch(() => this.loading.hide());
   },
 
   append(count, html) {
diff --git a/app/assets/javascripts/pages/admin/cohorts/usage_ping.js b/app/assets/javascripts/pages/admin/cohorts/usage_ping.js
index 2389056bd02..914a9661c27 100644
--- a/app/assets/javascripts/pages/admin/cohorts/usage_ping.js
+++ b/app/assets/javascripts/pages/admin/cohorts/usage_ping.js
@@ -1,12 +1,13 @@
+import axios from '../../../lib/utils/axios_utils';
+import { __ } from '../../../locale';
+import flash from '../../../flash';
+
 export default function UsagePing() {
-  const usageDataUrl = $('.usage-data').data('endpoint');
+  const el = document.querySelector('.usage-data');
 
-  $.ajax({
-    type: 'GET',
-    url: usageDataUrl,
-    dataType: 'html',
-    success(html) {
-      $('.usage-data').html(html);
-    },
-  });
+  axios.get(el.dataset.endpoint, {
+    responseType: 'text',
+  }).then(({ data }) => {
+    el.innerHTML = data;
+  }).catch(() => flash(__('Error fetching usage ping data.')));
 }
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index e976a3d2f1d..b3f6a72fdcb 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -2,6 +2,9 @@
 import { visitUrl } from '~/lib/utils/url_utility';
 import UsersSelect from '~/users_select';
 import { isMetaClick } from '~/lib/utils/common_utils';
+import { __ } from '../../../../locale';
+import flash from '../../../../flash';
+import axios from '../../../../lib/utils/axios_utils';
 
 export default class Todos {
   constructor() {
@@ -59,18 +62,12 @@ export default class Todos {
     const target = e.target;
     target.setAttribute('disabled', true);
     target.classList.add('disabled');
-    $.ajax({
-      type: 'POST',
-      url: target.dataset.href,
-      dataType: 'json',
-      data: {
-        '_method': target.dataset.method,
-      },
-      success: (data) => {
+
+    axios[target.dataset.method](target.dataset.href)
+      .then(({ data }) => {
         this.updateRowState(target);
-        return this.updateBadges(data);
-      },
-    });
+        this.updateBadges(data);
+      }).catch(() => flash(__('Error updating todo status.')));
   }
 
   updateRowState(target) {
@@ -98,19 +95,15 @@ export default class Todos {
     e.preventDefault();
 
     const target = e.currentTarget;
-    const requestData = { '_method': target.dataset.method, ids: this.todo_ids };
     target.setAttribute('disabled', true);
     target.classList.add('disabled');
-    $.ajax({
-      type: 'POST',
-      url: target.dataset.href,
-      dataType: 'json',
-      data: requestData,
-      success: (data) => {
-        this.updateAllState(target, data);
-        return this.updateBadges(data);
-      },
-    });
+
+    axios[target.dataset.method](target.dataset.href, {
+      ids: this.todo_ids,
+    }).then(({ data }) => {
+      this.updateAllState(target, data);
+      this.updateBadges(data);
+    }).catch(() => flash(__('Error updating status for all todos.')));
   }
 
   updateAllState(target, data) {
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 28a0160f47d..c4b3356e478 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
@@ -11,5 +13,25 @@ export default () => {
   new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new
   $('#tree-slider').waitForImages(() =>
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath));
+
+  const commitPipelineStatusEl = document.getElementById('commit-pipeline-status');
+  const statusLink = document.querySelector('.commit-actions .ci-status-link');
+  if (statusLink != null) {
+    statusLink.remove();
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: commitPipelineStatusEl,
+      components: {
+        commitPipelineStatus,
+      },
+      render(createElement) {
+        return createElement('commit-pipeline-status', {
+          props: {
+            endpoint: commitPipelineStatusEl.dataset.endpoint,
+          },
+        });
+      },
+    });
+  }
 };
 
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/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
new file mode 100644
index 00000000000..63f20a0041d
--- /dev/null
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -0,0 +1,120 @@
+<script>
+  import Visibility from 'visibilityjs';
+  import ciIcon from '~/vue_shared/components/ci_icon.vue';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import Poll from '~/lib/utils/poll';
+  import Flash from '~/flash';
+  import { s__, sprintf } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import CommitPipelineService from '../services/commit_pipeline_service';
+
+  export default {
+    directives: {
+      tooltip,
+    },
+    components: {
+      ciIcon,
+      loadingIcon,
+    },
+    props: {
+      endpoint: {
+        type: String,
+        required: true,
+      },
+      /* This prop can be used to replace some of the `render_commit_status`
+      used across GitLab, this way we could use this vue component and add a
+      realtime status where it makes sense
+      realtime: {
+        type: Boolean,
+        required: false,
+        default: true,
+      }, */
+    },
+    data() {
+      return {
+        ciStatus: {},
+        isLoading: true,
+      };
+    },
+    computed: {
+      statusTitle() {
+        return sprintf(s__('Commits|Commit: %{commitText}'), { commitText: this.ciStatus.text });
+      },
+    },
+    mounted() {
+      this.service = new CommitPipelineService(this.endpoint);
+      this.initPolling();
+    },
+    methods: {
+      successCallback(res) {
+        const pipelines = res.data.pipelines;
+        if (pipelines.length > 0) {
+          // The pipeline entity always keeps the latest pipeline info on the `details.status`
+          this.ciStatus = pipelines[0].details.status;
+        }
+        this.isLoading = false;
+      },
+      errorCallback() {
+        this.ciStatus = {
+          text: 'not found',
+          icon: 'status_notfound',
+          group: 'notfound',
+        };
+        this.isLoading = false;
+        Flash(s__('Something went wrong on our end'));
+      },
+      initPolling() {
+        this.poll = new Poll({
+          resource: this.service,
+          method: 'fetchData',
+          successCallback: response => this.successCallback(response),
+          errorCallback: this.errorCallback,
+        });
+
+        if (!Visibility.hidden()) {
+          this.isLoading = true;
+          this.poll.makeRequest();
+        } else {
+          this.fetchPipelineCommitData();
+        }
+
+        Visibility.change(() => {
+          if (!Visibility.hidden()) {
+            this.poll.restart();
+          } else {
+            this.poll.stop();
+          }
+        });
+      },
+      fetchPipelineCommitData() {
+        this.service.fetchData()
+          .then(this.successCallback)
+          .catch(this.errorCallback);
+      },
+    },
+    destroy() {
+      this.poll.stop();
+    },
+  };
+</script>
+<template>
+  <div>
+    <loading-icon
+      label="Loading pipeline status"
+      size="3"
+      v-if="isLoading"
+    />
+    <a
+      v-else
+      :href="ciStatus.details_path"
+    >
+      <ci-icon
+        v-tooltip
+        :title="statusTitle"
+        :aria-label="statusTitle"
+        data-container="body"
+        :status="ciStatus"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/tree/services/commit_pipeline_service.js b/app/assets/javascripts/projects/tree/services/commit_pipeline_service.js
new file mode 100644
index 00000000000..4b4189bc2de
--- /dev/null
+++ b/app/assets/javascripts/projects/tree/services/commit_pipeline_service.js
@@ -0,0 +1,11 @@
+import axios from '~/lib/utils/axios_utils';
+
+export default class CommitPipelineService {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+  }
+
+  fetchData() {
+    return axios.get(this.endpoint);
+  }
+}
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 04c09d4eda7..7ca15537719 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.vue';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 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"