Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42

72 files changed, 280 insertions, 513 deletions

diff --git a/app/assets/javascripts/pages/admin/abuse_reports/index.js b/app/assets/javascripts/pages/admin/abuse_reports/index.js
index a88d35796f7..ab29f9149f7 100644
--- a/app/assets/javascripts/pages/admin/abuse_reports/index.js
+++ b/app/assets/javascripts/pages/admin/abuse_reports/index.js
@@ -5,4 +5,4 @@ import AbuseReports from './abuse_reports';
 new AbuseReports(); /* eslint-disable-line no-new */
 new UsersSelect(); /* eslint-disable-line no-new */
 
-document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);
+initDeprecatedRemoveRowBehavior();
diff --git a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js
index a2fca238613..a5305777dd5 100644
--- a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js
@@ -1,3 +1,3 @@
 import setup from '~/admin/application_settings/setup_metrics_and_profiling';
 
-document.addEventListener('DOMContentLoaded', setup);
+setup();
diff --git a/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js
new file mode 100644
index 00000000000..bf27b1a81ff
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/usage_statistics.js
@@ -0,0 +1,41 @@
+import { __ } from '~/locale';
+
+export const HELPER_TEXT_SERVICE_PING_DISABLED = __(
+  'To enable Registration Features, make sure "Enable service ping" is checked.',
+);
+
+export const HELPER_TEXT_SERVICE_PING_ENABLED = __(
+  'You can enable Registration Features because Service Ping is enabled. To continue using Registration Features in the future, you will also need to register with GitLab via a new cloud licensing service.',
+);
+
+function setHelperText(usagePingCheckbox) {
+  const helperTextId = document.getElementById('service_ping_features_helper_text');
+
+  const usagePingFeaturesLabel = document.getElementById('service_ping_features_label');
+
+  const usagePingFeaturesCheckbox = document.getElementById(
+    'application_setting_usage_ping_features_enabled',
+  );
+
+  helperTextId.textContent = usagePingCheckbox.checked
+    ? HELPER_TEXT_SERVICE_PING_ENABLED
+    : HELPER_TEXT_SERVICE_PING_DISABLED;
+
+  usagePingFeaturesLabel.classList.toggle('gl-cursor-not-allowed', !usagePingCheckbox.checked);
+
+  usagePingFeaturesCheckbox.disabled = !usagePingCheckbox.checked;
+
+  if (!usagePingCheckbox.checked) {
+    usagePingFeaturesCheckbox.disabled = true;
+    usagePingFeaturesCheckbox.checked = false;
+  }
+}
+
+export default function initSetHelperText() {
+  const usagePingCheckbox = document.getElementById('application_setting_usage_ping_enabled');
+
+  setHelperText(usagePingCheckbox);
+  usagePingCheckbox.addEventListener('change', () => {
+    setHelperText(usagePingCheckbox);
+  });
+}
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 bc1d4dd6122..08f6633f424 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as flash } from '../../../flash';
+import createFlash from '~/flash';
 import axios from '../../../lib/utils/axios_utils';
 import { __ } from '../../../locale';
 
@@ -38,7 +38,9 @@ export default class PayloadPreviewer {
       })
       .catch(() => {
         this.spinner.classList.remove('d-inline-flex');
-        flash(__('Error fetching payload data.'));
+        createFlash({
+          message: __('Error fetching payload data.'),
+        });
       });
   }
 
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 5a16716fe2d..2a7e6a45cdd 100644
--- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
@@ -1,8 +1,9 @@
 import $ from 'jquery';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { textColorForBackground } from '~/lib/utils/color_utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 
 export default () => {
@@ -30,7 +31,11 @@ export default () => {
         .then(({ data }) => {
           $jsBroadcastMessagePreview.html(data.message);
         })
-        .catch(() => flash(__('An error occurred while rendering preview broadcast message')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while rendering preview broadcast message'),
+          }),
+        );
     }
   };
 
@@ -61,7 +66,7 @@ export default () => {
     'input',
     debounce(() => {
       reloadPreview();
-    }, 250),
+    }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
   );
 
   const updateColorPreview = () => {
diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/index.js b/app/assets/javascripts/pages/admin/broadcast_messages/index.js
index b7db6443658..f687423594d 100644
--- a/app/assets/javascripts/pages/admin/broadcast_messages/index.js
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/index.js
@@ -1,7 +1,5 @@
 import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 import initBroadcastMessagesForm from './broadcast_message';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initBroadcastMessagesForm();
-  initDeprecatedRemoveRowBehavior();
-});
+initBroadcastMessagesForm();
+initDeprecatedRemoveRowBehavior();
diff --git a/app/assets/javascripts/pages/admin/clusters/destroy/index.js b/app/assets/javascripts/pages/admin/clusters/destroy/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/admin/clusters/destroy/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/destroy/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/admin/clusters/edit/index.js b/app/assets/javascripts/pages/admin/clusters/edit/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/admin/clusters/edit/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/edit/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/admin/clusters/index.js b/app/assets/javascripts/pages/admin/clusters/index.js
index 4d04c37caa7..f398b1cee82 100644
--- a/app/assets/javascripts/pages/admin/clusters/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/index.js
@@ -1,5 +1,3 @@
 import initCreateCluster from '~/create_cluster/init_create_cluster';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initCreateCluster(document, gon);
-});
+initCreateCluster(document, gon);
diff --git a/app/assets/javascripts/pages/admin/clusters/index/index.js b/app/assets/javascripts/pages/admin/clusters/index/index.js
index a99e0dfa4f0..a1ba920b322 100644
--- a/app/assets/javascripts/pages/admin/clusters/index/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/index/index.js
@@ -1,8 +1,6 @@
 import initClustersListApp from '~/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/admin/clusters/new/index.js b/app/assets/javascripts/pages/admin/clusters/new/index.js
index 876bab0b339..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/admin/clusters/new/index.js
+++ b/app/assets/javascripts/pages/admin/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/admin/clusters/show/index.js b/app/assets/javascripts/pages/admin/clusters/show/index.js
index 9d94973af0d..524b2c6f66a 100644
--- a/app/assets/javascripts/pages/admin/clusters/show/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/show/index.js
@@ -2,8 +2,6 @@ import ClustersBundle from '~/clusters/clusters_bundle';
 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
-  initClusterHealth();
-  initIntegrationForm();
-});
+new ClustersBundle(); // eslint-disable-line no-new
+initClusterHealth();
+initIntegrationForm();
diff --git a/app/assets/javascripts/pages/admin/dev_ops_report/index.js b/app/assets/javascripts/pages/admin/dev_ops_report/index.js
index d6fa1be29b0..a94a60af7ff 100644
--- a/app/assets/javascripts/pages/admin/dev_ops_report/index.js
+++ b/app/assets/javascripts/pages/admin/dev_ops_report/index.js
@@ -1,5 +1,5 @@
 import initDevOpsScore from '~/analytics/devops_report/devops_score';
-import initDevOpsScoreDisabledUsagePing from '~/analytics/devops_report/devops_score_disabled_usage_ping';
+import initDevOpsScoreDisabledServicePing from '~/analytics/devops_report/devops_score_disabled_service_ping';
 
-initDevOpsScoreDisabledUsagePing();
+initDevOpsScoreDisabledServicePing();
 initDevOpsScore();
diff --git a/app/assets/javascripts/pages/admin/identities/index.js b/app/assets/javascripts/pages/admin/identities/index.js
new file mode 100644
index 00000000000..a9f5f00cb9b
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/identities/index.js
@@ -0,0 +1,6 @@
+import { initAdminUserActions, initDeleteUserModals } from '~/admin/users';
+import initConfirmModal from '~/confirm_modal';
+
+initAdminUserActions();
+initDeleteUserModals();
+initConfirmModal();
diff --git a/app/assets/javascripts/pages/admin/impersonation_tokens/index.js b/app/assets/javascripts/pages/admin/impersonation_tokens/index.js
index dc1bb88bf4b..8fbc8dc17bc 100644
--- a/app/assets/javascripts/pages/admin/impersonation_tokens/index.js
+++ b/app/assets/javascripts/pages/admin/impersonation_tokens/index.js
@@ -1,3 +1,8 @@
 import { initExpiresAtField } from '~/access_tokens';
+import { initAdminUserActions, initDeleteUserModals } from '~/admin/users';
+import initConfirmModal from '~/confirm_modal';
 
+initAdminUserActions();
+initDeleteUserModals();
 initExpiresAtField();
+initConfirmModal();
diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js
index ba4b271f09e..8002fa8bf78 100644
--- a/app/assets/javascripts/pages/admin/integrations/edit/index.js
+++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js
@@ -1,7 +1,7 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
 
-document.addEventListener('DOMContentLoaded', () => {
+function initIntegrations() {
   const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
   integrationSettingsForm.init();
@@ -10,4 +10,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
     prometheusMetrics.loadActiveMetrics();
   }
-});
+}
+
+initIntegrations();
diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
index 46ddb95299d..a4d89889d57 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/index.js
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -5,7 +5,7 @@ import stopJobsModal from './components/stop_jobs_modal.vue';
 
 Vue.use(Translate);
 
-document.addEventListener('DOMContentLoaded', () => {
+function initJobs() {
   const buttonId = 'js-stop-jobs-button';
   const modalId = 'stop-jobs-modal';
   const stopJobsButton = document.getElementById(buttonId);
@@ -31,4 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
-});
+}
+
+initJobs();
diff --git a/app/assets/javascripts/pages/admin/keys/index.js b/app/assets/javascripts/pages/admin/keys/index.js
index 45b83ffcd67..868c8e33077 100644
--- a/app/assets/javascripts/pages/admin/keys/index.js
+++ b/app/assets/javascripts/pages/admin/keys/index.js
@@ -1,5 +1,3 @@
 import initConfirmModal from '~/confirm_modal';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initConfirmModal();
-});
+initConfirmModal();
diff --git a/app/assets/javascripts/pages/admin/labels/index/index.js b/app/assets/javascripts/pages/admin/labels/index/index.js
index 17ee7c03ed6..0ceab3b922f 100644
--- a/app/assets/javascripts/pages/admin/labels/index/index.js
+++ b/app/assets/javascripts/pages/admin/labels/index/index.js
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', () => {
+function initLabels() {
   const pagination = document.querySelector('.labels .gl-pagination');
   const emptyState = document.querySelector('.labels .nothing-here-block.hidden');
 
@@ -18,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.js-remove-label').forEach((row) => {
     row.addEventListener('ajax:success', removeLabelSuccessCallback);
   });
-});
+}
+
+initLabels();
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index b92fc8d125d..055d6f40c14 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -46,7 +46,7 @@ export default {
       return sprintf(
         s__(`AdminProjects|
           You’re about to permanently delete the project %{projectName}, its repository,
-          and all related resources including issues, merge requests, etc..  Once you confirm and press
+          and all related resources, including issues and merge requests. Once you confirm and press
           %{strong_start}Delete project%{strong_end}, it cannot be undone or recovered.`),
         {
           projectName: `<strong>${escape(this.projectName)}</strong>`,
diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js
index cc9a9b6cc38..c6cf4a46dba 100644
--- a/app/assets/javascripts/pages/admin/projects/index/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index/index.js
@@ -13,9 +13,11 @@ import deleteProjectModal from './components/delete_project_modal.vue';
 
   const deleteModal = new Vue({
     el: deleteProjectModalEl,
-    data: {
-      deleteProjectUrl: '',
-      projectName: '',
+    data() {
+      return {
+        deleteProjectUrl: '',
+        projectName: '',
+      };
     },
     mounted() {
       const deleteProjectButtons = document.querySelectorAll('.delete-project-button');
diff --git a/app/assets/javascripts/pages/admin/spam_logs/index.js b/app/assets/javascripts/pages/admin/spam_logs/index.js
index e5ab5d43bbf..ac850a6467b 100644
--- a/app/assets/javascripts/pages/admin/spam_logs/index.js
+++ b/app/assets/javascripts/pages/admin/spam_logs/index.js
@@ -1,3 +1,3 @@
 import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 
-document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);
+initDeprecatedRemoveRowBehavior();
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
deleted file mode 100644
index a3b78da6ef5..00000000000
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script>
-import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
-import * as Sentry from '@sentry/browser';
-import { s__, sprintf } from '~/locale';
-import OncallSchedulesList from '~/vue_shared/components/oncall_schedules_list.vue';
-
-export default {
-  components: {
-    GlModal,
-    GlButton,
-    GlFormInput,
-    GlSprintf,
-    OncallSchedulesList,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    content: {
-      type: String,
-      required: true,
-    },
-    action: {
-      type: String,
-      required: true,
-    },
-    secondaryAction: {
-      type: String,
-      required: true,
-    },
-    deleteUserUrl: {
-      type: String,
-      required: true,
-    },
-    blockUserUrl: {
-      type: String,
-      required: true,
-    },
-    username: {
-      type: String,
-      required: true,
-    },
-    csrfToken: {
-      type: String,
-      required: true,
-    },
-    oncallSchedules: {
-      type: String,
-      required: false,
-      default: '[]',
-    },
-  },
-  data() {
-    return {
-      enteredUsername: '',
-    };
-  },
-  computed: {
-    modalTitle() {
-      return sprintf(this.title, { username: this.username });
-    },
-    secondaryButtonLabel() {
-      return s__('AdminUsers|Block user');
-    },
-    canSubmit() {
-      return this.enteredUsername === this.username;
-    },
-    schedules() {
-      try {
-        return JSON.parse(this.oncallSchedules);
-      } catch (e) {
-        Sentry.captureException(e);
-      }
-      return [];
-    },
-  },
-  methods: {
-    show() {
-      this.$refs.modal.show();
-    },
-    onCancel() {
-      this.enteredUsername = '';
-      this.$refs.modal.hide();
-    },
-    onSecondaryAction() {
-      const { form } = this.$refs;
-
-      form.action = this.blockUserUrl;
-      this.$refs.method.value = 'put';
-
-      form.submit();
-    },
-    onSubmit() {
-      this.$refs.form.submit();
-      this.enteredUsername = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
-    <p>
-      <gl-sprintf :message="content">
-        <template #username>
-          <strong>{{ username }}</strong>
-        </template>
-        <template #strong="props">
-          <strong>{{ props.content }}</strong>
-        </template>
-      </gl-sprintf>
-    </p>
-
-    <oncall-schedules-list v-if="schedules.length" :schedules="schedules" />
-
-    <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 #modal-footer>
-      <gl-button @click="onCancel">{{ s__('Cancel') }}</gl-button>
-      <gl-button
-        :disabled="!canSubmit"
-        category="secondary"
-        variant="danger"
-        @click="onSecondaryAction"
-      >
-        {{ secondaryAction }}
-      </gl-button>
-      <gl-button :disabled="!canSubmit" category="primary" variant="danger" @click="onSubmit">{{
-        action
-      }}</gl-button>
-    </template>
-  </gl-modal>
-</template>
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
deleted file mode 100644
index 1dfea3f1e7b..00000000000
--- a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-import DeleteUserModal from './delete_user_modal.vue';
-
-export default {
-  components: { DeleteUserModal },
-  props: {
-    modalConfiguration: {
-      required: true,
-      type: Object,
-    },
-    csrfToken: {
-      required: true,
-      type: String,
-    },
-    selector: {
-      required: true,
-      type: String,
-    },
-  },
-  data() {
-    return {
-      currentModalData: null,
-    };
-  },
-  computed: {
-    activeModal() {
-      return Boolean(this.currentModalData);
-    },
-
-    modalProps() {
-      const { glModalAction: requestedAction } = this.currentModalData;
-      return {
-        ...this.modalConfiguration[requestedAction],
-        ...this.currentModalData,
-        csrfToken: this.csrfToken,
-      };
-    },
-  },
-
-  mounted() {
-    /*
-     * 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;
-
-        e.preventDefault();
-        this.show(button.dataset);
-      });
-    });
-  },
-
-  methods: {
-    show(modalData) {
-      const { glModalAction: requestedAction } = modalData;
-
-      if (!this.modalConfiguration[requestedAction]) {
-        throw new Error(`Modal action ${requestedAction} has no configuration in HTML`);
-      }
-
-      this.currentModalData = modalData;
-
-      return this.$nextTick().then(() => {
-        this.$refs.modal.show();
-      });
-    },
-  },
-};
-</script>
-<template>
-  <delete-user-modal v-if="activeModal" ref="modal" v-bind="modalProps" />
-</template>
diff --git a/app/assets/javascripts/pages/admin/users/index.js b/app/assets/javascripts/pages/admin/users/index.js
index 9a8b0c9990f..41e99a3baf5 100644
--- a/app/assets/javascripts/pages/admin/users/index.js
+++ b/app/assets/javascripts/pages/admin/users/index.js
@@ -1,64 +1,7 @@
-import Vue from 'vue';
-
-import { initAdminUsersApp } from '~/admin/users';
+import { initAdminUsersApp, initDeleteUserModals, initAdminUserActions } from '~/admin/users';
 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';
-
-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';
-
-function loadModalsConfigurationFromHtml(modalsElement) {
-  const modalsConfiguration = {};
-
-  if (!modalsElement) {
-    /* eslint-disable-next-line @gitlab/require-i18n-strings */
-    throw new Error('Modals content element not found!');
-  }
-
-  Array.from(modalsElement.children).forEach((node) => {
-    const { modal, ...config } = node.dataset;
-    modalsConfiguration[modal] = {
-      title: node.dataset.title,
-      ...config,
-      content: node.innerHTML,
-    };
-  });
-
-  return modalsConfiguration;
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  Vue.use(Translate);
-
-  initAdminUsersApp();
-
-  const modalConfiguration = loadModalsConfigurationFromHtml(
-    document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR),
-  );
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: MODAL_MANAGER_SELECTOR,
-    functional: true,
-    methods: {
-      show(...args) {
-        this.$refs.manager.show(...args);
-      },
-    },
-    render(h) {
-      return h(ModalManager, {
-        ref: 'manager',
-        props: {
-          selector: CONFIRM_DELETE_BUTTON_SELECTOR,
-          modalConfiguration,
-          csrfToken: csrf.token,
-        },
-      });
-    },
-  });
 
-  initConfirmModal();
-});
+initAdminUsersApp();
+initAdminUserActions();
+initDeleteUserModals();
+initConfirmModal();
diff --git a/app/assets/javascripts/pages/admin/users/keys/index.js b/app/assets/javascripts/pages/admin/users/keys/index.js
deleted file mode 100644
index 45b83ffcd67..00000000000
--- a/app/assets/javascripts/pages/admin/users/keys/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import initConfirmModal from '~/confirm_modal';
-
-document.addEventListener('DOMContentLoaded', () => {
-  initConfirmModal();
-});
diff --git a/app/assets/javascripts/pages/dashboard/groups/index/index.js b/app/assets/javascripts/pages/dashboard/groups/index/index.js
index b9277106a71..c14848c4798 100644
--- a/app/assets/javascripts/pages/dashboard/groups/index/index.js
+++ b/app/assets/javascripts/pages/dashboard/groups/index/index.js
@@ -1,5 +1,3 @@
 import initGroupsList from '~/groups';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initGroupsList();
-});
+initGroupsList();
diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
index 397149aaa9e..1f3e458fe17 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
@@ -2,8 +2,6 @@ import Milestone from '~/milestone';
 import Sidebar from '~/right_sidebar';
 import MountMilestoneSidebar from '~/sidebar/mount_milestone_sidebar';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new Milestone(); // eslint-disable-line no-new
-  new Sidebar(); // eslint-disable-line no-new
-  new MountMilestoneSidebar(); // eslint-disable-line no-new
-});
+new Milestone(); // eslint-disable-line no-new
+new Sidebar(); // eslint-disable-line no-new
+new MountMilestoneSidebar(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index 42341436b55..946076cfb29 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import { getGroups } from '~/api/groups_api';
 import { getProjects } from '~/api/projects_api';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isMetaClick } from '~/lib/utils/common_utils';
 import { addDelimiter } from '~/lib/utils/text_utility';
@@ -103,7 +103,9 @@ export default class Todos {
       })
       .catch(() => {
         this.updateRowState(target, true);
-        return flash(__('Error updating status of to-do item.'));
+        return createFlash({
+          message: __('Error updating status of to-do item.'),
+        });
       });
   }
 
@@ -145,7 +147,11 @@ export default class Todos {
         this.updateAllState(target, data);
         this.updateBadges(data);
       })
-      .catch(() => flash(__('Error updating status for all to-do items.')));
+      .catch(() =>
+        createFlash({
+          message: __('Error updating status for all to-do items.'),
+        }),
+      );
   }
 
   updateAllState(target, data) {
diff --git a/app/assets/javascripts/pages/explore/projects/index.js b/app/assets/javascripts/pages/explore/projects/index.js
index 01001d4f3ff..6c9378b7231 100644
--- a/app/assets/javascripts/pages/explore/projects/index.js
+++ b/app/assets/javascripts/pages/explore/projects/index.js
@@ -1,5 +1,3 @@
 import ProjectsList from '~/projects_list';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ProjectsList(); // eslint-disable-line no-new
-});
+new ProjectsList(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/groups/clusters/destroy/index.js b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/groups/clusters/destroy/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/groups/clusters/edit/index.js b/app/assets/javascripts/pages/groups/clusters/edit/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/groups/clusters/edit/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/edit/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // 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 d5ce5d076a2..4d48bd4be2b 100644
--- a/app/assets/javascripts/pages/groups/clusters/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index.js
@@ -1,7 +1,5 @@
 import initIntegrationForm from '~/clusters/forms/show/index';
 import initCreateCluster from '~/create_cluster/init_create_cluster';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initCreateCluster(document, gon);
-  initIntegrationForm();
-});
+initCreateCluster(document, gon);
+initIntegrationForm();
diff --git a/app/assets/javascripts/pages/groups/clusters/new/index.js b/app/assets/javascripts/pages/groups/clusters/new/index.js
index 876bab0b339..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/groups/clusters/new/index.js
+++ b/app/assets/javascripts/pages/groups/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/groups/clusters/show/index.js b/app/assets/javascripts/pages/groups/clusters/show/index.js
index ccf631b2c53..5d202a8824f 100644
--- a/app/assets/javascripts/pages/groups/clusters/show/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/show/index.js
@@ -1,7 +1,5 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 import initClusterHealth from '~/pages/projects/clusters/show/cluster_health';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-  initClusterHealth();
-});
+new ClustersBundle(); // eslint-disable-line no-new
+initClusterHealth();
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index 76db578f6f9..342c054471d 100644
--- a/app/assets/javascripts/pages/groups/issues/index.js
+++ b/app/assets/javascripts/pages/groups/issues/index.js
@@ -1,5 +1,5 @@
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import { mountIssuablesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';
diff --git a/app/assets/javascripts/pages/groups/merge_requests/index.js b/app/assets/javascripts/pages/groups/merge_requests/index.js
index 2f6f9bb16e1..02a0a50f984 100644
--- a/app/assets/javascripts/pages/groups/merge_requests/index.js
+++ b/app/assets/javascripts/pages/groups/merge_requests/index.js
@@ -1,6 +1,6 @@
 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
-import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
+import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import projectSelect from '~/project_select';
diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js
index 2a2cc5faebe..914e2831185 100644
--- a/app/assets/javascripts/pages/groups/milestones/show/index.js
+++ b/app/assets/javascripts/pages/groups/milestones/show/index.js
@@ -1,7 +1,5 @@
 import initDeleteMilestoneModal from '~/pages/milestones/shared/delete_milestone_modal_init';
 import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initMilestonesShow();
-  initDeleteMilestoneModal();
-});
+initMilestonesShow();
+initDeleteMilestoneModal();
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 a0ff98645fb..c58be202043 100644
--- a/app/assets/javascripts/pages/groups/new/group_path_validator.js
+++ b/app/assets/javascripts/pages/groups/new/group_path_validator.js
@@ -1,6 +1,6 @@
 import { debounce } from 'lodash';
 
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import InputValidator from '~/validators/input_validator';
 import fetchGroupPathAvailability from './fetch_group_path_availability';
@@ -12,7 +12,6 @@ const parentIdSelector = 'group_parent_id';
 const successMessageSelector = '.validation-success';
 const pendingMessageSelector = '.validation-pending';
 const unavailableMessageSelector = '.validation-error';
-const suggestionsMessageSelector = '.gl-path-suggestions';
 const inputGroupSelector = '.input-group';
 
 export default class GroupPathValidator extends InputValidator {
@@ -57,21 +56,19 @@ export default class GroupPathValidator extends InputValidator {
           );
 
           if (data.exists) {
-            GroupPathValidator.showSuggestions(inputDomElement, data.suggests);
+            const [suggestedSlug] = data.suggests;
+            const targetDomElement = document.querySelector('.js-autofill-group-path');
+            targetDomElement.value = suggestedSlug;
           }
         })
-        .catch(() => flash(__('An error occurred while validating group path')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while validating group path'),
+          }),
+        );
     }
   }
 
-  static showSuggestions(inputDomElement, suggestions) {
-    const messageElement = inputDomElement.parentElement.parentElement.querySelector(
-      suggestionsMessageSelector,
-    );
-    const textSuggestions = suggestions && suggestions.length > 0 ? suggestions.join(', ') : 'none';
-    messageElement.textContent = textSuggestions;
-  }
-
   static setMessageVisibility(inputDomElement, messageSelector, isVisible = true) {
     const messageElement = inputDomElement
       .closest(inputGroupSelector)
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 16f68b94c9a..34f9fe778ea 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,6 +1,6 @@
 <script>
 import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -98,17 +98,17 @@ Once deleted, it cannot be undone or recovered.`),
           });
 
           if (error.response && error.response.status === 404) {
-            Flash(
-              sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
+            createFlash({
+              message: sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
                 milestoneTitle: this.milestoneTitle,
               }),
-            );
+            });
           } else {
-            Flash(
-              sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
+            createFlash({
+              message: sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
                 milestoneTitle: this.milestoneTitle,
               }),
-            );
+            });
           }
           throw error;
         });
diff --git a/app/assets/javascripts/pages/profiles/notifications/show/index.js b/app/assets/javascripts/pages/profiles/notifications/show/index.js
index 51ba6c7a01e..6aa0f260cc0 100644
--- a/app/assets/javascripts/pages/profiles/notifications/show/index.js
+++ b/app/assets/javascripts/pages/profiles/notifications/show/index.js
@@ -1,5 +1,3 @@
 import initNotificationsDropdown from '~/notifications';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initNotificationsDropdown();
-});
+initNotificationsDropdown();
diff --git a/app/assets/javascripts/pages/projects/artifacts/browse/index.js b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
index 58ba6a500a3..60680ec7d1d 100644
--- a/app/assets/javascripts/pages/projects/artifacts/browse/index.js
+++ b/app/assets/javascripts/pages/projects/artifacts/browse/index.js
@@ -1,7 +1,5 @@
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import BuildArtifacts from '~/build_artifacts';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ShortcutsNavigation(); // eslint-disable-line no-new
-  new BuildArtifacts(); // eslint-disable-line no-new
-});
+new ShortcutsNavigation(); // eslint-disable-line no-new
+new BuildArtifacts(); // 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 eb5ecc27c43..057ef157374 100644
--- a/app/assets/javascripts/pages/projects/artifacts/file/index.js
+++ b/app/assets/javascripts/pages/projects/artifacts/file/index.js
@@ -1,7 +1,5 @@
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import BlobViewer from '~/blob/viewer/index';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ShortcutsNavigation(); // eslint-disable-line no-new
-  new BlobViewer(); // eslint-disable-line no-new
-});
+new ShortcutsNavigation(); // eslint-disable-line no-new
+new BlobViewer(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/clusters/destroy/index.js b/app/assets/javascripts/pages/projects/clusters/destroy/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/projects/clusters/destroy/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/destroy/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/clusters/edit/index.js b/app/assets/javascripts/pages/projects/clusters/edit/index.js
index 8001d2dd1da..487e7a14a16 100644
--- a/app/assets/javascripts/pages/projects/clusters/edit/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/edit/index.js
@@ -1,5 +1,3 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-});
+new ClustersBundle(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/clusters/index.js b/app/assets/javascripts/pages/projects/clusters/index.js
index 4d04c37caa7..f398b1cee82 100644
--- a/app/assets/javascripts/pages/projects/clusters/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/index.js
@@ -1,5 +1,3 @@
 import initCreateCluster from '~/create_cluster/init_create_cluster';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initCreateCluster(document, gon);
-});
+initCreateCluster(document, gon);
diff --git a/app/assets/javascripts/pages/projects/clusters/show/index.js b/app/assets/javascripts/pages/projects/clusters/show/index.js
index 1d019285e23..71ab5a0b19c 100644
--- a/app/assets/javascripts/pages/projects/clusters/show/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/show/index.js
@@ -3,9 +3,7 @@ import initIntegrationForm from '~/clusters/forms/show';
 import initGkeNamespace from '~/create_cluster/gke_cluster_namespace';
 import initClusterHealth from './cluster_health';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new ClustersBundle(); // eslint-disable-line no-new
-  initGkeNamespace();
-  initClusterHealth();
-  initIntegrationForm();
-});
+new ClustersBundle(); // eslint-disable-line no-new
+initGkeNamespace();
+initClusterHealth();
+initIntegrationForm();
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index d75c3cc6b8b..e3b30560fef 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -3,7 +3,7 @@ import $ from 'jquery';
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
-import flash from '~/flash';
+import createFlash from '~/flash';
 import initChangesDropdown from '~/init_changes_dropdown';
 import initNotes from '~/init_notes';
 import axios from '~/lib/utils/axios_utils';
@@ -39,7 +39,7 @@ if (filesContainer.length) {
       new Diff();
     })
     .catch(() => {
-      flash({ message: __('An error occurred while retrieving diff files') });
+      createFlash({ message: __('An error occurred while retrieving diff files') });
     });
 } else {
   new Diff();
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index 75c3b6d564c..795ae713c08 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -39,6 +39,14 @@ const initFormField = ({ value, required = true, skipValidation = false }) => ({
   feedback: null,
 });
 
+function sortNamespaces(namespaces) {
+  if (!namespaces || !namespaces?.length) {
+    return namespaces;
+  }
+
+  return namespaces.sort((a, b) => a.full_name.localeCompare(b.full_name));
+}
+
 export default {
   components: {
     GlForm,
@@ -206,7 +214,7 @@ export default {
   methods: {
     async fetchNamespaces() {
       const { data } = await axios.get(this.endpoint);
-      this.namespaces = data.namespaces;
+      this.namespaces = sortNamespaces(data.namespaces);
     },
     isVisibilityLevelDisabled(visibility) {
       return !this.allowedVisibilityLevels.includes(visibility);
@@ -301,11 +309,11 @@ export default {
               :state="form.fields.namespace.state"
               required
             >
-              <template slot="first">
+              <template #first>
                 <option :value="null" disabled>{{ s__('ForkProject|Select a namespace') }}</option>
               </template>
               <option v-for="namespace in namespaces" :key="namespace.id" :value="namespace">
-                {{ namespace.name }}
+                {{ namespace.full_name }}
               </option>
             </gl-form-select>
           </gl-form-input-group>
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 88f4bba5e2a..d41488acf46 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
@@ -101,7 +101,7 @@ export default {
               v-if="isGroupPendingRemoval"
               variant="warning"
               class="gl-display-none gl-sm-display-flex gl-mt-3 gl-mr-1"
-              >{{ __('pending removal') }}</gl-badge
+              >{{ __('pending deletion') }}</gl-badge
             >
             <user-access-role-badge v-if="group.permission" class="gl-mt-3">
               {{ group.permission }}
diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js
index 1eab3becbc3..8ec6e5e66b3 100644
--- a/app/assets/javascripts/pages/projects/index.js
+++ b/app/assets/javascripts/pages/projects/index.js
@@ -1,7 +1,9 @@
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
+import initTerraformNotification from '../../projects/terraform_notification';
 import { initSidebarTracking } from '../shared/nav/sidebar_tracking';
 import Project from './project';
 
 new Project(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
 initSidebarTracking();
+initTerraformNotification();
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 aaa9bb906b2..e708cd32fff 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
@@ -85,28 +85,29 @@ export default {
     :action-cancel="$options.cancelProps"
     @primary="onSubmit"
   >
-    <div slot="modal-title" class="modal-title-with-label">
-      <gl-sprintf
-        :message="
-          s__(
-            'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
-          )
-        "
-      >
-        <template #labelTitle>
-          <span
-            class="label color-label"
-            :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
-          >
-            {{ labelTitle }}
-          </span>
-        </template>
-        <template #span="{ content }"
-          ><span>{{ content }}</span></template
+    <template #modal-title>
+      <div class="modal-title-with-label">
+        <gl-sprintf
+          :message="
+            s__(
+              'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
+            )
+          "
         >
-      </gl-sprintf>
-    </div>
-
+          <template #labelTitle>
+            <span
+              class="label color-label"
+              :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
+            >
+              {{ labelTitle }}
+            </span>
+          </template>
+          <template #span="{ content }"
+            ><span>{{ content }}</span></template
+          >
+        </gl-sprintf>
+      </div>
+    </template>
     {{ text }}
   </gl-modal>
 </template>
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 05019915fc9..545a39f4cf1 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js
@@ -1,7 +1,5 @@
 import initMergeConflicts from '~/merge_conflicts/merge_conflicts_bundle';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initSidebarBundle();
-  initMergeConflicts();
-});
+initSidebarBundle();
+initMergeConflicts();
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 8d152ec4ba6..d61209f904d 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
@@ -15,7 +15,7 @@ const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
     .then(({ data }) => {
       $loadingIndicator.hide();
       $commitList.html(data);
-      localTimeAgo($('.js-timeago', $commitList));
+      localTimeAgo($commitList.get(0).querySelectorAll('.js-timeago'));
     });
 };
 
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js
index 68ab7021cf3..e5f97530c02 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js
@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
@@ -37,7 +37,11 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
               callback(data);
             }
           })
-          .catch(() => flash(__('Error fetching refs')));
+          .catch(() =>
+            createFlash({
+              message: __('Error fetching refs'),
+            }),
+          );
       },
       selectable: true,
       filterable: true,
diff --git a/app/assets/javascripts/pages/projects/new/components/app.vue b/app/assets/javascripts/pages/projects/new/components/app.vue
index 60a4fbc3e6b..6e9efc50be8 100644
--- a/app/assets/javascripts/pages/projects/new/components/app.vue
+++ b/app/assets/javascripts/pages/projects/new/components/app.vue
@@ -4,12 +4,10 @@ import blankProjectIllustration from '@gitlab/svgs/dist/illustrations/project-cr
 import importProjectIllustration from '@gitlab/svgs/dist/illustrations/project-import-sm.svg';
 import ciCdProjectIllustration from '@gitlab/svgs/dist/illustrations/project-run-CICD-pipelines-sm.svg';
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import { experiment } from '~/experimentation/utils';
 import { s__ } from '~/locale';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
 import NewProjectPushTipPopover from './new_project_push_tip_popover.vue';
 
-const NEW_REPO_EXPERIMENT = 'new_repo';
 const CI_CD_PANEL = 'cicd_for_external_repo';
 const PANELS = [
   {
@@ -79,28 +77,8 @@ export default {
   },
 
   computed: {
-    decoratedPanels() {
-      const PANEL_TITLES = experiment(NEW_REPO_EXPERIMENT, {
-        use: () => ({
-          blank: s__('ProjectsNew|Create blank project'),
-          import: s__('ProjectsNew|Import project'),
-        }),
-        try: () => ({
-          blank: s__('ProjectsNew|Create blank project/repository'),
-          import: s__('ProjectsNew|Import project/repository'),
-        }),
-      });
-
-      return PANELS.map(({ key, title, ...el }) => ({
-        ...el,
-        title: PANEL_TITLES[key] ?? title,
-      }));
-    },
-
     availablePanels() {
-      return this.isCiCdAvailable
-        ? this.decoratedPanels
-        : this.decoratedPanels.filter((p) => p.name !== CI_CD_PANEL);
+      return this.isCiCdAvailable ? PANELS : PANELS.filter((p) => p.name !== CI_CD_PANEL);
     },
   },
 
@@ -112,7 +90,6 @@ export default {
       }
     },
   },
-  EXPERIMENT: NEW_REPO_EXPERIMENT,
 };
 </script>
 
@@ -122,7 +99,6 @@ export default {
     :panels="availablePanels"
     :jump-to-last-persisted-panel="hasErrors"
     :title="s__('ProjectsNew|Create new project')"
-    :experiment="$options.EXPERIMENT"
     persistence-key="new_project_last_active_tab"
     @panel-change="resetProjectErrors"
   >
diff --git a/app/assets/javascripts/pages/projects/packages/packages/show/index.js b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
index 1afb900ed88..ee06f247ddc 100644
--- a/app/assets/javascripts/pages/projects/packages/packages/show/index.js
+++ b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
@@ -1,3 +1,11 @@
-import initPackageDetail from '~/packages/details/';
-
-initPackageDetail();
+(async function initPackage() {
+  let app;
+  if (document.getElementById('js-vue-packages-detail-new')) {
+    app = await import(
+      /* webpackChunkName: 'new_package_app' */ `~/packages_and_registries/package_registry/pages/details.js`
+    );
+  } else {
+    app = await import('~/packages/details/');
+  }
+  app.default();
+})();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
index d65be6bc69e..6dd21380bec 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
@@ -1,3 +1,3 @@
 import initForm from '../shared/init_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
index d65be6bc69e..6dd21380bec 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
@@ -1,3 +1,3 @@
 import initForm from '../shared/init_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js
index d65be6bc69e..6dd21380bec 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js
@@ -1,3 +1,3 @@
 import initForm from '../shared/init_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
index d65be6bc69e..6dd21380bec 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
@@ -1,3 +1,3 @@
 import initForm from '../shared/init_form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index 3b24c2c128b..9e93f709937 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Cookies from 'js-cookie';
 import initClonePanel from '~/clone_panel';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { serializeForm } from '~/lib/utils/forms';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -78,7 +78,11 @@ export default class Project {
               },
             })
             .then(({ data }) => callback(data))
-            .catch(() => flash(__('An error occurred while getting projects')));
+            .catch(() =>
+              createFlash({
+                message: __('An error occurred while getting projects'),
+              }),
+            );
         },
         selectable: true,
         filterable: true,
diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js
index 101cb8356b2..8bba3d7af54 100644
--- a/app/assets/javascripts/pages/projects/security/configuration/index.js
+++ b/app/assets/javascripts/pages/projects/security/configuration/index.js
@@ -1,3 +1,3 @@
-import { initStaticSecurityConfiguration } from '~/security_configuration';
+import { initCESecurityConfiguration } from '~/security_configuration';
 
-initStaticSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+initCESecurityConfiguration(document.querySelector('#js-security-configuration-static'));
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 db7b3bad6ed..e88dbf20e1b 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
@@ -8,6 +8,7 @@ import { initRunnerAwsDeployments } from '~/pages/shared/mount_runner_aws_deploy
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
 import initSettingsPanels from '~/settings_panels';
+import { initTokenAccess } from '~/token_access';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
@@ -40,4 +41,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initSharedRunnersToggle();
   initInstallRunner();
   initRunnerAwsDeployments();
+  initTokenAccess();
 });
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 11e6b4577e0..6fcaa3ab04b 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
@@ -104,6 +104,11 @@ export default {
       required: false,
       default: '',
     },
+    issuesHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     lfsHelpPath: {
       type: String,
       required: false,
@@ -438,8 +443,13 @@ export default {
     >
       <project-setting-row
         ref="issues-settings"
+        :help-path="issuesHelpPath"
         :label="$options.i18n.issuesLabel"
-        :help-text="s__('ProjectSettings|Lightweight issue tracking system.')"
+        :help-text="
+          s__(
+            'ProjectSettings|Flexible tool to collaboratively develop ideas and plan work in this project.',
+          )
+        "
       >
         <project-feature-setting
           v-model="issuesAccessLevel"
diff --git a/app/assets/javascripts/pages/registrations/new/index.js b/app/assets/javascripts/pages/registrations/new/index.js
index 4104025aa59..ae605edeaf0 100644
--- a/app/assets/javascripts/pages/registrations/new/index.js
+++ b/app/assets/javascripts/pages/registrations/new/index.js
@@ -2,8 +2,6 @@ import NoEmojiValidator from '~/emoji/no_emoji_validator';
 import LengthValidator from '~/pages/sessions/new/length_validator';
 import UsernameValidator from '~/pages/sessions/new/username_validator';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new UsernameValidator(); // eslint-disable-line no-new
-  new LengthValidator(); // eslint-disable-line no-new
-  new NoEmojiValidator(); // eslint-disable-line no-new
-});
+new UsernameValidator(); // eslint-disable-line no-new
+new LengthValidator(); // eslint-disable-line no-new
+new NoEmojiValidator(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/sessions/new/index.js b/app/assets/javascripts/pages/sessions/new/index.js
index d39f56cfd03..465aed88c01 100644
--- a/app/assets/javascripts/pages/sessions/new/index.js
+++ b/app/assets/javascripts/pages/sessions/new/index.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import initVueAlerts from '~/vue_alerts';
 import NoEmojiValidator from '../../../emoji/no_emoji_validator';
 import LengthValidator from './length_validator';
 import OAuthRememberMe from './oauth_remember_me';
@@ -19,4 +20,5 @@ document.addEventListener('DOMContentLoaded', () => {
   // Save the URL fragment from the current window location. This will be present if the user was
   // redirected to sign-in after attempting to access a protected URL that included a fragment.
   preserveUrlFragment(window.location.hash);
+  initVueAlerts();
 });
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index 338fe1b66f2..7ea744a68a6 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -1,6 +1,6 @@
 import { debounce } from 'lodash';
 
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import InputValidator from '~/validators/input_validator';
@@ -50,7 +50,11 @@ export default class UsernameValidator extends InputValidator {
             usernameTaken ? unavailableMessageSelector : successMessageSelector,
           );
         })
-        .catch(() => flash(__('An error occurred while validating username')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while validating username'),
+          }),
+        );
     }
   }
 
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index 26f6d1d683a..e883fecb170 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -212,13 +212,20 @@ export default {
         .then(({ data }) => data.body);
     },
 
-    handleFormSubmit() {
+    async handleFormSubmit(e) {
+      e.preventDefault();
+
       if (this.useContentEditor) {
         this.content = this.contentEditor.getSerializedContent();
 
         this.trackFormSubmit();
       }
 
+      // Wait until form field values are refreshed
+      await this.$nextTick();
+
+      e.target.submit();
+
       this.isDirty = false;
     },
 
@@ -257,6 +264,7 @@ export default {
         this.contentEditor ||
         createContentEditor({
           renderMarkdown: (markdown) => this.getContentHTML(markdown),
+          uploadsPath: this.pageInfo.uploadsPath,
           tiptapOptions: {
             onUpdate: () => this.handleContentChange(),
           },
@@ -454,7 +462,7 @@ export default {
         </markdown-field>
 
         <div v-if="isContentEditorActive">
-          <gl-alert class="gl-mb-6" variant="tip" :dismissable="false">
+          <gl-alert class="gl-mb-6" variant="tip" :dismissible="false">
             <gl-sprintf :message="$options.i18n.contentEditor.feedbackTip">
               <template
                 #link="// eslint-disable-next-line vue/no-template-shadow
@@ -468,7 +476,11 @@ export default {
               >
             </gl-sprintf>
           </gl-alert>
-          <gl-loading-icon v-if="isContentEditorLoading" class="bordered-box gl-w-full gl-py-6" />
+          <gl-loading-icon
+            v-if="isContentEditorLoading"
+            size="sm"
+            class="bordered-box gl-w-full gl-py-6"
+          />
           <content-editor v-else :content-editor="contentEditor" />
           <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" />
         </div>
diff --git a/app/assets/javascripts/pages/shared/wikis/index.js b/app/assets/javascripts/pages/shared/wikis/index.js
index c04cd0b3fa4..42aefe81325 100644
--- a/app/assets/javascripts/pages/shared/wikis/index.js
+++ b/app/assets/javascripts/pages/shared/wikis/index.js
@@ -27,8 +27,10 @@ const createModalVueApp = () => {
     // eslint-disable-next-line no-new
     new Vue({
       el: deleteWikiModalWrapperEl,
-      data: {
-        deleteWikiUrl: '',
+      data() {
+        return {
+          deleteWikiUrl: '',
+        };
       },
       render(createElement) {
         return createElement(deleteWikiModal, {
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 03dba699461..0fab4678bc3 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -2,7 +2,7 @@ import { select } from 'd3-selection';
 import dateFormat from 'dateformat';
 import $ from 'jquery';
 import { last } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { n__, s__, __ } from '~/locale';
@@ -295,7 +295,11 @@ export default class ActivityCalendar {
           responseType: 'text',
         })
         .then(({ data }) => $(this.activitiesContainer).html(data))
-        .catch(() => flash(__('An error occurred while retrieving calendar activity')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while retrieving calendar activity'),
+          }),
+        );
     } else {
       this.currentSelectedDate = '';
       $(this.activitiesContainer).html('');
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index f9d70845560..90eafa85886 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -166,7 +166,7 @@ export default class UserTabs {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
         this.loaded[action] = true;
-        localTimeAgo($('.js-timeago', tabSelector));
+        localTimeAgo(document.querySelectorAll(`${tabSelector} .js-timeago`));
 
         this.toggleLoading(false);
       })
@@ -209,7 +209,7 @@ export default class UserTabs {
       container,
       url: $(`${container} .overview-content-list`).data('href'),
       ...options,
-      postRenderCallback: () => localTimeAgo($('.js-timeago', container)),
+      postRenderCallback: () => localTimeAgo(document.querySelectorAll(`${container} .js-timeago`)),
     });
   }