Merge branch 'master' into 44427-state-management-with-vuext

* master: (1063 commits)
  Replace commits spinach tests with RSpec analog
  Update repository.rb
  Add note about rebase/squash duplication in Gitaly
  Resolve "Reconcile project templates with Auto DevOps"
  Move import project pane to a separate partial
  Inform the user when there are no project import options available
  Clarify location of Vue templates
  Make add_index_to_namespaces_runners_token migration reversible
  Fix lambda arguments in Grape entities
  Update grape-entity 0.6.0 -> 0.7.1
  Fix constants in backfill_runner_type_for_ci_runners_post_migrate.rb
  Use limited_counter_with_delimiter in the admin user list tabs
  Remove a warning from spec/features/admin/admin_users_spec.rb
  Use smallint for runner_type since its an enum
  Dont remove duplicates in Runner.owned_or_shared since its not necessary
  Change the docs license to CC BY-SA
  Remove unnecessary disable transaction in add_ci_runner_namespaces
  Split migration to add and index namespaces.runners_token
  Output some useful information when running the rails console
  Revert "Use factory in specs for ProjectCiCdSettings"
  ...

21 files changed, 322 insertions, 266 deletions

diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index 0e3ac636661..9ce176744ba 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -52,16 +52,15 @@
       text() {
         const keepContributionsText = s__(`AdminArea|
           You are about to permanently delete the user %{username}.
-          This will delete all of the issues, merge requests, and groups linked to them.
+          Issues, merge requests, and groups linked to them will be transferred to a system-wide "Ghost-user".
           To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead.
           Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered.`);
 
         const deleteContributionsText = s__(`AdminArea|
           You are about to permanently delete the user %{username}.
-          Issues, merge requests, and groups linked to them will be transferred to a system-wide "Ghost-user".
+          This will delete all of the issues, merge requests, and groups linked to them.
           To avoid data loss, consider using the %{strong_start}block user%{strong_end} feature instead.
           Once you %{strong_start}Delete user%{strong_end}, it cannot be undone or recovered.`);
-
         return sprintf(this.deleteContributions ? deleteContributionsText : keepContributionsText,
           {
             username: `<strong>${_.escape(this.username)}</strong>`,
diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
index 397149aaa9e..8b529585898 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
@@ -6,4 +6,6 @@ document.addEventListener('DOMContentLoaded', () => {
   new Milestone(); // eslint-disable-line no-new
   new Sidebar(); // eslint-disable-line no-new
   new MountMilestoneSidebar(); // eslint-disable-line no-new
+
+  Milestone.initDeprecationMessage();
 });
diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js
index 88f40b5278e..74cc4ba42c1 100644
--- a/app/assets/javascripts/pages/groups/milestones/show/index.js
+++ b/app/assets/javascripts/pages/groups/milestones/show/index.js
@@ -1,3 +1,8 @@
 import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
+import Milestone from '~/milestone';
 
-document.addEventListener('DOMContentLoaded', initMilestonesShow);
+document.addEventListener('DOMContentLoaded', () => {
+  initMilestonesShow();
+
+  Milestone.initDeprecationMessage();
+});
diff --git a/app/assets/javascripts/pages/groups/settings/badges/index.js b/app/assets/javascripts/pages/groups/settings/badges/index.js
new file mode 100644
index 00000000000..74e96ee4a8f
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/settings/badges/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import { GROUP_BADGE } from '~/badges/constants';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountBadgeSettings(GROUP_BADGE);
+});
diff --git a/app/assets/javascripts/pages/projects/compare/index.js b/app/assets/javascripts/pages/projects/compare/index.js
index d1c78bd61db..768da8fb236 100644
--- a/app/assets/javascripts/pages/projects/compare/index.js
+++ b/app/assets/javascripts/pages/projects/compare/index.js
@@ -1,3 +1,3 @@
 import initCompareAutocomplete from '~/compare_autocomplete';
 
-document.addEventListener('DOMContentLoaded', initCompareAutocomplete);
+document.addEventListener('DOMContentLoaded', () => initCompareAutocomplete());
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index be37df36be8..628913483c6 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,12 +1,12 @@
 import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import projectAvatar from '../shared/project_avatar';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   setupProjectEdit();
   // Initialize expandable settings panels
   initSettingsPanels();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
new file mode 100644
index 00000000000..46f3f55a400
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
@@ -0,0 +1,60 @@
+import $ from 'jquery';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import axios from '~/lib/utils/axios_utils';
+import initCompareAutocomplete from '~/compare_autocomplete';
+import initTargetProjectDropdown from './target_project_dropdown';
+
+const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
+  $loadingIndicator.show();
+  $commitList.empty();
+
+  return axios
+    .get(url, {
+      params,
+    })
+    .then(({ data }) => {
+      $loadingIndicator.hide();
+      $commitList.html(data);
+      localTimeAgo($('.js-timeago', $commitList));
+    });
+};
+
+export default mrNewCompareNode => {
+  const { sourceBranchUrl, targetBranchUrl } = mrNewCompareNode.dataset;
+  initTargetProjectDropdown();
+
+  const updateSourceBranchCommitList = () =>
+    updateCommitList(
+      sourceBranchUrl,
+      $(mrNewCompareNode).find('.js-source-loading'),
+      $(mrNewCompareNode).find('.mr_source_commit'),
+      {
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[source_branch]']")
+          .val(),
+      },
+    );
+  const updateTargetBranchCommitList = () =>
+    updateCommitList(
+      targetBranchUrl,
+      $(mrNewCompareNode).find('.js-target-loading'),
+      $(mrNewCompareNode).find('.mr_target_commit'),
+      {
+        target_project_id: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_project_id]']")
+          .val(),
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_branch]']")
+          .val(),
+      },
+    );
+  initCompareAutocomplete('branches', $dropdown => {
+    if ($dropdown.is('.js-target-branch')) {
+      updateTargetBranchCommitList();
+    } else if ($dropdown.is('.js-source-branch')) {
+      updateSourceBranchCommitList();
+    }
+  });
+  updateSourceBranchCommitList();
+  updateTargetBranchCommitList();
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
index 6c9afddefac..01a0b4870c1 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
@@ -1,18 +1,15 @@
-import Compare from '~/compare';
 import MergeRequest from '~/merge_request';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initCompare from './compare';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
   if (mrNewCompareNode) {
-    new Compare({ // eslint-disable-line no-new
-      targetProjectUrl: mrNewCompareNode.dataset.targetProjectUrl,
-      sourceBranchUrl: mrNewCompareNode.dataset.sourceBranchUrl,
-      targetBranchUrl: mrNewCompareNode.dataset.targetBranchUrl,
-    });
+    initCompare(mrNewCompareNode);
   } else {
     const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
-    new MergeRequest({ // eslint-disable-line no-new
+    // eslint-disable-next-line no-new
+    new MergeRequest({
       action: mrNewSubmitNode.dataset.mrSubmitAction,
     });
     initPipelines();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
new file mode 100644
index 00000000000..b72fe6681df
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
@@ -0,0 +1,22 @@
+import $ from 'jquery';
+
+export default () => {
+  const $targetProjectDropdown = $('.js-target-project');
+  $targetProjectDropdown.glDropdown({
+    selectable: true,
+    fieldName: $targetProjectDropdown.data('fieldName'),
+    filterable: true,
+    id(obj, $el) {
+      return $el.data('id');
+    },
+    toggleLabel(obj, $el) {
+      return $el.text().trim();
+    },
+    clicked({ $el }) {
+      $('.mr_target_commit').empty();
+      const $targetBranchDropdown = $('.js-target-branch');
+      $targetBranchDropdown.data('refsUrl', $el.data('refsUrl'));
+      $targetBranchDropdown.data('glDropdown').clearMenu();
+    },
+  });
+};
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index ea6fd961393..7db644e2477 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,9 +1,9 @@
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   initProjectVisibilitySelector();
   initProjectNew.bindEvents();
 });
diff --git a/app/assets/javascripts/pages/projects/settings/badges/index/index.js b/app/assets/javascripts/pages/projects/settings/badges/index/index.js
new file mode 100644
index 00000000000..30469550866
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/badges/index/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import { PROJECT_BADGE } from '~/badges/constants';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  mountBadgeSettings(PROJECT_BADGE);
+});
diff --git a/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js
new file mode 100644
index 00000000000..ffc84dc106b
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/repository/create_deploy_token/index.js
@@ -0,0 +1,3 @@
+import initForm from '../form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/settings/repository/form.js b/app/assets/javascripts/pages/projects/settings/repository/form.js
new file mode 100644
index 00000000000..a5c17ab322c
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/settings/repository/form.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-new */
+
+import ProtectedTagCreate from '~/protected_tags/protected_tag_create';
+import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
+import initSettingsPanels from '~/settings_panels';
+import initDeployKeys from '~/deploy_keys';
+import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
+import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
+import DueDateSelectors from '~/due_date_select';
+
+export default () => {
+  new ProtectedTagCreate();
+  new ProtectedTagEditList();
+  initDeployKeys();
+  initSettingsPanels();
+  new ProtectedBranchCreate(); // eslint-disable-line no-new
+  new ProtectedBranchEditList(); // eslint-disable-line no-new
+  new DueDateSelectors();
+};
diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
index 788d86d1192..ffc84dc106b 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,17 +1,3 @@
-/* eslint-disable no-new */
+import initForm from '../form';
 
-import ProtectedTagCreate from '~/protected_tags/protected_tag_create';
-import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
-import initSettingsPanels from '~/settings_panels';
-import initDeployKeys from '~/deploy_keys';
-import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
-import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
-
-document.addEventListener('DOMContentLoaded', () => {
-  new ProtectedTagCreate();
-  new ProtectedTagEditList();
-  initDeployKeys();
-  initSettingsPanels();
-  new ProtectedBranchCreate(); // eslint-disable-line no-new
-  new ProtectedBranchEditList(); // eslint-disable-line no-new
-});
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/shared/project_new.js b/app/assets/javascripts/pages/projects/shared/project_new.js
deleted file mode 100644
index 56d5574aa2f..00000000000
--- a/app/assets/javascripts/pages/projects/shared/project_new.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable func-names, no-var, no-underscore-dangle, prefer-template, prefer-arrow-callback*/
-
-import $ from 'jquery';
-import VisibilitySelect from '../../../visibility_select';
-
-function highlightChanges($elm) {
-  $elm.addClass('highlight-changes');
-  setTimeout(() => $elm.removeClass('highlight-changes'), 10);
-}
-
-export default class ProjectNew {
-  constructor() {
-    this.toggleSettings = this.toggleSettings.bind(this);
-    this.$selects = $('.features select');
-    this.$repoSelects = this.$selects.filter('.js-repo-select');
-    this.$projectSelects = this.$selects.not('.js-repo-select');
-
-    $('.project-edit-container').on('ajax:before', () => {
-      $('.project-edit-container').hide();
-      return $('.save-project-loader').show();
-    });
-
-    this.initVisibilitySelect();
-
-    this.toggleSettings();
-    this.toggleSettingsOnclick();
-    this.toggleRepoVisibility();
-  }
-
-  initVisibilitySelect() {
-    const visibilityContainer = document.querySelector('.js-visibility-select');
-    if (!visibilityContainer) return;
-    const visibilitySelect = new VisibilitySelect(visibilityContainer);
-    visibilitySelect.init();
-
-    const $visibilitySelect = $(visibilityContainer).find('select');
-    let projectVisibility = $visibilitySelect.val();
-    const PROJECT_VISIBILITY_PRIVATE = '0';
-
-    $visibilitySelect.on('change', () => {
-      const newProjectVisibility = $visibilitySelect.val();
-
-      if (projectVisibility !== newProjectVisibility) {
-        this.$projectSelects.each((idx, select) => {
-          const $select = $(select);
-          const $options = $select.find('option');
-          const values = $.map($options, e => e.value);
-
-          // if switched to "private", limit visibility options
-          if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            if ($select.val() !== values[0] && $select.val() !== values[1]) {
-              $select.val(values[1]).trigger('change');
-              highlightChanges($select);
-            }
-            $options.slice(2).disable();
-          }
-
-          // if switched from "private", increase visibility for non-disabled options
-          if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            $options.enable();
-            if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
-              $select.val(values[values.length - 1]).trigger('change');
-              highlightChanges($select);
-            }
-          }
-        });
-
-        projectVisibility = newProjectVisibility;
-      }
-    });
-  }
-
-  toggleSettings() {
-    this.$selects.each(function () {
-      var $select = $(this);
-      var className = $select.data('field')
-        .replace(/_/g, '-')
-        .replace('access-level', 'feature');
-      ProjectNew._showOrHide($select, '.' + className);
-    });
-  }
-
-  toggleSettingsOnclick() {
-    this.$selects.on('change', this.toggleSettings);
-  }
-
-  static _showOrHide(checkElement, container) {
-    const $container = $(container);
-
-    if ($(checkElement).val() !== '0') {
-      return $container.show();
-    }
-    return $container.hide();
-  }
-
-  toggleRepoVisibility() {
-    var $repoAccessLevel = $('.js-repo-access-level select');
-    var $lfsEnabledOption = $('.js-lfs-enabled select');
-    var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
-    var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
-    var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
-
-    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
-      .nextAll()
-      .hide();
-
-    $repoAccessLevel
-      .off('change')
-      .on('change', function () {
-        var selectedVal = parseInt($repoAccessLevel.val(), 10);
-
-        this.$repoSelects.each(function () {
-          var $this = $(this);
-          var repoSelectVal = parseInt($this.val(), 10);
-
-          $this.find('option').enable();
-
-          if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
-            $this.val(selectedVal).trigger('change');
-            highlightChanges($this);
-          }
-
-          $this.find("option[value='" + selectedVal + "']").nextAll().disable();
-        });
-
-        if (selectedVal) {
-          this.$repoSelects.removeClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.removeClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = '';
-          }
-        } else {
-          this.$repoSelects.addClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.val('false').addClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = 'none';
-            containerRegistryCheckbox.checked = false;
-          }
-        }
-
-        prevSelectedVal = selectedVal;
-      }.bind(this));
-  }
-}
diff --git a/app/assets/javascripts/pages/projects/shared/save_project_loader.js b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
new file mode 100644
index 00000000000..aa3589ac88d
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
@@ -0,0 +1,12 @@
+import $ from 'jquery';
+
+export default function initProjectLoadingSpinner() {
+  const $formContainer = $('.project-edit-container');
+  const $loadingSpinner = $('.save-project-loader');
+
+  // show loading spinner when saving
+  $formContainer.on('ajax:before', () => {
+    $formContainer.hide();
+    $loadingSpinner.show();
+  });
+}
diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js
index a134599cb04..c35b9c30058 100644
--- a/app/assets/javascripts/pages/projects/snippets/show/index.js
+++ b/app/assets/javascripts/pages/projects/snippets/show/index.js
@@ -1,11 +1,13 @@
 import initNotes from '~/init_notes';
 import ZenMode from '~/zen_mode';
-import LineHighlighter from '../../../../line_highlighter';
-import BlobViewer from '../../../../blob/viewer';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import snippetEmbed from '~/snippet/snippet_embed';
 
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });
diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
index 08f0afdcce3..d321892d2d2 100644
--- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
  * Does that setting the current selected tab in the localStorage
  */
 export default class SigninTabsMemoizer {
-  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
diff --git a/app/assets/javascripts/pages/shared/mount_badge_settings.js b/app/assets/javascripts/pages/shared/mount_badge_settings.js
new file mode 100644
index 00000000000..1397c0834ff
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/mount_badge_settings.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import BadgeSettings from '~/badges/components/badge_settings.vue';
+import store from '~/badges/store';
+
+export default kind => {
+  const badgeSettingsElement = document.getElementById('badge-settings');
+
+  store.dispatch('loadBadges', {
+    kind,
+    apiEndpointUrl: badgeSettingsElement.dataset.apiEndpointUrl,
+    docsUrl: badgeSettingsElement.dataset.docsUrl,
+  });
+
+  return new Vue({
+    el: badgeSettingsElement,
+    store,
+    components: {
+      BadgeSettings,
+    },
+    render(createElement) {
+      return createElement(BadgeSettings);
+    },
+  });
+};
diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js
index f548b9fad65..26936110402 100644
--- a/app/assets/javascripts/pages/snippets/show/index.js
+++ b/app/assets/javascripts/pages/snippets/show/index.js
@@ -1,11 +1,13 @@
-import LineHighlighter from '../../../line_highlighter';
-import BlobViewer from '../../../blob/viewer';
-import ZenMode from '../../../zen_mode';
-import initNotes from '../../../init_notes';
+import LineHighlighter from '~/line_highlighter';
+import BlobViewer from '~/blob/viewer';
+import ZenMode from '~/zen_mode';
+import initNotes from '~/init_notes';
+import snippetEmbed from '~/snippet/snippet_embed';
 
 document.addEventListener('DOMContentLoaded', () => {
   new LineHighlighter(); // eslint-disable-line no-new
   new BlobViewer(); // eslint-disable-line no-new
   initNotes();
   new ZenMode(); // eslint-disable-line no-new
+  snippetEmbed();
 });
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 8ce938c958b..50d042fef29 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -19,7 +19,7 @@ function getSystemDate(systemUtcOffsetSeconds) {
   const date = new Date();
   const localUtcOffsetMinutes = 0 - date.getTimezoneOffset();
   const systemUtcOffsetMinutes = systemUtcOffsetSeconds / 60;
-  date.setMinutes((date.getMinutes() - localUtcOffsetMinutes) + systemUtcOffsetMinutes);
+  date.setMinutes(date.getMinutes() - localUtcOffsetMinutes + systemUtcOffsetMinutes);
   return date;
 }
 
@@ -35,18 +35,36 @@ function formatTooltipText({ date, count }) {
   return `${contribText}<br />${dateDayName} ${dateText}`;
 }
 
-const initColorKey = () => d3.scaleLinear().range(['#acd5f2', '#254e77']).domain([0, 3]);
+const initColorKey = () =>
+  d3
+    .scaleLinear()
+    .range(['#acd5f2', '#254e77'])
+    .domain([0, 3]);
 
 export default class ActivityCalendar {
-  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0) {
+  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0, firstDayOfWeek = 0) {
     this.calendarActivitiesPath = calendarActivitiesPath;
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
     this.daySpace = 1;
     this.daySize = 15;
-    this.daySizeWithSpace = this.daySize + (this.daySpace * 2);
-    this.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    this.daySizeWithSpace = this.daySize + this.daySpace * 2;
+    this.monthNames = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
     this.months = [];
+    this.firstDayOfWeek = firstDayOfWeek;
 
     // Loop through the timestamps to create a group of objects
     // The group of objects will be grouped based on the day of the week they are
@@ -70,7 +88,7 @@ export default class ActivityCalendar {
 
       // Create a new group array if this is the first day of the week
       // or if is first object
-      if ((day === 0 && i !== 0) || i === 0) {
+      if ((day === this.firstDayOfWeek && i !== 0) || i === 0) {
         this.timestampsTmp.push([]);
         group += 1;
       }
@@ -109,21 +127,30 @@ export default class ActivityCalendar {
   }
 
   renderSvg(container, group) {
-    const width = ((group + 1) * this.daySizeWithSpace) + this.getExtraWidthPadding(group);
-    return d3.select(container)
+    const width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
+    return d3
+      .select(container)
       .append('svg')
-        .attr('width', width)
-        .attr('height', 167)
-        .attr('class', 'contrib-calendar');
+      .attr('width', width)
+      .attr('height', 167)
+      .attr('class', 'contrib-calendar');
+  }
+
+  dayYPos(day) {
+    return this.daySizeWithSpace * ((day + 7 - this.firstDayOfWeek) % 7);
   }
 
   renderDays() {
-    this.svg.selectAll('g').data(this.timestampsTmp).enter().append('g')
+    this.svg
+      .selectAll('g')
+      .data(this.timestampsTmp)
+      .enter()
+      .append('g')
       .attr('transform', (group, i) => {
         _.each(group, (stamp, a) => {
           if (a === 0 && stamp.day === 0) {
             const month = stamp.date.getMonth();
-            const x = (this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace;
+            const x = this.daySizeWithSpace * i + 1 + this.daySizeWithSpace;
             const lastMonth = _.last(this.months);
             if (
               lastMonth == null ||
@@ -133,86 +160,113 @@ export default class ActivityCalendar {
             }
           }
         });
-        return `translate(${(this.daySizeWithSpace * i) + 1 + this.daySizeWithSpace}, 18)`;
+        return `translate(${this.daySizeWithSpace * i + 1 + this.daySizeWithSpace}, 18)`;
       })
       .selectAll('rect')
-        .data(stamp => stamp)
-        .enter()
-        .append('rect')
-          .attr('x', '0')
-          .attr('y', stamp => this.daySizeWithSpace * stamp.day)
-          .attr('width', this.daySize)
-          .attr('height', this.daySize)
-          .attr('fill', stamp => (
-            stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'
-          ))
-          .attr('title', stamp => formatTooltipText(stamp))
-          .attr('class', 'user-contrib-cell js-tooltip')
-          .attr('data-container', 'body')
-          .on('click', this.clickDay);
+      .data(stamp => stamp)
+      .enter()
+      .append('rect')
+      .attr('x', '0')
+      .attr('y', stamp => this.dayYPos(stamp.day))
+      .attr('width', this.daySize)
+      .attr('height', this.daySize)
+      .attr(
+        'fill',
+        stamp => (stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed'),
+      )
+      .attr('title', stamp => formatTooltipText(stamp))
+      .attr('class', 'user-contrib-cell js-tooltip')
+      .attr('data-container', 'body')
+      .on('click', this.clickDay);
   }
 
   renderDayTitles() {
     const days = [
       {
         text: 'M',
-        y: 29 + (this.daySizeWithSpace * 1),
-      }, {
+        y: 29 + this.dayYPos(1),
+      },
+      {
         text: 'W',
-        y: 29 + (this.daySizeWithSpace * 3),
-      }, {
+        y: 29 + this.dayYPos(3),
+      },
+      {
         text: 'F',
-        y: 29 + (this.daySizeWithSpace * 5),
+        y: 29 + this.dayYPos(5),
       },
     ];
-    this.svg.append('g')
+    this.svg
+      .append('g')
       .selectAll('text')
-        .data(days)
-        .enter()
-        .append('text')
-          .attr('text-anchor', 'middle')
-          .attr('x', 8)
-          .attr('y', day => day.y)
-          .text(day => day.text)
-          .attr('class', 'user-contrib-text');
+      .data(days)
+      .enter()
+      .append('text')
+      .attr('text-anchor', 'middle')
+      .attr('x', 8)
+      .attr('y', day => day.y)
+      .text(day => day.text)
+      .attr('class', 'user-contrib-text');
   }
 
   renderMonths() {
-    this.svg.append('g')
+    this.svg
+      .append('g')
       .attr('direction', 'ltr')
       .selectAll('text')
-        .data(this.months)
-        .enter()
-        .append('text')
-          .attr('x', date => date.x)
-          .attr('y', 10)
-          .attr('class', 'user-contrib-text')
-          .text(date => this.monthNames[date.month]);
+      .data(this.months)
+      .enter()
+      .append('text')
+      .attr('x', date => date.x)
+      .attr('y', 10)
+      .attr('class', 'user-contrib-text')
+      .text(date => this.monthNames[date.month]);
   }
 
   renderKey() {
-    const keyValues = ['no contributions', '1-9 contributions', '10-19 contributions', '20-29 contributions', '30+ contributions'];
-    const keyColors = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
+    const keyValues = [
+      'no contributions',
+      '1-9 contributions',
+      '10-19 contributions',
+      '20-29 contributions',
+      '30+ contributions',
+    ];
+    const keyColors = [
+      '#ededed',
+      this.colorKey(0),
+      this.colorKey(1),
+      this.colorKey(2),
+      this.colorKey(3),
+    ];
 
-    this.svg.append('g')
-      .attr('transform', `translate(18, ${(this.daySizeWithSpace * 8) + 16})`)
+    this.svg
+      .append('g')
+      .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
       .selectAll('rect')
-        .data(keyColors)
-        .enter()
-        .append('rect')
-          .attr('width', this.daySize)
-          .attr('height', this.daySize)
-          .attr('x', (color, i) => this.daySizeWithSpace * i)
-          .attr('y', 0)
-          .attr('fill', color => color)
-          .attr('class', 'js-tooltip')
-          .attr('title', (color, i) => keyValues[i])
-          .attr('data-container', 'body');
+      .data(keyColors)
+      .enter()
+      .append('rect')
+      .attr('width', this.daySize)
+      .attr('height', this.daySize)
+      .attr('x', (color, i) => this.daySizeWithSpace * i)
+      .attr('y', 0)
+      .attr('fill', color => color)
+      .attr('class', 'js-tooltip')
+      .attr('title', (color, i) => keyValues[i])
+      .attr('data-container', 'body');
   }
 
   initColor() {
-    const colorRange = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
-    return d3.scaleThreshold().domain([0, 10, 20, 30]).range(colorRange);
+    const colorRange = [
+      '#ededed',
+      this.colorKey(0),
+      this.colorKey(1),
+      this.colorKey(2),
+      this.colorKey(3),
+    ];
+    return d3
+      .scaleThreshold()
+      .domain([0, 10, 20, 30])
+      .range(colorRange);
   }
 
   clickDay(stamp) {
@@ -227,14 +281,15 @@ export default class ActivityCalendar {
 
       $('.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')));
+      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('');