Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

32 files changed, 136 insertions, 411 deletions

diff --git a/app/assets/javascripts/pages/projects/constants.js b/app/assets/javascripts/pages/projects/constants.js
deleted file mode 100644
index 8dc765e5d10..00000000000
--- a/app/assets/javascripts/pages/projects/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const ISSUABLE_INDEX = {
-  MERGE_REQUEST: 'merge_request_',
-  ISSUE: 'issue_',
-};
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index f4beefea90c..100ca5b36d9 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,13 +1,14 @@
 import { PROJECT_BADGE } from '~/badges/constants';
 import initLegacyConfirmDangerModal from '~/confirm_danger_modal';
+import initConfirmDanger from '~/init_confirm_danger';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import initFilePickers from '~/file_pickers';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import initProjectDeleteButton from '~/projects/project_delete_button';
 import initServiceDesk from '~/projects/settings_service_desk';
+import initTransferProjectForm from '~/projects/settings/init_transfer_project_form';
 import initSearchSettings from '~/search_settings';
 import initSettingsPanels from '~/settings_panels';
-import setupTransferEdit from '~/transfer_edit';
 import UserCallout from '~/user_callout';
 import initTopicsTokenSelector from '~/projects/settings/topics';
 import initProjectPermissionsSettings from '../shared/permissions';
@@ -15,6 +16,7 @@ import initProjectLoadingSpinner from '../shared/save_project_loader';
 
 initFilePickers();
 initLegacyConfirmDangerModal();
+initConfirmDanger();
 initSettingsPanels();
 initProjectDeleteButton();
 mountBadgeSettings(PROJECT_BADGE);
@@ -24,7 +26,7 @@ initServiceDesk();
 
 initProjectLoadingSpinner();
 initProjectPermissionsSettings();
-setupTransferEdit('.js-project-transfer-form', 'select.select2');
+initTransferProjectForm();
 
 dirtySubmitFactory(document.querySelectorAll('.js-general-settings-form, .js-mr-settings-form'));
 
diff --git a/app/assets/javascripts/pages/projects/incidents/show/index.js b/app/assets/javascripts/pages/projects/incidents/show/index.js
index a75b68873ef..4633eaef8f9 100644
--- a/app/assets/javascripts/pages/projects/incidents/show/index.js
+++ b/app/assets/javascripts/pages/projects/incidents/show/index.js
@@ -1,6 +1,6 @@
 import initRelatedIssues from '~/related_issues';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
-import initShow from '../../issues/show';
+import initShow from '~/issues/show';
 
 initShow();
 initSidebarBundle();
diff --git a/app/assets/javascripts/pages/projects/issues/edit/index.js b/app/assets/javascripts/pages/projects/issues/edit/index.js
index 48afd2142ee..aa00d1f58bd 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';
+import initForm from 'ee_else_ce/issues/form';
 
 initForm();
diff --git a/app/assets/javascripts/pages/projects/issues/form.js b/app/assets/javascripts/pages/projects/issues/form.js
deleted file mode 100644
index c0da0069a99..00000000000
--- a/app/assets/javascripts/pages/projects/issues/form.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable no-new */
-
-import $ from 'jquery';
-import IssuableForm from 'ee_else_ce/issuable_form';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import GLForm from '~/gl_form';
-import initSuggestions from '~/issuable_suggestions';
-import initIssuableTypeSelector from '~/issuable_type_selector';
-import LabelsSelect from '~/labels_select';
-import MilestoneSelect from '~/milestone_select';
-import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
-
-export default () => {
-  new ShortcutsNavigation();
-  new GLForm($('.issue-form'));
-  new IssuableForm($('.issue-form'));
-  new LabelsSelect();
-  new MilestoneSelect();
-  new IssuableTemplateSelectors({
-    warnTemplateOverride: true,
-  });
-
-  initSuggestions();
-  initIssuableTypeSelector();
-};
diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js
index 8cd703133f5..e937713044c 100644
--- a/app/assets/javascripts/pages/projects/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/issues/index/index.js
@@ -1,12 +1,11 @@
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import initCsvImportExportButtons from '~/issuable/init_csv_import_export_buttons';
-import initIssuableByEmail from '~/issuable/init_issuable_by_email';
-import IssuableIndex from '~/issuable_index';
+import { initCsvImportExportButtons, initIssuableByEmail } from '~/issuable';
+import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar';
 import { mountIssuablesListApp, mountIssuesListApp, mountJiraIssuesListApp } from '~/issues_list';
-import initManualOrdering from '~/manual_ordering';
-import { FILTERED_SEARCH } from '~/pages/constants';
-import { ISSUABLE_INDEX } from '~/pages/projects/constants';
+import initManualOrdering from '~/issues/manual_ordering';
+import { FILTERED_SEARCH } from '~/filtered_search/constants';
+import { ISSUABLE_INDEX } from '~/issuable/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import UsersSelect from '~/users_select';
 
@@ -21,7 +20,7 @@ if (gon.features?.vueIssuesList) {
     useDefaultState: true,
   });
 
-  new IssuableIndex(ISSUABLE_INDEX.ISSUE); // eslint-disable-line no-new
+  issuableInitBulkUpdateSidebar.init(ISSUABLE_INDEX.ISSUE);
   new UsersSelect(); // eslint-disable-line no-new
 
   initCsvImportExportButtons();
diff --git a/app/assets/javascripts/pages/projects/issues/new/index.js b/app/assets/javascripts/pages/projects/issues/new/index.js
index 48afd2142ee..aa00d1f58bd 100644
--- a/app/assets/javascripts/pages/projects/issues/new/index.js
+++ b/app/assets/javascripts/pages/projects/issues/new/index.js
@@ -1,3 +1,3 @@
-import initForm from 'ee_else_ce/pages/projects/issues/form';
+import initForm from 'ee_else_ce/issues/form';
 
 initForm();
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js b/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
deleted file mode 100644
index bec207aa439..00000000000
--- a/app/assets/javascripts/pages/projects/issues/service_desk/filtered_search.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import FilteredSearchManager from 'ee_else_ce/filtered_search/filtered_search_manager';
-import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
-
-const AUTHOR_PARAM_KEY = 'author_username';
-
-export default class FilteredSearchServiceDesk extends FilteredSearchManager {
-  constructor(supportBotData) {
-    super({
-      page: 'service_desk',
-      filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-      useDefaultState: true,
-    });
-
-    this.supportBotData = supportBotData;
-  }
-
-  canEdit(tokenName) {
-    return tokenName !== 'author';
-  }
-
-  modifyUrlParams(paramsArray) {
-    const supportBotParamPair = `${AUTHOR_PARAM_KEY}=${this.supportBotData.username}`;
-    const onlyValidParams = paramsArray.filter((param) => param.indexOf(AUTHOR_PARAM_KEY) === -1);
-
-    // unshift ensures author param is always first token element
-    onlyValidParams.unshift(supportBotParamPair);
-
-    return onlyValidParams;
-  }
-}
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 d906c579697..69639d17f8a 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
@@ -1,14 +1,7 @@
 import { mountIssuablesListApp } from '~/issues_list';
-import FilteredSearchServiceDesk from './filtered_search';
+import { initFilteredSearchServiceDesk } from '~/issues/init_filtered_search_service_desk';
 
-const supportBotData = JSON.parse(
-  document.querySelector('.js-service-desk-issues').dataset.supportBot,
-);
-
-if (document.querySelector('.filtered-search')) {
-  const filteredSearchManager = new FilteredSearchServiceDesk(supportBotData);
-  filteredSearchManager.setup();
-}
+initFilteredSearchServiceDesk();
 
 if (gon.features?.vueIssuablesList) {
   mountIssuablesListApp();
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
deleted file mode 100644
index 24aa2f0da13..00000000000
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import loadAwardsHandler from '~/awards_handler';
-import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
-import initIssuableSidebar from '~/init_issuable_sidebar';
-import { IssuableType } from '~/issuable_show/constants';
-import Issue from '~/issue';
-import { initIncidentApp, initIncidentHeaderActions } from '~/issue_show/incident';
-import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
-import { parseIssuableData } from '~/issue_show/utils/parse_data';
-import initNotesApp from '~/notes';
-import { store } from '~/notes/stores';
-import initRelatedMergeRequestsApp from '~/related_merge_requests';
-import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
-import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
-import ZenMode from '~/zen_mode';
-
-export default function initShowIssue() {
-  initNotesApp();
-
-  const initialDataEl = document.getElementById('js-issuable-app');
-  const { issueType, ...issuableData } = parseIssuableData(initialDataEl);
-
-  switch (issueType) {
-    case IssuableType.Incident:
-      initIncidentApp(issuableData);
-      initIncidentHeaderActions(store);
-      break;
-    case IssuableType.Issue:
-      initIssuableApp(issuableData, store);
-      initIssueHeaderActions(store);
-      break;
-    default:
-      initIssueHeaderActions(store);
-      break;
-  }
-
-  initIssuableHeaderWarning(store);
-  initSentryErrorStackTraceApp();
-  initRelatedMergeRequestsApp();
-
-  import(/* webpackChunkName: 'design_management' */ '~/design_management')
-    .then((module) => module.default())
-    .catch(() => {});
-
-  new ZenMode(); // eslint-disable-line no-new
-
-  if (issueType !== IssuableType.TestCase) {
-    const awardEmojiEl = document.getElementById('js-vue-awards-block');
-
-    new Issue(); // eslint-disable-line no-new
-    new ShortcutsIssuable(); // eslint-disable-line no-new
-    initIssuableSidebar();
-    if (awardEmojiEl) {
-      import('~/emoji/awards_app')
-        .then((m) => m.default(awardEmojiEl))
-        .catch(() => {});
-    } else {
-      loadAwardsHandler();
-    }
-  }
-}
diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js
index 1282d2aa303..d0b1942f2a4 100644
--- a/app/assets/javascripts/pages/projects/issues/show/index.js
+++ b/app/assets/javascripts/pages/projects/issues/show/index.js
@@ -1,7 +1,7 @@
 import { store } from '~/notes/stores';
 import initRelatedIssues from '~/related_issues';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
-import initShow from '../show';
+import initShow from '~/issues/show';
 
 initShow();
 initSidebarBundle(store);
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
deleted file mode 100644
index e708cd32fff..00000000000
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-import { GlSprintf, GlModal } from '@gitlab/ui';
-import createFlash from '~/flash';
-import axios from '~/lib/utils/axios_utils';
-import { visitUrl } from '~/lib/utils/url_utility';
-import { s__, __, sprintf } from '~/locale';
-import eventHub from '../event_hub';
-
-export default {
-  primaryProps: {
-    text: s__('Labels|Promote Label'),
-    attributes: [{ variant: 'warning' }, { category: 'primary' }],
-  },
-  cancelProps: {
-    text: __('Cancel'),
-  },
-  components: {
-    GlModal,
-    GlSprintf,
-  },
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-    labelTitle: {
-      type: String,
-      required: true,
-    },
-    labelColor: {
-      type: String,
-      required: true,
-    },
-    labelTextColor: {
-      type: String,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    text() {
-      return sprintf(
-        s__(`Labels|Promoting %{labelTitle} will make it available for all projects inside %{groupName}.
-        Existing project labels with the same title will be merged. If a group label with the same title exists,
-        it will also be merged. This action cannot be reversed.`),
-        {
-          labelTitle: this.labelTitle,
-          groupName: this.groupName,
-        },
-      );
-    },
-  },
-  methods: {
-    onSubmit() {
-      eventHub.$emit('promoteLabelModal.requestStarted', this.url);
-      return axios
-        .post(this.url, { params: { format: 'json' } })
-        .then((response) => {
-          eventHub.$emit('promoteLabelModal.requestFinished', {
-            labelUrl: this.url,
-            successful: true,
-          });
-          visitUrl(response.data.url);
-        })
-        .catch((error) => {
-          eventHub.$emit('promoteLabelModal.requestFinished', {
-            labelUrl: this.url,
-            successful: false,
-          });
-          createFlash({
-            message: error,
-          });
-        });
-    },
-  },
-};
-</script>
-<template>
-  <gl-modal
-    modal-id="promote-label-modal"
-    :action-primary="$options.primaryProps"
-    :action-cancel="$options.cancelProps"
-    @primary="onSubmit"
-  >
-    <template #modal-title>
-      <div class="modal-title-with-label">
-        <gl-sprintf
-          :message="
-            s__(
-              'Labels|%{spanStart}Promote label%{spanEnd} %{labelTitle} %{spanStart}to Group Label?%{spanEnd}',
-            )
-          "
-        >
-          <template #labelTitle>
-            <span
-              class="label color-label"
-              :style="`background-color: ${labelColor}; color: ${labelTextColor};`"
-            >
-              {{ labelTitle }}
-            </span>
-          </template>
-          <template #span="{ content }"
-            ><span>{{ content }}</span></template
-          >
-        </gl-sprintf>
-      </div>
-    </template>
-    {{ text }}
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/pages/projects/labels/edit/index.js b/app/assets/javascripts/pages/projects/labels/edit/index.js
index 3b7562deed9..c4d7af39767 100644
--- a/app/assets/javascripts/pages/projects/labels/edit/index.js
+++ b/app/assets/javascripts/pages/projects/labels/edit/index.js
@@ -1,3 +1,3 @@
-import Labels from 'ee_else_ce/labels';
+import Labels from 'ee_else_ce/labels/labels';
 
 new Labels(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/labels/event_hub.js b/app/assets/javascripts/pages/projects/labels/event_hub.js
deleted file mode 100644
index e31806ad199..00000000000
--- a/app/assets/javascripts/pages/projects/labels/event_hub.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import createEventHub from '~/helpers/event_hub_factory';
-
-export default createEventHub();
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
index 94ab0d64de4..1f8ff7e0bb1 100644
--- a/app/assets/javascripts/pages/projects/labels/index/index.js
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -1,83 +1,3 @@
-import Vue from 'vue';
-import initDeleteLabelModal from '~/delete_label_modal';
-import initLabels from '~/init_labels';
-import { BV_SHOW_MODAL } from '~/lib/utils/constants';
-import Translate from '~/vue_shared/translate';
-import PromoteLabelModal from '../components/promote_label_modal.vue';
-import eventHub from '../event_hub';
+import { initLabelIndex } from '~/labels';
 
-Vue.use(Translate);
-
-const initLabelIndex = () => {
-  initLabels();
-  initDeleteLabelModal();
-
-  const onRequestFinished = ({ labelUrl, successful }) => {
-    const button = document.querySelector(
-      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
-    );
-
-    if (!successful) {
-      button.removeAttribute('disabled');
-    }
-  };
-
-  const onRequestStarted = (labelUrl) => {
-    const button = document.querySelector(
-      `.js-promote-project-label-button[data-url="${labelUrl}"]`,
-    );
-    button.setAttribute('disabled', '');
-    eventHub.$once('promoteLabelModal.requestFinished', onRequestFinished);
-  };
-
-  const promoteLabelButtons = document.querySelectorAll('.js-promote-project-label-button');
-
-  return new Vue({
-    el: '#js-promote-label-modal',
-    data() {
-      return {
-        modalProps: {
-          labelTitle: '',
-          labelColor: '',
-          labelTextColor: '',
-          url: '',
-          groupName: '',
-        },
-      };
-    },
-    mounted() {
-      eventHub.$on('promoteLabelModal.props', this.setModalProps);
-      eventHub.$emit('promoteLabelModal.mounted');
-
-      promoteLabelButtons.forEach((button) => {
-        button.removeAttribute('disabled');
-        button.addEventListener('click', () => {
-          this.$root.$emit(BV_SHOW_MODAL, 'promote-label-modal');
-          eventHub.$once('promoteLabelModal.requestStarted', onRequestStarted);
-
-          this.setModalProps({
-            labelTitle: button.dataset.labelTitle,
-            labelColor: button.dataset.labelColor,
-            labelTextColor: button.dataset.labelTextColor,
-            url: button.dataset.url,
-            groupName: button.dataset.groupName,
-          });
-        });
-      });
-    },
-    beforeDestroy() {
-      eventHub.$off('promoteLabelModal.props', this.setModalProps);
-    },
-    methods: {
-      setModalProps(modalProps) {
-        this.modalProps = modalProps;
-      },
-    },
-    render(createElement) {
-      return createElement(PromoteLabelModal, {
-        props: this.modalProps,
-      });
-    },
-  });
-};
 initLabelIndex();
diff --git a/app/assets/javascripts/pages/projects/labels/new/index.js b/app/assets/javascripts/pages/projects/labels/new/index.js
index 2e8308fe084..e4e377f62fc 100644
--- a/app/assets/javascripts/pages/projects/labels/new/index.js
+++ b/app/assets/javascripts/pages/projects/labels/new/index.js
@@ -1,4 +1,4 @@
-import Labels from 'ee_else_ce/labels';
+import Labels from 'ee_else_ce/labels/labels';
 
 // eslint-disable-next-line no-new
 new Labels();
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
index 95afcb6bda8..42c40cda601 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
@@ -1,18 +1,21 @@
 <script>
-import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { GlProgressBar, GlSprintf, GlAlert } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
 import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
 import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
 
 export default {
-  components: { GlProgressBar, GlSprintf, LearnGitlabSectionCard },
+  components: { GlProgressBar, GlSprintf, GlAlert, LearnGitlabSectionCard },
   i18n: {
     title: s__('LearnGitLab|Learn GitLab'),
     description: s__(
       'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
     ),
     percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
+    successfulInvitations: s__(
+      "LearnGitLab|Your team is growing! You've successfully invited new team members to the %{projectName} project.",
+    ),
   },
   props: {
     actions: {
@@ -28,12 +31,22 @@ export default {
       required: false,
       default: false,
     },
+    project: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      showSuccessfulInvitationsAlert: false,
+      actionsData: this.actions,
+    };
   },
   maxValue: Object.keys(ACTION_LABELS).length,
   actionSections: Object.keys(ACTION_SECTIONS),
   computed: {
     progressValue() {
-      return Object.values(this.actions).filter((a) => a.completed).length;
+      return Object.values(this.actionsData).filter((a) => a.completed).length;
     },
     progressPercentage() {
       return Math.round((this.progressValue / this.$options.maxValue) * 100);
@@ -43,14 +56,23 @@ export default {
     if (this.inviteMembersOpen) {
       this.openInviteMembersModal('celebrate');
     }
+
+    eventHub.$on('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
+  },
+  beforeDestroy() {
+    eventHub.$off('showSuccessfulInvitationsAlert', this.handleShowSuccessfulInvitationsAlert);
   },
   methods: {
     openInviteMembersModal(mode) {
       eventHub.$emit('openModal', { mode, inviteeType: 'members', source: 'learn-gitlab' });
     },
+    handleShowSuccessfulInvitationsAlert() {
+      this.showSuccessfulInvitationsAlert = true;
+      this.markActionAsCompleted('userAdded');
+    },
     actionsFor(section) {
       const actions = Object.fromEntries(
-        Object.entries(this.actions).filter(
+        Object.entries(this.actionsData).filter(
           ([action]) => ACTION_LABELS[action].section === section,
         ),
       );
@@ -59,11 +81,34 @@ export default {
     svgFor(section) {
       return this.sections[section].svg;
     },
+    markActionAsCompleted(completedAction) {
+      Object.keys(this.actionsData).forEach((action) => {
+        if (action === completedAction) {
+          this.actionsData[action].completed = true;
+          this.modifySidebarPercentage();
+        }
+      });
+    },
+    modifySidebarPercentage() {
+      const el = document.querySelector('.sidebar-top-level-items .active .count');
+      el.textContent = `${this.progressPercentage}%`;
+    },
   },
 };
 </script>
 <template>
   <div>
+    <gl-alert
+      v-if="showSuccessfulInvitationsAlert"
+      class="gl-mt-5"
+      @dismiss="showSuccessfulInvitationsAlert = false"
+    >
+      <gl-sprintf :message="$options.i18n.successfulInvitations">
+        <template #projectName>
+          <strong>{{ project.name }}</strong>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <div class="row">
       <div class="gl-mb-7 gl-ml-5">
         <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index 0995947f3e7..3a401f5cb31 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlLink, GlIcon } from '@gitlab/ui';
+import { isExperimentVariant } from '~/experimentation/utils';
+import eventHub from '~/invite_members/event_hub';
 import { s__ } from '~/locale';
 import { ACTION_LABELS } from '../constants';
 
@@ -24,6 +26,20 @@ export default {
     trialOnly() {
       return ACTION_LABELS[this.action].trialRequired;
     },
+    showInviteModalLink() {
+      return (
+        this.action === 'userAdded' && isExperimentVariant('invite_for_help_continuous_onboarding')
+      );
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit('openModal', {
+        inviteeType: 'members',
+        source: 'learn_gitlab',
+        tasksToBeDoneEnabled: true,
+      });
+    },
   },
 };
 </script>
@@ -33,18 +49,27 @@ export default {
       <gl-icon name="check-circle-filled" :size="16" data-testid="completed-icon" />
       {{ $options.i18n.ACTION_LABELS[action].title }}
     </span>
-    <span v-else>
-      <gl-link
-        target="_blank"
-        :href="value.url"
-        data-track-action="click_link"
-        :data-track-label="$options.i18n.ACTION_LABELS[action].title"
-        data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-        data-track-experiment="change_continuous_onboarding_link_urls"
-      >
-        {{ $options.i18n.ACTION_LABELS[action].title }}
-      </gl-link>
-    </span>
+    <gl-link
+      v-else-if="showInviteModalLink"
+      data-track-action="click_link"
+      :data-track-label="$options.i18n.ACTION_LABELS[action].title"
+      data-track-property="Growth::Activation::Experiment::InviteForHelpContinuousOnboarding"
+      data-testid="invite-for-help-continuous-onboarding-experiment-link"
+      @click="openModal"
+    >
+      {{ $options.i18n.ACTION_LABELS[action].title }}
+    </gl-link>
+    <gl-link
+      v-else
+      target="_blank"
+      :href="value.url"
+      data-track-action="click_link"
+      :data-track-label="$options.i18n.ACTION_LABELS[action].title"
+      data-track-property="Growth::Conversion::Experiment::LearnGitLab"
+      data-track-experiment="change_continuous_onboarding_link_urls"
+    >
+      {{ $options.i18n.ACTION_LABELS[action].title }}
+    </gl-link>
     <span v-if="trialOnly" class="gl-font-style-italic gl-text-gray-500" data-testid="trial-only">
       - {{ $options.i18n.trialOnly }}
     </span>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
index ea9eec2595f..1f91cc46946 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -12,17 +12,18 @@ function initLearnGitlab() {
 
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
   const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
+  const project = convertObjectPropsToCamelCase(JSON.parse(el.dataset.project));
   const { inviteMembersOpen } = el.dataset;
 
   return new Vue({
     el,
     render(createElement) {
       return createElement(LearnGitlab, {
-        props: { actions, sections, inviteMembersOpen },
+        props: { actions, sections, project, inviteMembersOpen },
       });
     },
   });
 }
 
-initInviteMembersModal();
 initLearnGitlab();
+initInviteMembersModal();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/index/index.js b/app/assets/javascripts/pages/projects/merge_requests/index/index.js
index d279086df7b..acd1731a700 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/index/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/index/index.js
@@ -1,17 +1,17 @@
 import addExtraTokensForMergeRequests from 'ee_else_ce/filtered_search/add_extra_tokens_for_merge_requests';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
-import initCsvImportExportButtons from '~/issuable/init_csv_import_export_buttons';
-import initIssuableByEmail from '~/issuable/init_issuable_by_email';
-import IssuableIndex from '~/issuable_index';
-import { FILTERED_SEARCH } from '~/pages/constants';
-import { ISSUABLE_INDEX } from '~/pages/projects/constants';
+import { initCsvImportExportButtons, initIssuableByEmail } from '~/issuable';
+import issuableInitBulkUpdateSidebar from '~/issuable/bulk_update_sidebar/issuable_init_bulk_update_sidebar';
+import { FILTERED_SEARCH } from '~/filtered_search/constants';
+import { ISSUABLE_INDEX } from '~/issuable/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import UsersSelect from '~/users_select';
 
-new IssuableIndex(ISSUABLE_INDEX.MERGE_REQUEST); // eslint-disable-line no-new
+issuableInitBulkUpdateSidebar.init(ISSUABLE_INDEX.MERGE_REQUEST);
 
 addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys);
+IssuableFilteredSearchTokenKeys.removeTokensForKeys('iteration');
 
 initFilteredSearch({
   page: FILTERED_SEARCH.MERGE_REQUESTS,
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
index 7d5719cf8a8..ebf7c266482 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-new */
 
 import $ from 'jquery';
-import IssuableForm from 'ee_else_ce/issuable_form';
+import IssuableForm from 'ee_else_ce/issuable/issuable_form';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
 import GLForm from '~/gl_form';
-import LabelsSelect from '~/labels_select';
-import MilestoneSelect from '~/milestone_select';
-import IssuableTemplateSelectors from '~/templates/issuable_template_selectors';
+import LabelsSelect from '~/labels/labels_select';
+import MilestoneSelect from '~/milestones/milestone_select';
+import IssuableTemplateSelectors from '~/issuable/issuable_template_selectors';
 
 export default () => {
   new Diff();
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 99094617b0a..c548ea9bb80 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
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { initPipelineCountListener } from '~/commit/pipelines/utils';
-import initIssuableSidebar from '~/init_issuable_sidebar';
+import { initIssuableSidebar } from '~/issuable';
 import StatusBox from '~/issuable/components/status_box.vue';
 import createDefaultClient from '~/lib/graphql';
 import initSourcegraph from '~/sourcegraph';
diff --git a/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql b/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql
index b5a82b9428e..1edb37a228d 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql
+++ b/app/assets/javascripts/pages/projects/merge_requests/queries/get_state.query.graphql
@@ -1,6 +1,8 @@
 query getMergeRequestState($projectPath: ID!, $iid: String!) {
   workspace: project(fullPath: $projectPath) {
+    id
     issuable: mergeRequest(iid: $iid) {
+      id
       state
     }
   }
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index 25dede33880..7f49eb60c5c 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -1,8 +1,8 @@
 import { initReviewBar } from '~/batch_comments';
+import { initIssuableHeaderWarnings } from '~/issuable';
 import initMrNotes from '~/mr_notes';
 import store from '~/mr_notes/stores';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
-import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
 import initShow from '../init_merge_request_show';
 
 initMrNotes();
@@ -11,5 +11,5 @@ initShow();
 requestIdleCallback(() => {
   initSidebarBundle(store);
   initReviewBar();
-  initIssuableHeaderWarning(store);
+  initIssuableHeaderWarnings(store);
 });
diff --git a/app/assets/javascripts/pages/projects/milestones/edit/index.js b/app/assets/javascripts/pages/projects/milestones/edit/index.js
index 4f8514a9a1d..7fda129a85d 100644
--- a/app/assets/javascripts/pages/projects/milestones/edit/index.js
+++ b/app/assets/javascripts/pages/projects/milestones/edit/index.js
@@ -1,3 +1,3 @@
-import initForm from '~/shared/milestones/form';
+import { initForm } from '~/milestones';
 
 initForm();
diff --git a/app/assets/javascripts/pages/projects/milestones/index/index.js b/app/assets/javascripts/pages/projects/milestones/index/index.js
index 150b506b121..ef1c9ab83db 100644
--- a/app/assets/javascripts/pages/projects/milestones/index/index.js
+++ b/app/assets/javascripts/pages/projects/milestones/index/index.js
@@ -1,3 +1,4 @@
-import milestones from '~/pages/milestones/shared';
+import { initDeleteMilestoneModal, initPromoteMilestoneModal } from '~/milestones';
 
-milestones();
+initDeleteMilestoneModal();
+initPromoteMilestoneModal();
diff --git a/app/assets/javascripts/pages/projects/milestones/new/index.js b/app/assets/javascripts/pages/projects/milestones/new/index.js
index 4f8514a9a1d..7fda129a85d 100644
--- a/app/assets/javascripts/pages/projects/milestones/new/index.js
+++ b/app/assets/javascripts/pages/projects/milestones/new/index.js
@@ -1,3 +1,3 @@
-import initForm from '~/shared/milestones/form';
+import { initForm } from '~/milestones';
 
 initForm();
diff --git a/app/assets/javascripts/pages/projects/milestones/show/index.js b/app/assets/javascripts/pages/projects/milestones/show/index.js
index 3c755e9b98c..16aac7748da 100644
--- a/app/assets/javascripts/pages/projects/milestones/show/index.js
+++ b/app/assets/javascripts/pages/projects/milestones/show/index.js
@@ -1,5 +1,5 @@
-import milestones from '~/pages/milestones/shared';
-import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
+import { initDeleteMilestoneModal, initPromoteMilestoneModal, initShow } from '~/milestones';
 
-initMilestonesShow();
-milestones();
+initShow();
+initDeleteMilestoneModal();
+initPromoteMilestoneModal();
diff --git a/app/assets/javascripts/pages/projects/packages/packages/index/index.js b/app/assets/javascripts/pages/projects/packages/packages/index/index.js
index f9eecff4ac4..174973a9fad 100644
--- a/app/assets/javascripts/pages/projects/packages/packages/index/index.js
+++ b/app/assets/javascripts/pages/projects/packages/packages/index/index.js
@@ -1,3 +1,3 @@
-import packageList from '~/packages_and_registries/package_registry/pages/list';
+import packageApp from '~/packages_and_registries/package_registry/index';
 
-packageList();
+packageApp();
diff --git a/app/assets/javascripts/pages/projects/path_locks/index.js b/app/assets/javascripts/pages/projects/path_locks/index.js
deleted file mode 100644
index e5ab5d43bbf..00000000000
--- a/app/assets/javascripts/pages/projects/path_locks/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
-
-document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
index 03ffc323fc0..a2b18d86240 100644
--- a/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -1,9 +1,8 @@
-import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import initIntegrationSettingsForm from '~/integrations/edit';
 import PrometheusAlerts from '~/prometheus_alerts';
 import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 
-const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-integrationSettingsForm.init();
+initIntegrationSettingsForm('.js-integration-settings-form');
 
 const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
 const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
diff --git a/app/assets/javascripts/pages/projects/usage_quotas/index.js b/app/assets/javascripts/pages/projects/usage_quotas/index.js
deleted file mode 100644
index 9cd80b85c8a..00000000000
--- a/app/assets/javascripts/pages/projects/usage_quotas/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
-import storageCounter from '~/projects/storage_counter';
-import initSearchSettings from '~/search_settings';
-
-const initLinkedTabs = () => {
-  if (!document.querySelector('.js-usage-quota-tabs')) {
-    return false;
-  }
-
-  return new LinkedTabs({
-    defaultAction: '#storage-quota-tab',
-    parentEl: '.js-usage-quota-tabs',
-    hashedTabs: true,
-  });
-};
-
-const initVueApp = () => {
-  storageCounter('js-project-storage-count-app');
-};
-
-initVueApp();
-initLinkedTabs();
-initSearchSettings();