Add latest changes from gitlab-org/gitlab@13-4-stable-ee

44 files changed, 533 insertions, 305 deletions

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 bbaaeb55c65..a2fca238613 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 'ee_else_ce/admin/application_settings/setup_metrics_and_profiling';
+import setup from '~/admin/application_settings/setup_metrics_and_profiling';
 
 document.addEventListener('DOMContentLoaded', setup);
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 e7b468f039f..f8fc53799a8 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -3,9 +3,9 @@ import { __ } from '../../../locale';
 import { deprecatedCreateFlash as flash } from '../../../flash';
 
 export default class PayloadPreviewer {
-  constructor(trigger, container) {
+  constructor(trigger) {
     this.trigger = trigger;
-    this.container = container;
+    this.container = document.querySelector(trigger.dataset.payloadSelector);
     this.isVisible = false;
     this.isInserted = false;
   }
diff --git a/app/assets/javascripts/pages/admin/clusters/new/index.js b/app/assets/javascripts/pages/admin/clusters/new/index.js
new file mode 100644
index 00000000000..876bab0b339
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/clusters/new/index.js
@@ -0,0 +1,5 @@
+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});
diff --git a/app/assets/javascripts/pages/admin/cohorts/index.js b/app/assets/javascripts/pages/admin/cohorts/index.js
new file mode 100644
index 00000000000..1cc54df15a1
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/cohorts/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import UsagePingDisabled from '~/admin/cohorts/components/usage_ping_disabled.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const emptyStateContainer = document.getElementById('js-cohorts-empty-state');
+
+  if (!emptyStateContainer) return false;
+
+  const { emptyStateSvgPath, enableUsagePingLink, docsLink } = emptyStateContainer.dataset;
+
+  return new Vue({
+    el: emptyStateContainer,
+    provide: {
+      svgPath: emptyStateSvgPath,
+      primaryButtonPath: enableUsagePingLink,
+      docsLink,
+    },
+    render(h) {
+      return h(UsagePingDisabled);
+    },
+  });
+});
diff --git a/app/assets/javascripts/pages/admin/dev_ops_report/index.js b/app/assets/javascripts/pages/admin/dev_ops_report/index.js
new file mode 100644
index 00000000000..643497003ba
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/dev_ops_report/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import UserCallout from '~/user_callout';
+import UsagePingDisabled from '~/admin/dev_ops_report/components/usage_ping_disabled.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // eslint-disable-next-line no-new
+  new UserCallout();
+
+  const emptyStateContainer = document.getElementById('js-devops-empty-state');
+
+  if (!emptyStateContainer) return false;
+
+  const { emptyStateSvgPath, enableUsagePingLink, docsLink, isAdmin } = emptyStateContainer.dataset;
+
+  return new Vue({
+    el: emptyStateContainer,
+    provide: {
+      isAdmin: Boolean(isAdmin),
+      svgPath: emptyStateSvgPath,
+      primaryButtonPath: enableUsagePingLink,
+      docsLink,
+    },
+    render(h) {
+      return h(UsagePingDisabled);
+    },
+  });
+});
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 8bb093da771..b92fc8d125d 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
@@ -1,11 +1,14 @@
 <script>
+import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
 import { escape } from 'lodash';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   components: {
-    DeprecatedModal,
+    GlModal,
+  },
+  directives: {
+    SafeHtml,
   },
   props: {
     deleteProjectUrl: {
@@ -62,51 +65,57 @@ export default {
         false,
       );
     },
-    primaryButtonLabel() {
-      return s__('AdminProjects|Delete project');
-    },
     canSubmit() {
       return this.enteredProjectName === this.projectName;
     },
+    primaryProps() {
+      return {
+        text: s__('Delete project'),
+        attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }],
+      };
+    },
   },
   methods: {
     onCancel() {
       this.enteredProjectName = '';
     },
     onSubmit() {
+      if (!this.canSubmit) {
+        return;
+      }
       this.$refs.form.submit();
       this.enteredProjectName = '';
     },
   },
+  cancelProps: {
+    text: __('Cancel'),
+  },
 };
 </script>
 
 <template>
-  <deprecated-modal
-    id="delete-project-modal"
+  <gl-modal
+    modal-id="delete-project-modal"
     :title="title"
-    :text="text"
-    :primary-button-label="primaryButtonLabel"
-    :submit-disabled="!canSubmit"
-    kind="danger"
-    @submit="onSubmit"
+    :action-primary="primaryProps"
+    :action-cancel="$options.cancelProps"
+    :ok-disabled="!canSubmit"
+    @primary="onSubmit"
     @cancel="onCancel"
   >
-    <template #body="props">
-      <p v-html="props.text"></p>
-      <p v-html="confirmationTextLabel"></p>
-      <form ref="form" :action="deleteProjectUrl" method="post">
-        <input ref="method" type="hidden" name="_method" value="delete" />
-        <input :value="csrfToken" type="hidden" name="authenticity_token" />
-        <input
-          v-model="enteredProjectName"
-          name="projectName"
-          class="form-control"
-          type="text"
-          aria-labelledby="input-label"
-          autocomplete="off"
-        />
-      </form>
-    </template>
-  </deprecated-modal>
+    <p v-safe-html="text"></p>
+    <p v-safe-html="confirmationTextLabel"></p>
+    <form ref="form" :action="deleteProjectUrl" method="post">
+      <input ref="method" type="hidden" name="_method" value="delete" />
+      <input :value="csrfToken" type="hidden" name="authenticity_token" />
+      <input
+        v-model="enteredProjectName"
+        name="projectName"
+        class="form-control"
+        type="text"
+        aria-labelledby="input-label"
+        autocomplete="off"
+      />
+    </form>
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js
index 6fa8760545d..ebb1a74e970 100644
--- a/app/assets/javascripts/pages/admin/projects/index/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index/index.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import Vue from 'vue';
 
 import Translate from '~/vue_shared/translate';
@@ -17,6 +16,18 @@ document.addEventListener('DOMContentLoaded', () => {
       deleteProjectUrl: '',
       projectName: '',
     },
+    mounted() {
+      const deleteProjectButtons = document.querySelectorAll('.delete-project-button');
+      deleteProjectButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const buttonProps = button.dataset;
+          deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;
+          deleteModal.projectName = buttonProps.projectName;
+
+          this.$root.$emit('bv::show::modal', 'delete-project-modal');
+        });
+      });
+    },
     render(createElement) {
       return createElement(deleteProjectModal, {
         props: {
@@ -27,12 +38,4 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     },
   });
-
-  $(document).on('shown.bs.modal', event => {
-    if (event.relatedTarget.classList.contains('delete-project-button')) {
-      const buttonProps = event.relatedTarget.dataset;
-      deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;
-      deleteModal.projectName = buttonProps.projectName;
-    }
-  });
 });
diff --git a/app/assets/javascripts/pages/admin/services/index/index.js b/app/assets/javascripts/pages/admin/services/index/index.js
new file mode 100644
index 00000000000..b2dfbb5a9fc
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/services/index/index.js
@@ -0,0 +1,6 @@
+import PersistentUserCallout from '~/persistent_user_callout';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const callout = document.querySelector('.js-service-templates-deprecated');
+  PersistentUserCallout.factory(callout);
+});
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index e09b8e1bdd5..9c303cc6445 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -1,6 +1,5 @@
 <script>
-import { escape } from 'lodash';
-import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
@@ -8,6 +7,7 @@ export default {
     GlModal,
     GlButton,
     GlFormInput,
+    GlSprintf,
   },
   props: {
     title: {
@@ -52,27 +52,6 @@ export default {
     modalTitle() {
       return sprintf(this.title, { username: this.username });
     },
-    text() {
-      return sprintf(
-        this.content,
-        {
-          username: `<strong>${escape(this.username)}</strong>`,
-          strong_start: '<strong>',
-          strong_end: '</strong>',
-        },
-        false,
-      );
-    },
-    confirmationTextLabel() {
-      return sprintf(
-        s__('AdminUsers|To confirm, type %{username}'),
-        {
-          username: `<code>${escape(this.username)}</code>`,
-        },
-        false,
-      );
-    },
-
     secondaryButtonLabel() {
       return s__('AdminUsers|Block user');
     },
@@ -107,8 +86,25 @@ export default {
 <template>
   <gl-modal ref="modal" modal-id="delete-user-modal" :title="modalTitle" kind="danger">
     <template>
-      <p v-html="text"></p>
-      <p v-html="confirmationTextLabel"></p>
+      <p>
+        <gl-sprintf :message="content">
+          <template #username>
+            <strong>{{ username }}</strong>
+          </template>
+          <template #strong="props">
+            <strong>{{ props.content }}</strong>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <p>
+        <gl-sprintf :message="s__('AdminUsers|To confirm, type %{username}')">
+          <template #username>
+            <code>{{ username }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+
       <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" />
diff --git a/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue b/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue
index 4c335cfb018..4ca6ce6f1c3 100644
--- a/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/user_operation_confirmation_modal.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlModal } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 
diff --git a/app/assets/javascripts/pages/constants.js b/app/assets/javascripts/pages/constants.js
index 35c67190b62..a9773807212 100644
--- a/app/assets/javascripts/pages/constants.js
+++ b/app/assets/javascripts/pages/constants.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export  */
-
 export const FILTERED_SEARCH = {
   MERGE_REQUESTS: 'merge_requests',
   ISSUES: 'issues',
diff --git a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
index 6b907f31a37..9fa441348c7 100644
--- a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
+++ b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
@@ -2,11 +2,15 @@
 import { GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
+import Tracking from '~/tracking';
+
+const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
     GlBanner,
   },
+  mixins: [trackingMixin],
   inject: {
     svgPath: {
       default: '',
@@ -20,6 +24,9 @@ export default {
     calloutsFeatureId: {
       default: '',
     },
+    trackLabel: {
+      default: '',
+    },
   },
   i18n: {
     title: s__('CustomizeHomepageBanner|Do you want to customize this page?'),
@@ -31,8 +38,19 @@ export default {
   data() {
     return {
       visible: true,
+      tracking: {
+        label: this.trackLabel,
+      },
     };
   },
+  created() {
+    this.$nextTick(() => {
+      this.addTrackingAttributesToButton();
+    });
+  },
+  mounted() {
+    this.trackOnShow();
+  },
   methods: {
     handleClose() {
       axios
@@ -45,6 +63,23 @@ export default {
         });
 
       this.visible = false;
+      this.track('click_dismiss');
+    },
+    trackOnShow() {
+      if (this.visible) this.track('show_home_page_banner');
+    },
+    addTrackingAttributesToButton() {
+      // we can't directly add these on the button like we need to due to
+      // button not being modifiable currently
+      // https://gitlab.com/gitlab-org/gitlab-ui/-/blob/9209ec424e5cca14bc8a1b5c9fa12636d8c83dad/src/components/base/banner/banner.vue#L60
+      const button = this.$refs.banner.$el.querySelector(
+        `[href='${this.preferencesBehaviorPath}']`,
+      );
+
+      if (button) {
+        button.setAttribute('data-track-event', 'click_go_to_preferences');
+        button.setAttribute('data-track-label', this.trackLabel);
+      }
     },
   },
 };
@@ -53,6 +88,7 @@ export default {
 <template>
   <gl-banner
     v-if="visible"
+    ref="banner"
     :title="$options.i18n.title"
     :button-text="$options.i18n.button_text"
     :button-link="preferencesBehaviorPath"
diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
index f76b4b44452..6f8d954d798 100644
--- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js
+++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this, no-unneeded-ternary */
 
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { visitUrl } from '~/lib/utils/url_utility';
 import UsersSelect from '~/users_select';
 import { isMetaClick } from '~/lib/utils/common_utils';
@@ -50,7 +50,7 @@ export default class Todos {
   }
 
   initFilterDropdown($dropdown, fieldName, searchFields) {
-    $dropdown.glDropdown({
+    initDeprecatedJQueryDropdown($dropdown, {
       fieldName,
       selectable: true,
       filterable: searchFields ? true : false,
diff --git a/app/assets/javascripts/pages/groups/clusters/new/index.js b/app/assets/javascripts/pages/groups/clusters/new/index.js
new file mode 100644
index 00000000000..876bab0b339
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/clusters/new/index.js
@@ -0,0 +1,5 @@
+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index e146592e134..3fa3a132dfa 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -4,6 +4,7 @@ import memberExpirationDate from '~/member_expiration_date';
 import UsersSelect from '~/users_select';
 import groupsSelect from '~/groups_select';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
+import initGroupMembersApp from '~/groups/members';
 
 function mountRemoveMemberModal() {
   const el = document.querySelector('.js-remove-member-modal');
@@ -25,6 +26,11 @@ document.addEventListener('DOMContentLoaded', () => {
   memberExpirationDate('.js-access-expiration-date-groups');
   mountRemoveMemberModal();
 
+  initGroupMembersApp(document.querySelector('.js-group-members-list'));
+  initGroupMembersApp(document.querySelector('.js-group-linked-list'));
+  initGroupMembersApp(document.querySelector('.js-group-invited-members-list'));
+  initGroupMembersApp(document.querySelector('.js-group-access-requests-list'));
+
   new Members(); // eslint-disable-line no-new
   new UsersSelect(); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index 2496003919a..ae481d16ee9 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 initIssuablesList from '~/issuables_list';
+import initIssuablesList from '~/issues_list';
 import projectSelect from '~/project_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
diff --git a/app/assets/javascripts/pages/groups/shared/group_details.js b/app/assets/javascripts/pages/groups/shared/group_details.js
index 37b253d7c48..8546b1f759f 100644
--- a/app/assets/javascripts/pages/groups/shared/group_details.js
+++ b/app/assets/javascripts/pages/groups/shared/group_details.js
@@ -8,6 +8,7 @@ import NotificationsForm from '~/notifications_form';
 import ProjectsList from '~/projects_list';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import GroupTabs from './group_tabs';
+import initInviteMembersBanner from '~/groups/init_invite_members_banner';
 
 export default function initGroupDetails(actionName = 'show') {
   const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');
@@ -27,4 +28,5 @@ export default function initGroupDetails(actionName = 'show') {
   if (newGroupChildWrapper) {
     new NewGroupChild(newGroupChildWrapper);
   }
+  initInviteMembersBanner();
 }
diff --git a/app/assets/javascripts/pages/instance_statistics/dev_ops_score/index.js b/app/assets/javascripts/pages/instance_statistics/dev_ops_score/index.js
deleted file mode 100644
index c1056537f90..00000000000
--- a/app/assets/javascripts/pages/instance_statistics/dev_ops_score/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import UserCallout from '~/user_callout';
-
-document.addEventListener('DOMContentLoaded', () => new UserCallout());
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 5be8e6697a2..983062c79f1 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,4 +1,5 @@
 <script>
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 
 import { deprecatedCreateFlash as Flash } from '~/flash';
@@ -11,6 +12,9 @@ export default {
   components: {
     DeprecatedModal,
   },
+  directives: {
+    SafeHtml,
+  },
   props: {
     issueCount: {
       type: Number,
@@ -124,7 +128,7 @@ Once deleted, it cannot be undone or recovered.`),
     @submit="onSubmit"
   >
     <template #body="props">
-      <p v-html="props.text"></p>
+      <p v-safe-html="props.text"></p>
     </template>
   </deprecated-modal>
 </template>
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index cb7198e9789..46e59cd6572 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -6,6 +6,33 @@ import GpgBadges from '~/gpg_badges';
 import '~/sourcegraph/load';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 
+const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => {
+  const el = document.querySelector(containerId);
+  const { filename, blobData } = el?.dataset;
+
+  const nameRegexp = /\.gitlab-ci.yml/;
+
+  if (!el || !nameRegexp.test(filename)) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      GitlabCiYamlVisualization: () =>
+        import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'),
+    },
+    render(createElement) {
+      return createElement('gitlabCiYamlVisualization', {
+        props: {
+          blobData,
+        },
+      });
+    },
+  });
+};
+
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
   initBlob();
@@ -63,4 +90,8 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   }
+
+  if (gon?.features?.gitlabCiYmlPreview) {
+    createGitlabCiYmlVisualization();
+  }
 });
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
index 37e8c75f299..623d0a10606 100644
--- a/app/assets/javascripts/pages/projects/branches/index/index.js
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -1,4 +1,4 @@
-import AjaxLoadingSpinner from '~/ajax_loading_spinner';
+import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner';
 import DeleteModal from '~/branches/branches_delete_modal';
 import initDiverganceGraph from '~/branches/divergence_graph';
 
diff --git a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
index 9ab73be80a0..d270bee25c7 100644
--- a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
+++ b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js
@@ -1,19 +1,48 @@
+import createFlash from '~/flash';
+import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants';
+
 export default class CILintEditor {
   constructor() {
-    this.editor = window.ace.edit('ci-editor');
-    this.textarea = document.querySelector('#content');
+    const monacoEnabled = window?.gon?.features?.monacoCi;
     this.clearYml = document.querySelector('.clear-yml');
-
-    this.editor.getSession().setMode('ace/mode/yaml');
-    this.editor.on('input', () => {
-      const content = this.editor.getSession().getValue();
-      this.textarea.value = content;
-    });
-
     this.clearYml.addEventListener('click', this.clear.bind(this));
+
+    return monacoEnabled ? this.initEditorLite() : this.initAce();
   }
 
   clear() {
     this.editor.setValue('');
   }
+
+  initEditorLite() {
+    import(/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite')
+      .then(({ default: EditorLite }) => {
+        const editorEl = document.getElementById('editor');
+        const fileContentEl = document.getElementById('content');
+        const form = document.querySelector('.js-ci-lint-form');
+
+        const rootEditor = new EditorLite();
+
+        this.editor = rootEditor.createInstance({
+          el: editorEl,
+          blobPath: '.gitlab-ci.yml',
+          blobContent: editorEl.innerText,
+        });
+
+        form.addEventListener('submit', () => {
+          fileContentEl.value = this.editor.getValue();
+        });
+      })
+      .catch(() => createFlash({ message: BLOB_EDITOR_ERROR }));
+  }
+
+  initAce() {
+    this.editor = window.ace.edit('ci-editor');
+    this.textarea = document.getElementById('content');
+
+    this.editor.getSession().setMode('ace/mode/yaml');
+    this.editor.on('input', () => {
+      this.textarea.value = this.editor.getSession().getValue();
+    });
+  }
 }
diff --git a/app/assets/javascripts/pages/projects/ci/lints/new/index.js b/app/assets/javascripts/pages/projects/ci/lints/new/index.js
index 8e8a843da0b..02bfee9810f 100644
--- a/app/assets/javascripts/pages/projects/ci/lints/new/index.js
+++ b/app/assets/javascripts/pages/projects/ci/lints/new/index.js
@@ -1,3 +1,11 @@
 import CILintEditor from '../ci_lint_editor';
+import initCILint from '~/ci_lint/index';
 
-document.addEventListener('DOMContentLoaded', () => new CILintEditor());
+document.addEventListener('DOMContentLoaded', () => {
+  if (gon?.features?.ciLintVue) {
+    initCILint();
+  } else {
+    // eslint-disable-next-line no-new
+    new CILintEditor();
+  }
+});
diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/new/index.js
new file mode 100644
index 00000000000..876bab0b339
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/clusters/new/index.js
@@ -0,0 +1,5 @@
+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index a245af72d93..d5fb2a8be3c 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -14,24 +14,23 @@ import axios from '~/lib/utils/axios_utils';
 import syntaxHighlight from '~/syntax_highlight';
 import flash from '~/flash';
 import { __ } from '~/locale';
+import loadAwardsHandler from '~/awards_handler';
 
 document.addEventListener('DOMContentLoaded', () => {
   const hasPerfBar = document.querySelector('.with-performance-bar');
   const performanceHeight = hasPerfBar ? 35 : 0;
+  initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
+  new ZenMode();
+  new ShortcutsNavigation();
+  new MiniPipelineGraph({
+    container: '.js-commit-pipeline-graph',
+  }).bindEvents();
+  initNotes();
+  // eslint-disable-next-line no-jquery/no-load
+  $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
+  fetchCommitMergeRequests();
+
   const filesContainer = $('.js-diffs-batch');
-  const initAfterPageLoad = () => {
-    new Diff();
-    new ZenMode();
-    new ShortcutsNavigation();
-    new MiniPipelineGraph({
-      container: '.js-commit-pipeline-graph',
-    }).bindEvents();
-    initNotes();
-    initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
-    // eslint-disable-next-line no-jquery/no-load
-    $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
-    fetchCommitMergeRequests();
-  };
 
   if (filesContainer.length) {
     const batchPath = filesContainer.data('diffFilesPath');
@@ -42,12 +41,13 @@ document.addEventListener('DOMContentLoaded', () => {
         filesContainer.html($(data.html));
         syntaxHighlight(filesContainer);
         handleLocationHash();
-        initAfterPageLoad();
+        new Diff();
       })
       .catch(() => {
         flash(__('An error occurred while retrieving diff files'));
       });
   } else {
-    initAfterPageLoad();
+    new Diff();
   }
+  loadAwardsHandler();
 });
diff --git a/app/assets/javascripts/pages/projects/constants.js b/app/assets/javascripts/pages/projects/constants.js
index 9efbf7cd36e..8dc765e5d10 100644
--- a/app/assets/javascripts/pages/projects/constants.js
+++ b/app/assets/javascripts/pages/projects/constants.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export  */
-
 export const ISSUABLE_INDEX = {
   MERGE_REQUEST: 'merge_request_',
   ISSUE: 'issue_',
diff --git a/app/assets/javascripts/pages/projects/environments/show/index.js b/app/assets/javascripts/pages/projects/environments/show/index.js
index 10e3e28f024..5d3a153cbd1 100644
--- a/app/assets/javascripts/pages/projects/environments/show/index.js
+++ b/app/assets/javascripts/pages/projects/environments/show/index.js
@@ -1,3 +1,3 @@
 import initShowEnvironment from '~/environments/mount_show';
 
-document.addEventListener('DOMContentLoaded', () => initShowEnvironment());
+document.addEventListener('DOMContentLoaded', initShowEnvironment);
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 b4816fa2cb3..57838050d55 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
@@ -7,6 +7,7 @@ import {
   GlTooltipDirective,
   GlTooltip,
   GlBadge,
+  GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/groups/constants';
 import { __ } from '~/locale';
@@ -23,6 +24,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml,
   },
   props: {
     group: {
@@ -119,7 +121,7 @@ export default {
             </span>
           </div>
           <div v-if="group.description" class="description">
-            <span v-html="group.markdown_description"> </span>
+            <span v-safe-html="group.markdown_description"> </span>
           </div>
         </div>
         <div class="gl-display-flex gl-flex-shrink-0">
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index 09b440d1413..384216f29eb 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -1,154 +1,155 @@
 import Vue from 'vue';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import { waitForCSSLoaded } from '../../../../helpers/startup_css_helper';
 import { __ } from '~/locale';
 import CodeCoverage from '../components/code_coverage.vue';
 import SeriesDataMixin from './series_data_mixin';
 
 document.addEventListener('DOMContentLoaded', () => {
-  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');
+  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;
+      }
 
-  const LANGUAGE_CHART_HEIGHT = 300;
+      return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
+        const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
 
-  const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
-    if (firstDayOfWeek === 0) {
-      return weekDays;
-    }
+        return {
+          ...acc,
+          [reorderedDayName]: weekDays[reorderedDayName],
+        };
+      }, {});
+    };
 
-    return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
-      const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
-
-      return {
-        ...acc,
-        [reorderedDayName]: weekDays[reorderedDayName],
-      };
-    }, {});
-  };
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: languagesContainer,
-    components: {
-      GlColumnChart,
-    },
-    data() {
-      return {
-        chartData: JSON.parse(languagesContainer.dataset.chartData),
-      };
-    },
-    computed: {
-      seriesData() {
-        return { full: this.chartData.map(d => [d.label, d.value]) };
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: languagesContainer,
+      components: {
+        GlColumnChart,
       },
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          data: this.seriesData,
-          xAxisTitle: __('Used programming language'),
-          yAxisTitle: __('Percentage'),
-          xAxisType: 'category',
-        },
-        attrs: {
-          height: LANGUAGE_CHART_HEIGHT,
+      data() {
+        return {
+          chartData: JSON.parse(languagesContainer.dataset.chartData),
+        };
+      },
+      computed: {
+        seriesData() {
+          return { full: this.chartData.map(d => [d.label, d.value]) };
         },
-      });
-    },
-  });
+      },
+      render(h) {
+        return h(GlColumnChart, {
+          props: {
+            data: this.seriesData,
+            xAxisTitle: __('Used programming language'),
+            yAxisTitle: __('Percentage'),
+            xAxisType: 'category',
+          },
+          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: {
-          data: 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: {
+            data: 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),
-      };
-    },
-    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 { full: data };
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: weekdayContainer,
+      components: {
+        GlColumnChart,
       },
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          data: this.seriesData,
-          xAxisTitle: __('Weekday'),
-          yAxisTitle: __('No. of commits'),
-          xAxisType: 'category',
+      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 { full: data };
         },
-      });
-    },
-  });
+      },
+      render(h) {
+        return h(GlColumnChart, {
+          props: {
+            data: 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: {
-          data: 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: {
+            data: this.seriesData,
+            xAxisTitle: __('Hour (UTC)'),
+            yAxisTitle: __('No. of commits'),
+            xAxisType: 'category',
+          },
+        });
+      },
+    });
   });
 });
diff --git a/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js b/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js
index 260ba69b4bc..534614349bf 100644
--- a/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/integrations/jira/issues/index/index.js
@@ -1,4 +1,4 @@
-import initIssuablesList from '~/issuables_list';
+import initIssuablesList from '~/issues_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   initIssuablesList();
diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js
index 1711d122080..e1add4a2af3 100644
--- a/app/assets/javascripts/pages/projects/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/issues/index/index.js
@@ -7,7 +7,7 @@ import UsersSelect from '~/users_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import { ISSUABLE_INDEX } from '~/pages/projects/constants';
-import initIssuablesList from '~/issuables_list';
+import initIssuablesList from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { showLearnGitLabIssuesPopover } from '~/onboarding_issues';
 
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
index 9304d9b6832..e0c1332796f 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
@@ -1,5 +1,5 @@
 import FilteredSearchServiceDesk from './filtered_search';
-import initIssuablesList from '~/issuables_list';
+import initIssuablesList from '~/issues_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   const supportBotData = JSON.parse(
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 5ac6c17e09d..98ae4e26257 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -1,27 +1,31 @@
+import loadAwardsHandler from '~/awards_handler';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import Issue from '~/issue';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ZenMode from '~/zen_mode';
 import '~/notes/index';
 import { store } from '~/notes/stores';
-import initIssueableApp from '~/issue_show';
+import initIssueApp from '~/issue_show/issue';
+import initIncidentApp from '~/issue_show/incident';
 import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
+import { parseIssuableData } from '~/issue_show/utils/parse_data';
 
 export default function() {
-  initIssueableApp();
+  const { issueType, ...issuableData } = parseIssuableData();
+
+  if (issueType === 'incident') {
+    initIncidentApp(issuableData);
+  } else {
+    initIssueApp(issuableData);
+  }
+
   initIssuableHeaderWarning(store);
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
 
-  // This will be removed when we remove the `design_management_moved` feature flag
-  // See https://gitlab.com/gitlab-org/gitlab/-/issues/223197
-  import(/* webpackChunkName: 'design_management' */ '~/design_management_legacy')
-    .then(module => module.default())
-    .catch(() => {});
-
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then(module => module.default())
     .catch(() => {});
@@ -34,4 +38,6 @@ export default function() {
   } else {
     initIssuableSidebar();
   }
+
+  loadAwardsHandler();
 }
diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js
index ce74a6de11f..aef4feef42c 100644
--- a/app/assets/javascripts/pages/projects/issues/show/index.js
+++ b/app/assets/javascripts/pages/projects/issues/show/index.js
@@ -1,4 +1,5 @@
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
+import initRelatedIssues from '~/related_issues';
 import initShow from '../show';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -6,4 +7,5 @@ document.addEventListener('DOMContentLoaded', () => {
   if (gon.features && !gon.features.vueIssuableSidebar) {
     initSidebarBundle();
   }
+  initRelatedIssues();
 });
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
index b72fe6681df..e9f0e008435 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js
@@ -1,8 +1,9 @@
 import $ from 'jquery';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default () => {
   const $targetProjectDropdown = $('.js-target-project');
-  $targetProjectDropdown.glDropdown({
+  initDeprecatedJQueryDropdown($targetProjectDropdown, {
     selectable: true,
     fieldName: $targetProjectDropdown.data('fieldName'),
     filterable: true,
@@ -16,7 +17,7 @@ export default () => {
       $('.mr_target_commit').empty();
       const $targetBranchDropdown = $('.js-target-branch');
       $targetBranchDropdown.data('refsUrl', $el.data('refsUrl'));
-      $targetBranchDropdown.data('glDropdown').clearMenu();
+      $targetBranchDropdown.data('deprecatedJQueryDropdown').clearMenu();
     },
   });
 };
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 25abb80cfae..11af50169f5 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -6,6 +6,7 @@ import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
 import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 import initSourcegraph from '~/sourcegraph';
+import loadAwardsHandler from '~/awards_handler';
 
 export default function() {
   new ZenMode(); // eslint-disable-line no-new
@@ -19,4 +20,5 @@ export default function() {
   handleLocationHash();
   howToMerge();
   initSourcegraph();
+  loadAwardsHandler();
 }
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index da96e6f36b4..7a3923dfefd 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -1,6 +1,8 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import { GlIcon } from '@gitlab/ui';
 import Translate from '../../../../../vue_shared/translate';
 // Full path is needed for Jest to be able to correctly mock this file
 import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
@@ -12,6 +14,9 @@ const cookieKey = 'pipeline_schedules_callout_dismissed';
 
 export default {
   name: 'PipelineSchedulesCallout',
+  components: {
+    GlIcon,
+  },
   data() {
     return {
       docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
@@ -33,7 +38,7 @@ export default {
   <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
     <div class="bordered-box landing content-block">
       <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout">
-        <i aria-hidden="true" class="fa fa-times"> </i>
+        <gl-icon name="close" aria-hidden="true" />
       </button>
       <div class="svg-container" v-html="illustrationSvg"></div>
       <div class="user-callout-copy">
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
index 0057700c1b3..4b203891640 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TargetBranchDropdown {
   constructor() {
@@ -10,7 +11,7 @@ export default class TargetBranchDropdown {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.formatBranchesList(),
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
index a20a0526f12..2a58e015ff1 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
@@ -1,3 +1,5 @@
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+
 const defaultTimezone = { name: 'UTC', offset: 0 };
 const defaults = {
   $inputEl: null,
@@ -42,7 +44,7 @@ export default class TimezoneDropdown {
   }
 
   initDropdown() {
-    this.$dropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.$dropdown, {
       data: this.timezoneData,
       filterable: true,
       selectable: true,
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index bb285635425..2f27814a692 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -8,52 +8,59 @@ import { serializeForm } from '~/lib/utils/forms';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import projectSelect from '../../project_select';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class Project {
   constructor() {
     const $cloneOptions = $('ul.clone-options-dropdown');
-    const $projectCloneField = $('#project_clone');
-    const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label');
-    const mobileCloneField = document.querySelector(
-      '.js-mobile-git-clone .js-clone-dropdown-label',
-    );
-
-    const selectedCloneOption = $cloneBtnLabel.text().trim();
-    if (selectedCloneOption.length > 0) {
-      $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active');
-    }
+    if ($cloneOptions.length) {
+      const $projectCloneField = $('#project_clone');
+      const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label');
+      const mobileCloneField = document.querySelector(
+        '.js-mobile-git-clone .js-clone-dropdown-label',
+      );
+
+      const selectedCloneOption = $cloneBtnLabel.text().trim();
+      if (selectedCloneOption.length > 0) {
+        $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active');
+      }
 
-    $('a', $cloneOptions).on('click', e => {
-      e.preventDefault();
-      const $this = $(e.currentTarget);
-      const url = $this.attr('href');
-      const cloneType = $this.data('cloneType');
-
-      $('.is-active', $cloneOptions).removeClass('is-active');
-      $(`a[data-clone-type="${cloneType}"]`).each(function() {
-        const $el = $(this);
-        const activeText = $el.find('.dropdown-menu-inner-title').text();
-        const $container = $el.closest('.project-clone-holder');
-        const $label = $container.find('.js-clone-dropdown-label');
-
-        $el.toggleClass('is-active');
-        $label.text(activeText);
+      $('a', $cloneOptions).on('click', e => {
+        e.preventDefault();
+        const $this = $(e.currentTarget);
+        const url = $this.attr('href');
+        const cloneType = $this.data('cloneType');
+
+        $('.is-active', $cloneOptions).removeClass('is-active');
+        $(`a[data-clone-type="${cloneType}"]`).each(function() {
+          const $el = $(this);
+          const activeText = $el.find('.dropdown-menu-inner-title').text();
+          const $container = $el.closest('.project-clone-holder');
+          const $label = $container.find('.js-clone-dropdown-label');
+
+          $el.toggleClass('is-active');
+          $label.text(activeText);
+        });
+
+        if (mobileCloneField) {
+          mobileCloneField.dataset.clipboardText = url;
+        } else {
+          $projectCloneField.val(url);
+        }
+        $('.js-git-empty .js-clone').text(url);
       });
+    }
 
-      if (mobileCloneField) {
-        mobileCloneField.dataset.clipboardText = url;
-      } else {
-        $projectCloneField.val(url);
-      }
-      $('.js-git-empty .js-clone').text(url);
-    });
     // Ref switcher
-    Project.initRefSwitcher();
-    $('.project-refs-select').on('change', function() {
-      return $(this)
-        .parents('form')
-        .submit();
-    });
+    if (document.querySelector('.js-project-refs-dropdown')) {
+      Project.initRefSwitcher();
+      $('.project-refs-select').on('change', function() {
+        return $(this)
+          .parents('form')
+          .submit();
+      });
+    }
+
     $('.hide-no-ssh-message').on('click', function(e) {
       Cookies.set('hide_no_ssh_message', 'false');
       $(this)
@@ -77,6 +84,7 @@ export default class Project {
         .remove();
       return e.preventDefault();
     });
+
     Project.projectSelectDropdown();
   }
 
@@ -104,7 +112,7 @@ export default class Project {
       const action = $form.attr('action');
       const linkTarget = mergeUrlParams(serializeForm($form[0]), action);
 
-      return $dropdown.glDropdown({
+      return initDeprecatedJQueryDropdown($dropdown, {
         data(term, callback) {
           axios
             .get($dropdown.data('refsUrl'), {
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
index 92d23772565..b7546a6bed7 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     label: {
       type: String,
@@ -25,7 +30,7 @@ export default {
     <label v-if="label" class="label-bold">
       {{ label }}
       <a v-if="helpPath" :href="helpPath" target="_blank">
-        <i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i>
+        <gl-icon name="question-o" />
       </a>
     </label>
     <span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot>
diff --git a/app/assets/javascripts/pages/search/show/index.js b/app/assets/javascripts/pages/search/show/index.js
index 85aaaa2c9da..92d01343bd5 100644
--- a/app/assets/javascripts/pages/search/show/index.js
+++ b/app/assets/javascripts/pages/search/show/index.js
@@ -1,3 +1,7 @@
 import Search from './search';
+import initStateFilter from '~/search/state_filter';
 
-document.addEventListener('DOMContentLoaded', () => new Search());
+document.addEventListener('DOMContentLoaded', () => {
+  initStateFilter();
+  return new Search();
+});
diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js
index cc2128490ec..6ff74325a5e 100644
--- a/app/assets/javascripts/pages/search/show/search.js
+++ b/app/assets/javascripts/pages/search/show/search.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import '~/gl_dropdown';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import Api from '~/api';
 import { __ } from '~/locale';
@@ -20,7 +20,7 @@ export default class Search {
     this.eventListeners();
     refreshCounts();
 
-    $groupDropdown.glDropdown({
+    initDeprecatedJQueryDropdown($groupDropdown, {
       selectable: true,
       filterable: true,
       filterRemote: true,
@@ -46,7 +46,7 @@ export default class Search {
       clicked: () => Search.submitSearch(),
     });
 
-    $projectDropdown.glDropdown({
+    initDeprecatedJQueryDropdown($projectDropdown, {
       selectable: true,
       filterable: true,
       filterRemote: true,
diff --git a/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
index a7b7d597fb7..653aad3d2f5 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
@@ -1,11 +1,12 @@
 <script>
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
-import { GlModal, GlModalDirective } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
   components: {
     GlModal,
+    GlButton,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -55,14 +56,14 @@ export default {
 
 <template>
   <div class="d-inline-block">
-    <button
+    <gl-button
       v-gl-modal="modalId"
-      type="button"
-      class="btn btn-danger"
+      category="primary"
+      variant="danger"
       data-qa-selector="delete_button"
     >
       {{ __('Delete') }}
-    </button>
+    </gl-button>
     <gl-modal
       :title="title"
       :action-primary="{