Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

63 files changed, 415 insertions, 497 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
index 9850113d4be..c2510a16d2f 100644
--- a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
+++ b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
@@ -11,7 +11,7 @@ import {
 } from '@gitlab/ui';
 import { toSafeInteger } from 'lodash';
 import csrf from '~/lib/utils/csrf';
-import { __, s__, sprintf } from '~/locale';
+import { __, n__, s__, sprintf } from '~/locale';
 import SignupCheckbox from './signup_checkbox.vue';
 
 const DENYLIST_TYPE_RAW = 'raw';
@@ -51,6 +51,7 @@ export default {
     'supportedSyntaxLinkUrl',
     'emailRestrictions',
     'afterSignUpText',
+    'pendingUserCount',
   ],
   data() {
     return {
@@ -105,8 +106,9 @@ export default {
     canUsersBeAccidentallyApproved() {
       const hasUserCapBeenToggledOff =
         this.requireAdminApprovalAfterUserSignup && !this.form.requireAdminApproval;
+      const currentlyPendingUsers = this.pendingUserCount > 0;
 
-      return this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff;
+      return (this.hasUserCapBeenIncreased || hasUserCapBeenToggledOff) && currentlyPendingUsers;
     },
     signupEnabledHelpText() {
       const text = sprintf(
@@ -132,13 +134,39 @@ export default {
 
       return text;
     },
+    approveUsersModal() {
+      const { pendingUserCount } = this;
+
+      return {
+        id: 'signup-settings-modal',
+        text: n__(
+          'ApplicationSettings|By making this change, you will automatically approve %d user with the pending approval status.',
+          'ApplicationSettings|By making this change, you will automatically approve %d users with the pending approval status.',
+          pendingUserCount,
+        ),
+        actionPrimary: {
+          text: n__(
+            'ApplicationSettings|Approve %d user',
+            'ApplicationSettings|Approve %d users',
+            pendingUserCount,
+          ),
+          attributes: {
+            variant: 'confirm',
+          },
+        },
+        actionCancel: {
+          text: __('Cancel'),
+        },
+        title: s__('ApplicationSettings|Approve users in the pending approval status?'),
+      };
+    },
   },
   watch: {
     showModal(value) {
       if (value === true) {
-        this.$refs[this.$options.modal.id].show();
+        this.$refs[this.approveUsersModal.id].show();
       } else {
-        this.$refs[this.$options.modal.id].hide();
+        this.$refs[this.approveUsersModal.id].hide();
       }
     },
   },
@@ -196,22 +224,6 @@ export default {
     afterSignUpTextGroupLabel: s__('ApplicationSettings|After sign up text'),
     afterSignUpTextGroupDescription: s__('ApplicationSettings|Markdown enabled'),
   },
-  modal: {
-    id: 'signup-settings-modal',
-    actionPrimary: {
-      text: s__('ApplicationSettings|Approve users'),
-      attributes: {
-        variant: 'confirm',
-      },
-    },
-    actionCancel: {
-      text: __('Cancel'),
-    },
-    title: s__('ApplicationSettings|Approve all users in the pending approval status?'),
-    text: s__(
-      'ApplicationSettings|By making this change, you will automatically approve all users in pending approval status.',
-    ),
-  },
 };
 </script>
 
@@ -403,15 +415,15 @@ export default {
     </gl-button>
 
     <gl-modal
-      :ref="$options.modal.id"
-      :modal-id="$options.modal.id"
-      :action-cancel="$options.modal.actionCancel"
-      :action-primary="$options.modal.actionPrimary"
-      :title="$options.modal.title"
+      :ref="approveUsersModal.id"
+      :modal-id="approveUsersModal.id"
+      :action-cancel="approveUsersModal.actionCancel"
+      :action-primary="approveUsersModal.actionPrimary"
+      :title="approveUsersModal.title"
       @primary="submitForm"
       @hide="modalHideHandler"
     >
-      {{ $options.modal.text }}
+      {{ approveUsersModal.text }}
     </gl-modal>
   </form>
 </template>
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
index bf27b1a81ff..4c312a008cb 100644
--- 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
@@ -8,34 +8,34 @@ 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) {
+function setHelperText(servicePingCheckbox) {
   const helperTextId = document.getElementById('service_ping_features_helper_text');
 
-  const usagePingFeaturesLabel = document.getElementById('service_ping_features_label');
+  const servicePingFeaturesLabel = document.getElementById('service_ping_features_label');
 
-  const usagePingFeaturesCheckbox = document.getElementById(
+  const servicePingFeaturesCheckbox = document.getElementById(
     'application_setting_usage_ping_features_enabled',
   );
 
-  helperTextId.textContent = usagePingCheckbox.checked
+  helperTextId.textContent = servicePingCheckbox.checked
     ? HELPER_TEXT_SERVICE_PING_ENABLED
     : HELPER_TEXT_SERVICE_PING_DISABLED;
 
-  usagePingFeaturesLabel.classList.toggle('gl-cursor-not-allowed', !usagePingCheckbox.checked);
+  servicePingFeaturesLabel.classList.toggle('gl-cursor-not-allowed', !servicePingCheckbox.checked);
 
-  usagePingFeaturesCheckbox.disabled = !usagePingCheckbox.checked;
+  servicePingFeaturesCheckbox.disabled = !servicePingCheckbox.checked;
 
-  if (!usagePingCheckbox.checked) {
-    usagePingFeaturesCheckbox.disabled = true;
-    usagePingFeaturesCheckbox.checked = false;
+  if (!servicePingCheckbox.checked) {
+    servicePingFeaturesCheckbox.disabled = true;
+    servicePingFeaturesCheckbox.checked = false;
   }
 }
 
 export default function initSetHelperText() {
-  const usagePingCheckbox = document.getElementById('application_setting_usage_ping_enabled');
+  const servicePingCheckbox = document.getElementById('application_setting_usage_ping_enabled');
 
-  setHelperText(usagePingCheckbox);
-  usagePingCheckbox.addEventListener('change', () => {
-    setHelperText(usagePingCheckbox);
+  setHelperText(servicePingCheckbox);
+  servicePingCheckbox.addEventListener('change', () => {
+    setHelperText(servicePingCheckbox);
   });
 }
diff --git a/app/assets/javascripts/pages/admin/groups/edit/index.js b/app/assets/javascripts/pages/admin/groups/edit/index.js
index a4e5df559ff..01e03ed437d 100644
--- a/app/assets/javascripts/pages/admin/groups/edit/index.js
+++ b/app/assets/javascripts/pages/admin/groups/edit/index.js
@@ -1,3 +1,3 @@
 import initFilePickers from '~/file_pickers';
 
-document.addEventListener('DOMContentLoaded', initFilePickers);
+initFilePickers();
diff --git a/app/assets/javascripts/pages/admin/groups/show/index.js b/app/assets/javascripts/pages/admin/groups/show/index.js
index 69d219d29f7..86b80a0ba5b 100644
--- a/app/assets/javascripts/pages/admin/groups/show/index.js
+++ b/app/assets/javascripts/pages/admin/groups/show/index.js
@@ -1,23 +1,3 @@
-import Vue from 'vue';
 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');
-  if (!el) {
-    return false;
-  }
-
-  return new Vue({
-    el,
-    render(createComponent) {
-      return createComponent(RemoveMemberModal);
-    },
-  });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  mountRemoveMemberModal();
-
-  new UsersSelect(); // eslint-disable-line no-new
-});
+new UsersSelect(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/admin/integrations/overrides/index.js b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
new file mode 100644
index 00000000000..b1504709144
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/integrations/overrides/index.js
@@ -0,0 +1,3 @@
+import initIntegrationOverrides from '~/integrations/overrides';
+
+initIntegrationOverrides();
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 ffccc1419a6..63b98f4143b 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
@@ -18,7 +18,7 @@ export default {
   computed: {
     text() {
       return s__(
-        'AdminArea|You’re about to stop all jobs.This will halt all current jobs that are running.',
+        'AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.',
       );
     },
   },
diff --git a/app/assets/javascripts/pages/admin/projects/index.js b/app/assets/javascripts/pages/admin/projects/index.js
index 042ff7808f1..b07ca815f13 100644
--- a/app/assets/javascripts/pages/admin/projects/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index.js
@@ -1,23 +1,5 @@
-import Vue from 'vue';
 import NamespaceSelect from '~/namespace_select';
 import ProjectsList from '~/projects_list';
-import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
-
-function mountRemoveMemberModal() {
-  const el = document.querySelector('.js-remove-member-modal');
-  if (!el) {
-    return false;
-  }
-
-  return new Vue({
-    el,
-    render(createComponent) {
-      return createComponent(RemoveMemberModal);
-    },
-  });
-}
-
-mountRemoveMemberModal();
 
 new ProjectsList(); // eslint-disable-line no-new
 
diff --git a/app/assets/javascripts/pages/admin/runners/index/index.js b/app/assets/javascripts/pages/admin/runners/index/index.js
index d5563470394..f83111b6385 100644
--- a/app/assets/javascripts/pages/admin/runners/index/index.js
+++ b/app/assets/javascripts/pages/admin/runners/index/index.js
@@ -1,17 +1,3 @@
-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';
-import { initRunnerList } from '~/runner/runner_list';
+import { initAdminRunners } from '~/runner/admin_runners';
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.ADMIN_RUNNERS,
-  filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
-  useDefaultState: true,
-});
-
-initInstallRunner();
-
-if (gon.features?.runnerListViewVueUi) {
-  initRunnerList();
-}
+initAdminRunners();
diff --git a/app/assets/javascripts/pages/admin/serverless/domains/index.js b/app/assets/javascripts/pages/admin/serverless/domains/index.js
index 5be466886a5..4fab7a1d9cb 100644
--- a/app/assets/javascripts/pages/admin/serverless/domains/index.js
+++ b/app/assets/javascripts/pages/admin/serverless/domains/index.js
@@ -1,19 +1,17 @@
 import initSettingsPanels from '~/settings_panels';
 
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize expandable settings panels
-  initSettingsPanels();
+// Initialize expandable settings panels
+initSettingsPanels();
 
-  const domainCard = document.querySelector('.js-domain-cert-show');
-  const domainForm = document.querySelector('.js-domain-cert-inputs');
-  const domainReplaceButton = document.querySelector('.js-domain-cert-replace-btn');
-  const domainSubmitButton = document.querySelector('.js-serverless-domain-submit');
+const domainCard = document.querySelector('.js-domain-cert-show');
+const domainForm = document.querySelector('.js-domain-cert-inputs');
+const domainReplaceButton = document.querySelector('.js-domain-cert-replace-btn');
+const domainSubmitButton = document.querySelector('.js-serverless-domain-submit');
 
-  if (domainReplaceButton && domainCard && domainForm) {
-    domainReplaceButton.addEventListener('click', () => {
-      domainCard.classList.add('hidden');
-      domainForm.classList.remove('hidden');
-      domainSubmitButton.removeAttribute('disabled');
-    });
-  }
-});
+if (domainReplaceButton && domainCard && domainForm) {
+  domainReplaceButton.addEventListener('click', () => {
+    domainCard.classList.add('hidden');
+    domainForm.classList.remove('hidden');
+    domainSubmitButton.removeAttribute('disabled');
+  });
+}
diff --git a/app/assets/javascripts/pages/dashboard/merge_requests/index.js b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
index b099165e3f5..6c134e4fad6 100644
--- a/app/assets/javascripts/pages/dashboard/merge_requests/index.js
+++ b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
@@ -4,14 +4,12 @@ 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);
+addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, true);
 
-  initFilteredSearch({
-    page: FILTERED_SEARCH.MERGE_REQUESTS,
-    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-    useDefaultState: true,
-  });
-
-  projectSelect();
+initFilteredSearch({
+  page: FILTERED_SEARCH.MERGE_REQUESTS,
+  filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+  useDefaultState: true,
 });
+
+projectSelect();
diff --git a/app/assets/javascripts/pages/dashboard/milestones/index/index.js b/app/assets/javascripts/pages/dashboard/milestones/index/index.js
index 38ddebe30d9..b526fce6f7b 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/index/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/index/index.js
@@ -1,3 +1,3 @@
 import projectSelect from '~/project_select';
 
-document.addEventListener('DOMContentLoaded', projectSelect);
+projectSelect();
diff --git a/app/assets/javascripts/pages/explore/groups/index.js b/app/assets/javascripts/pages/explore/groups/index.js
index 3c7edbdd7c7..808fcce46df 100644
--- a/app/assets/javascripts/pages/explore/groups/index.js
+++ b/app/assets/javascripts/pages/explore/groups/index.js
@@ -2,7 +2,7 @@ import GroupsList from '~/groups_list';
 import Landing from '~/landing';
 import initGroupsList from '../../../groups';
 
-document.addEventListener('DOMContentLoaded', () => {
+function exploreGroups() {
   new GroupsList(); // eslint-disable-line no-new
   initGroupsList();
   const landingElement = document.querySelector('.js-explore-groups-landing');
@@ -13,4 +13,6 @@ document.addEventListener('DOMContentLoaded', () => {
     'explore_groups_landing_dismissed',
   );
   exploreGroupsLanding.toggle();
-});
+}
+
+exploreGroups();
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index 13656ee9b16..0137ff87979 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { groupMemberRequestFormatter } from '~/groups/members/utils';
 import groupsSelect from '~/groups_select';
 import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger';
@@ -11,21 +10,6 @@ import { initMembersApp } from '~/members';
 import { MEMBER_TYPES } from '~/members/constants';
 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');
-  if (!el) {
-    return false;
-  }
-
-  return new Vue({
-    el,
-    render(createComponent) {
-      return createComponent(RemoveMemberModal);
-    },
-  });
-}
 
 const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
 
@@ -71,7 +55,6 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), {
 groupsSelect();
 memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
-mountRemoveMemberModal();
 initInviteMembersModal();
 initInviteMembersTrigger();
 initInviteGroupTrigger();
diff --git a/app/assets/javascripts/pages/groups/runners/index.js b/app/assets/javascripts/pages/groups/runners/index.js
new file mode 100644
index 00000000000..ca1a6bdab75
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/runners/index.js
@@ -0,0 +1,3 @@
+import { initGroupRunners } from '~/runner/group_runners';
+
+initGroupRunners();
diff --git a/app/assets/javascripts/pages/groups/settings/badges/index.js b/app/assets/javascripts/pages/groups/settings/badges/index.js
index 3f48e4f281e..9dcea737d51 100644
--- a/app/assets/javascripts/pages/groups/settings/badges/index.js
+++ b/app/assets/javascripts/pages/groups/settings/badges/index.js
@@ -5,6 +5,4 @@ import Translate from '~/vue_shared/translate';
 
 Vue.use(Translate);
 
-document.addEventListener('DOMContentLoaded', () => {
-  mountBadgeSettings(GROUP_BADGE);
-});
+mountBadgeSettings(GROUP_BADGE);
diff --git a/app/assets/javascripts/pages/help/index/index.js b/app/assets/javascripts/pages/help/index/index.js
index fd8c590eb4e..736add8dca3 100644
--- a/app/assets/javascripts/pages/help/index/index.js
+++ b/app/assets/javascripts/pages/help/index/index.js
@@ -2,7 +2,5 @@ import $ from 'jquery';
 import docs from '~/docs/docs_bundle';
 import VersionCheckImage from '~/version_check_image';
 
-document.addEventListener('DOMContentLoaded', () => {
-  docs();
-  VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
-});
+docs();
+VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
diff --git a/app/assets/javascripts/pages/help/ui/index.js b/app/assets/javascripts/pages/help/ui/index.js
index 709ca2f3828..9ccc9123506 100644
--- a/app/assets/javascripts/pages/help/ui/index.js
+++ b/app/assets/javascripts/pages/help/ui/index.js
@@ -1,3 +1,3 @@
 import initUIKit from '~/ui_development_kit';
 
-document.addEventListener('DOMContentLoaded', initUIKit);
+initUIKit();
diff --git a/app/assets/javascripts/pages/import/bitbucket/status/index.js b/app/assets/javascripts/pages/import/bitbucket/status/index.js
index f450a2aac00..6e9c26bf930 100644
--- a/app/assets/javascripts/pages/import/bitbucket/status/index.js
+++ b/app/assets/javascripts/pages/import/bitbucket/status/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
 import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
-document.addEventListener('DOMContentLoaded', () => {
+function importBitBucket() {
   const mountElement = document.getElementById('import-projects-mount-element');
   if (!mountElement) return undefined;
 
@@ -16,4 +16,6 @@ document.addEventListener('DOMContentLoaded', () => {
       return createElement(BitbucketStatusTable, { attrs });
     },
   });
-});
+}
+
+importBitBucket();
diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
index a6d748ce857..90eb423c7a7 100644
--- a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
+++ b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
 import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue';
 
-document.addEventListener('DOMContentLoaded', () => {
+function BitbucketServerStatus() {
   const mountElement = document.getElementById('import-projects-mount-element');
   if (!mountElement) return undefined;
 
@@ -19,4 +19,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     },
   });
-});
+}
+
+BitbucketServerStatus();
diff --git a/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js b/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js
index 68d4c1f049f..86b80a0ba5b 100644
--- a/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js
+++ b/app/assets/javascripts/pages/import/fogbugz/new_user_map/index.js
@@ -1,3 +1,3 @@
 import UsersSelect from '~/users_select';
 
-document.addEventListener('DOMContentLoaded', () => new UsersSelect());
+new UsersSelect(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/import/fogbugz/status/index.js b/app/assets/javascripts/pages/import/fogbugz/status/index.js
index 98ddb8b3aa4..4c427b72372 100644
--- a/app/assets/javascripts/pages/import/fogbugz/status/index.js
+++ b/app/assets/javascripts/pages/import/fogbugz/status/index.js
@@ -1,7 +1,5 @@
 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);
diff --git a/app/assets/javascripts/pages/import/gitea/status/index.js b/app/assets/javascripts/pages/import/gitea/status/index.js
index 98ddb8b3aa4..4c427b72372 100644
--- a/app/assets/javascripts/pages/import/gitea/status/index.js
+++ b/app/assets/javascripts/pages/import/gitea/status/index.js
@@ -1,7 +1,5 @@
 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);
diff --git a/app/assets/javascripts/pages/import/github/status/index.js b/app/assets/javascripts/pages/import/github/status/index.js
index 98ddb8b3aa4..4c427b72372 100644
--- a/app/assets/javascripts/pages/import/github/status/index.js
+++ b/app/assets/javascripts/pages/import/github/status/index.js
@@ -1,7 +1,5 @@
 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);
diff --git a/app/assets/javascripts/pages/import/gitlab/status/index.js b/app/assets/javascripts/pages/import/gitlab/status/index.js
index 98ddb8b3aa4..4c427b72372 100644
--- a/app/assets/javascripts/pages/import/gitlab/status/index.js
+++ b/app/assets/javascripts/pages/import/gitlab/status/index.js
@@ -1,7 +1,5 @@
 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);
diff --git a/app/assets/javascripts/pages/import/gitlab_projects/new/index.js b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js
index bb86f72b95b..870c14f99ae 100644
--- a/app/assets/javascripts/pages/import/gitlab_projects/new/index.js
+++ b/app/assets/javascripts/pages/import/gitlab_projects/new/index.js
@@ -1,3 +1,3 @@
 import initGitLabImportProject from '~/projects/project_import_gitlab_project';
 
-document.addEventListener('DOMContentLoaded', initGitLabImportProject);
+initGitLabImportProject();
diff --git a/app/assets/javascripts/pages/import/manifest/status/index.js b/app/assets/javascripts/pages/import/manifest/status/index.js
index 98ddb8b3aa4..4c427b72372 100644
--- a/app/assets/javascripts/pages/import/manifest/status/index.js
+++ b/app/assets/javascripts/pages/import/manifest/status/index.js
@@ -1,7 +1,5 @@
 import mountImportProjectsTable from '~/import_entities/import_projects';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const mountElement = document.getElementById('import-projects-mount-element');
+const mountElement = document.getElementById('import-projects-mount-element');
 
-  mountImportProjectsTable(mountElement);
-});
+mountImportProjectsTable(mountElement);
diff --git a/app/assets/javascripts/pages/jira_connect/branches/new/index.js b/app/assets/javascripts/pages/jira_connect/branches/new/index.js
new file mode 100644
index 00000000000..f8c3ec63f1f
--- /dev/null
+++ b/app/assets/javascripts/pages/jira_connect/branches/new/index.js
@@ -0,0 +1,3 @@
+import initJiraConnectBranches from '~/jira_connect/branches';
+
+initJiraConnectBranches();
diff --git a/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js
index e93def5323f..8d8534ec556 100644
--- a/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js
+++ b/app/assets/javascripts/pages/ldap/omniauth_callbacks/index.js
@@ -1,3 +1,3 @@
 import { mount2faAuthentication } from '~/authentication/mount_2fa';
 
-document.addEventListener('DOMContentLoaded', mount2faAuthentication);
+mount2faAuthentication();
diff --git a/app/assets/javascripts/pages/omniauth_callbacks/index.js b/app/assets/javascripts/pages/omniauth_callbacks/index.js
index e93def5323f..8d8534ec556 100644
--- a/app/assets/javascripts/pages/omniauth_callbacks/index.js
+++ b/app/assets/javascripts/pages/omniauth_callbacks/index.js
@@ -1,3 +1,3 @@
 import { mount2faAuthentication } from '~/authentication/mount_2fa';
 
-document.addEventListener('DOMContentLoaded', mount2faAuthentication);
+mount2faAuthentication();
diff --git a/app/assets/javascripts/pages/profiles/accounts/show/index.js b/app/assets/javascripts/pages/profiles/accounts/show/index.js
index 5350ef61184..3d400ed77f5 100644
--- a/app/assets/javascripts/pages/profiles/accounts/show/index.js
+++ b/app/assets/javascripts/pages/profiles/accounts/show/index.js
@@ -1,6 +1,6 @@
 import { initClose2faSuccessMessage } from '~/authentication/two_factor_auth';
 import initProfileAccount from '~/profile/account';
 
-document.addEventListener('DOMContentLoaded', initProfileAccount);
+initProfileAccount();
 
 initClose2faSuccessMessage();
diff --git a/app/assets/javascripts/pages/profiles/keys/index.js b/app/assets/javascripts/pages/profiles/keys/index.js
index 4214d5bffb2..1b291d9509d 100644
--- a/app/assets/javascripts/pages/profiles/keys/index.js
+++ b/app/assets/javascripts/pages/profiles/keys/index.js
@@ -1,9 +1,9 @@
 import initConfirmModal from '~/confirm_modal';
 import AddSshKeyValidation from '~/profile/add_ssh_key_validation';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initConfirmModal();
+initConfirmModal();
 
+function initSshKeyValidation() {
   const input = document.querySelector('.js-add-ssh-key-validation-input');
   if (!input) return;
 
@@ -18,4 +18,6 @@ document.addEventListener('DOMContentLoaded', () => {
     confirmSubmit,
   );
   addSshKeyValidation.register();
-});
+}
+
+initSshKeyValidation();
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 186072531b8..50835333a54 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -2,17 +2,15 @@ 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');
-  const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false;
+const twoFactorNode = document.querySelector('.js-two-factor-auth');
+const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false;
 
-  if (skippable) {
-    const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert');
-    if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
-  }
+if (skippable) {
+  const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+  const flashAlert = document.querySelector('.flash-alert');
+  if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
+}
 
-  mount2faRegistration();
-});
+mount2faRegistration();
 
 initRecoveryCodes();
diff --git a/app/assets/javascripts/pages/projects/artifacts/file/index.js b/app/assets/javascripts/pages/projects/artifacts/file/index.js
index 057ef157374..07ee4d686cc 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 ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 
 new ShortcutsNavigation(); // eslint-disable-line no-new
 new BlobViewer(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 6cc0095f5a5..b365e039191 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import TableOfContents from '~/blob/components/table_contents.vue';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer, initAuxiliaryViewer } from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
 import createDefaultClient from '~/lib/graphql';
 import initBlob from '~/pages/projects/init_blob';
@@ -39,6 +39,8 @@ if (viewBlobEl) {
       });
     },
   });
+
+  initAuxiliaryViewer();
 } else {
   new BlobViewer(); // eslint-disable-line no-new
   initBlob();
diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js
index 549e596cb8d..5edaa7f7e51 100644
--- a/app/assets/javascripts/pages/projects/compare/show/index.js
+++ b/app/assets/javascripts/pages/projects/compare/show/index.js
@@ -5,9 +5,7 @@ import initCompareSelector from '~/projects/compare';
 
 initCompareSelector();
 
-document.addEventListener('DOMContentLoaded', () => {
-  new Diff(); // eslint-disable-line no-new
-  const paddingTop = 16;
-  initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
-  GpgBadges.fetch();
-});
+new Diff(); // eslint-disable-line no-new
+const paddingTop = 16;
+initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
+GpgBadges.fetch();
diff --git a/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js
index 255d05b39be..bef21ef8fdf 100644
--- a/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js
+++ b/app/assets/javascripts/pages/projects/cycle_analytics/show/index.js
@@ -1,3 +1,3 @@
 import initCycleAnalytics from '~/cycle_analytics';
 
-document.addEventListener('DOMContentLoaded', initCycleAnalytics);
+initCycleAnalytics();
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 9aa7e62e3ee..335d8d481fc 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -25,10 +25,6 @@ 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'));
 
 initSearchSettings();
diff --git a/app/assets/javascripts/pages/projects/environments/edit/index.js b/app/assets/javascripts/pages/projects/environments/edit/index.js
new file mode 100644
index 00000000000..574963d825a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/environments/edit/index.js
@@ -0,0 +1,3 @@
+import mountEdit from '~/environments/edit';
+
+mountEdit(document.getElementById('js-edit-environment'));
diff --git a/app/assets/javascripts/pages/projects/environments/folder/index.js b/app/assets/javascripts/pages/projects/environments/folder/index.js
index 5feaf944038..2f22a3a84ff 100644
--- a/app/assets/javascripts/pages/projects/environments/folder/index.js
+++ b/app/assets/javascripts/pages/projects/environments/folder/index.js
@@ -1,3 +1,3 @@
 import initEnvironmentsFolderBundle from '~/environments/folder/environments_folder_bundle';
 
-document.addEventListener('DOMContentLoaded', initEnvironmentsFolderBundle);
+initEnvironmentsFolderBundle();
diff --git a/app/assets/javascripts/pages/projects/environments/metrics/index.js b/app/assets/javascripts/pages/projects/environments/metrics/index.js
index d3028aec313..606439866ea 100644
--- a/app/assets/javascripts/pages/projects/environments/metrics/index.js
+++ b/app/assets/javascripts/pages/projects/environments/metrics/index.js
@@ -1,3 +1,3 @@
 import monitoringApp from '~/monitoring/monitoring_app';
 
-document.addEventListener('DOMContentLoaded', monitoringApp);
+monitoringApp();
diff --git a/app/assets/javascripts/pages/projects/environments/new/index.js b/app/assets/javascripts/pages/projects/environments/new/index.js
new file mode 100644
index 00000000000..2edb1ca7088
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/environments/new/index.js
@@ -0,0 +1,3 @@
+import mountNew from '~/environments/new';
+
+mountNew(document.getElementById('js-new-environment'));
diff --git a/app/assets/javascripts/pages/projects/environments/show/index.js b/app/assets/javascripts/pages/projects/environments/show/index.js
index a4960037eaa..53e48ad8d86 100644
--- a/app/assets/javascripts/pages/projects/environments/show/index.js
+++ b/app/assets/javascripts/pages/projects/environments/show/index.js
@@ -1,3 +1,5 @@
-import initShowEnvironment from '~/environments/mount_show';
+import initConfirmRollBackModal from '~/environments/init_confirm_rollback_modal';
+import { initHeader } from '~/environments/mount_show';
 
-initShowEnvironment();
+initHeader();
+initConfirmRollBackModal();
diff --git a/app/assets/javascripts/pages/projects/environments/terminal/index.js b/app/assets/javascripts/pages/projects/environments/terminal/index.js
index 7129e24cee1..d42c163a41b 100644
--- a/app/assets/javascripts/pages/projects/environments/terminal/index.js
+++ b/app/assets/javascripts/pages/projects/environments/terminal/index.js
@@ -1,3 +1,3 @@
 import initTerminal from '~/terminal/';
 
-document.addEventListener('DOMContentLoaded', initTerminal);
+initTerminal();
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index ea38b8e15a4..c217bc5a727 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -7,151 +7,149 @@ import SeriesDataMixin from './series_data_mixin';
 
 const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data }));
 
-document.addEventListener('DOMContentLoaded', () => {
-  waitForCSSLoaded(() => {
-    const languagesContainer = document.getElementById('js-languages-chart');
-    const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
-    const monthContainer = document.getElementById('js-month-chart');
-    const weekdayContainer = document.getElementById('js-weekday-chart');
-    const hourContainer = document.getElementById('js-hour-chart');
-    const LANGUAGE_CHART_HEIGHT = 300;
-    const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
-      if (firstDayOfWeek === 0) {
-        return weekDays;
-      }
+waitForCSSLoaded(() => {
+  const languagesContainer = document.getElementById('js-languages-chart');
+  const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
+  const monthContainer = document.getElementById('js-month-chart');
+  const weekdayContainer = document.getElementById('js-weekday-chart');
+  const hourContainer = document.getElementById('js-hour-chart');
+  const LANGUAGE_CHART_HEIGHT = 300;
+  const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
+    if (firstDayOfWeek === 0) {
+      return weekDays;
+    }
 
-      return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
-        const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
+    return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
+      const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
 
-        return {
-          ...acc,
-          [reorderedDayName]: weekDays[reorderedDayName],
-        };
-      }, {});
-    };
+      return {
+        ...acc,
+        [reorderedDayName]: weekDays[reorderedDayName],
+      };
+    }, {});
+  };
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: languagesContainer,
-      components: {
-        GlColumnChart,
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: languagesContainer,
+    components: {
+      GlColumnChart,
+    },
+    data() {
+      return {
+        chartData: JSON.parse(languagesContainer.dataset.chartData),
+      };
+    },
+    computed: {
+      seriesData() {
+        return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
       },
-      data() {
-        return {
-          chartData: JSON.parse(languagesContainer.dataset.chartData),
-        };
-      },
-      computed: {
-        seriesData() {
-          return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: this.seriesData,
+          xAxisTitle: __('Used programming language'),
+          yAxisTitle: __('Percentage'),
+          xAxisType: 'category',
         },
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: this.seriesData,
-            xAxisTitle: __('Used programming language'),
-            yAxisTitle: __('Percentage'),
-            xAxisType: 'category',
-          },
-          attrs: {
-            height: LANGUAGE_CHART_HEIGHT,
-          },
-        });
-      },
-    });
+        attrs: {
+          height: LANGUAGE_CHART_HEIGHT,
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: codeCoverageContainer,
-      render(h) {
-        return h(CodeCoverage, {
-          props: {
-            graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: codeCoverageContainer,
+    render(h) {
+      return h(CodeCoverage, {
+        props: {
+          graphEndpoint: codeCoverageContainer.dataset?.graphEndpoint,
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: monthContainer,
-      components: {
-        GlColumnChart,
-      },
-      mixins: [SeriesDataMixin],
-      data() {
-        return {
-          chartData: JSON.parse(monthContainer.dataset.chartData),
-        };
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: seriesDataToBarData(this.seriesData),
-            xAxisTitle: __('Day of month'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: monthContainer,
+    components: {
+      GlColumnChart,
+    },
+    mixins: [SeriesDataMixin],
+    data() {
+      return {
+        chartData: JSON.parse(monthContainer.dataset.chartData),
+      };
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: seriesDataToBarData(this.seriesData),
+          xAxisTitle: __('Day of month'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
+        },
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: weekdayContainer,
-      components: {
-        GlColumnChart,
-      },
-      data() {
-        return {
-          chartData: JSON.parse(weekdayContainer.dataset.chartData),
-        };
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: weekdayContainer,
+    components: {
+      GlColumnChart,
+    },
+    data() {
+      return {
+        chartData: JSON.parse(weekdayContainer.dataset.chartData),
+      };
+    },
+    computed: {
+      seriesData() {
+        const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
+        const data = Object.keys(weekDays).reduce((acc, key) => {
+          acc.push([key, weekDays[key]]);
+          return acc;
+        }, []);
+        return [{ name: 'full', data }];
       },
-      computed: {
-        seriesData() {
-          const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
-          const data = Object.keys(weekDays).reduce((acc, key) => {
-            acc.push([key, weekDays[key]]);
-            return acc;
-          }, []);
-          return [{ name: 'full', data }];
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: this.seriesData,
+          xAxisTitle: __('Weekday'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
         },
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: this.seriesData,
-            xAxisTitle: __('Weekday'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+      });
+    },
+  });
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: hourContainer,
-      components: {
-        GlColumnChart,
-      },
-      mixins: [SeriesDataMixin],
-      data() {
-        return {
-          chartData: JSON.parse(hourContainer.dataset.chartData),
-        };
-      },
-      render(h) {
-        return h(GlColumnChart, {
-          props: {
-            bars: seriesDataToBarData(this.seriesData),
-            xAxisTitle: __('Hour (UTC)'),
-            yAxisTitle: __('No. of commits'),
-            xAxisType: 'category',
-          },
-        });
-      },
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: hourContainer,
+    components: {
+      GlColumnChart,
+    },
+    mixins: [SeriesDataMixin],
+    data() {
+      return {
+        chartData: JSON.parse(hourContainer.dataset.chartData),
+      };
+    },
+    render(h) {
+      return h(GlColumnChart, {
+        props: {
+          bars: seriesDataToBarData(this.seriesData),
+          xAxisTitle: __('Hour (UTC)'),
+          yAxisTitle: __('No. of commits'),
+          xAxisType: 'category',
+        },
+      });
+    },
   });
 });
diff --git a/app/assets/javascripts/pages/projects/graphs/show/index.js b/app/assets/javascripts/pages/projects/graphs/show/index.js
index 09d9c78c446..4f5a5bfe6fe 100644
--- a/app/assets/javascripts/pages/projects/graphs/show/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/show/index.js
@@ -1,3 +1,3 @@
 import initContributorsGraphs from '~/contributors';
 
-document.addEventListener('DOMContentLoaded', initContributorsGraphs);
+initContributorsGraphs();
diff --git a/app/assets/javascripts/pages/projects/import/jira/index.js b/app/assets/javascripts/pages/projects/import/jira/index.js
index cb7a7bde55d..5876e5283b5 100644
--- a/app/assets/javascripts/pages/projects/import/jira/index.js
+++ b/app/assets/javascripts/pages/projects/import/jira/index.js
@@ -1,3 +1,3 @@
 import mountJiraImportApp from '~/jira_import';
 
-document.addEventListener('DOMContentLoaded', mountJiraImportApp);
+mountJiraImportApp();
diff --git a/app/assets/javascripts/pages/projects/issues/edit/index.js b/app/assets/javascripts/pages/projects/issues/edit/index.js
index aecc6484b26..48afd2142ee 100644
--- a/app/assets/javascripts/pages/projects/issues/edit/index.js
+++ b/app/assets/javascripts/pages/projects/issues/edit/index.js
@@ -1,3 +1,3 @@
 import initForm from 'ee_else_ce/pages/projects/issues/form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 3cea61262ea..e365f51567d 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -3,10 +3,10 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
-import '~/notes/index';
 import initIncidentApp from '~/issue_show/incident';
 import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import { parseIssuableData } from '~/issue_show/utils/parse_data';
+import initNotesApp from '~/notes/index';
 import { store } from '~/notes/stores';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
@@ -14,6 +14,8 @@ import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_iss
 import ZenMode from '~/zen_mode';
 
 export default function initShowIssue() {
+  initNotesApp();
+
   const initialDataEl = document.getElementById('js-issuable-app');
   const { issueType, ...issuableData } = parseIssuableData(initialDataEl);
 
diff --git a/app/assets/javascripts/pages/projects/jobs/terminal/index.js b/app/assets/javascripts/pages/projects/jobs/terminal/index.js
index 7129e24cee1..d42c163a41b 100644
--- a/app/assets/javascripts/pages/projects/jobs/terminal/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/terminal/index.js
@@ -1,3 +1,3 @@
 import initTerminal from '~/terminal/';
 
-document.addEventListener('DOMContentLoaded', initTerminal);
+initTerminal();
diff --git a/app/assets/javascripts/pages/projects/network/show/index.js b/app/assets/javascripts/pages/projects/network/show/index.js
index 9f05f63b742..2dabcfadfab 100644
--- a/app/assets/javascripts/pages/projects/network/show/index.js
+++ b/app/assets/javascripts/pages/projects/network/show/index.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 import ShortcutsNetwork from '~/behaviors/shortcuts/shortcuts_network';
 import Network from '../network';
 
-document.addEventListener('DOMContentLoaded', () => {
+(() => {
   if (!$('.network-graph').length) return;
 
   const networkGraph = new Network({
@@ -14,4 +14,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // eslint-disable-next-line no-new
   new ShortcutsNetwork(networkGraph.branch_graph);
-});
+})();
diff --git a/app/assets/javascripts/pages/projects/pages_domains/new/index.js b/app/assets/javascripts/pages/projects/pages_domains/new/index.js
index 27e4433ad4d..17fa49a46e0 100644
--- a/app/assets/javascripts/pages/projects/pages_domains/new/index.js
+++ b/app/assets/javascripts/pages/projects/pages_domains/new/index.js
@@ -1,3 +1,3 @@
 import initForm from '~/pages/projects/pages_domains/form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/pages_domains/show/index.js b/app/assets/javascripts/pages/projects/pages_domains/show/index.js
index 27e4433ad4d..17fa49a46e0 100644
--- a/app/assets/javascripts/pages/projects/pages_domains/show/index.js
+++ b/app/assets/javascripts/pages/projects/pages_domains/show/index.js
@@ -1,3 +1,3 @@
 import initForm from '~/pages/projects/pages_domains/form';
 
-document.addEventListener('DOMContentLoaded', initForm);
+initForm();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
index 40730ec7e60..cd4bc35e74e 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue';
 
-document.addEventListener('DOMContentLoaded', () => {
+function initPipelineSchedules() {
   const el = document.getElementById('pipeline-schedules-callout');
 
   if (!el) {
@@ -21,4 +21,6 @@ document.addEventListener('DOMContentLoaded', () => {
       return createElement(PipelineSchedulesCallout);
     },
   });
-});
+}
+
+initPipelineSchedules();
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index 177dc346c60..fb0be31834d 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import groupsSelect from '~/groups_select';
 import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger';
 import initInviteMembersForm from '~/invite_members/init_invite_members_form';
@@ -11,26 +10,10 @@ import { MEMBER_TYPES } from '~/members/constants';
 import { groupLinkRequestFormatter } from '~/members/utils';
 import { projectMemberRequestFormatter } from '~/projects/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');
-  if (!el) {
-    return false;
-  }
-
-  return new Vue({
-    el,
-    render(createComponent) {
-      return createComponent(RemoveMemberModal);
-    },
-  });
-}
 
 groupsSelect();
 memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
-mountRemoveMemberModal();
 initInviteMembersModal();
 initInviteMembersTrigger();
 initInviteGroupTrigger();
diff --git a/app/assets/javascripts/pages/projects/security/configuration/index.js b/app/assets/javascripts/pages/projects/security/configuration/index.js
index 8bba3d7af54..5f801501b2f 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 { initCESecurityConfiguration } from '~/security_configuration';
+import { initSecurityConfiguration } from '~/security_configuration';
 
-initCESecurityConfiguration(document.querySelector('#js-security-configuration-static'));
+initSecurityConfiguration(document.querySelector('#js-security-configuration-static'));
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
index 8e603c5c1a2..03ffc323fc0 100644
--- a/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -2,16 +2,14 @@ import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusAlerts from '~/prometheus_alerts';
 import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-  integrationSettingsForm.init();
+const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+integrationSettingsForm.init();
 
-  const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
-  const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
-  if (prometheusSettingsWrapper) {
-    const customMetrics = new CustomMetrics(prometheusSettingsSelector);
-    customMetrics.init();
-  }
+const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
+const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
+if (prometheusSettingsWrapper) {
+  const customMetrics = new CustomMetrics(prometheusSettingsSelector);
+  customMetrics.init();
+}
 
-  PrometheusAlerts();
-});
+PrometheusAlerts();
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 6fcaa3ab04b..261f7af7ef1 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
@@ -3,7 +3,6 @@ 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 glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   visibilityOptions,
   visibilityLevelDescriptions,
@@ -12,6 +11,7 @@ import {
   featureAccessLevel,
   featureAccessLevelNone,
   CVE_ID_REQUEST_BUTTON_I18N,
+  featureAccessLevelDescriptions,
 } from '../constants';
 import { toggleHiddenClassBySelector } from '../external';
 import projectFeatureSetting from './project_feature_setting.vue';
@@ -48,7 +48,7 @@ export default {
     GlFormCheckbox,
     GlToggle,
   },
-  mixins: [settingsMixin, glFeatureFlagsMixin()],
+  mixins: [settingsMixin],
 
   props: {
     requestCveAvailable: {
@@ -177,7 +177,7 @@ export default {
       requirementsAccessLevel: featureAccessLevel.EVERYONE,
       securityAndComplianceAccessLevel: featureAccessLevel.PROJECT_MEMBERS,
       operationsAccessLevel: featureAccessLevel.EVERYONE,
-      containerRegistryEnabled: true,
+      containerRegistryAccessLevel: featureAccessLevel.EVERYONE,
       lfsEnabled: true,
       requestAccessEnabled: true,
       highlightChangesClass: false,
@@ -185,6 +185,8 @@ export default {
       cveIdRequestEnabled: true,
       featureAccessLevelEveryone,
       featureAccessLevelMembers,
+      featureAccessLevel,
+      featureAccessLevelDescriptions,
     };
 
     return { ...defaults, ...this.currentSettings };
@@ -249,7 +251,10 @@ export default {
     },
 
     showContainerRegistryPublicNote() {
-      return this.visibilityLevel === visibilityOptions.PUBLIC;
+      return (
+        this.visibilityLevel === visibilityOptions.PUBLIC &&
+        this.containerRegistryAccessLevel === featureAccessLevel.EVERYONE
+      );
     },
 
     repositoryHelpText() {
@@ -311,6 +316,10 @@ export default {
           featureAccessLevel.PROJECT_MEMBERS,
           this.operationsAccessLevel,
         );
+        this.containerRegistryAccessLevel = Math.min(
+          featureAccessLevel.PROJECT_MEMBERS,
+          this.containerRegistryAccessLevel,
+        );
         if (this.pagesAccessLevel === featureAccessLevel.EVERYONE) {
           // When from Internal->Private narrow access for only members
           this.pagesAccessLevel = featureAccessLevel.PROJECT_MEMBERS;
@@ -340,6 +349,8 @@ export default {
           this.requirementsAccessLevel = featureAccessLevel.EVERYONE;
         if (this.operationsAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
           this.operationsAccessLevel = featureAccessLevel.EVERYONE;
+        if (this.containerRegistryAccessLevel === featureAccessLevel.PROJECT_MEMBERS)
+          this.containerRegistryAccessLevel = featureAccessLevel.EVERYONE;
 
         this.highlightChanges();
       }
@@ -513,31 +524,6 @@ export default {
           />
         </project-setting-row>
         <project-setting-row
-          v-if="registryAvailable"
-          ref="container-registry-settings"
-          :help-path="registryHelpPath"
-          :label="$options.i18n.containerRegistryLabel"
-          :help-text="
-            s__('ProjectSettings|Every project can have its own space to store its Docker images')
-          "
-        >
-          <div v-if="showContainerRegistryPublicNote" class="text-muted">
-            {{
-              s__(
-                'ProjectSettings|Note: the container registry is always visible when a project is public',
-              )
-            }}
-          </div>
-          <gl-toggle
-            v-model="containerRegistryEnabled"
-            class="gl-my-2"
-            :disabled="!repositoryEnabled"
-            :label="$options.i18n.containerRegistryLabel"
-            label-position="hidden"
-            name="project[container_registry_enabled]"
-          />
-        </project-setting-row>
-        <project-setting-row
           v-if="lfsAvailable"
           ref="git-lfs-settings"
           :help-path="lfsHelpPath"
@@ -590,18 +576,47 @@ export default {
             name="project[packages_enabled]"
           />
         </project-setting-row>
+        <project-setting-row
+          ref="pipeline-settings"
+          :label="$options.i18n.ciCdLabel"
+          :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')"
+        >
+          <project-feature-setting
+            v-model="buildsAccessLevel"
+            :label="$options.i18n.ciCdLabel"
+            :options="repoFeatureAccessLevelOptions"
+            :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][builds_access_level]"
+          />
+        </project-setting-row>
       </div>
       <project-setting-row
-        ref="pipeline-settings"
-        :label="$options.i18n.ciCdLabel"
-        :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')"
+        v-if="registryAvailable"
+        ref="container-registry-settings"
+        :help-path="registryHelpPath"
+        :label="$options.i18n.containerRegistryLabel"
+        :help-text="
+          s__('ProjectSettings|Every project can have its own space to store its Docker images')
+        "
       >
+        <div v-if="showContainerRegistryPublicNote" class="text-muted">
+          <gl-sprintf
+            :message="
+              s__(
+                `ProjectSettings|Note: The container registry is always visible when a project is public and the container registry is set to '%{access_level_description}'`,
+              )
+            "
+          >
+            <template #access_level_description>{{
+              featureAccessLevelDescriptions[featureAccessLevel.EVERYONE]
+            }}</template>
+          </gl-sprintf>
+        </div>
         <project-feature-setting
-          v-model="buildsAccessLevel"
-          :label="$options.i18n.ciCdLabel"
-          :options="repoFeatureAccessLevelOptions"
-          :disabled-input="!repositoryEnabled"
-          name="project[project_feature_attributes][builds_access_level]"
+          v-model="containerRegistryAccessLevel"
+          :options="featureAccessLevelOptions"
+          :label="$options.i18n.containerRegistryLabel"
+          name="project[project_feature_attributes][container_registry_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -737,22 +752,5 @@ export default {
         }}</template>
       </gl-form-checkbox>
     </project-setting-row>
-    <project-setting-row
-      v-if="glFeatures.allowEditingCommitMessages"
-      ref="allow-editing-commit-messages"
-      class="gl-mb-4"
-    >
-      <input
-        :value="allowEditingCommitMessages"
-        type="hidden"
-        name="project[project_setting_attributes][allow_editing_commit_messages]"
-      />
-      <gl-form-checkbox v-model="allowEditingCommitMessages">
-        {{ s__('ProjectSettings|Allow editing commit messages') }}
-        <template #help>{{
-          s__('ProjectSettings|Commit authors can edit commit messages on unprotected branches.')
-        }}</template>
-      </gl-form-checkbox>
-    </project-setting-row>
   </div>
 </template>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/constants.js b/app/assets/javascripts/pages/projects/shared/permissions/constants.js
index e160fdacca6..fb1acd5311c 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/constants.js
+++ b/app/assets/javascripts/pages/projects/shared/permissions/constants.js
@@ -22,7 +22,7 @@ export const featureAccessLevel = {
   EVERYONE: 20,
 };
 
-const featureAccessLevelDescriptions = {
+export const featureAccessLevelDescriptions = {
   [featureAccessLevel.NOT_ENABLED]: __('Enable feature to choose access level'),
   [featureAccessLevel.PROJECT_MEMBERS]: __('Only Project Members'),
   [featureAccessLevel.EVERYONE]: __('Everyone With Access'),
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 26f8018a968..78b3f2f1b30 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -1,7 +1,7 @@
 import initTree from 'ee_else_ce/repository';
 import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import BlobViewer from '~/blob/viewer/index';
+import { BlobViewer } from '~/blob/viewer/index';
 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';
diff --git a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js b/app/assets/javascripts/pages/projects/static_site_editor/show/index.js
index 8f808dae56c..d9d265e4e4a 100644
--- a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js
+++ b/app/assets/javascripts/pages/projects/static_site_editor/show/index.js
@@ -1,5 +1,3 @@
 import initStaticSiteEditor from '~/static_site_editor';
 
-window.addEventListener('DOMContentLoaded', () => {
-  initStaticSiteEditor(document.querySelector('#static-site-editor'));
-});
+initStaticSiteEditor(document.querySelector('#static-site-editor'));
diff --git a/app/assets/javascripts/pages/sessions/index.js b/app/assets/javascripts/pages/sessions/index.js
index e93def5323f..8d8534ec556 100644
--- a/app/assets/javascripts/pages/sessions/index.js
+++ b/app/assets/javascripts/pages/sessions/index.js
@@ -1,3 +1,3 @@
 import { mount2faAuthentication } from '~/authentication/mount_2fa';
 
-document.addEventListener('DOMContentLoaded', mount2faAuthentication);
+mount2faAuthentication();
diff --git a/app/assets/javascripts/pages/sessions/new/index.js b/app/assets/javascripts/pages/sessions/new/index.js
index 465aed88c01..8c2fd624a83 100644
--- a/app/assets/javascripts/pages/sessions/new/index.js
+++ b/app/assets/javascripts/pages/sessions/new/index.js
@@ -7,18 +7,16 @@ 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
-  new LengthValidator(); // eslint-disable-line no-new
-  new SigninTabsMemoizer(); // 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 SigninTabsMemoizer(); // eslint-disable-line no-new
+new NoEmojiValidator(); // eslint-disable-line no-new
 
-  new OAuthRememberMe({
-    container: $('.omniauth-container'),
-  }).bindEvents();
+new OAuthRememberMe({
+  container: $('.omniauth-container'),
+}).bindEvents();
 
-  // 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();
-});
+// 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/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index e883fecb170..a8ec731e105 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -6,7 +6,6 @@ import {
   GlButton,
   GlSprintf,
   GlAlert,
-  GlLoadingIcon,
   GlModal,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -114,7 +113,6 @@ export default {
     GlButton,
     GlModal,
     MarkdownField,
-    GlLoadingIcon,
     ContentEditor: () =>
       import(
         /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue'
@@ -134,14 +132,14 @@ export default {
       isContentEditorLoading: true,
       useContentEditor: false,
       commitMessage: '',
-      contentEditor: null,
       isDirty: false,
       contentEditorRenderFailed: false,
+      contentEditorEmpty: false,
     };
   },
   computed: {
     noContent() {
-      if (this.isContentEditorActive) return this.contentEditor?.empty;
+      if (this.isContentEditorActive) return this.contentEditorEmpty;
       return !this.content.trim();
     },
     csrfToken() {
@@ -206,7 +204,7 @@ export default {
     window.removeEventListener('beforeunload', this.onPageUnload);
   },
   methods: {
-    getContentHTML(content) {
+    renderMarkdown(content) {
       return axios
         .post(this.pageInfo.markdownPreviewPath, { text: content })
         .then(({ data }) => data.body);
@@ -233,6 +231,32 @@ export default {
       this.isDirty = true;
     },
 
+    async loadInitialContent(contentEditor) {
+      this.contentEditor = contentEditor;
+
+      try {
+        await this.contentEditor.setSerializedContent(this.content);
+        this.trackContentEditorLoaded();
+      } catch (e) {
+        this.contentEditorRenderFailed = true;
+      }
+    },
+
+    async retryInitContentEditor() {
+      try {
+        this.contentEditorRenderFailed = false;
+        await this.contentEditor.setSerializedContent(this.content);
+      } catch (e) {
+        this.contentEditorRenderFailed = true;
+      }
+    },
+
+    handleContentEditorChange({ empty }) {
+      this.contentEditorEmpty = empty;
+      // TODO: Implement a precise mechanism to detect changes in the Content
+      this.isDirty = true;
+    },
+
     onPageUnload(event) {
       if (!this.isDirty) return undefined;
 
@@ -253,36 +277,8 @@ export default {
       this.commitMessage = newCommitMessage;
     },
 
-    async initContentEditor() {
-      this.isContentEditorLoading = true;
+    initContentEditor() {
       this.useContentEditor = true;
-
-      const { createContentEditor } = await import(
-        /* webpackChunkName: 'content_editor' */ '~/content_editor/services/create_content_editor'
-      );
-      this.contentEditor =
-        this.contentEditor ||
-        createContentEditor({
-          renderMarkdown: (markdown) => this.getContentHTML(markdown),
-          uploadsPath: this.pageInfo.uploadsPath,
-          tiptapOptions: {
-            onUpdate: () => this.handleContentChange(),
-          },
-        });
-
-      try {
-        await this.contentEditor.setSerializedContent(this.content);
-        this.isContentEditorLoading = false;
-
-        this.trackContentEditorLoaded();
-      } catch (e) {
-        this.contentEditorRenderFailed = true;
-      }
-    },
-
-    retryInitContentEditor() {
-      this.contentEditorRenderFailed = false;
-      this.initContentEditor();
     },
 
     switchToOldEditor() {
@@ -401,6 +397,7 @@ export default {
           v-if="showContentEditorAlert"
           class="gl-mb-6"
           variant="info"
+          data-qa-selector="try_new_editor_container"
           :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel"
           :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
           :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
@@ -476,12 +473,12 @@ export default {
               >
             </gl-sprintf>
           </gl-alert>
-          <gl-loading-icon
-            v-if="isContentEditorLoading"
-            size="sm"
-            class="bordered-box gl-w-full gl-py-6"
+          <content-editor
+            :render-markdown="renderMarkdown"
+            :uploads-path="pageInfo.uploadsPath"
+            @initialized="loadInitialContent"
+            @change="handleContentEditorChange"
           />
-          <content-editor v-else :content-editor="contentEditor" />
           <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" />
         </div>