From 0ad8135c1feeefa23ec883e409fb65b8b52882a1 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Fri, 17 Mar 2023 21:08:46 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../artifacts/components/artifact_row.vue          |  24 ++-
 .../artifacts/components/artifacts_bulk_delete.vue | 182 +++++++++++++++++++++
 .../components/artifacts_table_row_details.vue     |   9 +
 .../artifacts/components/job_artifacts_table.vue   |  73 ++++++++-
 .../artifacts/components/job_checkbox.vue          |  52 ++++++
 app/assets/javascripts/artifacts/constants.js      |  39 +++++
 .../bulk_destroy_job_artifacts.mutation.graphql    |   7 +
 app/assets/javascripts/artifacts/index.js          |  10 +-
 .../components/editor/text_editor.vue              |  11 ++
 .../accordion_items/image_item.vue                 |  39 +++++
 .../components/job_assistant_drawer/constants.js   |   7 +-
 .../job_assistant_drawer/job_assistant_drawer.vue  |   3 +
 .../content_editor/components/content_editor.vue   |  37 ++++-
 .../components/toolbar_more_dropdown.vue           |  14 +-
 .../content_editor/services/content_editor.js      |   4 +-
 .../services/create_content_editor.js              |   6 +-
 .../services/gl_api_markdown_deserializer.js       |   5 +-
 .../javascripts/header_search/components/app.vue   |  60 ++++---
 .../header_search_autocomplete_items.vue           |  14 +-
 .../components/header_search_default_items.vue     |   6 +-
 .../components/header_search_scoped_items.vue      |   6 +-
 app/assets/javascripts/header_search/constants.js  |  44 -----
 .../javascripts/header_search/store/getters.js     |  10 +-
 .../javascripts/notes/components/comment_form.vue  | 118 ++++++-------
 .../components/list_page/image_list_row.vue        |   8 +-
 .../super_sidebar/components/context_switcher.vue  |  13 +-
 .../components/frequent_groups_list.vue            |  69 --------
 .../components/frequent_items_list.vue             |  63 ++-----
 .../components/frequent_projects_list.vue          |  69 --------
 .../super_sidebar/components/groups_list.vue       |  78 +++++++++
 .../super_sidebar/components/items_list.vue        |  40 +++++
 .../super_sidebar/components/projects_list.vue     |  79 +++++++++
 .../super_sidebar/components/search_results.vue    |  49 ++++++
 .../super_sidebar/components/user_menu.vue         |   2 +-
 .../components/markdown/markdown_editor.vue        |  26 ++-
 .../vue_shared/global_search/constants.js          |  73 +++++++++
 app/controllers/projects/artifacts_controller.rb   |   4 +
 .../projects/merge_requests_controller.rb          |   1 +
 app/helpers/artifacts_helper.rb                    |   1 +
 .../development/show_tags_on_commits_view.yml      |   2 +-
 .../img/view_branch_protections_v15_10.png         | Bin 0 -> 5103 bytes
 doc/user/project/repository/branches/index.md      | 140 ++++++++++------
 locale/gitlab.pot                                  |  50 +++++-
 .../features/issues/user_comments_on_issue_spec.rb |   2 +
 spec/features/issues/user_edits_issue_spec.rb      |  22 ++-
 .../user_comments_on_merge_request_spec.rb         |   2 +
 .../user_views_open_merge_request_spec.rb          |  12 ++
 spec/features/projects/pipeline_schedules_spec.rb  |   2 +-
 .../create_mock_source_editor_extension.js         |  12 ++
 .../artifacts/components/artifact_row_spec.js      |  35 +++-
 .../components/artifacts_bulk_delete_spec.js       |  96 +++++++++++
 .../components/artifacts_table_row_details_spec.js |  22 ++-
 .../components/job_artifacts_table_spec.js         | 126 ++++++++++++--
 .../artifacts/components/job_checkbox_spec.js      |  71 ++++++++
 .../components/editor/text_editor_spec.js          |  74 +++++----
 .../accordion_items/image_item_spec.js             |  39 +++++
 .../job_assistant_drawer_spec.js                   |  36 +++-
 .../components/content_editor_spec.js              |  27 ++-
 .../components/toolbar_more_dropdown_spec.js       |  15 +-
 .../services/create_content_editor_spec.js         |   2 +-
 .../services/gl_api_markdown_deserializer_spec.js  |  22 ++-
 spec/frontend/header_search/components/app_spec.js |  10 +-
 .../header_search_autocomplete_items_spec.js       |   7 +-
 .../components/header_search_scoped_items_spec.js  |   3 +-
 spec/frontend/header_search/mock_data.js           |  10 +-
 .../frontend/notes/components/comment_form_spec.js | 106 ++++++------
 .../components/list_page/image_list_row_spec.js    |  13 +-
 .../components/context_switcher_spec.js            |  36 ++--
 .../components/frequent_groups_list_spec.js        |  51 ------
 .../components/frequent_items_list_spec.js         |  55 +------
 .../components/frequent_projects_list_spec.js      |  51 ------
 .../super_sidebar/components/groups_list_spec.js   |  87 ++++++++++
 .../super_sidebar/components/items_list_spec.js    |  63 +++++++
 .../super_sidebar/components/projects_list_spec.js |  82 ++++++++++
 .../components/search_results_spec.js              |  57 +++++++
 .../components/markdown/markdown_editor_spec.js    |  81 +++++++--
 spec/helpers/artifacts_helper_spec.rb              |   1 +
 spec/support/helpers/content_editor_helpers.rb     |  58 +++++++
 .../features/content_editor_shared_examples.rb     | 115 ++++---------
 .../wiki/user_updates_wiki_page_shared_examples.rb |   1 +
 80 files changed, 2167 insertions(+), 884 deletions(-)
 create mode 100644 app/assets/javascripts/artifacts/components/artifacts_bulk_delete.vue
 create mode 100644 app/assets/javascripts/artifacts/components/job_checkbox.vue
 create mode 100644 app/assets/javascripts/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql
 create mode 100644 app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue
 delete mode 100644 app/assets/javascripts/super_sidebar/components/frequent_groups_list.vue
 delete mode 100644 app/assets/javascripts/super_sidebar/components/frequent_projects_list.vue
 create mode 100644 app/assets/javascripts/super_sidebar/components/groups_list.vue
 create mode 100644 app/assets/javascripts/super_sidebar/components/items_list.vue
 create mode 100644 app/assets/javascripts/super_sidebar/components/projects_list.vue
 create mode 100644 app/assets/javascripts/super_sidebar/components/search_results.vue
 create mode 100644 app/assets/javascripts/vue_shared/global_search/constants.js
 create mode 100644 doc/user/project/repository/branches/img/view_branch_protections_v15_10.png
 create mode 100644 spec/frontend/__helpers__/create_mock_source_editor_extension.js
 create mode 100644 spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js
 create mode 100644 spec/frontend/artifacts/components/job_checkbox_spec.js
 create mode 100644 spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js
 delete mode 100644 spec/frontend/super_sidebar/components/frequent_groups_list_spec.js
 delete mode 100644 spec/frontend/super_sidebar/components/frequent_projects_list_spec.js
 create mode 100644 spec/frontend/super_sidebar/components/groups_list_spec.js
 create mode 100644 spec/frontend/super_sidebar/components/items_list_spec.js
 create mode 100644 spec/frontend/super_sidebar/components/projects_list_spec.js
 create mode 100644 spec/frontend/super_sidebar/components/search_results_spec.js
 create mode 100644 spec/support/helpers/content_editor_helpers.rb

diff --git a/app/assets/javascripts/artifacts/components/artifact_row.vue b/app/assets/javascripts/artifacts/components/artifact_row.vue
index fffdfce60a7..f37c4c6f107 100644
--- a/app/assets/javascripts/artifacts/components/artifact_row.vue
+++ b/app/assets/javascripts/artifacts/components/artifact_row.vue
@@ -1,7 +1,8 @@
 <script>
-import { GlButtonGroup, GlButton, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlBadge, GlFriendlyWrap, GlFormCheckbox } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { I18N_EXPIRED, I18N_DOWNLOAD, I18N_DELETE } from '../constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { I18N_EXPIRED, I18N_DOWNLOAD, I18N_DELETE, BULK_DELETE_FEATURE_FLAG } from '../constants';
 
 export default {
   name: 'ArtifactRow',
@@ -10,13 +11,19 @@ export default {
     GlButton,
     GlBadge,
     GlFriendlyWrap,
+    GlFormCheckbox,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['canDestroyArtifacts'],
   props: {
     artifact: {
       type: Object,
       required: true,
     },
+    isSelected: {
+      type: Boolean,
+      required: true,
+    },
     isLastRow: {
       type: Boolean,
       required: true,
@@ -32,6 +39,16 @@ export default {
     artifactSize() {
       return numberToHumanSize(this.artifact.size);
     },
+    canBulkDestroyArtifacts() {
+      return this.glFeatures[BULK_DELETE_FEATURE_FLAG] && this.canDestroyArtifacts;
+    },
+  },
+  methods: {
+    handleInput(checked) {
+      if (checked === this.isSelected) return;
+
+      this.$emit('selectArtifact', this.artifact, checked);
+    },
   },
   i18n: {
     expired: I18N_EXPIRED,
@@ -46,6 +63,9 @@ export default {
     :class="{ 'gl-border-b-solid gl-border-b-1 gl-border-gray-100': !isLastRow }"
   >
     <div class="gl-display-inline-flex gl-align-items-center gl-w-full">
+      <span v-if="canBulkDestroyArtifacts" class="gl-pl-5">
+        <gl-form-checkbox :checked="isSelected" @input="handleInput" />
+      </span>
       <span
         class="gl-w-half gl-pl-8 gl-display-flex gl-align-items-center"
         data-testid="job-artifact-row-name"
diff --git a/app/assets/javascripts/artifacts/components/artifacts_bulk_delete.vue b/app/assets/javascripts/artifacts/components/artifacts_bulk_delete.vue
new file mode 100644
index 00000000000..cc08551fdb7
--- /dev/null
+++ b/app/assets/javascripts/artifacts/components/artifacts_bulk_delete.vue
@@ -0,0 +1,182 @@
+<script>
+import { GlButton, GlModal, GlSprintf } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import getJobArtifactsQuery from '../graphql/queries/get_job_artifacts.query.graphql';
+import bulkDestroyJobArtifactsMutation from '../graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql';
+import { removeArtifactFromStore } from '../graphql/cache_update';
+import {
+  I18N_BULK_DELETE_BANNER,
+  I18N_BULK_DELETE_CLEAR_SELECTION,
+  I18N_BULK_DELETE_DELETE_SELECTED,
+  I18N_BULK_DELETE_MODAL_TITLE,
+  I18N_BULK_DELETE_BODY,
+  I18N_BULK_DELETE_ACTION,
+  I18N_BULK_DELETE_PARTIAL_ERROR,
+  I18N_BULK_DELETE_ERROR,
+  I18N_MODAL_CANCEL,
+  BULK_DELETE_MODAL_ID,
+} from '../constants';
+
+export default {
+  name: 'ArtifactsBulkDelete',
+  components: {
+    GlButton,
+    GlModal,
+    GlSprintf,
+  },
+  inject: ['projectId'],
+  props: {
+    selectedArtifacts: {
+      type: Array,
+      required: true,
+    },
+    queryVariables: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isModalVisible: false,
+      isDeleting: false,
+    };
+  },
+  computed: {
+    checkedCount() {
+      return this.selectedArtifacts.length || 0;
+    },
+    modalActionPrimary() {
+      return {
+        text: I18N_BULK_DELETE_ACTION(this.checkedCount),
+        attributes: {
+          loading: this.isDeleting,
+          variant: 'danger',
+        },
+      };
+    },
+    modalActionCancel() {
+      return {
+        text: I18N_MODAL_CANCEL,
+        attributes: {
+          loading: this.isDeleting,
+        },
+      };
+    },
+  },
+  methods: {
+    async onConfirmDelete(e) {
+      // don't close modal until deletion is complete
+      if (e) {
+        e.preventDefault();
+      }
+      this.isDeleting = true;
+
+      try {
+        await this.$apollo.mutate({
+          mutation: bulkDestroyJobArtifactsMutation,
+          variables: {
+            projectId: convertToGraphQLId(TYPENAME_PROJECT, this.projectId),
+            ids: this.selectedArtifacts,
+          },
+          update: (store, { data }) => {
+            const { errors, destroyedCount, destroyedIds } = data.bulkDestroyJobArtifacts;
+            if (errors?.length) {
+              createAlert({
+                message: I18N_BULK_DELETE_PARTIAL_ERROR,
+                captureError: true,
+                error: new Error(errors.join(' ')),
+              });
+            }
+            if (destroyedIds?.length) {
+              this.$emit('deleted', destroyedCount);
+
+              // Remove deleted artifacts from the cache
+              destroyedIds.forEach((id) => {
+                removeArtifactFromStore(store, id, getJobArtifactsQuery, this.queryVariables);
+              });
+              store.gc();
+
+              this.$emit('clearSelectedArtifacts');
+            }
+          },
+        });
+      } catch (error) {
+        this.onError(error);
+      } finally {
+        this.isDeleting = false;
+        this.isModalVisible = false;
+      }
+    },
+    onError(error) {
+      createAlert({
+        message: I18N_BULK_DELETE_ERROR,
+        captureError: true,
+        error,
+      });
+    },
+    handleClearSelection() {
+      this.$emit('clearSelectedArtifacts');
+    },
+    handleModalShow() {
+      this.isModalVisible = true;
+    },
+    handleModalHide() {
+      this.isModalVisible = false;
+    },
+  },
+  i18n: {
+    banner: I18N_BULK_DELETE_BANNER,
+    clearSelection: I18N_BULK_DELETE_CLEAR_SELECTION,
+    deleteSelected: I18N_BULK_DELETE_DELETE_SELECTED,
+    modalTitle: I18N_BULK_DELETE_MODAL_TITLE,
+    modalBody: I18N_BULK_DELETE_BODY,
+  },
+  BULK_DELETE_MODAL_ID,
+};
+</script>
+<template>
+  <div class="gl-my-4 gl-p-4 gl-border-1 gl-border-solid gl-border-gray-100">
+    <div class="gl-display-flex gl-align-items-center">
+      <div>
+        <gl-sprintf :message="$options.i18n.banner(checkedCount)">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </div>
+      <div class="gl-ml-auto">
+        <gl-button
+          variant="default"
+          data-testid="bulk-delete-clear-button"
+          @click="handleClearSelection"
+        >
+          {{ $options.i18n.clearSelection }}
+        </gl-button>
+        <gl-button
+          variant="danger"
+          data-testid="bulk-delete-delete-button"
+          @click="handleModalShow"
+        >
+          {{ $options.i18n.deleteSelected }}
+        </gl-button>
+      </div>
+    </div>
+    <gl-modal
+      size="sm"
+      :modal-id="$options.BULK_DELETE_MODAL_ID"
+      :visible="isModalVisible"
+      :title="$options.i18n.modalTitle(checkedCount)"
+      :action-primary="modalActionPrimary"
+      :action-cancel="modalActionCancel"
+      @hide="handleModalHide"
+      @primary="onConfirmDelete"
+    >
+      <gl-sprintf
+        data-testid="bulk-delete-modal-content"
+        :message="$options.i18n.modalBody(checkedCount)"
+      />
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue
index b9aae4bf4e5..7d675251ffd 100644
--- a/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue
+++ b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue
@@ -25,6 +25,10 @@ export default {
       type: Object,
       required: true,
     },
+    selectedArtifacts: {
+      type: Array,
+      required: true,
+    },
     queryVariables: {
       type: Object,
       required: true,
@@ -52,6 +56,9 @@ export default {
     isLastRow(index) {
       return index === this.artifacts.nodes.length - 1;
     },
+    isSelected(item) {
+      return this.selectedArtifacts.includes(item.id);
+    },
     showModal(item) {
       this.deletingArtifactId = item.id;
       this.deletingArtifactName = item.name;
@@ -98,7 +105,9 @@ export default {
         <dynamic-scroller-item :item="item" :active="active" :class="{ active }">
           <artifact-row
             :artifact="item"
+            :is-selected="isSelected(item)"
             :is-last-row="isLastRow(index)"
+            v-on="$listeners"
             @delete="showModal(item)"
           />
         </dynamic-scroller-item>
diff --git a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
index 1b7782c6860..ba4026190a2 100644
--- a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue
@@ -8,11 +8,13 @@ import {
   GlBadge,
   GlIcon,
   GlPagination,
+  GlFormCheckbox,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getJobArtifactsQuery from '../graphql/queries/get_job_artifacts.query.graphql';
 import { totalArtifactsSizeForJob, mapArchivesToJobNodes, mapBooleansToJobNodes } from '../utils';
 import {
@@ -33,7 +35,11 @@ import {
   INITIAL_NEXT_PAGE_CURSOR,
   JOBS_PER_PAGE,
   INITIAL_LAST_PAGE_SIZE,
+  BULK_DELETE_FEATURE_FLAG,
+  I18N_BULK_DELETE_CONFIRMATION_TOAST,
 } from '../constants';
+import JobCheckbox from './job_checkbox.vue';
+import ArtifactsBulkDelete from './artifacts_bulk_delete.vue';
 import ArtifactsTableRowDetails from './artifacts_table_row_details.vue';
 import FeedbackBanner from './feedback_banner.vue';
 
@@ -56,11 +62,15 @@ export default {
     GlBadge,
     GlIcon,
     GlPagination,
+    GlFormCheckbox,
     CiIcon,
     TimeAgo,
+    JobCheckbox,
+    ArtifactsBulkDelete,
     ArtifactsTableRowDetails,
     FeedbackBanner,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['projectPath', 'canDestroyArtifacts'],
   apollo: {
     jobArtifacts: {
@@ -94,6 +104,7 @@ export default {
       jobArtifacts: [],
       pageInfo: {},
       expandedJobs: [],
+      selectedArtifacts: [],
       pagination: INITIAL_PAGINATION_STATE,
     };
   },
@@ -118,6 +129,21 @@ export default {
     nextPage() {
       return Number(this.pageInfo.hasNextPage);
     },
+    fields() {
+      return [
+        this.canBulkDestroyArtifacts && {
+          key: 'checkbox',
+          label: '',
+        },
+        ...this.$options.fields,
+      ];
+    },
+    anyArtifactsSelected() {
+      return Boolean(this.selectedArtifacts.length);
+    },
+    canBulkDestroyArtifacts() {
+      return this.glFeatures[BULK_DELETE_FEATURE_FLAG] && this.canDestroyArtifacts;
+    },
   },
   methods: {
     refetchArtifacts() {
@@ -158,6 +184,19 @@ export default {
         this.expandedJobs.splice(this.expandedJobs.indexOf(id), 1);
       }
     },
+    selectArtifact(artifactNode, checked) {
+      if (checked) {
+        this.selectedArtifacts.push(artifactNode.id);
+      } else {
+        this.selectedArtifacts.splice(this.selectedArtifacts.indexOf(artifactNode.id), 1);
+      }
+    },
+    clearSelectedArtifacts() {
+      this.selectedArtifacts = [];
+    },
+    showDeletedToast(deletedCount) {
+      this.$toast.show(I18N_BULK_DELETE_CONFIRMATION_TOAST(deletedCount));
+    },
     downloadPath(job) {
       return job.archive?.downloadPath;
     },
@@ -217,9 +256,16 @@ export default {
 <template>
   <div>
     <feedback-banner />
+    <artifacts-bulk-delete
+      v-if="canBulkDestroyArtifacts && anyArtifactsSelected"
+      :selected-artifacts="selectedArtifacts"
+      :query-variables="queryVariables"
+      @clearSelectedArtifacts="clearSelectedArtifacts"
+      @deleted="showDeletedToast"
+    />
     <gl-table
       :items="jobArtifacts"
-      :fields="$options.fields"
+      :fields="fields"
       :busy="$apollo.queries.jobArtifacts.loading"
       stacked="sm"
       details-td-class="gl-bg-gray-10! gl-p-0! gl-overflow-auto"
@@ -227,6 +273,29 @@ export default {
       <template #table-busy>
         <gl-loading-icon size="lg" />
       </template>
+      <template v-if="canBulkDestroyArtifacts" #head(checkbox)>
+        <gl-form-checkbox
+          :disabled="!anyArtifactsSelected"
+          :checked="anyArtifactsSelected"
+          :indeterminate="anyArtifactsSelected"
+          @change="clearSelectedArtifacts"
+        />
+      </template>
+      <template
+        v-if="canBulkDestroyArtifacts"
+        #cell(checkbox)="{ item: { hasArtifacts, artifacts } }"
+      >
+        <job-checkbox
+          :has-artifacts="hasArtifacts"
+          :selected-artifacts="
+            artifacts.nodes.filter((node) => selectedArtifacts.includes(node.id))
+          "
+          :unselected-artifacts="
+            artifacts.nodes.filter((node) => !selectedArtifacts.includes(node.id))
+          "
+          @selectArtifact="selectArtifact"
+        />
+      </template>
       <template
         #cell(artifacts)="{ item: { id, artifacts, hasArtifacts }, toggleDetails, detailsShowing }"
       >
@@ -323,8 +392,10 @@ export default {
       <template #row-details="{ item: { artifacts } }">
         <artifacts-table-row-details
           :artifacts="artifacts"
+          :selected-artifacts="selectedArtifacts"
           :query-variables="queryVariables"
           @refetch="refetchArtifacts"
+          @selectArtifact="selectArtifact"
         />
       </template>
     </gl-table>
diff --git a/app/assets/javascripts/artifacts/components/job_checkbox.vue b/app/assets/javascripts/artifacts/components/job_checkbox.vue
new file mode 100644
index 00000000000..ce49b3f8678
--- /dev/null
+++ b/app/assets/javascripts/artifacts/components/job_checkbox.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlFormCheckbox } from '@gitlab/ui';
+
+export default {
+  name: 'JobCheckbox',
+  components: {
+    GlFormCheckbox,
+  },
+  props: {
+    hasArtifacts: {
+      type: Boolean,
+      required: true,
+    },
+    selectedArtifacts: {
+      type: Array,
+      required: true,
+    },
+    unselectedArtifacts: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    disabled() {
+      return !this.hasArtifacts;
+    },
+    checked() {
+      return this.hasArtifacts && this.unselectedArtifacts.length === 0;
+    },
+    indeterminate() {
+      return this.selectedArtifacts.length > 0 && this.unselectedArtifacts.length > 0;
+    },
+  },
+  methods: {
+    handleInput(checked) {
+      if (checked) {
+        this.unselectedArtifacts.forEach((node) => this.$emit('selectArtifact', node, true));
+      } else {
+        this.selectedArtifacts.forEach((node) => this.$emit('selectArtifact', node, false));
+      }
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-checkbox
+    :disabled="disabled"
+    :checked="checked"
+    :indeterminate="indeterminate"
+    @input="handleInput"
+  />
+</template>
diff --git a/app/assets/javascripts/artifacts/constants.js b/app/assets/javascripts/artifacts/constants.js
index da562b03bf8..4ac20d963d1 100644
--- a/app/assets/javascripts/artifacts/constants.js
+++ b/app/assets/javascripts/artifacts/constants.js
@@ -54,6 +54,45 @@ export const I18N_FEEDBACK_BANNER_BODY = s__(
 export const I18N_FEEDBACK_BANNER_BUTTON = s__('Artifacts|Take a quick survey');
 export const FEEDBACK_URL = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_cI9rAUI20Vo2St8';
 
+export const BULK_DELETE_FEATURE_FLAG = 'ciJobArtifactBulkDestroy';
+export const I18N_BULK_DELETE_BANNER = (count) =>
+  sprintf(
+    n__(
+      'Artifacts|%{strongStart}%{count}%{strongEnd} artifact selected',
+      'Artifacts|%{strongStart}%{count}%{strongEnd} artifacts selected',
+      count,
+    ),
+    {
+      count,
+    },
+  );
+export const I18N_BULK_DELETE_CLEAR_SELECTION = s__('Artifacts|Clear selection');
+export const I18N_BULK_DELETE_DELETE_SELECTED = s__('Artifacts|Delete selected');
+
+export const BULK_DELETE_MODAL_ID = 'artifacts-bulk-delete-modal';
+export const I18N_BULK_DELETE_MODAL_TITLE = (count) =>
+  n__('Artifacts|Delete %d artifact?', 'Artifacts|Delete %d artifacts?', count);
+export const I18N_BULK_DELETE_BODY = (count) =>
+  sprintf(
+    n__(
+      'Artifacts|The selected artifact will be permanently deleted. Any reports generated from these artifacts will be empty.',
+      'Artifacts|The selected artifacts will be permanently deleted. Any reports generated from these artifacts will be empty.',
+      count,
+    ),
+    { count },
+  );
+export const I18N_BULK_DELETE_ACTION = (count) =>
+  n__('Artifacts|Delete %d artifact', 'Artifacts|Delete %d artifacts', count);
+
+export const I18N_BULK_DELETE_PARTIAL_ERROR = s__(
+  'Artifacts|An error occurred while deleting. Some artifacts may not have been deleted.',
+);
+export const I18N_BULK_DELETE_ERROR = s__(
+  'Artifacts|Something went wrong while deleting. Please refresh the page to try again.',
+);
+export const I18N_BULK_DELETE_CONFIRMATION_TOAST = (count) =>
+  n__('Artifacts|%d selected artifact deleted', 'Artifacts|%d selected artifacts deleted', count);
+
 export const INITIAL_CURRENT_PAGE = 1;
 export const INITIAL_PREVIOUS_PAGE_CURSOR = '';
 export const INITIAL_NEXT_PAGE_CURSOR = '';
diff --git a/app/assets/javascripts/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql b/app/assets/javascripts/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql
new file mode 100644
index 00000000000..421b9258ca0
--- /dev/null
+++ b/app/assets/javascripts/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql
@@ -0,0 +1,7 @@
+mutation bulkDestroyJobArtifacts($projectId: ProjectID!, $ids: [CiJobArtifactID!]!) {
+  bulkDestroyJobArtifacts(input: { projectId: $projectId, ids: $ids }) {
+    destroyedCount
+    destroyedIds
+    errors
+  }
+}
diff --git a/app/assets/javascripts/artifacts/index.js b/app/assets/javascripts/artifacts/index.js
index a62b3daa961..6e795fd9bd7 100644
--- a/app/assets/javascripts/artifacts/index.js
+++ b/app/assets/javascripts/artifacts/index.js
@@ -1,3 +1,4 @@
+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
@@ -5,6 +6,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import App from './components/app.vue';
 
 Vue.use(VueApollo);
+Vue.use(GlToast);
 
 const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
@@ -17,13 +19,19 @@ export const initArtifactsTable = () => {
     return false;
   }
 
-  const { projectPath, canDestroyArtifacts, artifactsManagementFeedbackImagePath } = el.dataset;
+  const {
+    projectPath,
+    projectId,
+    canDestroyArtifacts,
+    artifactsManagementFeedbackImagePath,
+  } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
     provide: {
       projectPath,
+      projectId,
       canDestroyArtifacts: parseBoolean(canDestroyArtifacts),
       artifactsManagementFeedbackImagePath,
     },
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/ci/pipeline_editor/components/editor/text_editor.vue
index 891c40482d3..1192f0bf418 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/editor/text_editor.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/editor/text_editor.vue
@@ -2,6 +2,7 @@
 import { EDITOR_READY_EVENT } from '~/editor/constants';
 import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
+import eventHub, { SCROLL_EDITOR_TO_BOTTOM } from '~/ci/pipeline_editor/event_hub';
 import { SOURCE_EDITOR_DEBOUNCE } from '../../constants';
 
 export default {
@@ -16,6 +17,12 @@ export default {
   },
   inject: ['ciConfigPath'],
   inheritAttrs: false,
+  created() {
+    eventHub.$on(SCROLL_EDITOR_TO_BOTTOM, this.scrollEditorToBottom);
+  },
+  beforeDestroy() {
+    eventHub.$off(SCROLL_EDITOR_TO_BOTTOM, this.scrollEditorToBottom);
+  },
   methods: {
     onCiConfigUpdate(content) {
       this.$emit('updateCiConfig', content);
@@ -24,6 +31,10 @@ export default {
       instance.use({ definition: CiSchemaExtension });
       instance.registerCiSchema();
     },
+    scrollEditorToBottom() {
+      const editor = this.$refs.editor.getEditor();
+      editor.setScrollTop(editor.getScrollHeight());
+    },
   },
   readyEvent: EDITOR_READY_EVENT,
 };
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue
new file mode 100644
index 00000000000..c2ae7d7be49
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlFormGroup, GlAccordionItem, GlFormInput } from '@gitlab/ui';
+import { i18n } from '../constants';
+
+export default {
+  i18n,
+  components: {
+    GlAccordionItem,
+    GlFormInput,
+    GlFormGroup,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-accordion-item :title="$options.i18n.IMAGE">
+    <div class="gl-display-flex">
+      <gl-form-group class="gl-flex-grow-1 gl-mr-3" :label="$options.i18n.IMAGE_NAME">
+        <gl-form-input
+          :value="job.image.name"
+          data-testid="image-name-input"
+          @input="$emit('update-job', 'image.name', $event)"
+        />
+      </gl-form-group>
+      <gl-form-group class="gl-flex-grow-1" :label="$options.i18n.IMAGE_ENTRYPOINT">
+        <gl-form-input
+          :value="job.image.entrypoint.join(' ')"
+          data-testid="image-entrypoint-input"
+          @input="$emit('update-job', 'image.entrypoint', $event.split(' '))"
+        />
+      </gl-form-group>
+    </div>
+  </gl-accordion-item>
+</template>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js
index 05a616596e2..994a6e719fe 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js
+++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js
@@ -9,12 +9,12 @@ export const JOB_TEMPLATE = {
   tags: [],
   image: {
     name: '',
-    entrypoint: '',
+    entrypoint: [''],
   },
   services: [
     {
       name: '',
-      entrypoint: '',
+      entrypoint: [''],
     },
   ],
   artifacts: {
@@ -34,5 +34,8 @@ export const i18n = {
   JOB_SETUP: s__('JobAssistant|Job Setup'),
   STAGE: s__('JobAssistant|Stage (optional)'),
   TAGS: s__('JobAssistant|Tags (optional)'),
+  IMAGE: s__('JobAssistant|Image'),
+  IMAGE_NAME: s__('JobAssistant|Image name (optional)'),
+  IMAGE_ENTRYPOINT: s__('JobAssistant|Image entrypoint (optional)'),
   THIS_FIELD_IS_REQUIRED: __('This field is required'),
 };
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue
index d9df32ad84e..9f68b97b329 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue
@@ -10,6 +10,7 @@ import getAllRunners from '~/ci/runner/graphql/list/all_runners.query.graphql';
 import { DRAWER_CONTAINER_CLASS, JOB_TEMPLATE, i18n } from './constants';
 import { removeEmptyObj, trimFields } from './utils';
 import JobSetupItem from './accordion_items/job_setup_item.vue';
+import ImageItem from './accordion_items/image_item.vue';
 
 export default {
   i18n,
@@ -18,6 +19,7 @@ export default {
     GlAccordion,
     GlButton,
     JobSetupItem,
+    ImageItem,
   },
   props: {
     isVisible: {
@@ -131,6 +133,7 @@ export default {
         :is-script-valid="isScriptValid"
         @update-job="updateJob"
       />
+      <image-item :job="job" @update-job="updateJob" />
     </gl-accordion>
     <template #footer>
       <div class="gl-display-flex gl-justify-content-end">
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index 09a5bab8d37..9e08a257abf 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -56,6 +56,11 @@ export default {
       required: false,
       default: '',
     },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
     autofocus: {
       type: [String, Boolean],
       required: false,
@@ -67,6 +72,16 @@ export default {
       required: false,
       default: '',
     },
+    drawioEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -81,9 +96,20 @@ export default {
         this.setSerializedContent(markdown);
       }
     },
+    editable(value) {
+      this.contentEditor.setEditable(value);
+    },
   },
   created() {
-    const { renderMarkdown, uploadsPath, extensions, serializerConfig, autofocus } = this;
+    const {
+      renderMarkdown,
+      uploadsPath,
+      extensions,
+      serializerConfig,
+      autofocus,
+      drawioEnabled,
+      editable,
+    } = this;
 
     // This is a non-reactive attribute intentionally since this is a complex object.
     this.contentEditor = createContentEditor({
@@ -91,8 +117,10 @@ export default {
       uploadsPath,
       extensions,
       serializerConfig,
+      drawioEnabled,
       tiptapOptions: {
         autofocus,
+        editable,
       },
     });
   },
@@ -109,10 +137,10 @@ export default {
 
       try {
         await this.contentEditor.setSerializedContent(markdown);
-        this.contentEditor.setEditable(true);
         this.notifyLoadingSuccess();
         this.latestMarkdown = markdown;
       } catch {
+        this.contentEditor.setEditable(false);
         this.contentEditor.eventHub.$emit(ALERT_EVENT, {
           message: __(
             'An error occurred while trying to render the content editor. Please try again.',
@@ -120,10 +148,10 @@ export default {
           variant: VARIANT_DANGER,
           actionLabel: __('Retry'),
           action: () => {
+            this.contentEditor.setEditable(true);
             this.setSerializedContent(markdown);
           },
         });
-        this.contentEditor.setEditable(false);
         this.notifyLoadingError();
       }
     },
@@ -189,6 +217,9 @@ export default {
           <code-block-bubble-menu />
           <link-bubble-menu />
           <media-bubble-menu />
+          <div v-if="placeholder && !markdown && !focused" class="gl-absolute gl-text-gray-400">
+            {{ placeholder }}
+          </div>
           <tiptap-editor-content
             class="md"
             data-testid="content_editor_editablebox"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue b/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue
index 7edc99d0e6b..99ba8c51948 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue
@@ -9,7 +9,7 @@ export default {
     GlDisclosureDropdown,
     GlTooltip,
   },
-  inject: ['tiptapEditor'],
+  inject: ['tiptapEditor', 'contentEditor'],
   data() {
     return {
       toggleId: uniqueId('dropdown-toggle-btn-'),
@@ -53,10 +53,14 @@ export default {
           text: __('PlantUML diagram'),
           action: () => this.insert('diagram', { language: 'plantuml' }),
         },
-        {
-          text: __('Create or edit diagram'),
-          action: () => this.execute('createOrEditDiagram', 'drawioDiagram'),
-        },
+        ...(this.contentEditor.drawioEnabled
+          ? [
+              {
+                text: __('Create or edit diagram'),
+                action: () => this.execute('createOrEditDiagram', 'drawioDiagram'),
+              },
+            ]
+          : []),
         {
           text: __('Table of contents'),
           action: () => this.execute('insertTableOfContents', 'tableOfContents'),
diff --git a/app/assets/javascripts/content_editor/services/content_editor.js b/app/assets/javascripts/content_editor/services/content_editor.js
index 514ab9699bc..a988e1df2a6 100644
--- a/app/assets/javascripts/content_editor/services/content_editor.js
+++ b/app/assets/javascripts/content_editor/services/content_editor.js
@@ -1,12 +1,14 @@
 /* eslint-disable no-underscore-dangle */
 export class ContentEditor {
-  constructor({ tiptapEditor, serializer, deserializer, assetResolver, eventHub }) {
+  constructor({ tiptapEditor, serializer, deserializer, assetResolver, eventHub, drawioEnabled }) {
     this._tiptapEditor = tiptapEditor;
     this._serializer = serializer;
     this._deserializer = deserializer;
     this._eventHub = eventHub;
     this._assetResolver = assetResolver;
     this._pristineDoc = null;
+
+    this.drawioEnabled = drawioEnabled;
   }
 
   get tiptapEditor() {
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index b9740894b2c..9d536793287 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -87,6 +87,7 @@ export const createContentEditor = ({
   extensions = [],
   serializerConfig = { marks: {}, nodes: {} },
   tiptapOptions,
+  drawioEnabled = false,
 } = {}) => {
   if (!isFunction(renderMarkdown)) {
     throw new Error(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
@@ -110,7 +111,6 @@ export const createContentEditor = ({
     DetailsContent,
     Document,
     Diagram,
-    DrawioDiagram.configure({ uploadsPath, renderMarkdown }),
     Dropcursor,
     Emoji,
     Figure,
@@ -159,6 +159,9 @@ export const createContentEditor = ({
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];
+
+  if (drawioEnabled) allExtensions.push(DrawioDiagram.configure({ uploadsPath, renderMarkdown }));
+
   const trackedExtensions = allExtensions.map(trackInputRulesAndShortcuts);
   const tiptapEditor = createTiptapEditor({ extensions: trackedExtensions, ...tiptapOptions });
   const serializer = createMarkdownSerializer({ serializerConfig });
@@ -175,5 +178,6 @@ export const createContentEditor = ({
     eventHub,
     deserializer,
     assetResolver,
+    drawioEnabled,
   });
 };
diff --git a/app/assets/javascripts/content_editor/services/gl_api_markdown_deserializer.js b/app/assets/javascripts/content_editor/services/gl_api_markdown_deserializer.js
index e65644d2c5c..91f8aaf6324 100644
--- a/app/assets/javascripts/content_editor/services/gl_api_markdown_deserializer.js
+++ b/app/assets/javascripts/content_editor/services/gl_api_markdown_deserializer.js
@@ -18,10 +18,7 @@ export default ({ render }) => {
    */
   return {
     deserialize: async ({ schema, markdown }) => {
-      const html = await render(markdown);
-
-      if (!html) return {};
-
+      const html = markdown ? await render(markdown) : '<p></p>';
       const parser = new DOMParser();
       const { body } = parser.parseFromString(`<body>${html}</body>`, 'text/html');
 
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
index ace0d77c431..c0a06706fc6 100644
--- a/app/assets/javascripts/header_search/components/app.vue
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -12,9 +12,19 @@ import { debounce } from 'lodash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { s__, sprintf } from '~/locale';
+import { sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
+import {
+  SEARCH_GITLAB,
+  SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN,
+  SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN,
+  SEARCH_DESCRIBED_BY_DEFAULT,
+  SEARCH_DESCRIBED_BY_UPDATED,
+  SEARCH_RESULTS_LOADING,
+  SEARCH_RESULTS_SCOPE,
+  KBD_HELP,
+} from '~/vue_shared/global_search/constants';
 import {
   FIRST_DROPDOWN_INDEX,
   SEARCH_BOX_INDEX,
@@ -34,26 +44,14 @@ import HeaderSearchScopedItems from './header_search_scoped_items.vue';
 export default {
   name: 'HeaderSearchApp',
   i18n: {
-    searchGitlab: s__('GlobalSearch|Search GitLab'),
-    searchInputDescribeByNoDropdown: s__(
-      'GlobalSearch|Type and press the enter key to submit search.',
-    ),
-    searchInputDescribeByWithDropdown: s__(
-      'GlobalSearch|Type for new suggestions to appear below.',
-    ),
-    searchDescribedByDefault: s__(
-      'GlobalSearch|%{count} default results provided. Use the up and down arrow keys to navigate search results list.',
-    ),
-    searchDescribedByUpdated: s__(
-      'GlobalSearch|Results updated. %{count} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.',
-    ),
-    searchResultsLoading: s__('GlobalSearch|Search results are loading'),
-    searchResultsScope: s__('GlobalSearch|in %{scope}'),
-    kbdHelp: sprintf(
-      s__('GlobalSearch|Use the shortcut key %{kbdOpen}/%{kbdClose} to start a search'),
-      { kbdOpen: '<kbd>', kbdClose: '</kbd>' },
-      false,
-    ),
+    SEARCH_GITLAB,
+    SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN,
+    SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN,
+    SEARCH_DESCRIBED_BY_DEFAULT,
+    SEARCH_DESCRIBED_BY_UPDATED,
+    SEARCH_RESULTS_LOADING,
+    SEARCH_RESULTS_SCOPE,
+    KBD_HELP,
   },
   directives: { Outside, GlTooltip: GlTooltipDirective, GlResizeObserverDirective },
   components: {
@@ -113,9 +111,9 @@ export default {
 
     searchInputDescribeBy() {
       if (this.isLoggedIn) {
-        return this.$options.i18n.searchInputDescribeByWithDropdown;
+        return this.$options.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN;
       }
-      return this.$options.i18n.searchInputDescribeByNoDropdown;
+      return this.$options.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN;
     },
     dropdownResultsDescription() {
       if (!this.showSearchDropdown) {
@@ -123,14 +121,14 @@ export default {
       }
 
       if (this.showDefaultItems) {
-        return sprintf(this.$options.i18n.searchDescribedByDefault, {
+        return sprintf(this.$options.i18n.SEARCH_DESCRIBED_BY_DEFAULT, {
           count: this.searchOptions.length,
         });
       }
 
       return this.loading
-        ? this.$options.i18n.searchResultsLoading
-        : sprintf(this.$options.i18n.searchDescribedByUpdated, {
+        ? this.$options.i18n.SEARCH_RESULTS_LOADING
+        : sprintf(this.$options.i18n.SEARCH_DESCRIBED_BY_UPDATED, {
             count: this.searchOptions.length,
           });
     },
@@ -154,7 +152,7 @@ export default {
       return this.searchBarItem?.icon;
     },
     scopeTokenTitle() {
-      return sprintf(this.$options.i18n.searchResultsScope, {
+      return sprintf(this.$options.i18n.SEARCH_RESULTS_SCOPE, {
         scope: this.infieldHelpContent,
       });
     },
@@ -230,7 +228,7 @@ export default {
   <form
     v-outside="closeDropdown"
     role="search"
-    :aria-label="$options.i18n.searchGitlab"
+    :aria-label="$options.i18n.SEARCH_GITLAB"
     class="header-search gl-relative gl-rounded-base gl-w-full"
     :class="searchBarClasses"
     data-testid="header-search-form"
@@ -243,7 +241,7 @@ export default {
       class="gl-z-index-1"
       data-qa-selector="search_term_field"
       autocomplete="off"
-      :placeholder="$options.i18n.searchGitlab"
+      :placeholder="$options.i18n.SEARCH_GITLAB"
       :aria-activedescendant="currentFocusedId"
       :aria-describedby="$options.SEARCH_INPUT_DESCRIPTION"
       @focus="openDropdown"
@@ -267,7 +265,7 @@ export default {
         :size="16"
       />{{
         getTruncatedScope(
-          sprintf($options.i18n.searchResultsScope, {
+          sprintf($options.i18n.SEARCH_RESULTS_SCOPE, {
             scope: infieldHelpContent,
           }),
         )
@@ -277,7 +275,7 @@ export default {
       v-show="!isFocused"
       v-gl-tooltip.bottom.hover.html
       class="gl-absolute gl-right-3 gl-top-0 gl-z-index-1 keyboard-shortcut-helper"
-      :title="$options.i18n.kbdHelp"
+      :title="$options.i18n.KBD_HELP"
       >/</kbd
     >
     <span :id="$options.SEARCH_INPUT_DESCRIPTION" role="region" class="gl-sr-only">{{
diff --git a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
index c85fb4f4158..1838214def6 100644
--- a/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue
@@ -9,27 +9,23 @@ import {
 } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { s__ } from '~/locale';
 import highlight from '~/lib/utils/highlight';
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
 import { truncateNamespace } from '~/lib/utils/text_utility';
-
 import {
   GROUPS_CATEGORY,
   PROJECTS_CATEGORY,
   MERGE_REQUEST_CATEGORY,
   ISSUES_CATEGORY,
   RECENT_EPICS_CATEGORY,
-  LARGE_AVATAR_PX,
-  SMALL_AVATAR_PX,
-} from '../constants';
+  AUTOCOMPLETE_ERROR_MESSAGE,
+} from '~/vue_shared/global_search/constants';
+import { LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
 
 export default {
   name: 'HeaderSearchAutocompleteItems',
   i18n: {
-    autocompleteErrorMessage: s__(
-      'GlobalSearch|There was an error fetching search autocomplete suggestions.',
-    ),
+    AUTOCOMPLETE_ERROR_MESSAGE,
   },
   components: {
     GlDropdownItem,
@@ -165,7 +161,7 @@ export default {
       :dismissible="false"
       variant="danger"
     >
-      {{ $options.i18n.autocompleteErrorMessage }}
+      {{ $options.i18n.AUTOCOMPLETE_ERROR_MESSAGE }}
     </gl-alert>
   </div>
 </template>
diff --git a/app/assets/javascripts/header_search/components/header_search_default_items.vue b/app/assets/javascripts/header_search/components/header_search_default_items.vue
index 04deaba7b0f..f0d398297e9 100644
--- a/app/assets/javascripts/header_search/components/header_search_default_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_default_items.vue
@@ -1,12 +1,12 @@
 <script>
 import { GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { __ } from '~/locale';
+import { ALL_GITLAB } from '~/vue_shared/global_search/constants';
 
 export default {
   name: 'HeaderSearchDefaultItems',
   i18n: {
-    allGitLab: __('All GitLab'),
+    ALL_GITLAB,
   },
   components: {
     GlDropdownSectionHeader,
@@ -26,7 +26,7 @@ export default {
       return (
         this.searchContext?.project?.name ||
         this.searchContext?.group?.name ||
-        this.$options.i18n.allGitLab
+        this.$options.i18n.ALL_GITLAB
       );
     },
   },
diff --git a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
index f5be1bcb786..1ef88492b23 100644
--- a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
+++ b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
@@ -3,10 +3,14 @@ import { GlDropdownItem, GlIcon, GlToken } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { s__, sprintf } from '~/locale';
 import { truncate } from '~/lib/utils/text_utility';
+import { SCOPED_SEARCH_ITEM_ARIA_LABEL } from '~/vue_shared/global_search/constants';
 import { SCOPE_TOKEN_MAX_LENGTH } from '../constants';
 
 export default {
   name: 'HeaderSearchScopedItems',
+  i18n: {
+    SCOPED_SEARCH_ITEM_ARIA_LABEL,
+  },
   components: {
     GlDropdownItem,
     GlIcon,
@@ -28,7 +32,7 @@ export default {
       return this.currentFocusedOption?.html_id === option.html_id;
     },
     ariaLabel(option) {
-      return sprintf(s__('GlobalSearch| %{search} %{description} %{scope}'), {
+      return sprintf(this.$options.i18n.SCOPED_SEARCH_ITEM_ARIA_LABEL, {
         search: this.search,
         description: option.description || option.icon,
         scope: option.scope || '',
diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js
index 76fbf664913..b9bb4e573fd 100644
--- a/app/assets/javascripts/header_search/constants.js
+++ b/app/assets/javascripts/header_search/constants.js
@@ -1,41 +1,9 @@
-import { s__ } from '~/locale';
-
-export const MSG_ISSUES_ASSIGNED_TO_ME = s__('GlobalSearch|Issues assigned to me');
-
-export const MSG_ISSUES_IVE_CREATED = s__("GlobalSearch|Issues I've created");
-
-export const MSG_MR_ASSIGNED_TO_ME = s__('GlobalSearch|Merge requests assigned to me');
-
-export const MSG_MR_IM_REVIEWER = s__("GlobalSearch|Merge requests that I'm a reviewer");
-
-export const MSG_MR_IVE_CREATED = s__("GlobalSearch|Merge requests I've created");
-
-export const MSG_IN_ALL_GITLAB = s__('GlobalSearch|all GitLab');
-
 export const ICON_PROJECT = 'project';
 
 export const ICON_GROUP = 'group';
 
 export const ICON_SUBGROUP = 'subgroup';
 
-export const GROUPS_CATEGORY = s__('GlobalSearch|Groups');
-
-export const PROJECTS_CATEGORY = s__('GlobalSearch|Projects');
-
-export const USERS_CATEGORY = s__('GlobalSearch|Users');
-
-export const ISSUES_CATEGORY = s__('GlobalSearch|Recent issues');
-
-export const MERGE_REQUEST_CATEGORY = s__('GlobalSearch|Recent merge requests');
-
-export const RECENT_EPICS_CATEGORY = s__('GlobalSearch|Recent epics');
-
-export const IN_THIS_PROJECT_CATEGORY = s__('GlobalSearch|In this project');
-
-export const SETTINGS_CATEGORY = s__('GlobalSearch|Settings');
-
-export const HELP_CATEGORY = s__('GlobalSearch|Help');
-
 export const LARGE_AVATAR_PX = 32;
 
 export const SMALL_AVATAR_PX = 16;
@@ -60,18 +28,6 @@ export const IS_SEARCHING = 'is-searching';
 export const IS_FOCUSED = 'is-focused';
 export const IS_NOT_FOCUSED = 'is-not-focused';
 
-export const DROPDOWN_ORDER = [
-  MERGE_REQUEST_CATEGORY,
-  ISSUES_CATEGORY,
-  RECENT_EPICS_CATEGORY,
-  GROUPS_CATEGORY,
-  PROJECTS_CATEGORY,
-  USERS_CATEGORY,
-  IN_THIS_PROJECT_CATEGORY,
-  SETTINGS_CATEGORY,
-  HELP_CATEGORY,
-];
-
 export const FETCH_TYPES = ['generic', 'search'];
 
 export const SEARCH_INPUT_FIELD_MAX_WIDTH = '640px';
diff --git a/app/assets/javascripts/header_search/store/getters.js b/app/assets/javascripts/header_search/store/getters.js
index 3dec857930d..f86463b94d1 100644
--- a/app/assets/javascripts/header_search/store/getters.js
+++ b/app/assets/javascripts/header_search/store/getters.js
@@ -7,14 +7,16 @@ import {
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
-  ICON_GROUP,
-  ICON_SUBGROUP,
-  ICON_PROJECT,
   MSG_IN_ALL_GITLAB,
   PROJECTS_CATEGORY,
   GROUPS_CATEGORY,
-  SEARCH_SHORTCUTS_MIN_CHARACTERS,
   DROPDOWN_ORDER,
+} from '~/vue_shared/global_search/constants';
+import {
+  ICON_GROUP,
+  ICON_SUBGROUP,
+  ICON_PROJECT,
+  SEARCH_SHORTCUTS_MIN_CHARACTERS,
 } from '../constants';
 
 export const searchQuery = (state) => {
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 1e489b1dcab..d78b48e0a6d 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -1,9 +1,7 @@
 <script>
 import { GlAlert, GlButton, GlIcon, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui';
-import Autosize from 'autosize';
 import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import Autosave from '~/autosave';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { createAlert } from '~/alert';
 import { badgeState } from '~/issuable/components/status_box.vue';
@@ -15,7 +13,7 @@ import {
   slugifyWithUnderscore,
 } from '~/lib/utils/text_utility';
 import { sprintf } from '~/locale';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -36,7 +34,7 @@ export default {
   components: {
     NoteSignedOutWidget,
     DiscussionLockedWidget,
-    MarkdownField,
+    MarkdownEditor,
     GlAlert,
     GlButton,
     TimelineEntryItem,
@@ -62,6 +60,14 @@ export default {
       errors: [],
       noteIsInternal: false,
       isSubmitting: false,
+      formFieldProps: {
+        'aria-label': this.$options.i18n.comment,
+        placeholder: this.$options.i18n.bodyPlaceholder,
+        id: 'note-body',
+        name: 'note[note]',
+        class: 'js-note-text note-textarea js-gfm-input markdown-area',
+        'data-qa-selector': 'comment_field',
+      },
     };
   },
   computed: {
@@ -96,11 +102,6 @@ export default {
       }
       return this.noteType === constants.COMMENT ? comment : startThread;
     },
-    textareaPlaceholder() {
-      return this.noteIsInternal
-        ? this.$options.i18n.bodyPlaceholderInternal
-        : this.$options.i18n.bodyPlaceholder;
-    },
     discussionsRequireResolution() {
       return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE;
     },
@@ -181,14 +182,27 @@ export default {
     containsLink() {
       return ATTACHMENT_REGEXP.test(this.note);
     },
+    autosaveKey() {
+      if (this.isLoggedIn) {
+        const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
+        return `${this.$options.i18n.note}/${noteableType}/${this.getNoteableData.id}`;
+      }
+
+      return null;
+    },
+  },
+  watch: {
+    noteIsInternal(val) {
+      this.formFieldProps.placeholder = val
+        ? this.$options.i18n.bodyPlaceholderInternal
+        : this.$options.i18n.bodyPlaceholder;
+    },
   },
   mounted() {
     // jQuery is needed here because it is a custom event being dispatched with jQuery.
     $(document).on('issuable:change', (e, isClosed) => {
       this.toggleIssueLocalState(isClosed ? STATUS_CLOSED : STATUS_REOPENED);
     });
-
-    this.initAutoSave();
   },
   methods: {
     ...mapActions([
@@ -233,7 +247,6 @@ export default {
         }
 
         this.note = ''; // Empty textarea while being requested. Repopulate in catch
-        this.resizeTextarea();
         this.stopPolling();
 
         this.isSubmitting = true;
@@ -250,7 +263,6 @@ export default {
           .catch(({ response }) => {
             this.handleSaveError(response);
 
-            this.discard(false);
             this.note = noteData.data.note.note; // Restore textarea content.
             this.removePlaceholderNotes();
           })
@@ -287,20 +299,10 @@ export default {
           }),
         );
     },
-    discard(shouldClear = true) {
-      // `blur` is needed to clear slash commands autocomplete cache if event fired.
-      // `focus` is needed to remain cursor in the textarea.
-      this.$refs.textarea.blur();
-      this.$refs.textarea.focus();
-
-      if (shouldClear) {
-        this.note = '';
-        this.noteIsInternal = false;
-        this.resizeTextarea();
-        this.$refs.markdownField.previewMarkdown = false;
-      }
-
-      this.autosave.reset();
+    discard() {
+      this.note = '';
+      this.noteIsInternal = false;
+      this.$refs.markdownEditor.togglePreview(false);
     },
     editCurrentUserLastNote() {
       if (this.note === '') {
@@ -313,28 +315,15 @@ export default {
         }
       }
     },
-    initAutoSave() {
-      if (this.isLoggedIn) {
-        const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
-
-        this.autosave = new Autosave(this.$refs.textarea, [
-          this.$options.i18n.note,
-          noteableType,
-          this.getNoteableData.id,
-        ]);
-      }
-    },
-    resizeTextarea() {
-      this.$nextTick(() => {
-        Autosize.update(this.$refs.textarea);
-      });
-    },
     hasEmailParticipants() {
       return this.getNoteableData.issue_email_participants?.length;
     },
     dismissError(index) {
       this.errors.splice(index, 1);
     },
+    onInput(value) {
+      this.note = value;
+    },
   },
 };
 </script>
@@ -363,35 +352,24 @@ export default {
               :noteable-type="noteableType"
               :contains-link="containsLink"
             >
-              <markdown-field
-                ref="markdownField"
-                :is-submitting="isSubmitting"
-                :markdown-preview-path="markdownPreviewPath"
+              <markdown-editor
+                ref="markdownEditor"
+                :enable-content-editor="Boolean(glFeatures.contentEditorOnIssues)"
+                :value="note"
+                :render-markdown-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
-                :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
-                :textarea-value="note"
-              >
-                <template #textarea>
-                  <textarea
-                    id="note-body"
-                    ref="textarea"
-                    v-model="note"
-                    dir="auto"
-                    :disabled="isSubmitting"
-                    name="note[note]"
-                    class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area"
-                    data-qa-selector="comment_field"
-                    data-testid="comment-field"
-                    data-supports-quick-actions="true"
-                    :aria-label="$options.i18n.comment"
-                    :placeholder="textareaPlaceholder"
-                    @keydown.up="editCurrentUserLastNote()"
-                    @keydown.meta.enter="handleEnter()"
-                    @keydown.ctrl.enter="handleEnter()"
-                  ></textarea>
-                </template>
-              </markdown-field>
+                :quick-actions-docs-path="quickActionsDocsPath"
+                :form-field-props="formFieldProps"
+                :autosave-key="autosaveKey"
+                :disabled="isSubmitting"
+                supports-quick-actions
+                autofocus
+                @keydown.up="editCurrentUserLastNote()"
+                @keydown.meta.enter="handleEnter()"
+                @keydown.ctrl.enter="handleEnter()"
+                @input="onInput"
+              />
             </comment-field-layout>
             <div class="note-form-actions">
               <template v-if="hasDrafts">
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
index 4f89d217623..f6f816f435c 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { n__ } from '~/locale';
 import Tracking from '~/tracking';
@@ -28,7 +28,6 @@ export default {
     DeleteButton,
     GlSprintf,
     GlButton,
-    GlIcon,
     ListItem,
     GlSkeletonLoader,
     CleanupStatus,
@@ -80,8 +79,8 @@ export default {
     },
     tagsCountText() {
       return n__(
-        'ContainerRegistry|%{count} Tag',
-        'ContainerRegistry|%{count} Tags',
+        'ContainerRegistry|%{count} tag',
+        'ContainerRegistry|%{count} tags',
         this.item.tagsCount,
       );
     },
@@ -152,7 +151,6 @@ export default {
         <span v-if="deleting">{{ $options.i18n.ROW_SCHEDULED_FOR_DELETION }}</span>
         <template v-else>
           <span class="gl-display-flex gl-align-items-center" data-testid="tags-count">
-            <gl-icon name="tag" class="gl-mr-2" />
             <gl-sprintf :message="tagsCountText">
               <template #count>
                 {{ item.tagsCount }}
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
index 23340607825..b3d4ecdda47 100644
--- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
@@ -7,8 +7,8 @@ import searchUserProjectsAndGroups from '../graphql/queries/search_user_groups_a
 import { contextSwitcherItems } from '../mock_data';
 import { trackContextAccess, formatContextSwitcherItems } from '../utils';
 import NavItem from './nav_item.vue';
-import FrequentProjectsList from './frequent_projects_list.vue';
-import FrequentGroupsList from './frequent_groups_list.vue';
+import ProjectsList from './projects_list.vue';
+import GroupsList from './groups_list.vue';
 
 export default {
   i18n: {
@@ -55,8 +55,8 @@ export default {
   components: {
     GlSearchBoxByType,
     NavItem,
-    FrequentProjectsList,
-    FrequentGroupsList,
+    ProjectsList,
+    GroupsList,
   },
   props: {
     username: {
@@ -119,14 +119,13 @@ export default {
             <nav-item :item="$options.contextSwitcherItems.explore" />
           </ul>
         </li>
-        <frequent-projects-list
-          :class="{ 'gl-border-t-0': isSearch }"
+        <projects-list
           :username="username"
           :view-all-link="projectsPath"
           :is-search="isSearch"
           :search-results="projects"
         />
-        <frequent-groups-list
+        <groups-list
           :username="username"
           :view-all-link="groupsPath"
           :is-search="isSearch"
diff --git a/app/assets/javascripts/super_sidebar/components/frequent_groups_list.vue b/app/assets/javascripts/super_sidebar/components/frequent_groups_list.vue
deleted file mode 100644
index 4cdf052cb42..00000000000
--- a/app/assets/javascripts/super_sidebar/components/frequent_groups_list.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-import { s__ } from '~/locale';
-import { MAX_FREQUENT_GROUPS_COUNT } from '../constants';
-import FrequentItemsList from './frequent_items_list.vue';
-import NavItem from './nav_item.vue';
-
-export default {
-  MAX_FREQUENT_GROUPS_COUNT,
-  components: {
-    FrequentItemsList,
-    NavItem,
-  },
-  props: {
-    username: {
-      type: String,
-      required: true,
-    },
-    viewAllLink: {
-      type: String,
-      required: true,
-    },
-    isSearch: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  computed: {
-    storageKey() {
-      return `${this.username}/frequent-groups`;
-    },
-    viewAllItem() {
-      return {
-        link: this.viewAllLink,
-        title: s__('Navigation|View all groups'),
-        icon: 'group',
-      };
-    },
-  },
-  i18n: {
-    title: s__('Navigation|Frequent groups'),
-    searchTitle: s__('Navigation|Groups'),
-    pristineText: s__('Navigation|Groups you visit often will appear here.'),
-    noResultsText: s__('Navigation|No group matches found'),
-  },
-};
-</script>
-
-<template>
-  <frequent-items-list
-    :title="$options.i18n.title"
-    :search-title="$options.i18n.searchTitle"
-    :storage-key="storageKey"
-    :max-items="$options.MAX_FREQUENT_GROUPS_COUNT"
-    :pristine-text="$options.i18n.pristineText"
-    :no-results-text="$options.i18n.noResultsText"
-    :is-search="isSearch"
-    :search-results="searchResults"
-  >
-    <template #view-all-items>
-      <nav-item :item="viewAllItem" />
-    </template>
-  </frequent-items-list>
-</template>
diff --git a/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue b/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue
index dfd983a5a77..5269c7f8d5e 100644
--- a/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue
+++ b/app/assets/javascripts/super_sidebar/components/frequent_items_list.vue
@@ -1,32 +1,22 @@
 <script>
 import * as Sentry from '@sentry/browser';
-import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { getTopFrequentItems, formatContextSwitcherItems } from '../utils';
-import NavItem from './nav_item.vue';
+import ItemsList from './items_list.vue';
 
 export default {
   components: {
-    ProjectAvatar,
-    NavItem,
+    ItemsList,
   },
   props: {
     title: {
       type: String,
       required: true,
     },
-    searchTitle: {
-      type: String,
-      required: true,
-    },
     pristineText: {
       type: String,
       required: true,
     },
-    noResultsText: {
-      type: String,
-      required: true,
-    },
     storageKey: {
       type: String,
       required: true,
@@ -35,16 +25,6 @@ export default {
       type: Number,
       required: true,
     },
-    isSearch: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
   },
   data() {
     return {
@@ -52,17 +32,8 @@ export default {
     };
   },
   computed: {
-    items() {
-      return this.isSearch ? this.searchResults : this.cachedFrequentItems;
-    },
     isEmpty() {
-      return !this.items.length;
-    },
-    listTitle() {
-      return this.isSearch ? this.searchTitle : this.title;
-    },
-    emptyText() {
-      return this.isSearch ? this.noResultsText : this.pristineText;
+      return !this.cachedFrequentItems.length;
     },
   },
   created() {
@@ -92,29 +63,15 @@ export default {
       aria-hidden="true"
       class="gl-text-transform-uppercase gl-text-secondary gl-font-weight-bold gl-font-xs gl-line-height-12 gl-letter-spacing-06em gl-my-3"
     >
-      {{ listTitle }}
+      {{ title }}
     </div>
     <div v-if="isEmpty" data-testid="empty-text" class="gl-text-gray-500 gl-font-sm gl-my-3">
-      {{ emptyText }}
+      {{ pristineText }}
     </div>
-    <ul :aria-label="title" class="gl-p-0 gl-list-style-none">
-      <nav-item
-        v-for="item in items"
-        :key="item.id"
-        :item="item"
-        :link-classes="{ 'gl-py-2!': true }"
-      >
-        <template #icon>
-          <project-avatar
-            :project-id="item.id"
-            :project-name="item.title"
-            :project-avatar-url="item.avatar"
-            :size="24"
-            aria-hidden="true"
-          />
-        </template>
-      </nav-item>
-      <slot name="view-all-items"></slot>
-    </ul>
+    <items-list :aria-label="title" :items="cachedFrequentItems">
+      <template #view-all-items>
+        <slot name="view-all-items"></slot>
+      </template>
+    </items-list>
   </li>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/frequent_projects_list.vue b/app/assets/javascripts/super_sidebar/components/frequent_projects_list.vue
deleted file mode 100644
index 8653c4787d5..00000000000
--- a/app/assets/javascripts/super_sidebar/components/frequent_projects_list.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-import { s__ } from '~/locale';
-import { MAX_FREQUENT_PROJECTS_COUNT } from '../constants';
-import FrequentItemsList from './frequent_items_list.vue';
-import NavItem from './nav_item.vue';
-
-export default {
-  MAX_FREQUENT_PROJECTS_COUNT,
-  components: {
-    FrequentItemsList,
-    NavItem,
-  },
-  props: {
-    username: {
-      type: String,
-      required: true,
-    },
-    viewAllLink: {
-      type: String,
-      required: true,
-    },
-    isSearch: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  computed: {
-    storageKey() {
-      return `${this.username}/frequent-projects`;
-    },
-    viewAllItem() {
-      return {
-        link: this.viewAllLink,
-        title: s__('Navigation|View all projects'),
-        icon: 'project',
-      };
-    },
-  },
-  i18n: {
-    title: s__('Navigation|Frequent projects'),
-    searchTitle: s__('Navigation|Projects'),
-    pristineText: s__('Navigation|Projects you visit often will appear here.'),
-    noResultsText: s__('Navigation|No project matches found'),
-  },
-};
-</script>
-
-<template>
-  <frequent-items-list
-    :title="$options.i18n.title"
-    :search-title="$options.i18n.searchTitle"
-    :storage-key="storageKey"
-    :max-items="$options.MAX_FREQUENT_PROJECTS_COUNT"
-    :pristine-text="$options.i18n.pristineText"
-    :no-results-text="$options.i18n.noResultsText"
-    :is-search="isSearch"
-    :search-results="searchResults"
-  >
-    <template #view-all-items>
-      <nav-item :item="viewAllItem" />
-    </template>
-  </frequent-items-list>
-</template>
diff --git a/app/assets/javascripts/super_sidebar/components/groups_list.vue b/app/assets/javascripts/super_sidebar/components/groups_list.vue
new file mode 100644
index 00000000000..78b5ed2d31e
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/groups_list.vue
@@ -0,0 +1,78 @@
+<script>
+import { s__ } from '~/locale';
+import { MAX_FREQUENT_GROUPS_COUNT } from '../constants';
+import FrequentItemsList from './frequent_items_list.vue';
+import SearchResults from './search_results.vue';
+import NavItem from './nav_item.vue';
+
+export default {
+  MAX_FREQUENT_GROUPS_COUNT,
+  components: {
+    FrequentItemsList,
+    SearchResults,
+    NavItem,
+  },
+  props: {
+    username: {
+      type: String,
+      required: true,
+    },
+    viewAllLink: {
+      type: String,
+      required: true,
+    },
+    isSearch: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    storageKey() {
+      return `${this.username}/frequent-groups`;
+    },
+    viewAllItem() {
+      return {
+        link: this.viewAllLink,
+        title: s__('Navigation|View all groups'),
+        icon: 'group',
+      };
+    },
+  },
+  i18n: {
+    title: s__('Navigation|Frequent groups'),
+    searchTitle: s__('Navigation|Groups'),
+    pristineText: s__('Navigation|Groups you visit often will appear here.'),
+    noResultsText: s__('Navigation|No group matches found'),
+  },
+};
+</script>
+
+<template>
+  <search-results
+    v-if="isSearch"
+    :title="$options.i18n.searchTitle"
+    :no-results-text="$options.i18n.noResultsText"
+    :search-results="searchResults"
+  >
+    <template #view-all-items>
+      <nav-item :item="viewAllItem" />
+    </template>
+  </search-results>
+  <frequent-items-list
+    v-else
+    :title="$options.i18n.title"
+    :storage-key="storageKey"
+    :max-items="$options.MAX_FREQUENT_GROUPS_COUNT"
+    :pristine-text="$options.i18n.pristineText"
+  >
+    <template #view-all-items>
+      <nav-item :item="viewAllItem" />
+    </template>
+  </frequent-items-list>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/items_list.vue b/app/assets/javascripts/super_sidebar/components/items_list.vue
new file mode 100644
index 00000000000..0a72105fcc4
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/items_list.vue
@@ -0,0 +1,40 @@
+<script>
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
+import NavItem from './nav_item.vue';
+
+export default {
+  components: {
+    ProjectAvatar,
+    NavItem,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<template>
+  <ul class="gl-p-0 gl-list-style-none">
+    <nav-item
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      :link-classes="{ 'gl-py-2!': true }"
+    >
+      <template #icon>
+        <project-avatar
+          :project-id="item.id"
+          :project-name="item.title"
+          :project-avatar-url="item.avatar"
+          :size="24"
+          aria-hidden="true"
+        />
+      </template>
+    </nav-item>
+    <slot name="view-all-items"></slot>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/projects_list.vue b/app/assets/javascripts/super_sidebar/components/projects_list.vue
new file mode 100644
index 00000000000..a545de06bd4
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/projects_list.vue
@@ -0,0 +1,79 @@
+<script>
+import { s__ } from '~/locale';
+import { MAX_FREQUENT_PROJECTS_COUNT } from '../constants';
+import FrequentItemsList from './frequent_items_list.vue';
+import SearchResults from './search_results.vue';
+import NavItem from './nav_item.vue';
+
+export default {
+  MAX_FREQUENT_PROJECTS_COUNT,
+  components: {
+    FrequentItemsList,
+    SearchResults,
+    NavItem,
+  },
+  props: {
+    username: {
+      type: String,
+      required: true,
+    },
+    viewAllLink: {
+      type: String,
+      required: true,
+    },
+    isSearch: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    storageKey() {
+      return `${this.username}/frequent-projects`;
+    },
+    viewAllItem() {
+      return {
+        link: this.viewAllLink,
+        title: s__('Navigation|View all projects'),
+        icon: 'project',
+      };
+    },
+  },
+  i18n: {
+    title: s__('Navigation|Frequent projects'),
+    searchTitle: s__('Navigation|Projects'),
+    pristineText: s__('Navigation|Projects you visit often will appear here.'),
+    noResultsText: s__('Navigation|No project matches found'),
+  },
+};
+</script>
+
+<template>
+  <search-results
+    v-if="isSearch"
+    class="gl-border-t-0"
+    :title="$options.i18n.searchTitle"
+    :no-results-text="$options.i18n.noResultsText"
+    :search-results="searchResults"
+  >
+    <template #view-all-items>
+      <nav-item :item="viewAllItem" />
+    </template>
+  </search-results>
+  <frequent-items-list
+    v-else
+    :title="$options.i18n.title"
+    :storage-key="storageKey"
+    :max-items="$options.MAX_FREQUENT_PROJECTS_COUNT"
+    :pristine-text="$options.i18n.pristineText"
+  >
+    <template #view-all-items>
+      <nav-item :item="viewAllItem" />
+    </template>
+  </frequent-items-list>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/search_results.vue b/app/assets/javascripts/super_sidebar/components/search_results.vue
new file mode 100644
index 00000000000..7c172110bad
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/search_results.vue
@@ -0,0 +1,49 @@
+<script>
+import ItemsList from './items_list.vue';
+
+export default {
+  components: {
+    ItemsList,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    noResultsText: {
+      type: String,
+      required: true,
+    },
+    searchResults: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    isEmpty() {
+      return !this.searchResults.length;
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="gl-border-t gl-border-gray-50 gl-mx-3 gl-py-3">
+    <div
+      data-testid="list-title"
+      aria-hidden="true"
+      class="gl-text-transform-uppercase gl-text-secondary gl-font-weight-bold gl-font-xs gl-line-height-12 gl-letter-spacing-06em gl-my-3"
+    >
+      {{ title }}
+    </div>
+    <div v-if="isEmpty" data-testid="empty-text" class="gl-text-gray-500 gl-font-sm gl-my-3">
+      {{ noResultsText }}
+    </div>
+    <items-list :aria-label="title" :items="searchResults">
+      <template #view-all-items>
+        <slot name="view-all-items"></slot>
+      </template>
+    </items-list>
+  </li>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index 883fa85f1d9..34bbb3ce177 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -14,7 +14,7 @@ import PersistentUserCallout from '~/persistent_user_callout';
 import UserNameGroup from './user_name_group.vue';
 
 export default {
-  feedbackUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+  feedbackUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/391533',
   i18n: {
     newNavigation: {
       badgeLabel: s__('NorthstarNavigation|Alpha'),
diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
index d8e3691aa4a..93583907a11 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue
@@ -59,6 +59,16 @@ export default {
       required: false,
       default: '',
     },
+    drawioEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -132,6 +142,11 @@ export default {
       if (this.markdown) updateDraft(this.autosaveKey, this.markdown);
       else clearDraft(this.autosaveKey);
     },
+    togglePreview(value) {
+      if (this.editingMode === EDITING_MODE_MARKDOWN_FIELD) {
+        this.$refs.markdownField.previewMarkdown = value;
+      }
+    },
     autosizeTextarea() {
       if (this.editingMode === EDITING_MODE_MARKDOWN_FIELD) {
         this.$nextTick(() => {
@@ -151,6 +166,7 @@ export default {
     />
     <markdown-field
       v-if="!isContentEditorActive"
+      ref="markdownField"
       v-bind="$attrs"
       data-testid="markdown-field"
       :markdown-preview-path="renderMarkdownPath"
@@ -158,7 +174,8 @@ export default {
       :textarea-value="markdown"
       :uploads-path="uploadsPath"
       :quick-actions-docs-path="quickActionsDocsPath"
-      show-content-editor-switcher
+      :show-content-editor-switcher="enableContentEditor"
+      :drawio-enabled="drawioEnabled"
       class="bordered-box"
       @enableContentEditor="onEditingModeChange('contentEditor')"
     >
@@ -170,7 +187,8 @@ export default {
           class="note-textarea js-gfm-input markdown-area"
           dir="auto"
           :data-supports-quick-actions="supportsQuickActions"
-          data-qa-selector="markdown_editor_form_field"
+          :data-qa-selector="formFieldProps['data-qa-selector'] || 'markdown_editor_form_field'"
+          :disabled="disabled"
           @input="updateMarkdownFromMarkdownField"
           @keydown="$emit('keydown', $event)"
         >
@@ -179,11 +197,15 @@ export default {
     </markdown-field>
     <div v-else>
       <content-editor
+        ref="contentEditor"
         :render-markdown="renderMarkdown"
         :uploads-path="uploadsPath"
         :markdown="markdown"
         :quick-actions-docs-path="quickActionsDocsPath"
         :autofocus="contentEditorAutofocused"
+        :placeholder="formFieldProps.placeholder"
+        :drawio-enabled="drawioEnabled"
+        :editable="!disabled"
         @initialized="setEditorAsAutofocused"
         @change="updateMarkdownFromContentEditor"
         @keydown="$emit('keydown', $event)"
diff --git a/app/assets/javascripts/vue_shared/global_search/constants.js b/app/assets/javascripts/vue_shared/global_search/constants.js
new file mode 100644
index 00000000000..388e7c92f03
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/global_search/constants.js
@@ -0,0 +1,73 @@
+import { s__, __, sprintf } from '~/locale';
+
+export const AUTOCOMPLETE_ERROR_MESSAGE = s__(
+  'GlobalSearch|There was an error fetching search autocomplete suggestions.',
+);
+
+export const ALL_GITLAB = __('All GitLab');
+export const SEARCH_GITLAB = s__('GlobalSearch|Search GitLab');
+
+export const SEARCH_DESCRIBED_BY_DEFAULT = s__(
+  'GlobalSearch|%{count} default results provided. Use the up and down arrow keys to navigate search results list.',
+);
+export const SEARCH_DESCRIBED_BY_WITH_RESULTS = s__(
+  'GlobalSearch|Type for new suggestions to appear below.',
+);
+export const SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN = s__(
+  'GlobalSearch|Type and press the enter key to submit search.',
+);
+export const SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN = SEARCH_DESCRIBED_BY_WITH_RESULTS;
+export const SEARCH_DESCRIBED_BY_UPDATED = s__(
+  'GlobalSearch|Results updated. %{count} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.',
+);
+export const SEARCH_RESULTS_LOADING = s__('GlobalSearch|Search results are loading');
+export const SEARCH_RESULTS_SCOPE = s__('GlobalSearch|in %{scope}');
+export const KBD_HELP = sprintf(
+  s__('GlobalSearch|Use the shortcut key %{kbdOpen}/%{kbdClose} to start a search'),
+  { kbdOpen: '<kbd>', kbdClose: '</kbd>' },
+  false,
+);
+export const SCOPED_SEARCH_ITEM_ARIA_LABEL = s__('GlobalSearch| %{search} %{description} %{scope}');
+
+export const MSG_ISSUES_ASSIGNED_TO_ME = s__('GlobalSearch|Issues assigned to me');
+
+export const MSG_ISSUES_IVE_CREATED = s__("GlobalSearch|Issues I've created");
+
+export const MSG_MR_ASSIGNED_TO_ME = s__('GlobalSearch|Merge requests assigned to me');
+
+export const MSG_MR_IM_REVIEWER = s__("GlobalSearch|Merge requests that I'm a reviewer");
+
+export const MSG_MR_IVE_CREATED = s__("GlobalSearch|Merge requests I've created");
+
+export const MSG_IN_ALL_GITLAB = s__('GlobalSearch|all GitLab');
+
+export const GROUPS_CATEGORY = s__('GlobalSearch|Groups');
+
+export const PROJECTS_CATEGORY = s__('GlobalSearch|Projects');
+
+export const USERS_CATEGORY = s__('GlobalSearch|Users');
+
+export const ISSUES_CATEGORY = s__('GlobalSearch|Recent issues');
+
+export const MERGE_REQUEST_CATEGORY = s__('GlobalSearch|Recent merge requests');
+
+export const RECENT_EPICS_CATEGORY = s__('GlobalSearch|Recent epics');
+
+export const IN_THIS_PROJECT_CATEGORY = s__('GlobalSearch|In this project');
+
+export const SETTINGS_CATEGORY = s__('GlobalSearch|Settings');
+
+export const HELP_CATEGORY = s__('GlobalSearch|Help');
+
+export const SEARCH_RESULTS_ORDER = [
+  MERGE_REQUEST_CATEGORY,
+  ISSUES_CATEGORY,
+  RECENT_EPICS_CATEGORY,
+  GROUPS_CATEGORY,
+  PROJECTS_CATEGORY,
+  USERS_CATEGORY,
+  IN_THIS_PROJECT_CATEGORY,
+  SETTINGS_CATEGORY,
+  HELP_CATEGORY,
+];
+export const DROPDOWN_ORDER = SEARCH_RESULTS_ORDER;
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index 5f8060ad756..65576bcade6 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -19,6 +19,10 @@ class Projects::ArtifactsController < Projects::ApplicationController
   before_action :validate_artifacts!, except: [:index, :download, :raw, :destroy]
   before_action :entry, only: [:external_file, :file]
 
+  before_action only: :index do
+    push_frontend_feature_flag(:ci_job_artifact_bulk_destroy, @project)
+  end
+
   MAX_PER_PAGE = 20
 
   feature_category :build_artifacts
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index f933ed9f50b..a204023e34d 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -33,6 +33,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   before_action :check_user_can_push_to_source_branch!, only: [:rebase]
 
   before_action only: [:show, :diffs] do
+    push_frontend_feature_flag(:content_editor_on_issues, project)
     push_frontend_feature_flag(:core_security_mr_widget_counts, project)
     push_frontend_feature_flag(:issue_assignees_widget, @project)
     push_frontend_feature_flag(:refactor_security_extension, @project)
diff --git a/app/helpers/artifacts_helper.rb b/app/helpers/artifacts_helper.rb
index df0432105d5..f90d59409ed 100644
--- a/app/helpers/artifacts_helper.rb
+++ b/app/helpers/artifacts_helper.rb
@@ -4,6 +4,7 @@ module ArtifactsHelper
   def artifacts_app_data(project)
     {
       project_path: project.full_path,
+      project_id: project.id,
       can_destroy_artifacts: can?(current_user, :destroy_artifacts, project).to_s,
       artifacts_management_feedback_image_path: image_path('illustrations/chat-bubble-sm.svg')
     }
diff --git a/config/feature_flags/development/show_tags_on_commits_view.yml b/config/feature_flags/development/show_tags_on_commits_view.yml
index 834179d1636..1dba952c33f 100644
--- a/config/feature_flags/development/show_tags_on_commits_view.yml
+++ b/config/feature_flags/development/show_tags_on_commits_view.yml
@@ -5,4 +5,4 @@ rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/392003
 milestone: '15.10'
 type: development
 group: group::source code
-default_enabled: false
+default_enabled: true
diff --git a/doc/user/project/repository/branches/img/view_branch_protections_v15_10.png b/doc/user/project/repository/branches/img/view_branch_protections_v15_10.png
new file mode 100644
index 00000000000..09b30af91d0
Binary files /dev/null and b/doc/user/project/repository/branches/img/view_branch_protections_v15_10.png differ
diff --git a/doc/user/project/repository/branches/index.md b/doc/user/project/repository/branches/index.md
index 13ee6fcdc91..ef625739956 100644
--- a/doc/user/project/repository/branches/index.md
+++ b/doc/user/project/repository/branches/index.md
@@ -6,41 +6,98 @@ info: "To determine the technical writer assigned to the Stage/Group associated
 
 # Branches **(FREE)**
 
-A branch is a version of a project's working tree. You create a branch for each
-set of related changes you make. This keeps each set of changes separate from
-each other, allowing changes to be made in parallel, without affecting each
-other.
+Branches are versions of a project's working tree. When you create a new
+[project](../../index.md), GitLab creates a [default branch](default.md) (which
+cannot be deleted) for your repository. Default branch settings can be configured
+at the project, subgroup, group, or instance level.
 
-After pushing your changes to a new branch, you can:
+As your project grows, your team [creates](../web_editor.md#create-a-branch) more
+branches, preferably by following [branch naming patterns](#prefix-branch-names-with-issue-numbers).
+Each branch represents a set of changes, which allows development work to be done
+in parallel. Development work in one branch does not affect another branch.
 
-- Create a [merge request](../../merge_requests/index.md). You can streamline this process
-  by following [branch naming patterns](#prefix-branch-names-with-issue-numbers).
-- Perform inline code review.
-- [Discuss](../../../discussions/index.md) your implementation with your team.
-- Preview changes submitted to a new branch with [Review Apps](../../../../ci/review_apps/index.md).
+Branches are the foundation of development in a project:
 
-You can also request [approval](../../merge_requests/approvals/index.md)
-from your managers.
+1. To get started, create a branch and add commits to it.
+1. When the work is ready for review, create a [merge request](../../merge_requests/index.md) to propose
+   merging the changes in your branch. To streamline this process, you should follow
+   [branch naming patterns](#prefix-branch-names-with-issue-numbers).
+1. Preview changes in a branch with a [review app](../../../../ci/review_apps/index.md).
+1. After the contents of your branch are merged, [delete the merged branch](#delete-merged-branches).
 
-For more information on managing branches using the GitLab UI, see:
+## Manage and protect branches
 
-- [Default branches](default.md): When you create a new [project](../../index.md), GitLab creates a
-  default branch for the repository. You can change this setting at the project,
-  subgroup, group, or instance level.
-- [Create a branch](../web_editor.md#create-a-branch)
-- [Protected branches](../../protected_branches.md#protected-branches)
-- [Delete merged branches](#delete-merged-branches)
+GitLab provides you multiple methods to protect individual branches. These methods
+ensure your branches receive oversight and quality checks from their creation to their deletion:
 
-You can also manage branches using the
-[command line](../../../../gitlab-basics/start-using-git.md#create-a-branch).
+- The [default branch](default.md) in your project receives extra protection.
+- Configure [protected branches](../../protected_branches.md#protected-branches)
+  to restrict who can commit to a branch, merge other branches into it, or merge
+  the branch itself into another branch.
+- Configure [approval rules](../../merge_requests/approvals/rules.md) to set review
+  requirements, including [security-related approvals](../../merge_requests/approvals/rules.md#security-approvals), before a branch can merge.
+- Integrate with third-party [status checks](../../merge_requests/status_checks.md)
+  to ensure your branch contents meet your standards of quality.
 
-<i class="fa fa-youtube-play youtube" aria-hidden="true"></i>Watch the video [GitLab Flow](https://www.youtube.com/watch?v=InKNIvky2KE).
+You can manage your branches:
 
-See also:
+- With the GitLab user interface.
+- With the [command line](../../../../gitlab-basics/start-using-git.md#create-a-branch).
+- With the [Branches API](../../../../api/branches.md).
 
-- [Branches API](../../../../api/branches.md), for information on operating on repository branches using the GitLab API.
-- [GitLab Flow](../../../../topics/gitlab_flow.md) documentation.
-- [Getting started with Git](../../../../topics/git/index.md) and GitLab.
+### View all branches
+
+To view and manage your branches in the GitLab user interface:
+
+1. On the top bar, select **Main menu > Projects** and find your project.
+1. On the left sidebar, select **Repository > Branches**.
+
+On this page, you can:
+
+- See all branches, active branches, or stale branches.
+- Create new branches.
+- [Compare branches](#compare-branches).
+- Delete merged branches.
+
+### View branches with configured protections
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/88279) in GitLab 15.1 with a flag named `branch_rules`. Disabled by default.
+> - [Enabled on GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/363170) in GitLab 15.10.
+
+FLAG:
+On self-managed GitLab, by default this feature is not available. To make it available, ask an administrator to [enable the feature flag](../../../feature_flags.md) named `branch_rules`.
+On GitLab.com, this feature is available.
+
+Branches in your repository can be [protected](../../protected_branches.md) in multiple ways. You can:
+
+- Limit who can push to the branch.
+- Limit who can merge the branch.
+- Require approval of all changes.
+- Require external tests to pass.
+
+The **Branch rules overview** page shows all branches with any configured protections,
+and their protection methods:
+
+![Example of a branch with configured protections](img/view_branch_protections_v15_10.png)
+
+Prerequisites:
+
+- You must have at least the Developer role in the project.
+
+To view the **Branch rules overview** list:
+
+1. On the top bar, select **Main menu > Projects** and find your project.
+1. On the left sidebar, select **Settings > Repository**.
+1. Expand **Branch Rules** to view all branches with protections.
+   - To add protections to a new branch:
+     1. Select **Add branch rule**.
+     1. Select **Create protected branch**.
+   - To view more information about protections on an existing branch:
+     1. Identify the branch you want more information about.
+     1. Select **Details** to see information about its:
+        - [Branch protections](../../protected_branches.md).
+        - [Approval rules](../../merge_requests/approvals/rules.md).
+        - [Status checks](../../merge_requests/status_checks.md).
 
 ## Prefix branch names with issue numbers
 
@@ -85,35 +142,12 @@ this operation.
 It's particularly useful to clean up old branches that were not deleted
 automatically when a merge request was merged.
 
-## View branches with configured protections **(FREE SELF)**
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/88279) in GitLab 15.1 with a flag named `branch_rules`. Disabled by default.
-
-FLAG:
-On self-managed GitLab, by default this feature is not available. To make it available, ask an administrator to [enable the feature flag](../../../feature_flags.md) named `branch_rules`.
-On GitLab.com, this feature is not available.
-This feature is not ready for production use.
-
-Branches in your repository can be [protected](../../protected_branches.md) by limiting
-who can push to a branch, require approval for those pushed changes, or merge those changes.
-To help you track the protections for all branches, the **Branch rules overview**
-page shows your branches with their configured rules.
-
-To view the **Branch rules overview** list:
-
-1. On the top bar, select **Main menu > Projects** and find your project.
-1. On the left sidebar, select **Settings > Repository**.
-1. Expand **Branch Rules** to view all branches with protections.
-1. Select **Details** next to your desired branch to show information about its:
-   - [Branch protections](../../protected_branches.md).
-   - [Approval rules](../../merge_requests/approvals/rules.md).
-   - [Status checks](../../merge_requests/status_checks.md).
-
 ## Related topics
 
-- [Protected branches](../../protected_branches.md) user documentation
-- [Branches API](../../../../api/branches.md)
-- [Protected Branches API](../../../../api/protected_branches.md)
+- [Protected branches](../../protected_branches.md) user documentation.
+- [Branches API](../../../../api/branches.md), for information on operating on repository branches using the GitLab API.
+- [Protected Branches API](../../../../api/protected_branches.md).
+- [Getting started with Git](../../../../topics/git/index.md) and GitLab.
 
 ## Troubleshooting
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bd78f4c5a41..67cbb0d6110 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5648,9 +5648,22 @@ msgstr ""
 msgid "Artifacts"
 msgstr ""
 
+msgid "Artifacts|%d selected artifact deleted"
+msgid_plural "Artifacts|%d selected artifacts deleted"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "Artifacts|%{strongStart}%{count}%{strongEnd} artifact selected"
+msgid_plural "Artifacts|%{strongStart}%{count}%{strongEnd} artifacts selected"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Artifacts|An error occurred while deleting the artifact"
 msgstr ""
 
+msgid "Artifacts|An error occurred while deleting. Some artifacts may not have been deleted."
+msgstr ""
+
 msgid "Artifacts|An error occurred while retrieving job artifacts"
 msgstr ""
 
@@ -5660,18 +5673,42 @@ msgstr ""
 msgid "Artifacts|Browse"
 msgstr ""
 
+msgid "Artifacts|Clear selection"
+msgstr ""
+
+msgid "Artifacts|Delete %d artifact"
+msgid_plural "Artifacts|Delete %d artifacts"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "Artifacts|Delete %d artifact?"
+msgid_plural "Artifacts|Delete %d artifacts?"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Artifacts|Delete %{name}?"
 msgstr ""
 
 msgid "Artifacts|Delete artifact"
 msgstr ""
 
+msgid "Artifacts|Delete selected"
+msgstr ""
+
 msgid "Artifacts|Help us improve this page"
 msgstr ""
 
+msgid "Artifacts|Something went wrong while deleting. Please refresh the page to try again."
+msgstr ""
+
 msgid "Artifacts|Take a quick survey"
 msgstr ""
 
+msgid "Artifacts|The selected artifact will be permanently deleted. Any reports generated from these artifacts will be empty."
+msgid_plural "Artifacts|The selected artifacts will be permanently deleted. Any reports generated from these artifacts will be empty."
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Artifacts|This artifact will be permanently deleted. Any reports generated from this artifact will be empty."
 msgstr ""
 
@@ -11055,8 +11092,8 @@ msgid_plural "ContainerRegistry|%{count} Image repositories"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "ContainerRegistry|%{count} Tag"
-msgid_plural "ContainerRegistry|%{count} Tags"
+msgid "ContainerRegistry|%{count} tag"
+msgid_plural "ContainerRegistry|%{count} tags"
 msgstr[0] ""
 msgstr[1] ""
 
@@ -24659,6 +24696,15 @@ msgstr ""
 msgid "JobAssistant|Add job"
 msgstr ""
 
+msgid "JobAssistant|Image"
+msgstr ""
+
+msgid "JobAssistant|Image entrypoint (optional)"
+msgstr ""
+
+msgid "JobAssistant|Image name (optional)"
+msgstr ""
+
 msgid "JobAssistant|Job Setup"
 msgstr ""
 
diff --git a/spec/features/issues/user_comments_on_issue_spec.rb b/spec/features/issues/user_comments_on_issue_spec.rb
index 59e1413fc97..145fa3c4a9e 100644
--- a/spec/features/issues/user_comments_on_issue_spec.rb
+++ b/spec/features/issues/user_comments_on_issue_spec.rb
@@ -32,6 +32,8 @@ RSpec.describe "User comments on issue", :js, feature_category: :team_planning d
       end
     end
 
+    it_behaves_like 'edits content using the content editor'
+
     it "adds comment with code block" do
       code_block_content = "Command [1]: /usr/local/bin/git , see [text](doc/text)"
       comment = "```\n#{code_block_content}\n```"
diff --git a/spec/features/issues/user_edits_issue_spec.rb b/spec/features/issues/user_edits_issue_spec.rb
index 6c375018a4b..06c1b2afdb0 100644
--- a/spec/features/issues/user_edits_issue_spec.rb
+++ b/spec/features/issues/user_edits_issue_spec.rb
@@ -111,23 +111,29 @@ RSpec.describe "Issues > User edits issue", :js, feature_category: :team_plannin
           markdown_field_focused_selector = 'textarea:focus'
           click_edit_issue_description
 
-          expect(page).to have_selector(markdown_field_focused_selector)
+          issuable_form = find('[data-testid="issuable-form"]')
 
-          click_on _('Viewing markdown')
-          click_on _('Rich text')
+          expect(issuable_form).to have_selector(markdown_field_focused_selector)
 
-          expect(page).not_to have_selector(content_editor_focused_selector)
+          page.within issuable_form do
+            click_on _('Viewing markdown')
+            click_on _('Rich text')
+          end
+
+          expect(issuable_form).not_to have_selector(content_editor_focused_selector)
 
           refresh
 
           click_edit_issue_description
 
-          expect(page).to have_selector(content_editor_focused_selector)
+          expect(issuable_form).to have_selector(content_editor_focused_selector)
 
-          click_on _('Viewing rich text')
-          click_on _('Markdown')
+          page.within issuable_form do
+            click_on _('Viewing rich text')
+            click_on _('Markdown')
+          end
 
-          expect(page).not_to have_selector(markdown_field_focused_selector)
+          expect(issuable_form).not_to have_selector(markdown_field_focused_selector)
         end
       end
 
diff --git a/spec/features/merge_request/user_comments_on_merge_request_spec.rb b/spec/features/merge_request/user_comments_on_merge_request_spec.rb
index 9335615b4c7..e113e305af5 100644
--- a/spec/features/merge_request/user_comments_on_merge_request_spec.rb
+++ b/spec/features/merge_request/user_comments_on_merge_request_spec.rb
@@ -30,6 +30,8 @@ RSpec.describe 'User comments on a merge request', :js, feature_category: :code_
     end
   end
 
+  it_behaves_like 'edits content using the content editor'
+
   it 'replys to a new comment' do
     page.within('.js-main-target-form') do
       fill_in('note[note]', with: 'comment 1')
diff --git a/spec/features/merge_request/user_views_open_merge_request_spec.rb b/spec/features/merge_request/user_views_open_merge_request_spec.rb
index e481e3f2dfb..afa57cb0f8f 100644
--- a/spec/features/merge_request/user_views_open_merge_request_spec.rb
+++ b/spec/features/merge_request/user_views_open_merge_request_spec.rb
@@ -7,6 +7,18 @@ RSpec.describe 'User views an open merge request', feature_category: :code_revie
     create(:merge_request, source_project: project, target_project: project, description: '# Description header')
   end
 
+  context 'feature flags' do
+    let_it_be(:project) { create(:project, :public, :repository) }
+
+    it 'pushes content_editor_on_issues feature flag to frontend' do
+      stub_feature_flags(content_editor_on_issues: true)
+
+      visit merge_request_path(merge_request)
+
+      expect(page).to have_pushed_frontend_feature_flags(contentEditorOnIssues: true)
+    end
+  end
+
   context 'when a merge request does not have repository' do
     let(:project) { create(:project, :public, :repository) }
 
diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb
index 3ede76d3360..acb2af07e50 100644
--- a/spec/features/projects/pipeline_schedules_spec.rb
+++ b/spec/features/projects/pipeline_schedules_spec.rb
@@ -193,7 +193,7 @@ RSpec.describe 'Pipeline Schedules', :js, feature_category: :projects do
         save_pipeline_schedule
       end
 
-      it 'user sees the new variable in edit window' do
+      it 'user sees the new variable in edit window', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/397040' do
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
         page.within('.ci-variable-list') do
           expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-key").value).to eq('AAA')
diff --git a/spec/frontend/__helpers__/create_mock_source_editor_extension.js b/spec/frontend/__helpers__/create_mock_source_editor_extension.js
new file mode 100644
index 00000000000..fa529604d6f
--- /dev/null
+++ b/spec/frontend/__helpers__/create_mock_source_editor_extension.js
@@ -0,0 +1,12 @@
+export const createMockSourceEditorExtension = (ActualExtension) => {
+  const { extensionName } = ActualExtension;
+  const providedKeys = Object.keys(new ActualExtension().provides());
+
+  const mockedMethods = Object.fromEntries(providedKeys.map((key) => [key, jest.fn()]));
+  const MockExtension = function MockExtension() {};
+  MockExtension.extensionName = extensionName;
+  MockExtension.mockedMethods = mockedMethods;
+  MockExtension.prototype.provides = jest.fn().mockReturnValue(mockedMethods);
+
+  return MockExtension;
+};
diff --git a/spec/frontend/artifacts/components/artifact_row_spec.js b/spec/frontend/artifacts/components/artifact_row_spec.js
index b9d75e2a9b2..268772ed4c0 100644
--- a/spec/frontend/artifacts/components/artifact_row_spec.js
+++ b/spec/frontend/artifacts/components/artifact_row_spec.js
@@ -1,9 +1,10 @@
-import { GlBadge, GlButton, GlFriendlyWrap } from '@gitlab/ui';
+import { GlBadge, GlButton, GlFriendlyWrap, GlFormCheckbox } from '@gitlab/ui';
 import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ArtifactRow from '~/artifacts/components/artifact_row.vue';
+import { BULK_DELETE_FEATURE_FLAG } from '~/artifacts/constants';
 
 describe('ArtifactRow component', () => {
   let wrapper;
@@ -15,15 +16,17 @@ describe('ArtifactRow component', () => {
   const findSize = () => wrapper.findByTestId('job-artifact-row-size');
   const findDownloadButton = () => wrapper.findByTestId('job-artifact-row-download-button');
   const findDeleteButton = () => wrapper.findByTestId('job-artifact-row-delete-button');
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
-  const createComponent = ({ canDestroyArtifacts = true } = {}) => {
+  const createComponent = ({ canDestroyArtifacts = true, glFeatures = {} } = {}) => {
     wrapper = shallowMountExtended(ArtifactRow, {
       propsData: {
         artifact,
+        isSelected: false,
         isLoading: false,
         isLastRow: false,
       },
-      provide: { canDestroyArtifacts },
+      provide: { canDestroyArtifacts, glFeatures },
       stubs: { GlBadge, GlButton, GlFriendlyWrap },
     });
   };
@@ -73,4 +76,30 @@ describe('ArtifactRow component', () => {
       expect(wrapper.emitted('delete')).toBeDefined();
     });
   });
+
+  describe('bulk delete checkbox', () => {
+    describe('with permission and feature flag enabled', () => {
+      beforeEach(() => {
+        createComponent({ glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true } });
+      });
+
+      it('emits selectArtifact when toggled', () => {
+        findCheckbox().vm.$emit('input', true);
+
+        expect(wrapper.emitted('selectArtifact')).toStrictEqual([[artifact, true]]);
+      });
+    });
+
+    it('is not shown without permission', () => {
+      createComponent({ canDestroyArtifacts: false });
+
+      expect(findCheckbox().exists()).toBe(false);
+    });
+
+    it('is not shown with feature flag disabled', () => {
+      createComponent();
+
+      expect(findCheckbox().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js b/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js
new file mode 100644
index 00000000000..876906b2c3c
--- /dev/null
+++ b/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js
@@ -0,0 +1,96 @@
+import { GlSprintf, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue';
+import bulkDestroyArtifactsMutation from '~/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql';
+
+Vue.use(VueApollo);
+
+describe('ArtifactsBulkDelete component', () => {
+  let wrapper;
+  let requestHandlers;
+
+  const projectId = '123';
+  const selectedArtifacts = [
+    mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes[0].id,
+    mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes[1].id,
+  ];
+
+  const findText = () => wrapper.findComponent(GlSprintf).text();
+  const findDeleteButton = () => wrapper.findByTestId('bulk-delete-delete-button');
+  const findClearButton = () => wrapper.findByTestId('bulk-delete-clear-button');
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const createComponent = ({
+    handlers = {
+      bulkDestroyArtifactsMutation: jest.fn(),
+    },
+  } = {}) => {
+    requestHandlers = handlers;
+    wrapper = mountExtended(ArtifactsBulkDelete, {
+      apolloProvider: createMockApollo([
+        [bulkDestroyArtifactsMutation, requestHandlers.bulkDestroyArtifactsMutation],
+      ]),
+      propsData: {
+        selectedArtifacts,
+        queryVariables: {},
+        isLoading: false,
+        isLastRow: false,
+      },
+      provide: { projectId },
+    });
+  };
+
+  describe('selected artifacts box', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('displays selected artifacts count', () => {
+      expect(findText()).toContain(String(selectedArtifacts.length));
+    });
+
+    it('opens the confirmation modal when the delete button is clicked', async () => {
+      expect(findModal().props('visible')).toBe(false);
+
+      findDeleteButton().trigger('click');
+      await waitForPromises();
+
+      expect(findModal().props('visible')).toBe(true);
+    });
+
+    it('emits clearSelectedArtifacts event when the clear button is clicked', () => {
+      findClearButton().trigger('click');
+
+      expect(wrapper.emitted('clearSelectedArtifacts')).toBeDefined();
+    });
+  });
+
+  describe('bulk delete confirmation modal', () => {
+    beforeEach(async () => {
+      createComponent();
+      findDeleteButton().trigger('click');
+      await waitForPromises();
+    });
+
+    it('calls the bulk delete mutation with the selected artifacts on confirm', () => {
+      findModal().vm.$emit('primary');
+
+      expect(requestHandlers.bulkDestroyArtifactsMutation).toHaveBeenCalledWith({
+        projectId: `gid://gitlab/Project/${projectId}`,
+        ids: selectedArtifacts,
+      });
+    });
+
+    it('does not call the bulk delete mutation on cancel', () => {
+      findModal().vm.$emit('cancel');
+
+      expect(requestHandlers.bulkDestroyArtifactsMutation).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
index eced6d3f3ba..6bf3498f9b0 100644
--- a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
+++ b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
@@ -25,11 +25,12 @@ describe('ArtifactsTableRowDetails component', () => {
 
   const findModal = () => wrapper.findComponent(GlModal);
 
-  const createComponent = (
+  const createComponent = ({
     handlers = {
       destroyArtifactMutation: jest.fn(),
     },
-  ) => {
+    selectedArtifacts = [],
+  } = {}) => {
     requestHandlers = handlers;
     wrapper = mountExtended(ArtifactsTableRowDetails, {
       apolloProvider: createMockApollo([
@@ -37,6 +38,7 @@ describe('ArtifactsTableRowDetails component', () => {
       ]),
       propsData: {
         artifacts,
+        selectedArtifacts,
         refetchArtifacts,
         queryVariables: {},
       },
@@ -116,4 +118,20 @@ describe('ArtifactsTableRowDetails component', () => {
       expect(requestHandlers.destroyArtifactMutation).not.toHaveBeenCalled();
     });
   });
+
+  describe('bulk delete selection', () => {
+    it('is not selected for unselected artifact', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(wrapper.findAllComponents(ArtifactRow).at(0).props('isSelected')).toBe(false);
+    });
+
+    it('is selected for selected artifacts', async () => {
+      createComponent({ selectedArtifacts: [artifacts.nodes[0].id] });
+      await waitForPromises();
+
+      expect(wrapper.findAllComponents(ArtifactRow).at(0).props('isSelected')).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
index 44c242fa2cb..40f3c9633ab 100644
--- a/spec/frontend/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
@@ -1,4 +1,12 @@
-import { GlLoadingIcon, GlTable, GlLink, GlBadge, GlPagination, GlModal } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlTable,
+  GlLink,
+  GlBadge,
+  GlPagination,
+  GlModal,
+  GlFormCheckbox,
+} from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
@@ -8,6 +16,7 @@ import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue';
 import FeedbackBanner from '~/artifacts/components/feedback_banner.vue';
 import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue';
 import ArtifactDeleteModal from '~/artifacts/components/artifact_delete_modal.vue';
+import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import getJobArtifactsQuery from '~/artifacts/graphql/queries/get_job_artifacts.query.graphql';
@@ -17,6 +26,7 @@ import {
   JOBS_PER_PAGE,
   I18N_FETCH_ERROR,
   INITIAL_CURRENT_PAGE,
+  BULK_DELETE_FEATURE_FLAG,
 } from '~/artifacts/constants';
 import { totalArtifactsSizeForJob } from '~/artifacts/utils';
 import { createAlert } from '~/alert';
@@ -29,6 +39,8 @@ describe('JobArtifactsTable component', () => {
   let wrapper;
   let requestHandlers;
 
+  const mockToastShow = jest.fn();
+
   const findBanner = () => wrapper.findComponent(FeedbackBanner);
 
   const findLoadingState = () => wrapper.findComponent(GlLoadingIcon);
@@ -60,6 +72,11 @@ describe('JobArtifactsTable component', () => {
   const findDeleteButton = () => wrapper.findByTestId('job-artifacts-delete-button');
   const findArtifactDeleteButton = () => wrapper.findByTestId('job-artifact-row-delete-button');
 
+  // first checkbox is a "select all", this finder should get the first job checkbox
+  const findJobCheckbox = () => wrapper.findAllComponents(GlFormCheckbox).at(1);
+  const findAnyCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findBulkDelete = () => wrapper.findComponent(ArtifactsBulkDelete);
+
   const findPagination = () => wrapper.findComponent(GlPagination);
   const setPage = async (page) => {
     findPagination().vm.$emit('input', page);
@@ -89,13 +106,14 @@ describe('JobArtifactsTable component', () => {
     (artifact) => artifact.fileType === ARCHIVE_FILE_TYPE,
   );
 
-  const createComponent = (
+  const createComponent = ({
     handlers = {
       getJobArtifactsQuery: jest.fn().mockResolvedValue(getJobArtifactsResponse),
     },
     data = {},
     canDestroyArtifacts = true,
-  ) => {
+    glFeatures = {},
+  } = {}) => {
     requestHandlers = handlers;
     wrapper = mountExtended(JobArtifactsTable, {
       apolloProvider: createMockApollo([
@@ -103,8 +121,15 @@ describe('JobArtifactsTable component', () => {
       ]),
       provide: {
         projectPath: 'project/path',
+        projectId: 'gid://projects/id',
         canDestroyArtifacts,
         artifactsManagementFeedbackImagePath: 'banner/image/path',
+        glFeatures,
+      },
+      mocks: {
+        $toast: {
+          show: mockToastShow,
+        },
       },
       data() {
         return data;
@@ -126,7 +151,9 @@ describe('JobArtifactsTable component', () => {
 
   it('on error, shows an alert', async () => {
     createComponent({
-      getJobArtifactsQuery: jest.fn().mockRejectedValue(new Error('Error!')),
+      handlers: {
+        getJobArtifactsQuery: jest.fn().mockRejectedValue(new Error('Error!')),
+      },
     });
 
     await waitForPromises();
@@ -267,10 +294,10 @@ describe('JobArtifactsTable component', () => {
         archive: { downloadPath: null },
       };
 
-      createComponent(
-        { getJobArtifactsQuery: jest.fn() },
-        { jobArtifacts: [jobWithoutDownloadPath] },
-      );
+      createComponent({
+        handlers: { getJobArtifactsQuery: jest.fn() },
+        data: { jobArtifacts: [jobWithoutDownloadPath] },
+      });
 
       await waitForPromises();
 
@@ -293,10 +320,10 @@ describe('JobArtifactsTable component', () => {
         browseArtifactsPath: null,
       };
 
-      createComponent(
-        { getJobArtifactsQuery: jest.fn() },
-        { jobArtifacts: [jobWithoutBrowsePath] },
-      );
+      createComponent({
+        handlers: { getJobArtifactsQuery: jest.fn() },
+        data: { jobArtifacts: [jobWithoutBrowsePath] },
+      });
 
       await waitForPromises();
 
@@ -306,7 +333,7 @@ describe('JobArtifactsTable component', () => {
 
   describe('delete button', () => {
     it('does not show when user does not have permission', async () => {
-      createComponent({}, {}, false);
+      createComponent({ canDestroyArtifacts: false });
 
       await waitForPromises();
 
@@ -322,17 +349,82 @@ describe('JobArtifactsTable component', () => {
     });
   });
 
+  describe('bulk delete', () => {
+    describe('with permission and feature flag enabled', () => {
+      beforeEach(async () => {
+        createComponent({
+          canDestroyArtifacts: true,
+          glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true },
+        });
+
+        await waitForPromises();
+      });
+
+      it('shows selected artifacts when a job is checked', async () => {
+        expect(findBulkDelete().exists()).toBe(false);
+
+        await findJobCheckbox().vm.$emit('input', true);
+
+        expect(findBulkDelete().exists()).toBe(true);
+        expect(findBulkDelete().props('selectedArtifacts')).toStrictEqual(
+          job.artifacts.nodes.map((node) => node.id),
+        );
+      });
+
+      it('disappears when selected artifacts are cleared', async () => {
+        await findJobCheckbox().vm.$emit('input', true);
+
+        expect(findBulkDelete().exists()).toBe(true);
+
+        await findBulkDelete().vm.$emit('clearSelectedArtifacts');
+
+        expect(findBulkDelete().exists()).toBe(false);
+      });
+
+      it('shows a toast when artifacts are deleted', async () => {
+        const count = job.artifacts.nodes.length;
+
+        await findJobCheckbox().vm.$emit('input', true);
+        findBulkDelete().vm.$emit('deleted', count);
+
+        expect(mockToastShow).toHaveBeenCalledWith(`${count} selected artifacts deleted`);
+      });
+    });
+
+    it('shows no checkboxes without permission', async () => {
+      createComponent({
+        canDestroyArtifacts: false,
+        glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true },
+      });
+
+      await waitForPromises();
+
+      expect(findAnyCheckbox().exists()).toBe(false);
+    });
+
+    it('shows no checkboxes with feature flag disabled', async () => {
+      createComponent({
+        canDestroyArtifacts: true,
+        glFeatures: { [BULK_DELETE_FEATURE_FLAG]: false },
+      });
+
+      await waitForPromises();
+
+      expect(findAnyCheckbox().exists()).toBe(false);
+    });
+  });
+
   describe('pagination', () => {
     const { pageInfo } = getJobArtifactsResponseThatPaginates.data.project.jobs;
     const query = jest.fn().mockResolvedValue(getJobArtifactsResponseThatPaginates);
 
     beforeEach(async () => {
-      createComponent(
-        {
+      createComponent({
+        handlers: {
           getJobArtifactsQuery: query,
         },
-        { pageInfo },
-      );
+        data: { pageInfo },
+      });
 
       await waitForPromises();
     });
diff --git a/spec/frontend/artifacts/components/job_checkbox_spec.js b/spec/frontend/artifacts/components/job_checkbox_spec.js
new file mode 100644
index 00000000000..95cc548b8c8
--- /dev/null
+++ b/spec/frontend/artifacts/components/job_checkbox_spec.js
@@ -0,0 +1,71 @@
+import { GlFormCheckbox } from '@gitlab/ui';
+import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import JobCheckbox from '~/artifacts/components/job_checkbox.vue';
+
+describe('JobCheckbox component', () => {
+  let wrapper;
+
+  const mockArtifactNodes = mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes;
+  const mockSelectedArtifacts = [mockArtifactNodes[0], mockArtifactNodes[1]];
+  const mockUnselectedArtifacts = [mockArtifactNodes[2]];
+
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+
+  const createComponent = ({
+    hasArtifacts = true,
+    selectedArtifacts = mockSelectedArtifacts,
+    unselectedArtifacts = mockUnselectedArtifacts,
+  } = {}) => {
+    wrapper = shallowMountExtended(JobCheckbox, {
+      propsData: {
+        hasArtifacts,
+        selectedArtifacts,
+        unselectedArtifacts,
+      },
+      mocks: { GlFormCheckbox },
+    });
+  };
+
+  it('is disabled when the job has no artifacts', () => {
+    createComponent({ hasArtifacts: false });
+
+    expect(findCheckbox().attributes('disabled')).toBe('true');
+  });
+
+  describe('when some artifacts are selected', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('is indeterminate', () => {
+      expect(findCheckbox().attributes('indeterminate')).toBe('true');
+      expect(findCheckbox().attributes('checked')).toBeUndefined();
+    });
+
+    it('selects the unselected artifacts on click', () => {
+      findCheckbox().vm.$emit('input', true);
+
+      expect(wrapper.emitted('selectArtifact')).toMatchObject([[mockUnselectedArtifacts[0], true]]);
+    });
+  });
+
+  describe('when all artifacts are selected', () => {
+    beforeEach(() => {
+      createComponent({ unselectedArtifacts: [] });
+    });
+
+    it('is checked', () => {
+      expect(findCheckbox().attributes('checked')).toBe('true');
+    });
+
+    it('deselects the selected artifacts on click', () => {
+      findCheckbox().vm.$emit('input', false);
+
+      expect(wrapper.emitted('selectArtifact')).toMatchObject([
+        [mockSelectedArtifacts[0], false],
+        [mockSelectedArtifacts[1], false],
+      ]);
+    });
+  });
+});
diff --git a/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js b/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
index 4b185a545b0..0be26570fbf 100644
--- a/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
@@ -1,7 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
+import { editor as monacoEditor } from 'monaco-editor';
 
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import { EDITOR_READY_EVENT } from '~/editor/constants';
+import { CiSchemaExtension as MockedCiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
 import { SOURCE_EDITOR_DEBOUNCE } from '~/ci/pipeline_editor/constants';
+import eventHub, { SCROLL_EDITOR_TO_BOTTOM } from '~/ci/pipeline_editor/event_hub';
 import TextEditor from '~/ci/pipeline_editor/components/editor/text_editor.vue';
 import {
   mockCiConfigPath,
@@ -12,19 +16,26 @@ import {
   mockDefaultBranch,
 } from '../../mock_data';
 
+jest.mock('monaco-editor');
+jest.mock('~/editor/extensions/source_editor_ci_schema_ext', () => {
+  const { createMockSourceEditorExtension } = jest.requireActual(
+    'helpers/create_mock_source_editor_extension',
+  );
+  const { CiSchemaExtension } = jest.requireActual(
+    '~/editor/extensions/source_editor_ci_schema_ext',
+  );
+
+  return {
+    CiSchemaExtension: createMockSourceEditorExtension(CiSchemaExtension),
+  };
+});
+
 describe('Pipeline Editor | Text editor component', () => {
   let wrapper;
 
   let editorReadyListener;
-  let mockUse;
-  let mockRegisterCiSchema;
-  let mockEditorInstance;
-  let editorInstanceDetail;
-
-  const MockSourceEditor = {
-    template: '<div/>',
-    props: ['value', 'fileName', 'editorOptions', 'debounceValue'],
-  };
+
+  const getMonacoEditor = () => monacoEditor.create.mock.results[0].value;
 
   const createComponent = (mountFn = shallowMount) => {
     wrapper = mountFn(TextEditor, {
@@ -44,31 +55,17 @@ describe('Pipeline Editor | Text editor component', () => {
         [EDITOR_READY_EVENT]: editorReadyListener,
       },
       stubs: {
-        SourceEditor: MockSourceEditor,
+        SourceEditor,
       },
     });
   };
 
-  const findEditor = () => wrapper.findComponent(MockSourceEditor);
+  const findEditor = () => wrapper.findComponent(SourceEditor);
 
   beforeEach(() => {
-    editorReadyListener = jest.fn();
-    mockUse = jest.fn();
-    mockRegisterCiSchema = jest.fn();
-    mockEditorInstance = {
-      use: mockUse,
-      registerCiSchema: mockRegisterCiSchema,
-    };
-    editorInstanceDetail = {
-      detail: {
-        instance: mockEditorInstance,
-      },
-    };
-  });
+    jest.spyOn(monacoEditor, 'create');
 
-  afterEach(() => {
-    mockUse.mockClear();
-    mockRegisterCiSchema.mockClear();
+    editorReadyListener = jest.fn();
   });
 
   describe('template', () => {
@@ -97,21 +94,34 @@ describe('Pipeline Editor | Text editor component', () => {
     });
 
     it('bubbles up events', () => {
-      findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
-
       expect(editorReadyListener).toHaveBeenCalled();
     });
+
+    it('scrolls editor to bottom on scroll editor to bottom event', () => {
+      const setScrollTop = jest.spyOn(getMonacoEditor(), 'setScrollTop');
+
+      eventHub.$emit(SCROLL_EDITOR_TO_BOTTOM);
+
+      expect(setScrollTop).toHaveBeenCalledWith(getMonacoEditor().getScrollHeight());
+    });
+
+    it('when destroyed, destroys scroll listener', () => {
+      const setScrollTop = jest.spyOn(getMonacoEditor(), 'setScrollTop');
+
+      wrapper.destroy();
+      eventHub.$emit(SCROLL_EDITOR_TO_BOTTOM);
+
+      expect(setScrollTop).not.toHaveBeenCalled();
+    });
   });
 
   describe('CI schema', () => {
     beforeEach(() => {
       createComponent();
-      findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
     });
 
     it('configures editor with syntax highlight', () => {
-      expect(mockUse).toHaveBeenCalledTimes(1);
-      expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
+      expect(MockedCiSchemaExtension.mockedMethods.registerCiSchema).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js
new file mode 100644
index 00000000000..c7c40c3a4b9
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js
@@ -0,0 +1,39 @@
+import ImageItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { JOB_TEMPLATE } from '~/ci/pipeline_editor/components/job_assistant_drawer/constants';
+
+describe('Image item', () => {
+  let wrapper;
+
+  const findImageNameInput = () => wrapper.findByTestId('image-name-input');
+  const findImageEntrypointInput = () => wrapper.findByTestId('image-entrypoint-input');
+
+  const dummyImageName = 'dummyImageName';
+  const dummyImageEntrypoint = 'dummyImageEntrypoint';
+
+  const createComponent = ({ job = JSON.parse(JSON.stringify(JOB_TEMPLATE)) } = {}) => {
+    wrapper = shallowMountExtended(ImageItem, {
+      propsData: {
+        job,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('should emit update job event when filling inputs', () => {
+    expect(wrapper.emitted('update-job')).toBeUndefined();
+
+    findImageNameInput().vm.$emit('input', dummyImageName);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(1);
+    expect(wrapper.emitted('update-job')[0]).toEqual(['image.name', dummyImageName]);
+
+    findImageEntrypointInput().vm.$emit('input', dummyImageEntrypoint);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(2);
+    expect(wrapper.emitted('update-job')[1]).toEqual(['image.entrypoint', [dummyImageEntrypoint]]);
+  });
+});
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
index f29b6b00e0b..b293805d653 100644
--- a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
@@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue';
 import { stringify } from 'yaml';
 import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue';
 import JobSetupItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue';
+import ImageItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue';
 import getAllRunners from '~/ci/runner/graphql/list/all_runners.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -20,9 +21,12 @@ describe('Job assistant drawer', () => {
 
   const dummyJobName = 'a';
   const dummyJobScript = 'b';
+  const dummyImageName = 'c';
+  const dummyImageEntrypoint = 'd';
 
   const findDrawer = () => wrapper.findComponent(GlDrawer);
   const findJobSetupItem = () => wrapper.findComponent(JobSetupItem);
+  const findImageItem = () => wrapper.findComponent(ImageItem);
 
   const findConfirmButton = () => wrapper.findByTestId('confirm-button');
   const findCancelButton = () => wrapper.findByTestId('cancel-button');
@@ -46,6 +50,14 @@ describe('Job assistant drawer', () => {
     await waitForPromises();
   });
 
+  it('should contain job setup accordion', () => {
+    expect(findJobSetupItem().exists()).toBe(true);
+  });
+
+  it('should contain image accordion', () => {
+    expect(findImageItem().exists()).toBe(true);
+  });
+
   it('should emit close job assistant drawer event when closing the drawer', () => {
     expect(wrapper.emitted('close-job-assistant-drawer')).toBeUndefined();
 
@@ -78,12 +90,21 @@ describe('Job assistant drawer', () => {
     beforeEach(() => {
       findJobSetupItem().vm.$emit('update-job', 'name', dummyJobName);
       findJobSetupItem().vm.$emit('update-job', 'script', dummyJobScript);
+      findImageItem().vm.$emit('update-job', 'image.name', dummyImageName);
+      findImageItem().vm.$emit('update-job', 'image.entrypoint', [dummyImageEntrypoint]);
     });
 
-    it('job name and script have correct value', () => {
-      expect(findJobSetupItem().props('job')).toMatchObject({
-        name: dummyJobName,
-        script: dummyJobScript,
+    it('passes correct prop to accordions', () => {
+      const accordions = [findJobSetupItem(), findImageItem()];
+      accordions.forEach((accordion) => {
+        expect(accordion.props('job')).toMatchObject({
+          name: dummyJobName,
+          script: dummyJobScript,
+          image: {
+            name: dummyImageName,
+            entrypoint: [dummyImageEntrypoint],
+          },
+        });
       });
     });
 
@@ -114,7 +135,12 @@ describe('Job assistant drawer', () => {
       findConfirmButton().trigger('click');
 
       expect(updateCiConfigSpy).toHaveBeenCalledWith(
-        `\n${stringify({ [dummyJobName]: { script: dummyJobScript } })}`,
+        `\n${stringify({
+          [dummyJobName]: {
+            script: dummyJobScript,
+            image: { name: dummyImageName, entrypoint: [dummyImageEntrypoint] },
+          },
+        })}`,
       );
     });
 
diff --git a/spec/frontend/content_editor/components/content_editor_spec.js b/spec/frontend/content_editor/components/content_editor_spec.js
index 009f5a5a45f..b642ac9c46b 100644
--- a/spec/frontend/content_editor/components/content_editor_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_spec.js
@@ -35,6 +35,7 @@ describe('ContentEditor', () => {
         uploadsPath,
         markdown,
         autofocus,
+        placeholder: 'Enter some text here...',
         ...props,
       },
       stubs: {
@@ -131,9 +132,9 @@ describe('ContentEditor', () => {
 
     describe('succeeds', () => {
       beforeEach(async () => {
-        renderMarkdown.mockResolvedValueOnce('hello world');
+        renderMarkdown.mockResolvedValueOnce('');
 
-        createWrapper({ markddown: 'hello world' });
+        createWrapper({ markddown: '' });
         await nextTick();
       });
 
@@ -145,13 +146,17 @@ describe('ContentEditor', () => {
       it('emits loadingSuccess event', () => {
         expect(wrapper.emitted('loadingSuccess')).toHaveLength(1);
       });
+
+      it('shows placeholder text', () => {
+        expect(wrapper.text()).toContain('Enter some text here...');
+      });
     });
 
     describe('fails', () => {
       beforeEach(async () => {
         renderMarkdown.mockRejectedValueOnce(new Error());
 
-        createWrapper({ markddown: 'hello world' });
+        createWrapper({ markdown: 'hello world' });
         await nextTick();
       });
 
@@ -216,11 +221,17 @@ describe('ContentEditor', () => {
 
       expect(findEditorElement().classes()).not.toContain('is-focused');
     });
+
+    it('hides placeholder text', () => {
+      expect(wrapper.text()).not.toContain('Enter some text here...');
+    });
   });
 
   describe('when editorStateObserver emits docUpdate event', () => {
-    it('emits change event with the latest markdown', async () => {
-      const markdown = 'Loaded content';
+    let markdown;
+
+    beforeEach(async () => {
+      markdown = 'Loaded content';
 
       renderMarkdown.mockResolvedValueOnce(markdown);
 
@@ -230,7 +241,9 @@ describe('ContentEditor', () => {
       await waitForPromises();
 
       findEditorStateObserver().vm.$emit('docUpdate');
+    });
 
+    it('emits change event with the latest markdown', () => {
       expect(wrapper.emitted('change')).toEqual([
         [
           {
@@ -241,6 +254,10 @@ describe('ContentEditor', () => {
         ],
       ]);
     });
+
+    it('hides the placeholder text', () => {
+      expect(wrapper.text()).not.toContain('Enter some text here...');
+    });
   });
 
   describe('when editorStateObserver emits keydown event', () => {
diff --git a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
index 40f05f66b5d..5af4784f358 100644
--- a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
@@ -9,12 +9,14 @@ import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../test_
 describe('content_editor/components/toolbar_more_dropdown', () => {
   let wrapper;
   let tiptapEditor;
+  let contentEditor;
   let eventHub;
 
   const buildEditor = () => {
     tiptapEditor = createTestEditor({
       extensions: [Diagram, HorizontalRule],
     });
+    contentEditor = { drawioEnabled: true };
     eventHub = eventHubFactory();
   };
 
@@ -22,6 +24,7 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
     wrapper = mountExtended(ToolbarMoreDropdown, {
       provide: {
         tiptapEditor,
+        contentEditor,
         eventHub,
       },
       propsData,
@@ -32,7 +35,6 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
 
   beforeEach(() => {
     buildEditor();
-    buildWrapper();
   });
 
   describe.each`
@@ -52,6 +54,8 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
     let btn;
 
     beforeEach(async () => {
+      buildWrapper();
+
       commands = mockChainedCommands(tiptapEditor, [command, 'focus', 'run']);
       btn = wrapper.findByRole('button', { name });
     });
@@ -68,8 +72,17 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
     });
   });
 
+  it('does not show drawio option when drawio is disabled', () => {
+    contentEditor.drawioEnabled = false;
+    buildWrapper();
+
+    expect(wrapper.findByRole('button', { name: 'Create or edit diagram' }).exists()).toBe(false);
+  });
+
   describe('a11y tests', () => {
     it('sets toggleText and text-sr-only properties to the table button dropdown', () => {
+      buildWrapper();
+
       expect(findDropdown().props()).toMatchObject({
         textSrOnly: true,
         toggleText: 'More options',
diff --git a/spec/frontend/content_editor/services/create_content_editor_spec.js b/spec/frontend/content_editor/services/create_content_editor_spec.js
index 62457ad8c10..00cc628ca72 100644
--- a/spec/frontend/content_editor/services/create_content_editor_spec.js
+++ b/spec/frontend/content_editor/services/create_content_editor_spec.js
@@ -20,7 +20,7 @@ describe('content_editor/services/create_content_editor', () => {
         preserveUnchangedMarkdown: false,
       },
     };
-    editor = createContentEditor({ renderMarkdown, uploadsPath });
+    editor = createContentEditor({ renderMarkdown, uploadsPath, drawioEnabled: true });
   });
 
   describe('when preserveUnchangedMarkdown feature is on', () => {
diff --git a/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js b/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
index 90d83820c70..8ee37282ee9 100644
--- a/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
+++ b/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
@@ -35,12 +35,10 @@ describe('content_editor/services/gl_api_markdown_deserializer', () => {
     beforeEach(async () => {
       const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
 
-      renderMarkdown.mockResolvedValueOnce(
-        `<p><strong>${text}</strong></p><pre lang="javascript"></pre><!-- some comment -->`,
-      );
+      renderMarkdown.mockResolvedValueOnce(`<p><strong>${text}</strong></p><!-- some comment -->`);
 
       result = await deserializer.deserialize({
-        content: 'content',
+        markdown: '**Bold text**\n<!-- some comment -->',
         schema: tiptapEditor.schema,
       });
     });
@@ -53,12 +51,22 @@ describe('content_editor/services/gl_api_markdown_deserializer', () => {
   });
 
   describe('when the render function returns an empty value', () => {
-    it('returns an empty object', async () => {
-      const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
+    it('returns an empty prosemirror document', async () => {
+      const deserializer = createMarkdownDeserializer({
+        render: renderMarkdown,
+        schema: tiptapEditor.schema,
+      });
 
       renderMarkdown.mockResolvedValueOnce(null);
 
-      expect(await deserializer.deserialize({ content: 'content' })).toEqual({});
+      const result = await deserializer.deserialize({
+        markdown: '',
+        schema: tiptapEditor.schema,
+      });
+
+      const document = doc(p());
+
+      expect(result.document.toJSON()).toEqual(document.toJSON());
     });
   });
 });
diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index 35104b84a88..8e84c672d90 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -183,10 +183,10 @@ describe('HeaderSearchApp', () => {
 
     describe.each`
       username         | showDropdown | expectedDesc
-      ${null}          | ${false}     | ${HeaderSearchApp.i18n.searchInputDescribeByNoDropdown}
-      ${null}          | ${true}      | ${HeaderSearchApp.i18n.searchInputDescribeByNoDropdown}
-      ${MOCK_USERNAME} | ${false}     | ${HeaderSearchApp.i18n.searchInputDescribeByWithDropdown}
-      ${MOCK_USERNAME} | ${true}      | ${HeaderSearchApp.i18n.searchInputDescribeByWithDropdown}
+      ${null}          | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${null}          | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${MOCK_USERNAME} | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
+      ${MOCK_USERNAME} | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
     `('Search Input Description', ({ username, showDropdown, expectedDesc }) => {
       describe(`current_username is ${username} and showDropdown is ${showDropdown}`, () => {
         beforeEach(() => {
@@ -208,7 +208,7 @@ describe('HeaderSearchApp', () => {
       ${MOCK_USERNAME} | ${true}      | ${''}          | ${false} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
       ${MOCK_USERNAME} | ${true}      | ${''}          | ${true}  | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
       ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${false} | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${`Results updated. ${MOCK_SCOPED_SEARCH_OPTIONS.length} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.`}
-      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${true}  | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${HeaderSearchApp.i18n.searchResultsLoading}
+      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${true}  | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${HeaderSearchApp.i18n.SEARCH_RESULTS_LOADING}
     `(
       'Search Results Description',
       ({ username, showDropdown, search, loading, searchOptions, expectedDesc }) => {
diff --git a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
index 06dfe1ff29b..e77a9231b7a 100644
--- a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
@@ -3,15 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import HeaderSearchAutocompleteItems from '~/header_search/components/header_search_autocomplete_items.vue';
+import { LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '~/header_search/constants';
 import {
-  GROUPS_CATEGORY,
-  LARGE_AVATAR_PX,
   PROJECTS_CATEGORY,
-  SMALL_AVATAR_PX,
+  GROUPS_CATEGORY,
   ISSUES_CATEGORY,
   MERGE_REQUEST_CATEGORY,
   RECENT_EPICS_CATEGORY,
-} from '~/header_search/constants';
+} from '~/vue_shared/global_search/constants';
 import {
   MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
   MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
diff --git a/spec/frontend/header_search/components/header_search_scoped_items_spec.js b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
index 18ea927a78c..51d67198f04 100644
--- a/spec/frontend/header_search/components/header_search_scoped_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
@@ -5,7 +5,8 @@ import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
 import { truncate } from '~/lib/utils/text_utility';
-import { MSG_IN_ALL_GITLAB, SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
+import { SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
+import { MSG_IN_ALL_GITLAB } from '~/vue_shared/global_search/constants';
 import {
   MOCK_SEARCH,
   MOCK_SCOPED_SEARCH_OPTIONS,
diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js
index 3a8624ad9dd..2218c81efc3 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -1,16 +1,14 @@
+import { ICON_PROJECT, ICON_GROUP, ICON_SUBGROUP } from '~/header_search/constants';
 import {
+  PROJECTS_CATEGORY,
+  GROUPS_CATEGORY,
   MSG_ISSUES_ASSIGNED_TO_ME,
   MSG_ISSUES_IVE_CREATED,
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
   MSG_IN_ALL_GITLAB,
-  PROJECTS_CATEGORY,
-  ICON_PROJECT,
-  GROUPS_CATEGORY,
-  ICON_GROUP,
-  ICON_SUBGROUP,
-} from '~/header_search/constants';
+} from '~/vue_shared/global_search/constants';
 
 export const MOCK_USERNAME = 'anyone';
 
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index db435e6e43c..062cd098640 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -5,12 +5,12 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import Autosave from '~/autosave';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { createAlert } from '~/alert';
 import { STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants';
 import axios from '~/lib/utils/axios_utils';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import { HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
 import CommentForm from '~/notes/components/comment_form.vue';
 import CommentTypeDropdown from '~/notes/components/comment_type_dropdown.vue';
@@ -23,7 +23,6 @@ import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock }
 jest.mock('autosize');
 jest.mock('~/commons/nav/user_merge_requests');
 jest.mock('~/alert');
-jest.mock('~/autosave');
 
 Vue.use(Vuex);
 
@@ -33,7 +32,8 @@ describe('issue_comment_form component', () => {
   let axiosMock;
 
   const findCloseReopenButton = () => wrapper.findByTestId('close-reopen-button');
-  const findTextArea = () => wrapper.findByTestId('comment-field');
+  const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
+  const findMarkdownEditorTextarea = () => findMarkdownEditor().find('textarea');
   const findAddToReviewButton = () => wrapper.findByTestId('add-to-review-button');
   const findAddCommentNowButton = () => wrapper.findByTestId('add-comment-now-button');
   const findConfidentialNoteCheckbox = () => wrapper.findByTestId('internal-note-checkbox');
@@ -136,7 +136,6 @@ describe('issue_comment_form component', () => {
         mountComponent({ mountFunction: mount, initialData: { note: 'hello world' } });
 
         jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
-        jest.spyOn(wrapper.vm, 'resizeTextarea');
         jest.spyOn(wrapper.vm, 'stopPolling');
 
         findCloseReopenButton().trigger('click');
@@ -145,7 +144,6 @@ describe('issue_comment_form component', () => {
         expect(wrapper.vm.note).toBe('');
         expect(wrapper.vm.saveNote).toHaveBeenCalled();
         expect(wrapper.vm.stopPolling).toHaveBeenCalled();
-        expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
       });
 
       it('does not report errors in the UI when the save succeeds', async () => {
@@ -260,6 +258,18 @@ describe('issue_comment_form component', () => {
       });
     });
 
+    it('hides content editor switcher if feature flag content_editor_on_issues is off', () => {
+      mountComponent({ mountFunction: mount, features: { contentEditorOnIssues: false } });
+
+      expect(wrapper.text()).not.toContain('Rich text');
+    });
+
+    it('shows content editor switcher if feature flag content_editor_on_issues is on', () => {
+      mountComponent({ mountFunction: mount, features: { contentEditorOnIssues: true } });
+
+      expect(wrapper.text()).toContain('Rich text');
+    });
+
     describe('textarea', () => {
       describe('general', () => {
         it.each`
@@ -268,13 +278,13 @@ describe('issue_comment_form component', () => {
           ${'internal note'} | ${true}        | ${'Write an internal note or drag your files here…'}
         `(
           'should render textarea with placeholder for $noteType',
-          ({ noteIsInternal, placeholder }) => {
-            mountComponent({
-              mountFunction: mount,
-              initialData: { noteIsInternal },
-            });
+          async ({ noteIsInternal, placeholder }) => {
+            mountComponent();
+
+            wrapper.vm.noteIsInternal = noteIsInternal;
+            await nextTick();
 
-            expect(findTextArea().attributes('placeholder')).toBe(placeholder);
+            expect(findMarkdownEditor().props('formFieldProps').placeholder).toBe(placeholder);
           },
         );
 
@@ -290,13 +300,13 @@ describe('issue_comment_form component', () => {
 
           await findCommentButton().trigger('click');
 
-          expect(findTextArea().attributes('disabled')).toBe('disabled');
+          expect(findMarkdownEditor().find('textarea').attributes('disabled')).toBe('disabled');
         });
 
         it('should support quick actions', () => {
           mountComponent({ mountFunction: mount });
 
-          expect(findTextArea().attributes('data-supports-quick-actions')).toBe('true');
+          expect(findMarkdownEditor().props('supportsQuickActions')).toBe(true);
         });
 
         it('should link to markdown docs', () => {
@@ -336,63 +346,51 @@ describe('issue_comment_form component', () => {
         it('should enter edit mode when arrow up is pressed', () => {
           jest.spyOn(wrapper.vm, 'editCurrentUserLastNote');
 
-          findTextArea().trigger('keydown.up');
+          findMarkdownEditorTextarea().trigger('keydown.up');
 
           expect(wrapper.vm.editCurrentUserLastNote).toHaveBeenCalled();
         });
 
-        it('inits autosave', () => {
-          expect(Autosave).toHaveBeenCalledWith(expect.any(Element), [
-            'Note',
-            'Issue',
-            noteableDataMock.id,
-          ]);
-        });
-      });
+        describe('event enter', () => {
+          describe('when no draft exists', () => {
+            it('should save note when cmd+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSave');
 
-      describe('event enter', () => {
-        beforeEach(() => {
-          mountComponent({ mountFunction: mount });
-        });
-
-        describe('when no draft exists', () => {
-          it('should save note when cmd+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSave');
-
-            findTextArea().trigger('keydown.enter', { metaKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { metaKey: true });
 
-            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
-          });
+              expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+            });
 
-          it('should save note when ctrl+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSave');
+            it('should save note when ctrl+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSave');
 
-            findTextArea().trigger('keydown.enter', { ctrlKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { ctrlKey: true });
 
-            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+              expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+            });
           });
-        });
 
-        describe('when a draft exists', () => {
-          beforeEach(() => {
-            store.registerModule('batchComments', batchComments());
-            store.state.batchComments.drafts = [{ note: 'A' }];
-          });
+          describe('when a draft exists', () => {
+            beforeEach(() => {
+              store.registerModule('batchComments', batchComments());
+              store.state.batchComments.drafts = [{ note: 'A' }];
+            });
 
-          it('should save note draft when cmd+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSaveDraft');
+            it('should save note draft when cmd+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSaveDraft');
 
-            findTextArea().trigger('keydown.enter', { metaKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { metaKey: true });
 
-            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
-          });
+              expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+            });
 
-          it('should save note draft when ctrl+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSaveDraft');
+            it('should save note draft when ctrl+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSaveDraft');
 
-            findTextArea().trigger('keydown.enter', { ctrlKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { ctrlKey: true });
 
-            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+              expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+            });
           });
         });
       });
@@ -661,7 +659,7 @@ describe('issue_comment_form component', () => {
     });
 
     it('should not render submission form', () => {
-      expect(findTextArea().exists()).toBe(false);
+      expect(findMarkdownEditor().exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
index 1bab8b51220..7da9c7533a0 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,4 +1,4 @@
-import { GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
+import { GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import { mockTracking } from 'helpers/tracking_helper';
@@ -201,13 +201,6 @@ describe('Image List Row', () => {
       expect(findTagsCount().exists()).toBe(true);
     });
 
-    it('contains a tag icon', () => {
-      mountComponent();
-      const icon = findTagsCount().findComponent(GlIcon);
-      expect(icon.exists()).toBe(true);
-      expect(icon.props('name')).toBe('tag');
-    });
-
     describe('loading state', () => {
       it('shows a loader when metadataLoading is true', () => {
         mountComponent({ metadataLoading: true });
@@ -226,12 +219,12 @@ describe('Image List Row', () => {
       it('with one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 1 } });
 
-        expect(findTagsCount().text()).toMatchInterpolatedText('1 Tag');
+        expect(findTagsCount().text()).toMatchInterpolatedText('1 tag');
       });
       it('with more than one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 3 } });
 
-        expect(findTagsCount().text()).toMatchInterpolatedText('3 Tags');
+        expect(findTagsCount().text()).toMatchInterpolatedText('3 tags');
       });
     });
   });
diff --git a/spec/frontend/super_sidebar/components/context_switcher_spec.js b/spec/frontend/super_sidebar/components/context_switcher_spec.js
index 1c93abbc758..538e87cf843 100644
--- a/spec/frontend/super_sidebar/components/context_switcher_spec.js
+++ b/spec/frontend/super_sidebar/components/context_switcher_spec.js
@@ -5,8 +5,8 @@ import * as Sentry from '@sentry/browser';
 import { s__ } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ContextSwitcher from '~/super_sidebar/components/context_switcher.vue';
-import FrequentProjectsList from '~/super_sidebar/components/frequent_projects_list.vue';
-import FrequentGroupsList from '~/super_sidebar/components/frequent_groups_list.vue';
+import ProjectsList from '~/super_sidebar/components/projects_list.vue';
+import GroupsList from '~/super_sidebar/components/groups_list.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import searchUserProjectsAndGroupsQuery from '~/super_sidebar/graphql/queries/search_user_groups_and_projects.query.graphql';
 import { trackContextAccess, formatContextSwitcherItems } from '~/super_sidebar/utils';
@@ -34,8 +34,8 @@ describe('ContextSwitcher component', () => {
   let mockApollo;
 
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
-  const findFrequentProjectsList = () => wrapper.findComponent(FrequentProjectsList);
-  const findFrequentGroupsList = () => wrapper.findComponent(FrequentGroupsList);
+  const findProjectsList = () => wrapper.findComponent(ProjectsList);
+  const findGroupsList = () => wrapper.findComponent(GroupsList);
 
   const triggerSearchQuery = async () => {
     findSearchBox().vm.$emit('input', 'foo');
@@ -69,10 +69,10 @@ describe('ContextSwitcher component', () => {
         GlSearchBoxByType: stubComponent(GlSearchBoxByType, {
           props: ['placeholder'],
         }),
-        FrequentProjectsList: stubComponent(FrequentProjectsList, {
+        ProjectsList: stubComponent(ProjectsList, {
           props: ['username', 'viewAllLink', 'isSearch', 'searchResults'],
         }),
-        FrequentGroupsList: stubComponent(FrequentGroupsList, {
+        GroupsList: stubComponent(GroupsList, {
           props: ['username', 'viewAllLink', 'isSearch', 'searchResults'],
         }),
       },
@@ -91,7 +91,7 @@ describe('ContextSwitcher component', () => {
     });
 
     it('passes the correct props the frequent projects list', () => {
-      expect(findFrequentProjectsList().props()).toEqual({
+      expect(findProjectsList().props()).toEqual({
         username,
         viewAllLink: projectsPath,
         isSearch: false,
@@ -100,7 +100,7 @@ describe('ContextSwitcher component', () => {
     });
 
     it('passes the correct props the frequent groups list', () => {
-      expect(findFrequentGroupsList().props()).toEqual({
+      expect(findGroupsList().props()).toEqual({
         username,
         viewAllLink: groupsPath,
         isSearch: false,
@@ -142,20 +142,16 @@ describe('ContextSwitcher component', () => {
       expect(searchUserProjectsAndGroupsHandlerSuccess).toHaveBeenCalled();
     });
 
-    it('removes the top border from the projects list', () => {
-      expect(findFrequentProjectsList().attributes('class')).toContain('gl-border-t-0');
-    });
-
     it('passes the projects to the frequent projects list', () => {
-      expect(findFrequentProjectsList().props('isSearch')).toBe(true);
-      expect(findFrequentProjectsList().props('searchResults')).toEqual(
+      expect(findProjectsList().props('isSearch')).toBe(true);
+      expect(findProjectsList().props('searchResults')).toEqual(
         formatContextSwitcherItems(searchUserProjectsAndGroupsResponseMock.data.projects.nodes),
       );
     });
 
     it('passes the groups to the frequent groups list', () => {
-      expect(findFrequentGroupsList().props('isSearch')).toBe(true);
-      expect(findFrequentGroupsList().props('searchResults')).toEqual(
+      expect(findGroupsList().props('isSearch')).toBe(true);
+      expect(findGroupsList().props('searchResults')).toEqual(
         formatContextSwitcherItems(searchUserProjectsAndGroupsResponseMock.data.user.groups.nodes),
       );
     });
@@ -184,10 +180,10 @@ describe('ContextSwitcher component', () => {
     });
 
     it('passes empty results to the lists', () => {
-      expect(findFrequentProjectsList().props('isSearch')).toBe(true);
-      expect(findFrequentProjectsList().props('searchResults')).toEqual([]);
-      expect(findFrequentGroupsList().props('isSearch')).toBe(true);
-      expect(findFrequentGroupsList().props('searchResults')).toEqual([]);
+      expect(findProjectsList().props('isSearch')).toBe(true);
+      expect(findProjectsList().props('searchResults')).toEqual([]);
+      expect(findGroupsList().props('isSearch')).toBe(true);
+      expect(findGroupsList().props('searchResults')).toEqual([]);
     });
   });
 
diff --git a/spec/frontend/super_sidebar/components/frequent_groups_list_spec.js b/spec/frontend/super_sidebar/components/frequent_groups_list_spec.js
deleted file mode 100644
index c3a1bd5d967..00000000000
--- a/spec/frontend/super_sidebar/components/frequent_groups_list_spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { s__ } from '~/locale';
-import FrequentGroupsList from '~/super_sidebar/components//frequent_groups_list.vue';
-import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
-import NavItem from '~/super_sidebar/components/nav_item.vue';
-import { MAX_FREQUENT_GROUPS_COUNT } from '~/super_sidebar/constants';
-
-const username = 'root';
-const viewAllLink = '/path/to/groups';
-const storageKey = `${username}/frequent-groups`;
-
-describe('FrequentGroupsList component', () => {
-  let wrapper;
-
-  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
-  const findViewAllLink = () => wrapper.findComponent(NavItem);
-
-  const createWrapper = () => {
-    wrapper = shallowMountExtended(FrequentGroupsList, {
-      propsData: {
-        username,
-        viewAllLink,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it('passes the correct props to the frequent items list', () => {
-    expect(findFrequentItemsList().props()).toEqual({
-      title: s__('Navigation|Frequent groups'),
-      searchTitle: s__('Navigation|Groups'),
-      storageKey,
-      maxItems: MAX_FREQUENT_GROUPS_COUNT,
-      pristineText: s__('Navigation|Groups you visit often will appear here.'),
-      noResultsText: s__('Navigation|No group matches found'),
-      isSearch: false,
-      searchResults: [],
-    });
-  });
-
-  it('renders the "View all..." item', () => {
-    expect(findViewAllLink().props('item')).toEqual({
-      icon: 'group',
-      link: viewAllLink,
-      title: s__('Navigation|View all groups'),
-    });
-  });
-});
diff --git a/spec/frontend/super_sidebar/components/frequent_items_list_spec.js b/spec/frontend/super_sidebar/components/frequent_items_list_spec.js
index 6c8a131f73d..1e98db091f2 100644
--- a/spec/frontend/super_sidebar/components/frequent_items_list_spec.js
+++ b/spec/frontend/super_sidebar/components/frequent_items_list_spec.js
@@ -1,18 +1,14 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { s__ } from '~/locale';
 import FrequentItemsList from '~/super_sidebar/components//frequent_items_list.vue';
-import NavItem from '~/super_sidebar/components/nav_item.vue';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { cachedFrequentProjects } from '../mock_data';
 
 const title = s__('Navigation|FREQUENT PROJECTS');
-const searchTitle = 'PROJECTS';
 const pristineText = s__('Navigation|Projects you visit often will appear here.');
-const noResultsText = s__('Navigation|No project matches found');
 const storageKey = 'storageKey';
 const maxItems = 5;
-const mockItems = JSON.parse(cachedFrequentProjects);
-const mostFrequentProject = mockItems[4];
 
 describe('FrequentItemsList component', () => {
   useLocalStorageSpy();
@@ -20,16 +16,14 @@ describe('FrequentItemsList component', () => {
   let wrapper;
 
   const findListTitle = () => wrapper.findByTestId('list-title');
-  const findNavItems = () => wrapper.findAllComponents(NavItem);
+  const findItemsList = () => wrapper.findComponent(ItemsList);
   const findEmptyText = () => wrapper.findByTestId('empty-text');
 
   const createWrapper = ({ props = {} } = {}) => {
     wrapper = shallowMountExtended(FrequentItemsList, {
       propsData: {
         title,
-        searchTitle,
         pristineText,
-        noResultsText,
         storageKey,
         maxItems,
         ...props,
@@ -58,58 +52,17 @@ describe('FrequentItemsList component', () => {
       createWrapper();
     });
 
-    it('attempts to retrieve the projects and groups from the local storage', () => {
+    it('attempts to retrieve the items from the local storage', () => {
       expect(window.localStorage.getItem).toHaveBeenCalledTimes(1);
       expect(window.localStorage.getItem).toHaveBeenCalledWith(storageKey);
     });
 
     it('renders the maximum amount of items', () => {
-      expect(findNavItems().length).toBe(maxItems);
-    });
-
-    it('passes the remapped `item` prop to nav items', () => {
-      const firstNavItem = findNavItems().at(0);
-
-      expect(firstNavItem.props('item')).toEqual({
-        id: mostFrequentProject.id,
-        title: mostFrequentProject.name,
-        subtitle: mostFrequentProject.namespace.split(' / ')[0],
-        avatar: mostFrequentProject.avatarUrl,
-        link: mostFrequentProject.webUrl,
-      });
+      expect(findItemsList().props('items').length).toBe(maxItems);
     });
 
     it('does not render the empty text slot', () => {
       expect(findEmptyText().exists()).toBe(false);
     });
   });
-
-  describe('when displaying search results', () => {
-    beforeEach(() => {
-      window.localStorage.setItem(storageKey, cachedFrequentProjects);
-    });
-
-    it('render the search title', () => {
-      const searchResults = [{ id: 1 }];
-      createWrapper({ props: { isSearch: true, searchResults } });
-
-      expect(findListTitle().text()).toBe(searchTitle);
-    });
-
-    it('shows search results instead of cached items', () => {
-      const searchResults = [{ id: 1 }];
-      createWrapper({ props: { isSearch: true, searchResults } });
-      const firstNavItem = findNavItems().at(0);
-
-      expect(firstNavItem.props('item')).toEqual(searchResults[0]);
-    });
-
-    it('shows the no results text if search results are empty', () => {
-      const searchResults = [];
-      createWrapper({ props: { isSearch: true, searchResults } });
-
-      expect(findNavItems().length).toEqual(0);
-      expect(findEmptyText().text()).toBe(noResultsText);
-    });
-  });
 });
diff --git a/spec/frontend/super_sidebar/components/frequent_projects_list_spec.js b/spec/frontend/super_sidebar/components/frequent_projects_list_spec.js
deleted file mode 100644
index 35c8b2721bf..00000000000
--- a/spec/frontend/super_sidebar/components/frequent_projects_list_spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { s__ } from '~/locale';
-import FrequentProjectsList from '~/super_sidebar/components//frequent_projects_list.vue';
-import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
-import NavItem from '~/super_sidebar/components/nav_item.vue';
-import { MAX_FREQUENT_PROJECTS_COUNT } from '~/super_sidebar/constants';
-
-const username = 'root';
-const viewAllLink = '/path/to/projects';
-const storageKey = `${username}/frequent-projects`;
-
-describe('FrequentProjectsList component', () => {
-  let wrapper;
-
-  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
-  const findViewAllLink = () => wrapper.findComponent(NavItem);
-
-  const createWrapper = () => {
-    wrapper = shallowMountExtended(FrequentProjectsList, {
-      propsData: {
-        username,
-        viewAllLink,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it('passes the correct props to the frequent items list', () => {
-    expect(findFrequentItemsList().props()).toEqual({
-      title: s__('Navigation|Frequent projects'),
-      searchTitle: s__('Navigation|Projects'),
-      storageKey,
-      maxItems: MAX_FREQUENT_PROJECTS_COUNT,
-      pristineText: s__('Navigation|Projects you visit often will appear here.'),
-      noResultsText: s__('Navigation|No project matches found'),
-      isSearch: false,
-      searchResults: [],
-    });
-  });
-
-  it('renders the "View all..." item', () => {
-    expect(findViewAllLink().props('item')).toEqual({
-      icon: 'project',
-      link: viewAllLink,
-      title: s__('Navigation|View all projects'),
-    });
-  });
-});
diff --git a/spec/frontend/super_sidebar/components/groups_list_spec.js b/spec/frontend/super_sidebar/components/groups_list_spec.js
new file mode 100644
index 00000000000..6aee895f611
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/groups_list_spec.js
@@ -0,0 +1,87 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import GroupsList from '~/super_sidebar/components/groups_list.vue';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { MAX_FREQUENT_GROUPS_COUNT } from '~/super_sidebar/constants';
+
+const username = 'root';
+const viewAllLink = '/path/to/groups';
+const storageKey = `${username}/frequent-groups`;
+
+describe('GroupsList component', () => {
+  let wrapper;
+
+  const findSearchResults = () => wrapper.findComponent(SearchResults);
+  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
+  const findViewAllLink = () => wrapper.findComponent(NavItem);
+
+  const itRendersViewAllItem = () => {
+    it('renders the "View all..." item', () => {
+      expect(findViewAllLink().props('item')).toEqual({
+        icon: 'group',
+        link: viewAllLink,
+        title: s__('Navigation|View all groups'),
+      });
+    });
+  };
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(GroupsList, {
+      propsData: {
+        username,
+        viewAllLink,
+        ...props,
+      },
+    });
+  };
+
+  describe('when displaying search results', () => {
+    const searchResults = ['A search result'];
+
+    beforeEach(() => {
+      createWrapper({
+        isSearch: true,
+        searchResults,
+      });
+    });
+
+    it('renders the search results component', () => {
+      expect(findSearchResults().exists()).toBe(true);
+      expect(findFrequentItemsList().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the search results component', () => {
+      expect(findSearchResults().props()).toEqual({
+        title: s__('Navigation|Groups'),
+        noResultsText: s__('Navigation|No group matches found'),
+        searchResults,
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+
+  describe('when displaying frequent groups', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders the frequent items list', () => {
+      expect(findFrequentItemsList().exists()).toBe(true);
+      expect(findSearchResults().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the frequent items list', () => {
+      expect(findFrequentItemsList().props()).toEqual({
+        title: s__('Navigation|Frequent groups'),
+        storageKey,
+        maxItems: MAX_FREQUENT_GROUPS_COUNT,
+        pristineText: s__('Navigation|Groups you visit often will appear here.'),
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/items_list_spec.js b/spec/frontend/super_sidebar/components/items_list_spec.js
new file mode 100644
index 00000000000..8e00984f500
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/items_list_spec.js
@@ -0,0 +1,63 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { cachedFrequentProjects } from '../mock_data';
+
+const mockItems = JSON.parse(cachedFrequentProjects);
+const [firstMockedProject] = mockItems;
+
+describe('ItemsList component', () => {
+  let wrapper;
+
+  const findNavItems = () => wrapper.findAllComponents(NavItem);
+
+  const createWrapper = ({ props = {}, slots = {} } = {}) => {
+    wrapper = shallowMountExtended(ItemsList, {
+      propsData: {
+        ...props,
+      },
+      slots,
+    });
+  };
+
+  it('does not render nav items when there are no items', () => {
+    createWrapper();
+
+    expect(findNavItems().length).toBe(0);
+  });
+
+  it('renders one nav item per item', () => {
+    createWrapper({
+      props: {
+        items: mockItems,
+      },
+    });
+
+    expect(findNavItems().length).not.toBe(0);
+    expect(findNavItems().length).toBe(mockItems.length);
+  });
+
+  it('passes the correct props to the nav items', () => {
+    createWrapper({
+      props: {
+        items: mockItems,
+      },
+    });
+    const firstNavItem = findNavItems().at(0);
+
+    expect(firstNavItem.props('item')).toEqual(firstMockedProject);
+  });
+
+  it('renders the `view-all-items` slot', () => {
+    const testId = 'view-all-items';
+    createWrapper({
+      slots: {
+        'view-all-items': {
+          template: `<div data-testid="${testId}" />`,
+        },
+      },
+    });
+
+    expect(wrapper.findByTestId(testId).exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/projects_list_spec.js b/spec/frontend/super_sidebar/components/projects_list_spec.js
new file mode 100644
index 00000000000..cdc003b14e0
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/projects_list_spec.js
@@ -0,0 +1,82 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import ProjectsList from '~/super_sidebar/components/projects_list.vue';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { MAX_FREQUENT_PROJECTS_COUNT } from '~/super_sidebar/constants';
+
+const username = 'root';
+const viewAllLink = '/path/to/projects';
+const storageKey = `${username}/frequent-projects`;
+
+describe('ProjectsList component', () => {
+  let wrapper;
+
+  const findSearchResults = () => wrapper.findComponent(SearchResults);
+  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
+  const findViewAllLink = () => wrapper.findComponent(NavItem);
+
+  const itRendersViewAllItem = () => {
+    it('renders the "View all..." item', () => {
+      expect(findViewAllLink().props('item')).toEqual({
+        icon: 'project',
+        link: viewAllLink,
+        title: s__('Navigation|View all projects'),
+      });
+    });
+  };
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(ProjectsList, {
+      propsData: {
+        username,
+        viewAllLink,
+        ...props,
+      },
+    });
+  };
+
+  describe('when displaying search results', () => {
+    const searchResults = ['A search result'];
+
+    beforeEach(() => {
+      createWrapper({
+        isSearch: true,
+        searchResults,
+      });
+    });
+
+    it('renders the search results component', () => {
+      expect(findSearchResults().exists()).toBe(true);
+      expect(findFrequentItemsList().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the search results component', () => {
+      expect(findSearchResults().props()).toEqual({
+        title: s__('Navigation|Projects'),
+        noResultsText: s__('Navigation|No project matches found'),
+        searchResults,
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+
+  describe('when displaying frequent projects', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('passes the correct props to the frequent items list', () => {
+      expect(findFrequentItemsList().props()).toEqual({
+        title: s__('Navigation|Frequent projects'),
+        storageKey,
+        maxItems: MAX_FREQUENT_PROJECTS_COUNT,
+        pristineText: s__('Navigation|Projects you visit often will appear here.'),
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/search_results_spec.js b/spec/frontend/super_sidebar/components/search_results_spec.js
new file mode 100644
index 00000000000..dd48935c138
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/search_results_spec.js
@@ -0,0 +1,57 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
+
+const title = s__('Navigation|PROJECTS');
+const noResultsText = s__('Navigation|No project matches found');
+
+describe('SearchResults component', () => {
+  let wrapper;
+
+  const findListTitle = () => wrapper.findByTestId('list-title');
+  const findItemsList = () => wrapper.findComponent(ItemsList);
+  const findEmptyText = () => wrapper.findByTestId('empty-text');
+
+  const createWrapper = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(SearchResults, {
+      propsData: {
+        title,
+        noResultsText,
+        ...props,
+      },
+    });
+  };
+
+  describe('default state', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it("renders the list's title", () => {
+      expect(findListTitle().text()).toBe(title);
+    });
+
+    it('renders the empty text', () => {
+      expect(findEmptyText().exists()).toBe(true);
+      expect(findEmptyText().text()).toBe(noResultsText);
+    });
+  });
+
+  describe('when displaying search results', () => {
+    it('shows search results', () => {
+      const searchResults = [{ id: 1 }];
+      createWrapper({ props: { isSearch: true, searchResults } });
+
+      expect(findItemsList().props('items')[0]).toEqual(searchResults[0]);
+    });
+
+    it('shows the no results text if search results are empty', () => {
+      const searchResults = [];
+      createWrapper({ props: { isSearch: true, searchResults } });
+
+      expect(findItemsList().props('items').length).toEqual(0);
+      expect(findEmptyText().text()).toBe(noResultsText);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
index 8cb773ddfa3..681ff6c8dd3 100644
--- a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
@@ -63,6 +63,18 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
   const findContentEditor = () => wrapper.findComponent(ContentEditor);
 
+  const enableContentEditor = async () => {
+    findMarkdownField().vm.$emit('enableContentEditor');
+    await nextTick();
+    await waitForPromises();
+  };
+
+  const enableMarkdownEditor = async () => {
+    findContentEditor().vm.$emit('enableMarkdownEditor');
+    await nextTick();
+    await waitForPromises();
+  };
+
   beforeEach(() => {
     window.uploads_path = 'uploads';
     mock = new MockAdapter(axios);
@@ -90,6 +102,18 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
   });
 
+  it('enables content editor switcher when contentEditorEnabled prop is true', () => {
+    buildWrapper({ propsData: { enableContentEditor: true } });
+
+    expect(findMarkdownField().text()).toContain('Rich text');
+  });
+
+  it('hides content editor switcher when contentEditorEnabled prop is false', () => {
+    buildWrapper({ propsData: { enableContentEditor: false } });
+
+    expect(findMarkdownField().text()).not.toContain('Rich text');
+  });
+
   it('passes down any additional props to markdown field component', () => {
     const propsData = {
       line: { text: 'hello world', richText: 'hello world' },
@@ -110,6 +134,36 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
   });
 
+  describe('disabled', () => {
+    it('disables markdown field when disabled prop is true', () => {
+      buildWrapper({ propsData: { disabled: true } });
+
+      expect(findMarkdownField().find('textarea').attributes('disabled')).toBe('disabled');
+    });
+
+    it('enables markdown field when disabled prop is false', () => {
+      buildWrapper({ propsData: { disabled: false } });
+
+      expect(findMarkdownField().find('textarea').attributes('disabled')).toBe(undefined);
+    });
+
+    it('disables content editor when disabled prop is true', async () => {
+      buildWrapper({ propsData: { disabled: true } });
+
+      await enableContentEditor();
+
+      expect(findContentEditor().props('editable')).toBe(false);
+    });
+
+    it('enables content editor when disabled prop is false', async () => {
+      buildWrapper({ propsData: { disabled: false } });
+
+      await enableContentEditor();
+
+      expect(findContentEditor().props('editable')).toBe(true);
+    });
+  });
+
   describe('autosize', () => {
     it('autosizes the textarea when the value changes', async () => {
       buildWrapper();
@@ -129,12 +183,10 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
 
     it('does not autosize the textarea if markdown editor is disabled', async () => {
       buildWrapper();
-      findMarkdownField().vm.$emit('enableContentEditor');
+      await enableContentEditor();
 
       wrapper.setProps({ value: 'Lots of newlines\n\n\n\n\n\n\nMore content\n\n\nand newlines' });
 
-      await nextTick();
-      await waitForPromises();
       expect(Autosize.update).not.toHaveBeenCalled();
     });
   });
@@ -200,9 +252,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   it(`emits ${EDITING_MODE_CONTENT_EDITOR} event when enableContentEditor emitted from markdown editor`, async () => {
     buildWrapper();
 
-    findMarkdownField().vm.$emit('enableContentEditor');
-
-    await nextTick();
+    await enableContentEditor();
 
     expect(wrapper.emitted(EDITING_MODE_CONTENT_EDITOR)).toHaveLength(1);
   });
@@ -212,11 +262,8 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       stubs: { ContentEditor: stubComponent(ContentEditor) },
     });
 
-    findMarkdownField().vm.$emit('enableContentEditor');
-
-    await nextTick();
-
-    findContentEditor().vm.$emit('enableMarkdownEditor');
+    await enableContentEditor();
+    await enableMarkdownEditor();
 
     expect(wrapper.emitted(EDITING_MODE_MARKDOWN_FIELD)).toHaveLength(1);
   });
@@ -262,9 +309,9 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
 
     describe(`when markdown field triggers enableContentEditor event`, () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         buildWrapper();
-        findMarkdownField().vm.$emit('enableContentEditor');
+        await enableContentEditor();
       });
 
       it('displays the content editor', () => {
@@ -300,9 +347,9 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   });
 
   describe(`when editingMode is ${EDITING_MODE_CONTENT_EDITOR}`, () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       buildWrapper({ propsData: { autosaveKey: 'issue/1234' } });
-      findMarkdownField().vm.$emit('enableContentEditor');
+      await enableContentEditor();
     });
 
     describe('when autofocus is true', () => {
@@ -343,9 +390,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
 
     describe(`when richText editor triggers enableMarkdownEditor event`, () => {
-      beforeEach(() => {
-        findContentEditor().vm.$emit('enableMarkdownEditor');
-      });
+      beforeEach(enableMarkdownEditor);
 
       it('hides the content editor', () => {
         expect(findContentEditor().exists()).toBe(false);
diff --git a/spec/helpers/artifacts_helper_spec.rb b/spec/helpers/artifacts_helper_spec.rb
index cf48f0ecc39..7c577cbf11c 100644
--- a/spec/helpers/artifacts_helper_spec.rb
+++ b/spec/helpers/artifacts_helper_spec.rb
@@ -17,6 +17,7 @@ RSpec.describe ArtifactsHelper, feature_category: :build_artifacts do
     it 'returns expected data' do
       expect(subject).to include({
         project_path: project.full_path,
+        project_id: project.id,
         artifacts_management_feedback_image_path: match_asset_path('illustrations/chat-bubble-sm.svg')
       })
     end
diff --git a/spec/support/helpers/content_editor_helpers.rb b/spec/support/helpers/content_editor_helpers.rb
new file mode 100644
index 00000000000..c12fd1fbbd7
--- /dev/null
+++ b/spec/support/helpers/content_editor_helpers.rb
@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module ContentEditorHelpers
+  def switch_to_content_editor
+    click_button _('Viewing markdown')
+    click_button _('Rich text')
+  end
+
+  def type_in_content_editor(keys)
+    find(content_editor_testid).send_keys keys
+  end
+
+  def open_insert_media_dropdown
+    page.find('svg[data-testid="media-icon"]').click
+  end
+
+  def set_source_editor_content(content)
+    find('.js-gfm-input').set content
+  end
+
+  def expect_formatting_menu_to_be_visible
+    expect(page).to have_css('[data-testid="formatting-bubble-menu"]')
+  end
+
+  def expect_formatting_menu_to_be_hidden
+    expect(page).not_to have_css('[data-testid="formatting-bubble-menu"]')
+  end
+
+  def expect_media_bubble_menu_to_be_visible
+    expect(page).to have_css('[data-testid="media-bubble-menu"]')
+  end
+
+  def upload_asset(fixture_name)
+    attach_file('content_editor_image', Rails.root.join('spec', 'fixtures', fixture_name), make_visible: true)
+  end
+
+  def wait_until_hidden_field_is_updated(value)
+    expect(page).to have_field(with: value, type: 'hidden')
+  end
+
+  def display_media_bubble_menu(media_element_selector, fixture_file)
+    upload_asset fixture_file
+
+    wait_for_requests
+
+    expect(page).to have_css(media_element_selector)
+
+    page.find(media_element_selector).click
+  end
+
+  def click_edit_diagram_button
+    page.find('[data-testid="edit-diagram"]').click
+  end
+
+  def expect_drawio_editor_is_opened
+    expect(page).to have_css('#drawio-frame', visible: :hidden)
+  end
+end
diff --git a/spec/support/shared_examples/features/content_editor_shared_examples.rb b/spec/support/shared_examples/features/content_editor_shared_examples.rb
index 05b5b8cac08..7582e67efbd 100644
--- a/spec/support/shared_examples/features/content_editor_shared_examples.rb
+++ b/spec/support/shared_examples/features/content_editor_shared_examples.rb
@@ -1,54 +1,9 @@
 # frozen_string_literal: true
 
 RSpec.shared_examples 'edits content using the content editor' do
-  let(:content_editor_testid) { '[data-testid="content-editor"] [contenteditable].ProseMirror' }
-
-  def switch_to_content_editor
-    click_button _('Viewing markdown')
-    click_button _('Rich text')
-  end
-
-  def type_in_content_editor(keys)
-    find(content_editor_testid).send_keys keys
-  end
-
-  def open_insert_media_dropdown
-    page.find('svg[data-testid="media-icon"]').click
-  end
-
-  def set_source_editor_content(content)
-    find('.js-gfm-input').set content
-  end
-
-  def expect_formatting_menu_to_be_visible
-    expect(page).to have_css('[data-testid="formatting-bubble-menu"]')
-  end
-
-  def expect_formatting_menu_to_be_hidden
-    expect(page).not_to have_css('[data-testid="formatting-bubble-menu"]')
-  end
-
-  def expect_media_bubble_menu_to_be_visible
-    expect(page).to have_css('[data-testid="media-bubble-menu"]')
-  end
+  include ContentEditorHelpers
 
-  def upload_asset(fixture_name)
-    attach_file('content_editor_image', Rails.root.join('spec', 'fixtures', fixture_name), make_visible: true)
-  end
-
-  def wait_until_hidden_field_is_updated(value)
-    expect(page).to have_field('wiki[content]', with: value, type: 'hidden')
-  end
-
-  def display_media_bubble_menu(media_element_selector, fixture_file)
-    upload_asset fixture_file
-
-    wait_for_requests
-
-    expect(page).to have_css(media_element_selector)
-
-    page.find(media_element_selector).click
-  end
+  let(:content_editor_testid) { '[data-testid="content-editor"] [contenteditable].ProseMirror' }
 
   it 'saves page content in local storage if the user navigates away' do
     switch_to_content_editor
@@ -62,16 +17,6 @@ RSpec.shared_examples 'edits content using the content editor' do
     refresh
 
     expect(page).to have_text('Typing text in the content editor')
-
-    refresh # also retained after second refresh
-
-    expect(page).to have_text('Typing text in the content editor')
-
-    click_link 'Cancel' # draft is deleted on cancel
-
-    page.go_back
-
-    expect(page).not_to have_text('Typing text in the content editor')
   end
 
   describe 'formatting bubble menu' do
@@ -117,33 +62,6 @@ RSpec.shared_examples 'edits content using the content editor' do
     end
   end
 
-  describe 'diagrams.net editor' do
-    def click_edit_diagram_button
-      page.find('[data-testid="edit-diagram"]').click
-    end
-
-    def expect_drawio_editor_is_opened
-      expect(page).to have_css('#drawio-frame', visible: :hidden)
-    end
-
-    before do
-      switch_to_content_editor
-
-      open_insert_media_dropdown
-    end
-
-    it 'displays correct media bubble menu with edit diagram button' do
-      display_media_bubble_menu '[data-testid="content_editor_editablebox"] img[src]', 'diagram.drawio.svg'
-
-      expect_formatting_menu_to_be_hidden
-      expect_media_bubble_menu_to_be_visible
-
-      click_edit_diagram_button
-
-      expect_drawio_editor_is_opened
-    end
-  end
-
   describe 'code block' do
     before do
       visit(profile_preferences_path)
@@ -255,7 +173,7 @@ RSpec.shared_examples 'edits content using the content editor' do
     before do
       if defined?(project)
         create(:issue, project: project, title: 'My Cool Linked Issue')
-        create(:merge_request, source_project: project, title: 'My Cool Merge Request')
+        create(:merge_request, source_project: project, source_branch: 'branch-1', title: 'My Cool Merge Request')
         create(:label, project: project, title: 'My Cool Label')
         create(:milestone, project: project, title: 'My Cool Milestone')
 
@@ -264,7 +182,7 @@ RSpec.shared_examples 'edits content using the content editor' do
         project = create(:project, group: group)
 
         create(:issue, project: project, title: 'My Cool Linked Issue')
-        create(:merge_request, source_project: project, title: 'My Cool Merge Request')
+        create(:merge_request, source_project: project, source_branch: 'branch-1', title: 'My Cool Merge Request')
         create(:group_label, group: group, title: 'My Cool Label')
         create(:milestone, group: group, title: 'My Cool Milestone')
 
@@ -281,7 +199,9 @@ RSpec.shared_examples 'edits content using the content editor' do
 
       expect(find(suggestions_dropdown)).to have_text('abc123')
       expect(find(suggestions_dropdown)).to have_text('all')
-      expect(find(suggestions_dropdown)).to have_text('Group Members (2)')
+      expect(find(suggestions_dropdown)).to have_text('Group Members')
+
+      type_in_content_editor 'bc'
 
       send_keys [:arrow_down, :enter]
 
@@ -362,3 +282,24 @@ RSpec.shared_examples 'edits content using the content editor' do
     end
   end
 end
+
+RSpec.shared_examples 'inserts diagrams.net diagram using the content editor' do
+  include ContentEditorHelpers
+
+  before do
+    switch_to_content_editor
+
+    open_insert_media_dropdown
+  end
+
+  it 'displays correct media bubble menu with edit diagram button' do
+    display_media_bubble_menu '[data-testid="content_editor_editablebox"] img[src]', 'diagram.drawio.svg'
+
+    expect_formatting_menu_to_be_hidden
+    expect_media_bubble_menu_to_be_visible
+
+    click_edit_diagram_button
+
+    expect_drawio_editor_is_opened
+  end
+end
diff --git a/spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb b/spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb
index 0334187e4b1..c1e4185e058 100644
--- a/spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb
+++ b/spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb
@@ -150,6 +150,7 @@ RSpec.shared_examples 'User updates wiki page' do
     end
 
     it_behaves_like 'edits content using the content editor'
+    it_behaves_like 'inserts diagrams.net diagram using the content editor'
     it_behaves_like 'autocompletes items'
   end
 
-- 
cgit v1.2.1