Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

36 files changed, 606 insertions, 247 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/integrations/index.js b/app/assets/javascripts/pages/admin/application_settings/integrations/index.js
index f318b6f62d5..53068f72d3f 100644
--- a/app/assets/javascripts/pages/admin/application_settings/integrations/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/integrations/index.js
@@ -1,8 +1,3 @@
 import initIntegrationsList from '~/integrations/index';
-import PersistentUserCallout from '~/persistent_user_callout';
-
-const callout = document.querySelector('.js-admin-integrations-moved');
-
-PersistentUserCallout.factory(callout);
 
 initIntegrationsList();
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index 798eeee48bf..ffccc1419a6 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -31,7 +31,9 @@ export default {
           redirectTo(response.request.responseURL);
         })
         .catch((error) => {
-          createFlash(s__('AdminArea|Stopping jobs failed'));
+          createFlash({
+            message: s__('AdminArea|Stopping jobs failed'),
+          });
           throw error;
         });
     },
diff --git a/app/assets/javascripts/pages/admin/runners/index/index.js b/app/assets/javascripts/pages/admin/runners/index/index.js
index 45ed3ac6bd8..d5563470394 100644
--- a/app/assets/javascripts/pages/admin/runners/index/index.js
+++ b/app/assets/javascripts/pages/admin/runners/index/index.js
@@ -2,6 +2,7 @@ import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
+import { initRunnerList } from '~/runner/runner_list';
 
 initFilteredSearch({
   page: FILTERED_SEARCH.ADMIN_RUNNERS,
@@ -10,3 +11,7 @@ initFilteredSearch({
 });
 
 initInstallRunner();
+
+if (gon.features?.runnerListViewVueUi) {
+  initRunnerList();
+}
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index b0a70055835..13656ee9b16 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -29,46 +29,43 @@ function mountRemoveMemberModal() {
 
 const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
 
-initMembersApp(document.querySelector('.js-group-members-list'), {
-  namespace: MEMBER_TYPES.user,
-  tableFields: SHARED_FIELDS.concat(['source', 'granted']),
-  tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
-  tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
-  requestFormatter: groupMemberRequestFormatter,
-  filteredSearchBar: {
-    show: true,
-    tokens: ['two_factor', 'with_inherited_permissions'],
-    searchParam: 'search',
-    placeholder: s__('Members|Filter members'),
-    recentSearchesStorageKey: 'group_members',
+initMembersApp(document.querySelector('.js-group-members-list-app'), {
+  [MEMBER_TYPES.user]: {
+    tableFields: SHARED_FIELDS.concat(['source', 'granted']),
+    tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
+    tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
+    requestFormatter: groupMemberRequestFormatter,
+    filteredSearchBar: {
+      show: true,
+      tokens: ['two_factor', 'with_inherited_permissions'],
+      searchParam: 'search',
+      placeholder: s__('Members|Filter members'),
+      recentSearchesStorageKey: 'group_members',
+    },
   },
-});
-
-initMembersApp(document.querySelector('.js-group-group-links-list'), {
-  namespace: MEMBER_TYPES.group,
-  tableFields: SHARED_FIELDS.concat('granted'),
-  tableAttrs: {
-    table: { 'data-qa-selector': 'groups_list' },
-    tr: { 'data-qa-selector': 'group_row' },
+  [MEMBER_TYPES.group]: {
+    tableFields: SHARED_FIELDS.concat('granted'),
+    tableAttrs: {
+      table: { 'data-qa-selector': 'groups_list' },
+      tr: { 'data-qa-selector': 'group_row' },
+    },
+    requestFormatter: groupLinkRequestFormatter,
   },
-  requestFormatter: groupLinkRequestFormatter,
-});
-initMembersApp(document.querySelector('.js-group-invited-members-list'), {
-  namespace: MEMBER_TYPES.invite,
-  tableFields: SHARED_FIELDS.concat('invited'),
-  requestFormatter: groupMemberRequestFormatter,
-  filteredSearchBar: {
-    show: true,
-    tokens: [],
-    searchParam: 'search_invited',
-    placeholder: s__('Members|Search invited'),
-    recentSearchesStorageKey: 'group_invited_members',
+  [MEMBER_TYPES.invite]: {
+    tableFields: SHARED_FIELDS.concat('invited'),
+    requestFormatter: groupMemberRequestFormatter,
+    filteredSearchBar: {
+      show: true,
+      tokens: [],
+      searchParam: 'search_invited',
+      placeholder: s__('Members|Search invited'),
+      recentSearchesStorageKey: 'group_invited_members',
+    },
+  },
+  [MEMBER_TYPES.accessRequest]: {
+    tableFields: SHARED_FIELDS.concat('requested'),
+    requestFormatter: groupMemberRequestFormatter,
   },
-});
-initMembersApp(document.querySelector('.js-group-access-requests-list'), {
-  namespace: MEMBER_TYPES.accessRequest,
-  tableFields: SHARED_FIELDS.concat('requested'),
-  requestFormatter: groupMemberRequestFormatter,
 });
 
 groupsSelect();
diff --git a/app/assets/javascripts/pages/groups/new/components/app.vue b/app/assets/javascripts/pages/groups/new/components/app.vue
new file mode 100644
index 00000000000..9aac364d20e
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/new/components/app.vue
@@ -0,0 +1,55 @@
+<script>
+import importGroupIllustration from '@gitlab/svgs/dist/illustrations/group-import.svg';
+import newGroupIllustration from '@gitlab/svgs/dist/illustrations/group-new.svg';
+
+import { s__ } from '~/locale';
+import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
+import createGroupDescriptionDetails from './create_group_description_details.vue';
+
+const PANELS = [
+  {
+    name: 'create-group-pane',
+    selector: '#create-group-pane',
+    title: s__('GroupsNew|Create group'),
+    description: s__(
+      'GroupsNew|Assemble related projects together and grant members access to several projects at once.',
+    ),
+    illustration: newGroupIllustration,
+    details: createGroupDescriptionDetails,
+  },
+  {
+    name: 'import-group-pane',
+    selector: '#import-group-pane',
+    title: s__('GroupsNew|Import group'),
+    description: s__(
+      'GroupsNew|Export groups with all their related data and move to a new GitLab instance.',
+    ),
+    illustration: importGroupIllustration,
+    details: 'Migrate your existing groups from another instance of GitLab.',
+  },
+];
+
+export default {
+  components: {
+    NewNamespacePage,
+  },
+  props: {
+    hasErrors: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  PANELS,
+};
+</script>
+
+<template>
+  <new-namespace-page
+    :jump-to-last-persisted-panel="hasErrors"
+    :initial-breadcrumb="s__('New group')"
+    :panels="$options.PANELS"
+    :title="s__('GroupsNew|Create new group')"
+    persistence-key="new_group_last_active_tab"
+  />
+</template>
diff --git a/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue b/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue
new file mode 100644
index 00000000000..ea08a0821a8
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  paths: {
+    groupsHelpPath: helpPagePath('user/group/index'),
+    subgroupsHelpPath: helpPagePath('user/group/subgroups/index'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'GroupsNew|%{linkStart}Groups%{linkEnd} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects. Groups can also be nested by creating subgroups.',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="$options.paths.groupsHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p>
+      <gl-sprintf
+        :message="
+          s__('GroupsNew|Groups can also be nested by creating %{linkStart}subgroups%{linkEnd}.')
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="$options.paths.subgroupsHelpPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index 569b5afd676..7557edb1b49 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -1,8 +1,9 @@
-import $ from 'jquery';
+import Vue from 'vue';
 import BindInOut from '~/behaviors/bind_in_out';
 import initFilePickers from '~/file_pickers';
 import Group from '~/group';
-import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import NewGroupCreationApp from './components/app.vue';
 import GroupPathValidator from './group_path_validator';
 
 new GroupPathValidator(); // eslint-disable-line no-new
@@ -12,15 +13,21 @@ initFilePickers();
 
 new Group(); // eslint-disable-line no-new
 
-const CONTAINER_SELECTOR = '.group-edit-container .nav-tabs';
-const DEFAULT_ACTION = '#create-group-pane';
-// eslint-disable-next-line no-new
-new LinkedTabs({
-  defaultAction: DEFAULT_ACTION,
-  parentEl: CONTAINER_SELECTOR,
-  hashedTabs: true,
-});
-
-if (window.location.hash) {
-  $(CONTAINER_SELECTOR).find(`a[href="${window.location.hash}"]`).tab('show');
+function initNewGroupCreation(el) {
+  const { hasErrors } = el.dataset;
+
+  const props = {
+    hasErrors: parseBoolean(hasErrors),
+  };
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(NewGroupCreationApp, { props });
+    },
+  });
 }
+
+const el = document.querySelector('.js-new-group-creation');
+
+initNewGroupCreation(el);
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index 636eea5d7ac..a8d7a83cdd6 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -3,6 +3,7 @@ import GroupRunnersFilteredSearchTokenKeys from '~/filtered_search/group_runners
 import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
+import { initRunnerAwsDeployments } from '~/pages/shared/mount_runner_aws_deployments';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSettingsPanels from '~/settings_panels';
 
@@ -20,3 +21,4 @@ initSharedRunnersForm();
 initVariableList();
 
 initInstallRunner();
+initRunnerAwsDeployments();
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index 8d4997586dd..e42e89ce021 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
@@ -63,7 +63,9 @@ export default {
           visitUrl(response.data.url);
         })
         .catch((error) => {
-          createFlash(error);
+          createFlash({
+            message: error,
+          });
         })
         .finally(() => {
           this.visible = false;
diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js
index b5441127797..226ef4c4e23 100644
--- a/app/assets/javascripts/pages/profiles/show/index.js
+++ b/app/assets/javascripts/pages/profiles/show/index.js
@@ -2,7 +2,7 @@ import emojiRegex from 'emoji-regex';
 import $ from 'jquery';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import * as Emoji from '~/emoji';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import EmojiMenu from './emoji_menu';
 
@@ -81,4 +81,8 @@ Emoji.initEmojiMap()
       }
     });
   })
-  .catch(() => createFlash(__('Failed to load emoji list.')));
+  .catch(() =>
+    createFlash({
+      message: __('Failed to load emoji list.'),
+    }),
+  );
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 8a8ce70e998..6cc0095f5a5 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import TableOfContents from '~/blob/components/table_contents.vue';
 import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 import BlobViewer from '~/blob/viewer/index';
 import GpgBadges from '~/gpg_badges';
@@ -19,12 +20,16 @@ const apolloProvider = new VueApollo({
 const viewBlobEl = document.querySelector('#js-view-blob-app');
 
 if (viewBlobEl) {
-  const { blobPath, projectPath } = viewBlobEl.dataset;
+  const { blobPath, projectPath, targetBranch, originalBranch } = viewBlobEl.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
     el: viewBlobEl,
     apolloProvider,
+    provide: {
+      targetBranch,
+      originalBranch,
+    },
     render(createElement) {
       return createElement(BlobContentViewer, {
         props: {
@@ -92,3 +97,15 @@ if (successPipelineEl) {
     },
   });
 }
+
+const tableContentsEl = document.querySelector('.js-table-contents');
+
+if (tableContentsEl) {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: tableContentsEl,
+    render(h) {
+      return h(TableOfContents);
+    },
+  });
+}
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
index 27ec746ad02..97dc76908af 100644
--- a/app/assets/javascripts/pages/projects/branches/index/index.js
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -3,6 +3,8 @@ import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner';
 import BranchSortDropdown from '~/branches/branch_sort_dropdown';
 import DeleteModal from '~/branches/branches_delete_modal';
 import initDiverganceGraph from '~/branches/divergence_graph';
+import initDeleteBranchButton from '~/branches/init_delete_branch_button';
+import initDeleteBranchModal from '~/branches/init_delete_branch_modal';
 
 AjaxLoadingSpinner.init();
 new DeleteModal(); // eslint-disable-line no-new
@@ -14,3 +16,9 @@ const { divergingCountsEndpoint, defaultBranch } = document.querySelector(
 initDiverganceGraph(divergingCountsEndpoint, defaultBranch);
 BranchSortDropdown();
 initDeprecatedRemoveRowBehavior();
+
+document
+  .querySelectorAll('.js-delete-branch-button')
+  .forEach((elem) => initDeleteBranchButton(elem));
+
+initDeleteBranchModal();
diff --git a/app/assets/javascripts/pages/projects/feature_flags_user_lists/index/index.js b/app/assets/javascripts/pages/projects/feature_flags_user_lists/index/index.js
new file mode 100644
index 00000000000..519e04e14fb
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/feature_flags_user_lists/index/index.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-new */
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import UserLists from '~/user_lists/components/user_lists.vue';
+import createStore from '~/user_lists/store/index';
+
+Vue.use(Vuex);
+
+const el = document.querySelector('#js-user-lists');
+
+const { featureFlagsHelpPagePath, errorStateSvgPath, projectId, newUserListPath } = el.dataset;
+
+new Vue({
+  el,
+  store: createStore({ projectId }),
+  provide: {
+    featureFlagsHelpPagePath,
+    errorStateSvgPath,
+    newUserListPath,
+  },
+  render(createElement) {
+    return createElement(UserLists);
+  },
+});
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/app.vue b/app/assets/javascripts/pages/projects/forks/new/components/app.vue
index 02b357d389b..7fb41c6e7b7 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/app.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/app.vue
@@ -38,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    restrictedVisibilityLevels: {
+      type: Array,
+      required: true,
+    },
   },
 };
 </script>
@@ -66,6 +70,7 @@ export default {
         :project-path="projectPath"
         :project-description="projectDescription"
         :project-visibility="projectVisibility"
+        :restricted-visibility-levels="restrictedVisibilityLevels"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index 07cc0ce46bc..75c3b6d564c 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -26,10 +26,10 @@ const PRIVATE_VISIBILITY = 'private';
 const INTERNAL_VISIBILITY = 'internal';
 const PUBLIC_VISIBILITY = 'public';
 
-const ALLOWED_VISIBILITY = {
-  private: [PRIVATE_VISIBILITY],
-  internal: [INTERNAL_VISIBILITY, PRIVATE_VISIBILITY],
-  public: [INTERNAL_VISIBILITY, PRIVATE_VISIBILITY, PUBLIC_VISIBILITY],
+const VISIBILITY_LEVEL = {
+  [PRIVATE_VISIBILITY]: 0,
+  [INTERNAL_VISIBILITY]: 10,
+  [PUBLIC_VISIBILITY]: 20,
 };
 
 const initFormField = ({ value, required = true, skipValidation = false }) => ({
@@ -95,6 +95,10 @@ export default {
       type: String,
       required: true,
     },
+    restrictedVisibilityLevels: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     const form = {
@@ -111,10 +115,7 @@ export default {
           required: false,
           skipValidation: true,
         }),
-        visibility: initFormField({
-          value: this.projectVisibility,
-          skipValidation: true,
-        }),
+        visibility: initFormField({ value: this.getInitialVisibilityValue() }),
       },
     };
     return {
@@ -127,14 +128,38 @@ export default {
     projectUrl() {
       return `${gon.gitlab_url}/`;
     },
-    projectAllowedVisibility() {
-      return ALLOWED_VISIBILITY[this.projectVisibility];
+    projectVisibilityLevel() {
+      return VISIBILITY_LEVEL[this.projectVisibility];
+    },
+    namespaceVisibilityLevel() {
+      const visibility = this.form.fields.namespace.value?.visibility || PUBLIC_VISIBILITY;
+      return VISIBILITY_LEVEL[visibility];
+    },
+    visibilityLevelCap() {
+      return Math.min(this.projectVisibilityLevel, this.namespaceVisibilityLevel);
+    },
+    restrictedVisibilityLevelsSet() {
+      return new Set(this.restrictedVisibilityLevels);
     },
-    namespaceAllowedVisibility() {
-      return (
-        ALLOWED_VISIBILITY[this.form.fields.namespace.value?.visibility] ||
-        ALLOWED_VISIBILITY[PUBLIC_VISIBILITY]
+    allowedVisibilityLevels() {
+      const allowedLevels = Object.entries(VISIBILITY_LEVEL).reduce(
+        (levels, [levelName, levelValue]) => {
+          if (
+            !this.restrictedVisibilityLevelsSet.has(levelValue) &&
+            levelValue <= this.visibilityLevelCap
+          ) {
+            levels.push(levelName);
+          }
+          return levels;
+        },
+        [],
       );
+
+      if (!allowedLevels.length) {
+        return [PRIVATE_VISIBILITY];
+      }
+
+      return allowedLevels;
     },
     visibilityLevels() {
       return [
@@ -142,7 +167,9 @@ export default {
           text: s__('ForkProject|Private'),
           value: PRIVATE_VISIBILITY,
           icon: 'lock',
-          help: s__('ForkProject|The project can be accessed without any authentication.'),
+          help: s__(
+            'ForkProject|Project access must be granted explicitly to each user. If this project is part of a group, access will be granted to members of the group.',
+          ),
           disabled: this.isVisibilityLevelDisabled(PRIVATE_VISIBILITY),
         },
         {
@@ -156,9 +183,7 @@ export default {
           text: s__('ForkProject|Public'),
           value: PUBLIC_VISIBILITY,
           icon: 'earth',
-          help: s__(
-            'ForkProject|Project access must be granted explicitly to each user. If this project is part of a group, access will be granted to members of the group.',
-          ),
+          help: s__('ForkProject|The project can be accessed without any authentication.'),
           disabled: this.isVisibilityLevelDisabled(PUBLIC_VISIBILITY),
         },
       ];
@@ -166,12 +191,9 @@ export default {
   },
   watch: {
     // eslint-disable-next-line func-names
-    'form.fields.namespace.value': function (newVal) {
-      const { visibility } = newVal;
-
-      if (this.projectAllowedVisibility.includes(visibility)) {
-        this.form.fields.visibility.value = visibility;
-      }
+    'form.fields.namespace.value': function () {
+      this.form.fields.visibility.value =
+        this.restrictedVisibilityLevels.length !== 0 ? null : PRIVATE_VISIBILITY;
     },
     // eslint-disable-next-line func-names
     'form.fields.name.value': function (newVal) {
@@ -186,11 +208,11 @@ export default {
       const { data } = await axios.get(this.endpoint);
       this.namespaces = data.namespaces;
     },
-    isVisibilityLevelDisabled(visibilityLevel) {
-      return !(
-        this.projectAllowedVisibility.includes(visibilityLevel) &&
-        this.namespaceAllowedVisibility.includes(visibilityLevel)
-      );
+    isVisibilityLevelDisabled(visibility) {
+      return !this.allowedVisibilityLevels.includes(visibility);
+    },
+    getInitialVisibilityValue() {
+      return this.restrictedVisibilityLevels.length !== 0 ? null : this.projectVisibility;
     },
     async onSubmit() {
       this.form.showValidation = true;
@@ -222,7 +244,11 @@ export default {
         redirectTo(data.web_url);
         return;
       } catch (error) {
-        createFlash({ message: error });
+        createFlash({
+          message: s__(
+            'ForkProject|An error occurred while forking the project. Please try again.',
+          ),
+        });
       }
     },
   },
@@ -322,7 +348,11 @@ export default {
       />
     </gl-form-group>
 
-    <gl-form-group>
+    <gl-form-group
+      v-validation:[form.showValidation]
+      :invalid-feedback="s__('ForkProject|Please select a visibility level')"
+      :state="form.fields.visibility.state"
+    >
       <label>
         {{ s__('ForkProject|Visibility level') }}
         <gl-link :href="visibilityHelpPath" target="_blank">
@@ -333,6 +363,7 @@ export default {
         v-model="form.fields.visibility.value"
         data-testid="fork-visibility-radio-group"
         name="visibility"
+        :aria-label="__('visibility')"
         required
       >
         <gl-form-radio
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
index bc47b124f8b..10753de6cd0 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTabs, GlTab, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import ForkGroupsListItem from './fork_groups_list_item.vue';
@@ -44,7 +44,11 @@ export default {
         .then((response) => {
           this.namespaces = response.data.namespaces;
         })
-        .catch(() => createFlash(__('There was a problem fetching groups.')));
+        .catch(() =>
+          createFlash({
+            message: __('There was a problem fetching groups.'),
+          }),
+        );
     },
   },
 
diff --git a/app/assets/javascripts/pages/projects/forks/new/index.js b/app/assets/javascripts/pages/projects/forks/new/index.js
index 372967c8a1e..1a171252048 100644
--- a/app/assets/javascripts/pages/projects/forks/new/index.js
+++ b/app/assets/javascripts/pages/projects/forks/new/index.js
@@ -16,6 +16,7 @@ if (gon.features.forkProjectForm) {
     projectPath,
     projectDescription,
     projectVisibility,
+    restrictedVisibilityLevels,
   } = mountElement.dataset;
 
   // eslint-disable-next-line no-new
@@ -38,6 +39,7 @@ if (gon.features.forkProjectForm) {
           projectPath,
           projectDescription,
           projectVisibility,
+          restrictedVisibilityLevels: JSON.parse(restrictedVisibilityLevels),
         },
       });
     },
diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js
index 45e9643b3f3..1eab3becbc3 100644
--- a/app/assets/javascripts/pages/projects/index.js
+++ b/app/assets/javascripts/pages/projects/index.js
@@ -1,5 +1,7 @@
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
+import { initSidebarTracking } from '../shared/nav/sidebar_tracking';
 import Project from './project';
 
 new Project(); // eslint-disable-line no-new
 new ShortcutsNavigation(); // eslint-disable-line no-new
+initSidebarTracking();
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 3143ff5adac..3cea61262ea 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -1,8 +1,6 @@
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initIssuableSidebar from '~/init_issuable_sidebar';
-import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
-import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
 import '~/notes/index';
@@ -34,8 +32,6 @@ export default function initShowIssue() {
   initIssueHeaderActions(store);
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
-  initInviteMembersModal();
-  initInviteMembersTrigger();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then((module) => module.default())
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index 81ffaa6f7a3..aaa9bb906b2 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlSprintf, GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __, sprintf } from '~/locale';
@@ -70,7 +70,9 @@ export default {
             labelUrl: this.url,
             successful: false,
           });
-          createFlash(error);
+          createFlash({
+            message: error,
+          });
         });
     },
   },
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 6cd3202815b..d6b6c9fe06a 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
@@ -4,8 +4,6 @@ import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
 import initIssuableSidebar from '~/init_issuable_sidebar';
-import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
-import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import StatusBox from '~/issuable/components/status_box.vue';
 import createDefaultClient from '~/lib/graphql';
 import { handleLocationHash } from '~/lib/utils/common_utils';
@@ -29,8 +27,6 @@ export default function initMergeRequestShow() {
   } else {
     loadAwardsHandler();
   }
-  initInviteMembersModal();
-  initInviteMembersTrigger();
 
   const el = document.querySelector('.js-mr-status-box');
   const apolloProvider = new VueApollo({ defaultClient: createDefaultClient() });
diff --git a/app/assets/javascripts/pages/projects/packages/infrastructure_registry/show/index.js b/app/assets/javascripts/pages/projects/packages/infrastructure_registry/show/index.js
new file mode 100644
index 00000000000..44d9e2ffb6e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/packages/infrastructure_registry/show/index.js
@@ -0,0 +1,3 @@
+import initDetails from '~/packages_and_registries/infrastructure_registry/details_app_bundle';
+
+initDetails();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 159c619e16c..d0ec5668d21 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -1,7 +1,15 @@
 <script>
-import { GlFormRadio, GlFormRadioGroup, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlFormRadio,
+  GlFormRadioGroup,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const KEY_EVERY_DAY = 'everyDay';
 const KEY_EVERY_WEEK = 'everyWeek';
@@ -12,15 +20,25 @@ export default {
   components: {
     GlFormRadio,
     GlFormRadioGroup,
+    GlIcon,
     GlLink,
     GlSprintf,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagMixin()],
   props: {
     initialCronInterval: {
       type: String,
       required: false,
       default: '',
     },
+    dailyLimit: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -80,6 +98,17 @@ export default {
     weekday() {
       return getWeekdayNames()[this.randomWeekDayIndex];
     },
+    parsedDailyLimit() {
+      return this.dailyLimit ? (24 * 60) / this.dailyLimit : null;
+    },
+    scheduleDailyLimitMsg() {
+      return sprintf(
+        __(
+          'Scheduled pipelines cannot run more frequently than once per %{limit} minutes. A pipeline configured to run more frequently only starts after %{limit} minutes have elapsed since the last time it ran.',
+        ),
+        { limit: this.parsedDailyLimit },
+      );
+    },
   },
   watch: {
     cronInterval() {
@@ -111,6 +140,11 @@ export default {
     generateRandomDay() {
       return Math.floor(Math.random() * 28);
     },
+    showDailyLimitMessage({ value }) {
+      return (
+        value === KEY_CUSTOM && this.glFeatures.ciDailyLimitForPipelineSchedules && this.dailyLimit
+      );
+    },
   },
 };
 </script>
@@ -131,7 +165,15 @@ export default {
             </gl-link>
           </template>
         </gl-sprintf>
+
         <template v-else>{{ option.text }}</template>
+
+        <gl-icon
+          v-if="showDailyLimitMessage(option)"
+          v-gl-tooltip.hover
+          name="question"
+          :title="scheduleDailyLimitMsg"
+        />
       </gl-form-radio>
     </gl-form-radio-group>
     <input
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
index ce0e573fed2..9056c76d6ca 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
@@ -12,6 +12,7 @@ Vue.use(Translate);
 function initIntervalPatternInput() {
   const intervalPatternMount = document.getElementById('interval-pattern-input');
   const initialCronInterval = intervalPatternMount?.dataset?.initialInterval;
+  const dailyLimit = intervalPatternMount.dataset?.dailyLimit;
 
   return new Vue({
     el: intervalPatternMount,
@@ -22,6 +23,7 @@ function initIntervalPatternInput() {
       return createElement('interval-pattern-input', {
         props: {
           initialCronInterval,
+          dailyLimit,
         },
       });
     },
diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index 91f376060f8..3b24c2c128b 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -129,7 +129,7 @@ export default class Project {
               const currentRef = $dropdown.data('ref');
               // The split and startWith is to ensure an exact word match
               // and avoid partial match ie. currentRef is "dev" and loc is "development"
-              const splitPathAfterRefPortion = loc.split(currentRef)[1];
+              const splitPathAfterRefPortion = loc.split('/-/')[1].split(currentRef)[1];
               const doesPathContainRef = splitPathAfterRefPortion?.startsWith('/');
 
               if (doesPathContainRef) {
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index 471798d2931..177dc346c60 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -42,46 +42,41 @@ initInviteMembersForm();
 new UsersSelect(); // eslint-disable-line no-new
 
 const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions'];
-initMembersApp(document.querySelector('.js-project-members-list'), {
-  namespace: MEMBER_TYPES.user,
-  tableFields: SHARED_FIELDS.concat(['source', 'granted']),
-  tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
-  tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
-  requestFormatter: projectMemberRequestFormatter,
-  filteredSearchBar: {
-    show: true,
-    tokens: ['with_inherited_permissions'],
-    searchParam: 'search',
-    placeholder: s__('Members|Filter members'),
-    recentSearchesStorageKey: 'project_members',
+initMembersApp(document.querySelector('.js-project-members-list-app'), {
+  [MEMBER_TYPES.user]: {
+    tableFields: SHARED_FIELDS.concat(['source', 'granted']),
+    tableAttrs: { tr: { 'data-qa-selector': 'member_row' } },
+    tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'],
+    requestFormatter: projectMemberRequestFormatter,
+    filteredSearchBar: {
+      show: true,
+      tokens: ['with_inherited_permissions'],
+      searchParam: 'search',
+      placeholder: s__('Members|Filter members'),
+      recentSearchesStorageKey: 'project_members',
+    },
   },
-});
-
-initMembersApp(document.querySelector('.js-project-group-links-list'), {
-  namespace: MEMBER_TYPES.group,
-  tableFields: SHARED_FIELDS.concat('granted'),
-  tableAttrs: {
-    table: { 'data-qa-selector': 'groups_list' },
-    tr: { 'data-qa-selector': 'group_row' },
+  [MEMBER_TYPES.group]: {
+    tableFields: SHARED_FIELDS.concat('granted'),
+    tableAttrs: {
+      table: { 'data-qa-selector': 'groups_list' },
+      tr: { 'data-qa-selector': 'group_row' },
+    },
+    requestFormatter: groupLinkRequestFormatter,
+    filteredSearchBar: {
+      show: true,
+      tokens: [],
+      searchParam: 'search_groups',
+      placeholder: s__('Members|Search groups'),
+      recentSearchesStorageKey: 'project_group_links',
+    },
   },
-  requestFormatter: groupLinkRequestFormatter,
-  filteredSearchBar: {
-    show: true,
-    tokens: [],
-    searchParam: 'search_groups',
-    placeholder: s__('Members|Search groups'),
-    recentSearchesStorageKey: 'project_group_links',
+  [MEMBER_TYPES.invite]: {
+    tableFields: SHARED_FIELDS.concat('invited'),
+    requestFormatter: projectMemberRequestFormatter,
+  },
+  [MEMBER_TYPES.accessRequest]: {
+    tableFields: SHARED_FIELDS.concat('requested'),
+    requestFormatter: projectMemberRequestFormatter,
   },
-});
-
-initMembersApp(document.querySelector('.js-project-invited-members-list'), {
-  namespace: MEMBER_TYPES.invite,
-  tableFields: SHARED_FIELDS.concat('invited'),
-  requestFormatter: projectMemberRequestFormatter,
-});
-
-initMembersApp(document.querySelector('.js-project-access-requests-list'), {
-  namespace: MEMBER_TYPES.accessRequest,
-  tableFields: SHARED_FIELDS.concat('requested'),
-  requestFormatter: projectMemberRequestFormatter,
 });
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 10105af3561..db7b3bad6ed 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -4,6 +4,7 @@ import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
 import initVariableList from '~/ci_variable_list';
 import initDeployFreeze from '~/deploy_freeze';
 import registrySettingsApp from '~/packages_and_registries/settings/project/registry_settings_bundle';
+import { initRunnerAwsDeployments } from '~/pages/shared/mount_runner_aws_deployments';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
 import initSettingsPanels from '~/settings_panels';
@@ -38,4 +39,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initArtifactsSettings();
   initSharedRunnersToggle();
   initInstallRunner();
+  initRunnerAwsDeployments();
 });
diff --git a/app/assets/javascripts/pages/projects/settings/integrations/show/index.js b/app/assets/javascripts/pages/projects/settings/integrations/show/index.js
index 01ad87160c5..53068f72d3f 100644
--- a/app/assets/javascripts/pages/projects/settings/integrations/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/integrations/show/index.js
@@ -1,7 +1,3 @@
 import initIntegrationsList from '~/integrations/index';
-import PersistentUserCallout from '~/persistent_user_callout';
-
-const callout = document.querySelector('.js-webhooks-moved-alert');
-PersistentUserCallout.factory(callout);
 
 initIntegrationsList();
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index c110c1d4d62..9fb8be3fdb9 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -91,7 +91,7 @@ export default {
       label-position="hidden"
       @change="toggleFeature"
     />
-    <div class="select-wrapper gl-flex-fill-1">
+    <div class="select-wrapper gl-flex-grow-1">
       <select
         :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 0b7b4c0ded1..11e6b4577e0 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -381,7 +381,7 @@ export default {
         :label="s__('ProjectSettings|Project visibility')"
       >
         <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0">
-          <div class="select-wrapper gl-flex-fill-1">
+          <div class="select-wrapper gl-flex-grow-1">
             <select
               v-model="visibilityLevel"
               :disabled="!canChangeVisibilityLevel"
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 83e43d7ac48..26f8018a968 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -3,6 +3,8 @@ import Activities from '~/activities';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import BlobViewer from '~/blob/viewer/index';
 import { initUploadForm } from '~/blob_edit/blob_bundle';
+import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initVueNotificationsDropdown from '~/notifications';
 import { initUploadFileTrigger } from '~/projects/upload_file_experiment';
@@ -44,3 +46,5 @@ initVueNotificationsDropdown();
 new ShortcutsNavigation(); // eslint-disable-line no-new
 
 initUploadFileTrigger();
+initInviteMembersModal();
+initInviteMembersTrigger();
diff --git a/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js b/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js
new file mode 100644
index 00000000000..f3807a33a2b
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import RunnerAwsDeployments from '~/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue';
+
+export function initRunnerAwsDeployments(componentId = 'js-runner-aws-deployments') {
+  const el = document.getElementById(componentId);
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(RunnerAwsDeployments);
+    },
+  });
+}
diff --git a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
new file mode 100644
index 00000000000..79ce1a37d21
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js
@@ -0,0 +1,44 @@
+function onSidebarLinkClick() {
+  const setDataTrackAction = (element, action) => {
+    element.setAttribute('data-track-action', action);
+  };
+
+  const setDataTrackExtra = (element, value) => {
+    const SIDEBAR_COLLAPSED = 'Collapsed';
+    const SIDEBAR_EXPANDED = 'Expanded';
+    const sidebarCollapsed = document
+      .querySelector('.nav-sidebar')
+      .classList.contains('js-sidebar-collapsed')
+      ? SIDEBAR_COLLAPSED
+      : SIDEBAR_EXPANDED;
+
+    element.setAttribute(
+      'data-track-extra',
+      JSON.stringify({ sidebar_display: sidebarCollapsed, menu_display: value }),
+    );
+  };
+
+  const EXPANDED = 'Expanded';
+  const FLY_OUT = 'Fly out';
+  const CLICK_MENU_ACTION = 'click_menu';
+  const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
+  const parentElement = this.parentNode;
+  const subMenuList = parentElement.closest('.sidebar-sub-level-items');
+
+  if (subMenuList) {
+    const isFlyOut = subMenuList.classList.contains('fly-out-list') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ITEM_ACTION);
+  } else {
+    const isFlyOut = parentElement.classList.contains('is-showing-fly-out') ? FLY_OUT : EXPANDED;
+
+    setDataTrackExtra(parentElement, isFlyOut);
+    setDataTrackAction(parentElement, CLICK_MENU_ACTION);
+  }
+}
+export const initSidebarTracking = () => {
+  document.querySelectorAll('.nav-sidebar li[data-track-label] > a').forEach((link) => {
+    link.addEventListener('click', onSidebarLinkClick);
+  });
+};
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index 43753926039..26f6d1d683a 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -14,8 +14,17 @@ import axios from '~/lib/utils/axios_utils';
 import csrf from '~/lib/utils/csrf';
 import { setUrlFragment } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import {
+  WIKI_CONTENT_EDITOR_TRACKING_LABEL,
+  CONTENT_EDITOR_LOADED_ACTION,
+  SAVED_USING_CONTENT_EDITOR_ACTION,
+} from '../constants';
+
+const trackingMixin = Tracking.mixin({
+  label: WIKI_CONTENT_EDITOR_TRACKING_LABEL,
+});
 
 const MARKDOWN_LINK_TEXT = {
   markdown: '[Link Title](page-slug)',
@@ -53,21 +62,30 @@ export default {
         ),
         primaryAction: s__('WikiPage|Retry'),
       },
-      useNewEditor: s__('WikiPage|Use new editor'),
+      useNewEditor: {
+        primaryLabel: s__('WikiPage|Use the new editor'),
+        secondaryLabel: s__('WikiPage|Try this later'),
+        title: s__('WikiPage|Get a richer editing experience'),
+        text: s__(
+          "WikiPage|Try the new visual Markdown editor. Read the %{linkStart}documentation%{linkEnd} to learn what's currently supported.",
+        ),
+      },
       switchToOldEditor: {
-        label: s__('WikiPage|Switch to old editor'),
-        helpText: s__("WikiPage|Switching will discard any changes you've made in the new editor."),
+        label: s__('WikiPage|Switch me back to the classic editor.'),
+        helpText: s__(
+          "WikiPage|This editor is in beta and may not display the page's contents properly. Switching back to the classic editor will discard changes you've made in the new editor.",
+        ),
         modal: {
-          title: s__('WikiPage|Are you sure you want to switch to the old editor?'),
-          primary: s__('WikiPage|Switch to old editor'),
+          title: s__('WikiPage|Are you sure you want to switch back to the classic editor?'),
+          primary: s__('WikiPage|Switch to classic editor'),
           cancel: s__('WikiPage|Keep editing'),
           text: s__(
-            "WikiPage|Switching to the old editor will discard any changes you've made in the new editor.",
+            "WikiPage|Switching to the classic editor will discard any changes you've made in the new editor.",
           ),
         },
       },
-      helpText: s__(
-        "WikiPage|This editor is in beta and may not display the page's contents properly.",
+      feedbackTip: s__(
+        'Tell us your experiences with the new Markdown editor %{linkStart}in this feedback issue%{linkEnd}.',
       ),
     },
     linksHelpText: s__(
@@ -86,6 +104,7 @@ export default {
     },
     cancel: s__('WikiPage|Cancel'),
   },
+  contentEditorFeedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/332629',
   components: {
     GlAlert,
     GlForm,
@@ -104,13 +123,14 @@ export default {
   directives: {
     GlModalDirective,
   },
-  mixins: [glFeatureFlagMixin()],
+  mixins: [trackingMixin],
   inject: ['formatOptions', 'pageInfo'],
   data() {
     return {
       title: this.pageInfo.title?.trim() || '',
       format: this.pageInfo.format || 'markdown',
-      content: this.pageInfo.content?.trim() || '',
+      content: this.pageInfo.content || '',
+      isContentEditorAlertDismissed: false,
       isContentEditorLoading: true,
       useContentEditor: false,
       commitMessage: '',
@@ -120,6 +140,10 @@ export default {
     };
   },
   computed: {
+    noContent() {
+      if (this.isContentEditorActive) return this.contentEditor?.empty;
+      return !this.content.trim();
+    },
     csrfToken() {
       return csrf.token;
     },
@@ -157,14 +181,17 @@ export default {
     wikiSpecificMarkdownHelpPath() {
       return setUrlFragment(this.pageInfo.markdownHelpPath, 'wiki-specific-markdown');
     },
+    contentEditorHelpPath() {
+      return setUrlFragment(this.pageInfo.helpPath, 'gitlab-flavored-markdown-support');
+    },
     isMarkdownFormat() {
       return this.format === 'markdown';
     },
-    showContentEditorButton() {
-      return this.isMarkdownFormat && !this.useContentEditor && this.glFeatures.wikiContentEditor;
+    showContentEditorAlert() {
+      return this.isMarkdownFormat && !this.useContentEditor && !this.isContentEditorAlertDismissed;
     },
     disableSubmitButton() {
-      return !this.content || !this.title || this.contentEditorRenderFailed;
+      return this.noContent || !this.title || this.contentEditorRenderFailed;
     },
     isContentEditorActive() {
       return this.isMarkdownFormat && this.useContentEditor;
@@ -188,6 +215,8 @@ export default {
     handleFormSubmit() {
       if (this.useContentEditor) {
         this.content = this.contentEditor.getSerializedContent();
+
+        this.trackFormSubmit();
       }
 
       this.isDirty = false;
@@ -236,6 +265,8 @@ export default {
       try {
         await this.contentEditor.setSerializedContent(this.content);
         this.isContentEditorLoading = false;
+
+        this.trackContentEditorLoaded();
       } catch (e) {
         this.contentEditorRenderFailed = true;
       }
@@ -258,6 +289,20 @@ export default {
         this.$refs.confirmSwitchToOldEditorModal.show();
       }
     },
+
+    trackContentEditorLoaded() {
+      this.track(CONTENT_EDITOR_LOADED_ACTION);
+    },
+
+    trackFormSubmit() {
+      if (this.isContentEditorActive) {
+        this.track(SAVED_USING_CONTENT_EDITOR_ACTION);
+      }
+    },
+
+    dismissContentEditorAlert() {
+      this.isContentEditorAlertDismissed = true;
+    },
   },
 };
 </script>
@@ -275,11 +320,9 @@ export default {
       :dismissible="false"
       variant="danger"
       :primary-button-text="$options.i18n.contentEditor.renderFailed.primaryAction"
-      @primaryAction="retryInitContentEditor()"
+      @primaryAction="retryInitContentEditor"
     >
-      <p>
-        {{ $options.i18n.contentEditor.renderFailed.message }}
-      </p>
+      {{ $options.i18n.contentEditor.renderFailed.message }}
     </gl-alert>
 
     <input :value="csrfToken" type="hidden" name="authenticity_token" />
@@ -299,7 +342,7 @@ export default {
       <div class="col-sm-10">
         <input
           id="wiki_title"
-          v-model.trim="title"
+          v-model="title"
           name="wiki[title]"
           type="text"
           class="form-control"
@@ -337,46 +380,50 @@ export default {
             {{ label }}
           </option>
         </select>
-        <div>
-          <gl-button
-            v-if="showContentEditorButton"
-            category="secondary"
-            variant="confirm"
-            class="gl-mt-4"
-            @click="initContentEditor"
-            >{{ $options.i18n.contentEditor.useNewEditor }}</gl-button
-          >
-          <div v-if="isContentEditorActive" class="gl-mt-4 gl-display-flex">
-            <div class="gl-mr-4">
-              <gl-button category="secondary" variant="confirm" @click="confirmSwitchToOldEditor">{{
-                $options.i18n.contentEditor.switchToOldEditor.label
-              }}</gl-button>
-            </div>
-            <div class="gl-mt-2">
-              <gl-icon name="warning" />
-              {{ $options.i18n.contentEditor.switchToOldEditor.helpText }}
-            </div>
-          </div>
-          <gl-modal
-            ref="confirmSwitchToOldEditorModal"
-            modal-id="confirm-switch-to-old-editor"
-            :title="$options.i18n.contentEditor.switchToOldEditor.modal.title"
-            :action-primary="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.primary }"
-            :action-cancel="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.cancel }"
-            @primary="switchToOldEditor"
-          >
-            {{ $options.i18n.contentEditor.switchToOldEditor.modal.text }}
-          </gl-modal>
-        </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row" data-testid="wiki-form-content-fieldset">
       <div class="col-sm-2 col-form-label">
         <label class="control-label-full-width" for="wiki_content">{{
           $options.i18n.content.label
         }}</label>
       </div>
       <div class="col-sm-10">
+        <gl-alert
+          v-if="showContentEditorAlert"
+          class="gl-mb-6"
+          variant="info"
+          :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel"
+          :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
+          :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
+          :title="$options.i18n.contentEditor.useNewEditor.title"
+          @primaryAction="initContentEditor"
+          @secondaryAction="dismissContentEditorAlert"
+          @dismiss="dismissContentEditorAlert"
+        >
+          <gl-sprintf :message="$options.i18n.contentEditor.useNewEditor.text">
+            <template
+              #link="// eslint-disable-next-line vue/no-template-shadow
+                { content }"
+              ><gl-link
+                :href="contentEditorHelpPath"
+                target="_blank"
+                data-testid="content-editor-help-link"
+                >{{ content }}</gl-link
+              ></template
+            >
+          </gl-sprintf>
+        </gl-alert>
+        <gl-modal
+          ref="confirmSwitchToOldEditorModal"
+          modal-id="confirm-switch-to-old-editor"
+          :title="$options.i18n.contentEditor.switchToOldEditor.modal.title"
+          :action-primary="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.primary }"
+          :action-cancel="{ text: $options.i18n.contentEditor.switchToOldEditor.modal.cancel }"
+          @primary="switchToOldEditor"
+        >
+          {{ $options.i18n.contentEditor.switchToOldEditor.modal.text }}
+        </gl-modal>
         <markdown-field
           v-if="!isContentEditorActive"
           :markdown-preview-path="pageInfo.markdownPreviewPath"
@@ -391,7 +438,7 @@ export default {
             <textarea
               id="wiki_content"
               ref="textarea"
-              v-model.trim="content"
+              v-model="content"
               name="wiki[content]"
               class="note-textarea js-gfm-input js-autosize markdown-area"
               dir="auto"
@@ -407,6 +454,20 @@ export default {
         </markdown-field>
 
         <div v-if="isContentEditorActive">
+          <gl-alert class="gl-mb-6" variant="tip" :dismissable="false">
+            <gl-sprintf :message="$options.i18n.contentEditor.feedbackTip">
+              <template
+                #link="// eslint-disable-next-line vue/no-template-shadow
+                { content }"
+                ><gl-link
+                  :href="$options.contentEditorFeedbackIssue"
+                  target="_blank"
+                  data-testid="wiki-markdown-help-link"
+                  >{{ content }}</gl-link
+                ></template
+              >
+            </gl-sprintf>
+          </gl-alert>
           <gl-loading-icon v-if="isContentEditorLoading" class="bordered-box gl-w-full gl-py-6" />
           <content-editor v-else :content-editor="contentEditor" />
           <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" />
@@ -432,7 +493,10 @@ export default {
             >
           </gl-sprintf>
           <span v-else>
-            {{ $options.i18n.contentEditor.helpText }}
+            {{ $options.i18n.contentEditor.switchToOldEditor.helpText }}
+            <gl-button variant="link" @click="confirmSwitchToOldEditor">{{
+              $options.i18n.contentEditor.switchToOldEditor.label
+            }}</gl-button>
           </span>
         </div>
       </div>
diff --git a/app/assets/javascripts/pages/shared/wikis/constants.js b/app/assets/javascripts/pages/shared/wikis/constants.js
new file mode 100644
index 00000000000..b358ac9cf52
--- /dev/null
+++ b/app/assets/javascripts/pages/shared/wikis/constants.js
@@ -0,0 +1,4 @@
+export const WIKI_CONTENT_EDITOR_TRACKING_LABEL = 'wiki_content_editor';
+
+export const CONTENT_EDITOR_LOADED_ACTION = 'content_editor_loaded';
+export const SAVED_USING_CONTENT_EDITOR_ACTION = 'saved_using_content_editor';
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index c416106fdd8..03dba699461 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -1,4 +1,3 @@
-import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { select } from 'd3-selection';
 import dateFormat from 'dateformat';
 import $ from 'jquery';
@@ -8,7 +7,7 @@ import axios from '~/lib/utils/axios_utils';
 import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { n__, s__, __ } from '~/locale';
 
-const d3 = { select, scaleLinear, scaleThreshold };
+const d3 = { select };
 
 const firstDayOfWeekChoices = Object.freeze({
   sunday: 0,
@@ -16,6 +15,14 @@ const firstDayOfWeekChoices = Object.freeze({
   saturday: 6,
 });
 
+const CONTRIB_LEGENDS = [
+  { title: __('No contributions'), min: 0 },
+  { title: __('1-9 contributions'), min: 1 },
+  { title: __('10-19 contributions'), min: 10 },
+  { title: __('20-29 contributions'), min: 20 },
+  { title: __('30+ contributions'), min: 30 },
+];
+
 const LOADING_HTML = `
   <div class="text-center">
     <div class="spinner spinner-md"></div>
@@ -42,7 +49,17 @@ function formatTooltipText({ date, count }) {
   return `${contribText}<br /><span class="gl-text-gray-300">${dateDayName} ${dateText}</span>`;
 }
 
-const initColorKey = () => d3.scaleLinear().range(['#acd5f2', '#254e77']).domain([0, 3]);
+// Return the contribution level from the number of contributions
+export const getLevelFromContributions = (count) => {
+  if (count <= 0) {
+    return 0;
+  }
+
+  const nextLevel = CONTRIB_LEGENDS.findIndex(({ min }) => count < min);
+
+  // If there is no higher level, we are at the end
+  return nextLevel >= 0 ? nextLevel - 1 : CONTRIB_LEGENDS.length - 1;
+};
 
 export default class ActivityCalendar {
   constructor(
@@ -111,10 +128,6 @@ export default class ActivityCalendar {
       innerArray.push({ count, date, day });
     }
 
-    // Init color functions
-    this.colorKey = initColorKey();
-    this.color = this.initColor();
-
     // Init the svg element
     this.svg = this.renderSvg(container, group);
     this.renderDays();
@@ -180,9 +193,7 @@ export default class ActivityCalendar {
       .attr('y', (stamp) => this.dayYPos(stamp.day))
       .attr('width', this.daySize)
       .attr('height', this.daySize)
-      .attr('fill', (stamp) =>
-        stamp.count !== 0 ? this.color(Math.min(stamp.count, 40)) : '#ededed',
-      )
+      .attr('data-level', (stamp) => getLevelFromContributions(stamp.count))
       .attr('title', (stamp) => formatTooltipText(stamp))
       .attr('class', 'user-contrib-cell has-tooltip')
       .attr('data-html', true)
@@ -246,50 +257,24 @@ export default class ActivityCalendar {
   }
 
   renderKey() {
-    const keyValues = [
-      __('No contributions'),
-      __('1-9 contributions'),
-      __('10-19 contributions'),
-      __('20-29 contributions'),
-      __('30+ contributions'),
-    ];
-    const keyColors = [
-      '#ededed',
-      this.colorKey(0),
-      this.colorKey(1),
-      this.colorKey(2),
-      this.colorKey(3),
-    ];
-
     this.svg
       .append('g')
       .attr('transform', `translate(18, ${this.daySizeWithSpace * 8 + 16})`)
       .selectAll('rect')
-      .data(keyColors)
+      .data(CONTRIB_LEGENDS)
       .enter()
       .append('rect')
       .attr('width', this.daySize)
       .attr('height', this.daySize)
-      .attr('x', (color, i) => this.daySizeWithSpace * i)
+      .attr('x', (_, i) => this.daySizeWithSpace * i)
       .attr('y', 0)
-      .attr('fill', (color) => color)
-      .attr('class', 'has-tooltip')
-      .attr('title', (color, i) => keyValues[i])
+      .attr('data-level', (_, i) => i)
+      .attr('class', 'user-contrib-cell has-tooltip contrib-legend')
+      .attr('title', (x) => x.title)
       .attr('data-container', 'body')
       .attr('data-html', true);
   }
 
-  initColor() {
-    const colorRange = [
-      '#ededed',
-      this.colorKey(0),
-      this.colorKey(1),
-      this.colorKey(2),
-      this.colorKey(3),
-    ];
-    return d3.scaleThreshold().domain([0, 10, 20, 30]).range(colorRange);
-  }
-
   clickDay(stamp) {
     if (this.currentSelectedDate !== stamp.date) {
       this.currentSelectedDate = stamp.date;