Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

142 files changed, 723 insertions, 587 deletions

diff --git a/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js b/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js
index da7f81759ea..e78b3f9ec95 100644
--- a/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js
+++ b/app/assets/javascripts/pages/admin/abuse_reports/abuse_reports.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
-import { truncate } from '../../../lib/utils/text_utility';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { truncate } from '../../../lib/utils/text_utility';
 
 const MAX_MESSAGE_LENGTH = 500;
 const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
diff --git a/app/assets/javascripts/pages/admin/abuse_reports/index.js b/app/assets/javascripts/pages/admin/abuse_reports/index.js
index d97e24d9e0b..5649c47d7e8 100644
--- a/app/assets/javascripts/pages/admin/abuse_reports/index.js
+++ b/app/assets/javascripts/pages/admin/abuse_reports/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-new */
-import AbuseReports from './abuse_reports';
 import UsersSelect from '~/users_select';
+import AbuseReports from './abuse_reports';
 
 document.addEventListener('DOMContentLoaded', () => {
   new AbuseReports();
diff --git a/app/assets/javascripts/pages/admin/application_settings/general/index.js b/app/assets/javascripts/pages/admin/application_settings/general/index.js
index af1595398a8..f7bd32880ff 100644
--- a/app/assets/javascripts/pages/admin/application_settings/general/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/general/index.js
@@ -1,6 +1,10 @@
+// This is a true violation of @gitlab/no-runtime-template-compiler, as it
+// relies on app/views/admin/application_settings/_gitpod.html.haml for its
+// template.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import Vue from 'vue';
-import initUserInternalRegexPlaceholder from '../account_and_limits';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
+import initUserInternalRegexPlaceholder from '../account_and_limits';
 
 document.addEventListener('DOMContentLoaded', () => {
   initUserInternalRegexPlaceholder();
diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js
index cce30e6b12a..e7e74588bec 100644
--- a/app/assets/javascripts/pages/admin/application_settings/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/index.js
@@ -1,7 +1,8 @@
-import initSettingsPanels from '~/settings_panels';
+import initVariableList from '~/ci_variable_list';
 import projectSelect from '~/project_select';
+import initSearchSettings from '~/search_settings';
 import selfMonitor from '~/self_monitor';
-import initVariableList from '~/ci_variable_list';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   if (gon.features?.ciInstanceVariablesUi) {
@@ -11,4 +12,5 @@ document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
   initSettingsPanels();
   projectSelect();
+  initSearchSettings();
 });
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
index b995cb1d3dd..bc1d4dd6122 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -1,6 +1,6 @@
+import { deprecatedCreateFlash as flash } from '../../../flash';
 import axios from '../../../lib/utils/axios_utils';
 import { __ } from '../../../locale';
-import { deprecatedCreateFlash as flash } from '../../../flash';
 
 export default class PayloadPreviewer {
   constructor(trigger) {
diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
index 9e4c4d9f615..5a16716fe2d 100644
--- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import { debounce } from 'lodash';
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
-import { __ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
 import { textColorForBackground } from '~/lib/utils/color_utils';
+import { __ } from '~/locale';
 
 export default () => {
   const $broadcastMessageColor = $('.js-broadcast-message-color');
diff --git a/app/assets/javascripts/pages/admin/clusters/index/index.js b/app/assets/javascripts/pages/admin/clusters/index/index.js
index 744be65bfbe..a99e0dfa4f0 100644
--- a/app/assets/javascripts/pages/admin/clusters/index/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/index/index.js
@@ -1,5 +1,5 @@
-import PersistentUserCallout from '~/persistent_user_callout';
 import initClustersListApp from '~/clusters_list';
+import PersistentUserCallout from '~/persistent_user_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
   const callout = document.querySelector('.gcp-signup-offer');
diff --git a/app/assets/javascripts/pages/admin/clusters/show/index.js b/app/assets/javascripts/pages/admin/clusters/show/index.js
index f87da6c7074..9d94973af0d 100644
--- a/app/assets/javascripts/pages/admin/clusters/show/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/show/index.js
@@ -1,6 +1,6 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
-import initClusterHealth from '~/pages/projects/clusters/show/cluster_health';
 import initIntegrationForm from '~/clusters/forms/show';
+import initClusterHealth from '~/pages/projects/clusters/show/cluster_health';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/admin/cohorts/index.js b/app/assets/javascripts/pages/admin/cohorts/index.js
deleted file mode 100644
index 1cc54df15a1..00000000000
--- a/app/assets/javascripts/pages/admin/cohorts/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from 'vue';
-import UsagePingDisabled from '~/admin/cohorts/components/usage_ping_disabled.vue';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const emptyStateContainer = document.getElementById('js-cohorts-empty-state');
-
-  if (!emptyStateContainer) return false;
-
-  const { emptyStateSvgPath, enableUsagePingLink, docsLink } = emptyStateContainer.dataset;
-
-  return new Vue({
-    el: emptyStateContainer,
-    provide: {
-      svgPath: emptyStateSvgPath,
-      primaryButtonPath: enableUsagePingLink,
-      docsLink,
-    },
-    render(h) {
-      return h(UsagePingDisabled);
-    },
-  });
-});
diff --git a/app/assets/javascripts/pages/admin/groups/new/index.js b/app/assets/javascripts/pages/admin/groups/new/index.js
index b94c999ed12..94f7cfd55be 100644
--- a/app/assets/javascripts/pages/admin/groups/new/index.js
+++ b/app/assets/javascripts/pages/admin/groups/new/index.js
@@ -1,6 +1,6 @@
+import initFilePickers from '~/file_pickers';
 import BindInOut from '../../../../behaviors/bind_in_out';
 import Group from '../../../../group';
-import initFilePickers from '~/file_pickers';
 
 document.addEventListener('DOMContentLoaded', () => {
   BindInOut.initAll();
diff --git a/app/assets/javascripts/pages/admin/index.js b/app/assets/javascripts/pages/admin/index.js
index 3f4e658fc8d..792a6eda14e 100644
--- a/app/assets/javascripts/pages/admin/index.js
+++ b/app/assets/javascripts/pages/admin/index.js
@@ -1,6 +1,6 @@
-import initAdmin from './admin';
 import initAdminStatisticsPanel from '../../admin/statistics_panel/index';
 import initVueAlerts from '../../vue_alerts';
+import initAdmin from './admin';
 
 document.addEventListener('DOMContentLoaded', initVueAlerts);
 
diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js
index 2d77f2686f7..ba4b271f09e 100644
--- a/app/assets/javascripts/pages/admin/integrations/edit/index.js
+++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js
@@ -1,6 +1,5 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
-import initAlertsSettings from '~/alerts_service_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
@@ -11,6 +10,4 @@ document.addEventListener('DOMContentLoaded', () => {
     const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
     prometheusMetrics.loadActiveMetrics();
   }
-
-  initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
 });
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index d65593963ce..798eeee48bf 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 
diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
index 4df210debb5..46ddb95299d 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/index.js
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import Translate from '~/vue_shared/translate';
 import stopJobsModal from './components/stop_jobs_modal.vue';
 
@@ -18,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
       mounted() {
         stopJobsButton.classList.remove('disabled');
         stopJobsButton.addEventListener('click', () => {
-          this.$root.$emit('bv::show::modal', modalId, `#${buttonId}`);
+          this.$root.$emit(BV_SHOW_MODAL, modalId, `#${buttonId}`);
         });
       },
       render(createElement) {
diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js
index fa2b0546c02..2286a085143 100644
--- a/app/assets/javascripts/pages/admin/projects/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import ProjectsList from '~/projects_list';
 import NamespaceSelect from '~/namespace_select';
+import ProjectsList from '~/projects_list';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 
 function mountRemoveMemberModal() {
diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js
index bf512ef395d..1971323abac 100644
--- a/app/assets/javascripts/pages/admin/projects/index/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index/index.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
 
-import Translate from '~/vue_shared/translate';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import csrf from '~/lib/utils/csrf';
+import Translate from '~/vue_shared/translate';
 
 import deleteProjectModal from './components/delete_project_modal.vue';
 
@@ -24,7 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
           deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;
           deleteModal.projectName = buttonProps.projectName;
 
-          this.$root.$emit('bv::show::modal', 'delete-project-modal');
+          this.$root.$emit(BV_SHOW_MODAL, 'delete-project-modal');
         });
       });
     },
diff --git a/app/assets/javascripts/pages/admin/runners/index.js b/app/assets/javascripts/pages/admin/runners/index.js
index e60c6133c7c..f07ac1d8674 100644
--- a/app/assets/javascripts/pages/admin/runners/index.js
+++ b/app/assets/javascripts/pages/admin/runners/index.js
@@ -1,6 +1,7 @@
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilteredSearch({
@@ -8,4 +9,6 @@ document.addEventListener('DOMContentLoaded', () => {
     filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
     useDefaultState: true,
   });
+
+  initInstallRunner();
 });
diff --git a/app/assets/javascripts/pages/admin/services/edit/index.js b/app/assets/javascripts/pages/admin/services/edit/index.js
index e5e80d2f566..3d692ef4dcc 100644
--- a/app/assets/javascripts/pages/admin/services/edit/index.js
+++ b/app/assets/javascripts/pages/admin/services/edit/index.js
@@ -1,9 +1,6 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import initAlertsSettings from '~/alerts_service_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
   integrationSettingsForm.init();
-
-  initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
 });
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 9c303cc6445..d2b83f980d7 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
@@ -85,38 +85,36 @@ export default {
 
 <template>
   <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
-    <template>
-      <p>
-        <gl-sprintf :message="content">
-          <template #username>
-            <strong>{{ username }}</strong>
-          </template>
-          <template #strong="props">
-            <strong>{{ props.content }}</strong>
-          </template>
-        </gl-sprintf>
-      </p>
+    <p>
+      <gl-sprintf :message="content">
+        <template #username>
+          <strong>{{ username }}</strong>
+        </template>
+        <template #strong="props">
+          <strong>{{ props.content }}</strong>
+        </template>
+      </gl-sprintf>
+    </p>
 
-      <p>
-        <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
-          <template #username>
-            <code>{{ username }}</code>
-          </template>
-        </gl-sprintf>
-      </p>
+    <p>
+      <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
+        <template #username>
+          <code>{{ username }}</code>
+        </template>
+      </gl-sprintf>
+    </p>
 
-      <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
-        <input ref="method" type="hidden" name="_method" value="delete" />
-        <input :value="csrfToken" type="hidden" name="authenticity_token" />
-        <gl-form-input
-          v-model="enteredUsername"
-          autofocus
-          type="text"
-          name="username"
-          autocomplete="off"
-        />
-      </form>
-    </template>
+    <form ref="form" :action="deleteUserUrl" method="post" @submit.prevent>
+      <input ref="method" type="hidden" name="_method" value="delete" />
+      <input :value="csrfToken" type="hidden" name="authenticity_token" />
+      <gl-form-input
+        v-model="enteredUsername"
+        autofocus
+        type="text"
+        name="username"
+        autocomplete="off"
+      />
+    </form>
     <template #modal-footer>
       <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
       <gl-button
diff --git a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
index 24c9fa4cb3f..1dfea3f1e7b 100644
--- a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
+++ b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
@@ -12,6 +12,10 @@ export default {
       required: true,
       type: String,
     },
+    selector: {
+      required: true,
+      type: String,
+    },
   },
   data() {
     return {
@@ -34,22 +38,24 @@ export default {
   },
 
   mounted() {
-    document.addEventListener('click', this.handleClick);
-  },
+    /*
+     * Here we're looking for every button that needs to launch a modal
+     * on click, and then attaching a click event handler to show the modal
+     * if it's correctly configured.
+     *
+     * TODO: Replace this with integrated modal components https://gitlab.com/gitlab-org/gitlab/-/issues/320922
+     */
+    document.querySelectorAll(this.selector).forEach((button) => {
+      button.addEventListener('click', (e) => {
+        if (!button.dataset.glModalAction) return;
 
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleClick);
+        e.preventDefault();
+        this.show(button.dataset);
+      });
+    });
   },
 
   methods: {
-    handleClick(e) {
-      const { glModalAction: action } = e.target.dataset;
-      if (!action) return;
-
-      this.show(e.target.dataset);
-      e.preventDefault();
-    },
-
     show(modalData) {
       const { glModalAction: requestedAction } = modalData;
 
diff --git a/app/assets/javascripts/pages/admin/users/index.js b/app/assets/javascripts/pages/admin/users/index.js
index 75a8284f5f8..b1079c3b068 100644
--- a/app/assets/javascripts/pages/admin/users/index.js
+++ b/app/assets/javascripts/pages/admin/users/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
 
+import { initAdminUsersApp, initCohortsEmptyState } from '~/admin/users';
+import initTabs from '~/admin/users/tabs';
+import initConfirmModal from '~/confirm_modal';
+import csrf from '~/lib/utils/csrf';
 import Translate from '~/vue_shared/translate';
 import ModalManager from './components/user_modal_manager.vue';
-import csrf from '~/lib/utils/csrf';
-import initConfirmModal from '~/confirm_modal';
-import initAdminUsersApp from '~/admin/users';
 
+const CONFIRM_DELETE_BUTTON_SELECTOR = '.js-delete-user-modal-button';
 const MODAL_TEXTS_CONTAINER_SELECTOR = '#js-modal-texts';
 const MODAL_MANAGER_SELECTOR = '#js-delete-user-modal';
 
@@ -32,6 +34,8 @@ function loadModalsConfigurationFromHtml(modalsElement) {
 document.addEventListener('DOMContentLoaded', () => {
   Vue.use(Translate);
 
+  initAdminUsersApp();
+
   const modalConfiguration = loadModalsConfigurationFromHtml(
     document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR),
   );
@@ -49,6 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
       return h(ModalManager, {
         ref: 'manager',
         props: {
+          selector: CONFIRM_DELETE_BUTTON_SELECTOR,
           modalConfiguration,
           csrfToken: csrf.token,
         },
@@ -57,5 +62,6 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   initConfirmModal();
-  initAdminUsersApp();
+  initCohortsEmptyState();
+  initTabs();
 });
diff --git a/app/assets/javascripts/pages/dashboard/issues/index.js b/app/assets/javascripts/pages/dashboard/issues/index.js
index 71cdaf45052..3ad95fb1318 100644
--- a/app/assets/javascripts/pages/dashboard/issues/index.js
+++ b/app/assets/javascripts/pages/dashboard/issues/index.js
@@ -1,8 +1,8 @@
-import projectSelect from '~/project_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
-import { FILTERED_SEARCH } from '~/pages/constants';
 import initManualOrdering from '~/manual_ordering';
+import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilteredSearch({
diff --git a/app/assets/javascripts/pages/dashboard/merge_requests/index.js b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
index 7adae2cdb05..b099165e3f5 100644
--- a/app/assets/javascripts/pages/dashboard/merge_requests/index.js
+++ b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
@@ -1,8 +1,8 @@
 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
-import projectSelect from '~/project_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
   addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, true);
diff --git a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
index bed753b0c40..d17c37e9e1a 100644
--- a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
+++ b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
+import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 
 const trackingMixin = Tracking.mixin();
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index bd283201eff..d53cd405504 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -2,13 +2,13 @@
 
 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { visitUrl } from '~/lib/utils/url_utility';
-import UsersSelect from '~/users_select';
+import { deprecatedCreateFlash as flash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
 import { isMetaClick } from '~/lib/utils/common_utils';
 import { addDelimiter } from '~/lib/utils/text_utility';
+import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as flash } from '~/flash';
-import axios from '~/lib/utils/axios_utils';
+import UsersSelect from '~/users_select';
 
 export default class Todos {
   constructor() {
diff --git a/app/assets/javascripts/pages/groups/boards/index.js b/app/assets/javascripts/pages/groups/boards/index.js
index 922f39627c9..bde0007ec6a 100644
--- a/app/assets/javascripts/pages/groups/boards/index.js
+++ b/app/assets/javascripts/pages/groups/boards/index.js
@@ -1,6 +1,6 @@
-import UsersSelect from '~/users_select';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import initBoards from '~/boards';
+import UsersSelect from '~/users_select';
 
 new UsersSelect(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/groups/clusters/index.js b/app/assets/javascripts/pages/groups/clusters/index.js
index 9f466e0d60a..d5ce5d076a2 100644
--- a/app/assets/javascripts/pages/groups/clusters/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index.js
@@ -1,5 +1,5 @@
-import initCreateCluster from '~/create_cluster/init_create_cluster';
 import initIntegrationForm from '~/clusters/forms/show/index';
+import initCreateCluster from '~/create_cluster/init_create_cluster';
 
 document.addEventListener('DOMContentLoaded', () => {
   initCreateCluster(document, gon);
diff --git a/app/assets/javascripts/pages/groups/clusters/index/index.js b/app/assets/javascripts/pages/groups/clusters/index/index.js
index 744be65bfbe..a99e0dfa4f0 100644
--- a/app/assets/javascripts/pages/groups/clusters/index/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index/index.js
@@ -1,5 +1,5 @@
-import PersistentUserCallout from '~/persistent_user_callout';
 import initClustersListApp from '~/clusters_list';
+import PersistentUserCallout from '~/persistent_user_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
   const callout = document.querySelector('.gcp-signup-offer');
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index 33e552cd1ba..95ee512b71a 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -1,13 +1,13 @@
-import initFilePickers from '~/file_pickers';
-import TransferDropdown from '~/groups/transfer_dropdown';
+import { GROUP_BADGE } from '~/badges/constants';
 import initConfirmDangerModal from '~/confirm_danger_modal';
-import initSettingsPanels from '~/settings_panels';
-import setupTransferEdit from '~/transfer_edit';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
-import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
-import { GROUP_BADGE } from '~/badges/constants';
+import initFilePickers from '~/file_pickers';
+import TransferDropdown from '~/groups/transfer_dropdown';
 import groupsSelect from '~/groups_select';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import projectSelect from '~/project_select';
+import initSettingsPanels from '~/settings_panels';
+import setupTransferEdit from '~/transfer_edit';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilePickers();
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index 5346e3720e8..3496f699b06 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -1,13 +1,14 @@
 import Vue from 'vue';
-import memberExpirationDate from '~/member_expiration_date';
-import UsersSelect from '~/users_select';
+import { groupMemberRequestFormatter } from '~/groups/members/utils';
 import groupsSelect from '~/groups_select';
-import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
-import { initGroupMembersApp } from '~/groups/members';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import { memberRequestFormatter, groupLinkRequestFormatter } from '~/groups/members/utils';
 import { s__ } from '~/locale';
+import memberExpirationDate from '~/member_expiration_date';
+import { initMembersApp } from '~/members/index';
+import { groupLinkRequestFormatter } from '~/members/utils';
+import UsersSelect from '~/users_select';
+import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -25,11 +26,11 @@ function mountRemoveMemberModal() {
 
 const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
 
-initGroupMembersApp(document.querySelector('.js-group-members-list'), {
+initMembersApp(document.querySelector('.js-group-members-list'), {
   tableFields: SHARED_FIELDS.concat(['source', 'granted']),
   tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
   tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
-  requestFormatter: memberRequestFormatter,
+  requestFormatter: groupMemberRequestFormatter,
   filteredSearchBar: {
     show: true,
     tokens: ['two_factor', 'with_inherited_permissions'],
@@ -38,7 +39,8 @@ initGroupMembersApp(document.querySelector('.js-group-members-list'), {
     recentSearchesStorageKey: 'group_members',
   },
 });
-initGroupMembersApp(document.querySelector('.js-group-linked-list'), {
+
+initMembersApp(document.querySelector('.js-group-group-links-list'), {
   tableFields: SHARED_FIELDS.concat('granted'),
   tableAttrs: {
     table: { 'data-qa-selector': 'groups_list' },
@@ -46,9 +48,9 @@ initGroupMembersApp(document.querySelector('.js-group-linked-list'), {
   },
   requestFormatter: groupLinkRequestFormatter,
 });
-initGroupMembersApp(document.querySelector('.js-group-invited-members-list'), {
+initMembersApp(document.querySelector('.js-group-invited-members-list'), {
   tableFields: SHARED_FIELDS.concat('invited'),
-  requestFormatter: memberRequestFormatter,
+  requestFormatter: groupMemberRequestFormatter,
   filteredSearchBar: {
     show: true,
     tokens: [],
@@ -57,9 +59,9 @@ initGroupMembersApp(document.querySelector('.js-group-invited-members-list'), {
     recentSearchesStorageKey: 'group_invited_members',
   },
 });
-initGroupMembersApp(document.querySelector('.js-group-access-requests-list'), {
+initMembersApp(document.querySelector('.js-group-access-requests-list'), {
   tableFields: SHARED_FIELDS.concat('requested'),
-  requestFormatter: memberRequestFormatter,
+  requestFormatter: groupMemberRequestFormatter,
 });
 
 groupsSelect();
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index 5cb21ca61ab..b60607e8857 100644
--- a/app/assets/javascripts/pages/groups/issues/index.js
+++ b/app/assets/javascripts/pages/groups/issues/index.js
@@ -1,10 +1,10 @@
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-import initIssuablesList from '~/issues_list';
-import projectSelect from '~/project_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
-import { FILTERED_SEARCH } from '~/pages/constants';
+import initIssuablesList from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
+import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import projectSelect from '~/project_select';
 
 const ISSUE_BULK_UPDATE_PREFIX = 'issue_';
 
diff --git a/app/assets/javascripts/pages/groups/merge_requests/index.js b/app/assets/javascripts/pages/groups/merge_requests/index.js
index 2832cbed5ac..2f6f9bb16e1 100644
--- a/app/assets/javascripts/pages/groups/merge_requests/index.js
+++ b/app/assets/javascripts/pages/groups/merge_requests/index.js
@@ -1,9 +1,9 @@
 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
-import projectSelect from '~/project_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
+import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
 import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import projectSelect from '~/project_select';
 
 const ISSUABLE_BULK_UPDATE_PREFIX = 'merge_request_';
 
diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js
index ebaea5ef3dc..3094fe5cd21 100644
--- a/app/assets/javascripts/pages/groups/milestones/show/index.js
+++ b/app/assets/javascripts/pages/groups/milestones/show/index.js
@@ -1,7 +1,6 @@
-import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
-import initDeleteMilestoneModal from '~/pages/milestones/shared/delete_milestone_modal_init';
-
 import Milestone from '~/milestone';
+import initDeleteMilestoneModal from '~/pages/milestones/shared/delete_milestone_modal_init';
+import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initMilestonesShow();
diff --git a/app/assets/javascripts/pages/groups/new/group_path_validator.js b/app/assets/javascripts/pages/groups/new/group_path_validator.js
index 97f3d8cf7f5..89dccea2812 100644
--- a/app/assets/javascripts/pages/groups/new/group_path_validator.js
+++ b/app/assets/javascripts/pages/groups/new/group_path_validator.js
@@ -1,9 +1,9 @@
 import { debounce } from 'lodash';
-import InputValidator from '~/validators/input_validator';
 
-import fetchGroupPathAvailability from './fetch_group_path_availability';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
+import InputValidator from '~/validators/input_validator';
+import fetchGroupPathAvailability from './fetch_group_path_availability';
 
 const debounceTimeoutDuration = 1000;
 const invalidInputClass = 'gl-field-error-outline';
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index 7021473b380..63515abe698 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
 import BindInOut from '~/behaviors/bind_in_out';
+import initFilePickers from '~/file_pickers';
 import Group from '~/group';
 import GroupPathValidator from './group_path_validator';
-import initFilePickers from '~/file_pickers';
 
 const parentId = $('#group_parent_id');
 if (!parentId.val()) {
diff --git a/app/assets/javascripts/pages/groups/settings/badges/index.js b/app/assets/javascripts/pages/groups/settings/badges/index.js
index 74e96ee4a8f..3f48e4f281e 100644
--- a/app/assets/javascripts/pages/groups/settings/badges/index.js
+++ b/app/assets/javascripts/pages/groups/settings/badges/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
 import { GROUP_BADGE } from '~/badges/constants';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+import Translate from '~/vue_shared/translate';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index e8d8c985ade..378b8663777 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -1,9 +1,10 @@
-import initSettingsPanels from '~/settings_panels';
 import initVariableList from '~/ci_variable_list';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import GroupRunnersFilteredSearchTokenKeys from '~/filtered_search/group_runners_filtered_search_token_keys';
-import { FILTERED_SEARCH } from '~/pages/constants';
 import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
+import { FILTERED_SEARCH } from '~/pages/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
@@ -18,4 +19,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   initSharedRunnersForm();
   initVariableList();
+
+  initInstallRunner();
 });
diff --git a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js
index 2d77f2686f7..ba4b271f09e 100644
--- a/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js
+++ b/app/assets/javascripts/pages/groups/settings/integrations/edit/index.js
@@ -1,6 +1,5 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
-import initAlertsSettings from '~/alerts_service_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
@@ -11,6 +10,4 @@ document.addEventListener('DOMContentLoaded', () => {
     const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
     prometheusMetrics.loadActiveMetrics();
   }
-
-  initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
 });
diff --git a/app/assets/javascripts/pages/groups/settings/repository/show/index.js b/app/assets/javascripts/pages/groups/settings/repository/show/index.js
index f4b26ba81fe..a1bcf6dbf57 100644
--- a/app/assets/javascripts/pages/groups/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/repository/show/index.js
@@ -1,5 +1,5 @@
-import initSettingsPanels from '~/settings_panels';
 import DueDateSelectors from '~/due_date_select';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
diff --git a/app/assets/javascripts/pages/groups/shared/group_details.js b/app/assets/javascripts/pages/groups/shared/group_details.js
index 8d956c694c0..8c272e561db 100644
--- a/app/assets/javascripts/pages/groups/shared/group_details.js
+++ b/app/assets/javascripts/pages/groups/shared/group_details.js
@@ -1,13 +1,16 @@
 /* eslint-disable no-new */
 
-import { getPagePath, getDashPath } from '~/lib/utils/common_utils';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import { ACTIVE_TAB_SHARED, ACTIVE_TAB_ARCHIVED } from '~/groups/constants';
+import initInviteMembersBanner from '~/groups/init_invite_members_banner';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
+import { getPagePath, getDashPath } from '~/lib/utils/common_utils';
+import initNotificationsDropdown from '~/notifications';
 import notificationsDropdown from '~/notifications_dropdown';
 import NotificationsForm from '~/notifications_form';
 import ProjectsList from '~/projects_list';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GroupTabs from './group_tabs';
-import initInviteMembersBanner from '~/groups/init_invite_members_banner';
 
 export default function initGroupDetails(actionName = 'show') {
   const loadableActions = [ACTIVE_TAB_SHARED, ACTIVE_TAB_ARCHIVED];
@@ -20,8 +23,16 @@ export default function initGroupDetails(actionName = 'show') {
   new GroupTabs({ parentEl: '.groups-listing', action });
   new ShortcutsNavigation();
   new NotificationsForm();
-  notificationsDropdown();
+
+  if (gon.features?.vueNotificationDropdown) {
+    initNotificationsDropdown();
+  } else {
+    notificationsDropdown();
+  }
+
   new ProjectsList();
 
   initInviteMembersBanner();
+  initInviteMembersModal();
+  initInviteMembersTrigger();
 }
diff --git a/app/assets/javascripts/pages/groups/shared/group_tabs.js b/app/assets/javascripts/pages/groups/shared/group_tabs.js
index 033843d8504..73d810007dc 100644
--- a/app/assets/javascripts/pages/groups/shared/group_tabs.js
+++ b/app/assets/javascripts/pages/groups/shared/group_tabs.js
@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import { removeParams } from '~/lib/utils/url_utility';
 import createGroupTree from '~/groups';
 import {
   ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
@@ -9,8 +8,9 @@ import {
   GROUPS_LIST_HOLDER_CLASS,
   GROUPS_FILTER_FORM_CLASS,
 } from '~/groups/constants';
-import UserTabs from '~/pages/users/user_tabs';
 import GroupFilterableList from '~/groups/groups_filterable_list';
+import { removeParams } from '~/lib/utils/url_utility';
+import UserTabs from '~/pages/users/user_tabs';
 
 export default class GroupTabs extends UserTabs {
   constructor({ defaultAction = 'subgroups_and_projects', action, parentEl }) {
diff --git a/app/assets/javascripts/pages/help/index/index.js b/app/assets/javascripts/pages/help/index/index.js
index 1bafe564a37..fd8c590eb4e 100644
--- a/app/assets/javascripts/pages/help/index/index.js
+++ b/app/assets/javascripts/pages/help/index/index.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
-import VersionCheckImage from '~/version_check_image';
 import docs from '~/docs/docs_bundle';
+import VersionCheckImage from '~/version_check_image';
 
 document.addEventListener('DOMContentLoaded', () => {
   docs();
diff --git a/app/assets/javascripts/pages/import/bulk_imports/index.js b/app/assets/javascripts/pages/import/bulk_imports/status/index.js
index 37ac1a98466..37ac1a98466 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/index.js
+++ b/app/assets/javascripts/pages/import/bulk_imports/status/index.js
diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
index f47945c5a9f..16f68b94c9a 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
@@ -1,10 +1,10 @@
 <script>
 import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
+import { deprecatedCreateFlash as Flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
-import { deprecatedCreateFlash as Flash } from '~/flash';
-import { __, n__, s__, sprintf } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
+import { __, n__, s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index ecde11aff40..8d4997586dd 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { s__, sprintf } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { s__, sprintf } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
index e8b67891c42..3aeff2db2e0 100644
--- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
+++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import Translate from '~/vue_shared/translate';
 import DeleteMilestoneModal from './components/delete_milestone_modal.vue';
 import eventHub from './event_hub';
@@ -47,7 +48,7 @@ export default () => {
       deleteMilestoneButtons.forEach((button) => {
         button.removeAttribute('disabled');
         button.addEventListener('click', () => {
-          this.$root.$emit('bv::show::modal', 'delete-milestone-modal');
+          this.$root.$emit(BV_SHOW_MODAL, 'delete-milestone-modal');
           eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted);
 
           this.setModalProps({
diff --git a/app/assets/javascripts/pages/oauth/index.js b/app/assets/javascripts/pages/oauth/index.js
new file mode 100644
index 00000000000..2a120a690ef
--- /dev/null
+++ b/app/assets/javascripts/pages/oauth/index.js
@@ -0,0 +1,3 @@
+import initSearchSettings from '~/search_settings';
+
+initSearchSettings();
diff --git a/app/assets/javascripts/pages/profiles/accounts/show/index.js b/app/assets/javascripts/pages/profiles/accounts/show/index.js
index 6c1e953aa83..5350ef61184 100644
--- a/app/assets/javascripts/pages/profiles/accounts/show/index.js
+++ b/app/assets/javascripts/pages/profiles/accounts/show/index.js
@@ -1,5 +1,5 @@
-import initProfileAccount from '~/profile/account';
 import { initClose2faSuccessMessage } from '~/authentication/two_factor_auth';
+import initProfileAccount from '~/profile/account';
 
 document.addEventListener('DOMContentLoaded', initProfileAccount);
 
diff --git a/app/assets/javascripts/pages/profiles/index.js b/app/assets/javascripts/pages/profiles/index.js
index d2b00d0ef45..535fe5fa4eb 100644
--- a/app/assets/javascripts/pages/profiles/index.js
+++ b/app/assets/javascripts/pages/profiles/index.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import '~/profile/gl_crop';
 import Profile from '~/profile/profile';
+import initSearchSettings from '~/search_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line func-names
@@ -17,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   new Profile(); // eslint-disable-line no-new
+
+  initSearchSettings();
 });
diff --git a/app/assets/javascripts/pages/profiles/index/index.js b/app/assets/javascripts/pages/profiles/index/index.js
index 9bd430f4f11..586b3be8661 100644
--- a/app/assets/javascripts/pages/profiles/index/index.js
+++ b/app/assets/javascripts/pages/profiles/index/index.js
@@ -1,5 +1,5 @@
-import NotificationsForm from '../../../notifications_form';
 import notificationsDropdown from '../../../notifications_dropdown';
+import NotificationsForm from '../../../notifications_form';
 
 document.addEventListener('DOMContentLoaded', () => {
   new NotificationsForm(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/profiles/notifications/show/index.js b/app/assets/javascripts/pages/profiles/notifications/show/index.js
index 2e24a10fa5c..639f5deb72c 100644
--- a/app/assets/javascripts/pages/profiles/notifications/show/index.js
+++ b/app/assets/javascripts/pages/profiles/notifications/show/index.js
@@ -1,7 +1,9 @@
-import NotificationsForm from '../../../../notifications_form';
+import initNotificationsDropdown from '~/notifications';
 import notificationsDropdown from '../../../../notifications_dropdown';
+import NotificationsForm from '../../../../notifications_form';
 
 document.addEventListener('DOMContentLoaded', () => {
   new NotificationsForm(); // eslint-disable-line no-new
   notificationsDropdown();
+  initNotificationsDropdown();
 });
diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js
index b78f24ca2fb..a24c6ca7754 100644
--- a/app/assets/javascripts/pages/profiles/show/index.js
+++ b/app/assets/javascripts/pages/profiles/show/index.js
@@ -1,10 +1,10 @@
+import emojiRegex from 'emoji-regex';
 import $ from 'jquery';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
-import emojiRegex from 'emoji-regex';
+import * as Emoji from '~/emoji';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import EmojiMenu from './emoji_menu';
 import { __ } from '~/locale';
-import * as Emoji from '~/emoji';
+import EmojiMenu from './emoji_menu';
 
 const defaultStatusEmoji = 'speech_balloon';
 
diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
index 24dbc312dd2..186072531b8 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -1,6 +1,6 @@
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { mount2faRegistration } from '~/authentication/mount_2fa';
 import { initRecoveryCodes } from '~/authentication/two_factor_auth';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
diff --git a/app/assets/javascripts/pages/projects/activity/index.js b/app/assets/javascripts/pages/projects/activity/index.js
index d39ea3d10bf..03fbad0f1ec 100644
--- a/app/assets/javascripts/pages/projects/activity/index.js
+++ b/app/assets/javascripts/pages/projects/activity/index.js
@@ -1,7 +1,5 @@
 import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new Activities(); // eslint-disable-line no-new
-  new ShortcutsNavigation(); // eslint-disable-line no-new
-});
+new Activities(); // eslint-disable-line no-new
+new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/alert_management/details/index.js b/app/assets/javascripts/pages/projects/alert_management/details/index.js
index a20f6713c9d..183e07ca1fc 100644
--- a/app/assets/javascripts/pages/projects/alert_management/details/index.js
+++ b/app/assets/javascripts/pages/projects/alert_management/details/index.js
@@ -1,3 +1,3 @@
-import AlertDetails from '~/alert_management/details';
+import AlertDetails from '~/vue_shared/alert_details';
 
 AlertDetails('#js-alert_details');
diff --git a/app/assets/javascripts/pages/projects/artifacts/browse/index.js b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
index 26dc90a56d7..58ba6a500a3 100644
--- a/app/assets/javascripts/pages/projects/artifacts/browse/index.js
+++ b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
@@ -1,5 +1,5 @@
-import BuildArtifacts from '~/build_artifacts';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import BuildArtifacts from '~/build_artifacts';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/artifacts/file/index.js b/app/assets/javascripts/pages/projects/artifacts/file/index.js
index 249900d6cb7..eb5ecc27c43 100644
--- a/app/assets/javascripts/pages/projects/artifacts/file/index.js
+++ b/app/assets/javascripts/pages/projects/artifacts/file/index.js
@@ -1,5 +1,5 @@
-import BlobViewer from '~/blob/viewer/index';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import BlobViewer from '~/blob/viewer/index';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/blame/show/index.js b/app/assets/javascripts/pages/projects/blame/show/index.js
index 80d0bff92fa..fa22c11d1d7 100644
--- a/app/assets/javascripts/pages/projects/blame/show/index.js
+++ b/app/assets/javascripts/pages/projects/blame/show/index.js
@@ -1,3 +1,3 @@
 import initBlob from '~/pages/projects/init_blob';
 
-document.addEventListener('DOMContentLoaded', initBlob);
+initBlob();
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 57c4ffd3933..61ff1c95a38 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
-import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 import BlobViewer from '~/blob/viewer/index';
-import initBlob from '~/pages/projects/init_blob';
 import GpgBadges from '~/gpg_badges';
+import initBlob from '~/pages/projects/init_blob';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import '~/sourcegraph/load';
-import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/boards/index.js b/app/assets/javascripts/pages/projects/boards/index.js
index 79c3be771d0..3a06d0faa3e 100644
--- a/app/assets/javascripts/pages/projects/boards/index.js
+++ b/app/assets/javascripts/pages/projects/boards/index.js
@@ -1,6 +1,6 @@
-import UsersSelect from '~/users_select';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import initBoards from '~/boards';
+import UsersSelect from '~/users_select';
 
 document.addEventListener('DOMContentLoaded', () => {
   new UsersSelect(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/clusters/index/index.js b/app/assets/javascripts/pages/projects/clusters/index/index.js
index 1124eb5d939..2b5451bd18b 100644
--- a/app/assets/javascripts/pages/projects/clusters/index/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/index/index.js
@@ -1,8 +1,6 @@
 import initClustersListApp from 'ee_else_ce/clusters_list';
 import PersistentUserCallout from '~/persistent_user_callout';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const callout = document.querySelector('.gcp-signup-offer');
-  PersistentUserCallout.factory(callout);
-  initClustersListApp();
-});
+const callout = document.querySelector('.gcp-signup-offer');
+PersistentUserCallout.factory(callout);
+initClustersListApp();
diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/new/index.js
index 876bab0b339..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/projects/clusters/new/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/new/index.js
@@ -1,5 +1,3 @@
 import initNewCluster from '~/clusters/new_cluster';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initNewCluster();
-});
+initNewCluster();
diff --git a/app/assets/javascripts/pages/projects/clusters/show/index.js b/app/assets/javascripts/pages/projects/clusters/show/index.js
index a05ea8ae845..1d019285e23 100644
--- a/app/assets/javascripts/pages/projects/clusters/show/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/show/index.js
@@ -1,7 +1,7 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
+import initIntegrationForm from '~/clusters/forms/show';
 import initGkeNamespace from '~/create_cluster/gke_cluster_namespace';
 import initClusterHealth from './cluster_health';
-import initIntegrationForm from '~/clusters/forms/show';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/commit/pipelines/index.js b/app/assets/javascripts/pages/projects/commit/pipelines/index.js
index eaf340f2725..6efd8298bf8 100644
--- a/app/assets/javascripts/pages/projects/commit/pipelines/index.js
+++ b/app/assets/javascripts/pages/projects/commit/pipelines/index.js
@@ -1,5 +1,7 @@
-import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initCommitActions from '~/projects/commit';
+import { initCommitBoxInfo } from '~/projects/commit_box/info';
 
 initCommitBoxInfo();
 initPipelines();
+initCommitActions();
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index 5cfdb125e4f..90a663802d2 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -1,21 +1,19 @@
 /* eslint-disable no-new */
-
 import $ from 'jquery';
-import Diff from '~/diff';
-import ZenMode from '~/zen_mode';
+import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import initNotes from '~/init_notes';
+import Diff from '~/diff';
+import flash from '~/flash';
 import initChangesDropdown from '~/init_changes_dropdown';
-import '~/sourcegraph/load';
-import { handleLocationHash } from '~/lib/utils/common_utils';
+import initNotes from '~/init_notes';
 import axios from '~/lib/utils/axios_utils';
-import syntaxHighlight from '~/syntax_highlight';
-import flash from '~/flash';
+import { handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import loadAwardsHandler from '~/awards_handler';
+import initCommitActions from '~/projects/commit';
 import { initCommitBoxInfo } from '~/projects/commit_box/info';
-import initRevertCommitTrigger from '~/projects/commit/init_revert_commit_trigger';
-import initRevertCommitModal from '~/projects/commit/init_revert_commit_modal';
+import syntaxHighlight from '~/syntax_highlight';
+import ZenMode from '~/zen_mode';
+import '~/sourcegraph/load';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
@@ -47,5 +45,4 @@ if (filesContainer.length) {
   new Diff();
 }
 loadAwardsHandler();
-initRevertCommitModal();
-initRevertCommitTrigger();
+initCommitActions();
diff --git a/app/assets/javascripts/pages/projects/commits/show/index.js b/app/assets/javascripts/pages/projects/commits/show/index.js
index 6239e4c99d2..ee74628a994 100644
--- a/app/assets/javascripts/pages/projects/commits/show/index.js
+++ b/app/assets/javascripts/pages/projects/commits/show/index.js
@@ -1,6 +1,6 @@
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import CommitsList from '~/commits';
 import GpgBadges from '~/gpg_badges';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import mountCommits from '~/projects/commits';
 
 new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/compare/index/index.js b/app/assets/javascripts/pages/projects/compare/index/index.js
new file mode 100644
index 00000000000..b86c9ec442f
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/compare/index/index.js
@@ -0,0 +1,3 @@
+import initCompareSelector from '~/projects/compare';
+
+initCompareSelector();
diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js
index a626ed2d30b..f1cf9caa28b 100644
--- a/app/assets/javascripts/pages/projects/compare/show/index.js
+++ b/app/assets/javascripts/pages/projects/compare/show/index.js
@@ -1,6 +1,6 @@
 import Diff from '~/diff';
-import initChangesDropdown from '~/init_changes_dropdown';
 import GpgBadges from '~/gpg_badges';
+import initChangesDropdown from '~/init_changes_dropdown';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Diff(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 5f1d3edc3ba..9aa7e62e3ee 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,36 +1,34 @@
 import { PROJECT_BADGE } from '~/badges/constants';
-import initSettingsPanels from '~/settings_panels';
-import setupTransferEdit from '~/transfer_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
-import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
-import initProjectLoadingSpinner from '../shared/save_project_loader';
-import initProjectPermissionsSettings from '../shared/permissions';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import initProjectDeleteButton from '~/projects/project_delete_button';
-import UserCallout from '~/user_callout';
 import initServiceDesk from '~/projects/settings_service_desk';
-import mountSearchSettings from './mount_search_settings';
+import initSearchSettings from '~/search_settings';
+import initSettingsPanels from '~/settings_panels';
+import setupTransferEdit from '~/transfer_edit';
+import UserCallout from '~/user_callout';
+import initProjectPermissionsSettings from '../shared/permissions';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initFilePickers();
-  initConfirmDangerModal();
-  initSettingsPanels();
-  initProjectDeleteButton();
-  mountBadgeSettings(PROJECT_BADGE);
+initFilePickers();
+initConfirmDangerModal();
+initSettingsPanels();
+initProjectDeleteButton();
+mountBadgeSettings(PROJECT_BADGE);
 
-  new UserCallout({ className: 'js-service-desk-callout' }); // eslint-disable-line no-new
-  initServiceDesk();
+new UserCallout({ className: 'js-service-desk-callout' }); // eslint-disable-line no-new
+initServiceDesk();
 
-  initProjectLoadingSpinner();
-  initProjectPermissionsSettings();
-  setupTransferEdit('.js-project-transfer-form', 'select.select2');
+initProjectLoadingSpinner();
+initProjectPermissionsSettings();
+setupTransferEdit('.js-project-transfer-form', 'select.select2');
 
-  dirtySubmitFactory(
-    document.querySelectorAll(
-      '.js-general-settings-form, .js-mr-settings-form, .js-mr-approvals-form',
-    ),
-  );
+dirtySubmitFactory(
+  document.querySelectorAll(
+    '.js-general-settings-form, .js-mr-settings-form, .js-mr-approvals-form',
+  ),
+);
 
-  mountSearchSettings();
-});
+initSearchSettings();
diff --git a/app/assets/javascripts/pages/projects/edit/mount_search_settings.js b/app/assets/javascripts/pages/projects/edit/mount_search_settings.js
deleted file mode 100644
index 6c477dd7e80..00000000000
--- a/app/assets/javascripts/pages/projects/edit/mount_search_settings.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const mountSearchSettings = async () => {
-  const el = document.querySelector('.js-search-settings-app');
-
-  if (el) {
-    const { default: initSearch } = await import(
-      /* webpackChunkName: 'search_settings' */ '~/search_settings'
-    );
-    initSearch({ el });
-  }
-};
-
-export default mountSearchSettings;
diff --git a/app/assets/javascripts/pages/projects/environments/index/index.js b/app/assets/javascripts/pages/projects/environments/index/index.js
index 4d5106f6d5f..554ed4f9786 100644
--- a/app/assets/javascripts/pages/projects/environments/index/index.js
+++ b/app/assets/javascripts/pages/projects/environments/index/index.js
@@ -1,3 +1,3 @@
 import initEnvironments from '~/environments/';
 
-document.addEventListener('DOMContentLoaded', initEnvironments);
+initEnvironments();
diff --git a/app/assets/javascripts/pages/projects/environments/show/index.js b/app/assets/javascripts/pages/projects/environments/show/index.js
index 5d3a153cbd1..a4960037eaa 100644
--- a/app/assets/javascripts/pages/projects/environments/show/index.js
+++ b/app/assets/javascripts/pages/projects/environments/show/index.js
@@ -1,3 +1,3 @@
 import initShowEnvironment from '~/environments/mount_show';
 
-document.addEventListener('DOMContentLoaded', initShowEnvironment);
+initShowEnvironment();
diff --git a/app/assets/javascripts/pages/projects/find_file/show/index.js b/app/assets/javascripts/pages/projects/find_file/show/index.js
index 388d7d7bdda..a8225167c6b 100644
--- a/app/assets/javascripts/pages/projects/find_file/show/index.js
+++ b/app/assets/javascripts/pages/projects/find_file/show/index.js
@@ -1,13 +1,11 @@
 import $ from 'jquery';
-import ProjectFindFile from '~/project_find_file';
 import ShortcutsFindFile from '~/behaviors/shortcuts/shortcuts_find_file';
+import ProjectFindFile from '~/project_find_file';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const findElement = document.querySelector('.js-file-finder');
-  const projectFindFile = new ProjectFindFile($('.file-finder-holder'), {
-    url: findElement.dataset.fileFindUrl,
-    treeUrl: findElement.dataset.findTreeUrl,
-    blobUrlTemplate: findElement.dataset.blobUrlTemplate,
-  });
-  new ShortcutsFindFile(projectFindFile); // eslint-disable-line no-new
+const findElement = document.querySelector('.js-file-finder');
+const projectFindFile = new ProjectFindFile($('.file-finder-holder'), {
+  url: findElement.dataset.fileFindUrl,
+  treeUrl: findElement.dataset.findTreeUrl,
+  blobUrlTemplate: findElement.dataset.blobUrlTemplate,
 });
+new ShortcutsFindFile(projectFindFile); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
index a614443bcd9..bc47b124f8b 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlTabs, GlTab, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 import ForkGroupsListItem from './fork_groups_list_item.vue';
 
 export default {
@@ -14,10 +14,6 @@ export default {
     ForkGroupsListItem,
   },
   props: {
-    hasReachedProjectLimit: {
-      type: Boolean,
-      required: true,
-    },
     endpoint: {
       type: String,
       required: true,
@@ -77,7 +73,6 @@ export default {
           v-for="(namespace, index) in filteredNamespaces"
           :key="index"
           :group="namespace"
-          :has-reached-project-limit="hasReachedProjectLimit"
         />
       </ul>
     </gl-tab>
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue
index 57838050d55..46d1696b88b 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue
@@ -10,7 +10,6 @@ import {
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/groups/constants';
-import { __ } from '~/locale';
 import csrf from '~/lib/utils/csrf';
 
 export default {
@@ -31,10 +30,6 @@ export default {
       type: Object,
       required: true,
     },
-    hasReachedProjectLimit: {
-      type: Boolean,
-      required: true,
-    },
   },
   data() {
     return { namespaces: null, isForking: false };
@@ -60,12 +55,7 @@ export default {
       return GROUP_VISIBILITY_TYPE[this.group.visibility];
     },
     isSelectButtonDisabled() {
-      return this.hasReachedProjectLimit || !this.group.can_create_project;
-    },
-    selectButtonDisabledTooltip() {
-      return this.hasReachedProjectLimit
-        ? this.$options.i18n.hasReachedProjectLimitMessage
-        : this.$options.i18n.insufficientPermissionsMessage;
+      return !this.group.can_create_project;
     },
   },
 
@@ -76,13 +66,6 @@ export default {
     },
   },
 
-  i18n: {
-    hasReachedProjectLimitMessage: __('You have reached your project limit'),
-    insufficientPermissionsMessage: __(
-      'You must have permission to create a project in a namespace before forking.',
-    ),
-  },
-
   csrf,
 };
 </script>
@@ -94,7 +77,7 @@ export default {
       </div>
       <gl-link
         :href="group.relative_path"
-        class="gl-display-none gl-flex-shrink-0 gl-display-sm-flex gl-mr-3"
+        class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"
       >
         <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatarUrl" />
       </gl-link>
@@ -113,7 +96,7 @@ export default {
             <gl-badge
               v-if="isGroupPendingRemoval"
               variant="warning"
-              class="gl-display-none gl-display-sm-flex gl-mt-3 gl-mr-1"
+              class="gl-display-none gl-sm-display-flex gl-mt-3 gl-mr-1"
               >{{ __('pending removal') }}</gl-badge
             >
             <span v-if="group.permission" class="user-access-role gl-mt-3">
@@ -149,7 +132,9 @@ export default {
               </form>
             </div>
             <gl-tooltip v-if="isSelectButtonDisabled" :target="() => $refs.selectButtonWrapper">
-              {{ selectButtonDisabledTooltip }}
+              {{
+                __('You must have permission to create a project in a namespace before forking.')
+              }}
             </gl-tooltip>
           </template>
         </div>
diff --git a/app/assets/javascripts/pages/projects/forks/new/index.js b/app/assets/javascripts/pages/projects/forks/new/index.js
index 79485859738..a018d7e0926 100644
--- a/app/assets/javascripts/pages/projects/forks/new/index.js
+++ b/app/assets/javascripts/pages/projects/forks/new/index.js
@@ -1,13 +1,10 @@
 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import ForkGroupsList from './components/fork_groups_list.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('fork-groups-mount-element');
 
-  const { endpoint, canCreateProject } = mountElement.dataset;
-
-  const hasReachedProjectLimit = !parseBoolean(canCreateProject);
+  const { endpoint } = mountElement.dataset;
 
   return new Vue({
     el: mountElement,
@@ -15,7 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
       return h(ForkGroupsList, {
         props: {
           endpoint,
-          hasReachedProjectLimit,
         },
       });
     },
diff --git a/app/assets/javascripts/pages/projects/incidents/show/index.js b/app/assets/javascripts/pages/projects/incidents/show/index.js
index 5b3f03cd57e..a75b68873ef 100644
--- a/app/assets/javascripts/pages/projects/incidents/show/index.js
+++ b/app/assets/javascripts/pages/projects/incidents/show/index.js
@@ -1,9 +1,7 @@
-import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initRelatedIssues from '~/related_issues';
+import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initShow from '../../issues/show';
 
 initShow();
-if (!gon.features?.vueIssuableSidebar) {
-  initSidebarBundle();
-}
+initSidebarBundle();
 initRelatedIssues();
diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js
index 3e9962a4e72..45e9643b3f3 100644
--- a/app/assets/javascripts/pages/projects/index.js
+++ b/app/assets/javascripts/pages/projects/index.js
@@ -1,5 +1,5 @@
-import Project from './project';
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
+import Project from './project';
 
 new Project(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
index 5eb0d323266..06aba866ccf 100644
--- a/app/assets/javascripts/pages/projects/init_blob.js
+++ b/app/assets/javascripts/pages/projects/init_blob.js
@@ -1,9 +1,9 @@
-import LineHighlighter from '~/line_highlighter';
-import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
+import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import initBlobBundle from '~/blob_edit/blob_bundle';
+import LineHighlighter from '~/line_highlighter';
 
 export default () => {
   new LineHighlighter(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/init_form.js b/app/assets/javascripts/pages/projects/init_form.js
index 9f20a3e4e46..764c23e9a99 100644
--- a/app/assets/javascripts/pages/projects/init_form.js
+++ b/app/assets/javascripts/pages/projects/init_form.js
@@ -1,7 +1,7 @@
-import ZenMode from '~/zen_mode';
 import GLForm from '~/gl_form';
+import ZenMode from '~/zen_mode';
 
-export default function ($formEl) {
+export default function initProjectForm($formEl) {
   new ZenMode(); // eslint-disable-line no-new
   new GLForm($formEl); // eslint-disable-line no-new
 }
diff --git a/app/assets/javascripts/pages/projects/issues/form.js b/app/assets/javascripts/pages/projects/issues/form.js
index 34c7ee2e603..4e35f28ab06 100644
--- a/app/assets/javascripts/pages/projects/issues/form.js
+++ b/app/assets/javascripts/pages/projects/issues/form.js
@@ -2,12 +2,12 @@
 
 import $ from 'jquery';
 import IssuableForm from 'ee_else_ce/issuable_form';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GLForm from '~/gl_form';
+import initSuggestions from '~/issuable_suggestions';
 import LabelsSelect from '~/labels_select';
 import MilestoneSelect from '~/milestone_select';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
-import initSuggestions from '~/issuable_suggestions';
 
 export default () => {
   new ShortcutsNavigation();
diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js
index f3ccedc47c8..525d90e162d 100644
--- a/app/assets/javascripts/pages/projects/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/issues/index/index.js
@@ -1,15 +1,15 @@
 /* eslint-disable no-new */
 
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-import IssuableIndex from '~/issuable_index';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import UsersSelect from '~/users_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
-import { FILTERED_SEARCH } from '~/pages/constants';
-import { ISSUABLE_INDEX } from '~/pages/projects/constants';
+import initIssuableByEmail from '~/issuable/init_issuable_by_email';
+import IssuableIndex from '~/issuable_index';
 import initIssuablesList from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
-import { showLearnGitLabIssuesPopover } from '~/onboarding_issues';
+import { FILTERED_SEARCH } from '~/pages/constants';
+import { ISSUABLE_INDEX } from '~/pages/projects/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import UsersSelect from '~/users_select';
 
 IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
 
@@ -25,4 +25,4 @@ new UsersSelect();
 
 initManualOrdering();
 initIssuablesList();
-showLearnGitLabIssuesPopover();
+initIssuableByEmail();
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js b/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
index ccb453a59ea..bec207aa439 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
-import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
+import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 
 const AUTHOR_PARAM_KEY = 'author_username';
 
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
index 231ee6732e9..5be9f6117dc 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
@@ -1,5 +1,5 @@
-import FilteredSearchServiceDesk from './filtered_search';
 import initIssuablesList from '~/issues_list';
+import FilteredSearchServiceDesk from './filtered_search';
 
 const supportBotData = JSON.parse(
   document.querySelector('.js-service-desk-issues').dataset.supportBot,
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 7068574ecb8..992bf3c54ff 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -1,22 +1,21 @@
 import loadAwardsHandler from '~/awards_handler';
+import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initIssuableSidebar from '~/init_issuable_sidebar';
+import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
+import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
+import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
-import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
-import ZenMode from '~/zen_mode';
 import '~/notes/index';
-import { store } from '~/notes/stores';
-import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import initIncidentApp from '~/issue_show/incident';
-import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
-import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
-import initRelatedMergeRequestsApp from '~/related_merge_requests';
+import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import { parseIssuableData } from '~/issue_show/utils/parse_data';
-import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
-import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
-
-import { IssuableType } from '~/issuable_show/constants';
+import { store } from '~/notes/stores';
+import initRelatedMergeRequestsApp from '~/related_merge_requests';
+import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
+import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
+import ZenMode from '~/zen_mode';
 
-export default function () {
+export default function initShowIssue() {
   const initialDataEl = document.getElementById('js-issuable-app');
   const { issueType, ...issuableData } = parseIssuableData(initialDataEl);
 
diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js
index 630add51a97..e4f99d1e7fd 100644
--- a/app/assets/javascripts/pages/projects/issues/show/index.js
+++ b/app/assets/javascripts/pages/projects/issues/show/index.js
@@ -1,9 +1,7 @@
-import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initRelatedIssues from '~/related_issues';
+import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initShow from '../show';
 
 initShow();
-if (gon.features && !gon.features.vueIssuableSidebar) {
-  initSidebarBundle();
-}
+initSidebarBundle();
 initRelatedIssues();
diff --git a/app/assets/javascripts/pages/projects/jobs/index/index.js b/app/assets/javascripts/pages/projects/jobs/index/index.js
index c343a37b292..6a70d4cf26d 100644
--- a/app/assets/javascripts/pages/projects/jobs/index/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/index/index.js
@@ -1,26 +1,19 @@
 import Vue from 'vue';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
-import Tracking from '~/tracking';
 
 document.addEventListener('DOMContentLoaded', () => {
   const remainingTimeElements = document.querySelectorAll('.js-remaining-time');
   remainingTimeElements.forEach(
     (el) =>
       new Vue({
-        ...GlCountdown,
         el,
-        propsData: {
-          endDateString: el.dateTime,
+        render(h) {
+          return h(GlCountdown, {
+            props: {
+              endDateString: el.dateTime,
+            },
+          });
         },
       }),
   );
-
-  const trackButtonClick = () => {
-    if (gon.tracking_data) {
-      const { category, action, ...data } = gon.tracking_data;
-      Tracking.event(category, action, data);
-    }
-  };
-  const buttons = document.querySelectorAll('.js-empty-state-button');
-  buttons.forEach((button) => button.addEventListener('click', trackButtonClick));
 });
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index 8626fd18233..81ffaa6f7a3 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlSprintf, GlModal } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { s__, __, sprintf } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { s__, __, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
index 4f5e5c8cceb..9f782c07101 100644
--- a/app/assets/javascripts/pages/projects/labels/index/index.js
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -1,8 +1,9 @@
 import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
 import initLabels from '~/init_labels';
-import eventHub from '../event_hub';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
+import Translate from '~/vue_shared/translate';
 import PromoteLabelModal from '../components/promote_label_modal.vue';
+import eventHub from '../event_hub';
 
 Vue.use(Translate);
 
@@ -49,7 +50,7 @@ const initLabelIndex = () => {
       promoteLabelButtons.forEach((button) => {
         button.removeAttribute('disabled');
         button.addEventListener('click', () => {
-          this.$root.$emit('bv::show::modal', 'promote-label-modal');
+          this.$root.$emit(BV_SHOW_MODAL, 'promote-label-modal');
           eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
 
           this.setModalProps({
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
new file mode 100644
index 00000000000..0393793bfe1
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
@@ -0,0 +1,27 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import { ACTION_TEXT } from '../constants';
+
+export default {
+  components: { GlLink },
+  i18n: {
+    ACTION_TEXT,
+  },
+  props: {
+    actions: {
+      required: true,
+      type: Object,
+    },
+  },
+};
+</script>
+<template>
+  <ul>
+    <li v-for="(value, action) in actions" :key="action">
+      <span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
+      <span v-else>
+        <gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
+      </span>
+    </li>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
new file mode 100644
index 00000000000..0393793bfe1
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
@@ -0,0 +1,27 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import { ACTION_TEXT } from '../constants';
+
+export default {
+  components: { GlLink },
+  i18n: {
+    ACTION_TEXT,
+  },
+  props: {
+    actions: {
+      required: true,
+      type: Object,
+    },
+  },
+};
+</script>
+<template>
+  <ul>
+    <li v-for="(value, action) in actions" :key="action">
+      <span v-if="value.completed">{{ $options.i18n.ACTION_TEXT[action] }}</span>
+      <span v-else>
+        <gl-link :href="value.url">{{ $options.i18n.ACTION_TEXT[action] }}</gl-link>
+      </span>
+    </li>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
new file mode 100644
index 00000000000..8606af29785
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
@@ -0,0 +1,12 @@
+import { s__ } from '~/locale';
+
+export const ACTION_TEXT = {
+  gitWrite: s__('LearnGitLab|Create a repository'),
+  userAdded: s__('LearnGitLab|Invite your colleagues'),
+  pipelineCreated: s__('LearnGitLab|Set-up CI/CD'),
+  trialStarted: s__('LearnGitLab|Start a free trial of GitLab Gold'),
+  codeOwnersEnabled: s__('LearnGitLab|Add code owners'),
+  requiredMrApprovalsEnabled: s__('LearnGitLab|Enable require merge approvals'),
+  mergeRequestCreated: s__('LearnGitLab|Submit a merge request (MR)'),
+  securityScanEnabled: s__('LearnGitLab|Run a Security scan using CI/CD'),
+};
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
new file mode 100644
index 00000000000..c4dec89b984
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import LearnGitlabA from '../components/learn_gitlab_a.vue';
+import LearnGitlabB from '../components/learn_gitlab_b.vue';
+
+function initLearnGitlab() {
+  const el = document.getElementById('js-learn-gitlab-app');
+
+  if (!el) {
+    return false;
+  }
+
+  const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
+
+  const { learnGitlabA } = gon.experiments;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, { props: { actions } });
+    },
+  });
+}
+
+initLearnGitlab();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js
index 28641104c58..05019915fc9 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js
@@ -1,5 +1,5 @@
-import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initMergeConflicts from '~/merge_conflicts/merge_conflicts_bundle';
+import initSidebarBundle from '~/sidebar/sidebar_bundle';
 
 document.addEventListener('DOMContentLoaded', () => {
   initSidebarBundle();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/index.js
index febfecebbd2..34d9fa03d24 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/index.js
@@ -1,3 +1,3 @@
 import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request';
 
-document.addEventListener('DOMContentLoaded', initMergeRequest);
+initMergeRequest();
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
index eb2692c7cb4..1a0fa6e544e 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import { localTimeAgo } from '~/lib/utils/datetime_utility';
-import axios from '~/lib/utils/axios_utils';
 import initCompareAutocomplete from '~/compare_autocomplete';
+import axios from '~/lib/utils/axios_utils';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import initTargetProjectDropdown from './target_project_dropdown';
 
 const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
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 01a0b4870c1..9aecd154483 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,17 +1,15 @@
-import MergeRequest from '~/merge_request';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import MergeRequest from '~/merge_request';
 import initCompare from './compare';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
-  if (mrNewCompareNode) {
-    initCompare(mrNewCompareNode);
-  } else {
-    const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
-    // eslint-disable-next-line no-new
-    new MergeRequest({
-      action: mrNewSubmitNode.dataset.mrSubmitAction,
-    });
-    initPipelines();
-  }
-});
+const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
+if (mrNewCompareNode) {
+  initCompare(mrNewCompareNode);
+} else {
+  const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
+  // eslint-disable-next-line no-new
+  new MergeRequest({
+    action: mrNewSubmitNode.dataset.mrSubmitAction,
+  });
+  initPipelines();
+}
diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/check_form_state.js b/app/assets/javascripts/pages/projects/merge_requests/edit/check_form_state.js
new file mode 100644
index 00000000000..74178ab96e3
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/merge_requests/edit/check_form_state.js
@@ -0,0 +1,24 @@
+import { serializeForm } from '~/lib/utils/forms';
+
+const findForm = () => document.querySelector('.merge-request-form');
+const serializeFormData = () => JSON.stringify(serializeForm(findForm()));
+
+export default () => {
+  const oldFormData = serializeFormData();
+
+  const compareFormData = (e) => {
+    const newFormData = serializeFormData();
+
+    if (oldFormData !== newFormData) {
+      e.preventDefault();
+      // eslint-disable-next-line no-param-reassign
+      e.returnValue = ''; // Chrome requires returnValue to be set
+    }
+  };
+
+  window.addEventListener('beforeunload', compareFormData);
+
+  findForm().addEventListener('submit', () =>
+    window.removeEventListener('beforeunload', compareFormData),
+  );
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
index febfecebbd2..399aebb0c83 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
@@ -1,3 +1,7 @@
 import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request';
+import initCheckFormState from './check_form_state';
 
-document.addEventListener('DOMContentLoaded', initMergeRequest);
+document.addEventListener('DOMContentLoaded', () => {
+  initMergeRequest();
+  initCheckFormState();
+});
diff --git a/app/assets/javascripts/pages/projects/merge_requests/index/index.js b/app/assets/javascripts/pages/projects/merge_requests/index/index.js
index 94a12cc2706..76705256fe2 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/index/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/index/index.js
@@ -1,11 +1,12 @@
 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
-import IssuableIndex from '~/issuable_index';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import UsersSelect from '~/users_select';
-import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
+import initIssuableByEmail from '~/issuable/init_issuable_by_email';
+import IssuableIndex from '~/issuable_index';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import { ISSUABLE_INDEX } from '~/pages/projects/constants';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import UsersSelect from '~/users_select';
 
 new IssuableIndex(ISSUABLE_INDEX.MERGE_REQUEST); // eslint-disable-line no-new
 
@@ -19,3 +20,5 @@ initFilteredSearch({
 
 new UsersSelect(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
+
+initIssuableByEmail();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
index 76d72efb11b..7d5719cf8a8 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
@@ -2,8 +2,8 @@
 
 import $ from 'jquery';
 import IssuableForm from 'ee_else_ce/issuable_form';
-import Diff from '~/diff';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import Diff from '~/diff';
 import GLForm from '~/gl_form';
 import LabelsSelect from '~/labels_select';
 import MilestoneSelect from '~/milestone_select';
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 1a0c5860991..d4d5e9f2711 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -1,16 +1,16 @@
 import Vue from 'vue';
-import ZenMode from '~/zen_mode';
-import initIssuableSidebar from '~/init_issuable_sidebar';
+import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
-import { handleLocationHash } from '~/lib/utils/common_utils';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
-import initSourcegraph from '~/sourcegraph';
-import loadAwardsHandler from '~/awards_handler';
-import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
+import initIssuableSidebar from '~/init_issuable_sidebar';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
+import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
+import { handleLocationHash } from '~/lib/utils/common_utils';
 import StatusBox from '~/merge_request/components/status_box.vue';
+import initSourcegraph from '~/sourcegraph';
+import ZenMode from '~/zen_mode';
 
-export default function () {
+export default function initMergeRequestShow() {
   new ZenMode(); // eslint-disable-line no-new
   initIssuableSidebar();
   initPipelines();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index 602d749ee07..546fa66eda6 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -1,14 +1,12 @@
-import initMrNotes from '~/mr_notes';
 import { initReviewBar } from '~/batch_comments';
+import initMrNotes from '~/mr_notes';
+import store from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
-import initShow from '../init_merge_request_show';
 import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
-import store from '~/mr_notes/stores';
+import initShow from '../init_merge_request_show';
 
 initShow();
-if (gon.features && !gon.features.vueIssuableSidebar) {
-  initSidebarBundle();
-}
+initSidebarBundle();
 initMrNotes();
 initReviewBar();
 initIssuableHeaderWarning(store);
diff --git a/app/assets/javascripts/pages/projects/milestones/show/index.js b/app/assets/javascripts/pages/projects/milestones/show/index.js
index 84a52421598..a853413e1f7 100644
--- a/app/assets/javascripts/pages/projects/milestones/show/index.js
+++ b/app/assets/javascripts/pages/projects/milestones/show/index.js
@@ -1,5 +1,5 @@
-import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
 import milestones from '~/pages/milestones/shared';
+import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initMilestonesShow();
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index 88f4db3ec08..437594fdf11 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,7 +1,7 @@
+import { deprecatedCreateFlash as createFlash } from '~/flash';
+import { __ } from '~/locale';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
-import { __ } from '~/locale';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 document.addEventListener('DOMContentLoaded', () => {
   initProjectVisibilitySelector();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index aa7414f3ae7..3b19231720a 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlFormRadio, GlFormRadioGroup, GlLink, GlSprintf } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
+import { s__, sprintf } from '~/locale';
 
 const KEY_EVERY_DAY = 'everyDay';
 const KEY_EVERY_WEEK = 'everyWeek';
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index 8ee9d481466..92b2bc9644b 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -1,9 +1,9 @@
 <script>
-import Vue from 'vue';
-import Cookies from 'js-cookie';
 import { GlButton } from '@gitlab/ui';
-import Translate from '../../../../../vue_shared/translate';
+import Cookies from 'js-cookie';
+import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import Translate from '../../../../../vue_shared/translate';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
index 497e2c9c0ae..ce0e573fed2 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
@@ -1,11 +1,11 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import Translate from '../../../../vue_shared/translate';
+import setupNativeFormVariableList from '../../../../ci_variable_list/native_form_variable_list';
 import GlFieldErrors from '../../../../gl_field_errors';
+import Translate from '../../../../vue_shared/translate';
 import intervalPatternInput from './components/interval_pattern_input.vue';
-import TimezoneDropdown from './components/timezone_dropdown';
 import TargetBranchDropdown from './components/target_branch_dropdown';
-import setupNativeFormVariableList from '../../../../ci_variable_list/native_form_variable_list';
+import TimezoneDropdown from './components/timezone_dropdown';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/pages/projects/pipelines/new/index.js b/app/assets/javascripts/pages/projects/pipelines/new/index.js
index 08c31f2b3c6..32299287a9c 100644
--- a/app/assets/javascripts/pages/projects/pipelines/new/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/new/index.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
-import NewBranchForm from '~/new_branch_form';
 import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
+import NewBranchForm from '~/new_branch_form';
 import initNewPipeline from '~/pipeline_new/index';
 
 const el = document.getElementById('js-new-pipeline');
diff --git a/app/assets/javascripts/pages/projects/product_analytics/graphs/index.js b/app/assets/javascripts/pages/projects/product_analytics/graphs/index.js
index 0539d318471..ba03fccdb03 100644
--- a/app/assets/javascripts/pages/projects/product_analytics/graphs/index.js
+++ b/app/assets/javascripts/pages/projects/product_analytics/graphs/index.js
@@ -1,3 +1,3 @@
 import initActivityCharts from '~/analytics/product_analytics/activity_charts_bundle';
 
-document.addEventListener('DOMContentLoaded', () => initActivityCharts());
+initActivityCharts();
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index ef6953db83b..da8dc527d79 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -2,14 +2,14 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
-import { __ } from '~/locale';
-import { mergeUrlParams } from '~/lib/utils/url_utility';
-import { serializeForm } from '~/lib/utils/forms';
-import axios from '~/lib/utils/axios_utils';
+import initClonePanel from '~/clone_panel';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { serializeForm } from '~/lib/utils/forms';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
 import projectSelect from '../../project_select';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import initClonePanel from '~/clone_panel';
 
 export default class Project {
   constructor() {
@@ -126,8 +126,9 @@ export default class Project {
               const refs = this.fullData.Branches.concat(this.fullData.Tags);
               const currentRef = refs.find((ref) => loc.indexOf(ref) > -1);
               if (currentRef) {
-                const targetPath = loc.split(currentRef)[1].slice(1);
+                const targetPath = loc.split(currentRef)[1].slice(1).split('#')[0];
                 selectedUrl.searchParams.set('path', targetPath);
+                selectedUrl.hash = window.location.hash;
               }
             }
 
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index 3e0a48ee6a2..ed11b07be4a 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
-import Members from '~/members';
-import memberExpirationDate from '~/member_expiration_date';
-import UsersSelect from '~/users_select';
+import { deprecatedCreateFlash as flash } from '~/flash';
 import groupsSelect from '~/groups_select';
-import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
 import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
+import { __ } from '~/locale';
+import memberExpirationDate from '~/member_expiration_date';
+import Members from '~/members';
+import UsersSelect from '~/users_select';
+import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -21,14 +23,74 @@ function mountRemoveMemberModal() {
   });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  groupsSelect();
-  memberExpirationDate();
-  memberExpirationDate('.js-access-expiration-date-groups');
-  mountRemoveMemberModal();
-  initInviteMembersModal();
-  initInviteMembersTrigger();
-
-  new Members(); // eslint-disable-line no-new
-  new UsersSelect(); // eslint-disable-line no-new
-});
+groupsSelect();
+memberExpirationDate();
+memberExpirationDate('.js-access-expiration-date-groups');
+mountRemoveMemberModal();
+initInviteMembersModal();
+initInviteMembersTrigger();
+
+new Members(); // eslint-disable-line no-new
+new UsersSelect(); // eslint-disable-line no-new
+
+if (window.gon.features.vueProjectMembersList) {
+  const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
+
+  Promise.all([
+    import('~/members/index'),
+    import('~/members/utils'),
+    import('~/projects/members/utils'),
+    import('~/locale'),
+  ])
+    .then(
+      ([
+        { initMembersApp },
+        { groupLinkRequestFormatter },
+        { projectMemberRequestFormatter },
+        { s__ },
+      ]) => {
+        initMembersApp(document.querySelector('.js-project-members-list'), {
+          tableFields: SHARED_FIELDS.concat(['source', 'granted']),
+          tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
+          tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
+          requestFormatter: projectMemberRequestFormatter,
+          filteredSearchBar: {
+            show: true,
+            tokens: ['with_inherited_permissions'],
+            searchParam: 'search',
+            placeholder: s__('Members|Filter members'),
+            recentSearchesStorageKey: 'project_members',
+          },
+        });
+
+        initMembersApp(document.querySelector('.js-project-group-links-list'), {
+          tableFields: SHARED_FIELDS.concat('granted'),
+          tableAttrs: {
+            table: { 'data-qa-selector': 'groups_list' },
+            tr: { 'data-qa-selector': 'group_row' },
+          },
+          requestFormatter: groupLinkRequestFormatter,
+          filteredSearchBar: {
+            show: true,
+            tokens: [],
+            searchParam: 'search_groups',
+            placeholder: s__('Members|Search groups'),
+            recentSearchesStorageKey: 'project_group_links',
+          },
+        });
+
+        initMembersApp(document.querySelector('.js-project-invited-members-list'), {
+          tableFields: SHARED_FIELDS.concat('invited'),
+          requestFormatter: projectMemberRequestFormatter,
+        });
+
+        initMembersApp(document.querySelector('.js-project-access-requests-list'), {
+          tableFields: SHARED_FIELDS.concat('requested'),
+          requestFormatter: projectMemberRequestFormatter,
+        });
+      },
+    )
+    .catch(() => {
+      flash(__('An error occurred while loading the members, please try again.'));
+    });
+}
diff --git a/app/assets/javascripts/pages/projects/releases/edit/index.js b/app/assets/javascripts/pages/projects/releases/edit/index.js
index efa059dcd6d..e4a8b71eb16 100644
--- a/app/assets/javascripts/pages/projects/releases/edit/index.js
+++ b/app/assets/javascripts/pages/projects/releases/edit/index.js
@@ -1,7 +1,5 @@
-import ZenMode from '~/zen_mode';
 import initEditRelease from '~/releases/mount_edit';
+import ZenMode from '~/zen_mode';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ZenMode(); // eslint-disable-line no-new
-  initEditRelease();
-});
+new ZenMode(); // eslint-disable-line no-new
+initEditRelease();
diff --git a/app/assets/javascripts/pages/projects/releases/index/index.js b/app/assets/javascripts/pages/projects/releases/index/index.js
index 24c9cd528b3..caf95ae53c8 100644
--- a/app/assets/javascripts/pages/projects/releases/index/index.js
+++ b/app/assets/javascripts/pages/projects/releases/index/index.js
@@ -1,3 +1,3 @@
 import initReleases from '~/releases/mount_index';
 
-document.addEventListener('DOMContentLoaded', initReleases);
+initReleases();
diff --git a/app/assets/javascripts/pages/projects/releases/new/index.js b/app/assets/javascripts/pages/projects/releases/new/index.js
index 0e314aacf8a..31c1715ce2a 100644
--- a/app/assets/javascripts/pages/projects/releases/new/index.js
+++ b/app/assets/javascripts/pages/projects/releases/new/index.js
@@ -1,7 +1,5 @@
-import ZenMode from '~/zen_mode';
 import initNewRelease from '~/releases/mount_new';
+import ZenMode from '~/zen_mode';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ZenMode(); // eslint-disable-line no-new
-  initNewRelease();
-});
+new ZenMode(); // eslint-disable-line no-new
+initNewRelease();
diff --git a/app/assets/javascripts/pages/projects/releases/show/index.js b/app/assets/javascripts/pages/projects/releases/show/index.js
index 4e17e6ff311..0ec70ef24b6 100644
--- a/app/assets/javascripts/pages/projects/releases/show/index.js
+++ b/app/assets/javascripts/pages/projects/releases/show/index.js
@@ -1,3 +1,3 @@
 import initShowRelease from '~/releases/mount_show';
 
-document.addEventListener('DOMContentLoaded', initShowRelease);
+initShowRelease();
diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js
new file mode 100644
index 00000000000..101cb8356b2
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/security/configuration/index.js
@@ -0,0 +1,3 @@
+import { initStaticSecurityConfiguration } from '~/security_configuration';
+
+initStaticSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
diff --git a/app/assets/javascripts/pages/projects/serverless/index.js b/app/assets/javascripts/pages/projects/serverless/index.js
index a883737ac9b..640301dd478 100644
--- a/app/assets/javascripts/pages/projects/serverless/index.js
+++ b/app/assets/javascripts/pages/projects/serverless/index.js
@@ -1,7 +1,5 @@
 import ServerlessBundle from '~/serverless/serverless_bundle';
 import initServerlessSurveyBanner from '~/serverless/survey_banner';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initServerlessSurveyBanner();
-  new ServerlessBundle(); // eslint-disable-line no-new
-});
+initServerlessSurveyBanner();
+new ServerlessBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
index 04f3877ab48..8e603c5c1a2 100644
--- a/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -1,7 +1,6 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 import PrometheusAlerts from '~/prometheus_alerts';
-import initAlertsSettings from '~/alerts_service_settings';
+import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 
 document.addEventListener('DOMContentLoaded', () => {
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
@@ -15,5 +14,4 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   PrometheusAlerts();
-  initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
 });
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 1321155b7ec..be9259ec3ca 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -1,11 +1,12 @@
-import initSettingsPanels from '~/settings_panels';
+import initArtifactsSettings from '~/artifacts_settings';
 import SecretValues from '~/behaviors/secret_values';
-import registrySettingsApp from '~/registry/settings/registry_settings_bundle';
+import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
 import initVariableList from '~/ci_variable_list';
 import initDeployFreeze from '~/deploy_freeze';
-import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
+import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
-import initArtifactsSettings from '~/artifacts_settings';
+import registrySettingsApp from '~/registry/settings/registry_settings_bundle';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
@@ -39,4 +40,6 @@ document.addEventListener('DOMContentLoaded', () => {
   if (gon?.features?.vueifySharedRunnersToggle) {
     initSharedRunnersToggle();
   }
+
+  initInstallRunner();
 });
diff --git a/app/assets/javascripts/pages/projects/settings/operations/show/index.js b/app/assets/javascripts/pages/projects/settings/operations/show/index.js
index 153ccffd472..3a46241e2eb 100644
--- a/app/assets/javascripts/pages/projects/settings/operations/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/operations/show/index.js
@@ -1,9 +1,9 @@
-import mountErrorTrackingForm from '~/error_tracking_settings';
 import mountAlertsSettings from '~/alerts_settings';
-import mountOperationSettings from '~/operation_settings';
+import mountErrorTrackingForm from '~/error_tracking_settings';
 import mountGrafanaIntegration from '~/grafana_integration';
-import initSettingsPanels from '~/settings_panels';
 import initIncidentsSettings from '~/incidents_settings';
+import mountOperationSettings from '~/operation_settings';
+import initSettingsPanels from '~/settings_panels';
 
 initIncidentsSettings();
 mountErrorTrackingForm();
diff --git a/app/assets/javascripts/pages/projects/settings/repository/form.js b/app/assets/javascripts/pages/projects/settings/repository/form.js
index eff45bad603..8d390c8586b 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/form.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/form.js
@@ -1,13 +1,13 @@
 /* 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';
 import fileUpload from '~/lib/utils/file_upload';
+import ProtectedBranchCreate from '~/protected_branches/protected_branch_create';
+import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list';
+import ProtectedTagCreate from '~/protected_tags/protected_tag_create';
+import ProtectedTagEditList from '~/protected_tags/protected_tag_edit_list';
+import initSettingsPanels from '~/settings_panels';
 
 export default () => {
   new ProtectedTagCreate();
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 1ef4b460263..e90954c14c5 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,5 +1,5 @@
-import initForm from '../form';
 import MirrorRepos from '~/mirrors/mirror_repos';
+import initForm from '../form';
 
 document.addEventListener('DOMContentLoaded', () => {
   initForm();
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index eee666bea05..d62df77ad2c 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
-import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
+import { GlIcon, GlToggle } from '@gitlab/ui';
 import { featureAccessLevelNone } from '../constants';
 
 export default {
   components: {
     GlIcon,
-    projectFeatureToggle,
+    GlToggle,
   },
   model: {
     prop: 'value',
@@ -78,11 +77,11 @@ export default {
     class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"
   >
     <input v-if="name" :name="name" :value="value" type="hidden" />
-    <project-feature-toggle
+    <gl-toggle
       v-if="showToggle"
-      class="gl-flex-grow-0 gl-mr-3"
+      class="gl-mr-3"
       :value="featureEnabled"
-      :disabled-input="disabledInput"
+      :disabled="disabledInput"
       @change="toggleFeature"
     />
     <div class="select-wrapper gl-flex-fill-1">
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 4af476fbd68..94a9bc168e5 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -1,11 +1,9 @@
 <script>
-import { GlIcon, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui';
 
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
 import { s__ } from '~/locale';
-import projectFeatureSetting from './project_feature_setting.vue';
-import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue';
-import projectSettingRow from './project_setting_row.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   visibilityOptions,
   visibilityLevelDescriptions,
@@ -15,19 +13,20 @@ import {
   featureAccessLevelNone,
 } from '../constants';
 import { toggleHiddenClassBySelector } from '../external';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import projectFeatureSetting from './project_feature_setting.vue';
+import projectSettingRow from './project_setting_row.vue';
 
 const PAGE_FEATURE_ACCESS_LEVEL = s__('ProjectSettings|Everyone');
 
 export default {
   components: {
     projectFeatureSetting,
-    projectFeatureToggle,
     projectSettingRow,
     GlIcon,
     GlSprintf,
     GlLink,
     GlFormCheckbox,
+    GlToggle,
   },
   mixins: [settingsMixin, glFeatureFlagsMixin()],
 
@@ -75,6 +74,11 @@ export default {
       required: false,
       default: false,
     },
+    securityAndComplianceAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visibilityHelpPath: {
       type: String,
       required: false,
@@ -141,6 +145,7 @@ export default {
       metricsDashboardAccessLevel: featureAccessLevel.PROJECT_MEMBERS,
       analyticsAccessLevel: featureAccessLevel.EVERYONE,
       requirementsAccessLevel: featureAccessLevel.EVERYONE,
+      securityAndComplianceAccessLevel: featureAccessLevel.PROJECT_MEMBERS,
       operationsAccessLevel: featureAccessLevel.EVERYONE,
       containerRegistryEnabled: true,
       lfsEnabled: true,
@@ -218,11 +223,11 @@ export default {
 
     repositoryHelpText() {
       if (this.visibilityLevel === visibilityOptions.PRIVATE) {
-        return s__('ProjectSettings|View and edit files in this project');
+        return s__('ProjectSettings|View and edit files in this project.');
       }
 
       return s__(
-        'ProjectSettings|View and edit files in this project. Non-project members will only have read access',
+        'ProjectSettings|View and edit files in this project. Non-project members will only have read access.',
       );
     },
   },
@@ -264,6 +269,10 @@ export default {
           featureAccessLevel.PROJECT_MEMBERS,
           this.requirementsAccessLevel,
         );
+        this.securityAndComplianceAccessLevel = Math.min(
+          featureAccessLevel.PROJECT_MEMBERS,
+          this.securityAndComplianceAccessLevel,
+        );
         this.operationsAccessLevel = Math.min(
           featureAccessLevel.PROJECT_MEMBERS,
           this.operationsAccessLevel,
@@ -390,7 +399,7 @@ export default {
             name="project[request_access_enabled]"
           />
           <input v-model="requestAccessEnabled" type="checkbox" />
-          {{ s__('ProjectSettings|Allow users to request access') }}
+          {{ s__('ProjectSettings|Users can request access') }}
         </label>
       </project-setting-row>
     </div>
@@ -401,7 +410,7 @@ export default {
       <project-setting-row
         ref="issues-settings"
         :label="s__('ProjectSettings|Issues')"
-        :help-text="s__('ProjectSettings|Lightweight issue tracking system for this project')"
+        :help-text="s__('ProjectSettings|Lightweight issue tracking system.')"
       >
         <project-feature-setting
           v-model="issuesAccessLevel"
@@ -424,7 +433,7 @@ export default {
         <project-setting-row
           ref="merge-request-settings"
           :label="s__('ProjectSettings|Merge requests')"
-          :help-text="s__('ProjectSettings|Submit changes to be merged upstream')"
+          :help-text="s__('ProjectSettings|Submit changes to be merged upstream.')"
         >
           <project-feature-setting
             v-model="mergeRequestsAccessLevel"
@@ -436,9 +445,7 @@ export default {
         <project-setting-row
           ref="fork-settings"
           :label="s__('ProjectSettings|Forks')"
-          :help-text="
-            s__('ProjectSettings|Allow users to make copies of your repository to a new project')
-          "
+          :help-text="s__('ProjectSettings|Users can copy the repository to a new project.')"
         >
           <project-feature-setting
             v-model="forkingAccessLevel"
@@ -450,7 +457,7 @@ export default {
         <project-setting-row
           ref="pipeline-settings"
           :label="s__('ProjectSettings|Pipelines')"
-          :help-text="s__('ProjectSettings|Build, test, and deploy your changes')"
+          :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')"
         >
           <project-feature-setting
             v-model="buildsAccessLevel"
@@ -475,9 +482,10 @@ export default {
               )
             }}
           </div>
-          <project-feature-toggle
+          <gl-toggle
             v-model="containerRegistryEnabled"
-            :disabled-input="!repositoryEnabled"
+            class="gl-my-2"
+            :disabled="!repositoryEnabled"
             name="project[container_registry_enabled]"
           />
         </project-setting-row>
@@ -487,19 +495,20 @@ export default {
           :help-path="lfsHelpPath"
           :label="s__('ProjectSettings|Git Large File Storage (LFS)')"
           :help-text="
-            s__('ProjectSettings|Manages large files such as audio, video, and graphics files')
+            s__('ProjectSettings|Manages large files such as audio, video, and graphics files.')
           "
         >
-          <project-feature-toggle
+          <gl-toggle
             v-model="lfsEnabled"
-            :disabled-input="!repositoryEnabled"
+            class="gl-my-2"
+            :disabled="!repositoryEnabled"
             name="project[lfs_enabled]"
           />
           <p v-if="!lfsEnabled && lfsObjectsExist">
             <gl-sprintf
               :message="
                 s__(
-                  'ProjectSettings|LFS objects from this repository are still available to forks. %{linkStart}How do I remove them?%{linkEnd}',
+                  'ProjectSettings|LFS objects from this repository are available to forks. %{linkStart}How do I remove them?%{linkEnd}',
                 )
               "
             >
@@ -519,12 +528,13 @@ export default {
           :help-path="packagesHelpPath"
           :label="s__('ProjectSettings|Packages')"
           :help-text="
-            s__('ProjectSettings|Every project can have its own space to store its packages')
+            s__('ProjectSettings|Every project can have its own space to store its packages.')
           "
         >
-          <project-feature-toggle
+          <gl-toggle
             v-model="packagesEnabled"
-            :disabled-input="!repositoryEnabled"
+            class="gl-my-2"
+            :disabled="!repositoryEnabled"
             name="project[packages_enabled]"
           />
         </project-setting-row>
@@ -532,7 +542,7 @@ export default {
       <project-setting-row
         ref="analytics-settings"
         :label="s__('ProjectSettings|Analytics')"
-        :help-text="s__('ProjectSettings|View project analytics')"
+        :help-text="s__('ProjectSettings|View project analytics.')"
       >
         <project-feature-setting
           v-model="analyticsAccessLevel"
@@ -544,7 +554,7 @@ export default {
         v-if="requirementsAvailable"
         ref="requirements-settings"
         :label="s__('ProjectSettings|Requirements')"
-        :help-text="s__('ProjectSettings|Requirements management system for this project')"
+        :help-text="s__('ProjectSettings|Requirements management system.')"
       >
         <project-feature-setting
           v-model="requirementsAccessLevel"
@@ -553,9 +563,20 @@ export default {
         />
       </project-setting-row>
       <project-setting-row
+        v-if="securityAndComplianceAvailable"
+        :label="s__('ProjectSettings|Security & Compliance')"
+        :help-text="s__('ProjectSettings|Security & Compliance for this project')"
+      >
+        <project-feature-setting
+          v-model="securityAndComplianceAccessLevel"
+          :options="featureAccessLevelOptions"
+          name="project[project_feature_attributes][security_and_compliance_access_level]"
+        />
+      </project-setting-row>
+      <project-setting-row
         ref="wiki-settings"
         :label="s__('ProjectSettings|Wiki')"
-        :help-text="s__('ProjectSettings|Pages for project documentation')"
+        :help-text="s__('ProjectSettings|Pages for project documentation.')"
       >
         <project-feature-setting
           v-model="wikiAccessLevel"
@@ -566,7 +587,7 @@ export default {
       <project-setting-row
         ref="snippet-settings"
         :label="s__('ProjectSettings|Snippets')"
-        :help-text="s__('ProjectSettings|Share code pastes with others out of Git repository')"
+        :help-text="s__('ProjectSettings|Share code with others outside the project.')"
       >
         <project-feature-setting
           v-model="snippetsAccessLevel"
@@ -580,7 +601,7 @@ export default {
         :help-path="pagesHelpPath"
         :label="s__('ProjectSettings|Pages')"
         :help-text="
-          s__('ProjectSettings|With GitLab Pages you can host your static websites on GitLab')
+          s__('ProjectSettings|With GitLab Pages you can host your static websites on GitLab.')
         "
       >
         <project-feature-setting
@@ -592,7 +613,7 @@ export default {
       <project-setting-row
         ref="operations-settings"
         :label="s__('ProjectSettings|Operations')"
-        :help-text="s__('ProjectSettings|Environments, logs, cluster management, and more')"
+        :help-text="s__('ProjectSettings|Environments, logs, cluster management, and more.')"
       >
         <project-feature-setting
           v-model="operationsAccessLevel"
@@ -604,11 +625,7 @@ export default {
         <project-setting-row
           ref="metrics-visibility-settings"
           :label="__('Metrics Dashboard')"
-          :help-text="
-            s__(
-              'ProjectSettings|With Metrics Dashboard you can visualize this project performance metrics',
-            )
-          "
+          :help-text="s__('ProjectSettings|Visualize the project\'s performance metrics.')"
         >
           <project-feature-setting
             v-model="metricsDashboardAccessLevel"
@@ -626,9 +643,7 @@ export default {
         {{ s__('ProjectSettings|Disable email notifications') }}
       </label>
       <span class="form-text text-muted">{{
-        s__(
-          'ProjectSettings|This setting will override user notification preferences for all project members.',
-        )
+        s__('ProjectSettings|Override user notification preferences for all project members.')
       }}</span>
     </project-setting-row>
     <project-setting-row class="mb-3">
@@ -644,7 +659,7 @@ export default {
         {{ s__('ProjectSettings|Show default award emojis') }}
         <template #help>{{
           s__(
-            'ProjectSettings|When enabled, issues, merge requests, and snippets will always show thumbs-up and thumbs-down award emoji buttons.',
+            'ProjectSettings|Always show thumbs-up and thumbs-down award emoji buttons on issues, merge requests, and snippets.',
           )
         }}</template>
       </gl-form-checkbox>
@@ -662,9 +677,7 @@ export default {
       <gl-form-checkbox v-model="allowEditingCommitMessages">
         {{ s__('ProjectSettings|Allow editing commit messages') }}
         <template #help>{{
-          s__(
-            'ProjectSettings|When enabled, commit authors will be able to edit commit messages on unprotected branches.',
-          )
+          s__('ProjectSettings|Commit authors can edit commit messages on unprotected branches.')
         }}</template>
       </gl-form-checkbox>
     </project-setting-row>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js b/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js
index ae0936417ad..b52e30dae39 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js
+++ b/app/assets/javascripts/pages/projects/shared/permissions/mixins/settings_pannel_mixin.js
@@ -3,6 +3,7 @@ export default {
     return {
       packagesEnabled: false,
       requirementsEnabled: false,
+      securityAndComplianceEnabled: false,
     };
   },
   watch: {
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index cc676b98e49..0494dad6e33 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -1,17 +1,17 @@
 import initTree from 'ee_else_ce/repository';
-import { initUploadForm } from '~/blob_edit/blob_bundle';
+import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import NotificationsForm from '~/notifications_form';
-import UserCallout from '~/user_callout';
 import BlobViewer from '~/blob/viewer/index';
-import Activities from '~/activities';
-import initReadMore from '~/read_more';
+import { initUploadForm } from '~/blob_edit/blob_bundle';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import leaveByUrl from '~/namespaces/leave_by_url';
-import Star from '../../../star';
+import initVueNotificationsDropdown from '~/notifications';
+import NotificationsForm from '~/notifications_form';
+import initReadMore from '~/read_more';
+import UserCallout from '~/user_callout';
 import notificationsDropdown from '../../../notifications_dropdown';
-import { showLearnGitLabProjectPopover } from '~/onboarding_issues';
-import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
-import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import Star from '../../../star';
 
 initReadMore();
 new Star(); // eslint-disable-line no-new
@@ -40,9 +40,14 @@ if (document.querySelector('.project-show-activity')) {
 
 leaveByUrl('project');
 
-showLearnGitLabProjectPopover();
+if (gon.features?.vueNotificationDropdown) {
+  initVueNotificationsDropdown();
+} else {
+  notificationsDropdown();
+}
+
+initVueNotificationsDropdown();
 
-notificationsDropdown();
 new ShortcutsNavigation(); // eslint-disable-line no-new
 
 initInviteMembersTrigger();
diff --git a/app/assets/javascripts/pages/projects/tags/index/index.js b/app/assets/javascripts/pages/projects/tags/index/index.js
index 96e52850936..98560c1193b 100644
--- a/app/assets/javascripts/pages/projects/tags/index/index.js
+++ b/app/assets/javascripts/pages/projects/tags/index/index.js
@@ -1,9 +1,7 @@
 import { initRemoveTag } from '../remove_tag';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initRemoveTag({
-    onDelete: (path) => {
-      document.querySelector(`[data-path="${path}"]`).closest('.js-tag-list').remove();
-    },
-  });
+initRemoveTag({
+  onDelete: (path) => {
+    document.querySelector(`[data-path="${path}"]`).closest('.js-tag-list').remove();
+  },
 });
diff --git a/app/assets/javascripts/pages/projects/tags/new/index.js b/app/assets/javascripts/pages/projects/tags/new/index.js
index b3158f7e939..11a19a673b1 100644
--- a/app/assets/javascripts/pages/projects/tags/new/index.js
+++ b/app/assets/javascripts/pages/projects/tags/new/index.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
+import GLForm from '../../../../gl_form';
 import RefSelectDropdown from '../../../../ref_select_dropdown';
 import ZenMode from '../../../../zen_mode';
-import GLForm from '../../../../gl_form';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/tags/releases/index.js b/app/assets/javascripts/pages/projects/tags/releases/index.js
index d6afc71fb03..abdc97f62d0 100644
--- a/app/assets/javascripts/pages/projects/tags/releases/index.js
+++ b/app/assets/javascripts/pages/projects/tags/releases/index.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
-import ZenMode from '~/zen_mode';
 import GLForm from '~/gl_form';
+import ZenMode from '~/zen_mode';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/tags/remove_tag.js b/app/assets/javascripts/pages/projects/tags/remove_tag.js
index 7e83dbe0565..7b95560df7b 100644
--- a/app/assets/javascripts/pages/projects/tags/remove_tag.js
+++ b/app/assets/javascripts/pages/projects/tags/remove_tag.js
@@ -1,6 +1,6 @@
+import initConfirmModal from '~/confirm_modal';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import initConfirmModal from '~/confirm_modal';
 
 export const initRemoveTag = ({ onDelete = () => {} }) => {
   return initConfirmModal({
diff --git a/app/assets/javascripts/pages/projects/tags/show/index.js b/app/assets/javascripts/pages/projects/tags/show/index.js
index 651cc05ca4f..6f5406f554f 100644
--- a/app/assets/javascripts/pages/projects/tags/show/index.js
+++ b/app/assets/javascripts/pages/projects/tags/show/index.js
@@ -1,10 +1,8 @@
 import { redirectTo, getBaseURL, stripFinalUrlSegment } from '~/lib/utils/url_utility';
 import { initRemoveTag } from '../remove_tag';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initRemoveTag({
-    onDelete: (path = '') => {
-      redirectTo(stripFinalUrlSegment([getBaseURL(), path].join('')));
-    },
-  });
+initRemoveTag({
+  onDelete: (path = '') => {
+    redirectTo(stripFinalUrlSegment([getBaseURL(), path].join('')));
+  },
 });
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index 9c75531ca40..dead61cf358 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,3 +1,3 @@
 import initWikis from '~/pages/shared/wikis';
 
-document.addEventListener('DOMContentLoaded', initWikis);
+initWikis();
diff --git a/app/assets/javascripts/pages/registrations/new/index.js b/app/assets/javascripts/pages/registrations/new/index.js
index a33d11f3613..4104025aa59 100644
--- a/app/assets/javascripts/pages/registrations/new/index.js
+++ b/app/assets/javascripts/pages/registrations/new/index.js
@@ -1,6 +1,6 @@
+import NoEmojiValidator from '~/emoji/no_emoji_validator';
 import LengthValidator from '~/pages/sessions/new/length_validator';
 import UsernameValidator from '~/pages/sessions/new/username_validator';
-import NoEmojiValidator from '~/emoji/no_emoji_validator';
 
 document.addEventListener('DOMContentLoaded', () => {
   new UsernameValidator(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/search/show/index.js b/app/assets/javascripts/pages/search/show/index.js
index b6171e08e01..a8c288c3663 100644
--- a/app/assets/javascripts/pages/search/show/index.js
+++ b/app/assets/javascripts/pages/search/show/index.js
@@ -1,7 +1,5 @@
-import Search from './search';
 import { initSearchApp } from '~/search';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initSearchApp(); // Vue Bootstrap
-  return new Search(); // Legacy Search Methods
+  initSearchApp();
 });
diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js
deleted file mode 100644
index cbef5ab1bbc..00000000000
--- a/app/assets/javascripts/pages/search/show/search.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import $ from 'jquery';
-import setHighlightClass from 'ee_else_ce/search/highlight_blob_search_result';
-import Project from '~/pages/projects/project';
-import { visitUrl } from '~/lib/utils/url_utility';
-import refreshCounts from './refresh_counts';
-
-export default class Search {
-  constructor() {
-    this.searchInput = '.js-search-input';
-    this.searchClear = '.js-search-clear';
-
-    setHighlightClass(); // Code Highlighting
-    this.eventListeners(); // Search Form Actions
-    refreshCounts(); // Other Scope Tab Counts
-    Project.initRefSwitcher(); // Code Search Branch Picker
-  }
-
-  eventListeners() {
-    $(document).off('keyup', this.searchInput).on('keyup', this.searchInput, this.searchKeyUp);
-    $(document)
-      .off('click', this.searchClear)
-      .on('click', this.searchClear, this.clearSearchField.bind(this));
-
-    $('a.js-search-clear').off('click', this.clearSearchFilter).on('click', this.clearSearchFilter);
-  }
-
-  static submitSearch() {
-    return $('.js-search-form').submit();
-  }
-
-  searchKeyUp() {
-    const $input = $(this);
-    if ($input.val() === '') {
-      $('.js-search-clear').addClass('hidden');
-    } else {
-      $('.js-search-clear').removeClass('hidden');
-    }
-  }
-
-  clearSearchField() {
-    return $(this.searchInput).val('').trigger('keyup').focus();
-  }
-
-  // We need to manually follow the link on the anchors
-  // that have this event bound, as their `click` default
-  // behavior is prevented by the toggle logic.
-  /* eslint-disable-next-line class-methods-use-this */
-  clearSearchFilter(ev) {
-    const $target = $(ev.currentTarget);
-
-    visitUrl($target.href);
-    ev.stopPropagation();
-  }
-}
diff --git a/app/assets/javascripts/pages/sessions/new/index.js b/app/assets/javascripts/pages/sessions/new/index.js
index 55bc93a2b13..d39f56cfd03 100644
--- a/app/assets/javascripts/pages/sessions/new/index.js
+++ b/app/assets/javascripts/pages/sessions/new/index.js
@@ -1,10 +1,10 @@
 import $ from 'jquery';
-import LengthValidator from './length_validator';
-import UsernameValidator from './username_validator';
 import NoEmojiValidator from '../../../emoji/no_emoji_validator';
-import SigninTabsMemoizer from './signin_tabs_memoizer';
+import LengthValidator from './length_validator';
 import OAuthRememberMe from './oauth_remember_me';
 import preserveUrlFragment from './preserve_url_fragment';
+import SigninTabsMemoizer from './signin_tabs_memoizer';
+import UsernameValidator from './username_validator';
 
 document.addEventListener('DOMContentLoaded', () => {
   new UsernameValidator(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index f3b0948a40d..338fe1b66f2 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -1,9 +1,9 @@
 import { debounce } from 'lodash';
-import InputValidator from '~/validators/input_validator';
 
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
+import InputValidator from '~/validators/input_validator';
 
 const debounceTimeoutDuration = 1000;
 const rootUrl = gon.relative_url_root;
diff --git a/app/assets/javascripts/pages/shared/mount_runner_instructions.js b/app/assets/javascripts/pages/shared/mount_runner_instructions.js
new file mode 100644
index 00000000000..51028e585b8
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/mount_runner_instructions.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import InstallRunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
+
+Vue.use(VueApollo);
+
+export function initInstallRunner(componentId = 'js-install-runner') {
+  const installRunnerEl = document.getElementById(componentId);
+
+  if (installRunnerEl) {
+    const defaultClient = createDefaultClient();
+    const { projectPath, groupPath } = installRunnerEl.dataset;
+
+    const apolloProvider = new VueApollo({
+      defaultClient,
+    });
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: installRunnerEl,
+      apolloProvider,
+      provide: {
+        projectPath,
+        groupPath,
+      },
+      render(createElement) {
+        return createElement(InstallRunnerInstructions);
+      },
+    });
+  }
+}
diff --git a/app/assets/javascripts/pages/shared/wikis/index.js b/app/assets/javascripts/pages/shared/wikis/index.js
index 5e23b9bab4e..c8dc75828e4 100644
--- a/app/assets/javascripts/pages/shared/wikis/index.js
+++ b/app/assets/javascripts/pages/shared/wikis/index.js
@@ -1,12 +1,12 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
-import csrf from '~/lib/utils/csrf';
 import ShortcutsWiki from '~/behaviors/shortcuts/shortcuts_wiki';
-import Wikis from './wikis';
-import ZenMode from '../../../zen_mode';
+import csrf from '~/lib/utils/csrf';
+import Translate from '~/vue_shared/translate';
 import GLForm from '../../../gl_form';
+import ZenMode from '../../../zen_mode';
 import deleteWikiModal from './components/delete_wiki_modal.vue';
+import Wikis from './wikis';
 
 export default () => {
   new Wikis(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 149e666256b..3ff455fad32 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -1,11 +1,11 @@
-import $ from 'jquery';
-import { last } from 'lodash';
 import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { select } from 'd3-selection';
 import dateFormat from 'dateformat';
-import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
-import axios from '~/lib/utils/axios_utils';
+import $ from 'jquery';
+import { last } from 'lodash';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { n__, s__, __ } from '~/locale';
 
 const d3 = { select, scaleLinear, scaleThreshold };
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 7c88aa53e4b..80e14842f51 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -1,9 +1,9 @@
-import $ from 'jquery';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import axios from '~/lib/utils/axios_utils';
+import $ from 'jquery';
 import Activities from '~/activities';
-import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import AjaxCache from '~/lib/utils/ajax_cache';
+import axios from '~/lib/utils/axios_utils';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
 import ActivityCalendar from './activity_calendar';
 import UserOverviewBlock from './user_overview_block';
@@ -141,7 +141,15 @@ export default class UserTabs {
       this.loadOverviewTab();
     }
 
-    const loadableActions = ['groups', 'contributed', 'projects', 'starred', 'snippets'];
+    const loadableActions = [
+      'groups',
+      'contributed',
+      'projects',
+      'starred',
+      'snippets',
+      'followers',
+      'following',
+    ];
     if (loadableActions.indexOf(action) > -1) {
       this.loadTab(action, endpoint);
     }