From 0653e08efd039a5905f3fa4f6e9cef9f5d2f799c Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 20 Sep 2021 13:18:24 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-3-stable-ee

---
 app/assets/javascripts/alert_management/list.js    |    1 +
 app/assets/javascripts/analytics/shared/utils.js   |    5 +
 .../javascripts/analytics/usage_trends/index.js    |    2 +-
 app/assets/javascripts/api.js                      |    8 +
 app/assets/javascripts/api/projects_api.js         |    8 +
 .../two_factor_auth/components/recovery_codes.vue  |    2 +-
 app/assets/javascripts/autosave.js                 |    2 +-
 .../javascripts/badges/components/badge_form.vue   |   11 +-
 .../batch_comments/components/draft_note.vue       |    3 +-
 .../batch_comments/components/review_bar.vue       |   10 +-
 app/assets/javascripts/batch_comments/constants.js |    2 +
 app/assets/javascripts/batch_comments/index.js     |   13 +-
 .../behaviors/markdown/nodes/playable.js           |   40 +-
 .../javascripts/behaviors/shortcuts/keybindings.js |    2 +-
 .../behaviors/shortcuts/shortcuts_toggle.vue       |    2 +-
 app/assets/javascripts/blob/blob_file_dropzone.js  |    1 -
 app/assets/javascripts/blob/notebook/index.js      |    3 +
 .../javascripts/blob/notebook/notebook_viewer.vue  |    6 +
 .../blob/pipeline_tour_success_modal.vue           |    4 +-
 .../suggest_gitlab_ci_yml/components/popover.vue   |    2 +-
 app/assets/javascripts/boards/boards_util.js       |   12 +-
 .../boards/components/board_add_new_column.vue     |   32 +-
 .../javascripts/boards/components/board_app.vue    |   29 +
 .../boards/components/board_card_deprecated.vue    |   61 -
 .../boards/components/board_card_inner.vue         |    9 +
 .../components/board_card_layout_deprecated.vue    |  101 --
 .../boards/components/board_column_deprecated.vue  |  112 --
 .../boards/components/board_content.vue            |   31 +-
 .../boards/components/board_content_sidebar.vue    |    2 +-
 .../javascripts/boards/components/board_form.vue   |   19 +-
 .../javascripts/boards/components/board_list.vue   |    4 +-
 .../boards/components/board_list_deprecated.vue    |  459 -----
 .../boards/components/board_list_header.vue        |    2 +-
 .../components/board_list_header_deprecated.vue    |  361 ----
 .../components/board_new_issue_deprecated.vue      |  138 --
 .../boards/components/board_settings_sidebar.vue   |   53 +-
 .../javascripts/boards/components/board_sidebar.js |  115 --
 .../components/boards_selector_deprecated.vue      |  360 ----
 .../boards/components/config_toggle.vue            |    8 -
 .../components/issue_board_filtered_search.vue     |   47 +-
 .../components/issue_card_inner_deprecated.vue     |  247 ---
 .../components/issue_time_estimate_deprecated.vue  |   48 -
 .../boards/components/new_list_dropdown.js         |  119 --
 .../components/project_select_deprecated.vue       |  146 --
 app/assets/javascripts/boards/config_toggle.js     |    3 +-
 app/assets/javascripts/boards/constants.js         |    5 +
 app/assets/javascripts/boards/ee_functions.js      |    4 -
 .../javascripts/boards/filtered_search_boards.js   |   15 +-
 .../graphql/group_board_iterations.query.graphql   |   10 +
 .../boards/graphql/issue.fragment.graphql          |    1 +
 .../graphql/project_board_iterations.query.graphql |   10 +
 .../graphql/project_milestones.query.graphql       |    2 +-
 app/assets/javascripts/boards/index.js             |  344 +---
 app/assets/javascripts/boards/models/assignee.js   |   13 -
 app/assets/javascripts/boards/models/issue.js      |   99 --
 app/assets/javascripts/boards/models/iteration.js  |    9 -
 app/assets/javascripts/boards/models/label.js      |   11 -
 app/assets/javascripts/boards/models/list.js       |  182 --
 app/assets/javascripts/boards/models/milestone.js  |   15 -
 app/assets/javascripts/boards/models/project.js    |    7 -
 .../boards/mount_multiple_boards_switcher.js       |   15 +-
 app/assets/javascripts/boards/stores/actions.js    |   74 +-
 .../javascripts/boards/stores/boards_store.js      |  883 ----------
 .../javascripts/boards/stores/boards_store_ee.js   |    5 -
 app/assets/javascripts/boards/stores/getters.js    |    6 +-
 .../javascripts/boards/stores/mutation_types.js    |    4 +
 app/assets/javascripts/boards/stores/mutations.js  |   18 +-
 app/assets/javascripts/boards/stores/state.js      |    2 +
 .../javascripts/captcha/init_recaptcha_script.js   |    2 +-
 .../components/ci_variable_modal.vue               |    2 +-
 .../javascripts/ci_variable_list/constants.js      |    2 +-
 app/assets/javascripts/clusters/clusters_bundle.js |    8 +-
 .../components/remove_cluster_confirmation.vue     |    3 +-
 .../clusters_list/components/clusters.vue          |    2 +
 app/assets/javascripts/commit/image_file.js        |    7 +-
 .../commit/pipelines/pipelines_bundle.js           |    9 +-
 app/assets/javascripts/commit/pipelines/utils.js   |   11 +
 .../components/project_form_group.vue              |   37 +-
 .../content_editor/components/content_editor.vue   |    6 +-
 .../components/formatting_bubble_menu.vue          |    6 +-
 .../content_editor/components/wrappers/image.vue   |    1 +
 .../components/wrappers/table_cell_base.vue        |  142 ++
 .../components/wrappers/table_cell_body.vue        |   23 +
 .../components/wrappers/table_cell_header.vue      |   23 +
 app/assets/javascripts/content_editor/constants.js |    4 +
 .../content_editor/content_editor.stories.js       |   27 +
 .../javascripts/content_editor/extensions/audio.js |    9 +
 .../content_editor/extensions/blockquote.js        |   34 +-
 .../content_editor/extensions/bullet_list.js       |   20 +-
 .../extensions/code_block_highlight.js             |    6 +-
 .../content_editor/extensions/description_item.js  |   49 +
 .../content_editor/extensions/description_list.js  |   23 +
 .../content_editor/extensions/division.js          |   17 +
 .../javascripts/content_editor/extensions/emoji.js |   18 +-
 .../content_editor/extensions/figure.js            |   16 +
 .../content_editor/extensions/figure_caption.js    |   16 +
 .../content_editor/extensions/html_marks.js        |   66 +
 .../javascripts/content_editor/extensions/image.js |   23 +-
 .../content_editor/extensions/inline_diff.js       |    6 +-
 .../javascripts/content_editor/extensions/link.js  |   16 +-
 .../content_editor/extensions/ordered_list.js      |   16 +-
 .../content_editor/extensions/playable.js          |   66 +
 .../content_editor/extensions/reference.js         |   41 +-
 .../content_editor/extensions/subscript.js         |   10 +-
 .../content_editor/extensions/superscript.js       |   10 +-
 .../content_editor/extensions/table_cell.js        |    9 +-
 .../content_editor/extensions/table_header.js      |    8 +-
 .../content_editor/extensions/task_item.js         |    6 +-
 .../content_editor/extensions/task_list.js         |   28 +-
 .../javascripts/content_editor/extensions/video.js |   10 +
 .../services/create_content_editor.js              |   16 +
 .../content_editor/services/feature_flags.js       |    3 +
 .../content_editor/services/mark_utils.js          |   17 +
 .../content_editor/services/markdown_serializer.js |  163 +-
 .../content_editor/services/markdown_sourcemap.js  |   40 +
 .../services/serialization_helpers.js              |  345 ++++
 .../components/service_credentials_form.vue        |   74 +-
 .../create_cluster/eks_cluster/constants.js        |    4 +-
 .../cycle_analytics/components/banner.vue          |   54 -
 .../cycle_analytics/components/base.vue            |   57 +-
 .../cycle_analytics/components/stage_table.vue     |   13 +-
 .../components/value_stream_filters.vue            |   47 +-
 app/assets/javascripts/cycle_analytics/index.js    |   14 +-
 .../javascripts/cycle_analytics/store/actions.js   |   15 +-
 .../javascripts/cycle_analytics/store/getters.js   |   17 +
 .../javascripts/cycle_analytics/store/mutations.js |   18 +-
 .../javascripts/cycle_analytics/store/state.js     |    3 -
 .../components/deploy_freeze_table.vue             |   63 +-
 .../javascripts/deploy_freeze/store/actions.js     |   16 +
 .../deploy_freeze/store/mutation_types.js          |    4 +
 .../javascripts/deploy_freeze/store/mutations.js   |   33 +-
 .../deprecated_jquery_dropdown/render.js           |    2 +-
 app/assets/javascripts/deprecated_notes.js         | 1746 ++++++++++++++++++++
 .../components/design_notes/design_reply_form.vue  |    2 +-
 .../design_management/components/design_scaler.vue |   18 +-
 .../components/design_sidebar.vue                  |    2 +-
 .../design_management/components/image.vue         |   22 +
 .../graphql/fragments/version.fragment.graphql     |    7 +
 .../mutations/upload_design.mutation.graphql       |    6 +-
 .../design_management/pages/design/index.vue       |   12 +-
 .../javascripts/design_management/pages/index.vue  |    3 +
 .../utils/design_management_utils.js               |    7 +
 .../design_management/utils/error_messages.js      |    1 +
 app/assets/javascripts/diffs/components/app.vue    |  113 +-
 .../javascripts/diffs/components/commit_item.vue   |   10 +-
 .../javascripts/diffs/components/diff_file.vue     |    5 +-
 .../diffs/components/diff_file_header.vue          |    4 +-
 .../javascripts/diffs/components/diff_row.vue      |    5 +-
 .../javascripts/diffs/components/diff_view.vue     |    5 +-
 .../javascripts/diffs/components/pre_renderer.vue  |    1 -
 app/assets/javascripts/diffs/constants.js          |    5 -
 app/assets/javascripts/diffs/index.js              |   96 +-
 app/assets/javascripts/diffs/store/actions.js      |   22 +-
 app/assets/javascripts/diffs/store/getters.js      |    3 +
 .../javascripts/diffs/store/modules/diff_state.js  |    6 +-
 .../javascripts/diffs/store/mutation_types.js      |    2 +-
 app/assets/javascripts/diffs/store/mutations.js    |    4 +-
 app/assets/javascripts/diffs/utils/preferences.js  |   13 -
 app/assets/javascripts/dropzone_input.js           |    8 +-
 app/assets/javascripts/due_date_select.js          |  191 ---
 app/assets/javascripts/emoji/index.js              |    5 +-
 .../emoji/support/unicode_support_map.js           |    2 +-
 .../environments/components/container.vue          |    6 +-
 .../environments/components/edit_environment.vue   |    2 +-
 .../environments/components/environment_form.vue   |   15 +
 .../environments/components/environment_item.vue   |   50 +-
 .../environments/components/environments_app.vue   |   41 +-
 .../components/environments_detail_header.vue      |    8 +-
 .../environments/components/environments_table.vue |    7 -
 app/assets/javascripts/environments/constants.js   |    2 -
 .../folder/environments_folder_bundle.js           |    3 -
 .../folder/environments_folder_view.vue            |    5 -
 app/assets/javascripts/environments/index.js       |    4 +-
 app/assets/javascripts/environments/mount_show.js  |    1 -
 .../components/error_tracking_list.vue             |    2 +-
 .../error_tracking/components/stacktrace_entry.vue |    3 +-
 .../error_tracking/store/list/mutations.js         |    4 +-
 .../error_tracking_settings/components/app.vue     |   79 +-
 .../javascripts/error_tracking_settings/index.js   |   11 +-
 .../error_tracking_settings/store/actions.js       |    4 +
 .../store/mutation_types.js                        |    1 +
 .../error_tracking_settings/store/mutations.js     |   14 +-
 .../error_tracking_settings/store/state.js         |    1 +
 .../javascripts/error_tracking_settings/utils.js   |   10 +-
 app/assets/javascripts/experimentation/utils.js    |   25 +-
 .../feature_flags/components/edit_feature_flag.vue |    2 +-
 .../components/feature_flags_table.vue             |    2 +-
 .../services/recent_searches_service.js            |    2 +-
 .../javascripts/frequent_items/components/app.vue  |    2 +-
 .../components/frequent_items_list_item.vue        |    4 +-
 .../javascripts/frequent_items/store/actions.js    |    2 +-
 app/assets/javascripts/graphql_shared/constants.js |    4 +
 app/assets/javascripts/groups/components/app.vue   |    2 +-
 .../javascripts/groups/components/groups.vue       |    8 +-
 .../groups/components/invite_members_banner.vue    |   18 +-
 .../javascripts/groups/components/item_stats.vue   |   11 +-
 .../groups/init_invite_members_banner.js           |   13 +-
 .../javascripts/header_search/components/app.vue   |   83 +
 .../components/header_search_default_items.vue     |   42 +
 .../components/header_search_scoped_items.vue      |   31 +
 app/assets/javascripts/header_search/constants.js  |   17 +
 app/assets/javascripts/header_search/index.js      |   26 +
 .../javascripts/header_search/store/actions.js     |    5 +
 .../javascripts/header_search/store/getters.js     |  135 ++
 .../javascripts/header_search/store/index.js       |   18 +
 .../header_search/store/mutation_types.js          |    1 +
 .../javascripts/header_search/store/mutations.js   |    7 +
 .../javascripts/header_search/store/state.js       |    8 +
 .../components/commit_sidebar/success_message.vue  |    3 +-
 .../javascripts/ide/components/error_message.vue   |    8 +-
 .../javascripts/ide/components/jobs/detail.vue     |    3 +-
 app/assets/javascripts/ide/services/terminals.js   |    4 +-
 app/assets/javascripts/ide/utils.js                |    5 +-
 .../components/import_actions_cell.vue             |   69 +
 .../components/import_source_cell.vue              |   53 +
 .../import_groups/components/import_table.vue      |   76 +-
 .../components/import_target_cell.vue              |   57 +-
 .../import_groups/graphql/client_factory.js        |   89 +-
 .../bulk_import_source_group_item.fragment.graphql |    4 +
 .../mutations/set_import_progress.mutation.graphql |   18 +-
 .../graphql/services/source_groups_manager.js      |   24 +-
 .../import_groups/graphql/typedefs.graphql         |   13 +-
 .../import_entities/import_groups/utils.js         |    9 +
 .../components/import_projects_table.vue           |    4 +-
 .../import_projects/store/actions.js               |    4 +-
 .../import_projects/store/mutations.js             |   17 +-
 app/assets/javascripts/incidents/list.js           |    2 +-
 app/assets/javascripts/init_changes_dropdown.js    |   12 -
 app/assets/javascripts/init_deprecated_notes.js    |   10 +
 app/assets/javascripts/init_diff_stats_dropdown.js |   30 +
 app/assets/javascripts/init_issuable_sidebar.js    |   10 +-
 app/assets/javascripts/init_notes.js               |   10 -
 .../edit/components/jira_trigger_fields.vue        |    4 +-
 .../components/import_a_project_modal.vue          |  157 ++
 .../components/invite_members_trigger.vue          |    2 +-
 .../invite_members/components/project_select.vue   |  143 ++
 .../invite_members/init_import_a_project_modal.js  |   23 +
 .../issuable/components/csv_export_modal.vue       |    4 +-
 .../issuable_list/components/issuable_item.vue     |    9 +-
 .../javascripts/issue_show/components/app.vue      |   19 +-
 .../issue_show/components/description.vue          |    3 +-
 .../issue_show/components/locked_warning.vue       |    6 +-
 .../issues_list/components/issuable.vue            |    2 +-
 .../issues_list/components/issues_list_app.vue     |  131 +-
 app/assets/javascripts/issues_list/constants.js    |   22 +-
 app/assets/javascripts/issues_list/index.js        |   22 +-
 .../issues_list/queries/get_issues.query.graphql   |   35 +-
 .../queries/get_issues_count.query.graphql         |   30 -
 .../queries/get_issues_counts.query.graphql        |  105 ++
 .../issues_list/queries/issue.fragment.graphql     |    1 +
 .../issues_list/queries/iteration.fragment.graphql |    4 +
 .../issues_list/queries/label.fragment.graphql     |    6 +
 .../issues_list/queries/milestone.fragment.graphql |    4 +
 .../queries/reorder_issues.mutation.graphql        |    8 +-
 .../queries/search_iterations.query.graphql        |   18 +-
 .../queries/search_labels.query.graphql            |   18 +-
 .../queries/search_milestones.query.graphql        |   16 +-
 .../issues_list/queries/search_users.query.graphql |   20 +-
 .../issues_list/queries/user.fragment.graphql      |    6 +
 .../jira_connect/subscriptions/utils.js            |    4 +-
 app/assets/javascripts/jobs/components/job_app.vue |    8 +-
 .../jobs/components/table/cells/actions_cell.vue   |  183 +-
 .../javascripts/jobs/components/table/constants.js |   23 +
 .../javascripts/jobs/components/table/event_hub.js |    3 +
 .../table/graphql/fragments/job.fragment.graphql   |    3 +
 .../graphql/mutations/job_cancel.mutation.graphql  |   10 +
 .../graphql/mutations/job_play.mutation.graphql    |   10 +
 .../graphql/mutations/job_retry.mutation.graphql   |   10 +
 .../mutations/job_unschedule.mutation.graphql      |   10 +
 .../table/graphql/queries/get_jobs.query.graphql   |    1 +
 .../javascripts/jobs/components/table/index.js     |    5 +
 .../jobs/components/table/jobs_table.vue           |    2 +-
 .../jobs/components/table/jobs_table_app.vue       |   10 +
 app/assets/javascripts/labels_select.js            |   52 +-
 .../javascripts/learn_gitlab/track_learn_gitlab.js |   10 -
 .../javascripts/lib/apollo/instrumentation_link.js |   29 +
 app/assets/javascripts/lib/dompurify.js            |    6 +-
 app/assets/javascripts/lib/graphql.js              |   20 +-
 app/assets/javascripts/lib/logger/hello.js         |   16 +
 .../javascripts/lib/logger/hello_deferred.js       |    5 +
 app/assets/javascripts/lib/logger/index.js         |    6 +
 app/assets/javascripts/lib/utils/accessor.js       |   28 +-
 app/assets/javascripts/lib/utils/common_utils.js   |   11 +-
 .../lib/utils/datetime/date_format_utility.js      |  105 +-
 app/assets/javascripts/lib/utils/dom_utils.js      |   12 +
 app/assets/javascripts/lib/utils/number_utils.js   |    9 +-
 app/assets/javascripts/lib/utils/text_markdown.js  |    4 +-
 app/assets/javascripts/lib/utils/url_utility.js    |   37 -
 app/assets/javascripts/main.js                     |   37 +-
 app/assets/javascripts/main_jh.js                  |    1 +
 app/assets/javascripts/merge_request.js            |   29 +-
 app/assets/javascripts/merge_request_tabs.js       |   71 +-
 app/assets/javascripts/milestone_select.js         |  118 +-
 .../milestones/components/milestone_combobox.vue   |    3 +-
 .../javascripts/milestones/stores/mutations.js     |    4 +-
 .../monitoring/components/charts/empty_chart.vue   |    3 +-
 app/assets/javascripts/mr_notes/index.js           |   36 +-
 app/assets/javascripts/notebook/cells/markdown.vue |   16 +-
 .../javascripts/notebook/cells/output/html.vue     |    9 +-
 app/assets/javascripts/notes.js                    | 1744 -------------------
 .../javascripts/notes/components/comment_form.vue  |   85 +-
 .../notes/components/comment_type_dropdown.vue     |  114 ++
 .../notes/components/diff_with_note.vue            |    7 +-
 .../notes/components/discussion_counter.vue        |    6 +-
 .../discussion_resolve_with_issue_button.vue       |    2 +-
 .../notes/components/note_actions/reply_button.vue |    2 +-
 .../javascripts/notes/components/note_body.vue     |    7 +-
 .../javascripts/notes/components/note_form.vue     |    3 +-
 .../javascripts/notes/components/note_header.vue   |    3 +-
 app/assets/javascripts/notes/stores/actions.js     |    1 +
 .../details/components/package_history.vue         |    1 +
 .../javascripts/packages/shared/constants.js       |    1 +
 .../components/details/additional_metadata.vue     |  105 +-
 .../components/details/metadata/composer.vue       |   55 +
 .../components/details/metadata/conan.vue          |   32 +
 .../components/details/metadata/maven.vue          |   42 +
 .../components/details/metadata/nuget.vue          |   46 +
 .../components/details/metadata/pypi.vue           |   34 +
 .../components/details/package_history.vue         |    1 +
 .../components/details/package_title.vue           |   17 +-
 .../components/list/package_search.vue             |   57 +
 .../components/list/package_title.vue              |   47 +
 .../components/list/packages_list.vue              |  129 ++
 .../components/list/packages_list_app.vue          |  132 ++
 .../components/list/tokens/package_type_token.vue  |   26 +
 .../package_registry/constants.js                  |    1 +
 .../package_registry/pages/list.js                 |   16 +
 .../project/components/registry_settings_app.vue   |    2 +-
 .../index/components/customize_homepage_banner.vue |    2 +-
 .../javascripts/pages/groups/issues/index.js       |   34 +-
 app/assets/javascripts/pages/groups/new/index.js   |    3 +
 .../pages/groups/new/toggle_invite_members.js      |   14 +
 .../javascripts/pages/projects/blob/show/index.js  |    2 +-
 .../pages/projects/commit/show/index.js            |    8 +-
 .../pages/projects/compare/show/index.js           |    4 +-
 .../javascripts/pages/projects/issues/show.js      |    2 +-
 .../pages/projects/issues/show/index.js            |    3 +-
 .../learn_gitlab/components/learn_gitlab.vue       |   78 +
 .../learn_gitlab/components/learn_gitlab_a.vue     |   78 -
 .../learn_gitlab/components/learn_gitlab_b.vue     |  116 --
 .../components/learn_gitlab_section_link.vue       |    2 +-
 .../pages/projects/learn_gitlab/index/index.js     |   10 +-
 .../merge_requests/init_merge_request_show.js      |   13 +-
 .../pages/projects/merge_requests/show/index.js    |   11 +-
 .../new/components/new_project_url_select.vue      |   98 ++
 app/assets/javascripts/pages/projects/new/index.js |   40 +-
 ...es_where_user_can_create_projects.query.graphql |   14 +
 .../pages/projects/packages/packages/show/index.js |   14 +-
 .../shared/components/interval_pattern_input.vue   |    4 +-
 .../components/pipeline_schedules_callout.vue      |    2 +-
 .../pages/projects/project_members/index.js        |    2 +
 .../pages/projects/usage_quotas/index.js           |   23 +
 .../javascripts/pages/projects/wikis/index.js      |    2 +
 .../pages/projects/work_items/index/index.js       |    3 +
 .../pages/sessions/new/signin_tabs_memoizer.js     |    2 +-
 .../components/performance_bar_app.vue             |    8 +-
 .../components/request_selector.vue                |   12 +-
 .../performance_bar/components/request_warning.vue |    9 +-
 .../components/commit/commit_section.vue           |   18 +-
 .../components/editor/text_editor.vue              |   12 +-
 .../components/file_nav/branch_switcher.vue        |    4 +-
 .../file_nav/pipeline_editor_file_nav.vue          |    9 +-
 .../components/header/pipeline_editor_header.vue   |   11 +-
 .../components/header/pipeline_status.vue          |   23 +-
 .../components/pipeline_editor_tabs.vue            |    7 +-
 .../components/ui/pipeline_editor_empty_state.vue  |    5 +-
 .../javascripts/pipeline_editor/constants.js       |    2 +
 .../mutations/update_commit_sha.mutation.graphql   |    3 -
 .../graphql/queries/client/commit_sha.graphql      |    3 -
 .../queries/latest_commit_sha.query.graphql        |   11 +-
 .../pipeline_editor/graphql/resolvers.js           |    9 -
 app/assets/javascripts/pipeline_editor/index.js    |   15 +-
 .../pipeline_editor/pipeline_editor_app.vue        |   61 +-
 .../pipeline_editor/pipeline_editor_home.vue       |   14 +-
 .../pipeline_new/components/pipeline_new_form.vue  |   10 +-
 .../pipelines/components/graph/accessors.js        |   25 -
 .../pipelines/components/graph/constants.js        |    3 -
 .../components/graph/job_group_dropdown.vue        |    8 +-
 .../pipelines/components/graph/job_item.vue        |   20 +-
 .../pipelines/components/graph/linked_pipeline.vue |   32 +-
 .../components/graph/linked_pipelines_column.vue   |    4 +-
 .../components/graph/stage_column_component.vue    |   24 +-
 .../pipelines/components/header_component.vue      |    2 +-
 .../pipelines/components/parsing_utils.js          |   78 +-
 .../pipelines_list/pipeline_multi_actions.vue      |    3 +-
 .../pipelines_list/pipeline_stop_modal.vue         |    3 +-
 .../pipelines_list/pipelines_filtered_search.vue   |   13 +-
 .../components/pipelines_list/pipelines_table.vue  |    1 +
 .../components/pipelines_list/tokens/constants.js  |   52 +
 .../tokens/pipeline_source_token.vue               |   71 +-
 .../pipelines/pipeline_details_bundle.js           |   60 +-
 .../pipelines/pipeline_details_graph.js            |    2 -
 .../javascripts/pipelines/pipeline_test_details.js |   34 +
 app/assets/javascripts/pipelines/utils.js          |   52 +-
 .../javascripts/popovers/components/popovers.vue   |   21 +-
 .../javascripts/project_select_combo_button.js     |    2 +-
 .../components/commit_box_pipeline_mini_graph.vue  |    1 +
 .../queries/get_linked_pipelines.query.graphql     |    1 +
 .../info/init_commit_pipeline_mini_graph.js        |    7 +-
 .../charts/components/pipeline_charts.vue          |   12 +-
 .../javascripts/projects/pipelines/charts/index.js |    2 +-
 app/assets/javascripts/projects/project_new.js     |   22 +-
 .../settings/components/shared_runners_toggle.vue  |    5 +-
 .../components/service_desk_setting.vue            |   54 +-
 .../projects/storage_counter/components/app.vue    |  106 ++
 .../storage_counter/components/storage_table.vue   |   78 +
 .../projects/storage_counter/constants.js          |   61 +
 .../javascripts/projects/storage_counter/index.js  |   51 +
 .../queries/project_storage.query.graphql          |   16 +
 .../javascripts/projects/storage_counter/utils.js  |   40 +
 .../components/terraform_notification.vue          |   53 +-
 .../projects/terraform_notification/constants.js   |    3 +
 .../projects/terraform_notification/index.js       |   14 +-
 .../prometheus_alerts/components/reset_key.vue     |    3 +-
 .../protected_branches/protected_branch_create.js  |    2 +-
 .../javascripts/ref/components/ref_selector.vue    |    3 +-
 .../releases/components/release_block.vue          |    6 +-
 .../javascripts/reports/components/issue_body.js   |   16 +-
 .../javascripts/reports/components/report_item.vue |    6 +-
 .../repository/components/blob_content_viewer.vue  |    6 +-
 .../components/blob_viewers/image_viewer.vue       |   19 +
 .../repository/components/blob_viewers/index.js    |    6 +
 .../repository/components/last_commit.vue          |   10 +-
 .../repository/components/preview/index.vue        |    7 +-
 .../repository/components/table/index.vue          |    4 +-
 .../repository/components/table/row.vue            |    7 +-
 .../repository/components/tree_content.vue         |   21 +-
 app/assets/javascripts/repository/constants.js     |    2 +
 .../javascripts/repository/mixins/preload.js       |    3 +-
 app/assets/javascripts/repository/pages/blob.vue   |   15 +
 app/assets/javascripts/rest_api.js                 |    2 +-
 app/assets/javascripts/right_sidebar.js            |    7 +-
 .../runner/admin_runners/admin_runners_app.vue     |   32 +-
 .../components/runner_filtered_search_bar.vue      |   88 +-
 .../runner/components/runner_update_form.vue       |    2 +-
 .../search_tokens/status_token_config.js           |   32 +
 .../runner/components/search_tokens/tag_token.vue  |    1 +
 .../components/search_tokens/tag_token_config.js   |   12 +
 .../components/search_tokens/type_token_config.js  |   20 +
 app/assets/javascripts/runner/constants.js         |    6 +
 .../runner/graphql/get_group_runners.query.graphql |   35 +
 .../runner/group_runners/group_runners_app.vue     |  137 +-
 .../javascripts/runner/group_runners/index.js      |   11 +-
 .../javascripts/runner/runner_search_utils.js      |    1 -
 .../search/highlight_blob_search_result.js         |    2 +-
 app/assets/javascripts/search/store/actions.js     |    2 +-
 app/assets/javascripts/search/store/utils.js       |    4 +-
 .../security_configuration/components/constants.js |   15 +
 app/assets/javascripts/sentry/sentry_config.js     |    1 -
 .../set_status_modal/set_status_modal_wrapper.vue  |    8 +-
 .../components/assignees/assignee_title.vue        |    2 +-
 .../assignees/sidebar_assignees_widget.vue         |    3 +-
 .../sidebar/components/labels/sidebar_labels.vue   |    5 -
 .../sidebar/components/lock/issuable_lock_form.vue |    2 +-
 .../participants/sidebar_participants_widget.vue   |    6 +
 .../components/reviewers/reviewer_title.vue        |    2 +-
 .../sidebar/components/sidebar_dropdown_widget.vue |    1 +
 .../sidebar/components/sidebar_editable_item.vue   |    2 +-
 .../components/time_tracking/spent_only_pane.vue   |    3 +-
 app/assets/javascripts/sidebar/mount_sidebar.js    |   58 +-
 .../sidebar/services/sidebar_service.js            |    5 -
 app/assets/javascripts/sidebar/sidebar_bundle.js   |    6 +-
 app/assets/javascripts/sidebar/sidebar_mediator.js |   17 -
 .../javascripts/sidebar/stores/sidebar_store.js    |   14 -
 .../javascripts/sidebar/track_invite_members.js    |    6 +-
 app/assets/javascripts/snippet/snippet_show.js     |    4 +-
 .../components/snippet_description_view.vue        |    6 +-
 .../renderers/render_identifier_instance_text.js   |    2 +-
 app/assets/javascripts/tracking/constants.js       |    4 +
 app/assets/javascripts/tracking/index.js           |    7 +-
 app/assets/javascripts/tracking/tracking.js        |   40 +-
 app/assets/javascripts/tracking/utils.js           |   24 +
 app/assets/javascripts/user_popovers.js            |    4 -
 app/assets/javascripts/users_select/index.js       |    5 -
 .../components/mr_widget_related_links.vue         |   12 +-
 .../components/mr_widget_suggest_pipeline.vue      |    4 +-
 .../components/review_app_link.vue                 |    2 +-
 .../components/states/commits_header.vue           |    7 +-
 .../components/states/merge_checks_failed.vue      |   75 +
 .../components/states/mr_widget_rebase.vue         |    3 +-
 .../components/states/new_ready_to_merge.vue       |   49 +
 .../components/states/nothing_to_merge.vue         |    9 +-
 .../components/states/ready_to_merge.vue           |   21 +-
 .../components/states/unresolved_discussions.vue   |    2 +-
 .../components/states/work_in_progress.vue         |    2 +-
 .../components/terraform/terraform_plan.vue        |    2 +-
 .../vue_merge_request_widget/constants.js          |    2 +
 .../javascripts/vue_merge_request_widget/index.js  |    7 +-
 .../mixins/ready_to_merge.js                       |    8 +
 .../vue_merge_request_widget/mr_widget_options.vue |   20 +-
 .../states/new_ready_to_merge.query.graphql        |    9 +
 .../stores/get_state_key.js                        |    6 +-
 .../stores/mr_widget_store.js                      |    9 +
 .../vue_merge_request_widget/stores/state_maps.js  |    2 +
 .../components/system_notes/system_note.vue        |    3 +-
 .../vue_shared/components/awards_list.vue          |   11 +-
 .../components/blob_viewers/simple_viewer.vue      |    5 +-
 .../vue_shared/components/code_block.vue           |    7 +-
 .../components/color_picker/color_picker.vue       |    2 +-
 .../javascripts/vue_shared/components/commit.vue   |   28 +-
 .../content_viewer/viewers/markdown_viewer.vue     |    7 +-
 .../vue_shared/components/diff_stats_dropdown.vue  |  159 ++
 .../components/filtered_search_bar/constants.js    |   17 +-
 .../filtered_search_bar/filtered_search_utils.js   |   11 +-
 .../filtered_search_bar/tokens/milestone_token.vue |   12 +-
 .../vue_shared/components/header_ci_component.vue  |   21 +-
 .../issuable/init_issuable_header_warning.js       |   12 +-
 .../issuable/issuable_header_warnings.vue          |   24 +-
 .../components/issue/related_issuable_item.vue     |    7 +-
 .../vue_shared/components/markdown/field.vue       |   22 +-
 .../components/markdown/suggestion_diff_header.vue |    3 +-
 .../vue_shared/components/markdown/toolbar.vue     |    2 +-
 .../components/notes/noteable_warning.vue          |    5 +-
 .../vue_shared/components/notes/system_note.vue    |    7 +-
 .../paginated_table_with_search_and_tabs.vue       |   15 +-
 .../project_selector/project_list_item.vue         |    3 +-
 .../vue_shared/components/registry/title_area.vue  |   21 +-
 .../runner_aws_deployments_modal.vue               |    8 +-
 .../components/settings/settings_block.stories.js  |   26 +
 .../components/settings/settings_block.vue         |   84 +-
 .../sidebar/labels_select_vue/dropdown_value.vue   |    6 +-
 .../sidebar/labels_select_vue/label_item.vue       |    2 +-
 .../labels_select_widget/dropdown_button.vue       |   42 -
 .../labels_select_widget/dropdown_contents.vue     |  132 +-
 .../dropdown_contents_create_view.vue              |   29 +
 .../dropdown_contents_labels_view.vue              |  145 +-
 .../labels_select_widget/dropdown_title.vue        |   40 -
 .../labels_select_widget/dropdown_value.vue        |   13 +-
 .../graphql/create_label.mutation.graphql          |    2 -
 .../sidebar/labels_select_widget/label_item.vue    |   83 +-
 .../labels_select_widget/labels_select_root.vue    |  278 +---
 .../sidebar/labels_select_widget/store/actions.js  |   12 -
 .../sidebar/labels_select_widget/store/getters.js  |   52 -
 .../sidebar/labels_select_widget/store/index.js    |   12 -
 .../labels_select_widget/store/mutation_types.js   |    8 -
 .../labels_select_widget/store/mutations.js        |   50 -
 .../sidebar/labels_select_widget/store/state.js    |   28 -
 .../sidebar/labels_select_widget/utils.js          |   22 +
 .../storage_counter/usage_graph.stories.js         |   38 +
 .../components/storage_counter/usage_graph.vue     |  148 ++
 .../vue_shared/components/timezone_dropdown.vue    |    2 +-
 .../components/user_popover/user_popover.vue       |   23 +-
 .../vue_shared/security_reports/constants.js       |    1 +
 .../security_reports/store/modules/sast/state.js   |    2 -
 .../store/modules/secret_detection/state.js        |    2 -
 .../webpack_non_compiled_placeholder.js            |   22 +-
 .../javascripts/whats_new/components/feature.vue   |    6 +-
 .../javascripts/work_items/components/app.vue      |    9 +
 .../work_items/graphql/typedefs.graphql            |    0
 app/assets/javascripts/work_items/index.js         |   13 +
 550 files changed, 9735 insertions(+), 9239 deletions(-)
 create mode 100644 app/assets/javascripts/boards/components/board_app.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_card_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_card_layout_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_column_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_list_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_list_header_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/board_sidebar.js
 delete mode 100644 app/assets/javascripts/boards/components/boards_selector_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/issue_card_inner_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/issue_time_estimate_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/components/new_list_dropdown.js
 delete mode 100644 app/assets/javascripts/boards/components/project_select_deprecated.vue
 delete mode 100644 app/assets/javascripts/boards/ee_functions.js
 create mode 100644 app/assets/javascripts/boards/graphql/group_board_iterations.query.graphql
 create mode 100644 app/assets/javascripts/boards/graphql/project_board_iterations.query.graphql
 delete mode 100644 app/assets/javascripts/boards/models/assignee.js
 delete mode 100644 app/assets/javascripts/boards/models/issue.js
 delete mode 100644 app/assets/javascripts/boards/models/iteration.js
 delete mode 100644 app/assets/javascripts/boards/models/label.js
 delete mode 100644 app/assets/javascripts/boards/models/list.js
 delete mode 100644 app/assets/javascripts/boards/models/milestone.js
 delete mode 100644 app/assets/javascripts/boards/models/project.js
 delete mode 100644 app/assets/javascripts/boards/stores/boards_store.js
 delete mode 100644 app/assets/javascripts/boards/stores/boards_store_ee.js
 create mode 100644 app/assets/javascripts/commit/pipelines/utils.js
 create mode 100644 app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
 create mode 100644 app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue
 create mode 100644 app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue
 create mode 100644 app/assets/javascripts/content_editor/content_editor.stories.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/audio.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/description_item.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/description_list.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/division.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/figure.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/figure_caption.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/html_marks.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/playable.js
 create mode 100644 app/assets/javascripts/content_editor/extensions/video.js
 create mode 100644 app/assets/javascripts/content_editor/services/feature_flags.js
 create mode 100644 app/assets/javascripts/content_editor/services/mark_utils.js
 create mode 100644 app/assets/javascripts/content_editor/services/markdown_sourcemap.js
 create mode 100644 app/assets/javascripts/content_editor/services/serialization_helpers.js
 delete mode 100644 app/assets/javascripts/cycle_analytics/components/banner.vue
 create mode 100644 app/assets/javascripts/deprecated_notes.js
 delete mode 100644 app/assets/javascripts/diffs/utils/preferences.js
 delete mode 100644 app/assets/javascripts/due_date_select.js
 create mode 100644 app/assets/javascripts/header_search/components/app.vue
 create mode 100644 app/assets/javascripts/header_search/components/header_search_default_items.vue
 create mode 100644 app/assets/javascripts/header_search/components/header_search_scoped_items.vue
 create mode 100644 app/assets/javascripts/header_search/constants.js
 create mode 100644 app/assets/javascripts/header_search/index.js
 create mode 100644 app/assets/javascripts/header_search/store/actions.js
 create mode 100644 app/assets/javascripts/header_search/store/getters.js
 create mode 100644 app/assets/javascripts/header_search/store/index.js
 create mode 100644 app/assets/javascripts/header_search/store/mutation_types.js
 create mode 100644 app/assets/javascripts/header_search/store/mutations.js
 create mode 100644 app/assets/javascripts/header_search/store/state.js
 create mode 100644 app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue
 create mode 100644 app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
 delete mode 100644 app/assets/javascripts/init_changes_dropdown.js
 create mode 100644 app/assets/javascripts/init_deprecated_notes.js
 create mode 100644 app/assets/javascripts/init_diff_stats_dropdown.js
 delete mode 100644 app/assets/javascripts/init_notes.js
 create mode 100644 app/assets/javascripts/invite_members/components/import_a_project_modal.vue
 create mode 100644 app/assets/javascripts/invite_members/components/project_select.vue
 create mode 100644 app/assets/javascripts/invite_members/init_import_a_project_modal.js
 delete mode 100644 app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql
 create mode 100644 app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql
 create mode 100644 app/assets/javascripts/issues_list/queries/iteration.fragment.graphql
 create mode 100644 app/assets/javascripts/issues_list/queries/label.fragment.graphql
 create mode 100644 app/assets/javascripts/issues_list/queries/milestone.fragment.graphql
 create mode 100644 app/assets/javascripts/issues_list/queries/user.fragment.graphql
 create mode 100644 app/assets/javascripts/jobs/components/table/event_hub.js
 create mode 100644 app/assets/javascripts/jobs/components/table/graphql/fragments/job.fragment.graphql
 create mode 100644 app/assets/javascripts/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql
 create mode 100644 app/assets/javascripts/jobs/components/table/graphql/mutations/job_play.mutation.graphql
 create mode 100644 app/assets/javascripts/jobs/components/table/graphql/mutations/job_retry.mutation.graphql
 create mode 100644 app/assets/javascripts/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql
 delete mode 100644 app/assets/javascripts/learn_gitlab/track_learn_gitlab.js
 create mode 100644 app/assets/javascripts/lib/apollo/instrumentation_link.js
 create mode 100644 app/assets/javascripts/lib/logger/hello.js
 create mode 100644 app/assets/javascripts/lib/logger/hello_deferred.js
 create mode 100644 app/assets/javascripts/lib/logger/index.js
 create mode 100644 app/assets/javascripts/main_jh.js
 delete mode 100644 app/assets/javascripts/notes.js
 create mode 100644 app/assets/javascripts/notes/components/comment_type_dropdown.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list_app.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue
 create mode 100644 app/assets/javascripts/packages_and_registries/package_registry/pages/list.js
 create mode 100644 app/assets/javascripts/pages/groups/new/toggle_invite_members.js
 create mode 100644 app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
 delete mode 100644 app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
 delete mode 100644 app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
 create mode 100644 app/assets/javascripts/pages/projects/new/components/new_project_url_select.vue
 create mode 100644 app/assets/javascripts/pages/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql
 create mode 100644 app/assets/javascripts/pages/projects/usage_quotas/index.js
 create mode 100644 app/assets/javascripts/pages/projects/work_items/index/index.js
 delete mode 100644 app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql
 delete mode 100644 app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql
 delete mode 100644 app/assets/javascripts/pipelines/components/graph/accessors.js
 create mode 100644 app/assets/javascripts/pipelines/components/pipelines_list/tokens/constants.js
 create mode 100644 app/assets/javascripts/pipelines/pipeline_test_details.js
 create mode 100644 app/assets/javascripts/projects/storage_counter/components/app.vue
 create mode 100644 app/assets/javascripts/projects/storage_counter/components/storage_table.vue
 create mode 100644 app/assets/javascripts/projects/storage_counter/constants.js
 create mode 100644 app/assets/javascripts/projects/storage_counter/index.js
 create mode 100644 app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql
 create mode 100644 app/assets/javascripts/projects/storage_counter/utils.js
 create mode 100644 app/assets/javascripts/projects/terraform_notification/constants.js
 create mode 100644 app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
 create mode 100644 app/assets/javascripts/runner/components/search_tokens/status_token_config.js
 create mode 100644 app/assets/javascripts/runner/components/search_tokens/tag_token_config.js
 create mode 100644 app/assets/javascripts/runner/components/search_tokens/type_token_config.js
 create mode 100644 app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_button.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js
 create mode 100644 app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.stories.js
 create mode 100644 app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.vue
 create mode 100644 app/assets/javascripts/work_items/components/app.vue
 create mode 100644 app/assets/javascripts/work_items/graphql/typedefs.graphql
 create mode 100644 app/assets/javascripts/work_items/index.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/alert_management/list.js b/app/assets/javascripts/alert_management/list.js
index e9d19f18ab5..57d1f135606 100644
--- a/app/assets/javascripts/alert_management/list.js
+++ b/app/assets/javascripts/alert_management/list.js
@@ -39,6 +39,7 @@ export default () => {
             return defaultDataIdFromObject(object);
           },
         },
+        assumeImmutableResults: true,
       },
     ),
   });
diff --git a/app/assets/javascripts/analytics/shared/utils.js b/app/assets/javascripts/analytics/shared/utils.js
index 84189b675f2..52901d4c5bb 100644
--- a/app/assets/javascripts/analytics/shared/utils.js
+++ b/app/assets/javascripts/analytics/shared/utils.js
@@ -1,4 +1,9 @@
+import dateFormat from 'dateformat';
+import { dateFormats } from './constants';
+
 export const filterBySearchTerm = (data = [], searchTerm = '', filterByKey = 'name') => {
   if (!searchTerm?.length) return data;
   return data.filter((item) => item[filterByKey].toLowerCase().includes(searchTerm.toLowerCase()));
 };
+
+export const toYmd = (date) => dateFormat(date, dateFormats.isoDate);
diff --git a/app/assets/javascripts/analytics/usage_trends/index.js b/app/assets/javascripts/analytics/usage_trends/index.js
index d1880b09f15..3e85832edcf 100644
--- a/app/assets/javascripts/analytics/usage_trends/index.js
+++ b/app/assets/javascripts/analytics/usage_trends/index.js
@@ -6,7 +6,7 @@ import UsageTrendsApp from './components/app.vue';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
 export default () => {
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 84a5d5ae4b3..01e463c1965 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -870,6 +870,14 @@ const Api = {
     return axios.put(url, freezePeriod);
   },
 
+  deleteFreezePeriod(id, freezePeriodId) {
+    const url = Api.buildUrl(this.freezePeriodPath)
+      .replace(':id', encodeURIComponent(id))
+      .replace(':freeze_period_id', encodeURIComponent(freezePeriodId));
+
+    return axios.delete(url);
+  },
+
   trackRedisCounterEvent(event) {
     if (!gon.features?.usageDataApi) {
       return null;
diff --git a/app/assets/javascripts/api/projects_api.js b/app/assets/javascripts/api/projects_api.js
index 1cd7fb0b954..b018db9a02d 100644
--- a/app/assets/javascripts/api/projects_api.js
+++ b/app/assets/javascripts/api/projects_api.js
@@ -3,6 +3,7 @@ import axios from '../lib/utils/axios_utils';
 import { buildApiUrl } from './api_utils';
 
 const PROJECTS_PATH = '/api/:version/projects.json';
+const PROJECT_IMPORT_MEMBERS_PATH = '/api/:version/projects/:id/import_project_members/:project_id';
 
 export function getProjects(query, options, callback = () => {}) {
   const url = buildApiUrl(PROJECTS_PATH);
@@ -25,3 +26,10 @@ export function getProjects(query, options, callback = () => {}) {
       return { data, headers };
     });
 }
+
+export function importProjectMembers(sourceId, targetId) {
+  const url = buildApiUrl(PROJECT_IMPORT_MEMBERS_PATH)
+    .replace(':id', sourceId)
+    .replace(':project_id', targetId);
+  return axios.post(url);
+}
diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
index f89600fbed3..fe801cd460f 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@@ -165,7 +165,7 @@ export default {
           :title="$options.i18n.proceedButton"
           variant="confirm"
           data-qa-selector="proceed_button"
-          data-track-event="click_button"
+          data-track-action="click_button"
           :data-track-label="`${$options.trackingLabelPrefix}proceed_button`"
           >{{ $options.i18n.proceedButton }}</gl-button
         >
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 0a05e0d44ce..8381dcec9c3 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -6,7 +6,7 @@ export default class Autosave {
   constructor(field, key, fallbackKey, lockVersion) {
     this.field = field;
 
-    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+    this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
     if (key.join != null) {
       key = key.join('/');
     }
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 7e605099655..2c7e878f044 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
@@ -19,6 +18,9 @@ export default {
     GlFormInput,
     GlFormGroup,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     isEditing: {
       type: Boolean,
@@ -168,6 +170,7 @@ export default {
         });
     },
   },
+  safeHtmlConfig: { ALLOW_TAGS: ['a', 'code'] },
 };
 </script>
 
@@ -184,7 +187,7 @@ export default {
 
     <div class="form-group">
       <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
-      <p v-html="helpText"></p>
+      <p v-safe-html:[$options.safeHtmlConfig]="helpText"></p>
       <input
         id="badge-link-url"
         v-model="linkUrl"
@@ -199,7 +202,7 @@ export default {
 
     <div class="form-group">
       <label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
-      <p v-html="helpText"></p>
+      <p v-safe-html:[$options.safeHtmlConfig]="helpText"></p>
       <input
         id="badge-image-url"
         v-model="imageUrl"
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 96c3b8276ee..f5e3bab6ff0 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -106,7 +105,7 @@ export default {
       <div
         v-if="draftCommands"
         class="referenced-commands draft-note-commands"
-        v-html="draftCommands"
+        v-html="draftCommands /* eslint-disable-line vue/no-v-html */"
       ></div>
 
       <p class="draft-note-actions d-flex">
diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 080a5543e53..bce13751448 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
 
@@ -10,7 +11,6 @@ export default {
   },
   computed: {
     ...mapGetters(['isNotesFetched']),
-    ...mapGetters('batchComments', ['draftsCount']),
   },
   watch: {
     isNotesFetched() {
@@ -19,13 +19,19 @@ export default {
       }
     },
   },
+  mounted() {
+    document.body.classList.add(REVIEW_BAR_VISIBLE_CLASS_NAME);
+  },
+  beforeDestroy() {
+    document.body.classList.remove(REVIEW_BAR_VISIBLE_CLASS_NAME);
+  },
   methods: {
     ...mapActions('batchComments', ['expandAllDiscussions']),
   },
 };
 </script>
 <template>
-  <div v-show="draftsCount > 0">
+  <div>
     <nav class="review-bar-component" data-testid="review_bar_component">
       <div
         class="review-bar-content d-flex gl-justify-content-end"
diff --git a/app/assets/javascripts/batch_comments/constants.js b/app/assets/javascripts/batch_comments/constants.js
index b309c339fc8..5e026251e0b 100644
--- a/app/assets/javascripts/batch_comments/constants.js
+++ b/app/assets/javascripts/batch_comments/constants.js
@@ -1,3 +1,5 @@
 export const CHANGES_TAB = 'diffs';
 export const DISCUSSION_TAB = 'notes';
 export const SHOW_TAB = 'show';
+
+export const REVIEW_BAR_VISIBLE_CLASS_NAME = 'review-bar-visible';
diff --git a/app/assets/javascripts/batch_comments/index.js b/app/assets/javascripts/batch_comments/index.js
index 9c763e70d63..65fd34dcb00 100644
--- a/app/assets/javascripts/batch_comments/index.js
+++ b/app/assets/javascripts/batch_comments/index.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import store from '~/mr_notes/stores';
-import ReviewBar from './components/review_bar.vue';
 
 export const initReviewBar = () => {
   const el = document.getElementById('js-review-bar');
@@ -10,6 +9,12 @@ export const initReviewBar = () => {
   new Vue({
     el,
     store,
+    components: {
+      ReviewBar: () => import('./components/review_bar.vue'),
+    },
+    computed: {
+      ...mapGetters('batchComments', ['draftsCount']),
+    },
     mounted() {
       this.fetchDrafts();
     },
@@ -17,7 +22,9 @@ export const initReviewBar = () => {
       ...mapActions('batchComments', ['fetchDrafts']),
     },
     render(createElement) {
-      return createElement(ReviewBar);
+      if (this.draftsCount === 0) return null;
+
+      return createElement('review-bar');
     },
   });
 };
diff --git a/app/assets/javascripts/behaviors/markdown/nodes/playable.js b/app/assets/javascripts/behaviors/markdown/nodes/playable.js
index 33bb6e0c31c..2b667aba2d6 100644
--- a/app/assets/javascripts/behaviors/markdown/nodes/playable.js
+++ b/app/assets/javascripts/behaviors/markdown/nodes/playable.js
@@ -3,7 +3,6 @@
 
 import { defaultMarkdownSerializer } from 'prosemirror-markdown';
 import { Node } from 'tiptap';
-import { HIGHER_PARSE_RULE_PRIORITY } from '../constants';
 
 /**
  * Abstract base class for playable media, like video and audio.
@@ -33,33 +32,33 @@ export default class Playable extends Node {
     const parseDOM = [
       {
         tag: `.${this.mediaType}-container`,
-        skip: true,
-      },
-      {
-        tag: `.${this.mediaType}-container p`,
-        priority: HIGHER_PARSE_RULE_PRIORITY,
-        ignore: true,
-      },
-      {
-        tag: `${this.mediaType}[src]`,
-        getAttrs: (el) => ({ src: el.src, alt: el.dataset.title }),
+        getAttrs: (el) => ({
+          src: el.querySelector(this.mediaType).src,
+          alt: el.querySelector(this.mediaType).dataset.title,
+        }),
       },
     ];
 
     const toDOM = (node) => [
-      this.mediaType,
-      {
-        src: node.attrs.src,
-        controls: true,
-        'data-setup': '{}',
-        'data-title': node.attrs.alt,
-        ...this.extraElementAttrs,
-      },
+      'span',
+      { class: `media-container ${this.mediaType}-container` },
+      [
+        this.mediaType,
+        {
+          src: node.attrs.src,
+          controls: true,
+          'data-setup': '{}',
+          'data-title': node.attrs.alt,
+          ...this.extraElementAttrs,
+        },
+      ],
+      ['a', { href: node.attrs.src }, node.attrs.alt],
     ];
 
     return {
       attrs,
-      group: 'block',
+      group: 'inline',
+      inline: true,
       draggable: true,
       parseDOM,
       toDOM,
@@ -68,6 +67,5 @@ export default class Playable extends Node {
 
   toMarkdown(state, node) {
     defaultMarkdownSerializer.nodes.image(state, node);
-    state.closeBlock(node);
   }
 }
diff --git a/app/assets/javascripts/behaviors/shortcuts/keybindings.js b/app/assets/javascripts/behaviors/shortcuts/keybindings.js
index 005ef103ded..ebf2ab0381e 100644
--- a/app/assets/javascripts/behaviors/shortcuts/keybindings.js
+++ b/app/assets/javascripts/behaviors/shortcuts/keybindings.js
@@ -19,7 +19,7 @@ export const LOCAL_STORAGE_KEY = 'gl-keyboard-shortcuts-customizations';
  */
 export const getCustomizations = memoize(() => {
   let parsedCustomizations = {};
-  const localStorageIsSafe = AccessorUtilities.isLocalStorageAccessSafe();
+  const localStorageIsSafe = AccessorUtilities.canUseLocalStorage();
 
   if (localStorageIsSafe) {
     try {
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
index 8f1518a1c9c..cf7a71d4206 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      localStorageUsable: AccessorUtilities.isLocalStorageAccessSafe(),
+      localStorageUsable: AccessorUtilities.canUseLocalStorage(),
       shortcutsEnabled: !shouldDisableShortcuts(),
     };
   },
diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index 470c679b8ba..387d6043315 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -31,7 +31,6 @@ export default class BlobFileDropzone {
       autoProcessQueue: false,
       url: form.attr('action'),
       // Rails uses a hidden input field for PUT
-      // http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
       method,
       clickable: true,
       uploadMultiple: false,
diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
index a8c94b6263e..25fe29c4fbe 100644
--- a/app/assets/javascripts/blob/notebook/index.js
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -6,6 +6,9 @@ export default () => {
 
   return new Vue({
     el,
+    provide: {
+      relativeRawPath: el.dataset.relativeRawPath,
+    },
     render(createElement) {
       return createElement(NotebookViewer, {
         props: {
diff --git a/app/assets/javascripts/blob/notebook/notebook_viewer.vue b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
index 02f93e14219..d2a841c88f1 100644
--- a/app/assets/javascripts/blob/notebook/notebook_viewer.vue
+++ b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
@@ -77,3 +77,9 @@ export default {
     </p>
   </div>
 </template>
+
+<style>
+.output img {
+  min-width: 0; /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
+}
+</style>
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index fdaa4b082f7..a3278f8bde2 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -124,7 +124,7 @@ export default {
         :href="goToMergeRequestPath"
         :data-track-property="humanAccess"
         :data-track-value="$options.goToTrackValueMergeRequest"
-        :data-track-event="$options.trackEvent"
+        :data-track-action="$options.trackEvent"
         :data-track-label="trackLabel"
       >
         {{ $options.i18n.mergeRequestButton }}
@@ -135,7 +135,7 @@ export default {
         variant="success"
         :data-track-property="humanAccess"
         :data-track-value="$options.goToTrackValuePipelines"
-        :data-track-event="$options.trackEvent"
+        :data-track-action="$options.trackEvent"
         :data-track-label="trackLabel"
       >
         {{ $options.i18n.pipelinesButton }}
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
index aee8bf15e44..e0b0857f7b4 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
@@ -121,7 +121,7 @@ export default {
           icon="close"
           :data-track-property="humanAccess"
           :data-track-value="$options.dismissTrackValue"
-          :data-track-event="$options.clickTrackValue"
+          :data-track-action="$options.clickTrackValue"
           :data-track-label="trackLabel"
           @click="onDismiss"
         />
diff --git a/app/assets/javascripts/boards/boards_util.js b/app/assets/javascripts/boards/boards_util.js
index 3219d74f85f..d113a1d39d8 100644
--- a/app/assets/javascripts/boards/boards_util.js
+++ b/app/assets/javascripts/boards/boards_util.js
@@ -1,6 +1,5 @@
 import { sortBy, cloneDeep } from 'lodash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { ListType } from './constants';
+import { ListType, MilestoneIDs } from './constants';
 
 export function getMilestone() {
   return null;
@@ -49,12 +48,10 @@ export function formatListIssues(listIssues) {
     return {
       ...map,
       [list.id]: sortedIssues.map((i) => {
-        const id = getIdFromGraphQLId(i.id);
+        const { id } = i;
 
         const listIssue = {
           ...i,
-          id,
-          fullId: i.id,
           labels: i.labels?.nodes || [],
           assignees: i.assignees?.nodes || [],
         };
@@ -108,7 +105,10 @@ export function formatIssueInput(issueInput, boardConfig) {
 
   return {
     ...issueInput,
-    milestoneId: milestoneId ? fullMilestoneId(milestoneId) : null,
+    milestoneId:
+      milestoneId && milestoneId !== MilestoneIDs.ANY
+        ? fullMilestoneId(milestoneId)
+        : issueInput?.milestoneId,
     labelIds: [...labelIds, ...(labels?.map((l) => fullLabelId(l)) || [])],
     assigneeIds: [...assigneeIds, ...(assigneeId ? [fullUserId(assigneeId)] : [])],
   };
diff --git a/app/assets/javascripts/boards/components/board_add_new_column.vue b/app/assets/javascripts/boards/components/board_add_new_column.vue
index d4b559add6e..22ad619e76b 100644
--- a/app/assets/javascripts/boards/components/board_add_new_column.vue
+++ b/app/assets/javascripts/boards/components/board_add_new_column.vue
@@ -2,9 +2,6 @@
 import { GlFormRadio, GlFormRadioGroup, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
-import { ListType } from '~/boards/constants';
-import boardsStore from '~/boards/stores/boards_store';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 export default {
   components: {
@@ -24,7 +21,7 @@ export default {
   },
   computed: {
     ...mapState(['labels', 'labelsLoading']),
-    ...mapGetters(['getListByLabelId', 'shouldUseGraphQL']),
+    ...mapGetters(['getListByLabelId']),
     columnForSelected() {
       return this.getListByLabelId(this.selectedId);
     },
@@ -34,17 +31,6 @@ export default {
   },
   methods: {
     ...mapActions(['createList', 'fetchLabels', 'highlightList', 'setAddColumnFormVisibility']),
-    highlight(listId) {
-      if (this.shouldUseGraphQL) {
-        this.highlightList(listId);
-      } else {
-        const list = boardsStore.state.lists.find(({ id }) => id === listId);
-        list.highlighted = true;
-        setTimeout(() => {
-          list.highlighted = false;
-        }, 2000);
-      }
-    },
     addList() {
       if (!this.selectedLabel) {
         return;
@@ -54,23 +40,11 @@ export default {
 
       if (this.columnForSelected) {
         const listId = this.columnForSelected.id;
-        this.highlight(listId);
+        this.highlightList(listId);
         return;
       }
 
-      if (this.shouldUseGraphQL) {
-        this.createList({ labelId: this.selectedId });
-      } else {
-        const listObj = {
-          labelId: getIdFromGraphQLId(this.selectedId),
-          title: this.selectedLabel.title,
-          position: boardsStore.state.lists.length - 2,
-          list_type: ListType.label,
-          label: this.selectedLabel,
-        };
-
-        boardsStore.new(listObj);
-      }
+      this.createList({ labelId: this.selectedId });
     },
 
     filterItems(searchTerm) {
diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue
new file mode 100644
index 00000000000..28f4a267077
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_app.vue
@@ -0,0 +1,29 @@
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import BoardContent from '~/boards/components/board_content.vue';
+import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
+
+export default {
+  components: {
+    BoardContent,
+    BoardSettingsSidebar,
+  },
+  inject: ['disabled'],
+  computed: {
+    ...mapGetters(['isSidebarOpen']),
+  },
+  mounted() {
+    this.performSearch();
+  },
+  methods: {
+    ...mapActions(['performSearch']),
+  },
+};
+</script>
+
+<template>
+  <div class="boards-app gl-relative" :class="{ 'is-compact': isSidebarOpen }">
+    <board-content :disabled="disabled" />
+    <board-settings-sidebar />
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_card_deprecated.vue b/app/assets/javascripts/boards/components/board_card_deprecated.vue
deleted file mode 100644
index e12a2836f67..00000000000
--- a/app/assets/javascripts/boards/components/board_card_deprecated.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-// This component is being replaced in favor of './board_card.vue' for GraphQL boards
-import sidebarEventHub from '~/sidebar/event_hub';
-import eventHub from '../eventhub';
-import boardsStore from '../stores/boards_store';
-import BoardCardLayoutDeprecated from './board_card_layout_deprecated.vue';
-
-export default {
-  components: {
-    BoardCardLayout: BoardCardLayoutDeprecated,
-  },
-  props: {
-    list: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    issue: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-  methods: {
-    // These are methods instead of computed's, because boardsStore is not reactive.
-    isActive() {
-      return this.getActiveId() === this.issue.id;
-    },
-    getActiveId() {
-      return boardsStore.detail?.issue?.id;
-    },
-    showIssue({ isMultiSelect }) {
-      // If no issues are opened, close all sidebars first
-      if (!this.getActiveId()) {
-        sidebarEventHub.$emit('sidebar.closeAll');
-      }
-      if (this.isActive()) {
-        eventHub.$emit('clearDetailIssue', isMultiSelect);
-
-        if (isMultiSelect) {
-          eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-        }
-      } else {
-        eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
-        boardsStore.setListDetail(this.list);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <board-card-layout
-    data-qa-selector="board_card"
-    :issue="issue"
-    :list="list"
-    :is-active="isActive()"
-    v-bind="$attrs"
-    @show="showIssue"
-  />
-</template>
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index 5658a34e9a6..db80d48239b 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -214,10 +214,19 @@ export default {
           class="confidential-icon gl-mr-2"
           :aria-label="__('Confidential')"
         />
+        <gl-icon
+          v-if="item.hidden"
+          v-gl-tooltip
+          name="spam"
+          :title="__('This issue is hidden because its author has been banned')"
+          class="gl-mr-2 hidden-icon"
+          data-testid="hidden-icon"
+        />
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"
           :class="{ 'gl-text-gray-400!': item.isLoading }"
+          class="js-no-trigger"
           @mousemove.stop
           >{{ item.title }}</a
         >
diff --git a/app/assets/javascripts/boards/components/board_card_layout_deprecated.vue b/app/assets/javascripts/boards/components/board_card_layout_deprecated.vue
deleted file mode 100644
index 3381e4c3a7d..00000000000
--- a/app/assets/javascripts/boards/components/board_card_layout_deprecated.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import { ISSUABLE } from '~/boards/constants';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import boardsStore from '../stores/boards_store';
-import IssueCardInnerDeprecated from './issue_card_inner_deprecated.vue';
-
-export default {
-  name: 'BoardCardLayout',
-  components: {
-    IssueCardInner: IssueCardInnerDeprecated,
-  },
-  mixins: [glFeatureFlagMixin()],
-  props: {
-    list: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    issue: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    index: {
-      type: Number,
-      default: 0,
-      required: false,
-    },
-    isActive: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showDetail: false,
-      multiSelect: boardsStore.multiSelect,
-    };
-  },
-  computed: {
-    ...mapGetters(['isSwimlanesOn']),
-    multiSelectVisible() {
-      return this.multiSelect.list.findIndex((issue) => issue.id === this.issue.id) > -1;
-    },
-  },
-  methods: {
-    ...mapActions(['setActiveId']),
-    mouseDown() {
-      this.showDetail = true;
-    },
-    mouseMove() {
-      this.showDetail = false;
-    },
-    showIssue(e) {
-      // Don't do anything if this happened on a no trigger element
-      if (e.target.classList.contains('js-no-trigger')) return;
-
-      if (this.glFeatures.graphqlBoardLists || this.isSwimlanesOn) {
-        this.setActiveId({ id: this.issue.id, sidebarType: ISSUABLE });
-        return;
-      }
-
-      const isMultiSelect = e.ctrlKey || e.metaKey;
-
-      if (this.showDetail || isMultiSelect) {
-        this.showDetail = false;
-        this.$emit('show', { event: e, isMultiSelect });
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <li
-    :class="{
-      'multi-select': multiSelectVisible,
-      'user-can-drag': !disabled && issue.id,
-      'is-disabled': disabled || !issue.id,
-      'is-active': isActive,
-    }"
-    :index="index"
-    :data-issue-id="issue.id"
-    :data-issue-iid="issue.iid"
-    :data-issue-path="issue.referencePath"
-    data-testid="board_card"
-    class="board-card gl-p-5 gl-rounded-base"
-    @mousedown="mouseDown"
-    @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
-  >
-    <issue-card-inner :list="list" :issue="issue" :update-filters="true" />
-  </li>
-</template>
diff --git a/app/assets/javascripts/boards/components/board_column_deprecated.vue b/app/assets/javascripts/boards/components/board_column_deprecated.vue
deleted file mode 100644
index 7c090dfaa53..00000000000
--- a/app/assets/javascripts/boards/components/board_column_deprecated.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-// This component is being replaced in favor of './board_column.vue' for GraphQL boards
-import Sortable from 'sortablejs';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_deprecated.vue';
-import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
-import boardsStore from '../stores/boards_store';
-import BoardList from './board_list_deprecated.vue';
-
-export default {
-  components: {
-    BoardListHeader,
-    BoardList,
-  },
-  inject: {
-    boardId: {
-      default: '',
-    },
-  },
-  props: {
-    list: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      detailIssue: boardsStore.detail,
-      filter: boardsStore.filter,
-    };
-  },
-  computed: {
-    listIssues() {
-      return this.list.issues;
-    },
-  },
-  watch: {
-    filter: {
-      handler() {
-        // eslint-disable-next-line vue/no-mutating-props
-        this.list.page = 1;
-        this.list.getIssues(true).catch(() => {
-          // TODO: handle request error
-        });
-      },
-      deep: true,
-    },
-    'list.highlighted': {
-      handler(highlighted) {
-        if (highlighted) {
-          this.$nextTick(() => {
-            this.$el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          });
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    const instance = this;
-
-    const sortableOptions = getBoardSortableDefaultOptions({
-      disabled: this.disabled,
-      group: 'boards',
-      draggable: '.is-draggable',
-      handle: '.js-board-handle',
-      onEnd(e) {
-        sortableEnd();
-
-        const sortable = this;
-
-        if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-          const order = sortable.toArray();
-          const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
-
-          instance.$nextTick(() => {
-            boardsStore.moveList(list, order);
-          });
-        }
-      },
-    });
-
-    Sortable.create(this.$el.parentNode, sortableOptions);
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="{
-      'is-draggable': !list.preset,
-      'is-expandable': list.isExpandable,
-      'is-collapsed': !list.isExpanded,
-      'board-type-assignee': list.type === 'assignee',
-    }"
-    :data-id="list.id"
-    class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
-    data-qa-selector="board_list"
-  >
-    <div
-      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
-      :class="{ 'board-column-highlighted': list.highlighted }"
-    >
-      <board-list-header :list="list" :disabled="disabled" />
-      <board-list ref="board-list" :disabled="disabled" :issues="listIssues" :list="list" />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 4df6ff75249..27ea2e7a608 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -5,31 +5,22 @@ import Draggable from 'vuedraggable';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import defaultSortableConfig from '~/sortable/sortable_config';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DraggableItemTypes } from '../constants';
 import BoardColumn from './board_column.vue';
-import BoardColumnDeprecated from './board_column_deprecated.vue';
 
 export default {
   draggableItemTypes: DraggableItemTypes,
   components: {
     BoardAddNewColumn,
     BoardColumn,
-    BoardColumnDeprecated,
     BoardContentSidebar: () => import('~/boards/components/board_content_sidebar.vue'),
     EpicBoardContentSidebar: () =>
       import('ee_component/boards/components/epic_board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,
   },
-  mixins: [glFeatureFlagMixin()],
   inject: ['canAdminList'],
   props: {
-    lists: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     disabled: {
       type: Boolean,
       required: true,
@@ -37,20 +28,15 @@ export default {
   },
   computed: {
     ...mapState(['boardLists', 'error', 'addColumnForm']),
-    ...mapGetters(['isSwimlanesOn', 'isEpicBoard']),
-    useNewBoardColumnComponent() {
-      return this.glFeatures.graphqlBoardLists || this.isSwimlanesOn || this.isEpicBoard;
-    },
+    ...mapGetters(['isSwimlanesOn', 'isEpicBoard', 'isIssueBoard']),
     addColumnFormVisible() {
       return this.addColumnForm?.visible;
     },
     boardListsToUse() {
-      return this.useNewBoardColumnComponent
-        ? sortBy([...Object.values(this.boardLists)], 'position')
-        : this.lists;
+      return sortBy([...Object.values(this.boardLists)], 'position');
     },
     canDragColumns() {
-      return (this.isEpicBoard || this.glFeatures.graphqlBoardLists) && this.canAdminList;
+      return this.canAdminList;
     },
     boardColumnWrapper() {
       return this.canDragColumns ? Draggable : 'div';
@@ -68,9 +54,6 @@ export default {
 
       return this.canDragColumns ? options : {};
     },
-    boardColumnComponent() {
-      return this.useNewBoardColumnComponent ? BoardColumn : BoardColumnDeprecated;
-    },
   },
   methods: {
     ...mapActions(['moveList', 'unsetError']),
@@ -95,8 +78,7 @@ export default {
       class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap"
       @end="moveList"
     >
-      <component
-        :is="boardColumnComponent"
+      <board-column
         v-for="(list, index) in boardListsToUse"
         :key="index"
         ref="board"
@@ -118,10 +100,7 @@ export default {
       :disabled="disabled"
     />
 
-    <board-content-sidebar
-      v-if="isSwimlanesOn || glFeatures.graphqlBoardLists"
-      data-testid="issue-boards-sidebar"
-    />
+    <board-content-sidebar v-if="isIssueBoard" data-testid="issue-boards-sidebar" />
 
     <epic-board-content-sidebar v-else-if="isEpicBoard" data-testid="epic-boards-sidebar" />
   </div>
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue
index 7a936e75676..e0105d63d99 100644
--- a/app/assets/javascripts/boards/components/board_content_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue
@@ -96,7 +96,7 @@ export default {
       <template #header>
         <sidebar-todo-widget
           class="gl-mt-3"
-          :issuable-id="activeBoardItem.fullId"
+          :issuable-id="activeBoardItem.id"
           :issuable-iid="activeBoardItem.iid"
           :full-path="fullPath"
           :issuable-type="issuableType"
diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index a89f71504a9..e939f0c0ebe 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -1,8 +1,7 @@
 <script>
 import { GlModal, GlAlert } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import ListLabel from '~/boards/models/label';
-import { TYPE_ITERATION, TYPE_MILESTONE } from '~/graphql_shared/constants';
+import { TYPE_USER, TYPE_ITERATION, TYPE_MILESTONE } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { getParameterByName, visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -189,7 +188,9 @@ export default {
     issueBoardScopeMutationVariables() {
       return {
         weight: this.board.weight,
-        assigneeId: this.board.assignee?.id || null,
+        assigneeId: this.board.assignee?.id
+          ? convertToGraphQLId(TYPE_USER, this.board.assignee.id)
+          : null,
         milestoneId: this.board.milestone?.id
           ? convertToGraphQLId(TYPE_MILESTONE, this.board.milestone.id)
           : null,
@@ -289,14 +290,10 @@ export default {
     setBoardLabels(labels) {
       labels.forEach((label) => {
         if (label.set && !this.board.labels.find((l) => l.id === label.id)) {
-          this.board.labels.push(
-            new ListLabel({
-              id: label.id,
-              title: label.title,
-              color: label.color,
-              textColor: label.text_color,
-            }),
-          );
+          this.board.labels.push({
+            ...label,
+            textColor: label.text_color,
+          });
         } else if (!label.set) {
           this.board.labels = this.board.labels.filter((selected) => selected.id !== label.id);
         }
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 849492effab..47dffc985aa 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -208,7 +208,7 @@ export default {
         newIndex = children.length;
       }
 
-      const getItemId = (el) => Number(el.dataset.itemId);
+      const getItemId = (el) => el.dataset.itemId;
 
       // If item is being moved within the same list
       if (from === to) {
@@ -234,7 +234,7 @@ export default {
       }
 
       this.moveItem({
-        itemId: Number(itemId),
+        itemId,
         itemIid,
         itemPath,
         fromListId: from.dataset.listId,
diff --git a/app/assets/javascripts/boards/components/board_list_deprecated.vue b/app/assets/javascripts/boards/components/board_list_deprecated.vue
deleted file mode 100644
index fabaf7a85f5..00000000000
--- a/app/assets/javascripts/boards/components/board_list_deprecated.vue
+++ /dev/null
@@ -1,459 +0,0 @@
-<script>
-import { GlLoadingIcon } from '@gitlab/ui';
-import { Sortable, MultiDrag } from 'sortablejs';
-import createFlash from '~/flash';
-import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
-import { sprintf, __ } from '~/locale';
-import eventHub from '../eventhub';
-import {
-  getBoardSortableDefaultOptions,
-  sortableStart,
-  sortableEnd,
-} from '../mixins/sortable_default_options';
-import boardsStore from '../stores/boards_store';
-import boardCard from './board_card_deprecated.vue';
-import boardNewIssue from './board_new_issue_deprecated.vue';
-
-// This component is being replaced in favor of './board_list.vue' for GraphQL boards
-
-Sortable.mount(new MultiDrag());
-
-export default {
-  name: 'BoardList',
-  components: {
-    boardCard,
-    boardNewIssue,
-    GlLoadingIcon,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    list: {
-      type: Object,
-      required: true,
-    },
-    issues: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      scrollOffset: 250,
-      filters: boardsStore.state.filters,
-      showCount: false,
-      showIssueForm: false,
-    };
-  },
-  computed: {
-    paginatedIssueText() {
-      return sprintf(__('Showing %{pageSize} of %{total} issues'), {
-        pageSize: this.list.issues.length,
-        total: this.list.issuesSize,
-      });
-    },
-    issuesSizeExceedsMax() {
-      return this.list.maxIssueCount > 0 && this.list.issuesSize > this.list.maxIssueCount;
-    },
-    loading() {
-      return this.list.loading;
-    },
-  },
-  watch: {
-    filters: {
-      handler() {
-        // eslint-disable-next-line vue/no-mutating-props
-        this.list.loadingMore = false;
-        this.$refs.list.scrollTop = 0;
-      },
-      deep: true,
-    },
-    issues() {
-      this.$nextTick(() => {
-        if (
-          this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length &&
-          this.list.isExpanded
-        ) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.list.page += 1;
-          this.list.getIssues(false).catch(() => {
-            // TODO: handle request error
-          });
-        }
-
-        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
-          this.showCount = true;
-        } else {
-          this.showCount = false;
-        }
-      });
-    },
-    'list.id': {
-      handler(id) {
-        if (id) {
-          eventHub.$on(`toggle-issue-form-${this.list.id}`, this.toggleForm);
-        }
-      },
-    },
-  },
-  created() {
-    eventHub.$on(`toggle-issue-form-${this.list.id}`, this.toggleForm);
-    eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
-  },
-  mounted() {
-    const multiSelectOpts = {
-      multiDrag: true,
-      selectedClass: 'js-multi-select',
-      animation: 500,
-    };
-
-    const options = getBoardSortableDefaultOptions({
-      scroll: true,
-      disabled: this.disabled,
-      filter: '.board-list-count, .is-disabled',
-      dataIdAttr: 'data-issue-id',
-      removeCloneOnHide: false,
-      ...multiSelectOpts,
-      group: {
-        name: 'issues',
-        /**
-         * Dynamically determine between which containers
-         * items can be moved or copied as
-         * Assignee lists (EE feature) require this behavior
-         */
-        pull: (to, from, dragEl, e) => {
-          // As per Sortable's docs, `to` should provide
-          // reference to exact sortable container on which
-          // we're trying to drag element, but either it is
-          // a library's bug or our markup structure is too complex
-          // that `to` never points to correct container
-          // See https://github.com/RubaXa/Sortable/issues/1037
-          //
-          // So we use `e.target` which is always accurate about
-          // which element we're currently dragging our card upon
-          // So from there, we can get reference to actual container
-          // and thus the container type to enable Copy or Move
-          if (e.target) {
-            const containerEl =
-              e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
-            const toBoardType = containerEl.dataset.boardType;
-            const cloneActions = {
-              label: ['milestone', 'assignee', 'iteration'],
-              assignee: ['milestone', 'label', 'iteration'],
-              milestone: ['label', 'assignee', 'iteration'],
-              iteration: ['label', 'assignee', 'milestone'],
-            };
-
-            if (toBoardType) {
-              const fromBoardType = this.list.type;
-              // For each list we check if the destination list is
-              // a the list were we should clone the issue
-              const shouldClone = Object.entries(cloneActions).some(
-                (entry) => fromBoardType === entry[0] && entry[1].includes(toBoardType),
-              );
-
-              if (shouldClone) {
-                return 'clone';
-              }
-            }
-          }
-
-          return true;
-        },
-        revertClone: true,
-      },
-      onStart: (e) => {
-        const card = this.$refs.issue[e.oldIndex];
-
-        card.showDetail = false;
-
-        const { list } = card;
-
-        const issue = list.findIssue(Number(e.item.dataset.issueId));
-
-        boardsStore.startMoving(list, issue);
-
-        this.$root.$emit(BV_HIDE_TOOLTIP);
-
-        sortableStart();
-      },
-      onAdd: (e) => {
-        const { items = [], newIndicies = [] } = e;
-        if (items.length) {
-          // Not using e.newIndex here instead taking a min of all
-          // the newIndicies. Basically we have to find that during
-          // a drop what is the index we're going to start putting
-          // all the dropped elements from.
-          const newIndex = Math.min(...newIndicies.map((obj) => obj.index).filter((i) => i !== -1));
-          const issues = items.map((item) =>
-            boardsStore.moving.list.findIssue(Number(item.dataset.issueId)),
-          );
-
-          boardsStore.moveMultipleIssuesToList({
-            listFrom: boardsStore.moving.list,
-            listTo: this.list,
-            issues,
-            newIndex,
-          });
-        } else {
-          boardsStore.moveIssueToList(
-            boardsStore.moving.list,
-            this.list,
-            boardsStore.moving.issue,
-            e.newIndex,
-          );
-          this.$nextTick(() => {
-            e.item.remove();
-          });
-        }
-      },
-      onUpdate: (e) => {
-        const sortedArray = this.sortable.toArray().filter((id) => id !== '-1');
-
-        const { items = [], newIndicies = [], oldIndicies = [] } = e;
-        if (items.length) {
-          const newIndex = Math.min(...newIndicies.map((obj) => obj.index));
-          const issues = items.map((item) =>
-            boardsStore.moving.list.findIssue(Number(item.dataset.issueId)),
-          );
-          boardsStore.moveMultipleIssuesInList({
-            list: this.list,
-            issues,
-            oldIndicies: oldIndicies.map((obj) => obj.index),
-            newIndex,
-            idArray: sortedArray,
-          });
-          e.items.forEach((el) => {
-            Sortable.utils.deselect(el);
-          });
-          boardsStore.clearMultiSelect();
-          return;
-        }
-
-        boardsStore.moveIssueInList(
-          this.list,
-          boardsStore.moving.issue,
-          e.oldIndex,
-          e.newIndex,
-          sortedArray,
-        );
-      },
-      onEnd: (e) => {
-        const { items = [], clones = [], to } = e;
-
-        // This is not a multi select operation
-        if (!items.length && !clones.length) {
-          sortableEnd();
-          return;
-        }
-
-        let toList;
-        if (to) {
-          const containerEl = to.closest('.js-board-list');
-          toList = boardsStore.findList('id', Number(containerEl.dataset.board));
-        }
-
-        /**
-         * onEnd is called irrespective if the cards were moved in the
-         * same list or the other list. Don't remove items if it's same list.
-         */
-        const isSameList = toList && toList.id === this.list.id;
-        if (toList && !isSameList && boardsStore.shouldRemoveIssue(this.list, toList)) {
-          const issues = items.map((item) => this.list.findIssue(Number(item.dataset.issueId)));
-          if (
-            issues.filter(Boolean).length &&
-            !boardsStore.issuesAreContiguous(this.list, issues)
-          ) {
-            const indexes = [];
-            const ids = this.list.issues.map((i) => i.id);
-            issues.forEach((issue) => {
-              const index = ids.indexOf(issue.id);
-              if (index > -1) {
-                indexes.push(index);
-              }
-            });
-
-            // Descending sort because splice would cause index discrepancy otherwise
-            const sortedIndexes = indexes.sort((a, b) => (a < b ? 1 : -1));
-
-            sortedIndexes.forEach((i) => {
-              /**
-               * **setTimeout and splice each element one-by-one in a loop
-               * is intended.**
-               *
-               * The problem here is all the indexes are in the list but are
-               * non-contiguous. Due to that, when we splice all the indexes,
-               * at once, Vue -- during a re-render -- is unable to find reference
-               * nodes and the entire app crashes.
-               *
-               * If the indexes are contiguous, this piece of code is not
-               * executed. If it is, this is a possible regression. Only when
-               * issue indexes are far apart, this logic should ever kick in.
-               */
-              setTimeout(() => {
-                // eslint-disable-next-line vue/no-mutating-props
-                this.list.issues.splice(i, 1);
-              }, 0);
-            });
-          }
-        }
-
-        if (!toList) {
-          createFlash({
-            message: __('Something went wrong while performing the action.'),
-          });
-        }
-
-        if (!isSameList) {
-          boardsStore.clearMultiSelect();
-
-          // Since Vue's list does not re-render the same keyed item, we'll
-          // remove `multi-select` class to express it's unselected
-          if (clones && clones.length) {
-            clones.forEach((el) => el.classList.remove('multi-select'));
-          }
-
-          // Due to some bug which I am unable to figure out
-          // Sortable does not deselect some pending items from the
-          // source list.
-          // We'll just do it forcefully here.
-          Array.from(document.querySelectorAll('.js-multi-select') || []).forEach((item) => {
-            Sortable.utils.deselect(item);
-          });
-
-          /**
-           * SortableJS leaves all the moving items "as is" on the DOM.
-           * Vue picks up and rehydrates the DOM, but we need to explicity
-           * remove the "trash" items from the DOM.
-           *
-           * This is in parity to the logic on single item move from a list/in
-           * a list. For reference, look at the implementation of onAdd method.
-           */
-          this.$nextTick(() => {
-            if (items && items.length) {
-              items.forEach((item) => {
-                item.remove();
-              });
-            }
-          });
-        }
-        sortableEnd();
-      },
-      onMove(e) {
-        return !e.related.classList.contains('board-list-count');
-      },
-      onSelect(e) {
-        const {
-          item: { classList },
-        } = e;
-
-        if (
-          classList &&
-          classList.contains('js-multi-select') &&
-          !classList.contains('multi-select')
-        ) {
-          Sortable.utils.deselect(e.item);
-        }
-      },
-      onDeselect: (e) => {
-        const {
-          item: { dataset, classList },
-        } = e;
-
-        if (
-          classList &&
-          classList.contains('multi-select') &&
-          !classList.contains('js-multi-select')
-        ) {
-          const issue = this.list.findIssue(Number(dataset.issueId));
-          boardsStore.toggleMultiSelect(issue);
-        }
-      },
-    });
-
-    this.sortable = Sortable.create(this.$refs.list, options);
-
-    // Scroll event on list to load more
-    this.$refs.list.addEventListener('scroll', this.onScroll);
-  },
-  beforeDestroy() {
-    eventHub.$off(`toggle-issue-form-${this.list.id}`, this.toggleForm);
-    eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
-    this.$refs.list.removeEventListener('scroll', this.onScroll);
-  },
-  methods: {
-    listHeight() {
-      return this.$refs.list.getBoundingClientRect().height;
-    },
-    scrollHeight() {
-      return this.$refs.list.scrollHeight;
-    },
-    scrollTop() {
-      return this.$refs.list.scrollTop + this.listHeight();
-    },
-    scrollToTop() {
-      this.$refs.list.scrollTop = 0;
-    },
-    loadNextPage() {
-      const getIssues = this.list.nextPage();
-      const loadingDone = () => {
-        // eslint-disable-next-line vue/no-mutating-props
-        this.list.loadingMore = false;
-      };
-
-      if (getIssues) {
-        // eslint-disable-next-line vue/no-mutating-props
-        this.list.loadingMore = true;
-        getIssues.then(loadingDone).catch(loadingDone);
-      }
-    },
-    toggleForm() {
-      this.showIssueForm = !this.showIssueForm;
-    },
-    onScroll() {
-      if (!this.list.loadingMore && this.scrollTop() > this.scrollHeight() - this.scrollOffset) {
-        this.loadNextPage();
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
-    class="board-list-component position-relative h-100"
-    data-qa-selector="board_list_cards_area"
-  >
-    <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
-      <gl-loading-icon size="sm" />
-    </div>
-    <board-new-issue v-if="list.type !== 'closed' && showIssueForm" :list="list" />
-    <ul
-      v-show="!loading"
-      ref="list"
-      :data-board="list.id"
-      :data-board-type="list.type"
-      :class="{ 'is-smaller': showIssueForm, 'bg-danger-100': issuesSizeExceedsMax }"
-      class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
-    >
-      <board-card
-        v-for="(issue, index) in issues"
-        ref="issue"
-        :key="issue.id"
-        :index="index"
-        :list="list"
-        :issue="issue"
-        :disabled="disabled"
-      />
-      <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
-        <gl-loading-icon v-show="list.loadingMore" size="sm" label="Loading more issues" />
-        <span v-if="list.issues.length === list.issuesSize">{{ __('Showing all issues') }}</span>
-        <span v-else>{{ paginatedIssueText }}</span>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index 8d5f0f7eb89..dc5313b1bf6 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -201,7 +201,7 @@ export default {
       });
     },
     addToLocalStorage() {
-      if (AccessorUtilities.isLocalStorageAccessSafe()) {
+      if (AccessorUtilities.canUseLocalStorage()) {
         localStorage.setItem(`${this.uniqueKey}.collapsed`, this.list.collapsed);
       }
     },
diff --git a/app/assets/javascripts/boards/components/board_list_header_deprecated.vue b/app/assets/javascripts/boards/components/board_list_header_deprecated.vue
deleted file mode 100644
index bc29728fc55..00000000000
--- a/app/assets/javascripts/boards/components/board_list_header_deprecated.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<script>
-import {
-  GlButton,
-  GlButtonGroup,
-  GlLabel,
-  GlTooltip,
-  GlIcon,
-  GlSprintf,
-  GlTooltipDirective,
-} from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
-import { isScopedLabel } from '~/lib/utils/common_utils';
-import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
-import { n__, s__ } from '~/locale';
-import sidebarEventHub from '~/sidebar/event_hub';
-import AccessorUtilities from '../../lib/utils/accessor';
-import { inactiveId, LIST, ListType } from '../constants';
-import eventHub from '../eventhub';
-import boardsStore from '../stores/boards_store';
-import IssueCount from './item_count.vue';
-
-// This component is being replaced in favor of './board_list_header.vue' for GraphQL boards
-
-export default {
-  components: {
-    GlButtonGroup,
-    GlButton,
-    GlLabel,
-    GlTooltip,
-    GlIcon,
-    GlSprintf,
-    IssueCount,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  inject: {
-    currentUserId: {
-      default: null,
-    },
-    boardId: {
-      default: '',
-    },
-  },
-  props: {
-    list: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    isSwimlanesHeader: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      weightFeatureAvailable: false,
-    };
-  },
-  computed: {
-    ...mapState(['activeId']),
-    isLoggedIn() {
-      return Boolean(this.currentUserId);
-    },
-    listType() {
-      return this.list.type;
-    },
-    listAssignee() {
-      return this.list?.assignee?.username || '';
-    },
-    listTitle() {
-      return this.list?.label?.description || this.list.title || '';
-    },
-    showListHeaderButton() {
-      return !this.disabled && this.listType !== ListType.closed;
-    },
-    showMilestoneListDetails() {
-      return this.list.type === 'milestone' && this.list.milestone && this.showListDetails;
-    },
-    showAssigneeListDetails() {
-      return this.list.type === 'assignee' && this.showListDetails;
-    },
-    showIterationListDetails() {
-      return this.listType === ListType.iteration && this.showListDetails;
-    },
-    showListDetails() {
-      return this.list.isExpanded || !this.isSwimlanesHeader;
-    },
-    showListHeaderActions() {
-      if (this.isLoggedIn) {
-        return this.isNewIssueShown || this.isSettingsShown;
-      }
-      return false;
-    },
-    issuesCount() {
-      return this.list.issuesSize;
-    },
-    issuesTooltipLabel() {
-      return n__(`%d issue`, `%d issues`, this.issuesCount);
-    },
-    chevronTooltip() {
-      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
-    },
-    chevronIcon() {
-      return this.list.isExpanded ? 'chevron-right' : 'chevron-down';
-    },
-    isNewIssueShown() {
-      return this.listType === ListType.backlog || this.showListHeaderButton;
-    },
-    isSettingsShown() {
-      return (
-        this.listType !== ListType.backlog && this.showListHeaderButton && this.list.isExpanded
-      );
-    },
-    uniqueKey() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `boards.${this.boardId}.${this.listType}.${this.list.id}`;
-    },
-    collapsedTooltipTitle() {
-      return this.listTitle || this.listAssignee;
-    },
-  },
-  methods: {
-    ...mapActions(['setActiveId']),
-    openSidebarSettings() {
-      if (this.activeId === inactiveId) {
-        sidebarEventHub.$emit('sidebar.closeAll');
-      }
-
-      this.setActiveId({ id: this.list.id, sidebarType: LIST });
-    },
-    showScopedLabels(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
-    },
-
-    showNewIssueForm() {
-      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
-    },
-    toggleExpanded() {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.list.isExpanded = !this.list.isExpanded;
-
-      if (!this.isLoggedIn) {
-        this.addToLocalStorage();
-      } else {
-        this.updateListFunction();
-      }
-
-      // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
-      // Close all tooltips manually to prevent dangling tooltips.
-      this.$root.$emit(BV_HIDE_TOOLTIP);
-    },
-    addToLocalStorage() {
-      if (AccessorUtilities.isLocalStorageAccessSafe()) {
-        localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
-      }
-    },
-    updateListFunction() {
-      this.list.update();
-    },
-  },
-};
-</script>
-
-<template>
-  <header
-    :class="{
-      'has-border': list.label && list.label.color,
-      'gl-h-full': !list.isExpanded,
-      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
-    }"
-    :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }"
-    class="board-header gl-relative"
-    data-qa-selector="board_list_header"
-    data-testid="board-list-header"
-  >
-    <h3
-      :class="{
-        'user-can-drag': !disabled && !list.preset,
-        'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
-        'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
-        'gl-py-2': !list.isExpanded && isSwimlanesHeader,
-        'gl-flex-direction-column': !list.isExpanded,
-      }"
-      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle"
-    >
-      <gl-button
-        v-if="list.isExpandable"
-        v-gl-tooltip.hover
-        :aria-label="chevronTooltip"
-        :title="chevronTooltip"
-        :icon="chevronIcon"
-        class="board-title-caret no-drag gl-cursor-pointer"
-        category="tertiary"
-        size="small"
-        @click="toggleExpanded"
-      />
-      <!-- The following is only true in EE and if it is a milestone -->
-      <span
-        v-if="showMilestoneListDetails"
-        aria-hidden="true"
-        class="milestone-icon"
-        :class="{
-          'gl-mt-3 gl-rotate-90': !list.isExpanded,
-          'gl-mr-2': list.isExpanded,
-        }"
-      >
-        <gl-icon name="timer" />
-      </span>
-
-      <span
-        v-if="showIterationListDetails"
-        aria-hidden="true"
-        :class="{
-          'gl-mt-3 gl-rotate-90': !list.isExpanded,
-          'gl-mr-2': list.isExpanded,
-        }"
-      >
-        <gl-icon name="iteration" />
-      </span>
-
-      <a
-        v-if="showAssigneeListDetails"
-        :href="list.assignee.path"
-        class="user-avatar-link js-no-trigger"
-        :class="{
-          'gl-mt-3 gl-rotate-90': !list.isExpanded,
-        }"
-      >
-        <img
-          v-gl-tooltip.hover.bottom
-          :title="listAssignee"
-          :alt="list.assignee.name"
-          :src="list.assignee.avatar"
-          class="avatar s20"
-          height="20"
-          width="20"
-        />
-      </a>
-      <div
-        class="board-title-text"
-        :class="{
-          'gl-display-none': !list.isExpanded && isSwimlanesHeader,
-          'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded,
-          'gl-flex-grow-1': list.isExpanded,
-        }"
-      >
-        <span
-          v-if="list.type !== 'label'"
-          v-gl-tooltip.hover
-          :class="{
-            'gl-display-block': !list.isExpanded || list.type === 'milestone',
-          }"
-          :title="listTitle"
-          class="board-title-main-text gl-text-truncate"
-        >
-          {{ list.title }}
-        </span>
-        <span
-          v-if="list.type === 'assignee'"
-          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
-          :class="{ 'gl-display-none': !list.isExpanded }"
-        >
-          @{{ listAssignee }}
-        </span>
-        <gl-label
-          v-if="list.type === 'label'"
-          v-gl-tooltip.hover.bottom
-          :background-color="list.label.color"
-          :description="list.label.description"
-          :scoped="showScopedLabels(list.label)"
-          :size="!list.isExpanded ? 'sm' : ''"
-          :title="list.label.title"
-        />
-      </div>
-
-      <span
-        v-if="isSwimlanesHeader && !list.isExpanded"
-        ref="collapsedInfo"
-        aria-hidden="true"
-        class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-500"
-      >
-        <gl-icon name="information" />
-      </span>
-      <gl-tooltip v-if="isSwimlanesHeader && !list.isExpanded" :target="() => $refs.collapsedInfo">
-        <div class="gl-font-weight-bold gl-pb-2">{{ collapsedTooltipTitle }}</div>
-        <div v-if="list.maxIssueCount !== 0">
-          &#8226;
-          <gl-sprintf :message="__('%{issuesSize} with a limit of %{maxIssueCount}')">
-            <template #issuesSize>{{ issuesTooltipLabel }}</template>
-            <template #maxIssueCount>{{ list.maxIssueCount }}</template>
-          </gl-sprintf>
-        </div>
-        <div v-else>&#8226; {{ issuesTooltipLabel }}</div>
-        <div v-if="weightFeatureAvailable">
-          &#8226;
-          <gl-sprintf :message="__('%{totalWeight} total weight')">
-            <template #totalWeight>{{ list.totalWeight }}</template>
-          </gl-sprintf>
-        </div>
-      </gl-tooltip>
-
-      <div
-        class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
-        :class="{
-          'gl-display-none!': !list.isExpanded && isSwimlanesHeader,
-          'gl-p-0': !list.isExpanded,
-        }"
-      >
-        <span class="gl-display-inline-flex">
-          <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
-          <span ref="issueCount" class="issue-count-badge-count">
-            <gl-icon class="gl-mr-2" name="issues" />
-            <issue-count :items-size="issuesCount" :max-issue-count="list.maxIssueCount" />
-          </span>
-          <!-- The following is only true in EE. -->
-          <template v-if="weightFeatureAvailable">
-            <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
-            <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3">
-              <gl-icon class="gl-mr-2" name="weight" />
-              {{ list.totalWeight }}
-            </span>
-          </template>
-        </span>
-      </div>
-      <gl-button-group v-if="showListHeaderActions" class="board-list-button-group pl-2">
-        <gl-button
-          v-if="isNewIssueShown"
-          ref="newIssueBtn"
-          v-gl-tooltip.hover
-          :class="{
-            'gl-display-none': !list.isExpanded,
-          }"
-          :aria-label="__('New issue')"
-          :title="__('New issue')"
-          class="issue-count-badge-add-button no-drag"
-          icon="plus"
-          @click="showNewIssueForm"
-        />
-
-        <gl-button
-          v-if="isSettingsShown"
-          ref="settingsBtn"
-          v-gl-tooltip.hover
-          :aria-label="__('List settings')"
-          class="no-drag js-board-settings-button"
-          :title="__('List settings')"
-          icon="settings"
-          @click="openSidebarSettings"
-        />
-        <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
-      </gl-button-group>
-    </h3>
-  </header>
-</template>
diff --git a/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue b/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
deleted file mode 100644
index a25b436b8de..00000000000
--- a/app/assets/javascripts/boards/components/board_new_issue_deprecated.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script>
-import { GlButton } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
-import { getMilestone } from 'ee_else_ce/boards/boards_util';
-import ListIssue from 'ee_else_ce/boards/models/issue';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import eventHub from '../eventhub';
-import boardsStore from '../stores/boards_store';
-import ProjectSelect from './project_select_deprecated.vue';
-
-// This component is being replaced in favor of './board_new_issue.vue' for GraphQL boards
-
-export default {
-  name: 'BoardNewIssueDeprecated',
-  components: {
-    ProjectSelect,
-    GlButton,
-  },
-  mixins: [glFeatureFlagMixin()],
-  inject: ['groupId'],
-  props: {
-    list: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      title: '',
-      error: false,
-      selectedProject: {},
-    };
-  },
-  computed: {
-    ...mapGetters(['isGroupBoard']),
-    disabled() {
-      if (this.isGroupBoard) {
-        return this.title === '' || !this.selectedProject.name;
-      }
-      return this.title === '';
-    },
-  },
-  mounted() {
-    this.$refs.input.focus();
-    eventHub.$on('setSelectedProject', this.setSelectedProject);
-  },
-  methods: {
-    submit(e) {
-      e.preventDefault();
-      if (this.title.trim() === '') return Promise.resolve();
-
-      this.error = false;
-
-      const labels = this.list.label ? [this.list.label] : [];
-      const assignees = this.list.assignee ? [this.list.assignee] : [];
-      const milestone = getMilestone(this.list);
-
-      const { weightFeatureAvailable } = boardsStore;
-      const { weight } = weightFeatureAvailable ? boardsStore.state.currentBoard : {};
-
-      const issue = new ListIssue({
-        title: this.title,
-        labels,
-        subscribed: true,
-        assignees,
-        milestone,
-        project_id: this.selectedProject.id,
-        weight,
-      });
-
-      eventHub.$emit(`scroll-board-list-${this.list.id}`);
-      this.cancel();
-
-      return this.list
-        .newIssue(issue)
-        .then(() => {
-          boardsStore.setIssueDetail(issue);
-          boardsStore.setListDetail(this.list);
-        })
-        .catch(() => {
-          this.list.removeIssue(issue);
-
-          // Show error message
-          this.error = true;
-        });
-    },
-    cancel() {
-      this.title = '';
-      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
-    },
-    setSelectedProject(selectedProject) {
-      this.selectedProject = selectedProject;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="board-new-issue-form">
-    <div class="board-card position-relative p-3 rounded">
-      <form @submit="submit($event)">
-        <div v-if="error" class="flash-container">
-          <div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
-        </div>
-        <label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
-        <input
-          :id="list.id + '-title'"
-          ref="input"
-          v-model="title"
-          class="form-control"
-          type="text"
-          name="issue_title"
-          autocomplete="off"
-        />
-        <project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
-        <div class="clearfix gl-mt-3">
-          <gl-button
-            ref="submitButton"
-            :disabled="disabled"
-            class="float-left js-no-auto-disable"
-            variant="success"
-            category="primary"
-            type="submit"
-            >{{ __('Create issue') }}</gl-button
-          >
-          <gl-button
-            ref="cancelButton"
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="cancel"
-            >{{ __('Cancel') }}</gl-button
-          >
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index c089a6a39af..6b7c08d05a5 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -3,7 +3,6 @@ import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui';
 import { MountingPortal } from 'portal-vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { LIST, ListType, ListTypeTitles } from '~/boards/constants';
-import boardsStore from '~/boards/stores/boards_store';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
@@ -23,7 +22,7 @@ export default {
       import('ee_component/boards/components/board_settings_list_types.vue'),
   },
   mixins: [glFeatureFlagMixin(), Tracking.mixin()],
-  inject: ['canAdminList'],
+  inject: ['canAdminList', 'scopedLabelsAvailable'],
   inheritAttrs: false,
   data() {
     return {
@@ -31,20 +30,13 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['isSidebarOpen', 'shouldUseGraphQL', 'isEpicBoard']),
+    ...mapGetters(['isSidebarOpen', 'isEpicBoard']),
     ...mapState(['activeId', 'sidebarType', 'boardLists']),
     isWipLimitsOn() {
       return this.glFeatures.wipLimits && !this.isEpicBoard;
     },
     activeList() {
-      /*
-        Warning: Though a computed property it is not reactive because we are
-        referencing a List Model class. Reactivity only applies to plain JS objects
-      */
-      if (this.shouldUseGraphQL || this.isEpicBoard) {
-        return this.boardLists[this.activeId];
-      }
-      return boardsStore.state.lists.find(({ id }) => id === this.activeId);
+      return this.boardLists[this.activeId] || {};
     },
     activeListLabel() {
       return this.activeList.label;
@@ -68,17 +60,13 @@ export default {
   methods: {
     ...mapActions(['unsetActiveId', 'removeList']),
     showScopedLabels(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+      return this.scopedLabelsAvailable && isScopedLabel(label);
     },
     deleteBoard() {
       // eslint-disable-next-line no-alert
       if (window.confirm(__('Are you sure you want to remove this list?'))) {
-        if (this.shouldUseGraphQL || this.isEpicBoard) {
-          this.track('click_button', { label: 'remove_list' });
-          this.removeList(this.activeId);
-        } else {
-          this.activeList.destroy();
-        }
+        this.track('click_button', { label: 'remove_list' });
+        this.removeList(this.activeId);
         this.unsetActiveId();
       }
     },
@@ -93,9 +81,26 @@ export default {
       v-bind="$attrs"
       class="js-board-settings-sidebar gl-absolute"
       :open="isSidebarOpen"
+      variant="sidebar"
       @close="unsetActiveId"
     >
-      <template #title>{{ $options.listSettingsText }}</template>
+      <template #title>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
+          {{ $options.listSettingsText }}
+        </h2>
+      </template>
+      <template #header>
+        <div v-if="canAdminList && activeList.id" class="gl-mt-3">
+          <gl-button
+            variant="danger"
+            category="secondary"
+            size="small"
+            data-testid="remove-list"
+            @click.stop="deleteBoard"
+            >{{ __('Remove list') }}
+          </gl-button>
+        </div>
+      </template>
       <template v-if="isSidebarOpen">
         <div v-if="boardListType === ListType.label">
           <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
@@ -115,16 +120,6 @@ export default {
           v-if="isWipLimitsOn"
           :max-issue-count="activeList.maxIssueCount"
         />
-        <div v-if="canAdminList && !activeList.preset && activeList.id" class="gl-mt-4">
-          <gl-button
-            variant="danger"
-            category="secondary"
-            icon="remove"
-            data-testid="remove-list"
-            @click.stop="deleteBoard"
-            >{{ __('Remove list') }}
-          </gl-button>
-        </div>
       </template>
     </gl-drawer>
   </mounting-portal>
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
deleted file mode 100644
index 21a34182369..00000000000
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ /dev/null
@@ -1,115 +0,0 @@
-// This is a true violation of @gitlab/no-runtime-template-compiler, as it
-// relies on app/views/shared/boards/components/_sidebar.html.haml for its
-// template.
-/* eslint-disable no-new, @gitlab/no-runtime-template-compiler */
-
-import { GlLabel } from '@gitlab/ui';
-import $ from 'jquery';
-import Vue from 'vue';
-import DueDateSelectors from '~/due_date_select';
-import IssuableContext from '~/issuable_context';
-import LabelsSelect from '~/labels_select';
-import { isScopedLabel } from '~/lib/utils/common_utils';
-import { sprintf, __ } from '~/locale';
-import MilestoneSelect from '~/milestone_select';
-import Sidebar from '~/right_sidebar';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
-import Assignees from '~/sidebar/components/assignees/assignees.vue';
-import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
-import Subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
-import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
-import eventHub from '~/sidebar/event_hub';
-import boardsStore from '../stores/boards_store';
-
-export default Vue.extend({
-  components: {
-    AssigneeTitle,
-    Assignees,
-    GlLabel,
-    SidebarEpicsSelect: () =>
-      import('ee_component/sidebar/components/sidebar_item_epics_select.vue'),
-    Subscriptions,
-    TimeTracker,
-    SidebarAssigneesWidget,
-  },
-  props: {
-    currentUser: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-  data() {
-    return {
-      detail: boardsStore.detail,
-      issue: {},
-      list: {},
-      loadingAssignees: false,
-      timeTrackingLimitToHours: boardsStore.timeTracking.limitToHours,
-    };
-  },
-  computed: {
-    showSidebar() {
-      return Object.keys(this.issue).length;
-    },
-    milestoneTitle() {
-      return this.issue.milestone ? this.issue.milestone.title : __('No milestone');
-    },
-    canRemove() {
-      return !this.list?.preset;
-    },
-    hasLabels() {
-      return this.issue.labels && this.issue.labels.length;
-    },
-    labelDropdownTitle() {
-      return this.hasLabels
-        ? sprintf(__('%{firstLabel} +%{labelCount} more'), {
-            firstLabel: this.issue.labels[0].title,
-            labelCount: this.issue.labels.length - 1,
-          })
-        : __('Label');
-    },
-    selectedLabels() {
-      return this.hasLabels ? this.issue.labels.map((l) => l.title).join(',') : '';
-    },
-  },
-  watch: {
-    detail: {
-      handler() {
-        if (this.issue.id !== this.detail.issue.id) {
-          $('.js-issue-board-sidebar', this.$el).each((i, el) => {
-            $(el).data('deprecatedJQueryDropdown').clearMenu();
-          });
-        }
-
-        this.issue = this.detail.issue;
-        this.list = this.detail.list;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    eventHub.$on('sidebar.closeAll', this.closeSidebar);
-  },
-  beforeDestroy() {
-    eventHub.$off('sidebar.closeAll', this.closeSidebar);
-  },
-  mounted() {
-    new IssuableContext(this.currentUser);
-    new MilestoneSelect();
-    new DueDateSelectors();
-    new LabelsSelect();
-    new Sidebar();
-  },
-  methods: {
-    closeSidebar() {
-      this.detail.issue = {};
-    },
-    setAssignees({ assignees }) {
-      boardsStore.detail.issue.setAssignees(assignees);
-    },
-    showScopedLabels(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
-    },
-  },
-});
diff --git a/app/assets/javascripts/boards/components/boards_selector_deprecated.vue b/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
deleted file mode 100644
index c1536dff2c6..00000000000
--- a/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<script>
-import {
-  GlLoadingIcon,
-  GlSearchBoxByType,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-  GlDropdownItem,
-  GlModalDirective,
-} from '@gitlab/ui';
-import { throttle } from 'lodash';
-import { mapGetters, mapState } from 'vuex';
-
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import httpStatusCodes from '~/lib/utils/http_status';
-
-import groupQuery from '../graphql/group_boards.query.graphql';
-import projectQuery from '../graphql/project_boards.query.graphql';
-
-import boardsStore from '../stores/boards_store';
-import BoardForm from './board_form.vue';
-
-const MIN_BOARDS_TO_VIEW_RECENT = 10;
-
-export default {
-  name: 'BoardsSelector',
-  components: {
-    BoardForm,
-    GlLoadingIcon,
-    GlSearchBoxByType,
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
-    GlDropdownItem,
-  },
-  directives: {
-    GlModalDirective,
-  },
-  props: {
-    currentBoard: {
-      type: Object,
-      required: true,
-    },
-    throttleDuration: {
-      type: Number,
-      default: 200,
-      required: false,
-    },
-    boardBaseUrl: {
-      type: String,
-      required: true,
-    },
-    hasMissingBoards: {
-      type: Boolean,
-      required: true,
-    },
-    canAdminBoard: {
-      type: Boolean,
-      required: true,
-    },
-    multipleIssueBoardsAvailable: {
-      type: Boolean,
-      required: true,
-    },
-    labelsPath: {
-      type: String,
-      required: true,
-    },
-    labelsWebUrl: {
-      type: String,
-      required: true,
-    },
-    projectId: {
-      type: Number,
-      required: true,
-    },
-    groupId: {
-      type: Number,
-      required: true,
-    },
-    scopedIssueBoardFeatureEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    weights: {
-      type: Array,
-      required: true,
-    },
-    enabledScopedLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      hasScrollFade: false,
-      loadingBoards: 0,
-      loadingRecentBoards: false,
-      scrollFadeInitialized: false,
-      boards: [],
-      recentBoards: [],
-      state: boardsStore.state,
-      throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
-      contentClientHeight: 0,
-      maxPosition: 0,
-      store: boardsStore,
-      filterTerm: '',
-    };
-  },
-  computed: {
-    ...mapState(['boardType']),
-    ...mapGetters(['isGroupBoard']),
-    parentType() {
-      return this.boardType;
-    },
-    loading() {
-      return this.loadingRecentBoards || Boolean(this.loadingBoards);
-    },
-    currentPage() {
-      return this.state.currentPage;
-    },
-    filteredBoards() {
-      return this.boards.filter((board) =>
-        board.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
-      );
-    },
-    board() {
-      return this.state.currentBoard;
-    },
-    showDelete() {
-      return this.boards.length > 1;
-    },
-    scrollFadeClass() {
-      return {
-        'fade-out': !this.hasScrollFade,
-      };
-    },
-    showRecentSection() {
-      return (
-        this.recentBoards.length &&
-        this.boards.length > MIN_BOARDS_TO_VIEW_RECENT &&
-        !this.filterTerm.length
-      );
-    },
-  },
-  watch: {
-    filteredBoards() {
-      this.scrollFadeInitialized = false;
-      this.$nextTick(this.setScrollFade);
-    },
-  },
-  created() {
-    boardsStore.setCurrentBoard(this.currentBoard);
-  },
-  methods: {
-    showPage(page) {
-      boardsStore.showPage(page);
-    },
-    cancel() {
-      this.showPage('');
-    },
-    loadBoards(toggleDropdown = true) {
-      if (toggleDropdown && this.boards.length > 0) {
-        return;
-      }
-
-      this.$apollo.addSmartQuery('boards', {
-        variables() {
-          return { fullPath: this.state.endpoints.fullPath };
-        },
-        query() {
-          return this.isGroupBoard ? groupQuery : projectQuery;
-        },
-        loadingKey: 'loadingBoards',
-        update(data) {
-          if (!data?.[this.parentType]) {
-            return [];
-          }
-          return data[this.parentType].boards.edges.map(({ node }) => ({
-            id: getIdFromGraphQLId(node.id),
-            name: node.name,
-          }));
-        },
-      });
-
-      this.loadingRecentBoards = true;
-      boardsStore
-        .recentBoards()
-        .then((res) => {
-          this.recentBoards = res.data;
-        })
-        .catch((err) => {
-          /**
-           *  If user is unauthorized we'd still want to resolve the
-           *  request to display all boards.
-           */
-          if (err?.response?.status === httpStatusCodes.UNAUTHORIZED) {
-            this.recentBoards = []; // recent boards are empty
-            return;
-          }
-          throw err;
-        })
-        .then(() => this.$nextTick()) // Wait for boards list in DOM
-        .then(() => {
-          this.setScrollFade();
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.loadingRecentBoards = false;
-        });
-    },
-    isScrolledUp() {
-      const { content } = this.$refs;
-
-      if (!content) {
-        return false;
-      }
-
-      const currentPosition = this.contentClientHeight + content.scrollTop;
-
-      return currentPosition < this.maxPosition;
-    },
-    initScrollFade() {
-      const { content } = this.$refs;
-
-      if (!content) {
-        return;
-      }
-
-      this.scrollFadeInitialized = true;
-
-      this.contentClientHeight = content.clientHeight;
-      this.maxPosition = content.scrollHeight;
-    },
-    setScrollFade() {
-      if (!this.scrollFadeInitialized) this.initScrollFade();
-
-      this.hasScrollFade = this.isScrolledUp();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="boards-switcher js-boards-selector gl-mr-3">
-    <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <gl-dropdown
-        data-qa-selector="boards_dropdown"
-        toggle-class="dropdown-menu-toggle js-dropdown-toggle"
-        menu-class="flex-column dropdown-extended-height"
-        :text="board.name"
-        @show="loadBoards"
-      >
-        <p class="gl-new-dropdown-header-top" @mousedown.prevent>
-          {{ s__('IssueBoards|Switch board') }}
-        </p>
-        <gl-search-box-by-type ref="searchBox" v-model="filterTerm" class="m-2" />
-
-        <div
-          v-if="!loading"
-          ref="content"
-          data-qa-selector="boards_dropdown_content"
-          class="dropdown-content flex-fill"
-          @scroll.passive="throttledSetScrollFade"
-        >
-          <gl-dropdown-item
-            v-show="filteredBoards.length === 0"
-            class="gl-pointer-events-none text-secondary"
-          >
-            {{ s__('IssueBoards|No matching boards found') }}
-          </gl-dropdown-item>
-
-          <gl-dropdown-section-header v-if="showRecentSection">
-            {{ __('Recent') }}
-          </gl-dropdown-section-header>
-
-          <template v-if="showRecentSection">
-            <gl-dropdown-item
-              v-for="recentBoard in recentBoards"
-              :key="`recent-${recentBoard.id}`"
-              class="js-dropdown-item"
-              :href="`${boardBaseUrl}/${recentBoard.id}`"
-            >
-              {{ recentBoard.name }}
-            </gl-dropdown-item>
-          </template>
-
-          <gl-dropdown-divider v-if="showRecentSection" />
-
-          <gl-dropdown-section-header v-if="showRecentSection">
-            {{ __('All') }}
-          </gl-dropdown-section-header>
-
-          <gl-dropdown-item
-            v-for="otherBoard in filteredBoards"
-            :key="otherBoard.id"
-            class="js-dropdown-item"
-            :href="`${boardBaseUrl}/${otherBoard.id}`"
-          >
-            {{ otherBoard.name }}
-          </gl-dropdown-item>
-
-          <gl-dropdown-item v-if="hasMissingBoards" class="no-pointer-events">
-            {{
-              s__(
-                'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
-              )
-            }}
-          </gl-dropdown-item>
-        </div>
-
-        <div
-          v-show="filteredBoards.length > 0"
-          class="dropdown-content-faded-mask"
-          :class="scrollFadeClass"
-        ></div>
-
-        <gl-loading-icon v-if="loading" size="sm" />
-
-        <div v-if="canAdminBoard">
-          <gl-dropdown-divider />
-
-          <gl-dropdown-item
-            v-if="multipleIssueBoardsAvailable"
-            v-gl-modal-directive="'board-config-modal'"
-            data-qa-selector="create_new_board_button"
-            @click.prevent="showPage('new')"
-          >
-            {{ s__('IssueBoards|Create new board') }}
-          </gl-dropdown-item>
-
-          <gl-dropdown-item
-            v-if="showDelete"
-            v-gl-modal-directive="'board-config-modal'"
-            class="text-danger js-delete-board"
-            @click.prevent="showPage('delete')"
-          >
-            {{ s__('IssueBoards|Delete board') }}
-          </gl-dropdown-item>
-        </div>
-      </gl-dropdown>
-
-      <board-form
-        v-if="currentPage"
-        :labels-path="labelsPath"
-        :labels-web-url="labelsWebUrl"
-        :project-id="projectId"
-        :group-id="groupId"
-        :can-admin-board="canAdminBoard"
-        :scoped-issue-board-feature-enabled="scopedIssueBoardFeatureEnabled"
-        :weights="weights"
-        :enable-scoped-labels="enabledScopedLabels"
-        :current-board="currentBoard"
-        :current-page="state.currentPage"
-        @cancel="cancel"
-      />
-    </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/components/config_toggle.vue b/app/assets/javascripts/boards/components/config_toggle.vue
index 30e304b8a65..f39e4d90357 100644
--- a/app/assets/javascripts/boards/components/config_toggle.vue
+++ b/app/assets/javascripts/boards/components/config_toggle.vue
@@ -15,11 +15,6 @@ export default {
   },
   mixins: [Tracking.mixin()],
   props: {
-    boardsStore: {
-      type: Object,
-      required: false,
-      default: null,
-    },
     canAdminList: {
       type: Boolean,
       required: true,
@@ -41,9 +36,6 @@ export default {
     showPage() {
       this.track('click_button', { label: 'edit_board' });
       eventHub.$emit('showBoardModal', formType.edit);
-      if (this.boardsStore) {
-        this.boardsStore.showPage(formType.edit);
-      }
     },
   },
 };
diff --git a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
index 5206db05410..b6c5ef955c6 100644
--- a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
+++ b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
@@ -6,6 +6,7 @@ import issueBoardFilters from '~/boards/issue_board_filters';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
+import { DEFAULT_MILESTONES_GRAPHQL } from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
@@ -63,17 +64,17 @@ export default {
 
       return [
         {
-          icon: 'labels',
-          title: label,
-          type: 'label_name',
+          icon: 'user',
+          title: assignee,
+          type: 'assignee_username',
           operators: [
             { value: '=', description: is },
             { value: '!=', description: isNot },
           ],
-          token: LabelToken,
-          unique: false,
-          symbol: '~',
-          fetchLabels,
+          token: AuthorToken,
+          unique: true,
+          fetchAuthors,
+          preloadedAuthors: this.preloadedAuthors(),
         },
         {
           icon: 'pencil',
@@ -90,17 +91,27 @@ export default {
           preloadedAuthors: this.preloadedAuthors(),
         },
         {
-          icon: 'user',
-          title: assignee,
-          type: 'assignee_username',
+          icon: 'labels',
+          title: label,
+          type: 'label_name',
           operators: [
             { value: '=', description: is },
             { value: '!=', description: isNot },
           ],
-          token: AuthorToken,
+          token: LabelToken,
+          unique: false,
+          symbol: '~',
+          fetchLabels,
+        },
+        {
+          type: 'milestone_title',
+          title: milestone,
+          icon: 'clock',
+          symbol: '%',
+          token: MilestoneToken,
           unique: true,
-          fetchAuthors,
-          preloadedAuthors: this.preloadedAuthors(),
+          defaultMilestones: DEFAULT_MILESTONES_GRAPHQL,
+          fetchMilestones: this.fetchMilestones,
         },
         {
           icon: 'issues',
@@ -114,16 +125,6 @@ export default {
             { icon: 'issue-type-incident', value: types.INCIDENT, title: incident },
           ],
         },
-        {
-          type: 'milestone_title',
-          title: milestone,
-          icon: 'clock',
-          symbol: '%',
-          token: MilestoneToken,
-          unique: true,
-          defaultMilestones: [], // todo: https://gitlab.com/gitlab-org/gitlab/-/issues/337044#note_640010094
-          fetchMilestones: this.fetchMilestones,
-        },
         {
           type: 'weight',
           title: weight,
diff --git a/app/assets/javascripts/boards/components/issue_card_inner_deprecated.vue b/app/assets/javascripts/boards/components/issue_card_inner_deprecated.vue
deleted file mode 100644
index 6e90731cc2f..00000000000
--- a/app/assets/javascripts/boards/components/issue_card_inner_deprecated.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<script>
-import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { sortBy } from 'lodash';
-import { mapState } from 'vuex';
-import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
-import { isScopedLabel } from '~/lib/utils/common_utils';
-import { sprintf, __, n__ } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import boardsStore from '../stores/boards_store';
-import IssueDueDate from './issue_due_date.vue';
-import IssueTimeEstimate from './issue_time_estimate_deprecated.vue';
-
-export default {
-  components: {
-    GlLabel,
-    GlIcon,
-    UserAvatarLink,
-    TooltipOnTruncate,
-    IssueDueDate,
-    IssueTimeEstimate,
-    IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  mixins: [boardCardInner],
-  inject: ['groupId', 'rootPath'],
-  props: {
-    issue: {
-      type: Object,
-      required: true,
-    },
-    list: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    updateFilters: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      limitBeforeCounter: 2,
-      maxRender: 3,
-      maxCounter: 99,
-    };
-  },
-  computed: {
-    ...mapState(['isShowingLabels']),
-    numberOverLimit() {
-      return this.issue.assignees.length - this.limitBeforeCounter;
-    },
-    assigneeCounterTooltip() {
-      const { numberOverLimit, maxCounter } = this;
-      const count = numberOverLimit > maxCounter ? maxCounter : numberOverLimit;
-      return sprintf(__('%{count} more assignees'), { count });
-    },
-    assigneeCounterLabel() {
-      if (this.numberOverLimit > this.maxCounter) {
-        return `${this.maxCounter}+`;
-      }
-
-      return `+${this.numberOverLimit}`;
-    },
-    shouldRenderCounter() {
-      if (this.issue.assignees.length <= this.maxRender) {
-        return false;
-      }
-
-      return this.issue.assignees.length > this.numberOverLimit;
-    },
-    issueId() {
-      if (this.issue.iid) {
-        return `#${this.issue.iid}`;
-      }
-      return false;
-    },
-    showLabelFooter() {
-      return this.isShowingLabels && this.issue.labels.find(this.showLabel);
-    },
-    issueReferencePath() {
-      const { referencePath, groupId } = this.issue;
-      return !groupId ? referencePath.split('#')[0] : null;
-    },
-    orderedLabels() {
-      return sortBy(this.issue.labels.filter(this.isNonListLabel), 'title');
-    },
-    blockedLabel() {
-      if (this.issue.blockedByCount) {
-        return n__(`Blocked by %d issue`, `Blocked by %d issues`, this.issue.blockedByCount);
-      }
-      return __('Blocked issue');
-    },
-    assignees() {
-      return this.issue.assignees.filter((_, index) => this.shouldRenderAssignee(index));
-    },
-  },
-  methods: {
-    isIndexLessThanlimit(index) {
-      return index < this.limitBeforeCounter;
-    },
-    shouldRenderAssignee(index) {
-      // Eg. maxRender is 4,
-      // Render up to all 4 assignees if there are only 4 assigness
-      // Otherwise render up to the limitBeforeCounter
-      if (this.issue.assignees.length <= this.maxRender) {
-        return index < this.maxRender;
-      }
-
-      return index < this.limitBeforeCounter;
-    },
-    assigneeUrl(assignee) {
-      if (!assignee) return '';
-      return `${this.rootPath}${assignee.username}`;
-    },
-    avatarUrlTitle(assignee) {
-      return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name });
-    },
-    showLabel(label) {
-      if (!label.id) return false;
-      return true;
-    },
-    isNonListLabel(label) {
-      return label.id && !(this.list.type === 'label' && this.list.title === label.title);
-    },
-    filterByLabel(label) {
-      if (!this.updateFilters) return;
-      const labelTitle = encodeURIComponent(label.title);
-      const filter = `label_name[]=${labelTitle}`;
-
-      boardsStore.toggleFilter(filter);
-    },
-    showScopedLabel(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="gl-display-flex" dir="auto">
-      <h4 class="board-card-title gl-mb-0 gl-mt-0">
-        <gl-icon
-          v-if="issue.blocked"
-          v-gl-tooltip
-          name="issue-block"
-          :title="blockedLabel"
-          class="issue-blocked-icon gl-mr-2"
-          :aria-label="blockedLabel"
-          data-testid="issue-blocked-icon"
-        />
-        <gl-icon
-          v-if="issue.confidential"
-          v-gl-tooltip
-          name="eye-slash"
-          :title="__('Confidential')"
-          class="confidential-icon gl-mr-2"
-          :aria-label="__('Confidential')"
-        />
-        <a
-          :href="issue.path || issue.webUrl || ''"
-          :title="issue.title"
-          class="js-no-trigger"
-          @mousemove.stop
-          >{{ issue.title }}</a
-        >
-      </h4>
-    </div>
-    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
-      <template v-for="label in orderedLabels">
-        <gl-label
-          :key="label.id"
-          :background-color="label.color"
-          :title="label.title"
-          :description="label.description"
-          size="sm"
-          :scoped="showScopedLabel(label)"
-          @click="filterByLabel(label)"
-        />
-      </template>
-    </div>
-    <div
-      class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end"
-    >
-      <div
-        class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
-      >
-        <span
-          v-if="issue.referencePath"
-          class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
-        >
-          <tooltip-on-truncate
-            v-if="issueReferencePath"
-            :title="issueReferencePath"
-            placement="bottom"
-            class="board-issue-path gl-text-truncate gl-font-weight-bold"
-            >{{ issueReferencePath }}</tooltip-on-truncate
-          >
-          #{{ issue.iid }}
-        </span>
-        <span class="board-info-items gl-mt-3 gl-display-inline-block">
-          <issue-due-date
-            v-if="issue.dueDate"
-            :date="issue.dueDate"
-            :closed="issue.closed || Boolean(issue.closedAt)"
-          />
-          <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
-          <issue-card-weight
-            v-if="validIssueWeight(issue)"
-            :weight="issue.weight"
-            @click="filterByWeight(issue.weight)"
-          />
-        </span>
-      </div>
-      <div class="board-card-assignee gl-display-flex">
-        <user-avatar-link
-          v-for="assignee in assignees"
-          :key="assignee.id"
-          :link-href="assigneeUrl(assignee)"
-          :img-alt="avatarUrlTitle(assignee)"
-          :img-src="assignee.avatarUrl || assignee.avatar || assignee.avatar_url"
-          :img-size="24"
-          class="js-no-trigger"
-          tooltip-placement="bottom"
-        >
-          <span class="js-assignee-tooltip">
-            <span class="gl-font-weight-bold gl-display-block">{{ __('Assignee') }}</span>
-            {{ assignee.name }}
-            <span class="text-white-50">@{{ assignee.username }}</span>
-          </span>
-        </user-avatar-link>
-        <span
-          v-if="shouldRenderCounter"
-          v-gl-tooltip
-          :title="assigneeCounterTooltip"
-          class="avatar-counter"
-          data-placement="bottom"
-          >{{ assigneeCounterLabel }}</span
-        >
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate_deprecated.vue b/app/assets/javascripts/boards/components/issue_time_estimate_deprecated.vue
deleted file mode 100644
index 8ddf50cb357..00000000000
--- a/app/assets/javascripts/boards/components/issue_time_estimate_deprecated.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-import { GlTooltip, GlIcon } from '@gitlab/ui';
-import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
-import boardsStore from '../stores/boards_store';
-
-export default {
-  components: {
-    GlIcon,
-    GlTooltip,
-  },
-  props: {
-    estimate: {
-      type: [Number, String],
-      required: true,
-    },
-  },
-  data() {
-    return {
-      limitToHours: boardsStore.timeTracking.limitToHours,
-    };
-  },
-  computed: {
-    title() {
-      return stringifyTime(parseSeconds(this.estimate, { limitToHours: this.limitToHours }), true);
-    },
-    timeEstimate() {
-      return stringifyTime(parseSeconds(this.estimate, { limitToHours: this.limitToHours }));
-    },
-  },
-};
-</script>
-
-<template>
-  <span>
-    <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <gl-icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{
-        timeEstimate
-      }}</time>
-    </span>
-    <gl-tooltip
-      :target="() => $refs.issueTimeEstimate"
-      placement="bottom"
-      class="js-issue-time-estimate"
-    >
-      <span class="bold d-block">{{ __('Time estimate') }}</span> {{ title }}
-    </gl-tooltip>
-  </span>
-</template>
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
deleted file mode 100644
index 6eb1dbfb46a..00000000000
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/* eslint-disable func-names, no-new */
-
-import $ from 'jquery';
-import store from '~/boards/stores';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import createFlash from '~/flash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
-import CreateLabelDropdown from '../../create_label';
-import { fullLabelId } from '../boards_util';
-import boardsStore from '../stores/boards_store';
-
-function shouldCreateListGraphQL(label) {
-  return store.getters.shouldUseGraphQL && !store.getters.getListByLabelId(fullLabelId(label));
-}
-
-// eslint-disable-next-line @gitlab/no-global-event-off
-$(document)
-  .off('created.label')
-  .on('created.label', (e, label, addNewList) => {
-    if (!addNewList) {
-      return;
-    }
-
-    if (shouldCreateListGraphQL(label)) {
-      store.dispatch('createList', { labelId: fullLabelId(label) });
-    } else {
-      boardsStore.new({
-        title: label.title,
-        position: boardsStore.state.lists.length - 2,
-        list_type: 'label',
-        label: {
-          id: label.id,
-          title: label.title,
-          color: label.color,
-        },
-      });
-    }
-  });
-
-export default function initNewListDropdown() {
-  $('.js-new-board-list').each(function () {
-    const $dropdownToggle = $(this);
-    const $dropdown = $dropdownToggle.closest('.dropdown');
-    new CreateLabelDropdown(
-      $dropdown.find('.dropdown-new-label'),
-      $dropdownToggle.data('namespacePath'),
-      $dropdownToggle.data('projectPath'),
-    );
-
-    initDeprecatedJQueryDropdown($dropdownToggle, {
-      data(term, callback) {
-        const reqFailed = () => {
-          $dropdownToggle.data('bs.dropdown').hide();
-          createFlash({
-            message: __('Error fetching labels.'),
-          });
-        };
-
-        if (store.getters.shouldUseGraphQL) {
-          store
-            .dispatch('fetchLabels')
-            .then((data) => callback(data))
-            .catch(reqFailed);
-        } else {
-          axios
-            .get($dropdownToggle.attr('data-list-labels-path'))
-            .then(({ data }) => callback(data))
-            .catch(reqFailed);
-        }
-      },
-      renderRow(label) {
-        const active = store.getters.shouldUseGraphQL
-          ? store.getters.getListByLabelId(label.id)
-          : boardsStore.findListByLabelId(label.id);
-        const $li = $('<li />');
-        const $a = $('<a />', {
-          class: active ? `is-active js-board-list-${getIdFromGraphQLId(active.id)}` : '',
-          text: label.title,
-          href: '#',
-        });
-        const $labelColor = $('<span />', {
-          class: 'dropdown-label-box',
-          style: `background-color: ${label.color}`,
-        });
-
-        return $li.append($a.prepend($labelColor));
-      },
-      search: {
-        fields: ['title'],
-      },
-      filterable: true,
-      selectable: true,
-      multiSelect: true,
-      containerSelector: '.js-tab-container-labels .dropdown-page-one .dropdown-content',
-      clicked(options) {
-        const { e } = options;
-        const label = options.selectedObj;
-        e.preventDefault();
-
-        if (shouldCreateListGraphQL(label)) {
-          store.dispatch('createList', { labelId: label.id });
-        } else if (!boardsStore.findListByLabelId(label.id)) {
-          boardsStore.new({
-            title: label.title,
-            position: boardsStore.state.lists.length - 2,
-            list_type: 'label',
-            label: {
-              id: label.id,
-              title: label.title,
-              color: label.color,
-            },
-          });
-        }
-      },
-    });
-  });
-}
diff --git a/app/assets/javascripts/boards/components/project_select_deprecated.vue b/app/assets/javascripts/boards/components/project_select_deprecated.vue
deleted file mode 100644
index fc95ba0461d..00000000000
--- a/app/assets/javascripts/boards/components/project_select_deprecated.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownText,
-  GlSearchBoxByType,
-  GlLoadingIcon,
-} from '@gitlab/ui';
-import { s__ } from '~/locale';
-import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
-import Api from '../../api';
-import { ListType } from '../constants';
-import eventHub from '../eventhub';
-
-export default {
-  name: 'ProjectSelect',
-  i18n: {
-    headerTitle: s__(`BoardNewIssue|Projects`),
-    dropdownText: s__(`BoardNewIssue|Select a project`),
-    searchPlaceholder: s__(`BoardNewIssue|Search projects`),
-    emptySearchResult: s__(`BoardNewIssue|No matching results`),
-  },
-  defaultFetchOptions: {
-    with_issues_enabled: true,
-    with_shared: false,
-    include_subgroups: true,
-    order_by: 'similarity',
-    archived: false,
-  },
-  components: {
-    GlLoadingIcon,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownText,
-    GlSearchBoxByType,
-  },
-  inject: ['groupId'],
-  props: {
-    list: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      initialLoading: true,
-      isFetching: false,
-      projects: [],
-      selectedProject: {},
-      searchTerm: '',
-    };
-  },
-  computed: {
-    selectedProjectName() {
-      return this.selectedProject.name || this.$options.i18n.dropdownText;
-    },
-    fetchOptions() {
-      const additionalAttrs = {};
-      if (this.list.type && this.list.type !== ListType.backlog) {
-        additionalAttrs.min_access_level = featureAccessLevel.EVERYONE;
-      }
-
-      return {
-        ...this.$options.defaultFetchOptions,
-        ...additionalAttrs,
-      };
-    },
-    isFetchResultEmpty() {
-      return this.projects.length === 0;
-    },
-  },
-  watch: {
-    searchTerm() {
-      this.fetchProjects();
-    },
-  },
-  async mounted() {
-    await this.fetchProjects();
-
-    this.initialLoading = false;
-  },
-  methods: {
-    async fetchProjects() {
-      this.isFetching = true;
-      try {
-        const projects = await Api.groupProjects(this.groupId, this.searchTerm, this.fetchOptions);
-
-        this.projects = projects.map((project) => {
-          return {
-            id: project.id,
-            name: project.name,
-            namespacedName: project.name_with_namespace,
-            path: project.path_with_namespace,
-          };
-        });
-      } catch (err) {
-        /* Handled in Api.groupProjects */
-      } finally {
-        this.isFetching = false;
-      }
-    },
-    selectProject(projectId) {
-      this.selectedProject = this.projects.find((project) => project.id === projectId);
-
-      eventHub.$emit('setSelectedProject', this.selectedProject);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <label class="gl-font-weight-bold gl-mt-3" data-testid="header-label">{{
-      $options.i18n.headerTitle
-    }}</label>
-    <gl-dropdown
-      data-testid="project-select-dropdown"
-      :text="selectedProjectName"
-      :header-text="$options.i18n.headerTitle"
-      block
-      menu-class="gl-w-full!"
-      :loading="initialLoading"
-    >
-      <gl-search-box-by-type
-        v-model.trim="searchTerm"
-        debounce="250"
-        :placeholder="$options.i18n.searchPlaceholder"
-      />
-      <gl-dropdown-item
-        v-for="project in projects"
-        v-show="!isFetching"
-        :key="project.id"
-        :name="project.name"
-        @click="selectProject(project.id)"
-      >
-        {{ project.namespacedName }}
-      </gl-dropdown-item>
-      <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-        <gl-loading-icon class="gl-mx-auto" size="sm" />
-      </gl-dropdown-text>
-      <gl-dropdown-text v-if="isFetchResultEmpty && !isFetching" data-testid="empty-result-message">
-        <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span>
-      </gl-dropdown-text>
-    </gl-dropdown>
-  </div>
-</template>
diff --git a/app/assets/javascripts/boards/config_toggle.js b/app/assets/javascripts/boards/config_toggle.js
index 41938d8e284..945a508c55d 100644
--- a/app/assets/javascripts/boards/config_toggle.js
+++ b/app/assets/javascripts/boards/config_toggle.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import ConfigToggle from './components/config_toggle.vue';
 
-export default (boardsStore = undefined) => {
+export default () => {
   const el = document.querySelector('.js-board-config');
 
   if (!el) {
@@ -15,7 +15,6 @@ export default (boardsStore = undefined) => {
     render(h) {
       return h(ConfigToggle, {
         props: {
-          boardsStore,
           canAdminList: parseBoolean(el.dataset.canAdminList),
           hasScope: parseBoolean(el.dataset.hasScope),
         },
diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js
index 16fb4596726..391e0d1fb0a 100644
--- a/app/assets/javascripts/boards/constants.js
+++ b/app/assets/javascripts/boards/constants.js
@@ -119,6 +119,11 @@ export const DraggableItemTypes = {
   list: 'list',
 };
 
+export const MilestoneIDs = {
+  NONE: 0,
+  ANY: -1,
+};
+
 export default {
   BoardType,
   ListType,
diff --git a/app/assets/javascripts/boards/ee_functions.js b/app/assets/javascripts/boards/ee_functions.js
deleted file mode 100644
index 62a0d930ec0..00000000000
--- a/app/assets/javascripts/boards/ee_functions.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const setWeightFetchingState = () => {};
-export const setEpicFetchingState = () => {};
-
-export const getMilestoneTitle = () => ({});
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index c6040f1e4aa..72586970008 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -4,7 +4,6 @@ import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable
 import { updateHistory } from '~/lib/utils/url_utility';
 import FilteredSearchContainer from '../filtered_search/container';
 import vuexstore from './stores';
-import boardsStore from './stores/boards_store';
 
 export default class FilteredSearchBoards extends FilteredSearchManager {
   constructor(store, updateUrl = false, cantEdit = []) {
@@ -26,7 +25,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
     this.cantEdit = cantEdit.filter((i) => typeof i === 'string');
     this.cantEditWithValue = cantEdit.filter((i) => typeof i === 'object');
 
-    if (vuexstore.getters.shouldUseGraphQL && vuexstore.state.boardConfig) {
+    if (vuexstore.state.boardConfig) {
       const boardConfigPath = transformBoardConfig(vuexstore.state.boardConfig);
       // TODO Refactor: https://gitlab.com/gitlab-org/gitlab/-/issues/329274
       // here we are using "window.location.search" as a temporary store
@@ -45,14 +44,10 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
     const groupByParam = new URLSearchParams(window.location.search).get('group_by');
     this.store.path = `${path.substr(1)}${groupByParam ? `&group_by=${groupByParam}` : ''}`;
 
-    if (vuexstore.getters.shouldUseGraphQL) {
-      updateHistory({
-        url: `?${path.substr(1)}${groupByParam ? `&group_by=${groupByParam}` : ''}`,
-      });
-      vuexstore.dispatch('performSearch');
-    } else if (this.updateUrl) {
-      boardsStore.updateFiltersUrl();
-    }
+    updateHistory({
+      url: `?${path.substr(1)}${groupByParam ? `&group_by=${groupByParam}` : ''}`,
+    });
+    vuexstore.dispatch('performSearch');
   }
 
   removeTokens() {
diff --git a/app/assets/javascripts/boards/graphql/group_board_iterations.query.graphql b/app/assets/javascripts/boards/graphql/group_board_iterations.query.graphql
new file mode 100644
index 00000000000..1c382c4747b
--- /dev/null
+++ b/app/assets/javascripts/boards/graphql/group_board_iterations.query.graphql
@@ -0,0 +1,10 @@
+query GroupBoardIterations($fullPath: ID!, $title: String) {
+  group(fullPath: $fullPath) {
+    iterations(includeAncestors: true, title: $title) {
+      nodes {
+        id
+        title
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/boards/graphql/issue.fragment.graphql b/app/assets/javascripts/boards/graphql/issue.fragment.graphql
index 0ff70703e1a..1b14396fb5c 100644
--- a/app/assets/javascripts/boards/graphql/issue.fragment.graphql
+++ b/app/assets/javascripts/boards/graphql/issue.fragment.graphql
@@ -12,6 +12,7 @@ fragment IssueNode on Issue {
   humanTotalTimeSpent
   emailsDisabled
   confidential
+  hidden
   webUrl
   relativePosition
   assignees {
diff --git a/app/assets/javascripts/boards/graphql/project_board_iterations.query.graphql b/app/assets/javascripts/boards/graphql/project_board_iterations.query.graphql
new file mode 100644
index 00000000000..078151a275a
--- /dev/null
+++ b/app/assets/javascripts/boards/graphql/project_board_iterations.query.graphql
@@ -0,0 +1,10 @@
+query ProjectBoardIterations($fullPath: ID!, $title: String) {
+  project(fullPath: $fullPath) {
+    iterations(includeAncestors: true, title: $title) {
+      nodes {
+        id
+        title
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/boards/graphql/project_milestones.query.graphql b/app/assets/javascripts/boards/graphql/project_milestones.query.graphql
index 776530ebb83..724b7f5a34c 100644
--- a/app/assets/javascripts/boards/graphql/project_milestones.query.graphql
+++ b/app/assets/javascripts/boards/graphql/project_milestones.query.graphql
@@ -1,4 +1,4 @@
-query groupMilestones(
+query projectMilestones(
   $fullPath: ID!
   $state: MilestoneStateEnum
   $includeAncestors: Boolean
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index de7c8a3bd6b..21c1bb23dc6 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -2,41 +2,20 @@ import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { mapActions, mapGetters } from 'vuex';
 
-import 'ee_else_ce/boards/models/issue';
-import 'ee_else_ce/boards/models/list';
-import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
-import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
-import {
-  setWeightFetchingState,
-  setEpicFetchingState,
-  getMilestoneTitle,
-} from 'ee_else_ce/boards/ee_functions';
 import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes';
 import toggleLabels from 'ee_else_ce/boards/toggle_labels';
 import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
-import BoardContent from '~/boards/components/board_content.vue';
-import './models/label';
-import './models/assignee';
-import '~/boards/models/milestone';
-import '~/boards/models/project';
+import BoardApp from '~/boards/components/board_app.vue';
 import '~/boards/filters/due_date_filters';
 import { issuableTypes } from '~/boards/constants';
 import eventHub from '~/boards/eventhub';
 import FilteredSearchBoards from '~/boards/filtered_search_boards';
 import initBoardsFilteredSearch from '~/boards/mount_filtered_search_issue_boards';
 import store from '~/boards/stores';
-import boardsStore from '~/boards/stores/boards_store';
 import toggleFocusMode from '~/boards/toggle_focus';
 import createDefaultClient from '~/lib/graphql';
-import {
-  NavigationType,
-  convertObjectPropsToCamelCase,
-  parseBoolean,
-} from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
-import sidebarEventHub from '~/sidebar/event_hub';
+import { NavigationType, parseBoolean } from '~/lib/utils/common_utils';
 import introspectionQueryResultData from '~/sidebar/fragmentTypes.json';
 import { fullBoardId } from './boards_util';
 import boardConfigToggle from './config_toggle';
@@ -61,10 +40,75 @@ const apolloProvider = new VueApollo({
   ),
 });
 
-let issueBoardsApp;
+function mountBoardApp(el) {
+  const { boardId, groupId, fullPath, rootPath } = el.dataset;
+
+  store.dispatch('setInitialBoardData', {
+    boardId,
+    fullBoardId: fullBoardId(boardId),
+    fullPath,
+    boardType: el.dataset.parent,
+    disabled: parseBoolean(el.dataset.disabled) || true,
+    issuableType: issuableTypes.issue,
+    boardConfig: {
+      milestoneId: parseInt(el.dataset.boardMilestoneId, 10),
+      milestoneTitle: el.dataset.boardMilestoneTitle || '',
+      iterationId: parseInt(el.dataset.boardIterationId, 10),
+      iterationTitle: el.dataset.boardIterationTitle || '',
+      assigneeId: el.dataset.boardAssigneeId,
+      assigneeUsername: el.dataset.boardAssigneeUsername,
+      labels: el.dataset.labels ? JSON.parse(el.dataset.labels) : [],
+      labelIds: el.dataset.labelIds ? JSON.parse(el.dataset.labelIds) : [],
+      weight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null,
+    },
+  });
+
+  if (!gon?.features?.issueBoardsFilteredSearch) {
+    // Warning: FilteredSearchBoards has an implicit dependency on the Vuex state 'boardConfig'
+    // Improve this situation in the future.
+    const filterManager = new FilteredSearchBoards({ path: '' }, true, []);
+    filterManager.setup();
+
+    eventHub.$on('updateTokens', () => {
+      filterManager.updateTokens();
+    });
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    store,
+    apolloProvider,
+    provide: {
+      disabled: parseBoolean(el.dataset.disabled),
+      boardId,
+      groupId: Number(groupId),
+      rootPath,
+      currentUserId: gon.current_user_id || null,
+      canUpdate: parseBoolean(el.dataset.canUpdate),
+      canAdminList: parseBoolean(el.dataset.canAdminList),
+      labelsManagePath: el.dataset.labelsManagePath,
+      labelsFilterBasePath: el.dataset.labelsFilterBasePath,
+      timeTrackingLimitToHours: parseBoolean(el.dataset.timeTrackingLimitToHours),
+      multipleAssigneesFeatureAvailable: parseBoolean(el.dataset.multipleAssigneesFeatureAvailable),
+      epicFeatureAvailable: parseBoolean(el.dataset.epicFeatureAvailable),
+      iterationFeatureAvailable: parseBoolean(el.dataset.iterationFeatureAvailable),
+      weightFeatureAvailable: parseBoolean(el.dataset.weightFeatureAvailable),
+      boardWeight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null,
+      scopedLabelsAvailable: parseBoolean(el.dataset.scopedLabels),
+      milestoneListsAvailable: parseBoolean(el.dataset.milestoneListsAvailable),
+      assigneeListsAvailable: parseBoolean(el.dataset.assigneeListsAvailable),
+      iterationListsAvailable: parseBoolean(el.dataset.iterationListsAvailable),
+      issuableType: issuableTypes.issue,
+      emailsDisabled: parseBoolean(el.dataset.emailsDisabled),
+    },
+    render: (createComponent) => createComponent(BoardApp),
+  });
+}
 
 export default () => {
-  const $boardApp = document.getElementById('board-app');
+  const $boardApp = document.getElementById('js-issuable-board-app');
+
   // check for browser back and trigger a hard reload to circumvent browser caching.
   window.addEventListener('pageshow', (event) => {
     const isNavTypeBackForward =
@@ -75,257 +119,11 @@ export default () => {
     }
   });
 
-  if (issueBoardsApp) {
-    issueBoardsApp.$destroy(true);
-  }
-
   if (gon?.features?.issueBoardsFilteredSearch) {
     initBoardsFilteredSearch(apolloProvider);
   }
 
-  if (!gon?.features?.graphqlBoardLists) {
-    boardsStore.create();
-    boardsStore.setTimeTrackingLimitToHours($boardApp.dataset.timeTrackingLimitToHours);
-  }
-
-  // eslint-disable-next-line @gitlab/no-runtime-template-compiler
-  issueBoardsApp = new Vue({
-    el: $boardApp,
-    components: {
-      BoardContent,
-      BoardSidebar,
-      BoardSettingsSidebar: () => import('~/boards/components/board_settings_sidebar.vue'),
-    },
-    provide: {
-      boardId: $boardApp.dataset.boardId,
-      groupId: Number($boardApp.dataset.groupId),
-      rootPath: $boardApp.dataset.rootPath,
-      currentUserId: gon.current_user_id || null,
-      canUpdate: parseBoolean($boardApp.dataset.canUpdate),
-      canAdminList: parseBoolean($boardApp.dataset.canAdminList),
-      labelsManagePath: $boardApp.dataset.labelsManagePath,
-      labelsFilterBasePath: $boardApp.dataset.labelsFilterBasePath,
-      timeTrackingLimitToHours: parseBoolean($boardApp.dataset.timeTrackingLimitToHours),
-      multipleAssigneesFeatureAvailable: parseBoolean(
-        $boardApp.dataset.multipleAssigneesFeatureAvailable,
-      ),
-      epicFeatureAvailable: parseBoolean($boardApp.dataset.epicFeatureAvailable),
-      iterationFeatureAvailable: parseBoolean($boardApp.dataset.iterationFeatureAvailable),
-      weightFeatureAvailable: parseBoolean($boardApp.dataset.weightFeatureAvailable),
-      boardWeight: $boardApp.dataset.boardWeight
-        ? parseInt($boardApp.dataset.boardWeight, 10)
-        : null,
-      scopedLabelsAvailable: parseBoolean($boardApp.dataset.scopedLabels),
-      milestoneListsAvailable: parseBoolean($boardApp.dataset.milestoneListsAvailable),
-      assigneeListsAvailable: parseBoolean($boardApp.dataset.assigneeListsAvailable),
-      iterationListsAvailable: parseBoolean($boardApp.dataset.iterationListsAvailable),
-      issuableType: issuableTypes.issue,
-      emailsDisabled: parseBoolean($boardApp.dataset.emailsDisabled),
-    },
-    store,
-    apolloProvider,
-    data() {
-      return {
-        state: boardsStore.state,
-        loading: 0,
-        boardsEndpoint: $boardApp.dataset.boardsEndpoint,
-        recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
-        listsEndpoint: $boardApp.dataset.listsEndpoint,
-        disabled: parseBoolean($boardApp.dataset.disabled),
-        bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-        detailIssue: boardsStore.detail,
-        parent: $boardApp.dataset.parent,
-      };
-    },
-    computed: {
-      ...mapGetters(['shouldUseGraphQL']),
-      detailIssueVisible() {
-        return Object.keys(this.detailIssue.issue).length;
-      },
-    },
-    created() {
-      this.setInitialBoardData({
-        boardId: $boardApp.dataset.boardId,
-        fullBoardId: fullBoardId($boardApp.dataset.boardId),
-        fullPath: $boardApp.dataset.fullPath,
-        boardType: this.parent,
-        disabled: this.disabled,
-        issuableType: issuableTypes.issue,
-        boardConfig: {
-          milestoneId: parseInt($boardApp.dataset.boardMilestoneId, 10),
-          milestoneTitle: $boardApp.dataset.boardMilestoneTitle || '',
-          iterationId: parseInt($boardApp.dataset.boardIterationId, 10),
-          iterationTitle: $boardApp.dataset.boardIterationTitle || '',
-          assigneeId: $boardApp.dataset.boardAssigneeId,
-          assigneeUsername: $boardApp.dataset.boardAssigneeUsername,
-          labels: $boardApp.dataset.labels ? JSON.parse($boardApp.dataset.labels) : [],
-          labelIds: $boardApp.dataset.labelIds ? JSON.parse($boardApp.dataset.labelIds) : [],
-          weight: $boardApp.dataset.boardWeight
-            ? parseInt($boardApp.dataset.boardWeight, 10)
-            : null,
-        },
-      });
-      boardsStore.setEndpoints({
-        boardsEndpoint: this.boardsEndpoint,
-        recentBoardsEndpoint: this.recentBoardsEndpoint,
-        listsEndpoint: this.listsEndpoint,
-        bulkUpdatePath: this.bulkUpdatePath,
-        boardId: $boardApp.dataset.boardId,
-        fullPath: $boardApp.dataset.fullPath,
-      });
-      boardsStore.rootPath = this.boardsEndpoint;
-
-      eventHub.$on('updateTokens', this.updateTokens);
-      eventHub.$on('newDetailIssue', this.updateDetailIssue);
-      eventHub.$on('clearDetailIssue', this.clearDetailIssue);
-      sidebarEventHub.$on('toggleSubscription', this.toggleSubscription);
-      eventHub.$on('initialBoardLoad', this.initialBoardLoad);
-    },
-    beforeDestroy() {
-      eventHub.$off('updateTokens', this.updateTokens);
-      eventHub.$off('newDetailIssue', this.updateDetailIssue);
-      eventHub.$off('clearDetailIssue', this.clearDetailIssue);
-      sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
-      eventHub.$off('initialBoardLoad', this.initialBoardLoad);
-    },
-    mounted() {
-      if (!gon?.features?.issueBoardsFilteredSearch) {
-        this.filterManager = new FilteredSearchBoards(
-          boardsStore.filter,
-          true,
-          boardsStore.cantEdit,
-        );
-        this.filterManager.setup();
-      }
-
-      this.performSearch();
-
-      boardsStore.disabled = this.disabled;
-
-      if (!this.shouldUseGraphQL) {
-        this.initialBoardLoad();
-      }
-    },
-    methods: {
-      ...mapActions(['setInitialBoardData', 'performSearch', 'setError']),
-      initialBoardLoad() {
-        boardsStore
-          .all()
-          .then((res) => res.data)
-          .then((lists) => {
-            lists.forEach((list) => boardsStore.addList(list));
-            this.loading = false;
-          })
-          .catch((error) => {
-            this.setError({
-              error,
-              message: __('An error occurred while fetching the board lists. Please try again.'),
-            });
-          });
-      },
-      updateTokens() {
-        this.filterManager.updateTokens();
-      },
-      updateDetailIssue(newIssue, multiSelect = false) {
-        const { sidebarInfoEndpoint } = newIssue;
-        if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
-          newIssue.setFetchingState('subscriptions', true);
-          setWeightFetchingState(newIssue, true);
-          setEpicFetchingState(newIssue, true);
-          boardsStore
-            .getIssueInfo(sidebarInfoEndpoint)
-            .then((res) => res.data)
-            .then((data) => {
-              const {
-                subscribed,
-                totalTimeSpent,
-                timeEstimate,
-                humanTimeEstimate,
-                humanTotalTimeSpent,
-                weight,
-                epic,
-                assignees,
-              } = convertObjectPropsToCamelCase(data);
-
-              newIssue.setFetchingState('subscriptions', false);
-              setWeightFetchingState(newIssue, false);
-              setEpicFetchingState(newIssue, false);
-              newIssue.updateData({
-                humanTimeSpent: humanTotalTimeSpent,
-                timeSpent: totalTimeSpent,
-                humanTimeEstimate,
-                timeEstimate,
-                subscribed,
-                weight,
-                epic,
-                assignees,
-              });
-            })
-            .catch(() => {
-              newIssue.setFetchingState('subscriptions', false);
-              setWeightFetchingState(newIssue, false);
-              this.setError({ message: __('An error occurred while fetching sidebar data') });
-            });
-        }
-
-        if (multiSelect) {
-          boardsStore.toggleMultiSelect(newIssue);
-
-          if (boardsStore.detail.issue) {
-            boardsStore.clearDetailIssue();
-            return;
-          }
-
-          return;
-        }
-
-        boardsStore.setIssueDetail(newIssue);
-      },
-      clearDetailIssue(multiSelect = false) {
-        if (multiSelect) {
-          boardsStore.clearMultiSelect();
-        }
-        boardsStore.clearDetailIssue();
-      },
-      toggleSubscription(id) {
-        const { issue } = boardsStore.detail;
-        if (issue.id === id && issue.toggleSubscriptionEndpoint) {
-          issue.setFetchingState('subscriptions', true);
-          boardsStore
-            .toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
-            .then(() => {
-              issue.setFetchingState('subscriptions', false);
-              issue.updateData({
-                subscribed: !issue.subscribed,
-              });
-            })
-            .catch(() => {
-              issue.setFetchingState('subscriptions', false);
-              this.setError({
-                message: __('An error occurred when toggling the notification subscription'),
-              });
-            });
-        }
-      },
-      getNodes(data) {
-        return data[this.parent]?.board?.lists.nodes;
-      },
-    },
-  });
-
-  // eslint-disable-next-line no-new, @gitlab/no-runtime-template-compiler
-  new Vue({
-    el: document.getElementById('js-add-list'),
-    data() {
-      return {
-        filters: boardsStore.state.filters,
-        ...getMilestoneTitle($boardApp),
-      };
-    },
-    mounted() {
-      initNewListDropdown();
-    },
-  });
+  mountBoardApp($boardApp);
 
   const createColumnTriggerEl = document.querySelector('.js-create-column-trigger');
   if (createColumnTriggerEl) {
@@ -342,7 +140,7 @@ export default () => {
     });
   }
 
-  boardConfigToggle(boardsStore);
+  boardConfigToggle();
 
   toggleFocusMode();
   toggleLabels();
diff --git a/app/assets/javascripts/boards/models/assignee.js b/app/assets/javascripts/boards/models/assignee.js
deleted file mode 100644
index 1e822d06bfd..00000000000
--- a/app/assets/javascripts/boards/models/assignee.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class ListAssignee {
-  constructor(obj) {
-    this.id = obj.id;
-    this.name = obj.name;
-    this.username = obj.username;
-    this.avatar = obj.avatarUrl || obj.avatar_url || obj.avatar || gon.default_avatar_url;
-    this.path = obj.path;
-    this.state = obj.state;
-    this.webUrl = obj.web_url || obj.webUrl;
-  }
-}
-
-window.ListAssignee = ListAssignee;
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
deleted file mode 100644
index 46d1239457d..00000000000
--- a/app/assets/javascripts/boards/models/issue.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* global ListLabel */
-/* global ListMilestone */
-/* global ListAssignee */
-
-import axios from '~/lib/utils/axios_utils';
-import './label';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import boardsStore from '../stores/boards_store';
-import IssueProject from './project';
-
-class ListIssue {
-  constructor(obj) {
-    this.subscribed = obj.subscribed;
-    this.labels = [];
-    this.assignees = [];
-    this.selected = false;
-    this.position = obj.position || obj.relative_position || obj.relativePosition || Infinity;
-    this.isFetching = {
-      subscriptions: true,
-    };
-    this.closed = obj.closed;
-    this.isLoading = {};
-
-    this.refreshData(obj);
-  }
-
-  refreshData(obj) {
-    boardsStore.refreshIssueData(this, obj);
-  }
-
-  addLabel(label) {
-    boardsStore.addIssueLabel(this, label);
-  }
-
-  findLabel(findLabel) {
-    return boardsStore.findIssueLabel(this, findLabel);
-  }
-
-  removeLabel(removeLabel) {
-    boardsStore.removeIssueLabel(this, removeLabel);
-  }
-
-  removeLabels(labels) {
-    boardsStore.removeIssueLabels(this, labels);
-  }
-
-  addAssignee(assignee) {
-    boardsStore.addIssueAssignee(this, assignee);
-  }
-
-  findAssignee(findAssignee) {
-    return boardsStore.findIssueAssignee(this, findAssignee);
-  }
-
-  setAssignees(assignees) {
-    boardsStore.setIssueAssignees(this, assignees);
-  }
-
-  removeAssignee(removeAssignee) {
-    boardsStore.removeIssueAssignee(this, removeAssignee);
-  }
-
-  removeAllAssignees() {
-    boardsStore.removeAllIssueAssignees(this);
-  }
-
-  addMilestone(milestone) {
-    boardsStore.addIssueMilestone(this, milestone);
-  }
-
-  removeMilestone(removeMilestone) {
-    boardsStore.removeIssueMilestone(this, removeMilestone);
-  }
-
-  getLists() {
-    return boardsStore.state.lists.filter((list) => list.findIssue(this.id));
-  }
-
-  updateData(newData) {
-    boardsStore.updateIssueData(this, newData);
-  }
-
-  setFetchingState(key, value) {
-    boardsStore.setIssueFetchingState(this, key, value);
-  }
-
-  setLoadingState(key, value) {
-    boardsStore.setIssueLoadingState(this, key, value);
-  }
-
-  update() {
-    return boardsStore.updateIssue(this);
-  }
-}
-
-window.ListIssue = ListIssue;
-
-export default ListIssue;
diff --git a/app/assets/javascripts/boards/models/iteration.js b/app/assets/javascripts/boards/models/iteration.js
deleted file mode 100644
index b7bdc204f7c..00000000000
--- a/app/assets/javascripts/boards/models/iteration.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default class ListIteration {
-  constructor(obj) {
-    this.id = obj.id;
-    this.title = obj.title;
-    this.state = obj.state;
-    this.webUrl = obj.web_url || obj.webUrl;
-    this.description = obj.description;
-  }
-}
diff --git a/app/assets/javascripts/boards/models/label.js b/app/assets/javascripts/boards/models/label.js
deleted file mode 100644
index cd2a2c0137f..00000000000
--- a/app/assets/javascripts/boards/models/label.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-
-export default class ListLabel {
-  constructor(obj) {
-    Object.assign(this, convertObjectPropsToCamelCase(obj, { dropKeys: ['priority'] }), {
-      priority: obj.priority !== null ? obj.priority : Infinity,
-    });
-  }
-}
-
-window.ListLabel = ListLabel;
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
deleted file mode 100644
index ab24532d87f..00000000000
--- a/app/assets/javascripts/boards/models/list.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import boardsStore from '../stores/boards_store';
-import ListAssignee from './assignee';
-import ListIteration from './iteration';
-import ListLabel from './label';
-import ListMilestone from './milestone';
-import 'ee_else_ce/boards/models/issue';
-
-const TYPES = {
-  backlog: {
-    isPreset: true,
-    isExpandable: true,
-    isBlank: false,
-  },
-  closed: {
-    isPreset: true,
-    isExpandable: true,
-    isBlank: false,
-  },
-  blank: {
-    isPreset: true,
-    isExpandable: false,
-    isBlank: true,
-  },
-  default: {
-    // includes label, assignee, and milestone lists
-    isPreset: false,
-    isExpandable: true,
-    isBlank: false,
-  },
-};
-
-class List {
-  constructor(obj) {
-    this.id = obj.id;
-    this.position = obj.position;
-    this.title = obj.title;
-    this.type = obj.list_type || obj.listType;
-
-    const typeInfo = this.getTypeInfo(this.type);
-    this.preset = Boolean(typeInfo.isPreset);
-    this.isExpandable = Boolean(typeInfo.isExpandable);
-    this.isExpanded = !obj.collapsed;
-    this.page = 1;
-    this.highlighted = obj.highlighted;
-    this.loading = true;
-    this.loadingMore = false;
-    this.issues = obj.issues || [];
-    this.issuesSize = obj.issuesSize || obj.issuesCount || 0;
-    this.maxIssueCount = obj.maxIssueCount || obj.max_issue_count || 0;
-
-    if (obj.label) {
-      this.label = new ListLabel(obj.label);
-    } else if (obj.user || obj.assignee) {
-      this.assignee = new ListAssignee(obj.user || obj.assignee);
-      this.title = this.assignee.name;
-    } else if (IS_EE && obj.milestone) {
-      this.milestone = new ListMilestone(obj.milestone);
-      this.title = this.milestone.title;
-    } else if (IS_EE && obj.iteration) {
-      this.iteration = new ListIteration(obj.iteration);
-      this.title = this.iteration.title;
-    }
-
-    // doNotFetchIssues is a temporary workaround until issues are fetched using GraphQL on issue boards
-    // Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/229416
-    if (!typeInfo.isBlank && this.id && !obj.doNotFetchIssues) {
-      this.getIssues().catch(() => {
-        // TODO: handle request error
-      });
-    }
-  }
-
-  guid() {
-    const s4 = () =>
-      Math.floor((1 + Math.random()) * 0x10000)
-        .toString(16)
-        .substring(1);
-    return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-  }
-
-  save() {
-    return boardsStore.saveList(this);
-  }
-
-  destroy() {
-    boardsStore.destroy(this);
-  }
-
-  update() {
-    return boardsStore.updateListFunc(this);
-  }
-
-  nextPage() {
-    return boardsStore.goToNextPage(this);
-  }
-
-  getIssues(emptyIssues = true) {
-    return boardsStore.getListIssues(this, emptyIssues);
-  }
-
-  newIssue(issue) {
-    return boardsStore.newListIssue(this, issue);
-  }
-
-  addMultipleIssues(issues, listFrom, newIndex) {
-    boardsStore.addMultipleListIssues(this, issues, listFrom, newIndex);
-  }
-
-  addIssue(issue, listFrom, newIndex) {
-    boardsStore.addListIssue(this, issue, listFrom, newIndex);
-  }
-
-  moveIssue(issue, oldIndex, newIndex, moveBeforeId, moveAfterId) {
-    boardsStore.moveListIssues(this, issue, oldIndex, newIndex, moveBeforeId, moveAfterId);
-  }
-
-  moveMultipleIssues({ issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) {
-    boardsStore
-      .moveListMultipleIssues({
-        list: this,
-        issues,
-        oldIndicies,
-        newIndex,
-        moveBeforeId,
-        moveAfterId,
-      })
-      .catch(() =>
-        createFlash({
-          message: __('Something went wrong while moving issues.'),
-        }),
-      );
-  }
-
-  updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId) {
-    boardsStore.moveIssue(issue.id, listFrom.id, this.id, moveBeforeId, moveAfterId).catch(() => {
-      // TODO: handle request error
-    });
-  }
-
-  updateMultipleIssues(issues, listFrom, moveBeforeId, moveAfterId) {
-    boardsStore
-      .moveMultipleIssues({
-        ids: issues.map((issue) => issue.id),
-        fromListId: listFrom.id,
-        toListId: this.id,
-        moveBeforeId,
-        moveAfterId,
-      })
-      .catch(() =>
-        createFlash({
-          message: __('Something went wrong while moving issues.'),
-        }),
-      );
-  }
-
-  findIssue(id) {
-    return boardsStore.findListIssue(this, id);
-  }
-
-  removeMultipleIssues(removeIssues) {
-    return boardsStore.removeListMultipleIssues(this, removeIssues);
-  }
-
-  removeIssue(removeIssue) {
-    return boardsStore.removeListIssues(this, removeIssue);
-  }
-
-  getTypeInfo(type) {
-    return TYPES[type] || TYPES.default;
-  }
-
-  onNewIssueResponse(issue, data) {
-    boardsStore.onNewListIssueResponse(this, issue, data);
-  }
-}
-
-window.List = List;
-
-export default List;
diff --git a/app/assets/javascripts/boards/models/milestone.js b/app/assets/javascripts/boards/models/milestone.js
deleted file mode 100644
index 7201b6e91f5..00000000000
--- a/app/assets/javascripts/boards/models/milestone.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default class ListMilestone {
-  constructor(obj) {
-    this.id = obj.id;
-    this.title = obj.title;
-
-    if (IS_EE) {
-      this.path = obj.path;
-      this.state = obj.state;
-      this.webUrl = obj.web_url || obj.webUrl;
-      this.description = obj.description;
-    }
-  }
-}
-
-window.ListMilestone = ListMilestone;
diff --git a/app/assets/javascripts/boards/models/project.js b/app/assets/javascripts/boards/models/project.js
deleted file mode 100644
index 9468a02856e..00000000000
--- a/app/assets/javascripts/boards/models/project.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default class IssueProject {
-  constructor(obj) {
-    this.id = obj.id;
-    this.path = obj.path;
-    this.fullPath = obj.path_with_namespace;
-  }
-}
diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
index 7d6179a8547..a3a8ad06c43 100644
--- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
+++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
@@ -1,12 +1,9 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { mapGetters } from 'vuex';
 import BoardsSelector from 'ee_else_ce/boards/components/boards_selector.vue';
-import BoardsSelectorDeprecated from '~/boards/components/boards_selector_deprecated.vue';
 import store from '~/boards/stores';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 Vue.use(VueApollo);
 
@@ -25,9 +22,7 @@ export default (params = {}) => {
     el: boardsSwitcherElement,
     components: {
       BoardsSelector,
-      BoardsSelectorDeprecated,
     },
-    mixins: [glFeatureFlagMixin()],
     apolloProvider,
     store,
     provide: {
@@ -52,16 +47,8 @@ export default (params = {}) => {
 
       return { boardsSelectorProps };
     },
-    computed: {
-      ...mapGetters(['shouldUseGraphQL', 'isEpicBoard']),
-    },
     render(createElement) {
-      if (this.shouldUseGraphQL || this.isEpicBoard) {
-        return createElement(BoardsSelector, {
-          props: this.boardsSelectorProps,
-        });
-      }
-      return createElement(BoardsSelectorDeprecated, {
+      return createElement(BoardsSelector, {
         props: this.boardsSelectorProps,
       });
     },
diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js
index 970d00841bd..dc06b62cebb 100644
--- a/app/assets/javascripts/boards/stores/actions.js
+++ b/app/assets/javascripts/boards/stores/actions.js
@@ -36,11 +36,13 @@ import {
   filterVariables,
 } from '../boards_util';
 import boardLabelsQuery from '../graphql/board_labels.query.graphql';
+import groupBoardIterationsQuery from '../graphql/group_board_iterations.query.graphql';
 import groupBoardMilestonesQuery from '../graphql/group_board_milestones.query.graphql';
 import groupProjectsQuery from '../graphql/group_projects.query.graphql';
 import issueCreateMutation from '../graphql/issue_create.mutation.graphql';
 import issueSetLabelsMutation from '../graphql/issue_set_labels.mutation.graphql';
 import listsIssuesQuery from '../graphql/lists_issues.query.graphql';
+import projectBoardIterationsQuery from '../graphql/project_board_iterations.query.graphql';
 import projectBoardMilestonesQuery from '../graphql/project_board_milestones.query.graphql';
 
 import * as types from './mutation_types';
@@ -82,11 +84,8 @@ export default {
       'setFilters',
       convertObjectPropsToCamelCase(queryToObject(window.location.search, { gatherArrays: true })),
     );
-
-    if (gon.features.graphqlBoardLists) {
-      dispatch('fetchLists');
-      dispatch('resetIssues');
-    }
+    dispatch('fetchLists');
+    dispatch('resetIssues');
   },
 
   fetchLists: ({ commit, state, dispatch }) => {
@@ -182,7 +181,7 @@ export default {
     });
   },
 
-  fetchLabels: ({ state, commit, getters }, searchTerm) => {
+  fetchLabels: ({ state, commit }, searchTerm) => {
     const { fullPath, boardType } = state;
 
     const variables = {
@@ -200,14 +199,7 @@ export default {
         variables,
       })
       .then(({ data }) => {
-        let labels = data[boardType]?.labels.nodes;
-
-        if (!getters.shouldUseGraphQL && !getters.isEpicBoard) {
-          labels = labels.map((label) => ({
-            ...label,
-            id: getIdFromGraphQLId(label.id),
-          }));
-        }
+        const labels = data[boardType]?.labels.nodes;
 
         commit(types.RECEIVE_LABELS_SUCCESS, labels);
         return labels;
@@ -218,6 +210,52 @@ export default {
       });
   },
 
+  fetchIterations({ state, commit }, title) {
+    commit(types.RECEIVE_ITERATIONS_REQUEST);
+
+    const { fullPath, boardType } = state;
+
+    const variables = {
+      fullPath,
+      title,
+    };
+
+    let query;
+    if (boardType === BoardType.project) {
+      query = projectBoardIterationsQuery;
+    }
+    if (boardType === BoardType.group) {
+      query = groupBoardIterationsQuery;
+    }
+
+    if (!query) {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      throw new Error('Unknown board type');
+    }
+
+    return gqlClient
+      .query({
+        query,
+        variables,
+      })
+      .then(({ data }) => {
+        const errors = data[boardType]?.errors;
+        const iterations = data[boardType]?.iterations.nodes;
+
+        if (errors?.[0]) {
+          throw new Error(errors[0]);
+        }
+
+        commit(types.RECEIVE_ITERATIONS_SUCCESS, iterations);
+
+        return iterations;
+      })
+      .catch((e) => {
+        commit(types.RECEIVE_ITERATIONS_FAILURE);
+        throw e;
+      });
+  },
+
   fetchMilestones({ state, commit }, searchTerm) {
     commit(types.RECEIVE_MILESTONES_REQUEST);
 
@@ -536,8 +574,8 @@ export default {
           boardId: fullBoardId,
           fromListId: getIdFromGraphQLId(fromListId),
           toListId: getIdFromGraphQLId(toListId),
-          moveBeforeId,
-          moveAfterId,
+          moveBeforeId: moveBeforeId ? getIdFromGraphQLId(moveBeforeId) : undefined,
+          moveAfterId: moveAfterId ? getIdFromGraphQLId(moveAfterId) : undefined,
           // 'mutationVariables' allows EE code to pass in extra parameters.
           ...mutationVariables,
         },
@@ -604,7 +642,7 @@ export default {
         }
 
         const rawIssue = data.createIssue?.issue;
-        const formattedIssue = formatIssue({ ...rawIssue, id: getIdFromGraphQLId(rawIssue.id) });
+        const formattedIssue = formatIssue(rawIssue);
         dispatch('removeListItem', { listId: list.id, itemId: placeholderId });
         dispatch('addListItem', { list, item: formattedIssue, position: 0 });
       })
@@ -640,7 +678,7 @@ export default {
     }
 
     commit(types.UPDATE_BOARD_ITEM_BY_ID, {
-      itemId: getIdFromGraphQLId(data.updateIssue?.issue?.id) || activeBoardItem.id,
+      itemId: data.updateIssue?.issue?.id || activeBoardItem.id,
       prop: 'labels',
       value: data.updateIssue.issue.labels.nodes,
     });
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
deleted file mode 100644
index 857b0912c57..00000000000
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ /dev/null
@@ -1,883 +0,0 @@
-/* eslint-disable no-shadow, no-param-reassign,consistent-return */
-/* global List */
-/* global ListIssue */
-import { sortBy } from 'lodash';
-import Vue from 'vue';
-import BoardsStoreEE from 'ee_else_ce/boards/stores/boards_store_ee';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import createDefaultClient from '~/lib/graphql';
-import axios from '~/lib/utils/axios_utils';
-import { parseBoolean, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { mergeUrlParams, queryToObject, getUrlParamsArray } from '~/lib/utils/url_utility';
-import { ListType, flashAnimationDuration } from '../constants';
-import eventHub from '../eventhub';
-import ListAssignee from '../models/assignee';
-import ListLabel from '../models/label';
-import ListMilestone from '../models/milestone';
-import IssueProject from '../models/project';
-
-const PER_PAGE = 20;
-export const gqlClient = createDefaultClient();
-
-const boardsStore = {
-  disabled: false,
-  timeTracking: {
-    limitToHours: false,
-  },
-  scopedLabels: {
-    enabled: false,
-  },
-  filter: {
-    path: '',
-  },
-  state: {
-    currentBoard: {
-      labels: [],
-    },
-    currentPage: '',
-    endpoints: {},
-  },
-  detail: {
-    issue: {},
-    list: {},
-  },
-  moving: {
-    issue: {},
-    list: {},
-  },
-  multiSelect: { list: [] },
-
-  setEndpoints({
-    boardsEndpoint,
-    listsEndpoint,
-    bulkUpdatePath,
-    boardId,
-    recentBoardsEndpoint,
-    fullPath,
-  }) {
-    const listsEndpointGenerate = `${listsEndpoint}/generate.json`;
-    this.state.endpoints = {
-      boardsEndpoint,
-      boardId,
-      listsEndpoint,
-      listsEndpointGenerate,
-      bulkUpdatePath,
-      fullPath,
-      recentBoardsEndpoint: `${recentBoardsEndpoint}.json`,
-    };
-  },
-  create() {
-    this.state.lists = [];
-    this.filter.path = getUrlParamsArray().join('&');
-    this.detail = {
-      issue: {},
-      list: {},
-    };
-  },
-  showPage(page) {
-    this.state.currentPage = page;
-  },
-  updateListPosition(listObj) {
-    const listType = listObj.listType || listObj.list_type;
-    let { position } = listObj;
-    if (listType === ListType.closed) {
-      position = Infinity;
-    } else if (listType === ListType.backlog) {
-      position = -1;
-    }
-
-    const list = new List({ ...listObj, position });
-    return list;
-  },
-  addList(listObj) {
-    const list = this.updateListPosition(listObj);
-    this.state.lists = sortBy([...this.state.lists, list], 'position');
-    return list;
-  },
-  new(listObj) {
-    const list = this.addList(listObj);
-    const backlogList = this.findList('type', 'backlog');
-
-    list
-      .save()
-      .then(() => {
-        list.highlighted = true;
-        setTimeout(() => {
-          list.highlighted = false;
-        }, flashAnimationDuration);
-
-        // Remove any new issues from the backlog
-        // as they will be visible in the new list
-        list.issues.forEach(backlogList.removeIssue.bind(backlogList));
-        this.state.lists = sortBy(this.state.lists, 'position');
-      })
-      .catch(() => {
-        // https://gitlab.com/gitlab-org/gitlab-foss/issues/30821
-      });
-  },
-
-  updateNewListDropdown(listId) {
-    document
-      .querySelector(`.js-board-list-${getIdFromGraphQLId(listId)}`)
-      ?.classList.remove('is-active');
-  },
-
-  findIssueLabel(issue, findLabel) {
-    return issue.labels.find((label) => label.id === findLabel.id);
-  },
-
-  goToNextPage(list) {
-    if (list.issuesSize > list.issues.length) {
-      if (list.issues.length / PER_PAGE >= 1) {
-        list.page += 1;
-      }
-
-      return list.getIssues(false);
-    }
-  },
-
-  addListIssue(list, issue, listFrom, newIndex) {
-    let moveBeforeId = null;
-    let moveAfterId = null;
-
-    if (!list.findIssue(issue.id)) {
-      if (newIndex !== undefined) {
-        list.issues.splice(newIndex, 0, issue);
-
-        if (list.issues[newIndex - 1]) {
-          moveBeforeId = list.issues[newIndex - 1].id;
-        }
-
-        if (list.issues[newIndex + 1]) {
-          moveAfterId = list.issues[newIndex + 1].id;
-        }
-      } else {
-        list.issues.push(issue);
-      }
-
-      if (list.label) {
-        issue.addLabel(list.label);
-      }
-
-      if (list.assignee) {
-        if (listFrom && listFrom.type === 'assignee') {
-          issue.removeAssignee(listFrom.assignee);
-        }
-        issue.addAssignee(list.assignee);
-      }
-
-      if (IS_EE && list.milestone) {
-        if (listFrom && listFrom.type === 'milestone') {
-          issue.removeMilestone(listFrom.milestone);
-        }
-        issue.addMilestone(list.milestone);
-      }
-
-      if (listFrom) {
-        list.issuesSize += 1;
-
-        list.updateIssueLabel(issue, listFrom, moveBeforeId, moveAfterId);
-      }
-    }
-  },
-  findListIssue(list, id) {
-    return list.issues.find((issue) => issue.id === id);
-  },
-
-  removeList(id) {
-    const list = this.findList('id', id);
-
-    if (!list) return;
-
-    this.state.lists = this.state.lists.filter((list) => list.id !== id);
-  },
-  moveList(listFrom, orderLists) {
-    orderLists.forEach((id, i) => {
-      const list = this.findList('id', parseInt(id, 10));
-
-      list.position = i;
-    });
-    listFrom.update();
-  },
-
-  addMultipleListIssues(list, issues, listFrom, newIndex) {
-    let moveBeforeId = null;
-    let moveAfterId = null;
-
-    const listHasIssues = issues.every((issue) => list.findIssue(issue.id));
-
-    if (!listHasIssues) {
-      if (newIndex !== undefined) {
-        if (list.issues[newIndex - 1]) {
-          moveBeforeId = list.issues[newIndex - 1].id;
-        }
-
-        if (list.issues[newIndex]) {
-          moveAfterId = list.issues[newIndex].id;
-        }
-
-        list.issues.splice(newIndex, 0, ...issues);
-      } else {
-        list.issues.push(...issues);
-      }
-
-      if (list.label) {
-        issues.forEach((issue) => issue.addLabel(list.label));
-      }
-
-      if (list.assignee) {
-        if (listFrom && listFrom.type === 'assignee') {
-          issues.forEach((issue) => issue.removeAssignee(listFrom.assignee));
-        }
-        issues.forEach((issue) => issue.addAssignee(list.assignee));
-      }
-
-      if (IS_EE && list.milestone) {
-        if (listFrom && listFrom.type === 'milestone') {
-          issues.forEach((issue) => issue.removeMilestone(listFrom.milestone));
-        }
-        issues.forEach((issue) => issue.addMilestone(list.milestone));
-      }
-
-      if (listFrom) {
-        list.issuesSize += issues.length;
-
-        list.updateMultipleIssues(issues, listFrom, moveBeforeId, moveAfterId);
-      }
-    }
-  },
-
-  removeListIssues(list, removeIssue) {
-    list.issues = list.issues.filter((issue) => {
-      const matchesRemove = removeIssue.id === issue.id;
-
-      if (matchesRemove) {
-        list.issuesSize -= 1;
-        issue.removeLabel(list.label);
-      }
-
-      return !matchesRemove;
-    });
-  },
-  removeListMultipleIssues(list, removeIssues) {
-    const ids = removeIssues.map((issue) => issue.id);
-
-    list.issues = list.issues.filter((issue) => {
-      const matchesRemove = ids.includes(issue.id);
-
-      if (matchesRemove) {
-        list.issuesSize -= 1;
-        issue.removeLabel(list.label);
-      }
-
-      return !matchesRemove;
-    });
-  },
-
-  startMoving(list, issue) {
-    Object.assign(this.moving, { list, issue });
-  },
-
-  onNewListIssueResponse(list, issue, data) {
-    issue.refreshData(data);
-
-    if (list.issues.length > 1) {
-      const moveBeforeId = list.issues[1].id;
-      this.moveIssue(issue.id, null, null, null, moveBeforeId);
-    }
-  },
-
-  moveMultipleIssuesToList({ listFrom, listTo, issues, newIndex }) {
-    const issueTo = issues.map((issue) => listTo.findIssue(issue.id));
-    const issueLists = issues.map((issue) => issue.getLists()).flat();
-    const listLabels = issueLists.map((list) => list.label);
-    const hasMoveableIssues = issueTo.filter(Boolean).length > 0;
-
-    if (!hasMoveableIssues) {
-      // Check if target list assignee is already present in this issue
-      if (
-        listTo.type === ListType.assignee &&
-        listFrom.type === ListType.assignee &&
-        issues.some((issue) => issue.findAssignee(listTo.assignee))
-      ) {
-        const targetIssues = issues.map((issue) => listTo.findIssue(issue.id));
-        targetIssues.forEach((targetIssue) => targetIssue.removeAssignee(listFrom.assignee));
-      } else if (listTo.type === 'milestone') {
-        const currentMilestones = issues.map((issue) => issue.milestone);
-        const currentLists = this.state.lists
-          .filter((list) => list.type === 'milestone' && list.id !== listTo.id)
-          .filter((list) =>
-            list.issues.some((listIssue) => issues.some((issue) => listIssue.id === issue.id)),
-          );
-
-        issues.forEach((issue) => {
-          currentMilestones.forEach((milestone) => {
-            issue.removeMilestone(milestone);
-          });
-        });
-
-        issues.forEach((issue) => {
-          issue.addMilestone(listTo.milestone);
-        });
-
-        currentLists.forEach((currentList) => {
-          issues.forEach((issue) => {
-            currentList.removeIssue(issue);
-          });
-        });
-
-        listTo.addMultipleIssues(issues, listFrom, newIndex);
-      } else {
-        // Add to new lists issues if it doesn't already exist
-        listTo.addMultipleIssues(issues, listFrom, newIndex);
-      }
-    } else {
-      listTo.updateMultipleIssues(issues, listFrom);
-      issues.forEach((issue) => {
-        issue.removeLabel(listFrom.label);
-      });
-    }
-
-    if (listTo.type === ListType.closed && listFrom.type !== ListType.backlog) {
-      issueLists.forEach((list) => {
-        issues.forEach((issue) => {
-          list.removeIssue(issue);
-        });
-      });
-
-      issues.forEach((issue) => {
-        issue.removeLabels(listLabels);
-      });
-    } else if (listTo.type === ListType.backlog && listFrom.type === ListType.assignee) {
-      issues.forEach((issue) => {
-        issue.removeAssignee(listFrom.assignee);
-      });
-      issueLists.forEach((list) => {
-        issues.forEach((issue) => {
-          list.removeIssue(issue);
-        });
-      });
-    } else if (listTo.type === ListType.backlog && listFrom.type === ListType.milestone) {
-      issues.forEach((issue) => {
-        issue.removeMilestone(listFrom.milestone);
-      });
-      issueLists.forEach((list) => {
-        issues.forEach((issue) => {
-          list.removeIssue(issue);
-        });
-      });
-    } else if (
-      this.shouldRemoveIssue(listFrom, listTo) &&
-      this.issuesAreContiguous(listFrom, issues)
-    ) {
-      listFrom.removeMultipleIssues(issues);
-    }
-  },
-
-  issuesAreContiguous(list, issues) {
-    // When there's only 1 issue selected, we can return early.
-    if (issues.length === 1) return true;
-
-    // Create list of ids for issues involved.
-    const listIssueIds = list.issues.map((issue) => issue.id);
-    const movedIssueIds = issues.map((issue) => issue.id);
-
-    // Check if moved issue IDs is sub-array
-    // of source list issue IDs (i.e. contiguous selection).
-    return listIssueIds.join('|').includes(movedIssueIds.join('|'));
-  },
-
-  moveIssueToList(listFrom, listTo, issue, newIndex) {
-    const issueTo = listTo.findIssue(issue.id);
-    const issueLists = issue.getLists();
-    const listLabels = issueLists.map((listIssue) => listIssue.label);
-
-    if (!issueTo) {
-      // Check if target list assignee is already present in this issue
-      if (
-        listTo.type === 'assignee' &&
-        listFrom.type === 'assignee' &&
-        issue.findAssignee(listTo.assignee)
-      ) {
-        const targetIssue = listTo.findIssue(issue.id);
-        targetIssue.removeAssignee(listFrom.assignee);
-      } else if (listTo.type === 'milestone') {
-        const currentMilestone = issue.milestone;
-        const currentLists = this.state.lists
-          .filter((list) => list.type === 'milestone' && list.id !== listTo.id)
-          .filter((list) => list.issues.some((listIssue) => issue.id === listIssue.id));
-
-        issue.removeMilestone(currentMilestone);
-        issue.addMilestone(listTo.milestone);
-        currentLists.forEach((currentList) => currentList.removeIssue(issue));
-        listTo.addIssue(issue, listFrom, newIndex);
-      } else {
-        // Add to new lists issues if it doesn't already exist
-        listTo.addIssue(issue, listFrom, newIndex);
-      }
-    } else {
-      listTo.updateIssueLabel(issue, listFrom);
-      issueTo.removeLabel(listFrom.label);
-    }
-
-    if (listTo.type === 'closed' && listFrom.type !== 'backlog') {
-      issueLists.forEach((list) => {
-        list.removeIssue(issue);
-      });
-      issue.removeLabels(listLabels);
-    } else if (listTo.type === 'backlog' && listFrom.type === 'assignee') {
-      issue.removeAssignee(listFrom.assignee);
-      listFrom.removeIssue(issue);
-    } else if (listTo.type === 'backlog' && listFrom.type === 'milestone') {
-      issue.removeMilestone(listFrom.milestone);
-      listFrom.removeIssue(issue);
-    } else if (this.shouldRemoveIssue(listFrom, listTo)) {
-      listFrom.removeIssue(issue);
-    }
-  },
-  shouldRemoveIssue(listFrom, listTo) {
-    return (
-      (listTo.type !== 'label' && listFrom.type === 'assignee') ||
-      (listTo.type !== 'assignee' && listFrom.type === 'label') ||
-      listFrom.type === 'backlog' ||
-      listFrom.type === 'closed'
-    );
-  },
-  moveIssueInList(list, issue, oldIndex, newIndex, idArray) {
-    const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
-    const afterId = parseInt(idArray[newIndex + 1], 10) || null;
-
-    list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
-  },
-  moveMultipleIssuesInList({ list, issues, oldIndicies, newIndex, idArray }) {
-    const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
-    const afterId = parseInt(idArray[newIndex + issues.length], 10) || null;
-    list.moveMultipleIssues({
-      issues,
-      oldIndicies,
-      newIndex,
-      moveBeforeId: beforeId,
-      moveAfterId: afterId,
-    });
-  },
-  findList(key, val) {
-    return this.state.lists.find((list) => list[key] === val);
-  },
-  findListByLabelId(id) {
-    return this.state.lists.find((list) => list.type === 'label' && list.label.id === id);
-  },
-
-  toggleFilter(filter) {
-    const filterPath = this.filter.path.split('&');
-    const filterIndex = filterPath.indexOf(filter);
-
-    if (filterIndex === -1) {
-      filterPath.push(filter);
-    } else {
-      filterPath.splice(filterIndex, 1);
-    }
-
-    this.filter.path = filterPath.join('&');
-
-    this.updateFiltersUrl();
-
-    eventHub.$emit('updateTokens');
-  },
-
-  setListDetail(newList) {
-    this.detail.list = newList;
-  },
-
-  updateFiltersUrl() {
-    window.history.pushState(null, null, `?${this.filter.path}`);
-  },
-
-  clearDetailIssue() {
-    this.setIssueDetail({});
-  },
-
-  setIssueDetail(issueDetail) {
-    this.detail.issue = issueDetail;
-  },
-
-  setTimeTrackingLimitToHours(limitToHours) {
-    this.timeTracking.limitToHours = parseBoolean(limitToHours);
-  },
-
-  generateBoardGid(boardId) {
-    return `gid://gitlab/Board/${boardId}`;
-  },
-
-  generateBoardsPath(id) {
-    return `${this.state.endpoints.boardsEndpoint}${id ? `/${id}` : ''}.json`;
-  },
-
-  generateIssuesPath(id) {
-    return `${this.state.endpoints.listsEndpoint}${id ? `/${id}` : ''}/issues`;
-  },
-
-  generateIssuePath(boardId, id) {
-    return `${gon.relative_url_root}/-/boards/${boardId ? `${boardId}` : ''}/issues${
-      id ? `/${id}` : ''
-    }`;
-  },
-
-  generateMultiDragPath(boardId) {
-    return `${gon.relative_url_root}/-/boards/${boardId ? `${boardId}` : ''}/issues/bulk_move`;
-  },
-
-  all() {
-    return axios.get(this.state.endpoints.listsEndpoint);
-  },
-
-  createList(entityId, entityType) {
-    const list = {
-      [entityType]: entityId,
-    };
-
-    return axios.post(this.state.endpoints.listsEndpoint, {
-      list,
-    });
-  },
-
-  updateList(id, position, collapsed) {
-    return axios.put(`${this.state.endpoints.listsEndpoint}/${id}`, {
-      list: {
-        position,
-        collapsed,
-      },
-    });
-  },
-
-  updateListFunc(list) {
-    const collapsed = !list.isExpanded;
-    return this.updateList(list.id, list.position, collapsed).catch(() => {
-      // TODO: handle request error
-    });
-  },
-
-  destroyList(id) {
-    return axios.delete(`${this.state.endpoints.listsEndpoint}/${id}`);
-  },
-  destroy(list) {
-    const index = this.state.lists.indexOf(list);
-    this.state.lists.splice(index, 1);
-    this.updateNewListDropdown(list.id);
-
-    this.destroyList(list.id).catch(() => {
-      // TODO: handle request error
-    });
-  },
-
-  saveList(list) {
-    const entity = list.label || list.assignee || list.milestone || list.iteration;
-    let entityType = '';
-    if (list.label) {
-      entityType = 'label_id';
-    } else if (list.assignee) {
-      entityType = 'assignee_id';
-    } else if (IS_EE && list.milestone) {
-      entityType = 'milestone_id';
-    } else if (IS_EE && list.iteration) {
-      entityType = 'iteration_id';
-    }
-
-    return this.createList(entity.id, entityType)
-      .then((res) => res.data)
-      .then((data) => {
-        list.id = data.id;
-        list.type = data.list_type;
-        list.position = data.position;
-        list.label = data.label;
-
-        return list.getIssues();
-      });
-  },
-
-  getListIssues(list, emptyIssues = true) {
-    const data = {
-      ...queryToObject(this.filter.path, { gatherArrays: true }),
-      page: list.page,
-    };
-
-    if (list.label && data.label_name) {
-      data.label_name = data.label_name.filter((label) => label !== list.label.title);
-    }
-
-    if (emptyIssues) {
-      list.loading = true;
-    }
-
-    return this.getIssuesForList(list.id, data)
-      .then((res) => res.data)
-      .then((data) => {
-        list.loading = false;
-        list.issuesSize = data.size;
-
-        if (emptyIssues) {
-          list.issues = [];
-        }
-
-        data.issues.forEach((issueObj) => {
-          list.addIssue(new ListIssue(issueObj));
-        });
-
-        return data;
-      });
-  },
-
-  getIssuesForList(id, filter = {}) {
-    const data = { id };
-    Object.keys(filter).forEach((key) => {
-      data[key] = filter[key];
-    });
-
-    return axios.get(mergeUrlParams(data, this.generateIssuesPath(id)));
-  },
-
-  moveIssue(id, fromListId = null, toListId = null, moveBeforeId = null, moveAfterId = null) {
-    return axios.put(this.generateIssuePath(this.state.endpoints.boardId, id), {
-      from_list_id: fromListId,
-      to_list_id: toListId,
-      move_before_id: moveBeforeId,
-      move_after_id: moveAfterId,
-    });
-  },
-
-  moveListIssues(list, issue, oldIndex, newIndex, moveBeforeId, moveAfterId) {
-    list.issues.splice(oldIndex, 1);
-    list.issues.splice(newIndex, 0, issue);
-
-    this.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => {
-      // TODO: handle request error
-    });
-  },
-
-  moveMultipleIssues({ ids, fromListId, toListId, moveBeforeId, moveAfterId }) {
-    return axios.put(this.generateMultiDragPath(this.state.endpoints.boardId), {
-      from_list_id: fromListId,
-      to_list_id: toListId,
-      move_before_id: moveBeforeId,
-      move_after_id: moveAfterId,
-      ids,
-    });
-  },
-
-  moveListMultipleIssues({ list, issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) {
-    oldIndicies.reverse().forEach((index) => {
-      list.issues.splice(index, 1);
-    });
-    list.issues.splice(newIndex, 0, ...issues);
-
-    return this.moveMultipleIssues({
-      ids: issues.map((issue) => issue.id),
-      fromListId: null,
-      toListId: null,
-      moveBeforeId,
-      moveAfterId,
-    });
-  },
-
-  newIssue(id, issue) {
-    if (typeof id === 'string') {
-      id = getIdFromGraphQLId(id);
-    }
-
-    return axios.post(this.generateIssuesPath(id), {
-      issue,
-    });
-  },
-
-  newListIssue(list, issue) {
-    list.addIssue(issue, null, 0);
-    list.issuesSize += 1;
-    let listId = list.id;
-    if (typeof listId === 'string') {
-      listId = getIdFromGraphQLId(listId);
-    }
-
-    return this.newIssue(list.id, issue)
-      .then((res) => res.data)
-      .then((data) => list.onNewIssueResponse(issue, data));
-  },
-
-  getBacklog(data) {
-    return axios.get(
-      mergeUrlParams(
-        data,
-        `${gon.relative_url_root}/-/boards/${this.state.endpoints.boardId}/issues.json`,
-      ),
-    );
-  },
-  removeIssueLabel(issue, removeLabel) {
-    if (removeLabel) {
-      issue.labels = issue.labels.filter((label) => removeLabel.id !== label.id);
-    }
-  },
-
-  addIssueAssignee(issue, assignee) {
-    if (!issue.findAssignee(assignee)) {
-      issue.assignees.push(new ListAssignee(assignee));
-    }
-  },
-
-  setIssueAssignees(issue, assignees) {
-    issue.assignees = [...assignees];
-  },
-
-  removeIssueLabels(issue, labels) {
-    labels.forEach(issue.removeLabel.bind(issue));
-  },
-
-  bulkUpdate(issueIds, extraData = {}) {
-    const data = {
-      update: Object.assign(extraData, {
-        issuable_ids: issueIds.join(','),
-      }),
-    };
-
-    return axios.post(this.state.endpoints.bulkUpdatePath, data);
-  },
-
-  getIssueInfo(endpoint) {
-    return axios.get(endpoint);
-  },
-
-  toggleIssueSubscription(endpoint) {
-    return axios.post(endpoint);
-  },
-
-  recentBoards() {
-    return axios.get(this.state.endpoints.recentBoardsEndpoint);
-  },
-
-  setCurrentBoard(board) {
-    this.state.currentBoard = board;
-  },
-
-  toggleMultiSelect(issue) {
-    const selectedIssueIds = this.multiSelect.list.map((issue) => issue.id);
-    const index = selectedIssueIds.indexOf(issue.id);
-
-    if (index === -1) {
-      this.multiSelect.list.push(issue);
-      return;
-    }
-
-    this.multiSelect.list = [
-      ...this.multiSelect.list.slice(0, index),
-      ...this.multiSelect.list.slice(index + 1),
-    ];
-  },
-  removeIssueAssignee(issue, removeAssignee) {
-    if (removeAssignee) {
-      issue.assignees = issue.assignees.filter((assignee) => assignee.id !== removeAssignee.id);
-    }
-  },
-
-  findIssueAssignee(issue, findAssignee) {
-    return issue.assignees.find((assignee) => assignee.id === findAssignee.id);
-  },
-
-  clearMultiSelect() {
-    this.multiSelect.list = [];
-  },
-
-  removeAllIssueAssignees(issue) {
-    issue.assignees = [];
-  },
-
-  addIssueMilestone(issue, milestone) {
-    const miletoneId = issue.milestone ? issue.milestone.id : null;
-    if (IS_EE && milestone.id !== miletoneId) {
-      issue.milestone = new ListMilestone(milestone);
-    }
-  },
-
-  setIssueLoadingState(issue, key, value) {
-    issue.isLoading[key] = value;
-  },
-
-  updateIssueData(issue, newData) {
-    Object.assign(issue, newData);
-  },
-
-  setIssueFetchingState(issue, key, value) {
-    issue.isFetching[key] = value;
-  },
-
-  removeIssueMilestone(issue, removeMilestone) {
-    if (IS_EE && removeMilestone && removeMilestone.id === issue.milestone.id) {
-      issue.milestone = {};
-    }
-  },
-
-  refreshIssueData(issue, obj) {
-    const convertedObj = convertObjectPropsToCamelCase(obj, {
-      dropKeys: ['issue_sidebar_endpoint', 'real_path', 'webUrl'],
-    });
-    convertedObj.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
-    issue.path = obj.real_path || obj.webUrl;
-    issue.project_id = obj.project_id;
-    Object.assign(issue, convertedObj);
-
-    if (obj.project) {
-      issue.project = new IssueProject(obj.project);
-    }
-
-    if (obj.milestone) {
-      issue.milestone = new ListMilestone(obj.milestone);
-      issue.milestone_id = obj.milestone.id;
-    }
-
-    if (obj.labels) {
-      issue.labels = obj.labels.map((label) => new ListLabel(label));
-    }
-
-    if (obj.assignees) {
-      issue.assignees = obj.assignees.map((a) => new ListAssignee(a));
-    }
-  },
-  addIssueLabel(issue, label) {
-    if (!issue.findLabel(label)) {
-      issue.labels.push(new ListLabel(label));
-    }
-  },
-  updateIssue(issue) {
-    const data = {
-      issue: {
-        milestone_id: issue.milestone ? issue.milestone.id : null,
-        due_date: issue.dueDate,
-        assignee_ids: issue.assignees.length > 0 ? issue.assignees.map(({ id }) => id) : [0],
-        label_ids: issue.labels.length > 0 ? issue.labels.map(({ id }) => id) : [''],
-      },
-    };
-
-    return axios.patch(`${issue.path}.json`, data).then(({ data: body = {} } = {}) => {
-      /**
-       * Since post implementation of Scoped labels, server can reject
-       * same key-ed labels. To keep the UI and server Model consistent,
-       * we're just assigning labels that server echo's back to us when we
-       * PATCH the said object.
-       */
-      if (body) {
-        issue.labels = convertObjectPropsToCamelCase(body.labels, { deep: true });
-      }
-    });
-  },
-};
-
-BoardsStoreEE.initEESpecific(boardsStore);
-
-// hacks added in order to allow milestone_select to function properly
-// TODO: remove these
-
-export function boardStoreIssueSet(...args) {
-  Vue.set(boardsStore.detail.issue, ...args);
-}
-
-export function boardStoreIssueDelete(...args) {
-  Vue.delete(boardsStore.detail.issue, ...args);
-}
-
-export default boardsStore;
diff --git a/app/assets/javascripts/boards/stores/boards_store_ee.js b/app/assets/javascripts/boards/stores/boards_store_ee.js
deleted file mode 100644
index 2a289ce5d0a..00000000000
--- a/app/assets/javascripts/boards/stores/boards_store_ee.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// this is just to make ee_else_ce happy and will be cleaned up in https://gitlab.com/gitlab-org/gitlab-foss/issues/59807
-
-export default {
-  initEESpecific() {},
-};
diff --git a/app/assets/javascripts/boards/stores/getters.js b/app/assets/javascripts/boards/stores/getters.js
index 140c9ef7ac4..cb31eb4b008 100644
--- a/app/assets/javascripts/boards/stores/getters.js
+++ b/app/assets/javascripts/boards/stores/getters.js
@@ -16,7 +16,7 @@ export default {
   },
 
   activeBoardItem: (state) => {
-    return state.boardItems[state.activeId] || { iid: '', id: '', fullId: '' };
+    return state.boardItems[state.activeId] || { iid: '', id: '' };
   },
 
   groupPathForActiveIssue: (_, getters) => {
@@ -51,8 +51,4 @@ export default {
   isEpicBoard: () => {
     return false;
   },
-
-  shouldUseGraphQL: () => {
-    return gon?.features?.graphqlBoardLists;
-  },
 };
diff --git a/app/assets/javascripts/boards/stores/mutation_types.js b/app/assets/javascripts/boards/stores/mutation_types.js
index 31b78014525..928cece19f7 100644
--- a/app/assets/javascripts/boards/stores/mutation_types.js
+++ b/app/assets/javascripts/boards/stores/mutation_types.js
@@ -41,3 +41,7 @@ export const ADD_LIST_TO_HIGHLIGHTED_LISTS = 'ADD_LIST_TO_HIGHLIGHTED_LISTS';
 export const REMOVE_LIST_FROM_HIGHLIGHTED_LISTS = 'REMOVE_LIST_FROM_HIGHLIGHTED_LISTS';
 export const RESET_BOARD_ITEM_SELECTION = 'RESET_BOARD_ITEM_SELECTION';
 export const SET_ERROR = 'SET_ERROR';
+
+export const RECEIVE_ITERATIONS_REQUEST = 'RECEIVE_ITERATIONS_REQUEST';
+export const RECEIVE_ITERATIONS_SUCCESS = 'RECEIVE_ITERATIONS_SUCCESS';
+export const RECEIVE_ITERATIONS_FAILURE = 'RECEIVE_ITERATIONS_FAILURE';
diff --git a/app/assets/javascripts/boards/stores/mutations.js b/app/assets/javascripts/boards/stores/mutations.js
index 668a3dbaa7e..ef5b84b4575 100644
--- a/app/assets/javascripts/boards/stores/mutations.js
+++ b/app/assets/javascripts/boards/stores/mutations.js
@@ -1,6 +1,5 @@
 import { cloneDeep, pull, union } from 'lodash';
 import Vue from 'vue';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, __ } from '~/locale';
 import { formatIssue } from '../boards_util';
 import { issuableTypes } from '../constants';
@@ -65,6 +64,20 @@ export default {
     );
   },
 
+  [mutationTypes.RECEIVE_ITERATIONS_REQUEST](state) {
+    state.iterationsLoading = true;
+  },
+
+  [mutationTypes.RECEIVE_ITERATIONS_SUCCESS](state, iterations) {
+    state.iterations = iterations;
+    state.iterationsLoading = false;
+  },
+
+  [mutationTypes.RECEIVE_ITERATIONS_FAILURE](state) {
+    state.iterationsLoading = false;
+    state.error = __('Failed to load iterations.');
+  },
+
   [mutationTypes.SET_ACTIVE_ID](state, { id, sidebarType }) {
     state.activeId = id;
     state.sidebarType = sidebarType;
@@ -187,8 +200,7 @@ export default {
   },
 
   [mutationTypes.MUTATE_ISSUE_SUCCESS]: (state, { issue }) => {
-    const issueId = getIdFromGraphQLId(issue.id);
-    Vue.set(state.boardItems, issueId, formatIssue({ ...issue, id: issueId }));
+    Vue.set(state.boardItems, issue.id, formatIssue(issue));
   },
 
   [mutationTypes.ADD_BOARD_ITEM_TO_LIST]: (
diff --git a/app/assets/javascripts/boards/stores/state.js b/app/assets/javascripts/boards/stores/state.js
index 264a03ff39d..80c51c966d2 100644
--- a/app/assets/javascripts/boards/stores/state.js
+++ b/app/assets/javascripts/boards/stores/state.js
@@ -31,6 +31,8 @@ export default () => ({
   },
   selectedProject: {},
   error: undefined,
+  iterations: [],
+  iterationsLoading: false,
   addColumnForm: {
     visible: false,
     columnType: ListType.label,
diff --git a/app/assets/javascripts/captcha/init_recaptcha_script.js b/app/assets/javascripts/captcha/init_recaptcha_script.js
index f546eef7d84..28aef22873d 100644
--- a/app/assets/javascripts/captcha/init_recaptcha_script.js
+++ b/app/assets/javascripts/captcha/init_recaptcha_script.js
@@ -1,7 +1,7 @@
 // NOTE: This module will be used in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52044
 import { memoize } from 'lodash';
 
-export const RECAPTCHA_API_URL_PREFIX = 'https://www.google.com/recaptcha/api.js';
+export const RECAPTCHA_API_URL_PREFIX = window.gon.recaptcha_api_server_url;
 export const RECAPTCHA_ONLOAD_CALLBACK_NAME = 'recaptchaOnloadCallback';
 
 /**
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 03fd600e493..8e527e2bff6 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -337,7 +337,7 @@ export default {
     </gl-collapse>
     <gl-alert
       v-if="containsVariableReference"
-      :title="__('Value may contain a variable reference')"
+      :title="__('Value might contain a variable reference')"
       :dismissible="false"
       variant="warning"
       data-testid="contains-variable-reference"
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index f4002537f79..4ebbf05814b 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -26,5 +26,5 @@ export const AWS_SECRET_ACCESS_KEY = 'AWS_SECRET_ACCESS_KEY';
 export const AWS_TOKEN_CONSTANTS = [AWS_ACCESS_KEY_ID, AWS_DEFAULT_REGION, AWS_SECRET_ACCESS_KEY];
 
 export const CONTAINS_VARIABLE_REFERENCE_MESSAGE = __(
-  'Variable references indicated by %{codeStart}$%{codeEnd} may be expanded. If this is not what you want, consider %{docsLinkStart}using a workaround to prevent expansion%{docsLinkEnd}.',
+  'Values that contain the %{codeStart}$%{codeEnd} character can be considered a variable reference and expanded. %{docsLinkStart}Learn more.%{docsLinkEnd}',
 );
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index c2c035963f4..8dcab55ac61 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -218,14 +218,14 @@ export default class Clusters {
   }
 
   setBannerDismissedState(status, isDismissed) {
-    if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    if (AccessorUtilities.canUseLocalStorage()) {
       window.localStorage.setItem(this.clusterBannerDismissedKey, `${status}_${isDismissed}`);
     }
   }
 
   isBannerDismissed(status) {
     let bannerState;
-    if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    if (AccessorUtilities.canUseLocalStorage()) {
       bannerState = window.localStorage.getItem(this.clusterBannerDismissedKey);
     }
 
@@ -233,7 +233,7 @@ export default class Clusters {
   }
 
   setClusterNewlyCreated(state) {
-    if (AccessorUtilities.isLocalStorageAccessSafe()) {
+    if (AccessorUtilities.canUseLocalStorage()) {
       window.localStorage.setItem(this.clusterNewlyCreatedKey, Boolean(state));
     }
   }
@@ -242,7 +242,7 @@ export default class Clusters {
     // once this is true, it will always be true for a given page load
     if (!this.isNewlyCreated) {
       let newlyCreated;
-      if (AccessorUtilities.isLocalStorageAccessSafe()) {
+      if (AccessorUtilities.canUseLocalStorage()) {
         newlyCreated = window.localStorage.getItem(this.clusterNewlyCreatedKey);
       }
 
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index b9c55409330..0da7be4040f 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
 import { escape } from 'lodash';
 import csrf from '~/lib/utils/csrf';
@@ -141,7 +140,7 @@ export default {
           <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
         </ul>
       </div>
-      <strong v-html="confirmationTextLabel"></strong>
+      <strong v-html="confirmationTextLabel /* eslint-disable-line vue/no-v-html */"></strong>
       <form ref="form" :action="clusterPath" method="post" class="gl-mb-5">
         <input ref="method" type="hidden" name="_method" value="delete" />
         <input :value="csrfToken" type="hidden" name="authenticity_token" />
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 8f81d967126..0d1534d20e0 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -205,6 +205,8 @@ export default {
       :items="clusters"
       :fields="fields"
       stacked="md"
+      head-variant="white"
+      thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
       class="qa-clusters-table"
       data-testid="cluster_list_table"
     >
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 5f24a3c370a..580db871f5f 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -1,7 +1,6 @@
 /* eslint-disable func-names, consistent-return, one-var, no-return-assign */
 
 import $ from 'jquery';
-import 'jquery.waitforimages';
 
 // Width where images must fits in, for 2-up this gets divided by 2
 const availWidth = 900;
@@ -16,11 +15,7 @@ export default class ImageFile {
 
         // Load two-up view after images are loaded
         // so that we can display the correct width and height information
-        const $images = $('.two-up.view img', this.file);
-
-        $images.waitForImages(() => {
-          this.initView('two-up');
-        });
+        this.initView('two-up');
       }),
     );
   }
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index 8d88b682df2..2109aecdf03 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { initPipelineCountListener } from './utils';
 
 /**
  * Used in:
@@ -12,13 +13,7 @@ export default () => {
 
   if (pipelineTableViewEl) {
     // Update MR and Commits tabs
-    pipelineTableViewEl.addEventListener('update-pipelines-count', (event) => {
-      if (event.detail.pipelineCount) {
-        const badge = document.querySelector('.js-pipelines-mr-count');
-
-        badge.textContent = event.detail.pipelineCount;
-      }
-    });
+    initPipelineCountListener(pipelineTableViewEl);
 
     if (pipelineTableViewEl.dataset.disableInitialization === undefined) {
       const table = new Vue({
diff --git a/app/assets/javascripts/commit/pipelines/utils.js b/app/assets/javascripts/commit/pipelines/utils.js
new file mode 100644
index 00000000000..52cbe52fa9b
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines/utils.js
@@ -0,0 +1,11 @@
+export function initPipelineCountListener(el) {
+  if (!el) return;
+
+  el.addEventListener('update-pipelines-count', (event) => {
+    if (event.detail.pipelineCount) {
+      const badge = document.querySelector('.js-pipelines-mr-count');
+
+      badge.textContent = event.detail.pipelineCount;
+    }
+  });
+}
diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
index 5f778af1dbb..59066162960 100644
--- a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
+++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
@@ -96,12 +96,23 @@ export default {
       }
     },
   },
+  i18n: {
+    project: __('Project'),
+    privateForkSelected: __(
+      "To protect this issue's confidentiality, a private fork of this project was selected.",
+    ),
+    noForks: __('No forks are available to you.'),
+    forkTheProject: __(
+      `To protect this issue's confidentiality, %{linkStart}fork this project%{linkEnd} and set the fork's visibility to private.`,
+    ),
+    readMore: __('Read more'),
+  },
 };
 </script>
 
 <template>
   <div class="confidential-merge-request-fork-group form-group">
-    <label>{{ __('Project') }}</label>
+    <label>{{ $options.i18n.project }}</label>
     <div>
       <dropdown
         v-if="projects.length"
@@ -111,25 +122,13 @@ export default {
       />
       <p class="text-muted mt-1 mb-0">
         <template v-if="projects.length">
-          {{
-            __(
-              "To protect this issue's confidentiality, a private fork of this project was selected.",
-            )
-          }}
+          {{ $options.i18n.privateForkSelected }}
         </template>
         <template v-else>
-          {{ __('No forks are available to you.') }}<br />
-          <gl-sprintf
-            :message="
-              __(
-                `To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private.`,
-              )
-            "
-          >
-            <template #forkLink>
-              <a :href="newForkPath" target="_blank" class="help-link">{{
-                __('fork this project')
-              }}</a>
+          {{ $options.i18n.noForks }}<br />
+          <gl-sprintf :message="$options.i18n.forkTheProject">
+            <template #link="{ content }">
+              <a :href="newForkPath" target="_blank" class="help-link">{{ content }}</a>
             </template>
           </gl-sprintf>
         </template>
@@ -138,7 +137,7 @@ export default {
           class="w-auto p-0 d-inline-block text-primary bg-transparent"
           target="_blank"
         >
-          <span class="sr-only">{{ __('Read more') }}</span>
+          <span class="sr-only">{{ $options.i18n.readMore }}</span>
           <gl-icon name="question-o" />
         </gl-link>
       </p>
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue
index a372233e543..02ab34447ca 100644
--- a/app/assets/javascripts/content_editor/components/content_editor.vue
+++ b/app/assets/javascripts/content_editor/components/content_editor.vue
@@ -100,11 +100,13 @@ export default {
         :class="{ 'is-focused': focused }"
       >
         <top-toolbar ref="toolbar" class="gl-mb-4" />
-        <formatting-bubble-menu />
         <div v-if="isLoadingContent" class="gl-w-full gl-display-flex gl-justify-content-center">
           <gl-loading-icon size="sm" />
         </div>
-        <tiptap-editor-content v-else class="md" :editor="contentEditor.tiptapEditor" />
+        <template v-else>
+          <formatting-bubble-menu />
+          <tiptap-editor-content class="md" :editor="contentEditor.tiptapEditor" />
+        </template>
       </div>
     </div>
   </content-editor-provider>
diff --git a/app/assets/javascripts/content_editor/components/formatting_bubble_menu.vue b/app/assets/javascripts/content_editor/components/formatting_bubble_menu.vue
index 6c00480b87e..14a553ff30b 100644
--- a/app/assets/javascripts/content_editor/components/formatting_bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_bubble_menu.vue
@@ -20,7 +20,11 @@ export default {
 };
 </script>
 <template>
-  <bubble-menu class="gl-shadow gl-rounded-base" :editor="tiptapEditor">
+  <bubble-menu
+    data-testid="formatting-bubble-menu"
+    class="gl-shadow gl-rounded-base"
+    :editor="tiptapEditor"
+  >
     <gl-button-group>
       <toolbar-button
         data-testid="bold"
diff --git a/app/assets/javascripts/content_editor/components/wrappers/image.vue b/app/assets/javascripts/content_editor/components/wrappers/image.vue
index 3762324a431..5b81e5fddcc 100644
--- a/app/assets/javascripts/content_editor/components/wrappers/image.vue
+++ b/app/assets/javascripts/content_editor/components/wrappers/image.vue
@@ -22,6 +22,7 @@ export default {
       <img
         data-testid="image"
         class="gl-max-w-full gl-h-auto"
+        :title="node.attrs.title"
         :class="{ 'gl-opacity-5': node.attrs.uploading }"
         :src="node.attrs.src"
       />
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
new file mode 100644
index 00000000000..c44e8145982
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue
@@ -0,0 +1,142 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2';
+import { selectedRect as getSelectedRect } from 'prosemirror-tables';
+import { __ } from '~/locale';
+
+const TABLE_CELL_HEADER = 'th';
+const TABLE_CELL_BODY = 'td';
+
+export default {
+  name: 'TableCellBaseWrapper',
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  props: {
+    cellType: {
+      type: String,
+      validator: (type) => [TABLE_CELL_HEADER, TABLE_CELL_BODY].includes(type),
+      required: true,
+    },
+    editor: {
+      type: Object,
+      required: true,
+    },
+    getPos: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      displayActionsDropdown: false,
+      preventHide: true,
+      selectedRect: null,
+    };
+  },
+  computed: {
+    totalRows() {
+      return this.selectedRect?.map.height;
+    },
+    totalCols() {
+      return this.selectedRect?.map.width;
+    },
+    isTableBodyCell() {
+      return this.cellType === TABLE_CELL_BODY;
+    },
+  },
+  mounted() {
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+    this.handleSelectionUpdate();
+  },
+  beforeDestroy() {
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+  },
+  methods: {
+    handleSelectionUpdate() {
+      const { state } = this.editor;
+      const { $cursor } = state.selection;
+
+      this.displayActionsDropdown = $cursor?.pos - $cursor?.parentOffset - 1 === this.getPos();
+      if (this.displayActionsDropdown) {
+        this.selectedRect = getSelectedRect(state);
+      }
+    },
+    runCommand(command) {
+      this.editor.chain()[command]().run();
+      this.hideDropdown();
+    },
+    handleHide($event) {
+      if (this.preventHide) {
+        $event.preventDefault();
+      }
+      this.preventHide = true;
+    },
+    hideDropdown() {
+      this.preventHide = false;
+      this.$refs.dropdown?.hide();
+    },
+  },
+  i18n: {
+    insertColumnBefore: __('Insert column before'),
+    insertColumnAfter: __('Insert column after'),
+    insertRowBefore: __('Insert row before'),
+    insertRowAfter: __('Insert row after'),
+    deleteRow: __('Delete row'),
+    deleteColumn: __('Delete column'),
+    deleteTable: __('Delete table'),
+    editTableActions: __('Edit table'),
+  },
+};
+</script>
+<template>
+  <node-view-wrapper
+    class="gl-relative gl-padding-5 gl-min-w-10"
+    :as="cellType"
+    @click="hideDropdown"
+  >
+    <span v-if="displayActionsDropdown" class="gl-absolute gl-right-0 gl-top-0">
+      <gl-dropdown
+        ref="dropdown"
+        dropup
+        icon="chevron-down"
+        size="small"
+        category="tertiary"
+        boundary="viewport"
+        no-caret
+        text-sr-only
+        :text="$options.i18n.editTableActions"
+        :popper-opts="{ positionFixed: true }"
+        @hide="handleHide($event)"
+      >
+        <gl-dropdown-item @click="runCommand('addColumnBefore')">
+          {{ $options.i18n.insertColumnBefore }}
+        </gl-dropdown-item>
+        <gl-dropdown-item @click="runCommand('addColumnAfter')">
+          {{ $options.i18n.insertColumnAfter }}
+        </gl-dropdown-item>
+        <gl-dropdown-item v-if="isTableBodyCell" @click="runCommand('addRowBefore')">
+          {{ $options.i18n.insertRowBefore }}
+        </gl-dropdown-item>
+        <gl-dropdown-item @click="runCommand('addRowAfter')">
+          {{ $options.i18n.insertRowAfter }}
+        </gl-dropdown-item>
+        <gl-dropdown-divider />
+        <gl-dropdown-item v-if="totalRows > 2 && isTableBodyCell" @click="runCommand('deleteRow')">
+          {{ $options.i18n.deleteRow }}
+        </gl-dropdown-item>
+        <gl-dropdown-item v-if="totalCols > 1" @click="runCommand('deleteColumn')">
+          {{ $options.i18n.deleteColumn }}
+        </gl-dropdown-item>
+        <gl-dropdown-item @click="runCommand('deleteTable')">
+          {{ $options.i18n.deleteTable }}
+        </gl-dropdown-item>
+      </gl-dropdown>
+    </span>
+    <node-view-content />
+  </node-view-wrapper>
+</template>
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue
new file mode 100644
index 00000000000..6b4343dd5b8
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue
@@ -0,0 +1,23 @@
+<script>
+import TableCellBase from './table_cell_base.vue';
+
+export default {
+  name: 'TableCellBody',
+  components: {
+    TableCellBase,
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+    getPos: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <table-cell-base cell-type="td" v-bind="$props" />
+</template>
diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue
new file mode 100644
index 00000000000..5f9889374f6
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue
@@ -0,0 +1,23 @@
+<script>
+import TableCellBase from './table_cell_base.vue';
+
+export default {
+  name: 'TableCellHeader',
+  components: {
+    TableCellBase,
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+    getPos: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <table-cell-base cell-type="th" v-bind="$props" />
+</template>
diff --git a/app/assets/javascripts/content_editor/constants.js b/app/assets/javascripts/content_editor/constants.js
index f277508f628..4af9dc8e405 100644
--- a/app/assets/javascripts/content_editor/constants.js
+++ b/app/assets/javascripts/content_editor/constants.js
@@ -45,3 +45,7 @@ export const TEXT_STYLE_DROPDOWN_ITEMS = [
 export const LOADING_CONTENT_EVENT = 'loadingContent';
 export const LOADING_SUCCESS_EVENT = 'loadingSuccess';
 export const LOADING_ERROR_EVENT = 'loadingError';
+
+export const PARSE_HTML_PRIORITY_LOWEST = 1;
+export const PARSE_HTML_PRIORITY_DEFAULT = 50;
+export const PARSE_HTML_PRIORITY_HIGHEST = 100;
diff --git a/app/assets/javascripts/content_editor/content_editor.stories.js b/app/assets/javascripts/content_editor/content_editor.stories.js
new file mode 100644
index 00000000000..8f2ce8feb5d
--- /dev/null
+++ b/app/assets/javascripts/content_editor/content_editor.stories.js
@@ -0,0 +1,27 @@
+import { ContentEditor } from './index';
+
+export default {
+  component: ContentEditor,
+  title: 'Components/Content Editor',
+};
+
+const Template = (_, { argTypes }) => ({
+  components: { ContentEditor },
+  props: Object.keys(argTypes),
+  template: '<content-editor v-bind="$props" @initialized="loadContent" />',
+  methods: {
+    loadContent(contentEditor) {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      contentEditor.setSerializedContent('Hello content editor');
+    },
+  },
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  renderMarkdown: () => '<p>Hello content editor</p>',
+  uploadsPath: '/uploads/',
+  serializerConfig: {},
+  extensions: [],
+};
diff --git a/app/assets/javascripts/content_editor/extensions/audio.js b/app/assets/javascripts/content_editor/extensions/audio.js
new file mode 100644
index 00000000000..25d4068c93f
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/audio.js
@@ -0,0 +1,9 @@
+import Playable from './playable';
+
+export default Playable.extend({
+  name: 'audio',
+  defaultOptions: {
+    ...Playable.options,
+    mediaType: 'audio',
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/blockquote.js b/app/assets/javascripts/content_editor/extensions/blockquote.js
index 45f53fe230b..4512ead44bc 100644
--- a/app/assets/javascripts/content_editor/extensions/blockquote.js
+++ b/app/assets/javascripts/content_editor/extensions/blockquote.js
@@ -1 +1,33 @@
-export { Blockquote as default } from '@tiptap/extension-blockquote';
+import { Blockquote } from '@tiptap/extension-blockquote';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+import { getParents } from '~/lib/utils/dom_utils';
+import { getMarkdownSource } from '../services/markdown_sourcemap';
+
+export const multilineInputRegex = /^\s*>>>\s$/gm;
+
+export default Blockquote.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+
+      multiline: {
+        default: false,
+        parseHTML: (element) => {
+          const source = getMarkdownSource(element);
+          const parentsIncludeBlockquote = getParents(element).some(
+            (p) => p.nodeName.toLowerCase() === 'blockquote',
+          );
+
+          return source && !source.startsWith('>') && !parentsIncludeBlockquote;
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      ...this.parent?.(),
+      wrappingInputRule(multilineInputRegex, this.type, () => ({ multiline: true })),
+    ];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/bullet_list.js b/app/assets/javascripts/content_editor/extensions/bullet_list.js
index 01ead571fe1..8d0faf7a9fe 100644
--- a/app/assets/javascripts/content_editor/extensions/bullet_list.js
+++ b/app/assets/javascripts/content_editor/extensions/bullet_list.js
@@ -1 +1,19 @@
-export { BulletList as default } from '@tiptap/extension-bullet-list';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { getMarkdownSource } from '../services/markdown_sourcemap';
+
+export default BulletList.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+
+      bullet: {
+        default: '*',
+        parseHTML(element) {
+          const bullet = getMarkdownSource(element)?.charAt(0);
+
+          return '*+-'.includes(bullet) ? bullet : '*';
+        },
+      },
+    };
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
index c6d32fb8547..25f5837d2a6 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -8,11 +8,7 @@ export default CodeBlockLowlight.extend({
     return {
       language: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            language: extractLanguage(element),
-          };
-        },
+        parseHTML: (element) => extractLanguage(element),
       },
       class: {
         default: 'code highlight js-syntax-highlight',
diff --git a/app/assets/javascripts/content_editor/extensions/description_item.js b/app/assets/javascripts/content_editor/extensions/description_item.js
new file mode 100644
index 00000000000..957fdede27b
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/description_item.js
@@ -0,0 +1,49 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export default Node.create({
+  name: 'descriptionItem',
+  content: 'block+',
+  defining: true,
+
+  addAttributes() {
+    return {
+      isTerm: {
+        default: true,
+        parseHTML: (element) => element.tagName.toLowerCase() === 'dt',
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'dt' }, { tag: 'dd' }];
+  },
+
+  renderHTML({ HTMLAttributes: { isTerm, ...HTMLAttributes } }) {
+    return [
+      'li',
+      mergeAttributes(HTMLAttributes, { class: isTerm ? 'dl-term' : 'dl-description' }),
+      0,
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        return this.editor.commands.splitListItem('descriptionItem');
+      },
+      Tab: () => {
+        const { isTerm } = this.editor.getAttributes('descriptionItem');
+        if (isTerm)
+          return this.editor.commands.updateAttributes('descriptionItem', { isTerm: !isTerm });
+
+        return false;
+      },
+      'Shift-Tab': () => {
+        const { isTerm } = this.editor.getAttributes('descriptionItem');
+        if (isTerm) return this.editor.commands.liftListItem('descriptionItem');
+
+        return this.editor.commands.updateAttributes('descriptionItem', { isTerm: true });
+      },
+    };
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/description_list.js b/app/assets/javascripts/content_editor/extensions/description_list.js
new file mode 100644
index 00000000000..a516dfad2b8
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/description_list.js
@@ -0,0 +1,23 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { wrappingInputRule } from 'prosemirror-inputrules';
+
+export const inputRegex = /^\s*(<dl>)$/;
+
+export default Node.create({
+  name: 'descriptionList',
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  group: 'block list',
+  content: 'descriptionItem+',
+
+  parseHTML() {
+    return [{ tag: 'dl' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['ul', mergeAttributes(HTMLAttributes, { class: 'dl-content' }), 0];
+  },
+
+  addInputRules() {
+    return [wrappingInputRule(inputRegex, this.type)];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/division.js b/app/assets/javascripts/content_editor/extensions/division.js
new file mode 100644
index 00000000000..c70d1700941
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/division.js
@@ -0,0 +1,17 @@
+import { Node } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_LOWEST } from '../constants';
+
+export default Node.create({
+  name: 'division',
+  content: 'block*',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'div', priority: PARSE_HTML_PRIORITY_LOWEST }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', HTMLAttributes, 0];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/emoji.js b/app/assets/javascripts/content_editor/extensions/emoji.js
index d88b9f92215..de608c3aaa2 100644
--- a/app/assets/javascripts/content_editor/extensions/emoji.js
+++ b/app/assets/javascripts/content_editor/extensions/emoji.js
@@ -17,30 +17,18 @@ export default Node.create({
     return {
       moji: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            moji: element.textContent,
-          };
-        },
+        parseHTML: (element) => element.textContent,
       },
       name: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            name: element.dataset.name,
-          };
-        },
+        parseHTML: (element) => element.dataset.name,
       },
       title: {
         default: null,
       },
       unicodeVersion: {
         default: '6.0',
-        parseHTML: (element) => {
-          return {
-            unicodeVersion: element.dataset.unicodeVersion,
-          };
-        },
+        parseHTML: (element) => element.dataset.unicodeVersion,
       },
     };
   },
diff --git a/app/assets/javascripts/content_editor/extensions/figure.js b/app/assets/javascripts/content_editor/extensions/figure.js
new file mode 100644
index 00000000000..b2076894412
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/figure.js
@@ -0,0 +1,16 @@
+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'figure',
+  content: 'block+',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'figure' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figure', HTMLAttributes, 0];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/figure_caption.js b/app/assets/javascripts/content_editor/extensions/figure_caption.js
new file mode 100644
index 00000000000..ffd1b474f03
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/figure_caption.js
@@ -0,0 +1,16 @@
+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'figureCaption',
+  content: 'inline*',
+  group: 'block',
+  defining: true,
+
+  parseHTML() {
+    return [{ tag: 'figcaption' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['figcaption', HTMLAttributes, 0];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/html_marks.js b/app/assets/javascripts/content_editor/extensions/html_marks.js
new file mode 100644
index 00000000000..54adb9efa0c
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/html_marks.js
@@ -0,0 +1,66 @@
+import { Mark, mergeAttributes, markInputRule } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_LOWEST } from '../constants';
+import { markInputRegex, extractMarkAttributesFromMatch } from '../services/mark_utils';
+
+const marks = [
+  'ins',
+  'abbr',
+  'bdo',
+  'cite',
+  'dfn',
+  'mark',
+  'small',
+  'span',
+  'time',
+  'kbd',
+  'q',
+  'samp',
+  'var',
+  'ruby',
+  'rp',
+  'rt',
+];
+
+const attrs = {
+  time: ['datetime'],
+  abbr: ['title'],
+  span: ['dir'],
+  bdo: ['dir'],
+};
+
+export default marks.map((name) =>
+  Mark.create({
+    name,
+
+    inclusive: false,
+
+    defaultOptions: {
+      HTMLAttributes: {},
+    },
+
+    addAttributes() {
+      return (attrs[name] || []).reduce(
+        (acc, attr) => ({
+          ...acc,
+          [attr]: {
+            default: null,
+            parseHTML: (element) => element.getAttribute(attr),
+          },
+        }),
+        {},
+      );
+    },
+
+    parseHTML() {
+      return [{ tag: name, priority: PARSE_HTML_PRIORITY_LOWEST }];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return [name, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+
+    addInputRules() {
+      return [markInputRule(markInputRegex(name), this.type, extractMarkAttributesFromMatch)];
+    },
+  }),
+);
diff --git a/app/assets/javascripts/content_editor/extensions/image.js b/app/assets/javascripts/content_editor/extensions/image.js
index c9e8dfa4ad9..837fab0585f 100644
--- a/app/assets/javascripts/content_editor/extensions/image.js
+++ b/app/assets/javascripts/content_editor/extensions/image.js
@@ -1,6 +1,7 @@
 import { Image } from '@tiptap/extension-image';
 import { VueNodeViewRenderer } from '@tiptap/vue-2';
 import ImageWrapper from '../components/wrappers/image.vue';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
 const resolveImageEl = (element) =>
   element.nodeName === 'IMG' ? element : element.querySelector('img');
@@ -27,27 +28,27 @@ export default Image.extend({
         parseHTML: (element) => {
           const img = resolveImageEl(element);
 
-          return {
-            src: img.dataset.src || img.getAttribute('src'),
-          };
+          return img.dataset.src || img.getAttribute('src');
         },
       },
       canonicalSrc: {
+        default: null,
+        parseHTML: (element) => element.dataset.canonicalSrc,
+      },
+      alt: {
         default: null,
         parseHTML: (element) => {
-          return {
-            canonicalSrc: element.dataset.canonicalSrc,
-          };
+          const img = resolveImageEl(element);
+
+          return img.getAttribute('alt');
         },
       },
-      alt: {
+      title: {
         default: null,
         parseHTML: (element) => {
           const img = resolveImageEl(element);
 
-          return {
-            alt: img.getAttribute('alt'),
-          };
+          return img.getAttribute('title');
         },
       },
     };
@@ -55,7 +56,7 @@ export default Image.extend({
   parseHTML() {
     return [
       {
-        priority: 100,
+        priority: PARSE_HTML_PRIORITY_HIGHEST,
         tag: 'a.no-attachment-icon',
       },
       {
diff --git a/app/assets/javascripts/content_editor/extensions/inline_diff.js b/app/assets/javascripts/content_editor/extensions/inline_diff.js
index 9471d324764..3bd328958df 100644
--- a/app/assets/javascripts/content_editor/extensions/inline_diff.js
+++ b/app/assets/javascripts/content_editor/extensions/inline_diff.js
@@ -14,11 +14,7 @@ export default Mark.create({
     return {
       type: {
         default: 'addition',
-        parseHTML: (element) => {
-          return {
-            type: element.classList.contains('deletion') ? 'deletion' : 'addition',
-          };
-        },
+        parseHTML: (element) => (element.classList.contains('deletion') ? 'deletion' : 'addition'),
       },
     };
   },
diff --git a/app/assets/javascripts/content_editor/extensions/link.js b/app/assets/javascripts/content_editor/extensions/link.js
index 53104fe07a3..fc0f38e6935 100644
--- a/app/assets/javascripts/content_editor/extensions/link.js
+++ b/app/assets/javascripts/content_editor/extensions/link.js
@@ -36,19 +36,15 @@ export default Link.extend({
       ...this.parent?.(),
       href: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            href: element.getAttribute('href'),
-          };
-        },
+        parseHTML: (element) => element.getAttribute('href'),
+      },
+      title: {
+        title: null,
+        parseHTML: (element) => element.getAttribute('title'),
       },
       canonicalSrc: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            canonicalSrc: element.dataset.canonicalSrc,
-          };
-        },
+        parseHTML: (element) => element.dataset.canonicalSrc,
       },
     };
   },
diff --git a/app/assets/javascripts/content_editor/extensions/ordered_list.js b/app/assets/javascripts/content_editor/extensions/ordered_list.js
index 9a79187d9c1..57d5bd6ebf8 100644
--- a/app/assets/javascripts/content_editor/extensions/ordered_list.js
+++ b/app/assets/javascripts/content_editor/extensions/ordered_list.js
@@ -1 +1,15 @@
-export { OrderedList as default } from '@tiptap/extension-ordered-list';
+import { OrderedList } from '@tiptap/extension-ordered-list';
+import { getMarkdownSource } from '../services/markdown_sourcemap';
+
+export default OrderedList.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+
+      parens: {
+        default: false,
+        parseHTML: (element) => /^[0-9]+\)/.test(getMarkdownSource(element)),
+      },
+    };
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/playable.js b/app/assets/javascripts/content_editor/extensions/playable.js
new file mode 100644
index 00000000000..0062bc563db
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/playable.js
@@ -0,0 +1,66 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+
+import { Node } from '@tiptap/core';
+
+const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
+
+export default Node.create({
+  group: 'inline',
+  inline: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (element) => {
+          const playable = queryPlayableElement(element, this.options.mediaType);
+
+          return playable.src;
+        },
+      },
+      canonicalSrc: {
+        default: null,
+        parseHTML: (element) => {
+          const playable = queryPlayableElement(element, this.options.mediaType);
+
+          return playable.dataset.canonicalSrc;
+        },
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => {
+          const playable = queryPlayableElement(element, this.options.mediaType);
+
+          return playable.dataset.title;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `.${this.options.mediaType}-container`,
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return [
+      'span',
+      { class: `media-container ${this.options.mediaType}-container` },
+      [
+        this.options.mediaType,
+        {
+          src: node.attrs.src,
+          controls: true,
+          'data-setup': '{}',
+          'data-title': node.attrs.alt,
+          ...this.extraElementAttrs,
+        },
+      ],
+      ['a', { href: node.attrs.src }, node.attrs.alt],
+    ];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/reference.js b/app/assets/javascripts/content_editor/extensions/reference.js
index 5f4484af9c8..5e459e65de2 100644
--- a/app/assets/javascripts/content_editor/extensions/reference.js
+++ b/app/assets/javascripts/content_editor/extensions/reference.js
@@ -1,4 +1,10 @@
 import { Node } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
+
+const getAnchor = (element) => {
+  if (element.nodeName === 'A') return element;
+  return element.querySelector('a');
+};
 
 export default Node.create({
   name: 'reference',
@@ -13,43 +19,23 @@ export default Node.create({
     return {
       className: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            className: element.className,
-          };
-        },
+        parseHTML: (element) => getAnchor(element).className,
       },
       referenceType: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            referenceType: element.dataset.referenceType,
-          };
-        },
+        parseHTML: (element) => getAnchor(element).dataset.referenceType,
       },
       originalText: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            originalText: element.dataset.original,
-          };
-        },
+        parseHTML: (element) => getAnchor(element).dataset.original,
       },
       href: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            href: element.getAttribute('href'),
-          };
-        },
+        parseHTML: (element) => getAnchor(element).getAttribute('href'),
       },
       text: {
         default: null,
-        parseHTML: (element) => {
-          return {
-            text: element.textContent,
-          };
-        },
+        parseHTML: (element) => getAnchor(element).textContent,
       },
     };
   },
@@ -58,7 +44,10 @@ export default Node.create({
     return [
       {
         tag: 'a.gfm:not([data-link=true])',
-        priority: 51,
+        priority: PARSE_HTML_PRIORITY_HIGHEST,
+      },
+      {
+        tag: 'span.gl-label',
       },
     ];
   },
diff --git a/app/assets/javascripts/content_editor/extensions/subscript.js b/app/assets/javascripts/content_editor/extensions/subscript.js
index 4bf89796efe..d0766f42308 100644
--- a/app/assets/javascripts/content_editor/extensions/subscript.js
+++ b/app/assets/javascripts/content_editor/extensions/subscript.js
@@ -1 +1,9 @@
-export { Subscript as default } from '@tiptap/extension-subscript';
+import { markInputRule } from '@tiptap/core';
+import { Subscript } from '@tiptap/extension-subscript';
+import { markInputRegex, extractMarkAttributesFromMatch } from '../services/mark_utils';
+
+export default Subscript.extend({
+  addInputRules() {
+    return [markInputRule(markInputRegex('sub'), this.type, extractMarkAttributesFromMatch)];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/superscript.js b/app/assets/javascripts/content_editor/extensions/superscript.js
index 3eb7d86d90d..6cd814977ea 100644
--- a/app/assets/javascripts/content_editor/extensions/superscript.js
+++ b/app/assets/javascripts/content_editor/extensions/superscript.js
@@ -1 +1,9 @@
-export { Superscript as default } from '@tiptap/extension-superscript';
+import { markInputRule } from '@tiptap/core';
+import { Superscript } from '@tiptap/extension-superscript';
+import { markInputRegex, extractMarkAttributesFromMatch } from '../services/mark_utils';
+
+export default Superscript.extend({
+  addInputRules() {
+    return [markInputRule(markInputRegex('sup'), this.type, extractMarkAttributesFromMatch)];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/table_cell.js b/app/assets/javascripts/content_editor/extensions/table_cell.js
index 5bdc39231a1..befc33e669f 100644
--- a/app/assets/javascripts/content_editor/extensions/table_cell.js
+++ b/app/assets/javascripts/content_editor/extensions/table_cell.js
@@ -1,5 +1,12 @@
 import { TableCell } from '@tiptap/extension-table-cell';
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import TableCellBodyWrapper from '../components/wrappers/table_cell_body.vue';
+import { isBlockTablesFeatureEnabled } from '../services/feature_flags';
 
 export default TableCell.extend({
-  content: 'inline*',
+  content: isBlockTablesFeatureEnabled() ? 'block+' : 'inline*',
+
+  addNodeView() {
+    return VueNodeViewRenderer(TableCellBodyWrapper);
+  },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/table_header.js b/app/assets/javascripts/content_editor/extensions/table_header.js
index 23509706e4b..829b06fc14b 100644
--- a/app/assets/javascripts/content_editor/extensions/table_header.js
+++ b/app/assets/javascripts/content_editor/extensions/table_header.js
@@ -1,5 +1,11 @@
 import { TableHeader } from '@tiptap/extension-table-header';
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import TableCellHeaderWrapper from '../components/wrappers/table_cell_header.vue';
+import { isBlockTablesFeatureEnabled } from '../services/feature_flags';
 
 export default TableHeader.extend({
-  content: 'inline*',
+  content: isBlockTablesFeatureEnabled() ? 'block+' : 'inline*',
+  addNodeView() {
+    return VueNodeViewRenderer(TableCellHeaderWrapper);
+  },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/task_item.js b/app/assets/javascripts/content_editor/extensions/task_item.js
index 6163c0e043b..9b050edcb28 100644
--- a/app/assets/javascripts/content_editor/extensions/task_item.js
+++ b/app/assets/javascripts/content_editor/extensions/task_item.js
@@ -1,4 +1,5 @@
 import { TaskItem } from '@tiptap/extension-task-item';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
 export default TaskItem.extend({
   defaultOptions: {
@@ -12,7 +13,8 @@ export default TaskItem.extend({
         default: false,
         parseHTML: (element) => {
           const checkbox = element.querySelector('input[type=checkbox].task-list-item-checkbox');
-          return { checked: checkbox?.checked };
+
+          return checkbox?.checked;
         },
         renderHTML: (attributes) => ({
           'data-checked': attributes.checked,
@@ -26,7 +28,7 @@ export default TaskItem.extend({
     return [
       {
         tag: 'li.task-list-item',
-        priority: 100,
+        priority: PARSE_HTML_PRIORITY_HIGHEST,
       },
     ];
   },
diff --git a/app/assets/javascripts/content_editor/extensions/task_list.js b/app/assets/javascripts/content_editor/extensions/task_list.js
index b7f6c857bc7..72c6e020102 100644
--- a/app/assets/javascripts/content_editor/extensions/task_list.js
+++ b/app/assets/javascripts/content_editor/extensions/task_list.js
@@ -1,16 +1,24 @@
 import { mergeAttributes } from '@tiptap/core';
 import { TaskList } from '@tiptap/extension-task-list';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
+import { getMarkdownSource } from '../services/markdown_sourcemap';
 
 export default TaskList.extend({
   addAttributes() {
     return {
-      type: {
-        default: 'ul',
-        parseHTML: (element) => {
-          return {
-            type: element.tagName.toLowerCase() === 'ol' ? 'ol' : 'ul',
-          };
-        },
+      numeric: {
+        default: false,
+        parseHTML: (element) => element.tagName.toLowerCase() === 'ol',
+      },
+      start: {
+        default: 1,
+        parseHTML: (element) =>
+          element.hasAttribute('start') ? parseInt(element.getAttribute('start') || '', 10) : 1,
+      },
+
+      parens: {
+        default: false,
+        parseHTML: (element) => /^[0-9]+\)/.test(getMarkdownSource(element)),
       },
     };
   },
@@ -19,12 +27,12 @@ export default TaskList.extend({
     return [
       {
         tag: '.task-list',
-        priority: 100,
+        priority: PARSE_HTML_PRIORITY_HIGHEST,
       },
     ];
   },
 
-  renderHTML({ HTMLAttributes: { type, ...HTMLAttributes } }) {
-    return [type, mergeAttributes(HTMLAttributes, { 'data-type': 'taskList' }), 0];
+  renderHTML({ HTMLAttributes: { numeric, ...HTMLAttributes } }) {
+    return [numeric ? 'ol' : 'ul', mergeAttributes(HTMLAttributes, { 'data-type': 'taskList' }), 0];
   },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/video.js b/app/assets/javascripts/content_editor/extensions/video.js
new file mode 100644
index 00000000000..9923b7c04cd
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/video.js
@@ -0,0 +1,10 @@
+import Playable from './playable';
+
+export default Playable.extend({
+  name: 'video',
+  defaultOptions: {
+    ...Playable.options,
+    mediaType: 'video',
+    extraElementAttrs: { width: '400' },
+  },
+});
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 8997960203a..9b2d4c9a062 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -2,19 +2,26 @@ import { Editor } from '@tiptap/vue-2';
 import { isFunction } from 'lodash';
 import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
 import Attachment from '../extensions/attachment';
+import Audio from '../extensions/audio';
 import Blockquote from '../extensions/blockquote';
 import Bold from '../extensions/bold';
 import BulletList from '../extensions/bullet_list';
 import Code from '../extensions/code';
 import CodeBlockHighlight from '../extensions/code_block_highlight';
+import DescriptionItem from '../extensions/description_item';
+import DescriptionList from '../extensions/description_list';
+import Division from '../extensions/division';
 import Document from '../extensions/document';
 import Dropcursor from '../extensions/dropcursor';
 import Emoji from '../extensions/emoji';
+import Figure from '../extensions/figure';
+import FigureCaption from '../extensions/figure_caption';
 import Gapcursor from '../extensions/gapcursor';
 import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
 import History from '../extensions/history';
 import HorizontalRule from '../extensions/horizontal_rule';
+import HTMLMarks from '../extensions/html_marks';
 import Image from '../extensions/image';
 import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
@@ -34,6 +41,7 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
 import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
@@ -62,19 +70,26 @@ export const createContentEditor = ({
 
   const builtInContentEditorExtensions = [
     Attachment.configure({ uploadsPath, renderMarkdown }),
+    Audio,
     Blockquote,
     Bold,
     BulletList,
     Code,
     CodeBlockHighlight,
+    DescriptionItem,
+    DescriptionList,
     Document,
+    Division,
     Dropcursor,
     Emoji,
+    Figure,
+    FigureCaption,
     Gapcursor,
     HardBreak,
     Heading,
     History,
     HorizontalRule,
+    ...HTMLMarks,
     Image,
     InlineDiff,
     Italic,
@@ -94,6 +109,7 @@ export const createContentEditor = ({
     TaskItem,
     TaskList,
     Text,
+    Video,
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];
diff --git a/app/assets/javascripts/content_editor/services/feature_flags.js b/app/assets/javascripts/content_editor/services/feature_flags.js
new file mode 100644
index 00000000000..5f7a4595938
--- /dev/null
+++ b/app/assets/javascripts/content_editor/services/feature_flags.js
@@ -0,0 +1,3 @@
+export function isBlockTablesFeatureEnabled() {
+  return gon.features?.contentEditorBlockTables;
+}
diff --git a/app/assets/javascripts/content_editor/services/mark_utils.js b/app/assets/javascripts/content_editor/services/mark_utils.js
new file mode 100644
index 00000000000..6ccfed7810a
--- /dev/null
+++ b/app/assets/javascripts/content_editor/services/mark_utils.js
@@ -0,0 +1,17 @@
+export const markInputRegex = (tag) =>
+  new RegExp(`(<(${tag})((?: \\w+=".+?")+)?>([^<]+)</${tag}>)$`, 'gm');
+
+export const extractMarkAttributesFromMatch = ([, , , attrsString]) => {
+  const attrRegex = /(\w+)="(.+?)"/g;
+  const attrs = {};
+
+  let key;
+  let value;
+
+  do {
+    [, key, value] = attrRegex.exec(attrsString) || [];
+    if (key) attrs[key] = value;
+  } while (key);
+
+  return attrs;
+};
diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js
index df4d31c3d7f..bc6d98511f9 100644
--- a/app/assets/javascripts/content_editor/services/markdown_serializer.js
+++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js
@@ -3,15 +3,22 @@ import {
   defaultMarkdownSerializer,
 } from 'prosemirror-markdown/src/to_markdown';
 import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
+import Audio from '../extensions/audio';
 import Blockquote from '../extensions/blockquote';
 import Bold from '../extensions/bold';
 import BulletList from '../extensions/bullet_list';
 import Code from '../extensions/code';
 import CodeBlockHighlight from '../extensions/code_block_highlight';
+import DescriptionItem from '../extensions/description_item';
+import DescriptionList from '../extensions/description_list';
+import Division from '../extensions/division';
 import Emoji from '../extensions/emoji';
+import Figure from '../extensions/figure';
+import FigureCaption from '../extensions/figure_caption';
 import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
 import HorizontalRule from '../extensions/horizontal_rule';
+import HTMLMarks from '../extensions/html_marks';
 import Image from '../extensions/image';
 import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
@@ -30,6 +37,20 @@ import TableRow from '../extensions/table_row';
 import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
+import Video from '../extensions/video';
+import {
+  isPlainURL,
+  renderHardBreak,
+  renderTable,
+  renderTableCell,
+  renderTableRow,
+  openTag,
+  closeTag,
+  renderOrderedList,
+  renderImage,
+  renderPlayable,
+  renderHTMLNode,
+} from './serialization_helpers';
 
 const defaultSerializerConfig = {
   marks: {
@@ -48,14 +69,15 @@ const defaultSerializerConfig = {
       },
     },
     [Link.name]: {
-      open() {
-        return '[';
+      open(state, mark, parent, index) {
+        return isPlainURL(mark, parent, index, 1) ? '<' : '[';
       },
-      close(state, mark) {
+      close(state, mark, parent, index) {
         const href = mark.attrs.canonicalSrc || mark.attrs.href;
-        return `](${state.esc(href)}${
-          mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''
-        })`;
+
+        return isPlainURL(mark, parent, index, -1)
+          ? '>'
+          : `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
       },
     },
     [Strike.name]: {
@@ -64,9 +86,35 @@ const defaultSerializerConfig = {
       mixable: true,
       expelEnclosingWhitespace: true,
     },
+    ...HTMLMarks.reduce(
+      (acc, { name }) => ({
+        ...acc,
+        [name]: {
+          mixable: true,
+          open(state, node) {
+            return openTag(name, node.attrs);
+          },
+          close: closeTag(name),
+        },
+      }),
+      {},
+    ),
   },
+
   nodes: {
-    [Blockquote.name]: defaultMarkdownSerializer.nodes.blockquote,
+    [Audio.name]: renderPlayable,
+    [Blockquote.name]: (state, node) => {
+      if (node.attrs.multiline) {
+        state.write('>>>');
+        state.ensureNewLine();
+        state.renderContent(node);
+        state.ensureNewLine();
+        state.write('>>>');
+        state.closeBlock(node);
+      } else {
+        state.wrapBlock('> ', null, node, () => state.renderContent(node));
+      }
+    },
     [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
     [CodeBlockHighlight.name]: (state, node) => {
       state.write(`\`\`\`${node.attrs.language || ''}\n`);
@@ -75,94 +123,47 @@ const defaultSerializerConfig = {
       state.write('```');
       state.closeBlock(node);
     },
+    [Division.name]: renderHTMLNode('div'),
+    [DescriptionList.name]: renderHTMLNode('dl', true),
+    [DescriptionItem.name]: (state, node, parent, index) => {
+      if (index === 1) state.ensureNewLine();
+      renderHTMLNode(node.attrs.isTerm ? 'dt' : 'dd')(state, node);
+      if (index === parent.childCount - 1) state.ensureNewLine();
+    },
     [Emoji.name]: (state, node) => {
       const { name } = node.attrs;
 
       state.write(`:${name}:`);
     },
-    [HardBreak.name]: defaultMarkdownSerializer.nodes.hard_break,
+    [Figure.name]: renderHTMLNode('figure'),
+    [FigureCaption.name]: renderHTMLNode('figcaption'),
+    [HardBreak.name]: renderHardBreak,
     [Heading.name]: defaultMarkdownSerializer.nodes.heading,
     [HorizontalRule.name]: defaultMarkdownSerializer.nodes.horizontal_rule,
-    [Image.name]: (state, node) => {
-      const { alt, canonicalSrc, src, title } = node.attrs;
-      const quotedTitle = title ? ` ${state.quote(title)}` : '';
-
-      state.write(`![${state.esc(alt || '')}](${state.esc(canonicalSrc || src)}${quotedTitle})`);
-    },
+    [Image.name]: renderImage,
     [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
-    [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
+    [OrderedList.name]: renderOrderedList,
     [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
     [Reference.name]: (state, node) => {
       state.write(node.attrs.originalText || node.attrs.text);
     },
-    [Table.name]: (state, node) => {
-      state.renderContent(node);
-    },
-    [TableCell.name]: (state, node) => {
-      state.renderInline(node);
-    },
-    [TableHeader.name]: (state, node) => {
-      state.renderInline(node);
-    },
-    [TableRow.name]: (state, node) => {
-      const isHeaderRow = node.child(0).type.name === 'tableHeader';
-
-      const renderRow = () => {
-        const cellWidths = [];
-
-        state.flushClose(1);
-
-        state.write('| ');
-        node.forEach((cell, _, i) => {
-          if (i) state.write(' | ');
-
-          const { length } = state.out;
-          state.render(cell, node, i);
-          cellWidths.push(state.out.length - length);
-        });
-        state.write(' |');
-
-        state.closeBlock(node);
-
-        return cellWidths;
-      };
-
-      const renderHeaderRow = (cellWidths) => {
-        state.flushClose(1);
-
-        state.write('|');
-        node.forEach((cell, _, i) => {
-          if (i) state.write('|');
-
-          state.write(cell.attrs.align === 'center' ? ':' : '-');
-          state.write(state.repeat('-', cellWidths[i]));
-          state.write(cell.attrs.align === 'center' || cell.attrs.align === 'right' ? ':' : '-');
-        });
-        state.write('|');
-
-        state.closeBlock(node);
-      };
-
-      if (isHeaderRow) {
-        renderHeaderRow(renderRow());
-      } else {
-        renderRow();
-      }
-    },
+    [Table.name]: renderTable,
+    [TableCell.name]: renderTableCell,
+    [TableHeader.name]: renderTableCell,
+    [TableRow.name]: renderTableRow,
     [TaskItem.name]: (state, node) => {
       state.write(`[${node.attrs.checked ? 'x' : ' '}] `);
       state.renderContent(node);
     },
     [TaskList.name]: (state, node) => {
-      if (node.attrs.type === 'ul') defaultMarkdownSerializer.nodes.bullet_list(state, node);
-      else defaultMarkdownSerializer.nodes.ordered_list(state, node);
+      if (node.attrs.numeric) renderOrderedList(state, node);
+      else defaultMarkdownSerializer.nodes.bullet_list(state, node);
     },
     [Text.name]: defaultMarkdownSerializer.nodes.text,
+    [Video.name]: renderPlayable,
   },
 };
 
-const wrapHtmlPayload = (payload) => `<div>${payload}</div>`;
-
 /**
  * A markdown serializer converts arbitrary Markdown content
  * into a ProseMirror document and viceversa. To convert Markdown
@@ -175,7 +176,7 @@ const wrapHtmlPayload = (payload) => `<div>${payload}</div>`;
  * that parses the Markdown and converts it into HTML.
  * @returns a markdown serializer
  */
-export default ({ render = () => null, serializerConfig }) => ({
+export default ({ render = () => null, serializerConfig = {} } = {}) => ({
   /**
    * Converts a Markdown string into a ProseMirror JSONDocument based
    * on a ProseMirror schema.
@@ -187,15 +188,15 @@ export default ({ render = () => null, serializerConfig }) => ({
   deserialize: async ({ schema, content }) => {
     const html = await render(content);
 
-    if (!html) {
-      return null;
-    }
+    if (!html) return null;
 
     const parser = new DOMParser();
-    const {
-      body: { firstElementChild },
-    } = parser.parseFromString(wrapHtmlPayload(html), 'text/html');
-    const state = ProseMirrorDOMParser.fromSchema(schema).parse(firstElementChild);
+    const { body } = parser.parseFromString(html, 'text/html');
+
+    // append original source as a comment that nodes can access
+    body.append(document.createComment(content));
+
+    const state = ProseMirrorDOMParser.fromSchema(schema).parse(body);
 
     return state.toJSON();
   },
diff --git a/app/assets/javascripts/content_editor/services/markdown_sourcemap.js b/app/assets/javascripts/content_editor/services/markdown_sourcemap.js
new file mode 100644
index 00000000000..a1199589c9b
--- /dev/null
+++ b/app/assets/javascripts/content_editor/services/markdown_sourcemap.js
@@ -0,0 +1,40 @@
+const getFullSource = (element) => {
+  const commentNode = element.ownerDocument.body.lastChild;
+
+  if (commentNode.nodeName === '#comment') {
+    return commentNode.textContent.split('\n');
+  }
+
+  return [];
+};
+
+const getRangeFromSourcePos = (sourcePos) => {
+  const [start, end] = sourcePos.split('-');
+  const [startRow, startCol] = start.split(':');
+  const [endRow, endCol] = end.split(':');
+
+  return {
+    start: { row: Number(startRow) - 1, col: Number(startCol) - 1 },
+    end: { row: Number(endRow) - 1, col: Number(endCol) - 1 },
+  };
+};
+
+export const getMarkdownSource = (element) => {
+  if (!element.dataset.sourcepos) return undefined;
+
+  const source = getFullSource(element);
+  const range = getRangeFromSourcePos(element.dataset.sourcepos);
+  let elSource = '';
+
+  for (let i = range.start.row; i <= range.end.row; i += 1) {
+    if (i === range.start.row) {
+      elSource += source[i]?.substring(range.start.col);
+    } else if (i === range.end.row) {
+      elSource += `\n${source[i]?.substring(0, range.start.col)}`;
+    } else {
+      elSource += `\n${source[i]}` || '';
+    }
+  }
+
+  return elSource.trim();
+};
diff --git a/app/assets/javascripts/content_editor/services/serialization_helpers.js b/app/assets/javascripts/content_editor/services/serialization_helpers.js
new file mode 100644
index 00000000000..b2327555b45
--- /dev/null
+++ b/app/assets/javascripts/content_editor/services/serialization_helpers.js
@@ -0,0 +1,345 @@
+import { uniq } from 'lodash';
+import { isBlockTablesFeatureEnabled } from './feature_flags';
+
+const defaultAttrs = {
+  td: { colspan: 1, rowspan: 1, colwidth: null },
+  th: { colspan: 1, rowspan: 1, colwidth: null },
+};
+
+const ignoreAttrs = {
+  dd: ['isTerm'],
+  dt: ['isTerm'],
+};
+
+const tableMap = new WeakMap();
+
+// Source taken from
+// prosemirror-markdown/src/to_markdown.js
+export function isPlainURL(link, parent, index, side) {
+  if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+  const content = parent.child(index + (side < 0 ? -1 : 0));
+  if (
+    !content.isText ||
+    content.text !== link.attrs.href ||
+    content.marks[content.marks.length - 1] !== link
+  )
+    return false;
+  if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
+  const next = parent.child(index + (side < 0 ? -2 : 1));
+  return !link.isInSet(next.marks);
+}
+
+function containsOnlyText(node) {
+  if (node.childCount === 1) {
+    const child = node.child(0);
+    return child.isText && child.marks.length === 0;
+  }
+
+  return false;
+}
+
+function containsParagraphWithOnlyText(cell) {
+  if (cell.childCount === 1) {
+    const child = cell.child(0);
+    if (child.type.name === 'paragraph') {
+      return containsOnlyText(child);
+    }
+  }
+
+  return false;
+}
+
+function getRowsAndCells(table) {
+  const cells = [];
+  const rows = [];
+  table.descendants((n) => {
+    if (n.type.name === 'tableCell' || n.type.name === 'tableHeader') {
+      cells.push(n);
+      return false;
+    }
+
+    if (n.type.name === 'tableRow') {
+      rows.push(n);
+    }
+
+    return true;
+  });
+  return { rows, cells };
+}
+
+function getChildren(node) {
+  const children = [];
+  for (let i = 0; i < node.childCount; i += 1) {
+    children.push(node.child(i));
+  }
+  return children;
+}
+
+function shouldRenderHTMLTable(table) {
+  const { rows, cells } = getRowsAndCells(table);
+
+  const cellChildCount = Math.max(...cells.map((cell) => cell.childCount));
+  const maxColspan = Math.max(...cells.map((cell) => cell.attrs.colspan));
+  const maxRowspan = Math.max(...cells.map((cell) => cell.attrs.rowspan));
+
+  const rowChildren = rows.map((row) => uniq(getChildren(row).map((cell) => cell.type.name)));
+  const cellTypeInFirstRow = rowChildren[0];
+  const cellTypesInOtherRows = uniq(rowChildren.slice(1).map(([type]) => type));
+
+  // if the first row has headers, and there are no headers anywhere else, render markdown table
+  if (
+    !(
+      cellTypeInFirstRow.length === 1 &&
+      cellTypeInFirstRow[0] === 'tableHeader' &&
+      cellTypesInOtherRows.length === 1 &&
+      cellTypesInOtherRows[0] === 'tableCell'
+    )
+  ) {
+    return true;
+  }
+
+  if (cellChildCount === 1 && maxColspan === 1 && maxRowspan === 1) {
+    // if all rows contain only one paragraph each and no rowspan/colspan, render markdown table
+    const children = uniq(cells.map((cell) => cell.child(0).type.name));
+    if (children.length === 1 && children[0] === 'paragraph') {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function htmlEncode(str = '') {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/'/g, '&#39;')
+    .replace(/"/g, '&#34;');
+}
+
+export function openTag(tagName, attrs) {
+  let str = `<${tagName}`;
+
+  str += Object.entries(attrs || {})
+    .map(([key, value]) => {
+      if ((ignoreAttrs[tagName] || []).includes(key) || defaultAttrs[tagName]?.[key] === value)
+        return '';
+
+      return ` ${key}="${htmlEncode(value?.toString())}"`;
+    })
+    .join('');
+
+  return `${str}>`;
+}
+
+export function closeTag(tagName) {
+  return `</${tagName}>`;
+}
+
+function isInBlockTable(node) {
+  return tableMap.get(node);
+}
+
+function isInTable(node) {
+  return tableMap.has(node);
+}
+
+function setIsInBlockTable(table, value) {
+  tableMap.set(table, value);
+
+  const { rows, cells } = getRowsAndCells(table);
+  rows.forEach((row) => tableMap.set(row, value));
+  cells.forEach((cell) => {
+    tableMap.set(cell, value);
+    if (cell.childCount && cell.child(0).type.name === 'paragraph')
+      tableMap.set(cell.child(0), value);
+  });
+}
+
+function unsetIsInBlockTable(table) {
+  tableMap.delete(table);
+
+  const { rows, cells } = getRowsAndCells(table);
+  rows.forEach((row) => tableMap.delete(row));
+  cells.forEach((cell) => {
+    tableMap.delete(cell);
+    if (cell.childCount) tableMap.delete(cell.child(0));
+  });
+}
+
+function renderTagOpen(state, tagName, attrs) {
+  state.ensureNewLine();
+  state.write(openTag(tagName, attrs));
+}
+
+function renderTagClose(state, tagName, insertNewline = true) {
+  state.write(closeTag(tagName));
+  if (insertNewline) state.ensureNewLine();
+}
+
+function renderTableHeaderRowAsMarkdown(state, node, cellWidths) {
+  state.flushClose(1);
+
+  state.write('|');
+  node.forEach((cell, _, i) => {
+    if (i) state.write('|');
+
+    state.write(cell.attrs.align === 'center' ? ':' : '-');
+    state.write(state.repeat('-', cellWidths[i]));
+    state.write(cell.attrs.align === 'center' || cell.attrs.align === 'right' ? ':' : '-');
+  });
+  state.write('|');
+
+  state.closeBlock(node);
+}
+
+function renderTableRowAsMarkdown(state, node, isHeaderRow = false) {
+  const cellWidths = [];
+
+  state.flushClose(1);
+
+  state.write('| ');
+  node.forEach((cell, _, i) => {
+    if (i) state.write(' | ');
+
+    const { length } = state.out;
+    state.render(cell, node, i);
+    cellWidths.push(state.out.length - length);
+  });
+  state.write(' |');
+
+  state.closeBlock(node);
+
+  if (isHeaderRow) renderTableHeaderRowAsMarkdown(state, node, cellWidths);
+}
+
+function renderTableRowAsHTML(state, node) {
+  renderTagOpen(state, 'tr');
+
+  node.forEach((cell, _, i) => {
+    const tag = cell.type.name === 'tableHeader' ? 'th' : 'td';
+
+    renderTagOpen(state, tag, cell.attrs);
+
+    if (!containsParagraphWithOnlyText(cell)) {
+      state.closeBlock(node);
+      state.flushClose();
+    }
+
+    state.render(cell, node, i);
+    state.flushClose(1);
+
+    renderTagClose(state, tag);
+  });
+
+  renderTagClose(state, 'tr');
+}
+
+export function renderContent(state, node, forceRenderInline) {
+  if (node.type.inlineContent) {
+    if (containsOnlyText(node)) {
+      state.renderInline(node);
+    } else {
+      state.closeBlock(node);
+      state.flushClose();
+      state.renderInline(node);
+      state.closeBlock(node);
+      state.flushClose();
+    }
+  } else {
+    const renderInline = forceRenderInline || containsParagraphWithOnlyText(node);
+    if (!renderInline) {
+      state.closeBlock(node);
+      state.flushClose();
+      state.renderContent(node);
+      state.ensureNewLine();
+    } else {
+      state.renderInline(forceRenderInline ? node : node.child(0));
+    }
+  }
+}
+
+export function renderHTMLNode(tagName, forceRenderInline = false) {
+  return (state, node) => {
+    renderTagOpen(state, tagName, node.attrs);
+    renderContent(state, node, forceRenderInline);
+    renderTagClose(state, tagName, false);
+  };
+}
+
+export function renderOrderedList(state, node) {
+  const { parens } = node.attrs;
+  const start = node.attrs.start || 1;
+  const maxW = String(start + node.childCount - 1).length;
+  const space = state.repeat(' ', maxW + 2);
+  const delimiter = parens ? ')' : '.';
+
+  state.renderList(node, space, (i) => {
+    const nStr = String(start + i);
+    return `${state.repeat(' ', maxW - nStr.length) + nStr}${delimiter} `;
+  });
+}
+
+export function renderTableCell(state, node) {
+  if (!isBlockTablesFeatureEnabled()) {
+    state.renderInline(node);
+    return;
+  }
+
+  if (!isInBlockTable(node) || containsParagraphWithOnlyText(node)) {
+    state.renderInline(node.child(0));
+  } else {
+    state.renderContent(node);
+  }
+}
+
+export function renderTableRow(state, node) {
+  if (isInBlockTable(node)) {
+    renderTableRowAsHTML(state, node);
+  } else {
+    renderTableRowAsMarkdown(state, node, node.child(0).type.name === 'tableHeader');
+  }
+}
+
+export function renderTable(state, node) {
+  if (isBlockTablesFeatureEnabled()) {
+    setIsInBlockTable(node, shouldRenderHTMLTable(node));
+  }
+
+  if (isInBlockTable(node)) renderTagOpen(state, 'table');
+
+  state.renderContent(node);
+
+  if (isInBlockTable(node)) renderTagClose(state, 'table');
+
+  // ensure at least one blank line after any table
+  state.closeBlock(node);
+  state.flushClose();
+
+  if (isBlockTablesFeatureEnabled()) {
+    unsetIsInBlockTable(node);
+  }
+}
+
+export function renderHardBreak(state, node, parent, index) {
+  const br = isInTable(parent) ? '<br>' : '\\\n';
+
+  for (let i = index + 1; i < parent.childCount; i += 1) {
+    if (parent.child(i).type !== node.type) {
+      state.write(br);
+      return;
+    }
+  }
+}
+
+export function renderImage(state, node) {
+  const { alt, canonicalSrc, src, title } = node.attrs;
+  const quotedTitle = title ? ` ${state.quote(title)}` : '';
+
+  state.write(`![${state.esc(alt || '')}](${state.esc(canonicalSrc || src)}${quotedTitle})`);
+}
+
+export function renderPlayable(state, node) {
+  renderImage(state, node);
+}
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
index 45c886978f1..004c2e26c4e 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
@@ -1,9 +1,7 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlIcon, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
-import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
-import { sprintf, s__, __ } from '~/locale';
+import { s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import { DEFAULT_REGION } from '../constants';
 
@@ -38,6 +36,9 @@ export default {
     regionHelpText: s__(
       'ClusterIntegration|Select the region you want to create the new cluster in. Make sure you have access to this region for your role to be able to authenticate. If no region is selected, we will use %{codeStart}DEFAULT_REGION%{codeEnd}. Learn more about %{linkStart}Regions%{linkEnd}.',
     ),
+    accountAndExternalIdsHelpText: s__(
+      'ClusterIntegration|The Amazon Resource Name (ARN) associated with your role. If you do not have a provisioned role, first create one on %{awsLinkStart}Amazon Web Services %{awsLinkEnd} using the above account and external IDs. %{moreInfoStart}More information%{moreInfoEnd}',
+    ),
     regionHelpTextDefaultRegion: DEFAULT_REGION,
   },
   data() {
@@ -56,39 +57,8 @@ export default {
         ? __('Authenticating')
         : s__('ClusterIntegration|Authenticate with AWS');
     },
-    accountAndExternalIdsHelpText() {
-      const escapedUrl = escape(this.accountAndExternalIdsHelpPath);
-
-      return sprintf(
-        s__(
-          'ClusterIntegration|Create a provision role on %{startAwsLink}Amazon Web Services %{externalLinkIcon}%{endLink} using the account and external ID above. %{startMoreInfoLink}More information%{endLink}',
-        ),
-        {
-          startAwsLink:
-            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
-          startMoreInfoLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    provisionRoleArnHelpText() {
-      const escapedUrl = escape(this.createRoleArnHelpPath);
-
-      return sprintf(
-        s__(
-          'ClusterIntegration|The Amazon Resource Name (ARN) associated with your role. If you do not have a provisioned role, first create one on %{startAwsLink}Amazon Web Services %{externalLinkIcon}%{endLink} using the above account and external IDs. %{startMoreInfoLink}More information%{endLink}',
-        ),
-        {
-          startAwsLink:
-            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
-          startMoreInfoLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
+    awsHelpLink() {
+      return 'https://console.aws.amazon.com/iam/home?#roles';
     },
   },
   methods: {
@@ -142,13 +112,41 @@ export default {
         </div>
       </div>
       <div class="col-12 mb-3 mt-n3">
-        <p class="form-text text-muted" v-html="accountAndExternalIdsHelpText"></p>
+        <p class="form-text text-muted">
+          <gl-sprintf :message="$options.i18n.accountAndExternalIdsHelpText">
+            <template #awsLink="{ content }">
+              <gl-link :href="awsHelpLink" target="_blank">
+                {{ content }}
+                <gl-icon name="external-link" class="gl-vertical-align-middle" />
+              </gl-link>
+            </template>
+            <template #moreInfo="{ content }">
+              <gl-link :href="accountAndExternalIdsHelpPath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
       </div>
     </div>
     <div class="form-group">
       <label for="eks-provision-role-arn">{{ s__('ClusterIntegration|Provision Role ARN') }}</label>
       <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
-      <p class="form-text text-muted" v-html="provisionRoleArnHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.accountAndExternalIdsHelpText">
+          <template #awsLink="{ content }">
+            <gl-link :href="awsHelpLink" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+          <template #moreInfo="{ content }">
+            <gl-link :href="accountAndExternalIdsHelpPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
 
     <gl-form-group :label="$options.i18n.regionInputLabel">
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/constants.js b/app/assets/javascripts/create_cluster/eks_cluster/constants.js
index 1c698cc2796..3ed0f050301 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/constants.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/constants.js
@@ -1,9 +1,9 @@
 export const DEFAULT_REGION = 'us-east-2';
 
 export const KUBERNETES_VERSIONS = [
-  { name: '1.15', value: '1.15' },
   { name: '1.16', value: '1.16' },
   { name: '1.17', value: '1.17' },
   { name: '1.18', value: '1.18' },
-  { name: '1.19', value: '1.19', default: true },
+  { name: '1.19', value: '1.19' },
+  { name: '1.20', value: '1.20', default: true },
 ];
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
deleted file mode 100644
index cf4c35ef12b..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-/* eslint-disable vue/no-v-html */
-import { GlIcon } from '@gitlab/ui';
-import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
-
-export default {
-  components: {
-    GlIcon,
-  },
-  props: {
-    documentationLink: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    iconCycleAnalyticsSplash() {
-      return iconCycleAnalyticsSplash;
-    },
-  },
-  methods: {
-    dismissOverviewDialog() {
-      this.$emit('dismiss-overview-dialog');
-    },
-  },
-};
-</script>
-<template>
-  <div class="landing content-block">
-    <button
-      :aria-label="__('Dismiss Value Stream Analytics introduction box')"
-      class="js-ca-dismiss-button dismiss-button"
-      type="button"
-      @click="dismissOverviewDialog"
-    >
-      <gl-icon name="close" />
-    </button>
-    <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
-    <div class="inner-content">
-      <h4>{{ __('Introducing Value Stream Analytics') }}</h4>
-      <p>
-        {{
-          __(`Value Stream Analytics gives an overview
-of how much time it takes to go from idea to production in your project.`)
-        }}
-      </p>
-      <p>
-        <a :href="documentationLink" target="_blank" rel="nofollow" class="btn">
-          {{ __('Read more') }}
-        </a>
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue
index c9ecac6829b..ae78ce33263 100644
--- a/app/assets/javascripts/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/cycle_analytics/components/base.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlIcon, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Cookies from 'js-cookie';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
 import StageTable from '~/cycle_analytics/components/stage_table.vue';
+import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue';
 import ValueStreamMetrics from '~/cycle_analytics/components/value_stream_metrics.vue';
 import { __ } from '~/locale';
 import { SUMMARY_METRICS_REQUEST, METRICS_REQUESTS } from '../constants';
@@ -13,11 +14,10 @@ const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
 export default {
   name: 'CycleAnalytics',
   components: {
-    GlIcon,
     GlLoadingIcon,
-    GlSprintf,
     PathNavigation,
     StageTable,
+    ValueStreamFilters,
     ValueStreamMetrics,
   },
   props: {
@@ -45,11 +45,12 @@ export default {
       'selectedStageError',
       'stages',
       'summary',
-      'daysInPast',
       'permissions',
       'stageCounts',
       'endpoints',
       'features',
+      'createdBefore',
+      'createdAfter',
     ]),
     ...mapGetters(['pathNavigationData', 'filterParams']),
     displayStageEvents() {
@@ -98,14 +99,12 @@ export default {
     },
   },
   methods: {
-    ...mapActions([
-      'fetchCycleAnalyticsData',
-      'fetchStageData',
-      'setSelectedStage',
-      'setDateRange',
-    ]),
-    handleDateSelect(daysInPast) {
-      this.setDateRange(daysInPast);
+    ...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange']),
+    onSetDateRange({ startDate, endDate }) {
+      this.setDateRange({
+        createdAfter: new Date(startDate),
+        createdBefore: new Date(endDate),
+      });
     },
     onSelectStage(stage) {
       this.setSelectedStage(stage);
@@ -133,35 +132,22 @@ export default {
     <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row">
       <path-navigation
         v-if="displayPathNavigation"
-        class="js-path-navigation gl-w-full gl-pb-2"
+        data-testid="vsa-path-navigation"
+        class="gl-w-full gl-pb-2"
         :loading="isLoading || isLoadingStage"
         :stages="pathNavigationData"
         :selected-stage="selectedStage"
         @selected="onSelectStage"
       />
-      <div class="gl-flex-grow gl-align-self-end">
-        <div class="js-ca-dropdown dropdown inline">
-          <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle -->
-          <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
-            <span class="dropdown-label">
-              <gl-sprintf :message="$options.i18n.dropdownText">
-                <template #days>{{ daysInPast }}</template>
-              </gl-sprintf>
-              <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon gl-top-3" />
-            </span>
-          </button>
-          <ul class="dropdown-menu dropdown-menu-right">
-            <li v-for="days in $options.dayRangeOptions" :key="`day-range-${days}`">
-              <a href="#" @click.prevent="handleDateSelect(days)">
-                <gl-sprintf :message="$options.i18n.dropdownText">
-                  <template #days>{{ days }}</template>
-                </gl-sprintf>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
     </div>
+    <value-stream-filters
+      :group-id="endpoints.groupId"
+      :group-path="endpoints.groupPath"
+      :has-project-filter="false"
+      :start-date="createdAfter"
+      :end-date="createdBefore"
+      @setDateRange="onSetDateRange"
+    />
     <value-stream-metrics
       :request-path="endpoints.fullPath"
       :request-params="filterParams"
@@ -178,6 +164,7 @@ export default {
       :empty-state-message="emptyStageText"
       :no-data-svg-path="noDataSvgPath"
       :pagination="null"
+      :sortable="false"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_table.vue b/app/assets/javascripts/cycle_analytics/components/stage_table.vue
index 0c47838c773..8a2667a4ab1 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_table.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_table.vue
@@ -23,8 +23,8 @@ import TotalTime from './total_time_component.vue';
 const DEFAULT_WORKFLOW_TITLE_PROPERTIES = {
   thClass: 'gl-w-half',
   key: PAGINATION_SORT_FIELD_END_EVENT,
-  sortable: true,
 };
+
 const WORKFLOW_COLUMN_TITLES = {
   issues: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Issues') },
   jobs: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Jobs') },
@@ -84,6 +84,11 @@ export default {
       required: false,
       default: null,
     },
+    sortable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     if (this.pagination) {
@@ -122,9 +127,11 @@ export default {
           key: PAGINATION_SORT_FIELD_DURATION,
           label: __('Time'),
           thClass: 'gl-w-half',
-          sortable: true,
         },
-      ];
+      ].map((field) => ({
+        ...field,
+        sortable: this.sortable,
+      }));
     },
     prevPage() {
       return Math.max(this.pagination.page - 1, 0);
diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
index 6b1e537dc77..8610dfc2b03 100644
--- a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
+++ b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
@@ -61,33 +61,38 @@ export default {
 <template>
   <div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
     <filter-bar
-      class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
+      data-testid="vsa-filter-bar"
+      class="filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
       :group-path="groupPath"
     />
     <div
       v-if="hasDateRangeFilter || hasProjectFilter"
       class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
     >
-      <projects-dropdown-filter
-        v-if="hasProjectFilter"
-        :key="groupId"
-        class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
-        :group-id="groupId"
-        :group-namespace="groupPath"
-        :query-params="projectsQueryParams"
-        :multi-select="$options.multiProjectSelect"
-        :default-projects="selectedProjects"
-        @selected="$emit('selectProject', $event)"
-      />
-      <date-range
-        v-if="hasDateRangeFilter"
-        :start-date="startDate"
-        :end-date="endDate"
-        :max-date-range="$options.maxDateRange"
-        :include-selected-date="true"
-        class="js-daterange-picker"
-        @change="$emit('setDateRange', $event)"
-      />
+      <div>
+        <projects-dropdown-filter
+          v-if="hasProjectFilter"
+          :key="groupId"
+          class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
+          :group-id="groupId"
+          :group-namespace="groupPath"
+          :query-params="projectsQueryParams"
+          :multi-select="$options.multiProjectSelect"
+          :default-projects="selectedProjects"
+          @selected="$emit('selectProject', $event)"
+        />
+      </div>
+      <div>
+        <date-range
+          v-if="hasDateRangeFilter"
+          :start-date="startDate"
+          :end-date="endDate"
+          :max-date-range="$options.maxDateRange"
+          :include-selected-date="true"
+          class="js-daterange-picker"
+          @change="$emit('setDateRange', $event)"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/cycle_analytics/index.js b/app/assets/javascripts/cycle_analytics/index.js
index 3827db4d9b2..620da0104e0 100644
--- a/app/assets/javascripts/cycle_analytics/index.js
+++ b/app/assets/javascripts/cycle_analytics/index.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
 import Translate from '../vue_shared/translate';
 import CycleAnalytics from './components/base.vue';
+import { DEFAULT_DAYS_TO_DISPLAY } from './constants';
 import createStore from './store';
+import { calculateFormattedDayInPast } from './utils';
 
 Vue.use(Translate);
 
@@ -14,19 +16,29 @@ export default () => {
     requestPath,
     fullPath,
     projectId,
+    groupId,
     groupPath,
+    labelsPath,
+    milestonesPath,
   } = el.dataset;
 
+  const { now, past } = calculateFormattedDayInPast(DEFAULT_DAYS_TO_DISPLAY);
+
   store.dispatch('initializeVsa', {
     projectId: parseInt(projectId, 10),
-    groupPath,
     endpoints: {
       requestPath,
       fullPath,
+      labelsPath,
+      milestonesPath,
+      groupId: parseInt(groupId, 10),
+      groupPath,
     },
     features: {
       cycleAnalyticsForGroups: Boolean(gon?.licensed_features?.cycleAnalyticsForGroups),
     },
+    createdBefore: new Date(now),
+    createdAfter: new Date(past),
   });
 
   // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/cycle_analytics/store/actions.js b/app/assets/javascripts/cycle_analytics/store/actions.js
index a7a2c8ea9d3..e39cd224199 100644
--- a/app/assets/javascripts/cycle_analytics/store/actions.js
+++ b/app/assets/javascripts/cycle_analytics/store/actions.js
@@ -163,6 +163,7 @@ const refetchStageData = (dispatch) => {
         dispatch('fetchCycleAnalyticsData'),
         dispatch('fetchStageData'),
         dispatch('fetchStageMedians'),
+        dispatch('fetchStageCountValues'),
       ]),
     )
     .finally(() => dispatch('setLoading', false));
@@ -170,14 +171,24 @@ const refetchStageData = (dispatch) => {
 
 export const setFilters = ({ dispatch }) => refetchStageData(dispatch);
 
-export const setDateRange = ({ dispatch, commit }, daysInPast) => {
-  commit(types.SET_DATE_RANGE, daysInPast);
+export const setDateRange = ({ dispatch, commit }, { createdAfter, createdBefore }) => {
+  commit(types.SET_DATE_RANGE, { createdAfter, createdBefore });
   return refetchStageData(dispatch);
 };
 
 export const initializeVsa = ({ commit, dispatch }, initialData = {}) => {
   commit(types.INITIALIZE_VSA, initialData);
 
+  const {
+    endpoints: { fullPath, groupPath, milestonesPath = '', labelsPath = '' },
+  } = initialData;
+  dispatch('filters/setEndpoints', {
+    labelsEndpoint: labelsPath,
+    milestonesEndpoint: milestonesPath,
+    groupEndpoint: groupPath,
+    projectEndpoint: fullPath,
+  });
+
   return dispatch('setLoading', true)
     .then(() => dispatch('fetchValueStreams'))
     .finally(() => dispatch('setLoading', false));
diff --git a/app/assets/javascripts/cycle_analytics/store/getters.js b/app/assets/javascripts/cycle_analytics/store/getters.js
index 9faccabcaad..77c285f5ce0 100644
--- a/app/assets/javascripts/cycle_analytics/store/getters.js
+++ b/app/assets/javascripts/cycle_analytics/store/getters.js
@@ -1,5 +1,6 @@
 import dateFormat from 'dateformat';
 import { dateFormats } from '~/analytics/shared/constants';
+import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 import { transformStagesForPathNavigation, filterStagesByHiddenStatus } from '../utils';
 
 export const pathNavigationData = ({ stages, medians, stageCounts, selectedStage }) => {
@@ -20,6 +21,21 @@ export const requestParams = (state) => {
   return { requestPath: fullPath, valueStreamId, stageId };
 };
 
+const filterBarParams = ({ filters }) => {
+  const {
+    authors: { selected: selectedAuthor },
+    milestones: { selected: selectedMilestone },
+    assignees: { selectedList: selectedAssigneeList },
+    labels: { selectedList: selectedLabelList },
+  } = filters;
+  return filterToQueryObject({
+    milestone_title: selectedMilestone,
+    author_username: selectedAuthor,
+    label_name: selectedLabelList,
+    assignee_username: selectedAssigneeList,
+  });
+};
+
 const dateRangeParams = ({ createdAfter, createdBefore }) => ({
   created_after: createdAfter ? dateFormat(createdAfter, dateFormats.isoDate) : null,
   created_before: createdBefore ? dateFormat(createdBefore, dateFormats.isoDate) : null,
@@ -33,6 +49,7 @@ export const legacyFilterParams = ({ daysInPast }) => {
 
 export const filterParams = (state) => {
   return {
+    ...filterBarParams(state),
     ...dateRangeParams(state),
   };
 };
diff --git a/app/assets/javascripts/cycle_analytics/store/mutations.js b/app/assets/javascripts/cycle_analytics/store/mutations.js
index e41de85c1fa..301e7d95f8c 100644
--- a/app/assets/javascripts/cycle_analytics/store/mutations.js
+++ b/app/assets/javascripts/cycle_analytics/store/mutations.js
@@ -1,14 +1,12 @@
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
-import { formatMedianValues, calculateFormattedDayInPast } from '../utils';
+import { formatMedianValues } from '../utils';
 import * as types from './mutation_types';
 
 export default {
-  [types.INITIALIZE_VSA](state, { endpoints, features }) {
+  [types.INITIALIZE_VSA](state, { endpoints, features, createdBefore, createdAfter }) {
     state.endpoints = endpoints;
-    const { now, past } = calculateFormattedDayInPast(DEFAULT_DAYS_TO_DISPLAY);
-    state.createdBefore = now;
-    state.createdAfter = past;
+    state.createdBefore = createdBefore;
+    state.createdAfter = createdAfter;
     state.features = features;
   },
   [types.SET_LOADING](state, loadingState) {
@@ -20,11 +18,9 @@ export default {
   [types.SET_SELECTED_STAGE](state, stage) {
     state.selectedStage = stage;
   },
-  [types.SET_DATE_RANGE](state, daysInPast) {
-    state.daysInPast = daysInPast;
-    const { now, past } = calculateFormattedDayInPast(daysInPast);
-    state.createdBefore = now;
-    state.createdAfter = past;
+  [types.SET_DATE_RANGE](state, { createdAfter, createdBefore }) {
+    state.createdBefore = createdBefore;
+    state.createdAfter = createdAfter;
   },
   [types.REQUEST_VALUE_STREAMS](state) {
     state.valueStreams = [];
diff --git a/app/assets/javascripts/cycle_analytics/store/state.js b/app/assets/javascripts/cycle_analytics/store/state.js
index e6da3f609b2..0882db51218 100644
--- a/app/assets/javascripts/cycle_analytics/store/state.js
+++ b/app/assets/javascripts/cycle_analytics/store/state.js
@@ -1,10 +1,7 @@
-import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
-
 export default () => ({
   id: null,
   features: {},
   endpoints: {},
-  daysInPast: DEFAULT_DAYS_TO_DISPLAY,
   createdAfter: null,
   createdBefore: null,
   stages: [],
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
index 8282f1d910a..77767456f76 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTable, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlTable, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { s__ } from '~/locale';
 
@@ -21,21 +21,42 @@ export default {
       key: 'edit',
       label: s__('DeployFreeze|Edit'),
     },
+    {
+      key: 'delete',
+      label: s__('DeployFreeze|Delete'),
+    },
   ],
   translations: {
     addDeployFreeze: s__('DeployFreeze|Add deploy freeze'),
+    deleteDeployFreezeTitle: s__('DeployFreeze|Delete deploy freeze?'),
+    deleteDeployFreezeMessage: s__(
+      'DeployFreeze|Deploy freeze from %{start} to %{end} in %{timezone} will be removed. Are you sure?',
+    ),
     emptyStateText: s__(
       'DeployFreeze|No deploy freezes exist for this project. To add one, select %{strongStart}Add deploy freeze%{strongEnd}',
     ),
   },
+  modal: {
+    id: 'deleteFreezePeriodModal',
+    actionPrimary: {
+      text: s__('DeployFreeze|Delete freeze period'),
+      attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
+    },
+  },
   components: {
     GlTable,
     GlButton,
+    GlModal,
     GlSprintf,
   },
   directives: {
     GlModal: GlModalDirective,
   },
+  data() {
+    return {
+      freezePeriodToDelete: null,
+    };
+  },
   computed: {
     ...mapState(['freezePeriods']),
     tableIsNotEmpty() {
@@ -46,7 +67,14 @@ export default {
     this.fetchFreezePeriods();
   },
   methods: {
-    ...mapActions(['fetchFreezePeriods', 'setFreezePeriod']),
+    ...mapActions(['fetchFreezePeriods', 'setFreezePeriod', 'deleteFreezePeriod']),
+    handleDeleteFreezePeriod(freezePeriod) {
+      this.freezePeriodToDelete = freezePeriod;
+    },
+    confirmDeleteFreezePeriod() {
+      this.deleteFreezePeriod(this.freezePeriodToDelete);
+      this.freezePeriodToDelete = null;
+    },
   },
 };
 </script>
@@ -72,6 +100,18 @@ export default {
           @click="setFreezePeriod(item)"
         />
       </template>
+      <template #cell(delete)="{ item }">
+        <gl-button
+          v-gl-modal="$options.modal.id"
+          category="secondary"
+          variant="danger"
+          icon="remove"
+          :aria-label="$options.modal.actionPrimary.text"
+          :loading="item.isDeleting"
+          data-testid="delete-deploy-freeze"
+          @click="handleDeleteFreezePeriod(item)"
+        />
+      </template>
       <template #empty>
         <p data-testid="empty-freeze-periods" class="gl-text-center text-plain">
           <gl-sprintf :message="$options.translations.emptyStateText">
@@ -90,5 +130,24 @@ export default {
     >
       {{ $options.translations.addDeployFreeze }}
     </gl-button>
+    <gl-modal
+      :title="$options.translations.deleteDeployFreezeTitle"
+      :modal-id="$options.modal.id"
+      :action-primary="$options.modal.actionPrimary"
+      static
+      @primary="confirmDeleteFreezePeriod"
+    >
+      <template v-if="freezePeriodToDelete">
+        <gl-sprintf :message="$options.translations.deleteDeployFreezeMessage">
+          <template #start>
+            <code>{{ freezePeriodToDelete.freezeStart }}</code>
+          </template>
+          <template #end>
+            <code>{{ freezePeriodToDelete.freezeEnd }}</code>
+          </template>
+          <template #timezone>{{ freezePeriodToDelete.cronTimezone.formattedTimezone }}</template>
+        </gl-sprintf>
+      </template>
+    </gl-modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/deploy_freeze/store/actions.js b/app/assets/javascripts/deploy_freeze/store/actions.js
index fed80b46eda..1ac6781a0e3 100644
--- a/app/assets/javascripts/deploy_freeze/store/actions.js
+++ b/app/assets/javascripts/deploy_freeze/store/actions.js
@@ -1,5 +1,6 @@
 import Api from '~/api';
 import createFlash from '~/flash';
+import { logError } from '~/lib/logger';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
@@ -52,6 +53,21 @@ export const updateFreezePeriod = (store) =>
     }),
   );
 
+export const deleteFreezePeriod = ({ state, commit }, { id }) => {
+  commit(types.REQUEST_DELETE_FREEZE_PERIOD, id);
+
+  return Api.deleteFreezePeriod(state.projectId, id)
+    .then(() => commit(types.RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS, id))
+    .catch((e) => {
+      createFlash({
+        message: __('Error: Unable to delete deploy freeze'),
+      });
+      commit(types.RECEIVE_DELETE_FREEZE_PERIOD_ERROR, id);
+
+      logError(`Unable to delete deploy freeze`, e);
+    });
+};
+
 export const fetchFreezePeriods = ({ commit, state }) => {
   commit(types.REQUEST_FREEZE_PERIODS);
 
diff --git a/app/assets/javascripts/deploy_freeze/store/mutation_types.js b/app/assets/javascripts/deploy_freeze/store/mutation_types.js
index 8e6fdfd4443..0fec96e2e4c 100644
--- a/app/assets/javascripts/deploy_freeze/store/mutation_types.js
+++ b/app/assets/javascripts/deploy_freeze/store/mutation_types.js
@@ -10,4 +10,8 @@ export const SET_SELECTED_ID = 'SET_SELECTED_ID';
 export const SET_FREEZE_START_CRON = 'SET_FREEZE_START_CRON';
 export const SET_FREEZE_END_CRON = 'SET_FREEZE_END_CRON';
 
+export const REQUEST_DELETE_FREEZE_PERIOD = 'REQUEST_DELETE_FREEZE_PERIOD';
+export const RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS = 'RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS';
+export const RECEIVE_DELETE_FREEZE_PERIOD_ERROR = 'RECEIVE_DELETE_FREEZE_PERIOD_ERROR';
+
 export const RESET_MODAL = 'RESET_MODAL';
diff --git a/app/assets/javascripts/deploy_freeze/store/mutations.js b/app/assets/javascripts/deploy_freeze/store/mutations.js
index fdd1ea6e32e..151f7f39f5a 100644
--- a/app/assets/javascripts/deploy_freeze/store/mutations.js
+++ b/app/assets/javascripts/deploy_freeze/store/mutations.js
@@ -1,15 +1,28 @@
+import Vue from 'vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { secondsToHours } from '~/lib/utils/datetime_utility';
 import * as types from './mutation_types';
 
-const formatTimezoneName = (freezePeriod, timezoneList) =>
-  convertObjectPropsToCamelCase({
+const formatTimezoneName = (freezePeriod, timezoneList) => {
+  const tz = timezoneList.find((timezone) => timezone.identifier === freezePeriod.cron_timezone);
+  return convertObjectPropsToCamelCase({
     ...freezePeriod,
     cron_timezone: {
-      formattedTimezone: timezoneList.find((tz) => tz.identifier === freezePeriod.cron_timezone)
-        ?.name,
+      formattedTimezone: tz && `[UTC ${secondsToHours(tz.offset)}] ${tz.name}`,
       identifier: freezePeriod.cron_timezone,
     },
   });
+};
+
+const setFreezePeriodIsDeleting = (state, id, isDeleting) => {
+  const freezePeriod = state.freezePeriods.find((f) => f.id === id);
+
+  if (!freezePeriod) {
+    return;
+  }
+
+  Vue.set(freezePeriod, 'isDeleting', isDeleting);
+};
 
 export default {
   [types.REQUEST_FREEZE_PERIODS](state) {
@@ -53,6 +66,18 @@ export default {
     state.selectedId = id;
   },
 
+  [types.REQUEST_DELETE_FREEZE_PERIOD](state, id) {
+    setFreezePeriodIsDeleting(state, id, true);
+  },
+
+  [types.RECEIVE_DELETE_FREEZE_PERIOD_SUCCESS](state, id) {
+    state.freezePeriods = state.freezePeriods.filter((f) => f.id !== id);
+  },
+
+  [types.RECEIVE_DELETE_FREEZE_PERIOD_ERROR](state, id) {
+    setFreezePeriodIsDeleting(state, id, false);
+  },
+
   [types.RESET_MODAL](state) {
     state.freezeStartCron = '';
     state.freezeEndCron = '';
diff --git a/app/assets/javascripts/deprecated_jquery_dropdown/render.js b/app/assets/javascripts/deprecated_jquery_dropdown/render.js
index 167bc4c286e..37287b9d981 100644
--- a/app/assets/javascripts/deprecated_jquery_dropdown/render.js
+++ b/app/assets/javascripts/deprecated_jquery_dropdown/render.js
@@ -107,7 +107,7 @@ function createLink(data, selected, options, index) {
   }
 
   if (options.trackSuggestionClickedLabel) {
-    link.setAttribute('data-track-event', 'click_text');
+    link.setAttribute('data-track-action', 'click_text');
     link.setAttribute('data-track-label', options.trackSuggestionClickedLabel);
     link.setAttribute('data-track-value', index);
     link.setAttribute('data-track-property', slugify(data.category || 'no-category'));
diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
new file mode 100644
index 00000000000..a42b50edb8a
--- /dev/null
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -0,0 +1,1746 @@
+/* eslint-disable no-restricted-properties, babel/camelcase,
+no-unused-expressions, default-case,
+consistent-return, no-alert, no-param-reassign,
+no-shadow, no-useless-escape,
+class-methods-use-this */
+
+/* global ResolveService */
+
+/*
+deprecated_notes_spec.js is the spec for the legacy, jQuery notes application. It has nothing to do with the new, fancy Vue notes app.
+ */
+
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import Autosize from 'autosize';
+import $ from 'jquery';
+import Cookies from 'js-cookie';
+import { escape, uniqueId } from 'lodash';
+import Vue from 'vue';
+import '~/lib/utils/jquery_at_who';
+import AjaxCache from '~/lib/utils/ajax_cache';
+import syntaxHighlight from '~/syntax_highlight';
+import Autosave from './autosave';
+import loadAwardsHandler from './awards_handler';
+import CommentTypeToggle from './comment_type_toggle';
+import createFlash from './flash';
+import { defaultAutocompleteConfig } from './gfm_auto_complete';
+import GLForm from './gl_form';
+import axios from './lib/utils/axios_utils';
+import {
+  isInViewport,
+  getPagePath,
+  scrollToElement,
+  isMetaKey,
+  isInMRPage,
+} from './lib/utils/common_utils';
+import { localTimeAgo } from './lib/utils/datetime_utility';
+import { getLocationHash } from './lib/utils/url_utility';
+import { sprintf, s__, __ } from './locale';
+import TaskList from './task_list';
+
+window.autosize = Autosize;
+
+function normalizeNewlines(str) {
+  return str.replace(/\r\n/g, '\n');
+}
+
+const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
+const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
+
+export default class Notes {
+  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
+    if (!this.instance) {
+      this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
+    }
+  }
+
+  static getInstance() {
+    return this.instance;
+  }
+
+  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
+    this.updateTargetButtons = this.updateTargetButtons.bind(this);
+    this.updateComment = this.updateComment.bind(this);
+    this.visibilityChange = this.visibilityChange.bind(this);
+    this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
+    this.onAddDiffNote = this.onAddDiffNote.bind(this);
+    this.onAddImageDiffNote = this.onAddImageDiffNote.bind(this);
+    this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
+    this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
+    this.removeNote = this.removeNote.bind(this);
+    this.cancelEdit = this.cancelEdit.bind(this);
+    this.updateNote = this.updateNote.bind(this);
+    this.addDiscussionNote = this.addDiscussionNote.bind(this);
+    this.addNoteError = this.addNoteError.bind(this);
+    this.addNote = this.addNote.bind(this);
+    this.resetMainTargetForm = this.resetMainTargetForm.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.keydownNoteText = this.keydownNoteText.bind(this);
+    this.toggleCommitList = this.toggleCommitList.bind(this);
+    this.postComment = this.postComment.bind(this);
+    this.clearFlashWrapper = this.clearFlash.bind(this);
+    this.onHashChange = this.onHashChange.bind(this);
+
+    this.notes_url = notes_url;
+    this.note_ids = note_ids;
+    this.enableGFM = enableGFM;
+    // Used to keep track of updated notes while people are editing things
+    this.updatedNotesTrackingMap = {};
+    this.last_fetched_at = last_fetched_at;
+    this.noteable_url = document.URL;
+    this.notesCountBadge ||
+      (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
+    this.basePollingInterval = 15000;
+    this.maxPollingSteps = 4;
+
+    this.$wrapperEl = isInMRPage() ? $(document).find('.diffs') : $(document);
+    this.cleanBinding();
+    this.addBinding();
+    this.setPollingInterval();
+    this.setupMainTargetNoteForm(enableGFM);
+    this.taskList = new TaskList({
+      dataType: 'note',
+      fieldName: 'note',
+      selector: '.notes',
+    });
+    this.collapseLongCommitList();
+    this.setViewType(view);
+
+    // We are in the merge requests page so we need another edit form for Changes tab
+    if (getPagePath(1) === 'merge_requests') {
+      $('.note-edit-form').clone().addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+    }
+
+    const hash = getLocationHash();
+    const $anchor = hash && document.getElementById(hash);
+
+    if ($anchor) {
+      this.loadLazyDiff({ currentTarget: $anchor });
+    }
+  }
+
+  setViewType(view) {
+    this.view = Cookies.get('diff_view') || view;
+  }
+
+  addBinding() {
+    // Edit note link
+    this.$wrapperEl.on('click', '.js-note-edit', this.showEditForm.bind(this));
+    this.$wrapperEl.on('click', '.note-edit-cancel', this.cancelEdit);
+    // Reopen and close actions for Issue/MR combined with note form submit
+    this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment);
+    this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment);
+    this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons);
+    // resolve a discussion
+    this.$wrapperEl.on('click', '.js-comment-resolve-button', this.postComment);
+    // remove a note (in general)
+    this.$wrapperEl.on('click', '.js-note-delete', this.removeNote);
+    // delete note attachment
+    this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment);
+    // update the file name when an attachment is selected
+    this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
+    // reply to diff/discussion notes
+    this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
+    // add diff note
+    this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote);
+    // add diff note for images
+    this.$wrapperEl.on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
+    // hide diff note form
+    this.$wrapperEl.on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
+    // toggle commit list
+    this.$wrapperEl.on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
+
+    this.$wrapperEl.on('click', '.js-toggle-lazy-diff', this.loadLazyDiff);
+    this.$wrapperEl.on(
+      'click',
+      '.js-toggle-lazy-diff-retry-button',
+      this.onClickRetryLazyLoad.bind(this),
+    );
+
+    // fetch notes when tab becomes visible
+    this.$wrapperEl.on('visibilitychange', this.visibilityChange);
+    // when issue status changes, we need to refresh data
+    this.$wrapperEl.on('issuable:change', this.refresh);
+    // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
+    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.addNote);
+    this.$wrapperEl.on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
+    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
+    this.$wrapperEl.on(
+      'ajax:complete',
+      '.js-main-target-form',
+      this.reenableTargetFormSubmitButton,
+    );
+    // when a key is clicked on the notes
+    this.$wrapperEl.on('keydown', '.js-note-text', this.keydownNoteText);
+    // When the URL fragment/hash has changed, `#note_xxx`
+    $(window).on('hashchange', this.onHashChange);
+  }
+
+  cleanBinding() {
+    this.$wrapperEl.off('click', '.js-note-edit');
+    this.$wrapperEl.off('click', '.note-edit-cancel');
+    this.$wrapperEl.off('click', '.js-note-delete');
+    this.$wrapperEl.off('click', '.js-note-attachment-delete');
+    this.$wrapperEl.off('click', '.js-discussion-reply-button');
+    this.$wrapperEl.off('click', '.js-add-diff-note-button');
+    this.$wrapperEl.off('click', '.js-add-image-diff-note-button');
+    // eslint-disable-next-line @gitlab/no-global-event-off
+    this.$wrapperEl.off('visibilitychange');
+    this.$wrapperEl.off('keyup input', '.js-note-text');
+    this.$wrapperEl.off('click', '.js-note-target-reopen');
+    this.$wrapperEl.off('click', '.js-note-target-close');
+    this.$wrapperEl.off('keydown', '.js-note-text');
+    this.$wrapperEl.off('click', '.js-comment-resolve-button');
+    this.$wrapperEl.off('click', '.system-note-commit-list-toggler');
+    this.$wrapperEl.off('click', '.js-toggle-lazy-diff');
+    this.$wrapperEl.off('click', '.js-toggle-lazy-diff-retry-button');
+    this.$wrapperEl.off('ajax:success', '.js-main-target-form');
+    this.$wrapperEl.off('ajax:success', '.js-discussion-note-form');
+    this.$wrapperEl.off('ajax:complete', '.js-main-target-form');
+    $(window).off('hashchange', this.onHashChange);
+  }
+
+  static initCommentTypeToggle(form) {
+    const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
+    const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
+    const noteTypeInput = form.querySelector('#note_type');
+    const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
+    const closeButton = form.querySelector('.js-note-target-close');
+    const reopenButton = form.querySelector('.js-note-target-reopen');
+
+    const commentTypeToggle = new CommentTypeToggle({
+      dropdownTrigger,
+      dropdownList,
+      noteTypeInput,
+      submitButton,
+      closeButton,
+      reopenButton,
+    });
+
+    commentTypeToggle.initDroplab();
+  }
+
+  keydownNoteText(e) {
+    let discussionNoteForm;
+    let editNote;
+    let myLastNote;
+    let myLastNoteEditBtn;
+    let newText;
+    let originalText;
+
+    if (isMetaKey(e)) {
+      return;
+    }
+
+    const $textarea = $(e.target);
+    // Edit previous note when UP arrow is hit
+    switch (e.which) {
+      case 38:
+        if ($textarea.val() !== '') {
+          return;
+        }
+        myLastNote = $(
+          `li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`,
+          $textarea.closest('.note, .notes_holder, #notes'),
+        );
+        if (myLastNote.length) {
+          myLastNoteEditBtn = myLastNote.find('.js-note-edit');
+          return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
+        }
+        break;
+      // Cancel creating diff note or editing any note when ESCAPE is hit
+      case 27:
+        discussionNoteForm = $textarea.closest('.js-discussion-note-form');
+        if (discussionNoteForm.length) {
+          if ($textarea.val() !== '') {
+            if (!window.confirm(__('Your comment will be discarded.'))) {
+              return;
+            }
+          }
+          this.removeDiscussionNoteForm(discussionNoteForm);
+          return;
+        }
+        editNote = $textarea.closest('.note');
+        if (editNote.length) {
+          originalText = $textarea.closest('form').data('originalNote');
+          newText = $textarea.val();
+          if (originalText !== newText) {
+            if (!window.confirm(__('Are you sure you want to discard this comment?'))) {
+              return;
+            }
+          }
+          return this.removeNoteEditForm(editNote);
+        }
+    }
+  }
+
+  initRefresh() {
+    if (Notes.interval) {
+      clearInterval(Notes.interval);
+    }
+    Notes.interval = setInterval(() => this.refresh(), this.pollingInterval);
+  }
+
+  refresh() {
+    if (!document.hidden) {
+      return this.getContent();
+    }
+  }
+
+  getContent() {
+    if (this.refreshing) {
+      return;
+    }
+
+    this.refreshing = true;
+
+    axios
+      .get(`${this.notes_url}?html=true`, {
+        headers: {
+          'X-Last-Fetched-At': this.last_fetched_at,
+        },
+      })
+      .then(({ data }) => {
+        const { notes } = data;
+        this.last_fetched_at = data.last_fetched_at;
+        this.setPollingInterval(data.notes.length);
+        $.each(notes, (i, note) => this.renderNote(note));
+
+        this.refreshing = false;
+      })
+      .catch(() => {
+        this.refreshing = false;
+      });
+  }
+
+  /**
+   * Increase @pollingInterval up to 120 seconds on every function call,
+   * if `shouldReset` has a truthy value, 'null' or 'undefined' the variable
+   * will reset to @basePollingInterval.
+   *
+   * Note: this function is used to gradually increase the polling interval
+   * if there aren't new notes coming from the server
+   */
+  setPollingInterval(shouldReset) {
+    if (shouldReset == null) {
+      shouldReset = true;
+    }
+    const nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
+    if (shouldReset) {
+      this.pollingInterval = this.basePollingInterval;
+    } else if (this.pollingInterval < nthInterval) {
+      this.pollingInterval *= 2;
+    }
+    return this.initRefresh();
+  }
+
+  handleQuickActions(noteEntity) {
+    let votesBlock;
+    if (noteEntity.commands_changes) {
+      if ('merge' in noteEntity.commands_changes) {
+        Notes.checkMergeRequestStatus();
+      }
+
+      if ('emoji_award' in noteEntity.commands_changes) {
+        votesBlock = $('.js-awards-block').eq(0);
+
+        loadAwardsHandler()
+          .then((awardsHandler) => {
+            awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
+            awardsHandler.scrollToAwards();
+          })
+          .catch(() => {
+            // ignore
+          });
+      }
+    }
+  }
+
+  setupNewNote($note) {
+    // Update datetime format on the recent note
+    localTimeAgo($note.find('.js-timeago').get(), false);
+
+    this.collapseLongCommitList();
+    this.taskList.init();
+
+    // This stops the note highlight, #note_xxx`, from being removed after real time update
+    // The `:target` selector does not re-evaluate after we replace element in the DOM
+    Notes.updateNoteTargetSelector($note);
+    this.$noteToCleanHighlight = $note;
+  }
+
+  onHashChange() {
+    if (this.$noteToCleanHighlight) {
+      Notes.updateNoteTargetSelector(this.$noteToCleanHighlight);
+    }
+
+    this.$noteToCleanHighlight = null;
+  }
+
+  static updateNoteTargetSelector($note) {
+    const hash = getLocationHash();
+    // Needs to be an explicit true/false for the jQuery `toggleClass(force)`
+    const addTargetClass = Boolean(hash && $note.filter(`#${hash}`).length > 0);
+    $note.toggleClass('target', addTargetClass);
+  }
+
+  /**
+   * Render note in main comments area.
+   *
+   * Note: for rendering inline notes use renderDiscussionNote
+   */
+  renderNote(noteEntity, $form, $notesList = $('.main-notes-list')) {
+    if (noteEntity.discussion_html) {
+      return this.renderDiscussionNote(noteEntity, $form);
+    }
+
+    if (!noteEntity.valid) {
+      if (noteEntity.errors && noteEntity.errors.commands_only) {
+        if (noteEntity.commands_changes && Object.keys(noteEntity.commands_changes).length > 0) {
+          $notesList.find('.system-note.being-posted').remove();
+        }
+        this.addFlash({
+          message: noteEntity.errors.commands_only,
+          type: 'notice',
+          parent: this.parentTimeline.get(0),
+        });
+        this.refresh();
+      }
+      return;
+    }
+
+    const $note = $notesList.find(`#note_${noteEntity.id}`);
+    if (Notes.isNewNote(noteEntity, this.note_ids)) {
+      if (isInMRPage()) {
+        return;
+      }
+
+      this.note_ids.push(noteEntity.id);
+
+      if ($notesList.length) {
+        $notesList.find('.system-note.being-posted').remove();
+      }
+      const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
+
+      this.setupNewNote($newNote);
+      this.refresh();
+      return this.updateNotesCount(1);
+    } else if (Notes.isUpdatedNote(noteEntity, $note)) {
+      // The server can send the same update multiple times so we need to make sure to only update once per actual update.
+      const isEditing = $note.hasClass('is-editing');
+      const initialContent = normalizeNewlines($note.find('.original-note-content').text().trim());
+      const $textarea = $note.find('.js-note-text');
+      const currentContent = $textarea.val();
+      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
+      const isTextareaUntouched =
+        currentContent === initialContent || currentContent === sanitizedNoteNote;
+
+      if (isEditing && isTextareaUntouched) {
+        $textarea.val(noteEntity.note);
+        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
+      } else if (isEditing && !isTextareaUntouched) {
+        this.putConflictEditWarningInPlace(noteEntity, $note);
+        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
+      } else {
+        const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
+        this.setupNewNote($updatedNote);
+      }
+    }
+  }
+
+  isParallelView() {
+    return Cookies.get('diff_view') === 'parallel';
+  }
+
+  /**
+   * Render note in discussion area. To render inline notes use renderDiscussionNote.
+   */
+  renderDiscussionNote(noteEntity, $form) {
+    let discussionContainer;
+    let row;
+
+    if (!Notes.isNewNote(noteEntity, this.note_ids)) {
+      return;
+    }
+    this.note_ids.push(noteEntity.id);
+
+    const form =
+      $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
+    row =
+      form.length || !noteEntity.discussion_line_code
+        ? form.closest('tr')
+        : $(`#${noteEntity.discussion_line_code}`);
+
+    if (noteEntity.on_image) {
+      row = form;
+    }
+
+    // is this the first note of discussion?
+    discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
+    if (!discussionContainer.length) {
+      discussionContainer = form.closest('.discussion').find('.notes');
+    }
+    if (discussionContainer.length === 0) {
+      if (noteEntity.diff_discussion_html) {
+        const $discussion = $(noteEntity.diff_discussion_html).renderGFM();
+
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
+          // insert the note and the reply button after the temp row
+          row.after($discussion);
+        } else {
+          // Merge new discussion HTML in
+          const $notes = $discussion.find(
+            `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
+          );
+          const contentContainerClass = $notes
+            .closest('.notes-content')
+            .attr('class')
+            .split(' ')
+            .join('.');
+
+          row
+            .find(`.${contentContainerClass} .content`)
+            .append($notes.closest('.content').children());
+        }
+      } else {
+        Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
+      }
+    } else {
+      // append new note to all matching discussions
+      Notes.animateAppendNote(noteEntity.html, discussionContainer);
+    }
+
+    localTimeAgo(document.querySelectorAll('.js-timeago'), false);
+    Notes.checkMergeRequestStatus();
+    return this.updateNotesCount(1);
+  }
+
+  getLineHolder(changesDiscussionContainer) {
+    return $(changesDiscussionContainer)
+      .closest('.notes_holder')
+      .prevAll('.line_holder')
+      .first()
+      .get(0);
+  }
+
+  /**
+   * Called in response the main target form has been successfully submitted.
+   *
+   * Removes any errors.
+   * Resets text and preview.
+   * Resets buttons.
+   */
+  resetMainTargetForm(e) {
+    const form = $('.js-main-target-form');
+    // remove validation errors
+    form.find('.js-errors').remove();
+    // reset text and preview
+    form.find('.js-md-write-button').click();
+    form.find('.js-note-text').val('').trigger('input');
+    form.find('.js-note-text').data('autosave').reset();
+
+    const event = document.createEvent('Event');
+    event.initEvent('autosize:update', true, false);
+    form.find('.js-autosize')[0].dispatchEvent(event);
+
+    this.updateTargetButtons(e);
+  }
+
+  reenableTargetFormSubmitButton() {
+    const form = $('.js-main-target-form');
+    return form.find('.js-note-text').trigger('input');
+  }
+
+  /**
+   * Shows the main form and does some setup on it.
+   *
+   * Sets some hidden fields in the form.
+   */
+  setupMainTargetNoteForm(enableGFM) {
+    // find the form
+    const form = $('.js-new-note-form');
+    // Set a global clone of the form for later cloning
+    this.formClone = form.clone();
+    // show the form
+    this.setupNoteForm(form, enableGFM);
+    // fix classes
+    form.removeClass('js-new-note-form');
+    form.addClass('js-main-target-form');
+    form.find('#note_line_code').remove();
+    form.find('#note_position').remove();
+    form.find('#note_type').val('');
+    form.find('#note_project_id').remove();
+    form.find('#in_reply_to_discussion_id').remove();
+    this.parentTimeline = form.parents('.timeline');
+
+    if (form.length) {
+      Notes.initCommentTypeToggle(form.get(0));
+    }
+  }
+
+  /**
+   * General note form setup.
+   *
+   * deactivates the submit button when text is empty
+   * hides the preview button when text is empty
+   * set up GFM auto complete
+   * show the form
+   */
+  setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
+    this.glForm = new GLForm(form, enableGFM);
+    const textarea = form.find('.js-note-text');
+    const key = [
+      s__('NoteForm|Note'),
+      form.find('#note_noteable_type').val(),
+      form.find('#note_noteable_id').val(),
+      form.find('#note_commit_id').val(),
+      form.find('#note_type').val(),
+      form.find('#note_project_id').val(),
+      form.find('#in_reply_to_discussion_id').val(),
+
+      // LegacyDiffNote
+      form.find('#note_line_code').val(),
+
+      // DiffNote
+      form.find('#note_position').val(),
+    ];
+    return new Autosave(textarea, key);
+  }
+
+  /**
+   * Called in response to the new note form being submitted
+   *
+   * Adds new note to list.
+   */
+  addNote($form, note) {
+    return this.renderNote(note);
+  }
+
+  addNoteError($form) {
+    let formParentTimeline;
+    if ($form.hasClass('js-main-target-form')) {
+      formParentTimeline = $form.parents('.timeline');
+    } else if ($form.hasClass('js-discussion-note-form')) {
+      formParentTimeline = $form.closest('.discussion-notes').find('.notes');
+    }
+    return this.addFlash({
+      message: __(
+        'Your comment could not be submitted! Please check your network connection and try again.',
+      ),
+      parent: formParentTimeline.get(0),
+    });
+  }
+
+  updateNoteError() {
+    createFlash({
+      message: __(
+        'Your comment could not be updated! Please check your network connection and try again.',
+      ),
+    });
+  }
+
+  /**
+   * Called in response to the new note form being submitted
+   *
+   * Adds new note to list.
+   */
+  addDiscussionNote($form, note, isNewDiffComment) {
+    if ($form.attr('data-resolve-all') != null) {
+      const discussionId = $form.data('discussionId');
+      const mergeRequestId = $form.data('noteableIid');
+
+      if (ResolveService != null) {
+        ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
+      }
+    }
+
+    this.renderNote(note, $form);
+    // cleanup after successfully creating a diff/discussion note
+    if (isNewDiffComment) {
+      this.removeDiscussionNoteForm($form);
+    }
+  }
+
+  /**
+   * Called in response to the edit note form being submitted
+   *
+   * Updates the current note field.
+   */
+  updateNote(noteEntity, $targetNote) {
+    // Convert returned HTML to a jQuery object so we can modify it further
+    const $noteEntityEl = $(noteEntity.html);
+    const $noteAvatar = $noteEntityEl.find('.image-diff-avatar-link');
+    const $targetNoteBadge = $targetNote.find('.badge');
+
+    $noteAvatar.append($targetNoteBadge);
+    this.revertNoteEditForm($targetNote);
+    $noteEntityEl.renderGFM();
+    // Find the note's `li` element by ID and replace it with the updated HTML
+    const $note_li = $(`.note-row-${noteEntity.id}`);
+
+    $note_li.replaceWith($noteEntityEl);
+    this.setupNewNote($noteEntityEl);
+  }
+
+  checkContentToAllowEditing($el) {
+    const initialContent = $el.find('.original-note-content').text().trim();
+    const currentContent = $el.find('.js-note-text').val();
+    let isAllowed = true;
+
+    if (currentContent === initialContent) {
+      this.removeNoteEditForm($el);
+    } else {
+      const isWidgetVisible = isInViewport($el.get(0));
+
+      if (!isWidgetVisible) {
+        scrollToElement($el);
+      }
+
+      $el.find('.js-finish-edit-warning').show();
+      isAllowed = false;
+    }
+
+    return isAllowed;
+  }
+
+  /**
+   * Called in response to clicking the edit note link
+   *
+   * Replaces the note text with the note edit form
+   * Adds a data attribute to the form with the original content of the note for cancellations
+   */
+  showEditForm(e) {
+    e.preventDefault();
+
+    const $target = $(e.target);
+    const $editForm = $(this.getEditFormSelector($target));
+    const $note = $target.closest('.note');
+    const $currentlyEditing = $('.note.is-editing:visible');
+
+    if ($currentlyEditing.length) {
+      const isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+
+      if (!isEditAllowed) {
+        return;
+      }
+    }
+
+    $note.find('.js-note-attachment-delete').show();
+    $editForm.addClass('current-note-edit-form');
+    $note.addClass('is-editing');
+    this.putEditFormInPlace($target);
+  }
+
+  /**
+   * Called in response to clicking the edit note link
+   *
+   * Hides edit form and restores the original note text to the editor textarea.
+   */
+  cancelEdit(e) {
+    e.preventDefault();
+    const $target = $(e.target);
+    const $note = $target.closest('.note');
+    const noteId = $note.attr('data-note-id');
+
+    this.revertNoteEditForm($target);
+
+    if (this.updatedNotesTrackingMap[noteId]) {
+      const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
+      $note.replaceWith($newNote);
+      this.setupNewNote($newNote);
+      // Now that we have taken care of the update, clear it out
+      delete this.updatedNotesTrackingMap[noteId];
+    } else {
+      $note.find('.js-finish-edit-warning').hide();
+      this.removeNoteEditForm($note);
+    }
+  }
+
+  revertNoteEditForm($target) {
+    $target = $target || $('.note.is-editing:visible');
+    const selector = this.getEditFormSelector($target);
+    const $editForm = $(selector);
+
+    $editForm.insertBefore('.diffs');
+    $editForm.find('.js-comment-save-button').enable();
+    $editForm.find('.js-finish-edit-warning').hide();
+  }
+
+  getEditFormSelector($el) {
+    let selector = '.note-edit-form:not(.mr-note-edit-form)';
+
+    if ($el.parents('#diffs').length) {
+      selector = '.note-edit-form.mr-note-edit-form';
+    }
+
+    return selector;
+  }
+
+  removeNoteEditForm($note) {
+    const form = $note.find('.diffs .current-note-edit-form');
+
+    $note.removeClass('is-editing');
+    form.removeClass('current-note-edit-form');
+    form.find('.js-finish-edit-warning').hide();
+    // Replace markdown textarea text with original note text.
+    return form.find('.js-note-text').val(form.find('form.edit-note').data('originalNote'));
+  }
+
+  /**
+   * Called in response to deleting a note of any kind.
+   *
+   * Removes the actual note from view.
+   * Removes the whole discussion if the last note is being removed.
+   */
+  removeNote(e) {
+    const $note = $(e.currentTarget).closest('.note');
+    const noteElId = $note.attr('id');
+    $(`.note[id="${noteElId}"]`).each((i, el) => {
+      // A same note appears in the "Discussion" and in the "Changes" tab, we have
+      // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
+      // where $('#noteId') would return only one.
+      const $note = $(el);
+      const $notes = $note.closest('.discussion-notes');
+      const discussionId = $('.notes', $notes).data('discussionId');
+
+      $note.remove();
+
+      // check if this is the last note for this line
+      if ($notes.find('.note').length === 0) {
+        const notesTr = $notes.closest('tr');
+
+        // "Discussions" tab
+        $notes.closest('.timeline-entry').remove();
+
+        $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
+
+        // The notes tr can contain multiple lists of notes, like on the parallel diff
+        // notesTr does not exist for image diffs
+        if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
+          const $diffFile = $notes.closest('.diff-file');
+          if ($diffFile.length > 0) {
+            const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
+              detail: {
+                // badgeNumber's start with 1 and index starts with 0
+                badgeNumber: $notes.index() + 1,
+              },
+            });
+
+            $diffFile[0].dispatchEvent(removeBadgeEvent);
+          }
+
+          $notes.remove();
+        } else if (notesTr.length > 0) {
+          notesTr.remove();
+        }
+      }
+    });
+
+    Notes.checkMergeRequestStatus();
+    return this.updateNotesCount(-1);
+  }
+
+  /**
+   * Called in response to clicking the delete attachment link
+   *
+   * Removes the attachment wrapper view, including image tag if it exists
+   * Resets the note editing form
+   */
+  removeAttachment() {
+    const $note = $(this).closest('.note');
+    $note.find('.note-attachment').remove();
+    $note.find('.note-body > .note-text').show();
+    $note.find('.note-header').show();
+    return $note.find('.diffs .current-note-edit-form').remove();
+  }
+
+  /**
+   * Called when clicking on the "reply" button for a diff line.
+   *
+   * Shows the note form below the notes.
+   */
+  onReplyToDiscussionNote(e) {
+    this.replyToDiscussionNote(e.target);
+  }
+
+  replyToDiscussionNote(target) {
+    const form = this.cleanForm(this.formClone.clone());
+    const replyLink = $(target).closest('.js-discussion-reply-button');
+    // insert the form after the button
+    replyLink.closest('.discussion-reply-holder').hide().after(form);
+    // show the form
+    return this.setupDiscussionNoteForm(replyLink, form);
+  }
+
+  /**
+   * Shows the diff or discussion form and does some setup on it.
+   *
+   * Sets some hidden fields in the form.
+   *
+   * Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
+   */
+  setupDiscussionNoteForm(dataHolder, form) {
+    // set up note target
+    let diffFileData = dataHolder.closest('.text-file');
+
+    if (diffFileData.length === 0) {
+      diffFileData = dataHolder.closest('.image');
+    }
+
+    const discussionID = dataHolder.data('discussionId');
+
+    if (discussionID) {
+      form.attr('data-discussion-id', discussionID);
+      form.find('#in_reply_to_discussion_id').val(discussionID);
+    }
+
+    form.find('#note_project_id').val(dataHolder.data('discussionProjectId'));
+
+    form.attr('data-line-code', dataHolder.data('lineCode'));
+    form.find('#line_type').val(dataHolder.data('lineType'));
+
+    form.find('#note_noteable_type').val(diffFileData.data('noteableType'));
+    form.find('#note_noteable_id').val(diffFileData.data('noteableId'));
+    form.find('#note_commit_id').val(diffFileData.data('commitId'));
+
+    form.find('#note_type').val(dataHolder.data('noteType'));
+
+    // LegacyDiffNote
+    form.find('#note_line_code').val(dataHolder.data('lineCode'));
+
+    // DiffNote
+    form.find('#note_position').val(dataHolder.attr('data-position'));
+
+    form.append('</div>').find('.js-close-discussion-note-form').show().removeClass('hide');
+    form.find('.js-note-target-close').remove();
+    form.find('.js-note-new-discussion').remove();
+    this.setupNoteForm(form);
+
+    form.removeClass('js-main-target-form').addClass('discussion-form js-discussion-note-form');
+
+    form.find('.js-note-text').focus();
+    form.find('.js-comment-resolve-button').attr('data-discussion-id', discussionID);
+  }
+
+  /**
+   * Called when clicking on the "add a comment" button on the side of a diff line.
+   *
+   * Inserts a temporary row for the form below the line.
+   * Sets up the form and shows it.
+   */
+  onAddDiffNote(e) {
+    e.preventDefault();
+    const link = e.currentTarget || e.target;
+    const $link = $(link);
+    const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
+    this.toggleDiffNote({
+      target: $link,
+      lineType: link.dataset.lineType,
+      showReplyInput,
+      currentUsername: gon.current_username,
+      currentUserAvatar: gon.current_user_avatar_url,
+      currentUserFullname: gon.current_user_fullname,
+    });
+  }
+
+  onAddImageDiffNote(e) {
+    const $link = $(e.currentTarget || e.target);
+    const $diffFile = $link.closest('.diff-file');
+
+    const clickEvent = new CustomEvent('click.imageDiff', {
+      detail: e,
+    });
+
+    $diffFile[0].dispatchEvent(clickEvent);
+
+    // Set up comment form
+    let newForm;
+    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
+    const $form = $noteContainer.find('> .discussion-form');
+
+    if ($form.length === 0) {
+      newForm = this.cleanForm(this.formClone.clone());
+      newForm.appendTo($noteContainer);
+    } else {
+      newForm = $form;
+    }
+
+    this.setupDiscussionNoteForm($link, newForm);
+  }
+
+  toggleDiffNote({ target, lineType, forceShow, showReplyInput = false }) {
+    let addForm;
+    let newForm;
+    let noteForm;
+    let replyButton;
+    let rowCssToAdd;
+    const $link = $(target);
+    const row = $link.closest('tr');
+    const nextRow = row.next();
+    let targetRow = row;
+    if (nextRow.is('.notes_holder')) {
+      targetRow = nextRow;
+    }
+
+    const hasNotes = nextRow.is('.notes_holder');
+    addForm = false;
+    let lineTypeSelector = '';
+    rowCssToAdd =
+      '<tr class="notes_holder js-temp-notes-holder"><td class="notes-content" colspan="3"><div class="content"></div></td></tr>';
+    // In parallel view, look inside the correct left/right pane
+    if (this.isParallelView()) {
+      lineTypeSelector = `.${lineType}`;
+      rowCssToAdd =
+        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes-content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes-content parallel new"><div class="content"></div></td></tr>';
+    }
+    const notesContentSelector = `.notes-content${lineTypeSelector} .content`;
+    let notesContent = targetRow.find(notesContentSelector);
+
+    if (hasNotes && showReplyInput) {
+      targetRow.show();
+      notesContent = targetRow.find(notesContentSelector);
+      if (notesContent.length) {
+        notesContent.show();
+        replyButton = notesContent.find('.js-discussion-reply-button:visible');
+        if (replyButton.length) {
+          this.replyToDiscussionNote(replyButton[0]);
+        } else {
+          // In parallel view, the form may not be present in one of the panes
+          noteForm = notesContent.find('.js-discussion-note-form');
+          if (noteForm.length === 0) {
+            addForm = true;
+          }
+        }
+      }
+    } else if (showReplyInput) {
+      // add a notes row and insert the form
+      row.after(rowCssToAdd);
+      targetRow = row.next();
+      notesContent = targetRow.find(notesContentSelector);
+      addForm = true;
+    } else {
+      const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+      const isForced = forceShow === true || forceShow === false;
+      const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
+
+      targetRow.toggleClass('hide', !showNow);
+      notesContent.toggleClass('hide', !showNow);
+    }
+
+    if (addForm) {
+      newForm = this.cleanForm(this.formClone.clone());
+      newForm.appendTo(notesContent);
+      // show the form
+      return this.setupDiscussionNoteForm($link, newForm);
+    }
+  }
+
+  /**
+   * Called in response to "cancel" on a diff note form.
+   *
+   * Shows the reply button again.
+   * Removes the form and if necessary it's temporary row.
+   */
+  removeDiscussionNoteForm(form) {
+    const row = form.closest('tr');
+    const glForm = form.data('glForm');
+    glForm.destroy();
+    form.find('.js-note-text').data('autosave').reset();
+    // show the reply button (will only work for replies)
+    form.prev('.discussion-reply-holder').show();
+    if (row.is('.js-temp-notes-holder')) {
+      // remove temporary row for diff lines
+      return row.remove();
+    }
+    // only remove the form
+    return form.remove();
+  }
+
+  cancelDiscussionForm(e) {
+    e.preventDefault();
+    const $form = $(e.target).closest('.js-discussion-note-form');
+    const $discussionNote = $(e.target).closest('.discussion-notes');
+
+    if ($discussionNote.length === 0) {
+      // Only send blur event when the discussion form
+      // is not part of a discussion note
+      const $diffFile = $form.closest('.diff-file');
+
+      if ($diffFile.length > 0) {
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        $diffFile[0].dispatchEvent(blurEvent);
+      }
+    }
+
+    return this.removeDiscussionNoteForm($form);
+  }
+
+  /**
+   * Called after an attachment file has been selected.
+   *
+   * Updates the file name for the selected attachment.
+   */
+  updateFormAttachment() {
+    const form = $(this).closest('form');
+    // get only the basename
+    const filename = $(this)
+      .val()
+      .replace(/^.*[\\\/]/, '');
+    return form.find('.js-attachment-filename').text(filename);
+  }
+
+  /**
+   * Called when the tab visibility changes
+   */
+  visibilityChange() {
+    return this.refresh();
+  }
+
+  updateTargetButtons(e) {
+    let closetext;
+    let reopentext;
+    const textarea = $(e.target);
+    const form = textarea.parents('form');
+    const reopenbtn = form.find('.js-note-target-reopen');
+    const closebtn = form.find('.js-note-target-close');
+
+    if (textarea.val().trim().length > 0) {
+      reopentext = reopenbtn.attr('data-alternative-text');
+      closetext = closebtn.attr('data-alternative-text');
+      if (reopenbtn.text() !== reopentext) {
+        reopenbtn.text(reopentext);
+      }
+      if (closebtn.text() !== closetext) {
+        closebtn.text(closetext);
+      }
+      if (reopenbtn.is(':not(.btn-comment-and-reopen)')) {
+        reopenbtn.addClass('btn-comment-and-reopen');
+      }
+      if (closebtn.is(':not(.btn-comment-and-close)')) {
+        closebtn.addClass('btn-comment-and-close');
+      }
+    } else {
+      reopentext = reopenbtn.data('originalText');
+      closetext = closebtn.data('originalText');
+      if (reopenbtn.text() !== reopentext) {
+        reopenbtn.text(reopentext);
+      }
+      if (closebtn.text() !== closetext) {
+        closebtn.text(closetext);
+      }
+      if (reopenbtn.is('.btn-comment-and-reopen')) {
+        reopenbtn.removeClass('btn-comment-and-reopen');
+      }
+      if (closebtn.is('.btn-comment-and-close')) {
+        closebtn.removeClass('btn-comment-and-close');
+      }
+    }
+  }
+
+  putEditFormInPlace($el) {
+    const $editForm = $(this.getEditFormSelector($el));
+    const $note = $el.closest('.note');
+
+    $editForm.insertAfter($note.find('.note-text'));
+
+    const $originalContentEl = $note.find('.original-note-content');
+    const originalContent = $originalContentEl.text().trim();
+    const postUrl = $originalContentEl.data('postUrl');
+    const targetId = $originalContentEl.data('targetId');
+    const targetType = $originalContentEl.data('targetType');
+
+    this.glForm = new GLForm($editForm.find('form'), this.enableGFM);
+
+    $editForm.find('form').attr('action', `${postUrl}?html=true`).attr('data-remote', 'true');
+    $editForm.find('.js-form-target-id').val(targetId);
+    $editForm.find('.js-form-target-type').val(targetType);
+    $editForm.find('.js-note-text').focus().val(originalContent);
+    $editForm.find('.js-md-write-button').trigger('click');
+    $editForm.find('.referenced-users').hide();
+  }
+
+  putConflictEditWarningInPlace(noteEntity, $note) {
+    if ($note.find('.js-conflict-edit-warning').length === 0) {
+      const open_link = `<a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">`;
+      const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
+        ${sprintf(
+          s__(
+            'Notes|This comment has changed since you started editing, please review the %{open_link}updated comment%{close_link} to ensure information is not lost',
+          ),
+          {
+            open_link,
+            close_link: '</a>',
+          },
+        )}
+      </div>`);
+      $alert.insertAfter($note.find('.note-text'));
+    }
+  }
+
+  updateNotesCount(updateCount) {
+    return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
+  }
+
+  static renderPlaceholderComponent($container) {
+    const el = $container.find('.js-code-placeholder').get(0);
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      components: {
+        GlSkeletonLoading,
+      },
+      render(createElement) {
+        return createElement('gl-skeleton-loading');
+      },
+    });
+  }
+
+  static renderDiffContent($container, data) {
+    const { discussion_html } = data;
+    const lines = $(discussion_html).find('.line_holder');
+    lines.addClass('fade-in');
+    $container.find('.diff-content > table > tbody').prepend(lines);
+    const fileHolder = $container.find('.file-holder');
+    $container.find('.line-holder-placeholder').remove();
+    syntaxHighlight(fileHolder);
+  }
+
+  onClickRetryLazyLoad(e) {
+    const $retryButton = $(e.currentTarget);
+
+    $retryButton.prop('disabled', true);
+
+    return this.loadLazyDiff(e).then(() => {
+      $retryButton.prop('disabled', false);
+    });
+  }
+
+  loadLazyDiff(e) {
+    const $container = $(e.currentTarget).closest('.js-toggle-container');
+    Notes.renderPlaceholderComponent($container);
+
+    $container.find('.js-toggle-lazy-diff').removeClass('js-toggle-lazy-diff');
+
+    const $tableEl = $container.find('tbody');
+    if ($tableEl.length === 0) return;
+
+    const fileHolder = $container.find('.file-holder');
+    const url = fileHolder.data('linesPath');
+
+    const $errorContainer = $container.find('.js-error-lazy-load-diff');
+    const $successContainer = $container.find('.js-success-lazy-load');
+
+    /**
+     * We only fetch resolved discussions.
+     * Unresolved discussions don't have an endpoint being provided.
+     */
+    if (url) {
+      return axios
+        .get(url)
+        .then(({ data }) => {
+          // Reset state in case last request returned error
+          $successContainer.removeClass('hidden');
+          $errorContainer.addClass('hidden');
+
+          Notes.renderDiffContent($container, data);
+        })
+        .catch(() => {
+          $successContainer.addClass('hidden');
+          $errorContainer.removeClass('hidden');
+        });
+    }
+    return Promise.resolve();
+  }
+
+  toggleCommitList(e) {
+    const $element = $(e.currentTarget);
+    const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
+    const $svgChevronUpElement = $element.find('svg.js-chevron-up');
+    const $svgChevronDownElement = $element.find('svg.js-chevron-down');
+
+    $svgChevronUpElement.toggleClass('gl-display-none');
+    $svgChevronDownElement.toggleClass('gl-display-none');
+
+    $closestSystemCommitList.toggleClass('hide-shade');
+  }
+
+  /**
+   * Scans system notes with `ul` elements in system note body
+   * then collapse long commit list pushed by user to make it less
+   * intrusive.
+   */
+  collapseLongCommitList() {
+    const systemNotes = $('#notes-list').find('li.system-note').has('ul');
+
+    $.each(systemNotes, (index, systemNote) => {
+      const $systemNote = $(systemNote);
+      const headerMessage = $systemNote
+        .find('.note-text')
+        .find('p')
+        .first()
+        .text()
+        .replace(':', '');
+
+      $systemNote.find('.note-header .system-note-message').html(headerMessage);
+
+      if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
+        $systemNote.find('.note-text').addClass('system-note-commit-list');
+        $systemNote.find('.system-note-commit-list-toggler').show();
+      } else {
+        $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
+      }
+    });
+  }
+
+  addFlash(...flashParams) {
+    this.flashContainer = createFlash(...flashParams);
+  }
+
+  clearFlash() {
+    if (this.flashContainer) {
+      this.flashContainer.style.display = 'none';
+      this.flashContainer = null;
+    }
+  }
+
+  cleanForm($form) {
+    // Remove JS classes that are not needed here
+    $form.find('.js-comment-type-dropdown').removeClass('btn-group');
+
+    // Remove dropdown
+    $form.find('.dropdown-menu').remove();
+
+    return $form;
+  }
+
+  /**
+   * Check if note does not exist on page
+   */
+  static isNewNote(noteEntity, noteIds) {
+    return $.inArray(noteEntity.id, noteIds) === -1;
+  }
+
+  /**
+   * Check if $note already contains the `noteEntity` content
+   */
+  static isUpdatedNote(noteEntity, $note) {
+    // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+    const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
+    const currentNoteText = normalizeNewlines(
+      $note.find('.original-note-content').first().text().trim(),
+    );
+    return sanitizedNoteEntityText !== currentNoteText;
+  }
+
+  static checkMergeRequestStatus() {
+    if (getPagePath(1) === 'merge_requests' && gl.mrWidget) {
+      gl.mrWidget.checkStatus();
+    }
+  }
+
+  static animateAppendNote(noteHtml, $notesList) {
+    const $note = $(noteHtml);
+
+    $note.addClass('fade-in-full').renderGFM();
+    $notesList.append($note);
+    return $note;
+  }
+
+  static animateUpdateNote(noteHtml, $note) {
+    const $updatedNote = $(noteHtml);
+
+    $updatedNote.addClass('fade-in').renderGFM();
+    $note.replaceWith($updatedNote);
+    return $updatedNote;
+  }
+
+  /**
+   * Get data from Form attributes to use for saving/submitting comment.
+   */
+  getFormData($form) {
+    const content = $form.find('.js-note-text').val();
+    return {
+      // eslint-disable-next-line no-jquery/no-serialize
+      formData: $form.serialize(),
+      formContent: escape(content),
+      formAction: $form.attr('action'),
+      formContentOriginal: content,
+    };
+  }
+
+  /**
+   * Identify if comment has any quick actions
+   */
+  hasQuickActions(formContent) {
+    return REGEX_QUICK_ACTIONS.test(formContent);
+  }
+
+  /**
+   * Remove quick actions and leave comment with pure message
+   */
+  stripQuickActions(formContent) {
+    return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
+  }
+
+  /**
+   * Gets appropriate description from quick actions found in provided `formContent`
+   */
+  getQuickActionDescription(formContent, availableQuickActions = []) {
+    let tempFormContent;
+
+    // Identify executed quick actions from `formContent`
+    const executedCommands = availableQuickActions.filter((command) => {
+      const commandRegex = new RegExp(`/${command.name}`);
+      return commandRegex.test(formContent);
+    });
+
+    if (executedCommands && executedCommands.length) {
+      if (executedCommands.length > 1) {
+        tempFormContent = __('Applying multiple commands');
+      } else {
+        const commandDescription = executedCommands[0].description.toLowerCase();
+        tempFormContent = sprintf(__('Applying command to %{commandDescription}'), {
+          commandDescription,
+        });
+      }
+    } else {
+      tempFormContent = __('Applying command');
+    }
+
+    return tempFormContent;
+  }
+
+  /**
+   * Create placeholder note DOM element populated with comment body
+   * that we will show while comment is being posted.
+   * Once comment is _actually_ posted on server, we will have final element
+   * in response that we will show in place of this temporary element.
+   */
+  createPlaceholderNote({
+    formContent,
+    uniqueId,
+    isDiscussionNote,
+    currentUsername,
+    currentUserFullname,
+    currentUserAvatar,
+  }) {
+    const discussionClass = isDiscussionNote ? 'discussion' : '';
+    const $tempNote = $(
+      `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
+         <div class="timeline-entry-inner">
+            <div class="timeline-icon">
+               <a href="/${escape(currentUsername)}">
+                 <img class="avatar s40" src="${currentUserAvatar}" />
+               </a>
+            </div>
+            <div class="timeline-content ${discussionClass}">
+               <div class="note-header">
+                  <div class="note-header-info">
+                     <a href="/${escape(currentUsername)}">
+                       <span class="d-none d-sm-inline-block bold">${escape(currentUsername)}</span>
+                       <span class="note-headline-light">${escape(currentUsername)}</span>
+                     </a>
+                  </div>
+               </div>
+               <div class="note-body">
+                 <div class="note-text">
+                   <p>${formContent}</p>
+                 </div>
+               </div>
+            </div>
+         </div>
+      </li>`,
+    );
+
+    $tempNote.find('.d-none.d-sm-inline-block').text(escape(currentUserFullname));
+    $tempNote.find('.note-headline-light').text(`@${escape(currentUsername)}`);
+
+    return $tempNote;
+  }
+
+  /**
+   * Create Placeholder System Note DOM element populated with quick action description
+   */
+  createPlaceholderSystemNote({ formContent, uniqueId }) {
+    const $tempNote = $(
+      `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
+         <div class="timeline-entry-inner">
+           <div class="timeline-content">
+             <i>${formContent}</i>
+           </div>
+         </div>
+       </li>`,
+    );
+
+    return $tempNote;
+  }
+
+  /**
+   * This method does following tasks step-by-step whenever a new comment
+   * is submitted by user (both main thread comments as well as discussion comments).
+   *
+   * 1) Get Form metadata
+   * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
+   * 3) Build temporary placeholder element (using `createPlaceholderNote`)
+   * 4) Show placeholder note on UI
+   * 5) Perform network request to submit the note using `axios.post`
+   *    a) If request is successfully completed
+   *        1. Remove placeholder element
+   *        2. Show submitted Note element
+   *        3. Perform post-submit errands
+   *           a. Mark discussion as resolved if comment submission was for resolve.
+   *           b. Reset comment form to original state.
+   *    b) If request failed
+   *        1. Remove placeholder element
+   *        2. Show error Flash message about failure
+   */
+  postComment(e) {
+    e.preventDefault();
+
+    // Get Form metadata
+    const $submitBtn = $(e.target);
+    $submitBtn.prop('disabled', true);
+    let $form = $submitBtn.parents('form');
+    const $closeBtn = $form.find('.js-note-target-close');
+    const isDiscussionNote =
+      $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
+    const isMainForm = $form.hasClass('js-main-target-form');
+    const isDiscussionForm = $form.hasClass('js-discussion-note-form');
+    const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
+    const { formData, formContent, formAction, formContentOriginal } = this.getFormData($form);
+    let noteUniqueId;
+    let systemNoteUniqueId;
+    let hasQuickActions = false;
+    let $notesContainer;
+    let tempFormContent;
+
+    // Get reference to notes container based on type of comment
+    if (isDiscussionForm) {
+      $notesContainer = $form.parent('.discussion-notes').find('.notes');
+    } else if (isMainForm) {
+      $notesContainer = $('ul.main-notes-list');
+    }
+
+    // If comment is to resolve discussion, disable submit buttons while
+    // comment posting is finished.
+    if (isDiscussionResolve) {
+      $form.find('.js-comment-submit-button').disable();
+    }
+
+    tempFormContent = formContent;
+    if (this.glForm.supportsQuickActions && this.hasQuickActions(formContent)) {
+      tempFormContent = this.stripQuickActions(formContent);
+      hasQuickActions = true;
+    }
+
+    // Show placeholder note
+    if (tempFormContent) {
+      noteUniqueId = uniqueId('tempNote_');
+      $notesContainer.append(
+        this.createPlaceholderNote({
+          formContent: tempFormContent,
+          uniqueId: noteUniqueId,
+          isDiscussionNote,
+          currentUsername: gon.current_username,
+          currentUserFullname: gon.current_user_fullname,
+          currentUserAvatar: gon.current_user_avatar_url,
+        }),
+      );
+    }
+
+    // Show placeholder system note
+    if (hasQuickActions) {
+      systemNoteUniqueId = uniqueId('tempSystemNote_');
+      $notesContainer.append(
+        this.createPlaceholderSystemNote({
+          formContent: this.getQuickActionDescription(
+            formContent,
+            AjaxCache.get(gl.GfmAutoComplete.dataSources.commands),
+          ),
+          uniqueId: systemNoteUniqueId,
+        }),
+      );
+    }
+
+    // Clear the form textarea
+    if ($notesContainer.length) {
+      if (isMainForm) {
+        this.resetMainTargetForm(e);
+      } else if (isDiscussionForm) {
+        this.removeDiscussionNoteForm($form);
+      }
+    }
+
+    $closeBtn.text($closeBtn.data('originalText'));
+
+    // Make request to submit comment on server
+    return axios
+      .post(`${formAction}?html=true`, formData)
+      .then((res) => {
+        const note = res.data;
+
+        $submitBtn.prop('disabled', false);
+        // Submission successful! remove placeholder
+        $notesContainer.find(`#${noteUniqueId}`).remove();
+
+        const $diffFile = $form.closest('.diff-file');
+        if ($diffFile.length > 0) {
+          const blurEvent = new CustomEvent('blur.imageDiff', {
+            detail: e,
+          });
+
+          $diffFile[0].dispatchEvent(blurEvent);
+        }
+
+        // Reset cached commands list when command is applied
+        if (hasQuickActions) {
+          $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
+        }
+
+        // Clear previous form errors
+        this.clearFlashWrapper();
+
+        // Check if this was discussion comment
+        if (isDiscussionForm) {
+          // Remove flash-container
+          $notesContainer.find('.flash-container').remove();
+
+          // If comment intends to resolve discussion, do the same.
+          if (isDiscussionResolve) {
+            $form
+              .attr('data-discussion-id', $submitBtn.data('discussionId'))
+              .attr('data-resolve-all', 'true')
+              .attr('data-project-path', $submitBtn.data('projectPath'));
+          }
+
+          // Show final note element on UI
+          const isNewDiffComment = $notesContainer.length === 0;
+          this.addDiscussionNote($form, note, isNewDiffComment);
+
+          if (isNewDiffComment) {
+            // Add image badge, avatar badge and toggle discussion badge for new image diffs
+            const notePosition = $form.find('#note_position').val();
+            if ($diffFile.length > 0 && notePosition.length > 0) {
+              const { x, y, width, height } = JSON.parse(notePosition);
+              const addBadgeEvent = new CustomEvent('addBadge.imageDiff', {
+                detail: {
+                  x,
+                  y,
+                  width,
+                  height,
+                  noteId: `note_${note.id}`,
+                  discussionId: note.discussion_id,
+                },
+              });
+
+              $diffFile[0].dispatchEvent(addBadgeEvent);
+            }
+          }
+
+          // append flash-container to the Notes list
+          if ($notesContainer.length) {
+            $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
+          }
+        } else if (isMainForm) {
+          // Check if this was main thread comment
+          // Show final note element on UI and perform form and action buttons cleanup
+          this.addNote($form, note);
+          this.reenableTargetFormSubmitButton(e);
+        }
+
+        if (note.commands_changes) {
+          this.handleQuickActions(note);
+        }
+
+        $form.trigger('ajax:success', [note]);
+      })
+      .catch(() => {
+        // Submission failed, remove placeholder note and show Flash error message
+        $notesContainer.find(`#${noteUniqueId}`).remove();
+        $submitBtn.prop('disabled', false);
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        const closestDiffFile = $form.closest('.diff-file');
+
+        if (closestDiffFile.length) {
+          closestDiffFile[0].dispatchEvent(blurEvent);
+        }
+
+        if (hasQuickActions) {
+          $notesContainer.find(`#${systemNoteUniqueId}`).remove();
+        }
+
+        // Show form again on UI on failure
+        if (isDiscussionForm && $notesContainer.length) {
+          const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
+          this.replyToDiscussionNote(replyButton[0]);
+          $form = $notesContainer.parent().find('form');
+        }
+
+        $form.find('.js-note-text').val(formContentOriginal);
+        this.reenableTargetFormSubmitButton(e);
+        this.addNoteError($form);
+      });
+  }
+
+  /**
+   * This method does following tasks step-by-step whenever an existing comment
+   * is updated by user (both main thread comments as well as discussion comments).
+   *
+   * 1) Get Form metadata
+   * 2) Update note element with new content
+   * 3) Perform network request to submit the updated note using `axios.post`
+   *    a) If request is successfully completed
+   *        1. Show submitted Note element
+   *    b) If request failed
+   *        1. Revert Note element to original content
+   *        2. Show error Flash message about failure
+   */
+  updateComment(e) {
+    e.preventDefault();
+
+    // Get Form metadata
+    const $submitBtn = $(e.target);
+    const $form = $submitBtn.parents('form');
+    const $closeBtn = $form.find('.js-note-target-close');
+    const $editingNote = $form.parents('.note.is-editing');
+    const $noteBody = $editingNote.find('.js-task-list-container');
+    const $noteBodyText = $noteBody.find('.note-text');
+    const { formData, formContent, formAction } = this.getFormData($form);
+
+    // Cache original comment content
+    const cachedNoteBodyText = $noteBodyText.html();
+
+    // Show updated comment content temporarily
+    $noteBodyText.html(formContent);
+    $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
+    $editingNote
+      .find('.note-headline-meta a')
+      .html('<span class="spinner align-text-bottom"></span>');
+
+    // Make request to update comment on server
+    axios
+      .post(`${formAction}?html=true`, formData)
+      .then(({ data }) => {
+        // Submission successful! render final note element
+        this.updateNote(data, $editingNote);
+      })
+      .catch(() => {
+        // Submission failed, revert back to original note
+        $noteBodyText.html(escape(cachedNoteBodyText));
+        $editingNote.removeClass('being-posted fade-in');
+        $editingNote.find('.gl-spinner').remove();
+
+        // Show Flash message about failure
+        this.updateNoteError();
+      });
+
+    return $closeBtn.text($closeBtn.data('originalText'));
+  }
+}
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
index 336ce714a05..818299e36bd 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -123,7 +123,7 @@ export default {
         category="primary"
         variant="confirm"
         type="submit"
-        data-track-event="click_button"
+        data-track-action="click_button"
         data-qa-selector="save_comment_button"
         @click="$emit('submit-form')"
       >
diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue
index c9273f97bed..af3d4453a6a 100644
--- a/app/assets/javascripts/design_management/components/design_scaler.vue
+++ b/app/assets/javascripts/design_management/components/design_scaler.vue
@@ -1,16 +1,21 @@
 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
-const SCALE_STEP_SIZE = 0.2;
 const DEFAULT_SCALE = 1;
 const MIN_SCALE = 1;
-const MAX_SCALE = 2;
+const ZOOM_LEVELS = 5;
 
 export default {
   components: {
     GlButtonGroup,
     GlButton,
   },
+  props: {
+    maxScale: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       scale: DEFAULT_SCALE,
@@ -24,7 +29,10 @@ export default {
       return this.scale === DEFAULT_SCALE;
     },
     disableIncrease() {
-      return this.scale >= MAX_SCALE;
+      return this.scale >= this.maxScale;
+    },
+    stepSize() {
+      return (this.maxScale - MIN_SCALE) / ZOOM_LEVELS;
     },
   },
   methods: {
@@ -37,10 +45,10 @@ export default {
       this.$emit('scale', this.scale);
     },
     incrementScale() {
-      this.setScale(this.scale + SCALE_STEP_SIZE);
+      this.setScale(Math.min(this.scale + this.stepSize, this.maxScale));
     },
     decrementScale() {
-      this.setScale(this.scale - SCALE_STEP_SIZE);
+      this.setScale(Math.max(this.scale - this.stepSize, MIN_SCALE));
     },
     resetScale() {
       this.setScale(DEFAULT_SCALE);
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index efa1ef2107a..ced76eb4843 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -202,7 +202,7 @@ export default {
           data-testid="resolved-discussion"
           @error="$emit('onDesignDiscussionError', $event)"
           @updateNoteError="$emit('updateNoteError', $event)"
-          @openForm="updateDiscussionWithOpenForm"
+          @open-form="updateDiscussionWithOpenForm"
           @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
         />
       </gl-collapse>
diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue
index 8ab94cd2c4b..5354c7756f5 100644
--- a/app/assets/javascripts/design_management/components/image.vue
+++ b/app/assets/javascripts/design_management/components/image.vue
@@ -57,6 +57,7 @@ export default {
   methods: {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
+      requestIdleCallback(this.setImageNaturalScale, { timeout: 1000 });
       performanceMarkAndMeasure({
         measures: [
           {
@@ -79,6 +80,27 @@ export default {
       };
       this.onResize({ width: this.baseImageSize.width, height: this.baseImageSize.height });
     },
+    setImageNaturalScale() {
+      const { contentImg } = this.$refs;
+
+      if (!contentImg) {
+        return;
+      }
+
+      const { naturalHeight, naturalWidth } = contentImg;
+
+      // In case image 404s
+      if (naturalHeight === 0 || naturalWidth === 0) {
+        return;
+      }
+
+      const { height, width } = this.baseImageSize;
+
+      this.$parent.$emit(
+        'setMaxScale',
+        Math.round(((height + width) / (naturalHeight + naturalWidth)) * 100) / 100,
+      );
+    },
     onResize({ width, height }) {
       this.$emit('resize', { width, height });
     },
diff --git a/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql b/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql
index 7eb40b12f51..b715633a9f2 100644
--- a/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql
+++ b/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql
@@ -1,4 +1,11 @@
 fragment VersionListItem on DesignVersion {
   id
   sha
+  createdAt
+  author {
+    __typename
+    id
+    name
+    avatarUrl
+  }
 }
diff --git a/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql b/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql
index 84aeb374351..111f5ac18a7 100644
--- a/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql
+++ b/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql
@@ -1,13 +1,15 @@
 #import "../fragments/design.fragment.graphql"
+#import "../fragments/version.fragment.graphql"
 
 mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
   designManagementUpload(input: { projectPath: $projectPath, iid: $iid, files: $files }) {
     designs {
       ...DesignItem
       versions {
+        __typename
         nodes {
-          id
-          sha
+          __typename
+          ...VersionListItem
         }
       }
     }
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 48ee7068809..38ea5406c02 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -46,6 +46,7 @@ import {
 import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking';
 
 const DEFAULT_SCALE = 1;
+const DEFAULT_MAX_SCALE = 2;
 
 export default {
   components: {
@@ -96,6 +97,7 @@ export default {
       scale: DEFAULT_SCALE,
       resolvedDiscussionsExpanded: false,
       prevCurrentUserTodos: null,
+      maxScale: DEFAULT_MAX_SCALE,
     };
   },
   apollo: {
@@ -309,9 +311,7 @@ export default {
         this.isLatestVersion,
       );
 
-      if (this.glFeatures.usageDataDesignAction) {
-        servicePingDesignDetailView();
-      }
+      servicePingDesignDetailView();
     },
     updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
       this.$apollo.mutate({
@@ -330,6 +330,9 @@ export default {
     toggleResolvedComments() {
       this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
     },
+    setMaxScale(event) {
+      this.maxScale = 1 / event;
+    },
   },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
@@ -378,12 +381,13 @@ export default {
           @openCommentForm="openCommentForm"
           @closeCommentForm="closeCommentForm"
           @moveNote="onMoveNote"
+          @setMaxScale="setMaxScale"
         />
 
         <div
           class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
         >
-          <design-scaler @scale="scale = $event" />
+          <design-scaler :max-scale="maxScale" @scale="scale = $event" />
         </div>
       </div>
       <design-sidebar
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index ad557f64ce4..e66ae822a34 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -140,6 +140,9 @@ export default {
       this.$el.scrollIntoView();
     }
   },
+  beforeDestroy() {
+    document.removeEventListener('paste', this.onDesignPaste);
+  },
   methods: {
     resetFilesToBeSaved() {
       this.filesToBeSaved = [];
diff --git a/app/assets/javascripts/design_management/utils/design_management_utils.js b/app/assets/javascripts/design_management/utils/design_management_utils.js
index 05b220801f2..7470f3d259b 100644
--- a/app/assets/javascripts/design_management/utils/design_management_utils.js
+++ b/app/assets/javascripts/design_management/utils/design_management_utils.js
@@ -85,6 +85,13 @@ export const designUploadOptimisticResponse = (files) => {
         __typename: 'DesignVersion',
         id: -uniqueId(),
         sha: -uniqueId(),
+        createdAt: '',
+        author: {
+          __typename: 'UserCore',
+          id: -uniqueId(),
+          name: '',
+          avatarUrl: '',
+        },
       },
     },
   }));
diff --git a/app/assets/javascripts/design_management/utils/error_messages.js b/app/assets/javascripts/design_management/utils/error_messages.js
index e7b2c814bb3..afee7e81791 100644
--- a/app/assets/javascripts/design_management/utils/error_messages.js
+++ b/app/assets/javascripts/design_management/utils/error_messages.js
@@ -1,3 +1,4 @@
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { __, s__, n__, sprintf } from '~/locale';
 
 export const ADD_DISCUSSION_COMMENT_ERROR = s__(
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index d03b5cbc26b..a2ea42e963c 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -1,9 +1,8 @@
 <script>
-import { GlLoadingIcon, GlPagination, GlSprintf } from '@gitlab/ui';
+import { GlLoadingIcon, GlPagination, GlSprintf, GlAlert } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Mousetrap from 'mousetrap';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
 import api from '~/api';
 import {
   keysFor,
@@ -47,7 +46,6 @@ import {
 import diffsEventHub from '../event_hub';
 import { reviewStatuses } from '../utils/file_reviews';
 import { diffsApp } from '../utils/performance';
-import { fileByFile } from '../utils/preferences';
 import { queueRedisHllEvents } from '../utils/queue_events';
 import CollapsedFilesWarning from './collapsed_files_warning.vue';
 import CommitWidget from './commit_widget.vue';
@@ -55,13 +53,18 @@ import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
 import HiddenFilesWarning from './hidden_files_warning.vue';
 import NoChanges from './no_changes.vue';
-import PreRenderer from './pre_renderer.vue';
 import TreeList from './tree_list.vue';
-import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync';
 
 export default {
   name: 'DiffsApp',
   components: {
+    DynamicScroller: () =>
+      import('vendor/vue-virtual-scroller').then(({ DynamicScroller }) => DynamicScroller),
+    DynamicScrollerItem: () =>
+      import('vendor/vue-virtual-scroller').then(({ DynamicScrollerItem }) => DynamicScrollerItem),
+    PreRenderer: () => import('./pre_renderer.vue').then((PreRenderer) => PreRenderer),
+    VirtualScrollerScrollSync: () =>
+      import('./virtual_scroller_scroll_sync').then((VSSSync) => VSSSync),
     CompareVersions,
     DiffFile,
     NoChanges,
@@ -73,11 +76,8 @@ export default {
     PanelResizer,
     GlPagination,
     GlSprintf,
-    DynamicScroller,
-    DynamicScrollerItem,
-    PreRenderer,
-    VirtualScrollerScrollSync,
     MrWidgetHowToMergeModal,
+    GlAlert,
   },
   alerts: {
     ALERT_OVERFLOW_HIDDEN,
@@ -189,25 +189,24 @@ export default {
       treeWidth,
       diffFilesLength: 0,
       virtualScrollCurrentIndex: -1,
+      subscribedToVirtualScrollingEvents: false,
     };
   },
   computed: {
-    ...mapState({
-      isLoading: (state) => state.diffs.isLoading,
-      isBatchLoading: (state) => state.diffs.isBatchLoading,
-      diffFiles: (state) => state.diffs.diffFiles,
-      diffViewType: (state) => state.diffs.diffViewType,
-      commit: (state) => state.diffs.commit,
-      renderOverflowWarning: (state) => state.diffs.renderOverflowWarning,
-      numTotalFiles: (state) => state.diffs.realSize,
-      numVisibleFiles: (state) => state.diffs.size,
-      plainDiffPath: (state) => state.diffs.plainDiffPath,
-      emailPatchPath: (state) => state.diffs.emailPatchPath,
-      retrievingBatches: (state) => state.diffs.retrievingBatches,
+    ...mapState('diffs', {
+      numTotalFiles: 'realSize',
+      numVisibleFiles: 'size',
     }),
     ...mapState('diffs', [
       'showTreeList',
       'isLoading',
+      'diffFiles',
+      'diffViewType',
+      'commit',
+      'renderOverflowWarning',
+      'plainDiffPath',
+      'emailPatchPath',
+      'retrievingBatches',
       'startVersion',
       'latestDiff',
       'currentDiffFileId',
@@ -227,8 +226,9 @@ export default {
       'isParallelView',
       'currentDiffIndex',
       'isVirtualScrollingEnabled',
+      'isBatchLoading',
+      'isBatchLoadingError',
     ]),
-    ...mapGetters('batchComments', ['draftsCount']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     diffs() {
       if (!this.viewDiffsFileByFile) {
@@ -316,6 +316,7 @@ export default {
       }
 
       this.adjustView();
+      this.subscribeToVirtualScrollingEvents();
     },
     isLoading: 'adjustView',
     renderFileTree: 'adjustView',
@@ -330,7 +331,7 @@ export default {
       projectPath: this.projectPath,
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
-      viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
+      viewDiffsFileByFile: this.fileByFileUserPreference || false,
       defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
       mrReviews: this.rehydratedMrReviews,
     });
@@ -349,11 +350,6 @@ export default {
       this.setHighlightedRow(id.split('diff-content').pop().slice(1));
     }
 
-    if (window.gon?.features?.diffsVirtualScrolling) {
-      diffsEventHub.$on('scrollToFileHash', this.scrollVirtualScrollerToFileHash);
-      diffsEventHub.$on('scrollToIndex', this.scrollVirtualScrollerToIndex);
-    }
-
     if (window.gon?.features?.diffSettingsUsageData) {
       const events = [];
 
@@ -383,6 +379,8 @@ export default {
 
       queueRedisHllEvents(events);
     }
+
+    this.subscribeToVirtualScrollingEvents();
   },
   beforeCreate() {
     diffsApp.instrument();
@@ -611,6 +609,21 @@ export default {
         }
       }
     },
+    subscribeToVirtualScrollingEvents() {
+      if (
+        window.gon?.features?.diffsVirtualScrolling &&
+        this.shouldShow &&
+        !this.subscribedToVirtualScrollingEvents
+      ) {
+        diffsEventHub.$on('scrollToFileHash', this.scrollVirtualScrollerToFileHash);
+        diffsEventHub.$on('scrollToIndex', this.scrollVirtualScrollerToIndex);
+
+        this.subscribedToVirtualScrollingEvents = true;
+      }
+    },
+    reloadPage() {
+      window.location.reload();
+    },
   },
   minTreeWidth: MIN_TREE_WIDTH,
   maxTreeWidth: MAX_TREE_WIDTH,
@@ -629,17 +642,19 @@ export default {
         :diff-files-count-text="numTotalFiles"
       />
 
-      <hidden-files-warning
-        v-if="visibleWarning == $options.alerts.ALERT_OVERFLOW_HIDDEN"
-        :visible="numVisibleFiles"
-        :total="numTotalFiles"
-        :plain-diff-path="plainDiffPath"
-        :email-patch-path="emailPatchPath"
-      />
-      <collapsed-files-warning
-        v-if="visibleWarning == $options.alerts.ALERT_COLLAPSED_FILES"
-        :limited="isLimitedContainer"
-      />
+      <template v-if="!isBatchLoadingError">
+        <hidden-files-warning
+          v-if="visibleWarning == $options.alerts.ALERT_OVERFLOW_HIDDEN"
+          :visible="numVisibleFiles"
+          :total="numTotalFiles"
+          :plain-diff-path="plainDiffPath"
+          :email-patch-path="emailPatchPath"
+        />
+        <collapsed-files-warning
+          v-if="visibleWarning == $options.alerts.ALERT_COLLAPSED_FILES"
+          :limited="isLimitedContainer"
+        />
+      </template>
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"
@@ -648,7 +663,6 @@ export default {
         <div
           v-if="renderFileTree"
           :style="{ width: `${treeWidth}px` }"
-          :class="{ 'review-bar-visible': draftsCount > 0 }"
           class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
           <panel-resizer
@@ -668,11 +682,21 @@ export default {
           }"
         >
           <commit-widget v-if="commit" :commit="commit" :collapsible="false" />
-          <div v-if="isBatchLoading" class="loading"><gl-loading-icon size="lg" /></div>
+          <gl-alert
+            v-if="isBatchLoadingError"
+            variant="danger"
+            :dismissible="false"
+            :primary-button-text="__('Reload page')"
+            @primaryAction="reloadPage"
+          >
+            {{ __("Error: Couldn't load some or all of the changes.") }}
+          </gl-alert>
+          <div v-if="isBatchLoading && !isBatchLoadingError" class="loading">
+            <gl-loading-icon size="lg" />
+          </div>
           <template v-else-if="renderDiffFiles">
             <dynamic-scroller
               v-if="isVirtualScrollingEnabled"
-              ref="virtualScroller"
               :items="diffs"
               :min-item-size="70"
               :buffer="1000"
@@ -745,7 +769,10 @@ export default {
             </div>
             <gl-loading-icon v-else-if="retrievingBatches" size="lg" />
           </template>
-          <no-changes v-else :changes-empty-state-illustration="changesEmptyStateIllustration" />
+          <no-changes
+            v-else-if="!isBatchLoadingError"
+            :changes-empty-state-illustration="changesEmptyStateIllustration"
+          />
         </div>
       </div>
       <mr-widget-how-to-merge-modal
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 820c64a9502..4435a533591 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
@@ -100,7 +99,10 @@ export default {
       <div
         class="commit-actions flex-row d-none d-sm-flex align-items-start flex-wrap justify-content-end"
       >
-        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
+        <div
+          v-if="commit.signature_html"
+          v-html="commit.signature_html /* eslint-disable-line vue/no-v-html */"
+        ></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"
@@ -142,7 +144,7 @@ export default {
             <a
               :href="commit.commit_url"
               class="commit-row-message item-title"
-              v-html="commit.title_html"
+              v-html="commit.title_html /* eslint-disable-line vue/no-v-html */"
             ></a>
 
             <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
@@ -174,7 +176,7 @@ export default {
         v-if="commit.description_html"
         :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
         class="commit-row-description gl-mb-3 gl-text-body"
-        v-html="commitDescription"
+        v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
       ></pre>
     </div>
   </li>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 933891d698c..d09cc064b2c 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -170,10 +170,7 @@ export default {
       return !this.isCollapsed && !this.isFileTooLarge;
     },
     showLocalFileReviews() {
-      const loggedIn = Boolean(gon.current_user_id);
-      const featureOn = this.glFeatures.localFileReviews;
-
-      return loggedIn && featureOn;
+      return Boolean(gon.current_user_id);
     },
     codequalityDiffForFile() {
       return this.codequalityDiff?.files?.[this.file.file_path] || [];
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 667b8745f7b..4bcb99424db 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -341,7 +341,7 @@ export default {
         :gfm="gfmCopyText"
         data-testid="diff-file-copy-clipboard"
         category="tertiary"
-        data-track-event="click_copy_file_button"
+        data-track-action="click_copy_file_button"
         data-track-label="diff_copy_file_path_button"
         data-track-property="diff_copy_file"
       />
@@ -382,7 +382,7 @@ export default {
           :title="externalUrlLabel"
           :aria-label="externalUrlLabel"
           target="_blank"
-          data-track-event="click_toggle_external_button"
+          data-track-action="click_toggle_external_button"
           data-track-label="diff_toggle_external_button"
           data-track-property="diff_toggle_external"
           icon="external-link"
diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index db3ad074d2f..737c4d8f33c 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { memoize } from 'lodash';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import {
@@ -268,7 +267,7 @@ export default {
           ]"
           class="diff-td line_content with-coverage left-side"
           data-testid="left-content"
-          v-html="$options.lineContent(props.line.left)"
+          v-html="$options.lineContent(props.line.left) /* eslint-disable-line vue/no-v-html */"
         ></div>
       </template>
       <template
@@ -390,7 +389,7 @@ export default {
             },
           ]"
           class="diff-td line_content with-coverage right-side parallel"
-          v-html="$options.lineContent(props.line.right)"
+          v-html="$options.lineContent(props.line.right) /* eslint-disable-line vue/no-v-html */"
         ></div>
       </template>
       <template v-else>
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index 5cf242b4ddd..64ded1ca8ca 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -133,7 +133,10 @@ export default {
 
 <template>
   <div
-    :class="[$options.userColorScheme, { inline, 'with-codequality': hasCodequalityChanges }]"
+    :class="[
+      $options.userColorScheme,
+      { 'inline-diff-view': inline, 'with-codequality': hasCodequalityChanges },
+    ]"
     :data-commit-id="commitId"
     class="diff-grid diff-table code diff-wrap-lines js-syntax-highlight text-file"
     @mousedown="handleParallelLineMouseDown"
diff --git a/app/assets/javascripts/diffs/components/pre_renderer.vue b/app/assets/javascripts/diffs/components/pre_renderer.vue
index c357aa2d924..e4320c40d2c 100644
--- a/app/assets/javascripts/diffs/components/pre_renderer.vue
+++ b/app/assets/javascripts/diffs/components/pre_renderer.vue
@@ -17,7 +17,6 @@ export default {
   },
   mounted() {
     this.width = this.$el.parentNode.offsetWidth;
-    window.test = this;
 
     this.$_itemsWithSizeWatcher = this.$watch('vscrollParent.itemsWithSize', async () => {
       await this.$nextTick();
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 8dda5eadb16..93961b07e2e 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -72,11 +72,6 @@ export const ALERT_COLLAPSED_FILES = 'collapsed';
 export const DIFF_FILE_AUTOMATIC_COLLAPSE = 'automatic';
 export const DIFF_FILE_MANUAL_COLLAPSE = 'manual';
 
-// Diff view single file mode
-export const DIFF_FILE_BY_FILE_COOKIE_NAME = 'fileViewMode';
-export const DIFF_VIEW_FILE_BY_FILE = 'single';
-export const DIFF_VIEW_ALL_FILES = 'all';
-
 // State machine states
 export const STATE_IDLING = 'idle';
 export const STATE_LOADING = 'loading';
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index bddc28c4758..1b1ab59b2b4 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -3,7 +3,6 @@ import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import eventHub from '../notes/event_hub';
 import diffsApp from './components/app.vue';
 
@@ -12,51 +11,7 @@ import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
 export default function initDiffsApp(store) {
-  const fileFinderEl = document.getElementById('js-diff-file-finder');
-
-  if (fileFinderEl) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: fileFinderEl,
-      store,
-      computed: {
-        ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
-        ...mapGetters('diffs', ['flatBlobsList']),
-      },
-      watch: {
-        fileFinderVisible(newVal, oldVal) {
-          if (newVal && !oldVal && !this.flatBlobsList.length) {
-            eventHub.$emit('fetchDiffData');
-          }
-        },
-      },
-      methods: {
-        ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
-        openFile(file) {
-          window.mrTabs.tabShown('diffs');
-          this.scrollToFile(file.path);
-        },
-      },
-      render(createElement) {
-        return createElement(FindFile, {
-          props: {
-            files: this.flatBlobsList,
-            visible: this.fileFinderVisible,
-            loading: this.isLoading,
-            showDiffStats: true,
-            clearSearchOnClose: false,
-          },
-          on: {
-            toggle: this.toggleFileFinder,
-            click: this.openFile,
-          },
-          class: ['diff-file-finder'],
-        });
-      },
-    });
-  }
-
-  return new Vue({
+  const vm = new Vue({
     el: '#js-diffs-app',
     name: 'MergeRequestDiffs',
     components: {
@@ -157,4 +112,53 @@ export default function initDiffsApp(store) {
       });
     },
   });
+
+  const fileFinderEl = document.getElementById('js-diff-file-finder');
+
+  if (fileFinderEl) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: fileFinderEl,
+      store,
+      components: {
+        FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
+      },
+      computed: {
+        ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
+        ...mapGetters('diffs', ['flatBlobsList']),
+      },
+      watch: {
+        fileFinderVisible(newVal, oldVal) {
+          if (newVal && !oldVal && !this.flatBlobsList.length) {
+            eventHub.$emit('fetchDiffData');
+          }
+        },
+      },
+      methods: {
+        ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
+        openFile(file) {
+          window.mrTabs.tabShown('diffs');
+          this.scrollToFile(file.path);
+        },
+      },
+      render(createElement) {
+        return createElement('find-file', {
+          props: {
+            files: this.flatBlobsList,
+            visible: this.fileFinderVisible,
+            loading: this.isLoading,
+            showDiffStats: true,
+            clearSearchOnClose: false,
+          },
+          on: {
+            toggle: this.toggleFileFinder,
+            click: this.openFile,
+          },
+          class: ['diff-file-finder'],
+        });
+      },
+    });
+  }
+
+  return vm;
 }
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index f7bdbe94bac..5c94c6b803b 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -29,9 +29,6 @@ import {
   EVT_PERF_MARK_FILE_TREE_START,
   EVT_PERF_MARK_FILE_TREE_END,
   EVT_PERF_MARK_DIFF_FILES_START,
-  DIFF_VIEW_FILE_BY_FILE,
-  DIFF_VIEW_ALL_FILES,
-  DIFF_FILE_BY_FILE_COOKIE_NAME,
   TRACKING_CLICK_DIFF_VIEW_SETTING,
   TRACKING_DIFF_VIEW_INLINE,
   TRACKING_DIFF_VIEW_PARALLEL,
@@ -104,7 +101,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
   let totalLoaded = 0;
   let scrolledVirtualScroller = false;
 
-  commit(types.SET_BATCH_LOADING, true);
+  commit(types.SET_BATCH_LOADING_STATE, 'loading');
   commit(types.SET_RETRIEVING_BATCHES, true);
   eventHub.$emit(EVT_PERF_MARK_DIFF_FILES_START);
 
@@ -115,7 +112,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         totalLoaded += diff_files.length;
 
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
-        commit(types.SET_BATCH_LOADING, false);
+        commit(types.SET_BATCH_LOADING_STATE, 'loaded');
 
         if (window.gon?.features?.diffsVirtualScrolling && !scrolledVirtualScroller) {
           const index = state.diffFiles.findIndex(
@@ -130,7 +127,7 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         }
 
         if (!isNoteLink && !state.currentDiffFileId) {
-          commit(types.VIEW_DIFF_FILE, diff_files[0].file_hash);
+          commit(types.VIEW_DIFF_FILE, diff_files[0]?.file_hash);
         }
 
         if (isNoteLink) {
@@ -182,11 +179,14 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
 
         return null;
       })
-      .catch(() => commit(types.SET_RETRIEVING_BATCHES, false));
+      .catch(() => {
+        commit(types.SET_RETRIEVING_BATCHES, false);
+        commit(types.SET_BATCH_LOADING_STATE, 'error');
+      });
 
-  return getBatch()
-    .then(() => !window.gon?.features?.diffsVirtualScrolling && handleLocationHash())
-    .catch(() => null);
+  return getBatch().then(
+    () => !window.gon?.features?.diffsVirtualScrolling && handleLocationHash(),
+  );
 };
 
 export const fetchDiffFilesMeta = ({ commit, state }) => {
@@ -816,9 +816,7 @@ export const navigateToDiffFileIndex = ({ commit, state }, index) => {
 };
 
 export const setFileByFile = ({ state, commit }, { fileByFile }) => {
-  const fileViewMode = fileByFile ? DIFF_VIEW_FILE_BY_FILE : DIFF_VIEW_ALL_FILES;
   commit(types.SET_FILE_BY_FILE, fileByFile);
-  Cookies.set(DIFF_FILE_BY_FILE_COOKIE_NAME, fileViewMode);
 
   if (window.gon?.features?.diffSettingsUsageData) {
     const events = [TRACKING_CLICK_SINGLE_FILE_SETTING];
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index 18bd8e5f1d8..ca85be5d829 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -191,3 +191,6 @@ export const isVirtualScrollingEnabled = (state) => {
       getParameterValues('virtual_scrolling')[0] === 'true')
   );
 };
+
+export const isBatchLoading = (state) => state.batchLoadingState === 'loading';
+export const isBatchLoadingError = (state) => state.batchLoadingState === 'error';
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index d76361513d4..a5b1a577a78 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -2,8 +2,6 @@ import Cookies from 'js-cookie';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME } from '../../constants';
 
-import { fileByFile } from '../../utils/preferences';
-
 const getViewTypeFromQueryString = () => getParameterValues('view')[0];
 
 const viewTypeFromCookie = Cookies.get(DIFF_VIEW_COOKIE_NAME);
@@ -12,7 +10,7 @@ const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 export default () => ({
   isLoading: true,
   isTreeLoaded: false,
-  isBatchLoading: false,
+  batchLoadingState: null,
   retrievingBatches: false,
   addedLines: null,
   removedLines: null,
@@ -36,7 +34,7 @@ export default () => ({
   highlightedRow: null,
   renderTreeList: true,
   showWhitespace: true,
-  viewDiffsFileByFile: fileByFile(),
+  viewDiffsFileByFile: false,
   fileFinderVisible: false,
   dismissEndpoint: '',
   showSuggestPopover: true,
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 2c370221f40..60836f747f5 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -1,6 +1,6 @@
 export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
 export const SET_LOADING = 'SET_LOADING';
-export const SET_BATCH_LOADING = 'SET_BATCH_LOADING';
+export const SET_BATCH_LOADING_STATE = 'SET_BATCH_LOADING_STATE';
 export const SET_RETRIEVING_BATCHES = 'SET_RETRIEVING_BATCHES';
 
 export const SET_DIFF_METADATA = 'SET_DIFF_METADATA';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 1aa83453bf7..6bc927b9d1f 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -60,8 +60,8 @@ export default {
     Object.assign(state, { isLoading });
   },
 
-  [types.SET_BATCH_LOADING](state, isBatchLoading) {
-    Object.assign(state, { isBatchLoading });
+  [types.SET_BATCH_LOADING_STATE](state, batchLoadingState) {
+    Object.assign(state, { batchLoadingState });
   },
 
   [types.SET_RETRIEVING_BATCHES](state, retrievingBatches) {
diff --git a/app/assets/javascripts/diffs/utils/preferences.js b/app/assets/javascripts/diffs/utils/preferences.js
deleted file mode 100644
index 6b4aaf45937..00000000000
--- a/app/assets/javascripts/diffs/utils/preferences.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Cookies from 'js-cookie';
-import { DIFF_FILE_BY_FILE_COOKIE_NAME, DIFF_VIEW_FILE_BY_FILE } from '../constants';
-
-export function fileByFile(pref = false) {
-  const cookie = Cookies.get(DIFF_FILE_BY_FILE_COOKIE_NAME);
-
-  // use the cookie first, if it exists
-  if (cookie) {
-    return cookie === DIFF_VIEW_FILE_BY_FILE;
-  }
-
-  return pref;
-}
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 337f7ae2757..f98f63529fc 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -4,6 +4,7 @@ import { escape } from 'lodash';
 import './behaviors/preview_markdown';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import { getFilename } from '~/lib/utils/file_upload';
+import { truncate } from '~/lib/utils/text_utility';
 import { n__, __ } from '~/locale';
 import PasteMarkdownTable from './behaviors/markdown/paste_markdown_table';
 import axios from './lib/utils/axios_utils';
@@ -189,10 +190,13 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
 
         if (image) {
           event.preventDefault();
+          const MAX_FILE_NAME_LENGTH = 246;
           const filename = getFilename(pasteEvent) || 'image.png';
-          const text = `{{${filename}}}`;
+          const truncateFilename = truncate(filename, MAX_FILE_NAME_LENGTH);
+          const text = `{{${truncateFilename}}}`;
           pasteText(text);
-          return uploadFile(image.getAsFile(), filename);
+
+          return uploadFile(image.getAsFile(), truncateFilename);
         }
       }
     }
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
deleted file mode 100644
index aa223270f2c..00000000000
--- a/app/assets/javascripts/due_date_select.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import dateFormat from 'dateformat';
-import $ from 'jquery';
-import Pikaday from 'pikaday';
-import initDatePicker from '~/behaviors/date_picker';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from '~/locale';
-import boardsStore from './boards/stores/boards_store';
-import axios from './lib/utils/axios_utils';
-import { timeFor, parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';
-
-class DueDateSelect {
-  constructor({ $dropdown, $loading } = {}) {
-    const $dropdownParent = $dropdown.closest('.dropdown');
-    const $block = $dropdown.closest('.block');
-    this.$loading = $loading;
-    this.$dropdown = $dropdown;
-    this.$dropdownParent = $dropdownParent;
-    this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
-    this.$block = $block;
-    this.$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
-    this.$selectbox = $dropdown.closest('.selectbox');
-    this.$value = $block.find('.value');
-    this.$valueContent = $block.find('.value-content');
-    this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
-    this.fieldName = $dropdown.data('fieldName');
-    this.abilityName = $dropdown.data('abilityName');
-    this.issueUpdateURL = $dropdown.data('issueUpdate');
-
-    this.rawSelectedDate = null;
-    this.displayedDate = null;
-    this.datePayload = null;
-
-    this.initGlDropdown();
-    this.initRemoveDueDate();
-    this.initDatePicker();
-  }
-
-  initGlDropdown() {
-    initDeprecatedJQueryDropdown(this.$dropdown, {
-      opened: () => {
-        const calendar = this.$datePicker.data('pikaday');
-        calendar.show();
-      },
-      hidden: () => {
-        this.$selectbox.hide();
-        this.$value.css('display', '');
-      },
-      shouldPropagate: false,
-    });
-  }
-
-  initDatePicker() {
-    const $dueDateInput = $(`input[name='${this.fieldName}']`);
-    const calendar = new Pikaday({
-      field: $dueDateInput.get(0),
-      theme: 'gitlab-theme',
-      format: 'yyyy-mm-dd',
-      parse: (dateString) => parsePikadayDate(dateString),
-      toString: (date) => pikadayToString(date),
-      onSelect: (dateText) => {
-        $dueDateInput.val(calendar.toString(dateText));
-
-        if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-          boardsStore.detail.issue.dueDate = $dueDateInput.val();
-          this.updateIssueBoardIssue();
-        } else {
-          this.saveDueDate(true);
-        }
-      },
-      firstDay: gon.first_day_of_week,
-    });
-
-    calendar.setDate(parsePikadayDate($dueDateInput.val()));
-    this.$datePicker.append(calendar.el);
-    this.$datePicker.data('pikaday', calendar);
-  }
-
-  initRemoveDueDate() {
-    this.$block.on('click', '.js-remove-due-date', (e) => {
-      const calendar = this.$datePicker.data('pikaday');
-      e.preventDefault();
-
-      calendar.setDate(null);
-
-      if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-        boardsStore.detail.issue.dueDate = '';
-        this.updateIssueBoardIssue();
-      } else {
-        $(`input[name='${this.fieldName}']`).val('');
-        this.saveDueDate(false);
-      }
-    });
-  }
-
-  saveDueDate(isDropdown) {
-    this.parseSelectedDate();
-    this.prepSelectedDate();
-    this.submitSelectedDate(isDropdown);
-  }
-
-  parseSelectedDate() {
-    this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val();
-
-    if (this.rawSelectedDate.length) {
-      // Construct Date object manually to avoid buggy dateString support within Date constructor
-      const dateArray = this.rawSelectedDate.split('-').map((v) => parseInt(v, 10));
-      const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
-      this.displayedDate = dateFormat(dateObj, 'mmm d, yyyy');
-    } else {
-      this.displayedDate = __('None');
-    }
-  }
-
-  prepSelectedDate() {
-    const datePayload = {};
-    datePayload[this.abilityName] = {};
-    datePayload[this.abilityName].due_date = this.rawSelectedDate;
-    this.datePayload = datePayload;
-  }
-
-  updateIssueBoardIssue() {
-    this.$loading.removeClass('gl-display-none');
-    this.$dropdown.trigger('loading.gl.dropdown');
-    this.$selectbox.hide();
-    this.$value.css('display', '');
-    const hideLoader = () => {
-      this.$loading.addClass('gl-display-none');
-    };
-
-    boardsStore.detail.issue
-      .update(this.$dropdown.attr('data-issue-update'))
-      .then(hideLoader)
-      .catch(hideLoader);
-  }
-
-  submitSelectedDate(isDropdown) {
-    const selectedDateValue = this.datePayload[this.abilityName].due_date;
-    const hasDueDate = this.displayedDate !== __('None');
-    const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
-
-    this.$loading.removeClass('gl-display-none');
-
-    if (isDropdown) {
-      this.$dropdown.trigger('loading.gl.dropdown');
-      this.$selectbox.hide();
-    }
-
-    this.$value.css('display', '');
-    this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
-    this.$sidebarValue.html(this.displayedDate);
-
-    $('.js-remove-due-date-holder').toggleClass('hidden', selectedDateValue.length);
-
-    return axios.put(this.issueUpdateURL, this.datePayload).then(() => {
-      const tooltipText = hasDueDate
-        ? `${__('Due date')}<br />${selectedDateValue} (${timeFor(selectedDateValue)})`
-        : __('Due date');
-      if (isDropdown) {
-        this.$dropdown.trigger('loaded.gl.dropdown');
-        this.$dropdown.dropdown('toggle');
-      }
-      this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
-
-      return this.$loading.addClass('gl-display-none');
-    });
-  }
-}
-
-export default class DueDateSelectors {
-  constructor() {
-    initDatePicker();
-    this.initIssuableSelect();
-  }
-  // eslint-disable-next-line class-methods-use-this
-  initIssuableSelect() {
-    const $loading = $('.js-issuable-update .due_date')
-      .find('.block-loading')
-      .removeClass('hidden')
-      .addClass('gl-display-none');
-
-    $('.js-due-date-select').each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-      // eslint-disable-next-line no-new
-      new DueDateSelect({
-        $dropdown,
-        $loading,
-      });
-    });
-  }
-}
diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js
index 7faf0fe5f08..7672151af2a 100644
--- a/app/assets/javascripts/emoji/index.js
+++ b/app/assets/javascripts/emoji/index.js
@@ -1,5 +1,6 @@
 import { escape, minBy } from 'lodash';
 import emojiAliases from 'emojis/aliases.json';
+import { sanitize } from '~/lib/dompurify';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
 import { CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants';
@@ -10,7 +11,7 @@ export const FALLBACK_EMOJI_KEY = 'grey_question';
 
 export const EMOJI_VERSION = '1';
 
-const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+const isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
 
 async function loadEmoji() {
   if (
@@ -34,7 +35,7 @@ async function loadEmoji() {
 
 async function loadEmojiWithNames() {
   return Object.entries(await loadEmoji()).reduce((acc, [key, value]) => {
-    acc[key] = { ...value, name: key };
+    acc[key] = { ...value, name: key, e: sanitize(value.e) };
 
     return acc;
   }, {});
diff --git a/app/assets/javascripts/emoji/support/unicode_support_map.js b/app/assets/javascripts/emoji/support/unicode_support_map.js
index fe3bc75f9fd..d90a774c293 100644
--- a/app/assets/javascripts/emoji/support/unicode_support_map.js
+++ b/app/assets/javascripts/emoji/support/unicode_support_map.js
@@ -141,7 +141,7 @@ function generateUnicodeSupportMap(testMap) {
 }
 
 export default function getUnicodeSupportMap() {
-  const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+  const isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
 
   let glEmojiVersionFromCache;
   let userAgentFromCache;
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 9e058af56c4..cec53869aa8 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -22,10 +22,6 @@ export default {
       type: Object,
       required: true,
     },
-    canReadEnvironment: {
-      type: Boolean,
-      required: true,
-    },
   },
   methods: {
     onChangePage(page) {
@@ -42,7 +38,7 @@ export default {
     <slot name="empty-state"></slot>
 
     <div v-if="!isLoading && environments.length > 0" class="table-holder">
-      <environment-table :environments="environments" :can-read-environment="canReadEnvironment" />
+      <environment-table :environments="environments" />
 
       <table-pagination
         v-if="pagination && pagination.totalPages > 1"
diff --git a/app/assets/javascripts/environments/components/edit_environment.vue b/app/assets/javascripts/environments/components/edit_environment.vue
index 1cd960d7cd6..96742a11ebb 100644
--- a/app/assets/javascripts/environments/components/edit_environment.vue
+++ b/app/assets/javascripts/environments/components/edit_environment.vue
@@ -18,6 +18,7 @@ export default {
   data() {
     return {
       formEnvironment: {
+        id: this.environment.id,
         name: this.environment.name,
         externalUrl: this.environment.external_url,
       },
@@ -33,7 +34,6 @@ export default {
       axios
         .put(this.updateEnvironmentPath, {
           id: this.environment.id,
-          name: this.formEnvironment.name,
           external_url: this.formEnvironment.externalUrl,
         })
         .then(({ data: { path } }) => visitUrl(path))
diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue
index 6db8fe24e72..1d1d8d61b66 100644
--- a/app/assets/javascripts/environments/components/environment_form.vue
+++ b/app/assets/javascripts/environments/components/environment_form.vue
@@ -39,12 +39,17 @@ export default {
     ),
     nameLabel: __('Name'),
     nameFeedback: __('This field is required'),
+    nameDisabledHelp: __("You cannot rename an environment after it's created."),
+    nameDisabledLinkText: __('How do I rename an environment?'),
     urlLabel: __('External URL'),
     urlFeedback: __('The URL should start with http:// or https://'),
     save: __('Save'),
     cancel: __('Cancel'),
   },
   helpPagePath: helpPagePath('ci/environments/index.md'),
+  renamingDisabledHelpPagePath: helpPagePath('ci/environments/index.md', {
+    anchor: 'rename-an-environment',
+  }),
   data() {
     return {
       visited: {
@@ -54,6 +59,9 @@ export default {
     };
   },
   computed: {
+    isNameDisabled() {
+      return Boolean(this.environment.id);
+    },
     valid() {
       return {
         name: this.visited.name && this.environment.name !== '',
@@ -102,10 +110,17 @@ export default {
           :state="valid.name"
           :invalid-feedback="$options.i18n.nameFeedback"
         >
+          <template v-if="isNameDisabled" #description>
+            {{ $options.i18n.nameDisabledHelp }}
+            <gl-link :href="$options.renamingDisabledHelpPagePath" target="_blank">
+              {{ $options.i18n.nameDisabledLinkText }}
+            </gl-link>
+          </template>
           <gl-form-input
             id="environment_name"
             :value="environment.name"
             :state="valid.name"
+            :disabled="isNameDisabled"
             name="environment[name]"
             required
             @input="onChange({ ...environment, name: $event })"
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 897f6ce393e..d12863ee742 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlTooltipDirective, GlIcon, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
@@ -32,6 +31,7 @@ export default {
     ExternalUrlComponent,
     GlIcon,
     GlLink,
+    GlSprintf,
     MonitoringButtonComponent,
     PinComponent,
     DeleteComponent,
@@ -48,12 +48,6 @@ export default {
   mixins: [timeagoMixin],
 
   props: {
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
     model: {
       type: Object,
       required: true,
@@ -647,14 +641,17 @@ export default {
       </span>
 
       <span v-if="!isFolder && deploymentHasUser" class="text-break-word">
-        by
-        <user-avatar-link
-          :link-href="deploymentUser.web_url"
-          :img-src="deploymentUser.avatar_url"
-          :img-alt="userImageAltDescription"
-          :tooltip-text="deploymentUser.username"
-          class="js-deploy-user-container float-none"
-        />
+        <gl-sprintf :message="s__('Environments|by %{avatar}')">
+          <template #avatar>
+            <user-avatar-link
+              :link-href="deploymentUser.web_url"
+              :img-src="deploymentUser.avatar_url"
+              :img-alt="userImageAltDescription"
+              :tooltip-text="deploymentUser.username"
+              class="js-deploy-user-container float-none"
+            />
+          </template>
+        </gl-sprintf>
       </span>
 
       <div v-if="showNoDeployments" class="commit-title table-mobile-content">
@@ -743,13 +740,16 @@ export default {
         </div>
         <div class="gl-display-flex">
           <span v-if="upcomingDeployment.user" class="text-break-word">
-            by
-            <user-avatar-link
-              :link-href="upcomingDeployment.user.web_url"
-              :img-src="upcomingDeployment.user.avatar_url"
-              :img-alt="upcomingDeploymentUserImageAltDescription"
-              :tooltip-text="upcomingDeployment.user.username"
-            />
+            <gl-sprintf :message="s__('Environments|by %{avatar}')">
+              <template #avatar>
+                <user-avatar-link
+                  :link-href="upcomingDeployment.user.web_url"
+                  :img-src="upcomingDeployment.user.avatar_url"
+                  :img-alt="upcomingDeploymentUserImageAltDescription"
+                  :tooltip-text="upcomingDeployment.user.username"
+                />
+              </template>
+            </gl-sprintf>
           </span>
         </div>
       </div>
@@ -784,14 +784,14 @@ export default {
         />
 
         <external-url-component
-          v-if="externalURL && canReadEnvironment"
+          v-if="externalURL"
           :external-url="externalURL"
           data-track-action="click_button"
           data-track-label="environment_url"
         />
 
         <monitoring-button-component
-          v-if="monitoringUrl && canReadEnvironment"
+          v-if="monitoringUrl"
           :monitoring-url="monitoringUrl"
           data-track-action="click_button"
           data-track-label="environment_monitoring"
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 105315dcf51..acc16ecd874 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,9 +1,7 @@
 <script>
-import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs, GlAlert } from '@gitlab/ui';
+import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { setCookie, getCookie, parseBoolean } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
-import { ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME } from '../constants';
 import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
 import EnvironmentsPaginationApiMixin from '../mixins/environments_pagination_api_mixin';
@@ -17,12 +15,6 @@ export default {
   i18n: {
     newEnvironmentButtonLabel: s__('Environments|New environment'),
     reviewAppButtonLabel: s__('Environments|Enable review app'),
-    surveyAlertTitle: s__('Environments|Help us improve environments'),
-    surveyAlertText: s__(
-      'Environments|Your feedback helps GitLab make environments better for you and other users. Participate and enter a sweepstake to win a USD 30 gift card.',
-    ),
-    surveyAlertButtonLabel: s__('Environments|Take the survey'),
-    surveyDismissButtonLabel: s__('Environments|Dismiss'),
   },
   modal: {
     id: 'enable-review-app-info',
@@ -33,7 +25,6 @@ export default {
     EnableReviewAppModal,
     GlBadge,
     GlButton,
-    GlAlert,
     GlTab,
     GlTabs,
     StopEnvironmentModal,
@@ -52,10 +43,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    canReadEnvironment: {
-      type: Boolean,
-      required: true,
-    },
     newEnvironmentPath: {
       type: String,
       required: true,
@@ -65,13 +52,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      environmentsSurveyAlertDismissed: parseBoolean(
-        getCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME),
-      ),
-    };
-  },
 
   created() {
     eventHub.$on('toggleFolder', this.toggleFolder);
@@ -121,11 +101,6 @@ export default {
         openFolders.forEach((folder) => this.fetchChildEnvironments(folder));
       }
     },
-
-    onSurveyAlertDismiss() {
-      setCookie(ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME, 'true');
-      this.environmentsSurveyAlertDismissed = true;
-    },
   },
 };
 </script>
@@ -156,19 +131,6 @@ export default {
           >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button
         >
       </div>
-      <gl-alert
-        v-if="!environmentsSurveyAlertDismissed"
-        class="gl-my-4"
-        :title="$options.i18n.surveyAlertTitle"
-        :primary-button-text="$options.i18n.surveyAlertButtonLabel"
-        variant="info"
-        dismissible
-        :dismiss-label="$options.i18n.surveyDismissButtonLabel"
-        primary-button-link="https://gitlab.fra1.qualtrics.com/jfe/form/SV_a2xyFsAA4D0w0Jg"
-        @dismiss="onSurveyAlertDismiss"
-      >
-        {{ $options.i18n.surveyAlertText }}
-      </gl-alert>
       <gl-tabs :value="activeTab" content-class="gl-display-none">
         <gl-tab
           v-for="(tab, idx) in tabs"
@@ -210,7 +172,6 @@ export default {
         :is-loading="isLoading"
         :environments="state.environments"
         :pagination="state.paginationInformation"
-        :can-read-environment="canReadEnvironment"
         @onChangePage="onChangePage"
       >
         <template v-if="!isLoading && state.environments.length === 0" #empty-state>
diff --git a/app/assets/javascripts/environments/components/environments_detail_header.vue b/app/assets/javascripts/environments/components/environments_detail_header.vue
index 467c89fd8b8..d71b553a878 100644
--- a/app/assets/javascripts/environments/components/environments_detail_header.vue
+++ b/app/assets/javascripts/environments/components/environments_detail_header.vue
@@ -27,10 +27,6 @@ export default {
       type: Object,
       required: true,
     },
-    canReadEnvironment: {
-      type: Boolean,
-      required: true,
-    },
     canAdminEnvironment: {
       type: Boolean,
       required: true,
@@ -84,7 +80,7 @@ export default {
       return this.environment.isAvailable && Boolean(this.environment.autoStopAt);
     },
     shouldShowExternalUrlButton() {
-      return this.canReadEnvironment && Boolean(this.environment.externalUrl);
+      return Boolean(this.environment.externalUrl);
     },
     shouldShowStopButton() {
       return this.canStopEnvironment && this.environment.isAvailable;
@@ -138,7 +134,7 @@ export default {
         >{{ $options.i18n.externalButtonText }}</gl-button
       >
       <gl-button
-        v-if="canReadEnvironment"
+        v-if="shouldShowExternalUrlButton"
         data-testid="metrics-button"
         :href="metricsPath"
         :title="$options.i18n.metricsButtonTitle"
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 61438872afc..f1c728b84fd 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -23,11 +23,6 @@ export default {
       required: true,
       default: () => [],
     },
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -155,7 +150,6 @@ export default {
       <environment-item
         :key="`environment-item-${i}`"
         :model="model"
-        :can-read-environment="canReadEnvironment"
         :table-data="tableData"
         data-qa-selector="environment_item"
       />
@@ -191,7 +185,6 @@ export default {
             <environment-item
               :key="`environment-row-${i}-${index}`"
               :model="child"
-              :can-read-environment="canReadEnvironment"
               :table-data="tableData"
               data-qa-selector="environment_item"
             />
diff --git a/app/assets/javascripts/environments/constants.js b/app/assets/javascripts/environments/constants.js
index a02e72dfa72..6d427bef4e6 100644
--- a/app/assets/javascripts/environments/constants.js
+++ b/app/assets/javascripts/environments/constants.js
@@ -38,5 +38,3 @@ export const CANARY_STATUS = {
 };
 
 export const CANARY_UPDATE_MODAL = 'confirm-canary-change';
-
-export const ENVIRONMENTS_SURVEY_DISMISSED_COOKIE_NAME = 'environments_survey_alert_dismissed';
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index 1be9a4608cb..206381e0b7e 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import { parseBoolean } from '../../lib/utils/common_utils';
 import Translate from '../../vue_shared/translate';
 import environmentsFolderApp from './environments_folder_view.vue';
 
@@ -31,7 +30,6 @@ export default () => {
         endpoint: environmentsData.environmentsDataEndpoint,
         folderName: environmentsData.environmentsDataFolderName,
         cssContainerClass: environmentsData.cssClass,
-        canReadEnvironment: parseBoolean(environmentsData.environmentsDataCanReadEnvironment),
       };
     },
     render(createElement) {
@@ -40,7 +38,6 @@ export default () => {
           endpoint: this.endpoint,
           folderName: this.folderName,
           cssContainerClass: this.cssContainerClass,
-          canReadEnvironment: this.canReadEnvironment,
         },
       });
     },
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 8070f3f12f8..3c608ad0ba9 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -30,10 +30,6 @@ export default {
       required: false,
       default: '',
     },
-    canReadEnvironment: {
-      type: Boolean,
-      required: true,
-    },
   },
   methods: {
     successCallback(resp) {
@@ -72,7 +68,6 @@ export default {
       :is-loading="isLoading"
       :environments="state.environments"
       :pagination="state.paginationInformation"
-      :can-read-environment="canReadEnvironment"
       @onChangePage="onChangePage"
     />
   </div>
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index b99872f7a6c..5e33923d518 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -9,7 +9,7 @@ Vue.use(Translate);
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
 export default () => {
@@ -32,7 +32,6 @@ export default () => {
         newEnvironmentPath: environmentsData.newEnvironmentPath,
         helpPagePath: environmentsData.helpPagePath,
         canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment),
-        canReadEnvironment: parseBoolean(environmentsData.canReadEnvironment),
       };
     },
     render(createElement) {
@@ -42,7 +41,6 @@ export default () => {
           newEnvironmentPath: this.newEnvironmentPath,
           helpPagePath: this.helpPagePath,
           canCreateEnvironment: this.canCreateEnvironment,
-          canReadEnvironment: this.canReadEnvironment,
         },
       });
     },
diff --git a/app/assets/javascripts/environments/mount_show.js b/app/assets/javascripts/environments/mount_show.js
index f1c2dfec94b..6df4fad83f2 100644
--- a/app/assets/javascripts/environments/mount_show.js
+++ b/app/assets/javascripts/environments/mount_show.js
@@ -36,7 +36,6 @@ export const initHeader = () => {
           environment: this.environment,
           canDestroyEnvironment: dataset.canDestroyEnvironment,
           canUpdateEnvironment: dataset.canUpdateEnvironment,
-          canReadEnvironment: dataset.canReadEnvironment,
           canStopEnvironment: dataset.canStopEnvironment,
           canAdminEnvironment: dataset.canAdminEnvironment,
           cancelAutoStopPath: dataset.environmentCancelAutoStopPath,
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 2e27f51b71f..5db8c8cf8d3 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -118,7 +118,7 @@ export default {
       required: true,
     },
   },
-  hasLocalStorage: AccessorUtils.isLocalStorageAccessSafe(),
+  hasLocalStorage: AccessorUtils.canUseLocalStorage(),
   data() {
     return {
       errorSearchQuery: '',
diff --git a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
index 68b4438831e..2b8a31da50f 100644
--- a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
+++ b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -132,7 +131,7 @@ export default {
             <td
               class="line_content"
               :class="{ old: isHighlighted(lineNum(line)) }"
-              v-html="lineCode(line)"
+              v-html="lineCode(line) /* eslint-disable-line vue/no-v-html */"
             ></td>
           </tr>
         </template>
diff --git a/app/assets/javascripts/error_tracking/store/list/mutations.js b/app/assets/javascripts/error_tracking/store/list/mutations.js
index d92a64947ad..523861363d7 100644
--- a/app/assets/javascripts/error_tracking/store/list/mutations.js
+++ b/app/assets/javascripts/error_tracking/store/list/mutations.js
@@ -22,7 +22,7 @@ export default {
     // only keep the last 5
     state.recentSearches = recentSearches.slice(0, 5);
 
-    if (AccessorUtils.isLocalStorageAccessSafe()) {
+    if (AccessorUtils.canUseLocalStorage()) {
       localStorage.setItem(
         `recent-searches${state.indexPath}`,
         JSON.stringify(state.recentSearches),
@@ -31,7 +31,7 @@ export default {
   },
   [types.CLEAR_RECENT_SEARCHES](state) {
     state.recentSearches = [];
-    if (AccessorUtils.isLocalStorageAccessSafe()) {
+    if (AccessorUtils.canUseLocalStorage()) {
       localStorage.removeItem(`recent-searches${state.indexPath}`);
     }
   },
diff --git a/app/assets/javascripts/error_tracking_settings/components/app.vue b/app/assets/javascripts/error_tracking_settings/components/app.vue
index d188574e721..e12d9cc2b07 100644
--- a/app/assets/javascripts/error_tracking_settings/components/app.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormCheckbox, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import ErrorTrackingForm from './error_tracking_form.vue';
 import ProjectDropdown from './project_dropdown.vue';
@@ -10,6 +10,8 @@ export default {
     GlButton,
     GlFormCheckbox,
     GlFormGroup,
+    GlFormRadioGroup,
+    GlFormRadio,
     ProjectDropdown,
   },
   props: {
@@ -22,6 +24,10 @@ export default {
       type: String,
       required: true,
     },
+    initialIntegrated: {
+      type: String,
+      required: true,
+    },
     initialProject: {
       type: String,
       required: false,
@@ -49,12 +55,20 @@ export default {
       'isProjectInvalid',
       'projectSelectionLabel',
     ]),
-    ...mapState(['enabled', 'projects', 'selectedProject', 'settingsLoading', 'token']),
+    ...mapState([
+      'enabled',
+      'integrated',
+      'projects',
+      'selectedProject',
+      'settingsLoading',
+      'token',
+    ]),
   },
   created() {
     this.setInitialState({
       apiHost: this.initialApiHost,
       enabled: this.initialEnabled,
+      integrated: this.initialIntegrated,
       project: this.initialProject,
       token: this.initialToken,
       listProjectsEndpoint: this.listProjectsEndpoint,
@@ -62,7 +76,13 @@ export default {
     });
   },
   methods: {
-    ...mapActions(['setInitialState', 'updateEnabled', 'updateSelectedProject', 'updateSettings']),
+    ...mapActions([
+      'setInitialState',
+      'updateEnabled',
+      'updateIntegrated',
+      'updateSelectedProject',
+      'updateSettings',
+    ]),
     handleSubmit() {
       this.updateSettings();
     },
@@ -76,27 +96,44 @@ export default {
       :label="s__('ErrorTracking|Enable error tracking')"
       label-for="error-tracking-enabled"
     >
-      <gl-form-checkbox
-        id="error-tracking-enabled"
-        :checked="enabled"
-        @change="updateEnabled($event)"
-      >
+      <gl-form-checkbox id="error-tracking-enabled" :checked="enabled" @change="updateEnabled">
         {{ s__('ErrorTracking|Active') }}
       </gl-form-checkbox>
     </gl-form-group>
-    <error-tracking-form />
-    <div class="form-group">
-      <project-dropdown
-        :has-projects="hasProjects"
-        :invalid-project-label="invalidProjectLabel"
-        :is-project-invalid="isProjectInvalid"
-        :dropdown-label="dropdownLabel"
-        :project-selection-label="projectSelectionLabel"
-        :projects="projects"
-        :selected-project="selectedProject"
-        :token="token"
-        @select-project="updateSelectedProject"
-      />
+    <gl-form-group
+      :label="s__('ErrorTracking|Error tracking backend')"
+      data-testid="tracking-backend-settings"
+    >
+      <gl-form-radio-group name="explicit" :checked="integrated" @change="updateIntegrated">
+        <gl-form-radio name="error-tracking-integrated" :value="false">
+          {{ __('Sentry') }}
+          <template #help>
+            {{ __('Requires you to deploy or set up cloud-hosted Sentry.') }}
+          </template>
+        </gl-form-radio>
+        <gl-form-radio name="error-tracking-integrated" :value="true">
+          {{ __('GitLab') }}
+          <template #help>
+            {{ __('Uses GitLab as a lightweight alternative to Sentry.') }}
+          </template>
+        </gl-form-radio>
+      </gl-form-radio-group>
+    </gl-form-group>
+    <div v-if="!integrated" class="js-sentry-setting-form" data-testid="sentry-setting-form">
+      <error-tracking-form />
+      <div class="form-group">
+        <project-dropdown
+          :has-projects="hasProjects"
+          :invalid-project-label="invalidProjectLabel"
+          :is-project-invalid="isProjectInvalid"
+          :dropdown-label="dropdownLabel"
+          :project-selection-label="projectSelectionLabel"
+          :projects="projects"
+          :selected-project="selectedProject"
+          :token="token"
+          @select-project="updateSelectedProject"
+        />
+      </div>
     </div>
     <gl-button
       :disabled="settingsLoading"
diff --git a/app/assets/javascripts/error_tracking_settings/index.js b/app/assets/javascripts/error_tracking_settings/index.js
index ce315963723..324b3292834 100644
--- a/app/assets/javascripts/error_tracking_settings/index.js
+++ b/app/assets/javascripts/error_tracking_settings/index.js
@@ -5,7 +5,15 @@ import createStore from './store';
 export default () => {
   const formContainerEl = document.querySelector('.js-error-tracking-form');
   const {
-    dataset: { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },
+    dataset: {
+      apiHost,
+      enabled,
+      integrated,
+      project,
+      token,
+      listProjectsEndpoint,
+      operationsSettingsEndpoint,
+    },
   } = formContainerEl;
 
   return new Vue({
@@ -16,6 +24,7 @@ export default () => {
         props: {
           initialApiHost: apiHost,
           initialEnabled: enabled,
+          initialIntegrated: integrated,
           initialProject: project,
           initialToken: token,
           listProjectsEndpoint,
diff --git a/app/assets/javascripts/error_tracking_settings/store/actions.js b/app/assets/javascripts/error_tracking_settings/store/actions.js
index d402d0336d9..972ad58c617 100644
--- a/app/assets/javascripts/error_tracking_settings/store/actions.js
+++ b/app/assets/javascripts/error_tracking_settings/store/actions.js
@@ -79,6 +79,10 @@ export const updateEnabled = ({ commit }, enabled) => {
   commit(types.UPDATE_ENABLED, enabled);
 };
 
+export const updateIntegrated = ({ commit }, integrated) => {
+  commit(types.UPDATE_INTEGRATED, integrated);
+};
+
 export const updateToken = ({ commit }, token) => {
   commit(types.UPDATE_TOKEN, token);
   commit(types.RESET_CONNECT);
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
index bf3df383ddc..2cfa14c9b64 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutation_types.js
@@ -6,6 +6,7 @@ export const UPDATE_API_HOST = 'UPDATE_API_HOST';
 export const UPDATE_CONNECT_ERROR = 'UPDATE_CONNECT_ERROR';
 export const UPDATE_CONNECT_SUCCESS = 'UPDATE_CONNECT_SUCCESS';
 export const UPDATE_ENABLED = 'UPDATE_ENABLED';
+export const UPDATE_INTEGRATED = 'UPDATE_INTEGRATED';
 export const UPDATE_SELECTED_PROJECT = 'UPDATE_SELECTED_PROJECT';
 export const UPDATE_SETTINGS_LOADING = 'UPDATE_SETTINGS_LOADING';
 export const UPDATE_TOKEN = 'UPDATE_TOKEN';
diff --git a/app/assets/javascripts/error_tracking_settings/store/mutations.js b/app/assets/javascripts/error_tracking_settings/store/mutations.js
index 2242169aa1e..a1b43ccaaee 100644
--- a/app/assets/javascripts/error_tracking_settings/store/mutations.js
+++ b/app/assets/javascripts/error_tracking_settings/store/mutations.js
@@ -20,9 +20,18 @@ export default {
   },
   [types.SET_INITIAL_STATE](
     state,
-    { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },
+    {
+      apiHost,
+      enabled,
+      integrated,
+      project,
+      token,
+      listProjectsEndpoint,
+      operationsSettingsEndpoint,
+    },
   ) {
     state.enabled = parseBoolean(enabled);
+    state.integrated = parseBoolean(integrated);
     state.apiHost = apiHost;
     state.token = token;
     state.listProjectsEndpoint = listProjectsEndpoint;
@@ -38,6 +47,9 @@ export default {
   [types.UPDATE_ENABLED](state, enabled) {
     state.enabled = enabled;
   },
+  [types.UPDATE_INTEGRATED](state, integrated) {
+    state.integrated = integrated;
+  },
   [types.UPDATE_TOKEN](state, token) {
     state.token = token;
   },
diff --git a/app/assets/javascripts/error_tracking_settings/store/state.js b/app/assets/javascripts/error_tracking_settings/store/state.js
index ab616f11e83..ee5597abeb3 100644
--- a/app/assets/javascripts/error_tracking_settings/store/state.js
+++ b/app/assets/javascripts/error_tracking_settings/store/state.js
@@ -1,6 +1,7 @@
 export default () => ({
   apiHost: '',
   enabled: false,
+  integrated: false,
   token: '',
   projects: [],
   isLoadingProjects: false,
diff --git a/app/assets/javascripts/error_tracking_settings/utils.js b/app/assets/javascripts/error_tracking_settings/utils.js
index 5d18ac8e802..7ef5f7bbd34 100644
--- a/app/assets/javascripts/error_tracking_settings/utils.js
+++ b/app/assets/javascripts/error_tracking_settings/utils.js
@@ -1,6 +1,12 @@
 export const projectKeys = ['name', 'organizationName', 'organizationSlug', 'slug'];
 
-export const transformFrontendSettings = ({ apiHost, enabled, token, selectedProject }) => {
+export const transformFrontendSettings = ({
+  apiHost,
+  enabled,
+  integrated,
+  token,
+  selectedProject,
+}) => {
   const project = selectedProject
     ? {
         slug: selectedProject.slug,
@@ -10,7 +16,7 @@ export const transformFrontendSettings = ({ apiHost, enabled, token, selectedPro
       }
     : null;
 
-  return { api_host: apiHost || null, enabled, token: token || null, project };
+  return { api_host: apiHost || null, enabled, integrated, token: token || null, project };
 };
 
 export const getDisplayName = (project) => `${project.organizationName} | ${project.slug}`;
diff --git a/app/assets/javascripts/experimentation/utils.js b/app/assets/javascripts/experimentation/utils.js
index e572280a62c..9079c238169 100644
--- a/app/assets/javascripts/experimentation/utils.js
+++ b/app/assets/javascripts/experimentation/utils.js
@@ -1,18 +1,27 @@
 // This file only applies to use of experiments through https://gitlab.com/gitlab-org/gitlab-experiment
-import { get } from 'lodash';
+import { get, pick } from 'lodash';
 import { DEFAULT_VARIANT, CANDIDATE_VARIANT, TRACKING_CONTEXT_SCHEMA } from './constants';
 
+function getExperimentsData() {
+  return get(window, ['gon', 'experiment'], {});
+}
+
+function convertExperimentDataToExperimentContext(experimentData) {
+  return { schema: TRACKING_CONTEXT_SCHEMA, data: experimentData };
+}
+
 export function getExperimentData(experimentName) {
-  return get(window, ['gon', 'experiment', experimentName]);
+  return getExperimentsData()[experimentName];
 }
 
 export function getExperimentContexts(...experimentNames) {
-  return experimentNames
-    .map((name) => {
-      const data = getExperimentData(name);
-      return data && { schema: TRACKING_CONTEXT_SCHEMA, data };
-    })
-    .filter((context) => context);
+  return Object.values(pick(getExperimentsData(), experimentNames)).map(
+    convertExperimentDataToExperimentContext,
+  );
+}
+
+export function getAllExperimentContexts() {
+  return Object.values(getExperimentsData()).map(convertExperimentDataToExperimentContext);
 }
 
 export function isExperimentVariant(experimentName, variantName) {
diff --git a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
index dde021b67be..05d557db942 100644
--- a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
@@ -48,7 +48,7 @@ export default {
         <gl-toggle
           :value="active"
           data-testid="feature-flag-status-toggle"
-          data-track-event="click_button"
+          data-track-action="click_button"
           data-track-label="feature_flag_toggle"
           class="gl-mr-4"
           :label="__('Feature flag status')"
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
index cfd838bf5a1..f8a8bed2467 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
@@ -115,7 +115,7 @@ export default {
               :label="$options.i18n.toggleLabel"
               label-position="hidden"
               data-testid="feature-flag-status-toggle"
-              data-track-event="click_button"
+              data-track-action="click_button"
               data-track-label="feature_flag_toggle"
               @change="toggleFeatureFlag(featureFlag)"
             />
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service.js b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
index 56824977a43..c3514198ad9 100644
--- a/app/assets/javascripts/filtered_search/services/recent_searches_service.js
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
@@ -33,7 +33,7 @@ class RecentSearchesService {
   }
 
   static isAvailable() {
-    return AccessorUtilities.isLocalStorageAccessSafe();
+    return AccessorUtilities.canUseLocalStorage();
   }
 }
 
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index dd405893e43..8ad9eeaa266 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -84,7 +84,7 @@ export default {
     logItemAccess(storageKey, unsanitizedItem) {
       const item = sanitizeItem(unsanitizedItem);
 
-      if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+      if (!AccessorUtilities.canUseLocalStorage()) {
         return false;
       }
 
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index 1137951ccfc..2f451e8353b 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable vue/require-default-prop, vue/no-v-html */
+/* eslint-disable vue/require-default-prop */
 import { GlButton } from '@gitlab/ui';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -75,7 +75,7 @@ export default {
           ref="frequentItemsItemTitle"
           :title="itemName"
           class="frequent-items-item-title"
-          v-html="highlightedItemName"
+          v-html="highlightedItemName /* eslint-disable-line vue/no-v-html */"
         ></div>
         <div
           v-if="namespace"
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
index 65a762f54ad..babc2ef2e32 100644
--- a/app/assets/javascripts/frequent_items/store/actions.js
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -25,7 +25,7 @@ export const receiveFrequentItemsError = ({ commit }) => {
 export const fetchFrequentItems = ({ state, dispatch }) => {
   dispatch('requestFrequentItems');
 
-  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (AccessorUtilities.canUseLocalStorage()) {
     const storedFrequentItems = JSON.parse(localStorage.getItem(state.storageKey));
 
     dispatch(
diff --git a/app/assets/javascripts/graphql_shared/constants.js b/app/assets/javascripts/graphql_shared/constants.js
index 312dd0c88dd..692de9dcb88 100644
--- a/app/assets/javascripts/graphql_shared/constants.js
+++ b/app/assets/javascripts/graphql_shared/constants.js
@@ -1,3 +1,5 @@
+export const MINIMUM_SEARCH_LENGTH = 3;
+
 export const TYPE_CI_RUNNER = 'Ci::Runner';
 export const TYPE_EPIC = 'Epic';
 export const TYPE_GROUP = 'Group';
@@ -11,3 +13,5 @@ export const TYPE_SCANNER_PROFILE = 'DastScannerProfile';
 export const TYPE_SITE_PROFILE = 'DastSiteProfile';
 export const TYPE_USER = 'User';
 export const TYPE_VULNERABILITY = 'Vulnerability';
+export const TYPE_NOTE = 'Note';
+export const TYPE_DISCUSSION = 'Discussion';
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 2a95b242510..a1ec5942d64 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -136,7 +136,7 @@ export default {
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
     },
-    fetchPage(page, filterGroupsBy, sortBy, archived) {
+    fetchPage({ page, filterGroupsBy, sortBy, archived }) {
       this.isLoading = true;
 
       return this.fetchGroups({
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 59a37b2a1d5..18a6d487703 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -32,10 +32,10 @@ export default {
   },
   methods: {
     change(page) {
-      const filterGroupsParam = getParameterByName('filter');
-      const sortParam = getParameterByName('sort');
-      const archivedParam = getParameterByName('archived');
-      eventHub.$emit(`${this.action}fetchPage`, page, filterGroupsParam, sortParam, archivedParam);
+      const filterGroupsBy = getParameterByName('filter');
+      const sortBy = getParameterByName('sort');
+      const archived = getParameterByName('archived');
+      eventHub.$emit(`${this.action}fetchPage`, { page, filterGroupsBy, sortBy, archived });
     },
   },
 };
diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue
index 402d9a07c53..dfc1549fb4a 100644
--- a/app/assets/javascripts/groups/components/invite_members_banner.vue
+++ b/app/assets/javascripts/groups/components/invite_members_banner.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
 import eventHub from '~/invite_members/event_hub';
-import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -12,10 +12,10 @@ export default {
     GlBanner,
   },
   mixins: [trackingMixin],
-  inject: ['svgPath', 'isDismissedKey', 'trackLabel'],
+  inject: ['svgPath', 'trackLabel', 'calloutsPath', 'calloutsFeatureId', 'groupId'],
   data() {
     return {
-      isDismissed: parseBoolean(getCookie(this.isDismissedKey)),
+      isDismissed: false,
       tracking: {
         label: this.trackLabel,
       },
@@ -26,7 +26,16 @@ export default {
   },
   methods: {
     handleClose() {
-      setCookie(this.isDismissedKey, true);
+      axios
+        .post(this.calloutsPath, {
+          feature_name: this.calloutsFeatureId,
+          group_id: this.groupId,
+        })
+        .catch((e) => {
+          // eslint-disable-next-line @gitlab/require-i18n-strings, no-console
+          console.error('Failed to dismiss banner.', e);
+        });
+
       this.isDismissed = true;
       this.track(this.$options.dismissEvent);
     },
@@ -61,6 +70,7 @@ export default {
   <gl-banner
     v-if="!isDismissed"
     ref="banner"
+    data-testid="invite-members-banner"
     :title="$options.i18n.title"
     :button-text="$options.i18n.button_text"
     :svg-path="svgPath"
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 7a37d1eb93d..46e9d2bec99 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -40,24 +40,31 @@ export default {
       return this.item.type === ITEM_TYPE.GROUP;
     },
   },
+  methods: {
+    displayValue(value) {
+      return this.isGroup && value !== undefined;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="stats gl-text-gray-500">
     <item-stats-value
-      v-if="isGroup"
+      v-if="displayValue(item.subgroupCount)"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
       css-class="number-subgroups gl-ml-5"
       icon-name="folder-o"
+      data-testid="subgroups-count"
     />
     <item-stats-value
-      v-if="isGroup"
+      v-if="displayValue(item.projectCount)"
       :title="__('Projects')"
       :value="item.projectCount"
       css-class="number-projects gl-ml-5"
       icon-name="bookmark"
+      data-testid="projects-count"
     />
     <item-stats-value
       v-if="isGroup"
diff --git a/app/assets/javascripts/groups/init_invite_members_banner.js b/app/assets/javascripts/groups/init_invite_members_banner.js
index 2052dd6ac8c..38ab4122dab 100644
--- a/app/assets/javascripts/groups/init_invite_members_banner.js
+++ b/app/assets/javascripts/groups/init_invite_members_banner.js
@@ -8,15 +8,24 @@ export default function initInviteMembersBanner() {
     return false;
   }
 
-  const { svgPath, inviteMembersPath, isDismissedKey, trackLabel } = el.dataset;
+  const {
+    svgPath,
+    inviteMembersPath,
+    trackLabel,
+    calloutsPath,
+    calloutsFeatureId,
+    groupId,
+  } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       svgPath,
       inviteMembersPath,
-      isDismissedKey,
       trackLabel,
+      calloutsPath,
+      calloutsFeatureId,
+      groupId,
     },
     render: (createElement) => createElement(InviteMembersBanner),
   });
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
new file mode 100644
index 00000000000..580c27f6c61
--- /dev/null
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlSearchBoxByType, GlOutsideDirective as Outside } from '@gitlab/ui';
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+import HeaderSearchDefaultItems from './header_search_default_items.vue';
+import HeaderSearchScopedItems from './header_search_scoped_items.vue';
+
+export default {
+  name: 'HeaderSearchApp',
+  i18n: {
+    searchPlaceholder: __('Search or jump to...'),
+  },
+  directives: { Outside },
+  components: {
+    GlSearchBoxByType,
+    HeaderSearchDefaultItems,
+    HeaderSearchScopedItems,
+  },
+  data() {
+    return {
+      showDropdown: false,
+    };
+  },
+  computed: {
+    ...mapState(['search']),
+    ...mapGetters(['searchQuery']),
+    searchText: {
+      get() {
+        return this.search;
+      },
+      set(value) {
+        this.setSearch(value);
+      },
+    },
+    showSearchDropdown() {
+      return this.showDropdown && gon?.current_username;
+    },
+    showDefaultItems() {
+      return !this.searchText;
+    },
+  },
+  methods: {
+    ...mapActions(['setSearch']),
+    openDropdown() {
+      this.showDropdown = true;
+    },
+    closeDropdown() {
+      this.showDropdown = false;
+    },
+    submitSearch() {
+      return visitUrl(this.searchQuery);
+    },
+  },
+};
+</script>
+
+<template>
+  <section v-outside="closeDropdown" class="header-search gl-relative">
+    <gl-search-box-by-type
+      v-model="searchText"
+      :debounce="500"
+      autocomplete="off"
+      :placeholder="$options.i18n.searchPlaceholder"
+      @focus="openDropdown"
+      @click="openDropdown"
+      @keydown.enter="submitSearch"
+      @keydown.esc="closeDropdown"
+    />
+    <div
+      v-if="showSearchDropdown"
+      data-testid="header-search-dropdown-menu"
+      class="header-search-dropdown-menu gl-overflow-y-auto gl-absolute gl-left-0 gl-z-index-1 gl-w-full gl-bg-white gl-border-1 gl-rounded-base gl-border-solid gl-border-gray-200 gl-shadow-x0-y2-b4-s0"
+    >
+      <div class="header-search-dropdown-content gl-overflow-y-auto gl-py-2">
+        <header-search-default-items v-if="showDefaultItems" />
+        <template v-else>
+          <header-search-scoped-items />
+        </template>
+      </div>
+    </div>
+  </section>
+</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
new file mode 100644
index 00000000000..2871937ed3a
--- /dev/null
+++ b/app/assets/javascripts/header_search/components/header_search_default_items.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
+
+export default {
+  name: 'HeaderSearchDefaultItems',
+  i18n: {
+    allGitLab: __('All GitLab'),
+  },
+  components: {
+    GlDropdownSectionHeader,
+    GlDropdownItem,
+  },
+  computed: {
+    ...mapState(['searchContext']),
+    ...mapGetters(['defaultSearchOptions']),
+    sectionHeader() {
+      return (
+        this.searchContext.project?.name ||
+        this.searchContext.group?.name ||
+        this.$options.i18n.allGitLab
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown-section-header>{{ sectionHeader }}</gl-dropdown-section-header>
+    <gl-dropdown-item
+      v-for="(option, index) in defaultSearchOptions"
+      :id="`default-${index}`"
+      :key="index"
+      tabindex="-1"
+      :href="option.url"
+    >
+      {{ option.title }}
+    </gl-dropdown-item>
+  </div>
+</template>
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
new file mode 100644
index 00000000000..645eba05148
--- /dev/null
+++ b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
@@ -0,0 +1,31 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+  name: 'HeaderSearchScopedItems',
+  components: {
+    GlDropdownItem,
+  },
+  computed: {
+    ...mapState(['search']),
+    ...mapGetters(['scopedSearchOptions']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown-item
+      v-for="(option, index) in scopedSearchOptions"
+      :id="`scoped-${index}`"
+      :key="index"
+      tabindex="-1"
+      :href="option.url"
+    >
+      "<span class="gl-font-weight-bold">{{ search }}</span
+      >" {{ option.description }}
+      <span v-if="option.scope" class="gl-font-style-italic">{{ option.scope }}</span>
+    </gl-dropdown-item>
+  </div>
+</template>
diff --git a/app/assets/javascripts/header_search/constants.js b/app/assets/javascripts/header_search/constants.js
new file mode 100644
index 00000000000..fffed7bcbdb
--- /dev/null
+++ b/app/assets/javascripts/header_search/constants.js
@@ -0,0 +1,17 @@
+import { __ } from '~/locale';
+
+export const MSG_ISSUES_ASSIGNED_TO_ME = __('Issues assigned to me');
+
+export const MSG_ISSUES_IVE_CREATED = __("Issues I've created");
+
+export const MSG_MR_ASSIGNED_TO_ME = __('Merge requests assigned to me');
+
+export const MSG_MR_IM_REVIEWER = __("Merge requests that I'm a reviewer");
+
+export const MSG_MR_IVE_CREATED = __("Merge requests I've created");
+
+export const MSG_IN_ALL_GITLAB = __('in all GitLab');
+
+export const MSG_IN_GROUP = __('in group');
+
+export const MSG_IN_PROJECT = __('in project');
diff --git a/app/assets/javascripts/header_search/index.js b/app/assets/javascripts/header_search/index.js
new file mode 100644
index 00000000000..2d37ee137fc
--- /dev/null
+++ b/app/assets/javascripts/header_search/index.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import HeaderSearchApp from './components/app.vue';
+import createStore from './store';
+
+Vue.use(Translate);
+
+export const initHeaderSearchApp = () => {
+  const el = document.getElementById('js-header-search');
+
+  if (!el) {
+    return false;
+  }
+
+  const { searchPath, issuesPath, mrPath } = el.dataset;
+  let { searchContext } = el.dataset;
+  searchContext = JSON.parse(searchContext);
+
+  return new Vue({
+    el,
+    store: createStore({ searchPath, issuesPath, mrPath, searchContext }),
+    render(createElement) {
+      return createElement(HeaderSearchApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/header_search/store/actions.js b/app/assets/javascripts/header_search/store/actions.js
new file mode 100644
index 00000000000..841aee04029
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/actions.js
@@ -0,0 +1,5 @@
+import * as types from './mutation_types';
+
+export const setSearch = ({ commit }, value) => {
+  commit(types.SET_SEARCH, value);
+};
diff --git a/app/assets/javascripts/header_search/store/getters.js b/app/assets/javascripts/header_search/store/getters.js
new file mode 100644
index 00000000000..d1e1fc8ad73
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/getters.js
@@ -0,0 +1,135 @@
+import { objectToQuery } from '~/lib/utils/url_utility';
+
+import {
+  MSG_ISSUES_ASSIGNED_TO_ME,
+  MSG_ISSUES_IVE_CREATED,
+  MSG_MR_ASSIGNED_TO_ME,
+  MSG_MR_IM_REVIEWER,
+  MSG_MR_IVE_CREATED,
+  MSG_IN_PROJECT,
+  MSG_IN_GROUP,
+  MSG_IN_ALL_GITLAB,
+} from '../constants';
+
+export const searchQuery = (state) => {
+  const query = {
+    search: state.search,
+    nav_source: 'navbar',
+    project_id: state.searchContext.project?.id,
+    group_id: state.searchContext.group?.id,
+    scope: state.searchContext.scope,
+  };
+
+  return `${state.searchPath}?${objectToQuery(query)}`;
+};
+
+export const scopedIssuesPath = (state) => {
+  return (
+    state.searchContext.project_metadata?.issues_path ||
+    state.searchContext.group_metadata?.issues_path ||
+    state.issuesPath
+  );
+};
+
+export const scopedMRPath = (state) => {
+  return (
+    state.searchContext.project_metadata?.mr_path ||
+    state.searchContext.group_metadata?.mr_path ||
+    state.mrPath
+  );
+};
+
+export const defaultSearchOptions = (state, getters) => {
+  const userName = gon.current_username;
+
+  return [
+    {
+      title: MSG_ISSUES_ASSIGNED_TO_ME,
+      url: `${getters.scopedIssuesPath}/?assignee_username=${userName}`,
+    },
+    {
+      title: MSG_ISSUES_IVE_CREATED,
+      url: `${getters.scopedIssuesPath}/?author_username=${userName}`,
+    },
+    {
+      title: MSG_MR_ASSIGNED_TO_ME,
+      url: `${getters.scopedMRPath}/?assignee_username=${userName}`,
+    },
+    {
+      title: MSG_MR_IM_REVIEWER,
+      url: `${getters.scopedMRPath}/?reviewer_username=${userName}`,
+    },
+    {
+      title: MSG_MR_IVE_CREATED,
+      url: `${getters.scopedMRPath}/?author_username=${userName}`,
+    },
+  ];
+};
+
+export const projectUrl = (state) => {
+  if (!state.searchContext.project || !state.searchContext.group) {
+    return null;
+  }
+
+  const query = {
+    search: state.search,
+    nav_source: 'navbar',
+    project_id: state.searchContext.project.id,
+    group_id: state.searchContext.group.id,
+    scope: state.searchContext.scope,
+  };
+
+  return `${state.searchPath}?${objectToQuery(query)}`;
+};
+
+export const groupUrl = (state) => {
+  if (!state.searchContext.group) {
+    return null;
+  }
+
+  const query = {
+    search: state.search,
+    nav_source: 'navbar',
+    group_id: state.searchContext.group.id,
+    scope: state.searchContext.scope,
+  };
+
+  return `${state.searchPath}?${objectToQuery(query)}`;
+};
+
+export const allUrl = (state) => {
+  const query = {
+    search: state.search,
+    nav_source: 'navbar',
+    scope: state.searchContext.scope,
+  };
+
+  return `${state.searchPath}?${objectToQuery(query)}`;
+};
+
+export const scopedSearchOptions = (state, getters) => {
+  const options = [];
+
+  if (state.searchContext.project) {
+    options.push({
+      scope: state.searchContext.project.name,
+      description: MSG_IN_PROJECT,
+      url: getters.projectUrl,
+    });
+  }
+
+  if (state.searchContext.group) {
+    options.push({
+      scope: state.searchContext.group.name,
+      description: MSG_IN_GROUP,
+      url: getters.groupUrl,
+    });
+  }
+
+  options.push({
+    description: MSG_IN_ALL_GITLAB,
+    url: getters.allUrl,
+  });
+
+  return options;
+};
diff --git a/app/assets/javascripts/header_search/store/index.js b/app/assets/javascripts/header_search/store/index.js
new file mode 100644
index 00000000000..8b74f8662a5
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import createState from './state';
+
+Vue.use(Vuex);
+
+export const getStoreConfig = ({ searchPath, issuesPath, mrPath, searchContext }) => ({
+  actions,
+  getters,
+  mutations,
+  state: createState({ searchPath, issuesPath, mrPath, searchContext }),
+});
+
+const createStore = (config) => new Vuex.Store(getStoreConfig(config));
+export default createStore;
diff --git a/app/assets/javascripts/header_search/store/mutation_types.js b/app/assets/javascripts/header_search/store/mutation_types.js
new file mode 100644
index 00000000000..0bc94ae055f
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/mutation_types.js
@@ -0,0 +1 @@
+export const SET_SEARCH = 'SET_SEARCH';
diff --git a/app/assets/javascripts/header_search/store/mutations.js b/app/assets/javascripts/header_search/store/mutations.js
new file mode 100644
index 00000000000..5b1438929d4
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/mutations.js
@@ -0,0 +1,7 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_SEARCH](state, value) {
+    state.search = value;
+  },
+};
diff --git a/app/assets/javascripts/header_search/store/state.js b/app/assets/javascripts/header_search/store/state.js
new file mode 100644
index 00000000000..fb2c83dbbe3
--- /dev/null
+++ b/app/assets/javascripts/header_search/store/state.js
@@ -0,0 +1,8 @@
+const createState = ({ searchPath, issuesPath, mrPath, searchContext }) => ({
+  searchPath,
+  issuesPath,
+  mrPath,
+  searchContext,
+  search: '',
+});
+export default createState;
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index 977efb0ca22..5a7d7917f8a 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { mapState } from 'vuex';
 
 export default {
@@ -17,7 +16,7 @@ export default {
     <div class="gl-mr-3 gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
-        <p v-html="lastCommitMsg"></p>
+        <p v-html="lastCommitMsg /* eslint-disable-line vue/no-v-html */"></p>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index 2b75d10f659..67eedc6b37f 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 
 export default {
@@ -8,6 +7,9 @@ export default {
     GlAlert,
     GlLoadingIcon,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     message: {
       type: Object,
@@ -56,7 +58,7 @@ export default {
     @dismiss="dismiss"
     @primaryAction="doAction"
   >
-    <span v-html="message.text"></span>
+    <span v-safe-html="message.text"></span>
     <gl-loading-icon v-show="isLoading" size="sm" inline class="vertical-align-middle ml-1" />
   </gl-alert>
 </template>
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index 8e611503cb4..c142992a9d1 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
 import { mapActions, mapState } from 'vuex';
@@ -102,7 +101,7 @@ export default {
       <code
         v-show="!detailJob.isLoading"
         class="bash"
-        v-html="jobOutput"
+        v-html="jobOutput /* eslint-disable-line vue/no-v-html */"
       >
       </code>
       <div
diff --git a/app/assets/javascripts/ide/services/terminals.js b/app/assets/javascripts/ide/services/terminals.js
index ea54733baa4..99121948196 100644
--- a/app/assets/javascripts/ide/services/terminals.js
+++ b/app/assets/javascripts/ide/services/terminals.js
@@ -1,6 +1,8 @@
 import axios from '~/lib/utils/axios_utils';
+import { joinPaths } from '~/lib/utils/url_utility';
 
-export const baseUrl = (projectPath) => `/${projectPath}/ide_terminals`;
+export const baseUrl = (projectPath) =>
+  joinPaths(gon.relative_url_root || '', `/${projectPath}/ide_terminals`);
 
 export const checkConfig = (projectPath, branch) =>
   axios.post(`${baseUrl(projectPath)}/check_config`, {
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index 275fecc5a32..ec3630cc5eb 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -43,7 +43,10 @@ const KNOWN_TYPES = [
   },
 ];
 
-export function isTextFile({ name, raw, content, mimeType = '' }) {
+export function isTextFile({ name, raw, binary, content, mimeType = '' }) {
+  // some file objects already have a `binary` property set on them. If so, use it first
+  if (typeof binary === 'boolean') return !binary;
+
   const knownType = KNOWN_TYPES.find((type) => type.isMatch(mimeType, name));
   if (knownType) return knownType.isText;
 
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue
new file mode 100644
index 00000000000..104c84173fc
--- /dev/null
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_actions_cell.vue
@@ -0,0 +1,69 @@
+<script>
+import { GlButton, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { isFinished, isInvalid, isAvailableForImport } from '../utils';
+
+export default {
+  components: {
+    GlIcon,
+    GlButton,
+  },
+  directives: {
+    GlTooltip,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    groupPathRegex: {
+      type: RegExp,
+      required: true,
+    },
+  },
+  computed: {
+    fullLastImportPath() {
+      return this.group.last_import_target
+        ? `${this.group.last_import_target.target_namespace}/${this.group.last_import_target.new_name}`
+        : null;
+    },
+    absoluteLastImportPath() {
+      return joinPaths(gon.relative_url_root || '/', this.fullLastImportPath);
+    },
+    isAvailableForImport() {
+      return isAvailableForImport(this.group);
+    },
+    isFinished() {
+      return isFinished(this.group);
+    },
+    isInvalid() {
+      return isInvalid(this.group, this.groupPathRegex);
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="gl-white-space-nowrap gl-inline-flex gl-align-items-center">
+    <gl-button
+      v-if="isAvailableForImport"
+      :disabled="isInvalid"
+      variant="confirm"
+      category="secondary"
+      data-qa-selector="import_group_button"
+      @click="$emit('import-group')"
+    >
+      {{ isFinished ? __('Re-import') : __('Import') }}
+    </gl-button>
+    <gl-icon
+      v-if="isFinished"
+      v-gl-tooltip
+      :size="16"
+      name="information-o"
+      :title="
+        s__('BulkImports|Re-import creates a new group. It does not sync with the existing group.')
+      "
+      class="gl-ml-3"
+    />
+  </span>
+</template>
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
new file mode 100644
index 00000000000..2de9bd4f868
--- /dev/null
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_source_cell.vue
@@ -0,0 +1,53 @@
+<script>
+import { GlLink, GlSprintf, GlIcon } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { isFinished } from '../utils';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+    GlIcon,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    fullLastImportPath() {
+      return this.group.last_import_target
+        ? `${this.group.last_import_target.target_namespace}/${this.group.last_import_target.new_name}`
+        : null;
+    },
+    absoluteLastImportPath() {
+      return joinPaths(gon.relative_url_root || '/', this.fullLastImportPath);
+    },
+    isFinished() {
+      return isFinished(this.group);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-link
+      :href="group.web_url"
+      target="_blank"
+      class="gl-display-inline-flex gl-align-items-center gl-h-7"
+    >
+      {{ group.full_path }} <gl-icon name="external-link" />
+    </gl-link>
+    <div v-if="isFinished && fullLastImportPath" class="gl-font-sm">
+      <gl-sprintf :message="s__('BulkImport|Last imported to %{link}')">
+        <template #link>
+          <gl-link :href="absoluteLastImportPath" class="gl-font-sm" target="_blank">{{
+            fullLastImportPath
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index db44be2bcd7..04b037ecc2b 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -9,19 +9,19 @@ import {
   GlLoadingIcon,
   GlSearchBoxByClick,
   GlSprintf,
-  GlSafeHtmlDirective as SafeHtml,
   GlTable,
   GlFormCheckbox,
 } from '@gitlab/ui';
 import { s__, __, n__ } from '~/locale';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
-import ImportStatus from '../../components/import_status.vue';
-import { STATUSES } from '../../constants';
+import ImportStatusCell from '../../components/import_status.vue';
 import importGroupsMutation from '../graphql/mutations/import_groups.mutation.graphql';
 import setImportTargetMutation from '../graphql/mutations/set_import_target.mutation.graphql';
 import availableNamespacesQuery from '../graphql/queries/available_namespaces.query.graphql';
 import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql';
-import { isInvalid } from '../utils';
+import { isInvalid, isFinished, isAvailableForImport } from '../utils';
+import ImportActionsCell from './import_actions_cell.vue';
+import ImportSourceCell from './import_source_cell.vue';
 import ImportTargetCell from './import_target_cell.vue';
 
 const PAGE_SIZES = [20, 50, 100];
@@ -43,13 +43,12 @@ export default {
     GlFormCheckbox,
     GlSprintf,
     GlTable,
-    ImportStatus,
+    ImportSourceCell,
     ImportTargetCell,
+    ImportStatusCell,
+    ImportActionsCell,
     PaginationLinks,
   },
-  directives: {
-    SafeHtml,
-  },
 
   props: {
     sourceUrl: {
@@ -136,7 +135,7 @@ export default {
     },
 
     availableGroupsForImport() {
-      return this.groups.filter((g) => g.progress.status === STATUSES.NONE && !this.isInvalid(g));
+      return this.groups.filter((g) => isAvailableForImport(g) && !this.isInvalid(g));
     },
 
     humanizedTotal() {
@@ -190,6 +189,24 @@ export default {
   },
 
   methods: {
+    isUnselectable(group) {
+      return !this.isAvailableForImport(group) || this.isInvalid(group);
+    },
+
+    rowClasses(group) {
+      const DEFAULT_CLASSES = [
+        'gl-border-gray-200',
+        'gl-border-0',
+        'gl-border-b-1',
+        'gl-border-solid',
+      ];
+      const result = [...DEFAULT_CLASSES];
+      if (this.isUnselectable(group)) {
+        result.push('gl-cursor-default!');
+      }
+      return result;
+    },
+
     qaRowAttributes(group, type) {
       if (type === 'row') {
         return {
@@ -201,10 +218,8 @@ export default {
       return {};
     },
 
-    isAlreadyImported(group) {
-      return group.progress.status !== STATUSES.NONE;
-    },
-
+    isAvailableForImport,
+    isFinished,
     isInvalid(group) {
       return isInvalid(group, this.groupPathRegex);
     },
@@ -253,7 +268,7 @@ export default {
 
       const table = this.getTableRef();
       this.groups.forEach((group, idx) => {
-        if (table.isRowSelected(idx) && (this.isAlreadyImported(group) || this.isInvalid(group))) {
+        if (table.isRowSelected(idx) && this.isUnselectable(group)) {
           table.unselectRow(idx);
         }
       });
@@ -291,7 +306,7 @@ export default {
             <strong>{{ filter }}</strong>
           </template>
           <template #link>
-            <gl-link class="gl-display-inline-block" :href="sourceUrl" target="_blank">
+            <gl-link :href="sourceUrl" target="_blank">
               {{ sourceUrl }} <gl-icon name="external-link" class="vertical-align-middle" />
             </gl-link>
           </template>
@@ -338,7 +353,7 @@ export default {
           ref="table"
           class="gl-w-full"
           data-qa-selector="import_table"
-          tbody-tr-class="gl-border-gray-200 gl-border-0 gl-border-b-1 gl-border-solid"
+          :tbody-tr-class="rowClasses"
           :tbody-tr-attr="qaRowAttributes"
           :items="groups"
           :fields="$options.fields"
@@ -360,18 +375,12 @@ export default {
             <gl-form-checkbox
               class="gl-h-7 gl-pt-3"
               :checked="rowSelected"
-              :disabled="isAlreadyImported(group) || isInvalid(group)"
+              :disabled="!isAvailableForImport(group) || isInvalid(group)"
               @change="rowSelected ? unselectRow() : selectRow()"
             />
           </template>
-          <template #cell(web_url)="{ value: web_url, item: { full_path } }">
-            <gl-link
-              :href="web_url"
-              target="_blank"
-              class="gl-display-inline-flex gl-align-items-center gl-h-7"
-            >
-              {{ full_path }} <gl-icon name="external-link" />
-            </gl-link>
+          <template #cell(web_url)="{ item: group }">
+            <import-source-cell :group="group" />
           </template>
           <template #cell(import_target)="{ item: group }">
             <import-target-cell
@@ -388,19 +397,14 @@ export default {
             />
           </template>
           <template #cell(progress)="{ value: { status } }">
-            <import-status :status="status" class="gl-line-height-32" />
+            <import-status-cell :status="status" class="gl-line-height-32" />
           </template>
           <template #cell(actions)="{ item: group }">
-            <gl-button
-              v-if="!isAlreadyImported(group)"
-              :disabled="isInvalid(group)"
-              variant="confirm"
-              category="secondary"
-              data-qa-selector="import_group_button"
-              @click="importGroups([group.id])"
-            >
-              {{ __('Import') }}
-            </gl-button>
+            <import-actions-cell
+              :group="group"
+              :group-path-regex="groupPathRegex"
+              @import-group="importGroups([group.id])"
+            />
           </template>
         </gl-table>
         <div v-if="hasGroups" class="gl-display-flex gl-mt-3 gl-align-items-center">
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
index 7359d4f239e..daced740c94 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
@@ -3,14 +3,16 @@ import {
   GlDropdownDivider,
   GlDropdownItem,
   GlDropdownSectionHeader,
-  GlLink,
   GlFormInput,
 } from '@gitlab/ui';
-import { joinPaths } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import ImportGroupDropdown from '../../components/group_dropdown.vue';
-import { STATUSES } from '../../constants';
-import { isInvalid, getInvalidNameValidationMessage, isNameValid } from '../utils';
+import {
+  isInvalid,
+  getInvalidNameValidationMessage,
+  isNameValid,
+  isAvailableForImport,
+} from '../utils';
 
 export default {
   components: {
@@ -18,7 +20,6 @@ export default {
     GlDropdownDivider,
     GlDropdownItem,
     GlDropdownSectionHeader,
-    GlLink,
     GlFormInput,
   },
   props: {
@@ -61,20 +62,8 @@ export default {
       return isNameValid(this.group, this.groupPathRegex);
     },
 
-    isAlreadyImported() {
-      return this.group.progress.status !== STATUSES.NONE;
-    },
-
-    isFinished() {
-      return this.group.progress.status === STATUSES.FINISHED;
-    },
-
-    fullPath() {
-      return `${this.importTarget.target_namespace}/${this.importTarget.new_name}`;
-    },
-
-    absolutePath() {
-      return joinPaths(gon.relative_url_root || '/', this.fullPath);
+    isAvailableForImport() {
+      return isAvailableForImport(this.group);
     },
   },
 
@@ -85,25 +74,11 @@ export default {
 </script>
 
 <template>
-  <gl-link
-    v-if="isFinished"
-    class="gl-display-inline-flex gl-align-items-center gl-h-7"
-    :href="absolutePath"
-  >
-    {{ fullPath }}
-  </gl-link>
-
-  <div
-    v-else
-    class="gl-display-flex gl-align-items-stretch"
-    :class="{
-      disabled: isAlreadyImported,
-    }"
-  >
+  <div class="gl-display-flex gl-align-items-stretch">
     <import-group-dropdown
       #default="{ namespaces }"
       :text="importTarget.target_namespace"
-      :disabled="isAlreadyImported"
+      :disabled="!isAvailableForImport"
       :namespaces="availableNamespaceNames"
       toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
       class="gl-h-7 gl-flex-grow-1"
@@ -131,8 +106,8 @@ export default {
     <div
       class="gl-h-7 gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1 gl-bg-gray-10"
       :class="{
-        'gl-text-gray-400 gl-border-gray-100': isAlreadyImported,
-        'gl-border-gray-200': !isAlreadyImported,
+        'gl-text-gray-400 gl-border-gray-100': !isAvailableForImport,
+        'gl-border-gray-200': isAvailableForImport,
       }"
     >
       /
@@ -141,11 +116,11 @@ export default {
       <gl-form-input
         class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
         :class="{
-          'gl-inset-border-1-gray-200!': !isAlreadyImported,
-          'gl-inset-border-1-gray-100!': isAlreadyImported,
-          'is-invalid': isInvalid && !isAlreadyImported,
+          'gl-inset-border-1-gray-200!': isAvailableForImport,
+          'gl-inset-border-1-gray-100!': !isAvailableForImport,
+          'is-invalid': isInvalid && isAvailableForImport,
         }"
-        :disabled="isAlreadyImported"
+        :disabled="!isAvailableForImport"
         :value="importTarget.new_name"
         @input="$emit('update-new-name', $event)"
       />
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
index 57188441158..c08cf909a00 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js
@@ -5,10 +5,13 @@ import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { STATUSES } from '../../constants';
 import { i18n, NEW_NAME_FIELD } from '../constants';
+import { isAvailableForImport } from '../utils';
 import bulkImportSourceGroupItemFragment from './fragments/bulk_import_source_group_item.fragment.graphql';
+import bulkImportSourceGroupProgressFragment from './fragments/bulk_import_source_group_progress.fragment.graphql';
 import addValidationErrorMutation from './mutations/add_validation_error.mutation.graphql';
 import removeValidationErrorMutation from './mutations/remove_validation_error.mutation.graphql';
 import setImportProgressMutation from './mutations/set_import_progress.mutation.graphql';
+import setImportTargetMutation from './mutations/set_import_target.mutation.graphql';
 import updateImportStatusMutation from './mutations/update_import_status.mutation.graphql';
 import availableNamespacesQuery from './queries/available_namespaces.query.graphql';
 import bulkImportSourceGroupQuery from './queries/bulk_import_source_group.query.graphql';
@@ -34,6 +37,7 @@ function makeGroup(data) {
   };
   const NESTED_OBJECT_FIELDS = {
     import_target: clientTypenames.BulkImportTarget,
+    last_import_target: clientTypenames.BulkImportTarget,
     progress: clientTypenames.BulkImportProgress,
   };
 
@@ -55,6 +59,7 @@ async function checkImportTargetIsValid({ client, newName, targetNamespace, sour
     data: { existingGroup, existingProject },
   } = await client.query({
     query: groupAndProjectQuery,
+    fetchPolicy: 'no-cache',
     variables: {
       fullPath: `${targetNamespace}/${newName}`,
     },
@@ -82,6 +87,7 @@ async function checkImportTargetIsValid({ client, newName, targetNamespace, sour
 }
 
 const localProgressId = (id) => `not-started-${id}`;
+const nextName = (name) => `${name}-1`;
 
 export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGroupsManager }) {
   const groupsManager = new GroupsManager({
@@ -140,17 +146,28 @@ export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGr
                 const { jobId, importState: cachedImportState } =
                   groupsManager.getImportStateFromStorageByGroupId(group.id) ?? {};
 
+                const status = cachedImportState?.status ?? STATUSES.NONE;
+
+                const importTarget =
+                  status === STATUSES.FINISHED && cachedImportState.importTarget
+                    ? {
+                        target_namespace: cachedImportState.importTarget.target_namespace,
+                        new_name: nextName(cachedImportState.importTarget.new_name),
+                      }
+                    : cachedImportState?.importTarget ?? {
+                        new_name: group.full_path,
+                        target_namespace: availableNamespaces[0]?.full_path ?? '',
+                      };
+
                 return makeGroup({
                   ...group,
                   validation_errors: [],
                   progress: {
                     id: jobId ?? localProgressId(group.id),
-                    status: cachedImportState?.status ?? STATUSES.NONE,
-                  },
-                  import_target: cachedImportState?.importTarget ?? {
-                    new_name: group.full_path,
-                    target_namespace: availableNamespaces[0]?.full_path ?? '',
+                    status,
                   },
+                  import_target: importTarget,
+                  last_import_target: cachedImportState?.importTarget ?? null,
                 });
               }),
               pageInfo: {
@@ -161,7 +178,7 @@ export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGr
 
             setTimeout(() => {
               response.nodes.forEach((group) => {
-                if (group.progress.status === STATUSES.NONE) {
+                if (isAvailableForImport(group)) {
                   checkImportTargetIsValid({
                     client,
                     newName: group.import_target.new_name,
@@ -193,32 +210,18 @@ export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGr
           targetNamespace,
           newName,
         });
+
         return makeGroup({
           id: sourceGroupId,
           import_target: {
             target_namespace: targetNamespace,
             new_name: newName,
+            id: sourceGroupId,
           },
         });
       },
 
-      setTargetNamespace: (_, { targetNamespace, sourceGroupId }) =>
-        makeGroup({
-          id: sourceGroupId,
-          import_target: {
-            target_namespace: targetNamespace,
-          },
-        }),
-
-      setNewName: (_, { newName, sourceGroupId }) =>
-        makeGroup({
-          id: sourceGroupId,
-          import_target: {
-            new_name: newName,
-          },
-        }),
-
-      async setImportProgress(_, { sourceGroupId, status, jobId }) {
+      async setImportProgress(_, { sourceGroupId, status, jobId, importTarget }) {
         if (jobId) {
           groupsManager.updateImportProgress(jobId, status);
         }
@@ -229,16 +232,46 @@ export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGr
             id: jobId ?? localProgressId(sourceGroupId),
             status,
           },
+          last_import_target: {
+            __typename: clientTypenames.BulkImportTarget,
+            ...importTarget,
+          },
         });
       },
 
-      async updateImportStatus(_, { id, status }) {
-        groupsManager.updateImportProgress(id, status);
+      async updateImportStatus(_, { id, status: newStatus }, { client, getCacheKey }) {
+        groupsManager.updateImportProgress(id, newStatus);
+
+        const progressItem = client.readFragment({
+          fragment: bulkImportSourceGroupProgressFragment,
+          fragmentName: 'BulkImportSourceGroupProgress',
+          id: getCacheKey({
+            __typename: clientTypenames.BulkImportProgress,
+            id,
+          }),
+        });
+
+        const isInProgress = Boolean(progressItem);
+        const { status: currentStatus } = progressItem ?? {};
+        if (newStatus === STATUSES.FINISHED && isInProgress && currentStatus !== newStatus) {
+          const groups = groupsManager.getImportedGroupsByJobId(id);
+
+          groups.forEach(async ({ id: groupId, importTarget }) => {
+            client.mutate({
+              mutation: setImportTargetMutation,
+              variables: {
+                sourceGroupId: groupId,
+                targetNamespace: importTarget.target_namespace,
+                newName: nextName(importTarget.new_name),
+              },
+            });
+          });
+        }
 
         return {
           __typename: clientTypenames.BulkImportProgress,
           id,
-          status,
+          status: newStatus,
         };
       },
 
@@ -327,10 +360,10 @@ export function createResolvers({ endpoints, sourceUrl, GroupsManager = SourceGr
             return { status: STATUSES.NONE };
           })
           .then((newStatus) =>
-            sourceGroupIds.forEach((sourceGroupId) =>
+            sourceGroupIds.forEach((sourceGroupId, idx) =>
               client.mutate({
                 mutation: setImportProgressMutation,
-                variables: { sourceGroupId, ...newStatus },
+                variables: { sourceGroupId, ...newStatus, importTarget: groups[idx].import_target },
               }),
             ),
           )
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/fragments/bulk_import_source_group_item.fragment.graphql b/app/assets/javascripts/import_entities/import_groups/graphql/fragments/bulk_import_source_group_item.fragment.graphql
index 47675cd1bd0..089340b3c48 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/fragments/bulk_import_source_group_item.fragment.graphql
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/fragments/bulk_import_source_group_item.fragment.graphql
@@ -12,6 +12,10 @@ fragment BulkImportSourceGroupItem on ClientBulkImportSourceGroup {
     target_namespace
     new_name
   }
+  last_import_target {
+    target_namespace
+    new_name
+  }
   validation_errors {
     field
     message
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/mutations/set_import_progress.mutation.graphql b/app/assets/javascripts/import_entities/import_groups/graphql/mutations/set_import_progress.mutation.graphql
index 2ec1269932a..43301554de3 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/mutations/set_import_progress.mutation.graphql
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/mutations/set_import_progress.mutation.graphql
@@ -1,9 +1,23 @@
-mutation setImportProgress($status: String!, $sourceGroupId: String!, $jobId: String) {
-  setImportProgress(status: $status, sourceGroupId: $sourceGroupId, jobId: $jobId) @client {
+mutation setImportProgress(
+  $status: String!
+  $sourceGroupId: String!
+  $jobId: String
+  $importTarget: ImportTargetInput!
+) {
+  setImportProgress(
+    status: $status
+    sourceGroupId: $sourceGroupId
+    jobId: $jobId
+    importTarget: $importTarget
+  ) @client {
     id
     progress {
       id
       status
     }
+    last_import_target {
+      target_namespace
+      new_name
+    }
   }
 }
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
index 97dbdbf518a..7caa37d9ad4 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/services/source_groups_manager.js
@@ -35,15 +35,18 @@ export class SourceGroupsManager {
   }
 
   createImportState(importId, jobConfig) {
-    this.importStates[this.getStorageKey(importId)] = {
+    this.importStates[importId] = {
       status: jobConfig.status,
-      groups: jobConfig.groups.map((g) => ({ importTarget: g.import_target, id: g.id })),
+      groups: jobConfig.groups.map((g) => ({
+        importTarget: { ...g.import_target },
+        id: g.id,
+      })),
     };
     this.saveImportStatesToStorage();
   }
 
   updateImportProgress(importId, status) {
-    const currentState = this.importStates[this.getStorageKey(importId)];
+    const currentState = this.importStates[importId];
     if (!currentState) {
       return;
     }
@@ -52,12 +55,15 @@ export class SourceGroupsManager {
     this.saveImportStatesToStorage();
   }
 
+  getImportedGroupsByJobId(jobId) {
+    return this.importStates[jobId]?.groups ?? [];
+  }
+
   getImportStateFromStorageByGroupId(groupId) {
-    const PREFIX = this.getStorageKey('');
     const [jobId, importState] =
-      Object.entries(this.importStates).find(
-        ([key, state]) => key.startsWith(PREFIX) && state.groups.some((g) => g.id === groupId),
-      ) ?? [];
+      Object.entries(this.importStates)
+        .reverse()
+        .find(([, state]) => state.groups.some((g) => g.id === groupId)) ?? [];
 
     if (!jobId) {
       return null;
@@ -67,10 +73,6 @@ export class SourceGroupsManager {
     return { jobId, importState: { ...group, status: importState.status } };
   }
 
-  getStorageKey(importId) {
-    return `${this.sourceUrl}|${importId}`;
-  }
-
   saveImportStatesToStorage = debounce(() => {
     try {
       // storage might be changed in other tab so fetch first
diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/typedefs.graphql b/app/assets/javascripts/import_entities/import_groups/graphql/typedefs.graphql
index c830aaa75e6..6ef4bbafec0 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/typedefs.graphql
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/typedefs.graphql
@@ -30,6 +30,7 @@ type ClientBulkImportSourceGroup {
   full_name: String!
   progress: ClientBulkImportProgress!
   import_target: ClientBulkImportTarget!
+  last_import_target: ClientBulkImportTarget
   validation_errors: [ClientBulkImportValidationError!]!
 }
 
@@ -50,11 +51,21 @@ extend type Query {
   availableNamespaces: [ClientBulkImportAvailableNamespace!]!
 }
 
+input InputTargetInput {
+  target_namespace: String!
+  new_name: String!
+}
+
 extend type Mutation {
   setNewName(newName: String, sourceGroupId: ID!): ClientBulkImportSourceGroup!
   setTargetNamespace(targetNamespace: String, sourceGroupId: ID!): ClientBulkImportSourceGroup!
   importGroups(sourceGroupIds: [ID!]!): [ClientBulkImportSourceGroup!]!
-  setImportProgress(id: ID, status: String!): ClientBulkImportSourceGroup!
+  setImportProgress(
+    id: ID
+    status: String!
+    jobId: String
+    importTarget: ImportTargetInput!
+  ): ClientBulkImportSourceGroup!
   updateImportProgress(id: ID, status: String!): ClientBulkImportProgress
   addValidationError(
     sourceGroupId: ID!
diff --git a/app/assets/javascripts/import_entities/import_groups/utils.js b/app/assets/javascripts/import_entities/import_groups/utils.js
index b451008b6f9..a1baeaf39dd 100644
--- a/app/assets/javascripts/import_entities/import_groups/utils.js
+++ b/app/assets/javascripts/import_entities/import_groups/utils.js
@@ -1,3 +1,4 @@
+import { STATUSES } from '../constants';
 import { NEW_NAME_FIELD } from './constants';
 
 export function isNameValid(group, validationRegex) {
@@ -11,3 +12,11 @@ export function getInvalidNameValidationMessage(group) {
 export function isInvalid(group, validationRegex) {
   return Boolean(!isNameValid(group, validationRegex) || getInvalidNameValidationMessage(group));
 }
+
+export function isFinished(group) {
+  return group.progress.status === STATUSES.FINISHED;
+}
+
+export function isAvailableForImport(group) {
+  return [STATUSES.NONE, STATUSES.FINISHED].some((status) => group.progress.status === status);
+}
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index 14d08caef34..0cd3519bcec 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -32,7 +32,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['filter', 'repositories', 'namespaces', 'defaultTargetNamespace']),
+    ...mapState(['filter', 'repositories', 'namespaces', 'defaultTargetNamespace', 'pageInfo']),
     ...mapGetters([
       'isLoading',
       'isImportingAnyRepo',
@@ -43,7 +43,7 @@ export default {
     ]),
 
     pagePaginationStateKey() {
-      return `${this.filter}-${this.repositories.length}`;
+      return `${this.filter}-${this.repositories.length}-${this.pageInfo.page}`;
     },
 
     availableNamespaces() {
diff --git a/app/assets/javascripts/import_entities/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index 5cbc6e85bf3..92be028b8a9 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
@@ -53,7 +53,6 @@ const importAll = ({ state, dispatch }) => {
 
 const fetchReposFactory = ({ reposPath = isRequired() }) => ({ state, commit }) => {
   const nextPage = state.pageInfo.page + 1;
-  commit(types.SET_PAGE, nextPage);
   commit(types.REQUEST_REPOS);
 
   const { provider, filter } = state;
@@ -67,11 +66,10 @@ const fetchReposFactory = ({ reposPath = isRequired() }) => ({ state, commit })
       }),
     )
     .then(({ data }) => {
+      commit(types.SET_PAGE, nextPage);
       commit(types.RECEIVE_REPOS_SUCCESS, convertObjectPropsToCamelCase(data, { deep: true }));
     })
     .catch((e) => {
-      commit(types.SET_PAGE, nextPage - 1);
-
       if (hasRedirectInError(e)) {
         redirectToUrlInError(e);
       } else if (tooManyRequests(e)) {
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutations.js b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
index c5e1922597a..45f7a684161 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutations.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
@@ -9,7 +9,7 @@ const makeNewImportedProject = (importedProject) => ({
     sanitizedName: importedProject.name,
     providerLink: importedProject.providerLink,
   },
-  importedProject,
+  importedProject: { ...importedProject },
 });
 
 const makeNewIncompatibleProject = (project) => ({
@@ -63,15 +63,16 @@ export default {
         factory: makeNewIncompatibleProject,
       });
 
-      state.repositories = [
-        ...newImportedProjects,
-        ...state.repositories,
-        ...repositories.providerRepos.map((project) => ({
+      const existingProjects = [...newImportedProjects, ...state.repositories];
+      const existingProjectNames = new Set(existingProjects.map((p) => p.importSource.fullName));
+      const newProjects = repositories.providerRepos
+        .filter((project) => !existingProjectNames.has(project.fullName))
+        .map((project) => ({
           importSource: project,
           importedProject: null,
-        })),
-        ...newIncompatibleProjects,
-      ];
+        }));
+
+      state.repositories = [...existingProjects, ...newProjects, ...newIncompatibleProjects];
 
       if (incompatibleRepos.length === 0 && repositories.providerRepos.length === 0) {
         state.pageInfo.page -= 1;
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index 8644ff3a249..6e6461cd7a9 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -24,7 +24,7 @@ export default () => {
   } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
+    defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
   });
 
   return new Vue({
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
deleted file mode 100644
index b42264c870b..00000000000
--- a/app/assets/javascripts/init_changes_dropdown.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import $ from 'jquery';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { stickyMonitor } from './lib/utils/sticky';
-
-export default (stickyTop) => {
-  stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
-
-  initDeprecatedJQueryDropdown($('.js-diff-stats-dropdown'), {
-    filterable: true,
-    remoteFilter: false,
-  });
-};
diff --git a/app/assets/javascripts/init_deprecated_notes.js b/app/assets/javascripts/init_deprecated_notes.js
new file mode 100644
index 00000000000..5f918b0d2f5
--- /dev/null
+++ b/app/assets/javascripts/init_deprecated_notes.js
@@ -0,0 +1,10 @@
+import Notes from './deprecated_notes';
+
+export default () => {
+  const dataEl = document.querySelector('.js-notes-data');
+  const { notesUrl, notesIds, now, diffView, enableGFM } = JSON.parse(dataEl.innerHTML);
+
+  // Create a singleton so that we don't need to assign
+  // into the window object, we can just access the current isntance with Notes.instance
+  Notes.initialize(notesUrl, notesIds, now, diffView, enableGFM);
+};
diff --git a/app/assets/javascripts/init_diff_stats_dropdown.js b/app/assets/javascripts/init_diff_stats_dropdown.js
new file mode 100644
index 00000000000..27df761a103
--- /dev/null
+++ b/app/assets/javascripts/init_diff_stats_dropdown.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import DiffStatsDropdown from '~/vue_shared/components/diff_stats_dropdown.vue';
+import { stickyMonitor } from './lib/utils/sticky';
+
+export const initDiffStatsDropdown = (stickyTop) => {
+  if (stickyTop) {
+    stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
+  }
+
+  const el = document.querySelector('.js-diff-stats-dropdown');
+
+  if (!el) {
+    return false;
+  }
+
+  const { changed, added, deleted, files } = el.dataset;
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(DiffStatsDropdown, {
+        props: {
+          changed: parseInt(changed, 10),
+          added: parseInt(added, 10),
+          deleted: parseInt(deleted, 10),
+          files: JSON.parse(files),
+        },
+      }),
+  });
+};
diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 17c73fdf1c3..7a70d893008 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -1,9 +1,7 @@
 /* eslint-disable no-new */
 
-import { mountSidebarLabels, getSidebarOptions } from '~/sidebar/mount_sidebar';
+import { getSidebarOptions } from '~/sidebar/mount_sidebar';
 import IssuableContext from './issuable_context';
-import LabelsSelect from './labels_select';
-import MilestoneSelect from './milestone_select';
 import Sidebar from './right_sidebar';
 
 export default () => {
@@ -13,12 +11,6 @@ export default () => {
 
   const sidebarOptions = getSidebarOptions(sidebarOptEl);
 
-  new MilestoneSelect({
-    full_path: sidebarOptions.fullPath,
-  });
-  new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
   Sidebar.initialize();
-
-  mountSidebarLabels();
 };
diff --git a/app/assets/javascripts/init_notes.js b/app/assets/javascripts/init_notes.js
deleted file mode 100644
index a77828e8cf2..00000000000
--- a/app/assets/javascripts/init_notes.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Notes from './notes';
-
-export default () => {
-  const dataEl = document.querySelector('.js-notes-data');
-  const { notesUrl, notesIds, now, diffView, enableGFM } = JSON.parse(dataEl.innerHTML);
-
-  // Create a singleton so that we don't need to assign
-  // into the window object, we can just access the current isntance with Notes.instance
-  Notes.initialize(notesUrl, notesIds, now, diffView, enableGFM);
-};
diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
index 11e9b25f9a3..1cc5a185f03 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -37,7 +37,7 @@ const issueTransitionOptions = [
     help: s__(
       'JiraService|Automatically transitions Jira issues to the "Done" category. %{linkStart}Learn more%{linkEnd}',
     ),
-    link: helpPagePath('integration/jira/index.html', {
+    link: helpPagePath('integration/jira/issues.html', {
       anchor: 'automatic-issue-transitions',
     }),
   },
@@ -47,7 +47,7 @@ const issueTransitionOptions = [
     help: s__(
       'JiraService|Set a custom final state by using transition IDs. %{linkStart}Learn about transition IDs%{linkEnd}',
     ),
-    link: helpPagePath('integration/jira/index.html', {
+    link: helpPagePath('integration/jira/issues.html', {
       anchor: 'custom-issue-transitions',
     }),
   },
diff --git a/app/assets/javascripts/invite_members/components/import_a_project_modal.vue b/app/assets/javascripts/invite_members/components/import_a_project_modal.vue
new file mode 100644
index 00000000000..d71468284ca
--- /dev/null
+++ b/app/assets/javascripts/invite_members/components/import_a_project_modal.vue
@@ -0,0 +1,157 @@
+<script>
+import { GlButton, GlFormGroup, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { importProjectMembers } from '~/api/projects_api';
+import { s__, __, sprintf } from '~/locale';
+import ProjectSelect from './project_select.vue';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlModal,
+    GlSprintf,
+    ProjectSelect,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  props: {
+    projectId: {
+      type: String,
+      required: true,
+    },
+    projectName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      projectToBeImported: {},
+      invalidFeedbackMessage: '',
+      isLoading: false,
+    };
+  },
+  computed: {
+    modalIntro() {
+      return sprintf(this.$options.i18n.modalIntro, {
+        name: this.projectName,
+      });
+    },
+    importDisabled() {
+      return Object.keys(this.projectToBeImported).length === 0;
+    },
+    validationState() {
+      return this.invalidFeedbackMessage === '' ? null : false;
+    },
+  },
+  methods: {
+    submitImport() {
+      this.isLoading = true;
+      return importProjectMembers(this.projectId, this.projectToBeImported.id)
+        .then(this.showToastMessage)
+        .catch(this.showErrorAlert)
+        .finally(() => {
+          this.isLoading = false;
+          this.projectToBeImported = {};
+        });
+    },
+    closeModal() {
+      this.invalidFeedbackMessage = '';
+
+      this.$refs.modal.hide();
+    },
+    showToastMessage() {
+      this.$toast.show(this.$options.i18n.successMessage, this.$options.toastOptions);
+
+      this.closeModal();
+    },
+    showErrorAlert() {
+      this.invalidFeedbackMessage = this.$options.i18n.defaultError;
+    },
+  },
+  toastOptions() {
+    return {
+      onComplete: () => {
+        this.projectToBeImported = {};
+      },
+    };
+  },
+  i18n: {
+    buttonText: s__('ImportAProjectModal|Import from a project'),
+    projectLabel: __('Project'),
+    modalTitle: s__('ImportAProjectModal|Import members from another project'),
+    modalIntro: s__(
+      "ImportAProjectModal|You're importing members to the %{strongStart}%{name}%{strongEnd} project.",
+    ),
+    modalHelpText: s__(
+      'ImportAProjectModal|Only project members (not group members) are imported, and they get the same permissions as the project you import from.',
+    ),
+    modalPrimaryButton: s__('ImportAProjectModal|Import project members'),
+    modalCancelButton: __('Cancel'),
+    defaultError: s__('ImportAProjectModal|Unable to import project members'),
+    successMessage: s__('ImportAProjectModal|Successfully imported'),
+  },
+  projectSelectLabelId: 'project-select',
+  modalId: uniqueId('import-a-project-modal-'),
+  formClasses: 'gl-mt-3 gl-sm-w-auto gl-w-full',
+  buttonClasses: 'gl-w-full',
+};
+</script>
+
+<template>
+  <form :class="$options.formClasses">
+    <gl-button v-gl-modal="$options.modalId" :class="$options.buttonClasses" variant="default">{{
+      $options.i18n.buttonText
+    }}</gl-button>
+
+    <gl-modal
+      ref="modal"
+      :modal-id="$options.modalId"
+      size="sm"
+      :title="$options.i18n.modalTitle"
+      ok-variant="danger"
+      footer-class="gl-bg-gray-10 gl-p-5"
+    >
+      <div>
+        <p ref="modalIntro">
+          <gl-sprintf :message="modalIntro">
+            <template #strong="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+          </gl-sprintf>
+        </p>
+        <gl-form-group
+          :invalid-feedback="invalidFeedbackMessage"
+          :state="validationState"
+          data-testid="form-group"
+        >
+          <label :id="$options.projectSelectLabelId" class="col-form-label">{{
+            $options.i18n.projectLabel
+          }}</label>
+          <project-select v-model="projectToBeImported" />
+        </gl-form-group>
+        <p>{{ $options.i18n.modalHelpText }}</p>
+      </div>
+      <template #modal-footer>
+        <div
+          class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0"
+        >
+          <gl-button data-testid="cancel-button" @click="closeModal">
+            {{ $options.i18n.modalCancelButton }}
+          </gl-button>
+          <div class="gl-mr-3"></div>
+          <gl-button
+            :disabled="importDisabled"
+            :loading="isLoading"
+            variant="success"
+            data-testid="import-button"
+            @click="submitImport"
+            >{{ $options.i18n.modalPrimaryButton }}</gl-button
+          >
+        </div>
+      </template>
+    </gl-modal>
+  </form>
+</template>
diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
index ec7d466336e..05be427742c 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
@@ -65,7 +65,7 @@ export default {
       if (this.event && this.label) {
         return {
           ...baseAttributes,
-          'data-track-event': this.event,
+          'data-track-action': this.event,
           'data-track-label': this.label,
         };
       }
diff --git a/app/assets/javascripts/invite_members/components/project_select.vue b/app/assets/javascripts/invite_members/components/project_select.vue
new file mode 100644
index 00000000000..b7a3918813b
--- /dev/null
+++ b/app/assets/javascripts/invite_members/components/project_select.vue
@@ -0,0 +1,143 @@
+<script>
+import {
+  GlAvatarLabeled,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownText,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
+import { getProjects } from '~/rest_api';
+import { SEARCH_DELAY, GROUP_FILTERS } from '../constants';
+
+export default {
+  name: 'ProjectSelect',
+  components: {
+    GlAvatarLabeled,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownText,
+    GlSearchBoxByType,
+  },
+  model: {
+    prop: 'selectedProject',
+  },
+  props: {
+    groupsFilter: {
+      type: String,
+      required: false,
+      default: GROUP_FILTERS.ALL,
+      validator: (value) => Object.values(GROUP_FILTERS).includes(value),
+    },
+    parentGroupId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isFetching: false,
+      projects: [],
+      selectedProject: {},
+      searchTerm: '',
+      errorMessage: '',
+    };
+  },
+  computed: {
+    selectedProjectName() {
+      return this.selectedProject.name || this.$options.i18n.dropdownText;
+    },
+    isFetchResultEmpty() {
+      return this.projects.length === 0 && !this.isFetching;
+    },
+  },
+  watch: {
+    searchTerm() {
+      this.retrieveProjects();
+    },
+  },
+  mounted() {
+    this.retrieveProjects();
+  },
+  methods: {
+    retrieveProjects: debounce(function debouncedRetrieveProjects() {
+      this.isFetching = true;
+      this.errorMessage = '';
+      return this.fetchProjects()
+        .then((response) => {
+          this.projects = response.data.map((project) => ({
+            ...convertObjectPropsToCamelCase(project),
+            name: project.name_with_namespace,
+          }));
+        })
+        .catch(() => {
+          this.errorMessage = this.$options.i18n.errorFetchingProjects;
+        })
+        .finally(() => {
+          this.isFetching = false;
+        });
+    }, SEARCH_DELAY),
+    fetchProjects() {
+      return getProjects(this.searchTerm, this.$options.defaultFetchOptions);
+    },
+    selectProject(project) {
+      this.selectedProject = project;
+
+      this.$emit('input', this.selectedProject);
+    },
+  },
+  i18n: {
+    dropdownText: s__('ProjectSelect|Select a project'),
+    searchPlaceholder: s__('ProjectSelect|Search projects'),
+    emptySearchResult: s__('ProjectSelect|No matching results'),
+    errorFetchingProjects: s__(
+      'ProjectSelect|There was an error fetching the projects. Please try again.',
+    ),
+  },
+  defaultFetchOptions: {
+    exclude_internal: true,
+    active: true,
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-dropdown
+      data-testid="project-select-dropdown"
+      :text="selectedProjectName"
+      toggle-class="gl-mb-2"
+      block
+      menu-class="gl-w-full!"
+    >
+      <gl-search-box-by-type
+        v-model="searchTerm"
+        :is-loading="isFetching"
+        :placeholder="$options.i18n.searchPlaceholder"
+        data-qa-selector="project_select_dropdown_search_field"
+      />
+      <gl-dropdown-item
+        v-for="project in projects"
+        :key="project.id"
+        :name="project.name"
+        @click="selectProject(project)"
+      >
+        <gl-avatar-labeled
+          :label="project.name"
+          :src="project.avatarUrl"
+          :entity-id="project.id"
+          :entity-name="project.name"
+          :size="32"
+        />
+      </gl-dropdown-item>
+      <gl-dropdown-text v-if="errorMessage" data-testid="error-message">
+        <span class="gl-text-gray-500">{{ errorMessage }}</span>
+      </gl-dropdown-text>
+      <gl-dropdown-text v-else-if="isFetchResultEmpty" data-testid="empty-result-message">
+        <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span>
+      </gl-dropdown-text>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/invite_members/init_import_a_project_modal.js b/app/assets/javascripts/invite_members/init_import_a_project_modal.js
new file mode 100644
index 00000000000..954347467de
--- /dev/null
+++ b/app/assets/javascripts/invite_members/init_import_a_project_modal.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import ImportAProjectModal from '~/invite_members/components/import_a_project_modal.vue';
+
+export default function initImportAProjectModal() {
+  const el = document.querySelector('.js-import-a-project-modal');
+
+  if (!el) {
+    return false;
+  }
+
+  const { projectId, projectName } = el.dataset;
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(ImportAProjectModal, {
+        props: {
+          projectId,
+          projectName,
+        },
+      }),
+  });
+}
diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 5c880cbfad8..1c88f8dfdca 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -63,7 +63,7 @@ export default {
         </gl-sprintf>
         <gl-sprintf
           v-else
-          :message="n__('1 merge request selected', '%d merge request selected', issuableCount)"
+          :message="n__('1 merge request selected', '%d merge requests selected', issuableCount)"
         >
           <template #issuableCount>{{ issuableCount }}</template>
         </gl-sprintf>
@@ -89,7 +89,7 @@ export default {
         :href="exportCsvPath"
         data-method="post"
         :data-qa-selector="`export_${issuableType}_button`"
-        data-track-event="click_button"
+        data-track-action="click_button"
         :data-track-label="`export_${issuableType}_csv`"
       >
         <gl-sprintf :message="__('Export %{name}')">
diff --git a/app/assets/javascripts/issuable_list/components/issuable_item.vue b/app/assets/javascripts/issuable_list/components/issuable_item.vue
index 29dd0b7fed5..df9d5c86a4b 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_item.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_item.vue
@@ -69,6 +69,9 @@ export default {
     isIssuableUrlExternal() {
       return isExternal(this.webUrl);
     },
+    reference() {
+      return this.issuable.reference || `${this.issuableSymbol}${this.issuable.iid}`;
+    },
     labels() {
       return this.issuable.labels?.nodes || this.issuable.labels || [];
     },
@@ -201,9 +204,9 @@ export default {
         </div>
         <div class="issuable-info">
           <slot v-if="hasSlotContents('reference')" name="reference"></slot>
-          <span v-else data-testid="issuable-reference" class="issuable-reference"
-            >{{ issuableSymbol }}{{ issuable.iid }}</span
-          >
+          <span v-else data-testid="issuable-reference" class="issuable-reference">
+            {{ reference }}
+          </span>
           <span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3">
             <span aria-hidden="true">&middot;</span>
             <span
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index b7e24a8b17e..2c9a512acdb 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlIntersectionObserver } from '@gitlab/ui';
+import { GlIcon, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
@@ -32,6 +32,9 @@ export default {
     formComponent,
     PinnedLinks,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     endpoint: {
       required: true,
@@ -183,6 +186,11 @@ export default {
       required: false,
       default: true,
     },
+    isHidden: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     const store = new Store({
@@ -508,6 +516,15 @@ export default {
               <span v-if="isConfidential" data-testid="confidential" class="issuable-warning-icon">
                 <gl-icon name="eye-slash" :aria-label="__('Confidential')" />
               </span>
+              <span
+                v-if="isHidden"
+                v-gl-tooltip
+                :title="__('This issue is hidden because its author has been banned')"
+                data-testid="hidden"
+                class="issuable-warning-icon"
+              >
+                <gl-icon name="spam" />
+              </span>
               <p
                 class="gl-font-weight-bold gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis gl-my-0"
                 :title="state.titleText"
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 0812392f804..4c6a1478e95 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -123,6 +123,7 @@ export default {
       }
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -136,7 +137,7 @@ export default {
   >
     <div
       ref="gfm-content"
-      v-safe-html="descriptionHtml"
+      v-safe-html:[$options.safeHtmlConfig]="descriptionHtml"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index 96f5a7c88e0..f3c2a31bd5b 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { __, sprintf } from '~/locale';
 
 export default {
@@ -24,5 +23,8 @@ export default {
 </script>
 
 <template>
-  <div class="alert alert-danger" v-html="alertMessage"></div>
+  <div
+    class="alert alert-danger"
+    v-html="alertMessage /* eslint-disable-line vue/no-v-html */"
+  ></div>
 </template>
diff --git a/app/assets/javascripts/issues_list/components/issuable.vue b/app/assets/javascripts/issues_list/components/issuable.vue
index 60b01a6d37f..6dc7460b037 100644
--- a/app/assets/javascripts/issues_list/components/issuable.vue
+++ b/app/assets/javascripts/issues_list/components/issuable.vue
@@ -315,7 +315,7 @@ export default {
             <span
               v-if="isJiraIssue"
               v-safe-html="jiraLogo"
-              class="svg-container jira-logo-container"
+              class="svg-container logo-container"
               data-testid="jira-logo"
             ></span>
             {{ referencePath }}
diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index ee0429c0432..8e37339fca6 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -9,11 +9,12 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import { cloneDeep } from 'lodash';
 import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
+import getIssuesCountsQuery from 'ee_else_ce/issues_list/queries/get_issues_counts.query.graphql';
 import createFlash from '~/flash';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { ITEM_TYPE } from '~/groups/constants';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
@@ -21,7 +22,6 @@ import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
 import {
   CREATED_DESC,
   i18n,
-  issuesCountSmartQueryBase,
   MAX_LIST_SIZE,
   PAGE_SIZE,
   PARAM_DUE_DATE,
@@ -117,9 +117,15 @@ export default {
     exportCsvPath: {
       default: '',
     },
+    fullPath: {
+      default: '',
+    },
     groupEpicsPath: {
       default: '',
     },
+    hasAnyIssues: {
+      default: false,
+    },
     hasBlockedIssuesFeature: {
       default: false,
     },
@@ -132,17 +138,14 @@ export default {
     hasMultipleIssueAssigneesFeature: {
       default: false,
     },
-    hasProjectIssues: {
-      default: false,
-    },
     initialEmail: {
       default: '',
     },
-    isSignedIn: {
+    isProject: {
       default: false,
     },
-    issuesPath: {
-      default: '',
+    isSignedIn: {
+      default: false,
     },
     jiraIntegrationPath: {
       default: '',
@@ -150,9 +153,6 @@ export default {
     newIssuePath: {
       default: '',
     },
-    projectPath: {
-      default: '',
-    },
     rssPath: {
       default: '',
     },
@@ -164,18 +164,16 @@ export default {
     },
   },
   data() {
-    const filterTokens = getFilterTokens(window.location.search);
     const state = getParameterByName(PARAM_STATE);
     const sortKey = getSortKey(getParameterByName(PARAM_SORT));
     const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
 
-    this.initialFilterTokens = cloneDeep(filterTokens);
-
     return {
       dueDateFilter: getDueDateValue(getParameterByName(PARAM_DUE_DATE)),
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
-      filterTokens,
+      filterTokens: getFilterTokens(window.location.search),
       issues: [],
+      issuesCounts: {},
       pageInfo: {},
       pageParams: getInitialPageParams(sortKey),
       showBulkEditSidebar: false,
@@ -189,61 +187,47 @@ export default {
       variables() {
         return this.queryVariables;
       },
-      update: ({ project }) => project?.issues.nodes ?? [],
+      update(data) {
+        return data[this.namespace]?.issues.nodes ?? [];
+      },
       result({ data }) {
-        this.pageInfo = data.project?.issues.pageInfo ?? {};
+        this.pageInfo = data[this.namespace]?.issues.pageInfo ?? {};
         this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
       },
       error(error) {
         createFlash({ message: this.$options.i18n.errorFetchingIssues, captureError: true, error });
       },
       skip() {
-        return !this.hasProjectIssues;
+        return !this.hasAnyIssues;
       },
       debounce: 200,
     },
-    countOpened: {
-      ...issuesCountSmartQueryBase,
+    issuesCounts: {
+      query: getIssuesCountsQuery,
       variables() {
-        return {
-          ...this.queryVariables,
-          state: IssuableStates.Opened,
-        };
+        return this.queryVariables;
       },
-      skip() {
-        return !this.hasProjectIssues;
+      update(data) {
+        return data[this.namespace] ?? {};
       },
-    },
-    countClosed: {
-      ...issuesCountSmartQueryBase,
-      variables() {
-        return {
-          ...this.queryVariables,
-          state: IssuableStates.Closed,
-        };
+      error(error) {
+        createFlash({ message: this.$options.i18n.errorFetchingCounts, captureError: true, error });
       },
       skip() {
-        return !this.hasProjectIssues;
+        return !this.hasAnyIssues;
       },
-    },
-    countAll: {
-      ...issuesCountSmartQueryBase,
-      variables() {
-        return {
-          ...this.queryVariables,
-          state: IssuableStates.All,
-        };
-      },
-      skip() {
-        return !this.hasProjectIssues;
+      debounce: 200,
+      context: {
+        isSingleRequest: true,
       },
     },
   },
   computed: {
     queryVariables() {
       return {
+        fullPath: this.fullPath,
+        isProject: this.isProject,
         isSignedIn: this.isSignedIn,
-        projectPath: this.projectPath,
         search: this.searchQuery,
         sort: this.sortKey,
         state: this.state,
@@ -251,6 +235,9 @@ export default {
         ...this.apiFilterParams,
       };
     },
+    namespace() {
+      return this.isProject ? ITEM_TYPE.PROJECT : ITEM_TYPE.GROUP;
+    },
     hasSearch() {
       return this.searchQuery || Object.keys(this.urlFilterParams).length;
     },
@@ -263,6 +250,9 @@ export default {
     isOpenTab() {
       return this.state === IssuableStates.Opened;
     },
+    showCsvButtons() {
+      return this.isProject && this.isSignedIn;
+    },
     apiFilterParams() {
       return convertToApiParams(this.filterTokens);
     },
@@ -405,10 +395,11 @@ export default {
       return getSortOptions(this.hasIssueWeightsFeature, this.hasBlockedIssuesFeature);
     },
     tabCounts() {
+      const { openedIssues, closedIssues, allIssues } = this.issuesCounts;
       return {
-        [IssuableStates.Opened]: this.countOpened,
-        [IssuableStates.Closed]: this.countClosed,
-        [IssuableStates.All]: this.countAll,
+        [IssuableStates.Opened]: openedIssues?.count,
+        [IssuableStates.Closed]: closedIssues?.count,
+        [IssuableStates.All]: allIssues?.count,
       };
     },
     currentTabCount() {
@@ -465,39 +456,41 @@ export default {
       return this.$apollo
         .query({
           query: searchLabelsQuery,
-          variables: { projectPath: this.projectPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.labels.nodes);
+        .then(({ data }) => data[this.namespace]?.labels.nodes);
     },
     fetchMilestones(search) {
       return this.$apollo
         .query({
           query: searchMilestonesQuery,
-          variables: { projectPath: this.projectPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.milestones.nodes);
+        .then(({ data }) => data[this.namespace]?.milestones.nodes);
     },
     fetchIterations(search) {
       const id = Number(search);
       const variables =
         !search || Number.isNaN(id)
-          ? { projectPath: this.projectPath, search }
-          : { projectPath: this.projectPath, id };
+          ? { fullPath: this.fullPath, search, isProject: this.isProject }
+          : { fullPath: this.fullPath, id, isProject: this.isProject };
 
       return this.$apollo
         .query({
           query: searchIterationsQuery,
           variables,
         })
-        .then(({ data }) => data.project.iterations.nodes);
+        .then(({ data }) => data[this.namespace]?.iterations.nodes);
     },
     fetchUsers(search) {
       return this.$apollo
         .query({
           query: searchUsersQuery,
-          variables: { projectPath: this.projectPath, search },
+          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data.project.projectMembers.nodes.map((member) => member.user));
+        .then(({ data }) =>
+          data[this.namespace]?.[`${this.namespace}Members`].nodes.map((member) => member.user),
+        );
     },
     getExportCsvPathWithQuery() {
       return `${this.exportCsvPath}${window.location.search}`;
@@ -578,19 +571,20 @@ export default {
       }
 
       return axios
-        .put(joinPaths(this.issuesPath, issueToMove.iid, 'reorder'), {
+        .put(joinPaths(issueToMove.webPath, 'reorder'), {
           move_before_id: isMovingToBeginning ? null : getIdFromGraphQLId(moveBeforeId),
           move_after_id: isMovingToEnd ? null : getIdFromGraphQLId(moveAfterId),
+          group_full_path: this.isProject ? undefined : this.fullPath,
         })
         .then(() => {
           const serializedVariables = JSON.stringify(this.queryVariables);
-          this.$apollo.mutate({
+          return this.$apollo.mutate({
             mutation: reorderIssuesMutation,
-            variables: { oldIndex, newIndex, serializedVariables },
+            variables: { oldIndex, newIndex, namespace: this.namespace, serializedVariables },
           });
         })
-        .catch(() => {
-          createFlash({ message: this.$options.i18n.reorderError });
+        .catch((error) => {
+          createFlash({ message: this.$options.i18n.reorderError, captureError: true, error });
         });
     },
     handleSort(sortKey) {
@@ -607,13 +601,13 @@ export default {
 </script>
 
 <template>
-  <div v-if="hasProjectIssues">
+  <div v-if="hasAnyIssues">
     <issuable-list
-      :namespace="projectPath"
+      :namespace="fullPath"
       recent-searches-storage-key="issues"
       :search-input-placeholder="$options.i18n.searchPlaceholder"
       :search-tokens="searchTokens"
-      :initial-filter-value="initialFilterTokens"
+      :initial-filter-value="filterTokens"
       :sort-options="sortOptions"
       :initial-sort-by="sortKey"
       :issuables="issues"
@@ -653,7 +647,7 @@ export default {
           :aria-label="$options.i18n.calendarLabel"
         />
         <csv-import-export-buttons
-          v-if="isSignedIn"
+          v-if="showCsvButtons"
           class="gl-md-mr-3"
           :export-csv-path="exportCsvPathWithQuery"
           :issuable-count="currentTabCount"
@@ -766,6 +760,7 @@ export default {
           {{ $options.i18n.newIssueLabel }}
         </gl-button>
         <csv-import-export-buttons
+          v-if="showCsvButtons"
           class="gl-mr-3"
           :export-csv-path="exportCsvPathWithQuery"
           :issuable-count="currentTabCount"
diff --git a/app/assets/javascripts/issues_list/constants.js b/app/assets/javascripts/issues_list/constants.js
index 3f5b0d1feb5..5bdc1bd9f90 100644
--- a/app/assets/javascripts/issues_list/constants.js
+++ b/app/assets/javascripts/issues_list/constants.js
@@ -1,5 +1,3 @@
-import getIssuesCountQuery from 'ee_else_ce/issues_list/queries/get_issues_count.query.graphql';
-import createFlash from '~/flash';
 import { __, s__ } from '~/locale';
 import {
   FILTER_ANY,
@@ -22,6 +20,7 @@ const MILESTONE_DUE = 'milestone_due';
 const POPULARITY = 'popularity';
 const WEIGHT = 'weight';
 const LABEL_PRIORITY = 'label_priority';
+const TITLE = 'title';
 export const RELATIVE_POSITION = 'relative_position';
 export const LOADING_LIST_ITEMS_LENGTH = 8;
 export const PAGE_SIZE = 20;
@@ -43,6 +42,8 @@ export const sortOrderMap = {
   relative_position: { order_by: RELATIVE_POSITION, sort: ASC },
   weight_desc: { order_by: WEIGHT, sort: DESC },
   weight: { order_by: WEIGHT, sort: ASC },
+  title: { order_by: TITLE, sort: ASC },
+  title_desc: { order_by: TITLE, sort: DESC },
 };
 
 export const availableSortOptionsJira = [
@@ -146,6 +147,8 @@ export const POPULARITY_DESC = 'POPULARITY_DESC';
 export const PRIORITY_ASC = 'PRIORITY_ASC';
 export const PRIORITY_DESC = 'PRIORITY_DESC';
 export const RELATIVE_POSITION_ASC = 'RELATIVE_POSITION_ASC';
+export const TITLE_ASC = 'TITLE_ASC';
+export const TITLE_DESC = 'TITLE_DESC';
 export const UPDATED_ASC = 'UPDATED_ASC';
 export const UPDATED_DESC = 'UPDATED_DESC';
 export const WEIGHT_ASC = 'WEIGHT_ASC';
@@ -163,6 +166,7 @@ const LABEL_PRIORITY_ASC_SORT = 'label_priority_asc';
 const POPULARITY_ASC_SORT = 'popularity_asc';
 const WEIGHT_DESC_SORT = 'weight_desc';
 const BLOCKING_ISSUES_DESC_SORT = 'blocking_issues_desc';
+const TITLE_DESC_SORT = 'title_desc';
 
 export const urlSortParams = {
   [PRIORITY_ASC]: PRIORITY_ASC_SORT,
@@ -183,6 +187,8 @@ export const urlSortParams = {
   [WEIGHT_ASC]: WEIGHT,
   [WEIGHT_DESC]: WEIGHT_DESC_SORT,
   [BLOCKING_ISSUES_DESC]: BLOCKING_ISSUES_DESC_SORT,
+  [TITLE_ASC]: TITLE,
+  [TITLE_DESC]: TITLE_DESC_SORT,
 };
 
 export const MAX_LIST_SIZE = 10;
@@ -351,15 +357,3 @@ export const filters = {
     },
   },
 };
-
-export const issuesCountSmartQueryBase = {
-  query: getIssuesCountQuery,
-  context: {
-    isSingleRequest: true,
-  },
-  update: ({ project }) => project?.issues.count,
-  error(error) {
-    createFlash({ message: i18n.errorFetchingCounts, captureError: true, error });
-  },
-  debounce: 200,
-};
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index dcc7ee72273..e89e3e8e681 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -85,17 +85,17 @@ export function mountIssuesListApp() {
 
   const resolvers = {
     Mutation: {
-      reorderIssues: (_, { oldIndex, newIndex, serializedVariables }, { cache }) => {
+      reorderIssues: (_, { oldIndex, newIndex, namespace, serializedVariables }, { cache }) => {
         const variables = JSON.parse(serializedVariables);
         const sourceData = cache.readQuery({ query: getIssuesQuery, variables });
 
         const data = produce(sourceData, (draftData) => {
-          const issues = draftData.project.issues.nodes.slice();
+          const issues = draftData[namespace].issues.nodes.slice();
           const issueToMove = issues[oldIndex];
           issues.splice(oldIndex, 1);
           issues.splice(newIndex, 0, issueToMove);
 
-          draftData.project.issues.nodes = issues;
+          draftData[namespace].issues.nodes = issues;
         });
 
         cache.writeQuery({ query: getIssuesQuery, variables, data });
@@ -118,23 +118,23 @@ export function mountIssuesListApp() {
     emailsHelpPagePath,
     emptyStateSvgPath,
     exportCsvPath,
+    fullPath,
     groupEpicsPath,
+    hasAnyIssues,
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
     hasIssueWeightsFeature,
     hasIterationsFeature,
     hasMultipleIssueAssigneesFeature,
-    hasProjectIssues,
     importCsvIssuesPath,
     initialEmail,
+    isProject,
     isSignedIn,
-    issuesPath,
     jiraIntegrationPath,
     markdownHelpPath,
     maxAttachmentSize,
     newIssuePath,
     projectImportJiraPath,
-    projectPath,
     quickActionsHelpPath,
     resetPath,
     rssPath,
@@ -150,18 +150,18 @@ export function mountIssuesListApp() {
       calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
       emptyStateSvgPath,
+      fullPath,
       groupEpicsPath,
+      hasAnyIssues: parseBoolean(hasAnyIssues),
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
       hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
       hasIterationsFeature: parseBoolean(hasIterationsFeature),
       hasMultipleIssueAssigneesFeature: parseBoolean(hasMultipleIssueAssigneesFeature),
-      hasProjectIssues: parseBoolean(hasProjectIssues),
+      isProject: parseBoolean(isProject),
       isSignedIn: parseBoolean(isSignedIn),
-      issuesPath,
       jiraIntegrationPath,
       newIssuePath,
-      projectPath,
       rssPath,
       showNewIssueLink: parseBoolean(showNewIssueLink),
       signInPath,
@@ -172,9 +172,9 @@ export function mountIssuesListApp() {
       importCsvIssuesPath,
       maxAttachmentSize,
       projectImportJiraPath,
-      showExportButton: parseBoolean(hasProjectIssues),
+      showExportButton: parseBoolean(hasAnyIssues),
       showImportButton: parseBoolean(canImportIssues),
-      showLabel: !parseBoolean(hasProjectIssues),
+      showLabel: !parseBoolean(hasAnyIssues),
       // For IssuableByEmail component
       emailsHelpPagePath,
       initialEmail,
diff --git a/app/assets/javascripts/issues_list/queries/get_issues.query.graphql b/app/assets/javascripts/issues_list/queries/get_issues.query.graphql
index 30a01b4c3b0..6df72cf6596 100644
--- a/app/assets/javascripts/issues_list/queries/get_issues.query.graphql
+++ b/app/assets/javascripts/issues_list/queries/get_issues.query.graphql
@@ -1,9 +1,10 @@
 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 #import "./issue.fragment.graphql"
 
-query getProjectIssues(
+query getIssues(
+  $isProject: Boolean = false
   $isSignedIn: Boolean = false
-  $projectPath: ID!
+  $fullPath: ID!
   $search: String
   $sort: IssueSort
   $state: IssuableState
@@ -20,7 +21,35 @@ query getProjectIssues(
   $firstPageSize: Int
   $lastPageSize: Int
 ) {
-  project(fullPath: $projectPath) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    issues(
+      includeSubgroups: true
+      search: $search
+      sort: $sort
+      state: $state
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+      before: $beforeCursor
+      after: $afterCursor
+      first: $firstPageSize
+      last: $lastPageSize
+    ) {
+      pageInfo {
+        ...PageInfo
+      }
+      nodes {
+        ...IssueFragment
+        reference(full: true)
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     issues(
       search: $search
       sort: $sort
diff --git a/app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql b/app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql
deleted file mode 100644
index e6896131da9..00000000000
--- a/app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql
+++ /dev/null
@@ -1,30 +0,0 @@
-query getProjectIssuesCount(
-  $projectPath: ID!
-  $search: String
-  $state: IssuableState
-  $assigneeId: String
-  $assigneeUsernames: [String!]
-  $authorUsername: String
-  $labelName: [String]
-  $milestoneTitle: [String]
-  $milestoneWildcardId: MilestoneWildcardId
-  $types: [IssueType!]
-  $not: NegatedIssueFilterInput
-) {
-  project(fullPath: $projectPath) {
-    issues(
-      search: $search
-      state: $state
-      assigneeId: $assigneeId
-      assigneeUsernames: $assigneeUsernames
-      authorUsername: $authorUsername
-      labelName: $labelName
-      milestoneTitle: $milestoneTitle
-      milestoneWildcardId: $milestoneWildcardId
-      types: $types
-      not: $not
-    ) {
-      count
-    }
-  }
-}
diff --git a/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql b/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql
new file mode 100644
index 00000000000..7bcdbbb28fc
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/get_issues_counts.query.graphql
@@ -0,0 +1,105 @@
+query getIssuesCount(
+  $isProject: Boolean = false
+  $fullPath: ID!
+  $search: String
+  $assigneeId: String
+  $assigneeUsernames: [String!]
+  $authorUsername: String
+  $labelName: [String]
+  $milestoneTitle: [String]
+  $milestoneWildcardId: MilestoneWildcardId
+  $types: [IssueType!]
+  $not: NegatedIssueFilterInput
+) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    openedIssues: issues(
+      includeSubgroups: true
+      state: opened
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    closedIssues: issues(
+      includeSubgroups: true
+      state: closed
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    allIssues: issues(
+      includeSubgroups: true
+      state: all
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
+    openedIssues: issues(
+      state: opened
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    closedIssues: issues(
+      state: closed
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+    allIssues: issues(
+      state: all
+      search: $search
+      assigneeId: $assigneeId
+      assigneeUsernames: $assigneeUsernames
+      authorUsername: $authorUsername
+      labelName: $labelName
+      milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
+      types: $types
+      not: $not
+    ) {
+      count
+    }
+  }
+}
diff --git a/app/assets/javascripts/issues_list/queries/issue.fragment.graphql b/app/assets/javascripts/issues_list/queries/issue.fragment.graphql
index 633b06eced8..9c46cb3ef64 100644
--- a/app/assets/javascripts/issues_list/queries/issue.fragment.graphql
+++ b/app/assets/javascripts/issues_list/queries/issue.fragment.graphql
@@ -13,6 +13,7 @@ fragment IssueFragment on Issue {
   updatedAt
   upvotes
   userDiscussionsCount @include(if: $isSignedIn)
+  webPath
   webUrl
   assignees {
     nodes {
diff --git a/app/assets/javascripts/issues_list/queries/iteration.fragment.graphql b/app/assets/javascripts/issues_list/queries/iteration.fragment.graphql
new file mode 100644
index 00000000000..78a368089a8
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/iteration.fragment.graphql
@@ -0,0 +1,4 @@
+fragment Iteration on Iteration {
+  id
+  title
+}
diff --git a/app/assets/javascripts/issues_list/queries/label.fragment.graphql b/app/assets/javascripts/issues_list/queries/label.fragment.graphql
new file mode 100644
index 00000000000..bb1d8f1ac9b
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/label.fragment.graphql
@@ -0,0 +1,6 @@
+fragment Label on Label {
+  id
+  color
+  textColor
+  title
+}
diff --git a/app/assets/javascripts/issues_list/queries/milestone.fragment.graphql b/app/assets/javascripts/issues_list/queries/milestone.fragment.graphql
new file mode 100644
index 00000000000..3cdf69bf585
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/milestone.fragment.graphql
@@ -0,0 +1,4 @@
+fragment Milestone on Milestone {
+  id
+  title
+}
diff --git a/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql b/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql
index 5927e3e83c7..160026a4742 100644
--- a/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql
+++ b/app/assets/javascripts/issues_list/queries/reorder_issues.mutation.graphql
@@ -1,7 +1,13 @@
-mutation reorderIssues($oldIndex: Int, $newIndex: Int, $serializedVariables: String) {
+mutation reorderIssues(
+  $oldIndex: Int
+  $newIndex: Int
+  $namespace: String
+  $serializedVariables: String
+) {
   reorderIssues(
     oldIndex: $oldIndex
     newIndex: $newIndex
+    namespace: $namespace
     serializedVariables: $serializedVariables
   ) @client
 }
diff --git a/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql b/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql
index 11d9dcea573..93600c62905 100644
--- a/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql
+++ b/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql
@@ -1,9 +1,17 @@
-query searchIterations($projectPath: ID!, $search: String, $id: ID) {
-  project(fullPath: $projectPath) {
-    iterations(title: $search, id: $id) {
+#import "./iteration.fragment.graphql"
+
+query searchIterations($fullPath: ID!, $search: String, $id: ID, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    iterations(title: $search, id: $id, includeAncestors: true) {
       nodes {
-        id
-        title
+        ...Iteration
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
+    iterations(title: $search, id: $id, includeAncestors: true) {
+      nodes {
+        ...Iteration
       }
     }
   }
diff --git a/app/assets/javascripts/issues_list/queries/search_labels.query.graphql b/app/assets/javascripts/issues_list/queries/search_labels.query.graphql
index de884e1221c..1515bd91da3 100644
--- a/app/assets/javascripts/issues_list/queries/search_labels.query.graphql
+++ b/app/assets/javascripts/issues_list/queries/search_labels.query.graphql
@@ -1,11 +1,17 @@
-query searchLabels($projectPath: ID!, $search: String) {
-  project(fullPath: $projectPath) {
+#import "./label.fragment.graphql"
+
+query searchLabels($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    labels(searchTerm: $search, includeAncestorGroups: true, includeDescendantGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     labels(searchTerm: $search, includeAncestorGroups: true) {
       nodes {
-        id
-        color
-        textColor
-        title
+        ...Label
       }
     }
   }
diff --git a/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql b/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql
index 91f74fd220b..8c6c50e9dc2 100644
--- a/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql
+++ b/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql
@@ -1,9 +1,17 @@
-query searchMilestones($projectPath: ID!, $search: String) {
-  project(fullPath: $projectPath) {
+#import "./milestone.fragment.graphql"
+
+query searchMilestones($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    milestones(searchTitle: $search, includeAncestors: true, includeDescendants: true) {
+      nodes {
+        ...Milestone
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     milestones(searchTitle: $search, includeAncestors: true) {
       nodes {
-        id
-        title
+        ...Milestone
       }
     }
   }
diff --git a/app/assets/javascripts/issues_list/queries/search_users.query.graphql b/app/assets/javascripts/issues_list/queries/search_users.query.graphql
index 953157cfe3a..0211fc66235 100644
--- a/app/assets/javascripts/issues_list/queries/search_users.query.graphql
+++ b/app/assets/javascripts/issues_list/queries/search_users.query.graphql
@@ -1,12 +1,20 @@
-query searchUsers($projectPath: ID!, $search: String) {
-  project(fullPath: $projectPath) {
+#import "./user.fragment.graphql"
+
+query searchUsers($fullPath: ID!, $search: String, $isProject: Boolean = false) {
+  group(fullPath: $fullPath) @skip(if: $isProject) {
+    groupMembers(search: $search) {
+      nodes {
+        user {
+          ...User
+        }
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
     projectMembers(search: $search) {
       nodes {
         user {
-          id
-          avatarUrl
-          name
-          username
+          ...User
         }
       }
     }
diff --git a/app/assets/javascripts/issues_list/queries/user.fragment.graphql b/app/assets/javascripts/issues_list/queries/user.fragment.graphql
new file mode 100644
index 00000000000..3e5bc0f7b93
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/user.fragment.graphql
@@ -0,0 +1,6 @@
+fragment User on User {
+  id
+  avatarUrl
+  name
+  username
+}
diff --git a/app/assets/javascripts/jira_connect/subscriptions/utils.js b/app/assets/javascripts/jira_connect/subscriptions/utils.js
index ecd1a31339a..ed7a9484a81 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/utils.js
+++ b/app/assets/javascripts/jira_connect/subscriptions/utils.js
@@ -7,7 +7,7 @@ const isFunction = (fn) => typeof fn === 'function';
  * Persist alert data to localStorage.
  */
 export const persistAlert = ({ title, message, linkUrl, variant } = {}) => {
-  if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (!AccessorUtilities.canUseLocalStorage()) {
     return;
   }
 
@@ -19,7 +19,7 @@ export const persistAlert = ({ title, message, linkUrl, variant } = {}) => {
  * Return alert data from localStorage.
  */
 export const retrieveAlert = () => {
-  if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (!AccessorUtilities.canUseLocalStorage()) {
     return null;
   }
 
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fa9ee56c049..059772e8cb9 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -5,7 +5,7 @@ import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.vue';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import { sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
 import EmptyState from './empty_state.vue';
@@ -126,6 +126,9 @@ export default {
     shouldRenderCodeQualityWalkthrough() {
       return this.job.status.group === 'failed-with-warnings';
     },
+    itemName() {
+      return sprintf(__('Job %{jobName}'), { jobName: this.job.name });
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -205,12 +208,11 @@ export default {
           <div class="build-header top-area">
             <ci-header
               :status="job.status"
-              :item-id="job.id"
               :time="headerTime"
               :user="job.user"
               :has-sidebar-button="true"
               :should-render-triggered-label="shouldRenderTriggeredLabel"
-              :item-name="__('Job')"
+              :item-name="itemName"
               @clickedSidebarButton="toggleSidebar"
             />
           </div>
diff --git a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
index 376482b0319..6b3a4424a5b 100644
--- a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
@@ -1,14 +1,195 @@
 <script>
+import { GlButton, GlButtonGroup, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
+import {
+  ACTIONS_DOWNLOAD_ARTIFACTS,
+  ACTIONS_START_NOW,
+  ACTIONS_UNSCHEDULE,
+  ACTIONS_PLAY,
+  ACTIONS_RETRY,
+  CANCEL,
+  GENERIC_ERROR,
+  JOB_SCHEDULED,
+  PLAY_JOB_CONFIRMATION_MESSAGE,
+  RUN_JOB_NOW_HEADER_TITLE,
+} from '../constants';
+import eventHub from '../event_hub';
+import cancelJobMutation from '../graphql/mutations/job_cancel.mutation.graphql';
+import playJobMutation from '../graphql/mutations/job_play.mutation.graphql';
+import retryJobMutation from '../graphql/mutations/job_retry.mutation.graphql';
+import unscheduleJobMutation from '../graphql/mutations/job_unschedule.mutation.graphql';
+
 export default {
+  ACTIONS_DOWNLOAD_ARTIFACTS,
+  ACTIONS_START_NOW,
+  ACTIONS_UNSCHEDULE,
+  ACTIONS_PLAY,
+  ACTIONS_RETRY,
+  CANCEL,
+  GENERIC_ERROR,
+  PLAY_JOB_CONFIRMATION_MESSAGE,
+  RUN_JOB_NOW_HEADER_TITLE,
+  jobRetry: 'jobRetry',
+  jobCancel: 'jobCancel',
+  jobPlay: 'jobPlay',
+  jobUnschedule: 'jobUnschedule',
+  playJobModalId: 'play-job-modal',
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlCountdown,
+    GlModal,
+    GlSprintf,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  inject: {
+    admin: {
+      default: false,
+    },
+  },
   props: {
     job: {
       type: Object,
       required: true,
     },
   },
+  computed: {
+    artifactDownloadPath() {
+      return this.job.artifacts?.nodes[0]?.downloadPath;
+    },
+    canReadJob() {
+      return this.job.userPermissions?.readBuild;
+    },
+    isActive() {
+      return this.job.active;
+    },
+    manualJobPlayable() {
+      return this.job.playable && !this.admin && this.job.manualJob;
+    },
+    isRetryable() {
+      return this.job.retryable;
+    },
+    isScheduled() {
+      return this.job.status === JOB_SCHEDULED;
+    },
+    scheduledAt() {
+      return this.job.scheduledAt;
+    },
+    currentJobActionPath() {
+      return this.job.detailedStatus?.action?.path;
+    },
+    currentJobMethod() {
+      return this.job.detailedStatus?.action?.method;
+    },
+    shouldDisplayArtifacts() {
+      return this.job.userPermissions?.readJobArtifacts && this.job.artifacts?.nodes.length > 0;
+    },
+  },
+  methods: {
+    async postJobAction(name, mutation) {
+      try {
+        const {
+          data: {
+            [name]: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation,
+          variables: { id: this.job.id },
+        });
+        if (errors.length > 0) {
+          this.reportFailure();
+        } else {
+          eventHub.$emit('jobActionPerformed');
+        }
+      } catch {
+        this.reportFailure();
+      }
+    },
+    reportFailure() {
+      const toastProps = {
+        text: this.$options.GENERIC_ERROR,
+        variant: 'danger',
+      };
+
+      this.$toast.show(toastProps.text, {
+        variant: toastProps.variant,
+      });
+    },
+    cancelJob() {
+      this.postJobAction(this.$options.jobCancel, cancelJobMutation);
+    },
+    retryJob() {
+      this.postJobAction(this.$options.jobRetry, retryJobMutation);
+    },
+    playJob() {
+      this.postJobAction(this.$options.jobPlay, playJobMutation);
+    },
+    unscheduleJob() {
+      this.postJobAction(this.$options.jobUnschedule, unscheduleJobMutation);
+    },
+  },
 };
 </script>
 
 <template>
-  <div></div>
+  <gl-button-group>
+    <template v-if="canReadJob">
+      <gl-button v-if="isActive" icon="cancel" :title="$options.CANCEL" @click="cancelJob()" />
+      <template v-else-if="isScheduled">
+        <gl-button icon="planning" disabled data-testid="countdown">
+          <gl-countdown :end-date-string="scheduledAt" />
+        </gl-button>
+        <gl-button
+          v-gl-modal-directive="$options.playJobModalId"
+          icon="play"
+          :title="$options.ACTIONS_START_NOW"
+          data-testid="play-scheduled"
+        />
+        <gl-modal
+          :modal-id="$options.playJobModalId"
+          :title="$options.RUN_JOB_NOW_HEADER_TITLE"
+          @primary="playJob()"
+        >
+          <gl-sprintf :message="$options.PLAY_JOB_CONFIRMATION_MESSAGE">
+            <template #job_name>{{ job.name }}</template>
+          </gl-sprintf>
+        </gl-modal>
+        <gl-button
+          icon="time-out"
+          :title="$options.ACTIONS_UNSCHEDULE"
+          data-testid="unschedule"
+          @click="unscheduleJob()"
+        />
+      </template>
+      <template v-else>
+        <!--Note: This is the manual job play button -->
+        <gl-button
+          v-if="manualJobPlayable"
+          icon="play"
+          :title="$options.ACTIONS_PLAY"
+          data-testid="play"
+          @click="playJob()"
+        />
+        <gl-button
+          v-else-if="isRetryable"
+          icon="repeat"
+          :title="$options.ACTIONS_RETRY"
+          :method="currentJobMethod"
+          data-testid="retry"
+          @click="retryJob()"
+        />
+      </template>
+    </template>
+    <gl-button
+      v-if="shouldDisplayArtifacts"
+      icon="download"
+      :title="$options.ACTIONS_DOWNLOAD_ARTIFACTS"
+      :href="artifactDownloadPath"
+      rel="nofollow"
+      download
+      data-testid="download-artifacts"
+    />
+  </gl-button-group>
 </template>
diff --git a/app/assets/javascripts/jobs/components/table/constants.js b/app/assets/javascripts/jobs/components/table/constants.js
index 7e973a34e5c..e5d1bc01cbf 100644
--- a/app/assets/javascripts/jobs/components/table/constants.js
+++ b/app/assets/javascripts/jobs/components/table/constants.js
@@ -1,3 +1,5 @@
+import { s__, __ } from '~/locale';
+
 export const GRAPHQL_PAGE_SIZE = 30;
 
 export const initialPaginationState = {
@@ -7,3 +9,24 @@ export const initialPaginationState = {
   first: GRAPHQL_PAGE_SIZE,
   last: null,
 };
+
+/* Error constants */
+export const POST_FAILURE = 'post_failure';
+export const DEFAULT = 'default';
+
+/* Job Status Constants */
+export const JOB_SCHEDULED = 'SCHEDULED';
+
+/* i18n */
+export const ACTIONS_DOWNLOAD_ARTIFACTS = __('Download artifacts');
+export const ACTIONS_START_NOW = s__('DelayedJobs|Start now');
+export const ACTIONS_UNSCHEDULE = s__('DelayedJobs|Unschedule');
+export const ACTIONS_PLAY = __('Play');
+export const ACTIONS_RETRY = __('Retry');
+
+export const CANCEL = __('Cancel');
+export const GENERIC_ERROR = __('An error occurred while making the request.');
+export const PLAY_JOB_CONFIRMATION_MESSAGE = s__(
+  `DelayedJobs|Are you sure you want to run %{job_name} immediately? This job will run automatically after its timer finishes.`,
+);
+export const RUN_JOB_NOW_HEADER_TITLE = s__('DelayedJobs|Run the delayed job now?');
diff --git a/app/assets/javascripts/jobs/components/table/event_hub.js b/app/assets/javascripts/jobs/components/table/event_hub.js
new file mode 100644
index 00000000000..e31806ad199
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/event_hub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
diff --git a/app/assets/javascripts/jobs/components/table/graphql/fragments/job.fragment.graphql b/app/assets/javascripts/jobs/components/table/graphql/fragments/job.fragment.graphql
new file mode 100644
index 00000000000..06b065a86ce
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/graphql/fragments/job.fragment.graphql
@@ -0,0 +1,3 @@
+fragment Job on CiJob {
+  id
+}
diff --git a/app/assets/javascripts/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql
new file mode 100644
index 00000000000..20935514d51
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/job.fragment.graphql"
+
+mutation cancelJob($id: CiBuildID!) {
+  jobCancel(input: { id: $id }) {
+    job {
+      ...Job
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/jobs/components/table/graphql/mutations/job_play.mutation.graphql b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_play.mutation.graphql
new file mode 100644
index 00000000000..c94b045ac40
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_play.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/job.fragment.graphql"
+
+mutation playJob($id: CiBuildID!) {
+  jobPlay(input: { id: $id }) {
+    job {
+      ...Job
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/jobs/components/table/graphql/mutations/job_retry.mutation.graphql b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_retry.mutation.graphql
new file mode 100644
index 00000000000..6e51f9a20fa
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_retry.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/job.fragment.graphql"
+
+mutation retryJob($id: CiBuildID!) {
+  jobRetry(input: { id: $id }) {
+    job {
+      ...Job
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql
new file mode 100644
index 00000000000..8be8c42f3c3
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/job.fragment.graphql"
+
+mutation unscheduleJob($id: CiBuildID!) {
+  jobUnschedule(input: { id: $id }) {
+    job {
+      ...Job
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
index 68c6584cda6..c8763d4767e 100644
--- a/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
+++ b/app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql
@@ -69,6 +69,7 @@ query getJobs(
         stuck
         userPermissions {
           readBuild
+          readJobArtifacts
         }
       }
     }
diff --git a/app/assets/javascripts/jobs/components/table/index.js b/app/assets/javascripts/jobs/components/table/index.js
index 05d6ebfd6d6..f24daf90815 100644
--- a/app/assets/javascripts/jobs/components/table/index.js
+++ b/app/assets/javascripts/jobs/components/table/index.js
@@ -1,9 +1,12 @@
+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 Vue.use(VueApollo);
+Vue.use(GlToast);
 
 const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
@@ -22,6 +25,7 @@ export default (containerId = 'js-jobs-table') => {
     jobStatuses,
     pipelineEditorPath,
     emptyStateSvgPath,
+    admin,
   } = containerEl.dataset;
 
   return new Vue({
@@ -33,6 +37,7 @@ export default (containerId = 'js-jobs-table') => {
       pipelineEditorPath,
       jobStatuses: JSON.parse(jobStatuses),
       jobCounts: JSON.parse(jobCounts),
+      admin: parseBoolean(admin),
     },
     render(createElement) {
       return createElement(JobsTableApp);
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table.vue b/app/assets/javascripts/jobs/components/table/jobs_table.vue
index 076c0e78b11..298c99c4162 100644
--- a/app/assets/javascripts/jobs/components/table/jobs_table.vue
+++ b/app/assets/javascripts/jobs/components/table/jobs_table.vue
@@ -141,7 +141,7 @@ export default {
     </template>
 
     <template #cell(actions)="{ item }">
-      <actions-cell :job="item" />
+      <actions-cell class="gl-float-right" :job="item" />
     </template>
   </gl-table>
 </template>
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
index 2061b1f1eb2..c786d35ac68 100644
--- a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
+++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
@@ -2,6 +2,7 @@
 import { GlAlert, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { GRAPHQL_PAGE_SIZE, initialPaginationState } from './constants';
+import eventHub from './event_hub';
 import GetJobs from './graphql/queries/get_jobs.query.graphql';
 import JobsTable from './jobs_table.vue';
 import JobsTableEmptyState from './jobs_table_empty_state.vue';
@@ -74,7 +75,16 @@ export default {
       return Boolean(this.prevPage || this.nextPage) && !this.$apollo.loading;
     },
   },
+  mounted() {
+    eventHub.$on('jobActionPerformed', this.handleJobAction);
+  },
+  beforeDestroy() {
+    eventHub.$off('jobActionPerformed', this.handleJobAction);
+  },
   methods: {
+    handleJobAction() {
+      this.$apollo.queries.jobs.refetch({ statuses: this.scope });
+    },
     fetchJobsByStatus(scope) {
       this.scope = scope;
 
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index a62ab301227..68019a35dbb 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -1,13 +1,11 @@
 /* eslint-disable func-names, no-underscore-dangle, no-new, consistent-return, no-shadow, no-param-reassign, no-lonely-if, no-empty */
 /* global Issuable */
-/* global ListLabel */
 
 import $ from 'jquery';
 import { difference, isEqual, escape, sortBy, template, union } from 'lodash';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import IssuableBulkUpdateActions from '~/issuable_bulk_update_sidebar/issuable_bulk_update_actions';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import boardsStore from './boards/stores/boards_store';
 import CreateLabelDropdown from './create_label';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -43,7 +41,6 @@ export default class LabelsSelect {
       const $form = $dropdown.closest('form, .js-issuable-update');
       const $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
       const $value = $block.find('.value');
-      const $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
       const $loading = $block.find('.block-loading').addClass('gl-display-none');
       const fieldName = $dropdown.data('fieldName');
       let initialSelected = $selectbox
@@ -341,15 +338,11 @@ export default class LabelsSelect {
           }
         },
         multiSelect: $dropdown.hasClass('js-multiselect'),
-        vue: $dropdown.hasClass('js-issue-board-sidebar'),
+        vue: false,
         clicked(clickEvent) {
-          const { $el, e, isMarking } = clickEvent;
+          const { e, isMarking } = clickEvent;
           const label = clickEvent.selectedObj;
 
-          const hideLoader = () => {
-            $loading.addClass('gl-display-none');
-          };
-
           const page = $('body').attr('data-page');
           const isIssueIndex = page === 'projects:issues:index';
           const isMRIndex = page === 'projects:merge_requests:index';
@@ -375,40 +368,6 @@ export default class LabelsSelect {
             }
           } else if ($dropdown.hasClass('js-filter-submit')) {
             return $dropdown.closest('form').submit();
-          } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-            if ($el.hasClass('is-active')) {
-              boardsStore.detail.issue.labels.push(
-                new ListLabel({
-                  id: label.id,
-                  title: label.title,
-                  color: label.color,
-                  textColor: '#fff',
-                }),
-              );
-            } else {
-              let { labels } = boardsStore.detail.issue;
-              labels = labels.filter((selectedLabel) => selectedLabel.id !== label.id);
-              boardsStore.detail.issue.labels = labels;
-            }
-
-            $loading.removeClass('gl-display-none');
-            const oldLabels = boardsStore.detail.issue.labels;
-
-            boardsStore.detail.issue
-              .update($dropdown.attr('data-issue-update'))
-              .then(() => {
-                if (isScopedLabel(label)) {
-                  const prevIds = oldLabels.map((label) => label.id);
-                  const newIds = boardsStore.detail.issue.labels.map((label) => label.id);
-                  const differentIds = prevIds.filter((x) => !newIds.includes(x));
-                  $dropdown.data('marked', newIds);
-                  $dropdownMenu
-                    .find(differentIds.map((id) => `[data-label-id="${id}"]`).join(','))
-                    .removeClass('is-active');
-                }
-              })
-              .then(hideLoader)
-              .catch(hideLoader);
           } else if (handleClick) {
             e.preventDefault();
             handleClick(label);
@@ -419,13 +378,6 @@ export default class LabelsSelect {
             }
           }
         },
-        opened() {
-          if ($dropdown.hasClass('js-issue-board-sidebar')) {
-            const previousSelection = $dropdown.attr('data-selected');
-            this.selected = previousSelection ? previousSelection.split(',') : [];
-            $dropdown.data('deprecatedJQueryDropdown').updateLabel();
-          }
-        },
         preserveContext: true,
       });
 
diff --git a/app/assets/javascripts/learn_gitlab/track_learn_gitlab.js b/app/assets/javascripts/learn_gitlab/track_learn_gitlab.js
deleted file mode 100644
index 305d130f10c..00000000000
--- a/app/assets/javascripts/learn_gitlab/track_learn_gitlab.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Tracking from '~/tracking';
-
-export default function trackLearnGitlab(learnGitlabA) {
-  Tracking.event('projects:learn_gitlab:index', 'page_init', {
-    label: 'learn_gitlab',
-    property: learnGitlabA
-      ? 'Growth::Conversion::Experiment::LearnGitLabA'
-      : 'Growth::Activation::Experiment::LearnGitLabB',
-  });
-}
diff --git a/app/assets/javascripts/lib/apollo/instrumentation_link.js b/app/assets/javascripts/lib/apollo/instrumentation_link.js
new file mode 100644
index 00000000000..2ab364557b8
--- /dev/null
+++ b/app/assets/javascripts/lib/apollo/instrumentation_link.js
@@ -0,0 +1,29 @@
+import { ApolloLink } from 'apollo-link';
+import { memoize } from 'lodash';
+
+export const FEATURE_CATEGORY_HEADER = 'x-gitlab-feature-category';
+
+/**
+ * Returns the ApolloLink (or null) used to add instrumentation metadata to the GraphQL request.
+ *
+ * - The result will be null if the `feature_category` cannot be found.
+ * - The result is memoized since the `feature_category` is the same for the entire page.
+ */
+export const getInstrumentationLink = memoize(() => {
+  const { feature_category: featureCategory } = gon;
+
+  if (!featureCategory) {
+    return null;
+  }
+
+  return new ApolloLink((operation, forward) => {
+    operation.setContext(({ headers = {} }) => ({
+      headers: {
+        ...headers,
+        [FEATURE_CATEGORY_HEADER]: featureCategory,
+      },
+    }));
+
+    return forward(operation);
+  });
+});
diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index a026f76e51b..d421d66981e 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -3,7 +3,7 @@ import { getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
 
 const defaultConfig = {
   // Safely allow SVG <use> tags
-  ADD_TAGS: ['use'],
+  ADD_TAGS: ['use', 'gl-emoji'],
   // Prevent possible XSS attacks with data-* attributes used by @rails/ujs
   // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421
   FORBID_ATTR: ['data-remote', 'data-url', 'data-type', 'data-method'],
@@ -16,7 +16,7 @@ const getAllowedIconUrls = (gon = window.gon) =>
 const isUrlAllowed = (url) => getAllowedIconUrls().some((allowedUrl) => url.startsWith(allowedUrl));
 
 const isHrefSafe = (url) =>
-  isUrlAllowed(url) || isUrlAllowed(relativePathToAbsolute(url, getBaseURL()));
+  isUrlAllowed(url) || isUrlAllowed(relativePathToAbsolute(url, getBaseURL())) || url.match(/^#/);
 
 const removeUnsafeHref = (node, attr) => {
   if (!node.hasAttribute(attr)) {
@@ -52,4 +52,4 @@ addHook('afterSanitizeAttributes', (node) => {
   }
 });
 
-export const sanitize = (val, config = defaultConfig) => dompurifySanitize(val, config);
+export const sanitize = (val, config) => dompurifySanitize(val, { ...defaultConfig, ...config });
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 0804213cafa..b96a55fe116 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -10,6 +10,7 @@ import { StartupJSLink } from '~/lib/utils/apollo_startup_js_link';
 import csrf from '~/lib/utils/csrf';
 import { objectToQuery, queryToObject } from '~/lib/utils/url_utility';
 import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
+import { getInstrumentationLink } from './apollo/instrumentation_link';
 
 export const fetchPolicies = {
   CACHE_FIRST: 'cache-first',
@@ -140,14 +141,17 @@ export default (resolvers = {}, config = {}) => {
   const appLink = ApolloLink.split(
     hasSubscriptionOperation,
     new ActionCableLink(),
-    ApolloLink.from([
-      requestCounterLink,
-      performanceBarLink,
-      new StartupJSLink(),
-      apolloCaptchaLink,
-      uploadsLink,
-      requestLink,
-    ]),
+    ApolloLink.from(
+      [
+        getInstrumentationLink(),
+        requestCounterLink,
+        performanceBarLink,
+        new StartupJSLink(),
+        apolloCaptchaLink,
+        uploadsLink,
+        requestLink,
+      ].filter(Boolean),
+    ),
   );
 
   return new ApolloClient({
diff --git a/app/assets/javascripts/lib/logger/hello.js b/app/assets/javascripts/lib/logger/hello.js
new file mode 100644
index 00000000000..18fa35ab55b
--- /dev/null
+++ b/app/assets/javascripts/lib/logger/hello.js
@@ -0,0 +1,16 @@
+const HANDSHAKE = String.fromCodePoint(0x1f91d);
+const MAG = String.fromCodePoint(0x1f50e);
+
+export const logHello = () => {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%cWelcome to GitLab!%c
+
+Does this page need fixes or improvements? Open an issue or contribute a merge request to help make GitLab more lovable. At GitLab, everyone can contribute!
+
+${HANDSHAKE} Contribute to GitLab: https://about.gitlab.com/community/contribute/
+${MAG} Create a new GitLab issue: https://gitlab.com/gitlab-org/gitlab/-/issues/new`,
+    `padding-top: 0.5em; font-size: 2em;`,
+    'padding-bottom: 0.5em;',
+  );
+};
diff --git a/app/assets/javascripts/lib/logger/hello_deferred.js b/app/assets/javascripts/lib/logger/hello_deferred.js
new file mode 100644
index 00000000000..ce1dd91cb37
--- /dev/null
+++ b/app/assets/javascripts/lib/logger/hello_deferred.js
@@ -0,0 +1,5 @@
+export const logHelloDeferred = async () => {
+  const { logHello } = await import(/* webpackChunkName: 'hello' */ './hello');
+
+  logHello();
+};
diff --git a/app/assets/javascripts/lib/logger/index.js b/app/assets/javascripts/lib/logger/index.js
new file mode 100644
index 00000000000..0f5353fcbed
--- /dev/null
+++ b/app/assets/javascripts/lib/logger/index.js
@@ -0,0 +1,6 @@
+/* eslint-disable no-console */
+export const LOG_PREFIX = '[gitlab]';
+
+export const logError = (message = '', ...args) => {
+  console.error(LOG_PREFIX, `${message}\n`, ...args);
+};
diff --git a/app/assets/javascripts/lib/utils/accessor.js b/app/assets/javascripts/lib/utils/accessor.js
index 39cffedcac6..d4a6d70c62c 100644
--- a/app/assets/javascripts/lib/utils/accessor.js
+++ b/app/assets/javascripts/lib/utils/accessor.js
@@ -1,4 +1,4 @@
-function isPropertyAccessSafe(base, property) {
+function canAccessProperty(base, property) {
   let safe;
 
   try {
@@ -10,7 +10,7 @@ function isPropertyAccessSafe(base, property) {
   return safe;
 }
 
-function isFunctionCallSafe(base, functionName, ...args) {
+function canCallFunction(base, functionName, ...args) {
   let safe = true;
 
   try {
@@ -22,16 +22,28 @@ function isFunctionCallSafe(base, functionName, ...args) {
   return safe;
 }
 
-function isLocalStorageAccessSafe() {
+/**
+ * Determines if `window.localStorage` is available and
+ * can be written to and read from.
+ *
+ * Important: This is not a guarantee that
+ * `localStorage.setItem` will work in all cases.
+ *
+ * `setItem` can still throw exceptions and should be
+ * surrounded with a try/catch where used.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#exceptions
+ */
+function canUseLocalStorage() {
   let safe;
 
-  const TEST_KEY = 'isLocalStorageAccessSafe';
+  const TEST_KEY = 'canUseLocalStorage';
   const TEST_VALUE = 'true';
 
-  safe = isPropertyAccessSafe(window, 'localStorage');
+  safe = canAccessProperty(window, 'localStorage');
   if (!safe) return safe;
 
-  safe = isFunctionCallSafe(window.localStorage, 'setItem', TEST_KEY, TEST_VALUE);
+  safe = canCallFunction(window.localStorage, 'setItem', TEST_KEY, TEST_VALUE);
 
   if (safe) window.localStorage.removeItem(TEST_KEY);
 
@@ -39,9 +51,7 @@ function isLocalStorageAccessSafe() {
 }
 
 const AccessorUtilities = {
-  isPropertyAccessSafe,
-  isFunctionCallSafe,
-  isLocalStorageAccessSafe,
+  canUseLocalStorage,
 };
 
 export default AccessorUtilities;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 8f86fd55d6e..fd9629499b0 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -117,7 +117,6 @@ export const handleLocationHash = () => {
 };
 
 // Check if element scrolled into viewport from above or below
-// Courtesy http://stackoverflow.com/a/7557433/414749
 export const isInViewport = (el, offset = {}) => {
   const rect = el.getBoundingClientRect();
   const { top, left } = offset;
@@ -560,11 +559,9 @@ export const addSelectOnFocusBehaviour = (selector = '.js-select-on-focus') => {
  * Method to round of values with decimal places
  * with provided precision.
  *
- * Taken from https://stackoverflow.com/a/7343013/414749
- *
  * Eg; roundOffFloat(3.141592, 3) = 3.142
  *
- * Refer to spec/javascripts/lib/utils/common_utils_spec.js for
+ * Refer to spec/frontend/lib/utils/common_utils_spec.js for
  * more supported examples.
  *
  * @param {Float} number
@@ -581,7 +578,7 @@ export const roundOffFloat = (number, precision = 0) => {
  *
  * Eg; roundToNearestHalf(3.141592) = 3, roundToNearestHalf(3.41592) = 3.5
  *
- * Refer to spec/javascripts/lib/utils/common_utils_spec.js for
+ * Refer to spec/frontend/lib/utils/common_utils_spec.js for
  * more supported examples.
  *
  * @param {Float} number
@@ -595,7 +592,7 @@ export const roundToNearestHalf = (num) => Math.round(num * 2).toFixed() / 2;
  *
  * Eg; roundDownFloat(3.141592, 3) = 3.141
  *
- * Refer to spec/javascripts/lib/utils/common_utils_spec.js for
+ * Refer to spec/frontend/lib/utils/common_utils_spec.js for
  * more supported examples.
  *
  * @param {Float} number
@@ -645,7 +642,7 @@ export const NavigationType = {
  *        matched with our query.
  *
  *    You can learn more about behaviour of this method by referring to tests
- *    within `spec/javascripts/lib/utils/common_utils_spec.js`.
+ *    within `spec/frontend/lib/utils/common_utils_spec.js`.
  *
  * @param {string} query String to search for
  * @param {object} searchSpace Object containing properties to search in for `query`
diff --git a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
index 246f290a90a..0a35efb0ac8 100644
--- a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
@@ -1,5 +1,5 @@
 import dateFormat from 'dateformat';
-import { isString, mapValues, reduce } from 'lodash';
+import { isString, mapValues, reduce, isDate } from 'lodash';
 import { s__, n__, __ } from '../../../locale';
 
 /**
@@ -258,3 +258,106 @@ export const parseSeconds = (
     return periodCount;
   });
 };
+
+/**
+ * Pads given items with zeros to reach a length of 2 characters.
+ *
+ * @param  {...any} args Items to be padded.
+ * @returns {Array<String>} Padded items.
+ */
+export const padWithZeros = (...args) => args.map((arg) => `${arg}`.padStart(2, '0'));
+
+/**
+ * This removes the timezone from an ISO date string.
+ * This can be useful when populating date/time fields along with a distinct timezone selector, in
+ * which case we'd want to ignore the timezone's offset when populating the date and time.
+ *
+ * Examples:
+ * stripTimezoneFromISODate('2021-08-16T00:00:00.000-02:00') => '2021-08-16T00:00:00.000'
+ * stripTimezoneFromISODate('2021-08-16T00:00:00.000Z') => '2021-08-16T00:00:00.000'
+ *
+ * @param {String} date The ISO date string representation.
+ * @returns {String} The ISO date string without the timezone.
+ */
+export const stripTimezoneFromISODate = (date) => {
+  if (Number.isNaN(Date.parse(date))) {
+    return null;
+  }
+  return date.replace(/(Z|[+-]\d{2}:\d{2})$/, '');
+};
+
+/**
+ * Extracts the year, month and day from a Date instance and returns them in an object.
+ * For example:
+ * dateToYearMonthDate(new Date('2021-08-16')) => { year: '2021', month: '08', day: '16' }
+ *
+ * @param {Date} date The date to be parsed
+ * @returns {Object} An object containing the extracted year, month and day.
+ */
+export const dateToYearMonthDate = (date) => {
+  if (!isDate(date)) {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    throw new Error('Argument should be a Date instance');
+  }
+  const [month, day] = padWithZeros(date.getMonth() + 1, date.getDate());
+  return {
+    year: `${date.getFullYear()}`,
+    month,
+    day,
+  };
+};
+
+/**
+ * Extracts the hours and minutes from a string representing a time.
+ * For example:
+ * timeToHoursMinutes('12:46') => { hours: '12', minutes: '46' }
+ *
+ * @param {String} time The time to be parsed in the form HH:MM.
+ * @returns {Object} An object containing the hours and minutes.
+ */
+export const timeToHoursMinutes = (time = '') => {
+  if (!time || !time.match(/\d{1,2}:\d{1,2}/)) {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    throw new Error('Invalid time provided');
+  }
+  const [hours, minutes] = padWithZeros(...time.split(':'));
+  return { hours, minutes };
+};
+
+/**
+ * This combines a date and a time and returns the computed Date's ISO string representation.
+ *
+ * @param {Date} date Date object representing the base date.
+ * @param {String} time String representing the time to be used, in the form HH:MM.
+ * @param {String} offset An optional Date-compatible offset.
+ * @returns {String} The combined Date's ISO string representation.
+ */
+export const dateAndTimeToISOString = (date, time, offset = '') => {
+  const { year, month, day } = dateToYearMonthDate(date);
+  const { hours, minutes } = timeToHoursMinutes(time);
+  const dateString = `${year}-${month}-${day}T${hours}:${minutes}:00.000${offset || 'Z'}`;
+  if (Number.isNaN(Date.parse(dateString))) {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    throw new Error('Could not initialize date');
+  }
+  return dateString;
+};
+
+/**
+ * Converts a Date instance to time input-compatible value consisting in a 2-digits hours and
+ * minutes, separated by a semi-colon, in the 24-hours format.
+ *
+ * @param {Date} date Date to be converted
+ * @returns {String} time input-compatible string in the form HH:MM.
+ */
+export const dateToTimeInputValue = (date) => {
+  if (!isDate(date)) {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    throw new Error('Argument should be a Date instance');
+  }
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+};
diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js
index f11c7658a88..f7687a929de 100644
--- a/app/assets/javascripts/lib/utils/dom_utils.js
+++ b/app/assets/javascripts/lib/utils/dom_utils.js
@@ -77,3 +77,15 @@ export const isElementVisible = (element) =>
  * @returns {Boolean} `true` if the element is currently hidden, otherwise false
  */
 export const isElementHidden = (element) => !isElementVisible(element);
+
+export const getParents = (element) => {
+  const parents = [];
+  let parent = element.parentNode;
+
+  do {
+    parents.push(parent);
+    parent = parent.parentNode;
+  } while (parent);
+
+  return parents;
+};
diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index f3dedb7726a..f46263c0e4d 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/app/assets/javascripts/lib/utils/number_utils.js
@@ -69,19 +69,20 @@ export function bytesToGiB(number) {
  * representation (e.g., giving it 1500 yields 1.5 KB).
  *
  * @param {Number} size
+ * @param {Number} digits - The number of digits to appear after the decimal point
  * @returns {String}
  */
-export function numberToHumanSize(size) {
+export function numberToHumanSize(size, digits = 2) {
   const abs = Math.abs(size);
 
   if (abs < BYTES_IN_KIB) {
     return sprintf(__('%{size} bytes'), { size });
   } else if (abs < BYTES_IN_KIB ** 2) {
-    return sprintf(__('%{size} KiB'), { size: bytesToKiB(size).toFixed(2) });
+    return sprintf(__('%{size} KiB'), { size: bytesToKiB(size).toFixed(digits) });
   } else if (abs < BYTES_IN_KIB ** 3) {
-    return sprintf(__('%{size} MiB'), { size: bytesToMiB(size).toFixed(2) });
+    return sprintf(__('%{size} MiB'), { size: bytesToMiB(size).toFixed(digits) });
   }
-  return sprintf(__('%{size} GiB'), { size: bytesToGiB(size).toFixed(2) });
+  return sprintf(__('%{size} GiB'), { size: bytesToGiB(size).toFixed(digits) });
 }
 
 /**
diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index 6ff2af47dd8..0804d792631 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -232,7 +232,9 @@ export function insertMarkdownText({
         .join('\n');
     }
   } else if (tag.indexOf(textPlaceholder) > -1) {
-    textToInsert = tag.replace(textPlaceholder, () => selected.replace(/\\n/g, '\n'));
+    textToInsert = tag.replace(textPlaceholder, () =>
+      selected.replace(/\\n/g, '\n').replace('%br', '\\n'),
+    );
   } else {
     textToInsert = String(startChar) + tag + selected + (wrap ? tag : '');
   }
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index e9772232eaf..bca0e45d98d 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -417,43 +417,6 @@ export const urlParamsToArray = (path = '') =>
 
 export const getUrlParamsArray = () => urlParamsToArray(window.location.search);
 
-/**
- * Accepts encoding string which includes query params being
- * sent to URL.
- *
- * @param {string} path Query param string
- *
- * @returns {object} Query params object containing key-value pairs
- *                   with both key and values decoded into plain string.
- *
- * @deprecated Please use `queryToObject(query, { gatherArrays: true });` instead. See https://gitlab.com/gitlab-org/gitlab/-/issues/328845
- */
-export const urlParamsToObject = (path = '') =>
-  splitPath(path).reduce((dataParam, filterParam) => {
-    if (filterParam === '') {
-      return dataParam;
-    }
-
-    const data = dataParam;
-    let [key, value] = filterParam.split('=');
-    key = /%\w+/g.test(key) ? decodeURIComponent(key) : key;
-    const isArray = key.includes('[]');
-    key = key.replace('[]', '');
-    value = decodeURIComponent(value.replace(/\+/g, ' '));
-
-    if (isArray) {
-      if (!data[key]) {
-        data[key] = [];
-      }
-
-      data[key].push(value);
-    } else {
-      data[key] = value;
-    }
-
-    return data;
-  }, {});
-
 /**
  * Convert search query into an object
  *
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 1aaefcaa13b..b96a2607552 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -19,6 +19,7 @@ import initAlertHandler from './alert_handler';
 import { removeFlashClickListener } from './flash';
 import initTodoToggle from './header';
 import initLayoutNav from './layout_nav';
+import { logHelloDeferred } from './lib/logger/hello_deferred';
 import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime/timeago_utility';
 import { getLocationHash, visitUrl } from './lib/utils/url_utility';
@@ -35,8 +36,12 @@ import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
 import initBroadcastNotifications from './broadcast_notification';
 import { initTopNav } from './nav';
+import { initHeaderSearchApp } from '~/header_search';
 
 import 'ee_else_ce/main_ee';
+import 'jh_else_ce/main_jh';
+
+logHelloDeferred();
 
 applyGitLabUIConfig();
 
@@ -94,20 +99,24 @@ function deferredInitialisation() {
   initDefaultTrackers();
   initFeatureHighlight();
 
-  const search = document.querySelector('#search');
-  if (search) {
-    search.addEventListener(
-      'focus',
-      () => {
-        import(/* webpackChunkName: 'globalSearch' */ './search_autocomplete')
-          .then(({ default: initSearchAutocomplete }) => {
-            const searchDropdown = initSearchAutocomplete();
-            searchDropdown.onSearchInputFocus();
-          })
-          .catch(() => {});
-      },
-      { once: true },
-    );
+  if (gon.features?.newHeaderSearch) {
+    initHeaderSearchApp();
+  } else {
+    const search = document.querySelector('#search');
+    if (search) {
+      search.addEventListener(
+        'focus',
+        () => {
+          import(/* webpackChunkName: 'globalSearch' */ './search_autocomplete')
+            .then(({ default: initSearchAutocomplete }) => {
+              const searchDropdown = initSearchAutocomplete();
+              searchDropdown.onSearchInputFocus();
+            })
+            .catch(() => {});
+        },
+        { once: true },
+      );
+    }
   }
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
diff --git a/app/assets/javascripts/main_jh.js b/app/assets/javascripts/main_jh.js
new file mode 100644
index 00000000000..13a6b8f3d3d
--- /dev/null
+++ b/app/assets/javascripts/main_jh.js
@@ -0,0 +1 @@
+// This is an empty file to satisfy jh_else_ce import for the JH main entry point
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 0ddb2c2334c..ed32f26583e 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -19,11 +19,9 @@ function MergeRequest(opts) {
   this.opts = opts != null ? opts : {};
   this.submitNoteForm = this.submitNoteForm.bind(this);
   this.$el = $('.merge-request');
-  this.$('.show-all-commits').on('click', () => this.showAllCommits());
 
   this.initTabs();
   this.initMRBtnListeners();
-  this.initCommitMessageListeners();
 
   if ($('.description.js-task-list-container').length) {
     this.taskList = new TaskList({
@@ -59,11 +57,6 @@ MergeRequest.prototype.initTabs = function () {
   window.mrTabs = new MergeRequestTabs(this.opts);
 };
 
-MergeRequest.prototype.showAllCommits = function () {
-  this.$('.first-commits').remove();
-  return this.$('.all-commits').removeClass('hide');
-};
-
 MergeRequest.prototype.initMRBtnListeners = function () {
   const _this = this;
   const draftToggles = document.querySelectorAll('.js-draft-toggle-button');
@@ -128,26 +121,6 @@ MergeRequest.prototype.submitNoteForm = function (form, $button) {
   }
 };
 
-MergeRequest.prototype.initCommitMessageListeners = function () {
-  $(document).on('click', 'a.js-with-description-link', (e) => {
-    const textarea = $('textarea.js-commit-message');
-    e.preventDefault();
-
-    textarea.val(textarea.data('messageWithDescription'));
-    $('.js-with-description-hint').hide();
-    $('.js-without-description-hint').show();
-  });
-
-  $(document).on('click', 'a.js-without-description-link', (e) => {
-    const textarea = $('textarea.js-commit-message');
-    e.preventDefault();
-
-    textarea.val(textarea.data('messageWithoutDescription'));
-    $('.js-with-description-hint').show();
-    $('.js-without-description-hint').hide();
-  });
-};
-
 MergeRequest.decreaseCounter = function (by = 1) {
   const $el = $('.js-merge-counter');
   const count = Math.max(parseInt($el.text().replace(/[^\d]/, ''), 10) - by, 0);
@@ -164,7 +137,7 @@ MergeRequest.hideCloseButton = function () {
 MergeRequest.toggleDraftStatus = function (title, isReady) {
   if (isReady) {
     createFlash({
-      message: __('The merge request can now be merged.'),
+      message: __('Marked as ready. Merging is now allowed.'),
       type: 'notice',
     });
   }
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 14e5e96d7b0..a40caea1223 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -7,20 +7,17 @@ import createEventHub from '~/helpers/event_hub_factory';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import Diff from './diff';
 import createFlash from './flash';
-import initChangesDropdown from './init_changes_dropdown';
+import { initDiffStatsDropdown } from './init_diff_stats_dropdown';
 import axios from './lib/utils/axios_utils';
 import {
   parseUrlPathname,
-  handleLocationHash,
   isMetaClick,
   parseBoolean,
   scrollToElement,
 } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
-import { getLocationHash } from './lib/utils/url_utility';
 import { __ } from './locale';
-import Notes from './notes';
 import syntaxHighlight from './syntax_highlight';
 
 // MergeRequestTabs
@@ -67,6 +64,8 @@ import syntaxHighlight from './syntax_highlight';
 //   </div>
 //
 
+// <100ms is typically indistinguishable from "instant" for users, but allows for re-rendering
+const FAST_DELAY_FOR_RERENDER = 75;
 // Store the `location` object, allowing for easier stubbing in tests
 let { location } = window;
 
@@ -86,6 +85,8 @@ export default class MergeRequestTabs {
     this.peek = document.getElementById('js-peek');
     this.paddingTop = 16;
 
+    this.scrollPositions = {};
+
     this.commitsTab = document.querySelector('.tab-content .commits.tab-pane');
 
     this.currentTab = null;
@@ -139,11 +140,30 @@ export default class MergeRequestTabs {
     }
   }
 
+  storeScroll() {
+    if (this.currentTab) {
+      this.scrollPositions[this.currentTab] = document.documentElement.scrollTop;
+    }
+  }
+  recallScroll(action) {
+    const storedPosition = this.scrollPositions[action];
+
+    setTimeout(() => {
+      window.scrollTo({
+        top: storedPosition && storedPosition > 0 ? storedPosition : 0,
+        left: 0,
+        behavior: 'auto',
+      });
+    }, FAST_DELAY_FOR_RERENDER);
+  }
+
   clickTab(e) {
     if (e.currentTarget) {
       e.stopImmediatePropagation();
       e.preventDefault();
 
+      this.storeScroll();
+
       const { action } = e.currentTarget.dataset || {};
 
       if (isMetaClick(e)) {
@@ -193,6 +213,14 @@ export default class MergeRequestTabs {
         this.destroyPipelinesView();
       } else if (this.isDiffAction(action)) {
         if (!isInVueNoteablePage()) {
+          /*
+            for pages where we have not yet converted to the new vue
+            implementation we load the diff tab content the old way,
+            inserting html rendered by the backend.
+
+            in practice, this only occurs when comparing commits in
+            the new merge request form page.
+          */
           this.loadDiff(href);
         }
         if (bp.getBreakpointSize() !== 'xl') {
@@ -205,8 +233,14 @@ export default class MergeRequestTabs {
         this.resetViewContainer();
         this.mountPipelinesView();
       } else {
-        this.mergeRequestTabPanes.querySelector('#notes').style.display = 'block';
-        this.mergeRequestTabs.querySelector('.notes-tab').classList.add('active');
+        const notesTab = this.mergeRequestTabs.querySelector('.notes-tab');
+        const notesPane = this.mergeRequestTabPanes.querySelector('#notes');
+        if (notesPane) {
+          notesPane.style.display = 'block';
+        }
+        if (notesTab) {
+          notesTab.classList.add('active');
+        }
 
         if (bp.getBreakpointSize() !== 'xs') {
           this.expandView();
@@ -216,6 +250,8 @@ export default class MergeRequestTabs {
       }
 
       $('.detail-page-description').renderGFM();
+
+      this.recallScroll(action);
     } else if (action === this.currentAction) {
       // ContentTop is used to handle anything at the top of the page before the main content
       const mainContentContainer = document.querySelector('.content-wrapper');
@@ -379,6 +415,7 @@ export default class MergeRequestTabs {
     pipelineTableViewEl.appendChild(this.commitPipelinesTable.$el);
   }
 
+  // load the diff tab content from the backend
   loadDiff(source) {
     if (this.diffsLoaded) {
       document.dispatchEvent(new CustomEvent('scroll'));
@@ -396,8 +433,7 @@ export default class MergeRequestTabs {
       .then(({ data }) => {
         const $container = $('#diffs');
         $container.html(data.html);
-
-        initChangesDropdown(this.stickyTop);
+        initDiffStatsDropdown(this.stickyTop);
 
         localTimeAgo(document.querySelectorAll('#diffs .js-timeago'));
         syntaxHighlight($('#diffs .js-syntax-highlight'));
@@ -420,25 +456,6 @@ export default class MergeRequestTabs {
           }).init();
         });
 
-        // Scroll any linked note into view
-        // Similar to `toggler_behavior` in the discussion tab
-        const hash = getLocationHash();
-        const anchor = hash && $container.find(`.note[id="${hash}"]`);
-        if (anchor && anchor.length > 0) {
-          const notesContent = anchor.closest('.notes-content');
-          const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-          Notes.instance.toggleDiffNote({
-            target: anchor,
-            lineType,
-            forceShow: true,
-          });
-          anchor[0].scrollIntoView();
-          handleLocationHash();
-          // We have multiple elements on the page with `#note_xxx`
-          // (discussion and diff tabs) and `:target` only applies to the first
-          anchor.addClass('target');
-        }
-
         this.toggleLoading(false);
       })
       .catch(() => {
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 0d9a2eef01a..aa8a40b6a87 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -1,6 +1,5 @@
 /* eslint-disable one-var, no-self-compare, consistent-return, no-param-reassign, no-shadow */
 /* global Issuable */
-/* global ListMilestone */
 
 import $ from 'jquery';
 import { template, escape } from 'lodash';
@@ -8,10 +7,6 @@ import Api from '~/api';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { __, sprintf } from '~/locale';
 import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
-import boardsStore, {
-  boardStoreIssueSet,
-  boardStoreIssueDelete,
-} from './boards/stores/boards_store';
 import axios from './lib/utils/axios_utils';
 import { timeFor, parsePikadayDate, dateInWords } from './lib/utils/datetime_utility';
 
@@ -186,18 +181,17 @@ export default class MilestoneSelect {
         },
         opened: (e) => {
           const $el = $(e.currentTarget);
-          if ($dropdown.hasClass('js-issue-board-sidebar') || options.handleClick) {
+          if (options.handleClick) {
             selectedMilestone = $dropdown[0].dataset.selected || selectedMilestoneDefault;
           }
           $('a.is-active', $el).removeClass('is-active');
           $(`[data-milestone-id="${selectedMilestone}"] > a`, $el).addClass('is-active');
         },
-        vue: $dropdown.hasClass('js-issue-board-sidebar'),
+        vue: false,
         clicked: (clickEvent) => {
           const { e } = clickEvent;
           let selected = clickEvent.selectedObj;
 
-          let data;
           if (!selected) return;
 
           if (options.handleClick) {
@@ -224,76 +218,52 @@ export default class MilestoneSelect {
             return Issuable.filterResults($dropdown.closest('form'));
           } else if ($dropdown.hasClass('js-filter-submit')) {
             return $dropdown.closest('form').submit();
-          } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-            if (selected.id !== -1 && isSelecting) {
-              boardStoreIssueSet(
-                'milestone',
-                new ListMilestone({
-                  id: selected.id,
-                  title: selected.name,
-                }),
-              );
-            } else {
-              boardStoreIssueDelete('milestone');
-            }
+          }
 
-            $dropdown.trigger('loading.gl.dropdown');
-            $loading.removeClass('gl-display-none');
+          selected = $selectBox.find('input[type="hidden"]').val();
 
-            boardsStore.detail.issue
-              .update($dropdown.attr('data-issue-update'))
-              .then(() => {
-                $dropdown.trigger('loaded.gl.dropdown');
-                $loading.addClass('gl-display-none');
-              })
-              .catch(() => {
-                $loading.addClass('gl-display-none');
-              });
-          } else {
-            selected = $selectBox.find('input[type="hidden"]').val();
-            data = {};
-            data[abilityName] = {};
-            data[abilityName].milestone_id = selected != null ? selected : null;
-            $loading.removeClass('gl-display-none');
-            $dropdown.trigger('loading.gl.dropdown');
-            return axios
-              .put(issueUpdateURL, data)
-              .then(({ data }) => {
-                $dropdown.trigger('loaded.gl.dropdown');
-                $loading.addClass('gl-display-none');
-                $selectBox.hide();
-                $value.css('display', '');
-                if (data.milestone != null) {
-                  data.milestone.remaining = timeFor(data.milestone.due_date);
-                  data.milestone.name = data.milestone.title;
-                  $value.html(
-                    data.milestone.expired
-                      ? milestoneExpiredLinkTemplate({
-                          ...data.milestone,
-                          remaining: sprintf(__('%{due_date} (Past due)'), {
-                            due_date: dateInWords(parsePikadayDate(data.milestone.due_date)),
-                          }),
-                        })
-                      : milestoneLinkTemplate(data.milestone),
-                  );
-                  return $sidebarCollapsedValue
-                    .attr(
-                      'data-original-title',
-                      `${data.milestone.name}<br />${data.milestone.remaining}`,
-                    )
-                    .find('span')
-                    .text(data.milestone.title);
-                }
-                $value.html(milestoneLinkNoneTemplate);
+          const data = {};
+          data[abilityName] = {};
+          data[abilityName].milestone_id = selected != null ? selected : null;
+          $loading.removeClass('gl-display-none');
+          $dropdown.trigger('loading.gl.dropdown');
+          return axios
+            .put(issueUpdateURL, data)
+            .then(({ data }) => {
+              $dropdown.trigger('loaded.gl.dropdown');
+              $loading.addClass('gl-display-none');
+              $selectBox.hide();
+              $value.css('display', '');
+              if (data.milestone != null) {
+                data.milestone.remaining = timeFor(data.milestone.due_date);
+                data.milestone.name = data.milestone.title;
+                $value.html(
+                  data.milestone.expired
+                    ? milestoneExpiredLinkTemplate({
+                        ...data.milestone,
+                        remaining: sprintf(__('%{due_date} (Past due)'), {
+                          due_date: dateInWords(parsePikadayDate(data.milestone.due_date)),
+                        }),
+                      })
+                    : milestoneLinkTemplate(data.milestone),
+                );
                 return $sidebarCollapsedValue
-                  .attr('data-original-title', __('Milestone'))
+                  .attr(
+                    'data-original-title',
+                    `${data.milestone.name}<br />${data.milestone.remaining}`,
+                  )
                   .find('span')
-                  .text(__('None'));
-              })
-              .catch(() => {
-                $loading.addClass('gl-display-none');
-              });
-          }
+                  .text(data.milestone.title);
+              }
+              $value.html(milestoneLinkNoneTemplate);
+              return $sidebarCollapsedValue
+                .attr('data-original-title', __('Milestone'))
+                .find('span')
+                .text(__('None'));
+            })
+            .catch(() => {
+              $loading.addClass('gl-display-none');
+            });
         },
       });
     });
diff --git a/app/assets/javascripts/milestones/components/milestone_combobox.vue b/app/assets/javascripts/milestones/components/milestone_combobox.vue
index e8499015210..a840e696386 100644
--- a/app/assets/javascripts/milestones/components/milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/components/milestone_combobox.vue
@@ -125,8 +125,7 @@ export default {
     // This method is defined here instead of in `methods`
     // because we need to access the .cancel() method
     // lodash attaches to the function, which is
-    // made inaccessible by Vue. More info:
-    // https://stackoverflow.com/a/52988020/1063392
+    // made inaccessible by Vue.
     this.debouncedSearch = debounce(function search() {
       this.search(this.searchQuery);
     }, SEARCH_DEBOUNCE_MS);
diff --git a/app/assets/javascripts/milestones/stores/mutations.js b/app/assets/javascripts/milestones/stores/mutations.js
index 3a7babf6fa0..1f88c0a1ea6 100644
--- a/app/assets/javascripts/milestones/stores/mutations.js
+++ b/app/assets/javascripts/milestones/stores/mutations.js
@@ -38,7 +38,7 @@ export default {
   [types.RECEIVE_PROJECT_MILESTONES_SUCCESS](state, response) {
     state.matches.projectMilestones = {
       list: response.data.map(({ title }) => ({ title })),
-      totalCount: parseInt(response.headers['x-total'], 10),
+      totalCount: parseInt(response.headers['x-total'], 10) || response.data.length,
       error: null,
     };
   },
@@ -52,7 +52,7 @@ export default {
   [types.RECEIVE_GROUP_MILESTONES_SUCCESS](state, response) {
     state.matches.groupMilestones = {
       list: response.data.map(({ title }) => ({ title })),
-      totalCount: parseInt(response.headers['x-total'], 10),
+      totalCount: parseInt(response.headers['x-total'], 10) || response.data.length,
       error: null,
     };
   },
diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
index 446ca8e5090..4b54cffe231 100644
--- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
+++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
 import { chartHeight } from '../../constants';
 
@@ -26,7 +25,7 @@ export default {
     <div
       class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
-      v-html="chartEmptyStateIllustration"
+      v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */"
     ></div>
     <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index a7696a716d0..ea3e4e5604c 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -19,6 +19,7 @@ export default function initMrNotes() {
     action: mrShowNode.dataset.mrAction,
   });
 
+  initDiffsApp(store);
   initNotesApp();
 
   document.addEventListener('merged:UpdateActions', () => {
@@ -26,20 +27,25 @@ export default function initMrNotes() {
     initCherryPickCommitModal();
   });
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#js-vue-discussion-counter',
-    name: 'DiscussionCounter',
-    components: {
-      discussionCounter,
-    },
-    store,
-    render(createElement) {
-      return createElement('discussion-counter');
-    },
-  });
+  requestIdleCallback(() => {
+    const el = document.getElementById('js-vue-discussion-counter');
 
-  initDiscussionFilters(store);
-  initSortDiscussions(store);
-  initDiffsApp(store);
+    if (el) {
+      // eslint-disable-next-line no-new
+      new Vue({
+        el,
+        name: 'DiscussionCounter',
+        components: {
+          discussionCounter,
+        },
+        store,
+        render(createElement) {
+          return createElement('discussion-counter');
+        },
+      });
+    }
+
+    initDiscussionFilters(store);
+    initSortDiscussions(store);
+  });
 }
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 0f4cec67ce8..1384c9c40b3 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import katex from 'katex';
 import marked from 'marked';
 import { sanitize } from '~/lib/dompurify';
@@ -95,7 +94,16 @@ renderer.image = function image(href, title, text) {
   const attachmentHeader = `attachment:`; // eslint-disable-line @gitlab/require-i18n-strings
 
   if (!this.attachments || !href.startsWith(attachmentHeader)) {
-    return this.originalImage(href, title, text);
+    let relativeHref = href;
+
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    if (!(href.startsWith('http') || href.startsWith('data:'))) {
+      // These are images within the repo. This will only work if the image
+      // is relative to the path where the file is located
+      relativeHref = this.relativeRawPath + href;
+    }
+
+    return this.originalImage(relativeHref, title, text);
   }
 
   let img = ``;
@@ -130,6 +138,7 @@ export default {
   components: {
     prompt: Prompt,
   },
+  inject: ['relativeRawPath'],
   props: {
     cell: {
       type: Object,
@@ -139,6 +148,7 @@ export default {
   computed: {
     markdown() {
       renderer.attachments = this.cell.attachments;
+      renderer.relativeRawPath = this.relativeRawPath;
 
       return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), markdownConfig);
     },
@@ -149,7 +159,7 @@ export default {
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div class="markdown" v-html="markdown"></div>
+    <div class="markdown" v-html="markdown /* eslint-disable-line vue/no-v-html */"></div>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index dc5b2b66348..ca02ee18dd1 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
-import { sanitize } from '~/lib/dompurify';
 import Prompt from '../prompt.vue';
 
 export default {
@@ -25,19 +24,19 @@ export default {
     },
   },
   computed: {
-    sanitizedOutput() {
-      return sanitize(this.rawCode);
-    },
     showOutput() {
       return this.index === 0;
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
 <template>
   <div class="output">
     <prompt type="Out" :count="count" :show-output="showOutput" />
-    <div v-safe-html="sanitizedOutput" class="gl-overflow-auto"></div>
+    <div v-safe-html:[$options.safeHtmlConfig]="rawCode" class="gl-overflow-auto"></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
deleted file mode 100644
index ef51587734d..00000000000
--- a/app/assets/javascripts/notes.js
+++ /dev/null
@@ -1,1744 +0,0 @@
-/* eslint-disable no-restricted-properties, babel/camelcase,
-no-unused-expressions, default-case,
-consistent-return, no-alert, no-param-reassign,
-no-shadow, no-useless-escape,
-class-methods-use-this */
-
-/* global ResolveService */
-
-/*
-old_notes_spec.js is the spec for the legacy, jQuery notes application. It has nothing to do with the new, fancy Vue notes app.
- */
-
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
-import Autosize from 'autosize';
-import $ from 'jquery';
-import Cookies from 'js-cookie';
-import { escape, uniqueId } from 'lodash';
-import Vue from 'vue';
-import '~/lib/utils/jquery_at_who';
-import AjaxCache from '~/lib/utils/ajax_cache';
-import syntaxHighlight from '~/syntax_highlight';
-import Autosave from './autosave';
-import loadAwardsHandler from './awards_handler';
-import CommentTypeToggle from './comment_type_toggle';
-import createFlash from './flash';
-import { defaultAutocompleteConfig } from './gfm_auto_complete';
-import GLForm from './gl_form';
-import axios from './lib/utils/axios_utils';
-import {
-  isInViewport,
-  getPagePath,
-  scrollToElement,
-  isMetaKey,
-  isInMRPage,
-} from './lib/utils/common_utils';
-import { localTimeAgo } from './lib/utils/datetime_utility';
-import { getLocationHash } from './lib/utils/url_utility';
-import { sprintf, s__, __ } from './locale';
-import TaskList from './task_list';
-
-window.autosize = Autosize;
-
-function normalizeNewlines(str) {
-  return str.replace(/\r\n/g, '\n');
-}
-
-const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
-const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
-
-export default class Notes {
-  static initialize(notes_url, note_ids, last_fetched_at, view, enableGFM) {
-    if (!this.instance) {
-      this.instance = new Notes(notes_url, note_ids, last_fetched_at, view, enableGFM);
-    }
-  }
-
-  static getInstance() {
-    return this.instance;
-  }
-
-  constructor(notes_url, note_ids, last_fetched_at, view, enableGFM = defaultAutocompleteConfig) {
-    this.updateTargetButtons = this.updateTargetButtons.bind(this);
-    this.updateComment = this.updateComment.bind(this);
-    this.visibilityChange = this.visibilityChange.bind(this);
-    this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
-    this.onAddDiffNote = this.onAddDiffNote.bind(this);
-    this.onAddImageDiffNote = this.onAddImageDiffNote.bind(this);
-    this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
-    this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
-    this.removeNote = this.removeNote.bind(this);
-    this.cancelEdit = this.cancelEdit.bind(this);
-    this.updateNote = this.updateNote.bind(this);
-    this.addDiscussionNote = this.addDiscussionNote.bind(this);
-    this.addNoteError = this.addNoteError.bind(this);
-    this.addNote = this.addNote.bind(this);
-    this.resetMainTargetForm = this.resetMainTargetForm.bind(this);
-    this.refresh = this.refresh.bind(this);
-    this.keydownNoteText = this.keydownNoteText.bind(this);
-    this.toggleCommitList = this.toggleCommitList.bind(this);
-    this.postComment = this.postComment.bind(this);
-    this.clearFlashWrapper = this.clearFlash.bind(this);
-    this.onHashChange = this.onHashChange.bind(this);
-
-    this.notes_url = notes_url;
-    this.note_ids = note_ids;
-    this.enableGFM = enableGFM;
-    // Used to keep track of updated notes while people are editing things
-    this.updatedNotesTrackingMap = {};
-    this.last_fetched_at = last_fetched_at;
-    this.noteable_url = document.URL;
-    this.notesCountBadge ||
-      (this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge'));
-    this.basePollingInterval = 15000;
-    this.maxPollingSteps = 4;
-
-    this.$wrapperEl = isInMRPage() ? $(document).find('.diffs') : $(document);
-    this.cleanBinding();
-    this.addBinding();
-    this.setPollingInterval();
-    this.setupMainTargetNoteForm(enableGFM);
-    this.taskList = new TaskList({
-      dataType: 'note',
-      fieldName: 'note',
-      selector: '.notes',
-    });
-    this.collapseLongCommitList();
-    this.setViewType(view);
-
-    // We are in the merge requests page so we need another edit form for Changes tab
-    if (getPagePath(1) === 'merge_requests') {
-      $('.note-edit-form').clone().addClass('mr-note-edit-form').insertAfter('.note-edit-form');
-    }
-
-    const hash = getLocationHash();
-    const $anchor = hash && document.getElementById(hash);
-
-    if ($anchor) {
-      this.loadLazyDiff({ currentTarget: $anchor });
-    }
-  }
-
-  setViewType(view) {
-    this.view = Cookies.get('diff_view') || view;
-  }
-
-  addBinding() {
-    // Edit note link
-    this.$wrapperEl.on('click', '.js-note-edit', this.showEditForm.bind(this));
-    this.$wrapperEl.on('click', '.note-edit-cancel', this.cancelEdit);
-    // Reopen and close actions for Issue/MR combined with note form submit
-    this.$wrapperEl.on('click', '.js-comment-submit-button', this.postComment);
-    this.$wrapperEl.on('click', '.js-comment-save-button', this.updateComment);
-    this.$wrapperEl.on('keyup input', '.js-note-text', this.updateTargetButtons);
-    // resolve a discussion
-    this.$wrapperEl.on('click', '.js-comment-resolve-button', this.postComment);
-    // remove a note (in general)
-    this.$wrapperEl.on('click', '.js-note-delete', this.removeNote);
-    // delete note attachment
-    this.$wrapperEl.on('click', '.js-note-attachment-delete', this.removeAttachment);
-    // update the file name when an attachment is selected
-    this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
-    // reply to diff/discussion notes
-    this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
-    // add diff note
-    this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote);
-    // add diff note for images
-    this.$wrapperEl.on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
-    // hide diff note form
-    this.$wrapperEl.on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
-    // toggle commit list
-    this.$wrapperEl.on('click', '.system-note-commit-list-toggler', this.toggleCommitList);
-
-    this.$wrapperEl.on('click', '.js-toggle-lazy-diff', this.loadLazyDiff);
-    this.$wrapperEl.on(
-      'click',
-      '.js-toggle-lazy-diff-retry-button',
-      this.onClickRetryLazyLoad.bind(this),
-    );
-
-    // fetch notes when tab becomes visible
-    this.$wrapperEl.on('visibilitychange', this.visibilityChange);
-    // when issue status changes, we need to refresh data
-    this.$wrapperEl.on('issuable:change', this.refresh);
-    // ajax:events that happen on Form when actions like Reopen, Close are performed on Issues and MRs.
-    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.addNote);
-    this.$wrapperEl.on('ajax:success', '.js-discussion-note-form', this.addDiscussionNote);
-    this.$wrapperEl.on('ajax:success', '.js-main-target-form', this.resetMainTargetForm);
-    this.$wrapperEl.on(
-      'ajax:complete',
-      '.js-main-target-form',
-      this.reenableTargetFormSubmitButton,
-    );
-    // when a key is clicked on the notes
-    this.$wrapperEl.on('keydown', '.js-note-text', this.keydownNoteText);
-    // When the URL fragment/hash has changed, `#note_xxx`
-    $(window).on('hashchange', this.onHashChange);
-  }
-
-  cleanBinding() {
-    this.$wrapperEl.off('click', '.js-note-edit');
-    this.$wrapperEl.off('click', '.note-edit-cancel');
-    this.$wrapperEl.off('click', '.js-note-delete');
-    this.$wrapperEl.off('click', '.js-note-attachment-delete');
-    this.$wrapperEl.off('click', '.js-discussion-reply-button');
-    this.$wrapperEl.off('click', '.js-add-diff-note-button');
-    this.$wrapperEl.off('click', '.js-add-image-diff-note-button');
-    // eslint-disable-next-line @gitlab/no-global-event-off
-    this.$wrapperEl.off('visibilitychange');
-    this.$wrapperEl.off('keyup input', '.js-note-text');
-    this.$wrapperEl.off('click', '.js-note-target-reopen');
-    this.$wrapperEl.off('click', '.js-note-target-close');
-    this.$wrapperEl.off('keydown', '.js-note-text');
-    this.$wrapperEl.off('click', '.js-comment-resolve-button');
-    this.$wrapperEl.off('click', '.system-note-commit-list-toggler');
-    this.$wrapperEl.off('click', '.js-toggle-lazy-diff');
-    this.$wrapperEl.off('click', '.js-toggle-lazy-diff-retry-button');
-    this.$wrapperEl.off('ajax:success', '.js-main-target-form');
-    this.$wrapperEl.off('ajax:success', '.js-discussion-note-form');
-    this.$wrapperEl.off('ajax:complete', '.js-main-target-form');
-    $(window).off('hashchange', this.onHashChange);
-  }
-
-  static initCommentTypeToggle(form) {
-    const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
-    const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
-    const noteTypeInput = form.querySelector('#note_type');
-    const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
-    const closeButton = form.querySelector('.js-note-target-close');
-    const reopenButton = form.querySelector('.js-note-target-reopen');
-
-    const commentTypeToggle = new CommentTypeToggle({
-      dropdownTrigger,
-      dropdownList,
-      noteTypeInput,
-      submitButton,
-      closeButton,
-      reopenButton,
-    });
-
-    commentTypeToggle.initDroplab();
-  }
-
-  keydownNoteText(e) {
-    let discussionNoteForm;
-    let editNote;
-    let myLastNote;
-    let myLastNoteEditBtn;
-    let newText;
-    let originalText;
-
-    if (isMetaKey(e)) {
-      return;
-    }
-
-    const $textarea = $(e.target);
-    // Edit previous note when UP arrow is hit
-    switch (e.which) {
-      case 38:
-        if ($textarea.val() !== '') {
-          return;
-        }
-        myLastNote = $(
-          `li.note[data-author-id='${gon.current_user_id}'][data-editable]:last`,
-          $textarea.closest('.note, .notes_holder, #notes'),
-        );
-        if (myLastNote.length) {
-          myLastNoteEditBtn = myLastNote.find('.js-note-edit');
-          return myLastNoteEditBtn.trigger('click', [true, myLastNote]);
-        }
-        break;
-      // Cancel creating diff note or editing any note when ESCAPE is hit
-      case 27:
-        discussionNoteForm = $textarea.closest('.js-discussion-note-form');
-        if (discussionNoteForm.length) {
-          if ($textarea.val() !== '') {
-            if (!window.confirm(__('Your comment will be discarded.'))) {
-              return;
-            }
-          }
-          this.removeDiscussionNoteForm(discussionNoteForm);
-          return;
-        }
-        editNote = $textarea.closest('.note');
-        if (editNote.length) {
-          originalText = $textarea.closest('form').data('originalNote');
-          newText = $textarea.val();
-          if (originalText !== newText) {
-            if (!window.confirm(__('Are you sure you want to discard this comment?'))) {
-              return;
-            }
-          }
-          return this.removeNoteEditForm(editNote);
-        }
-    }
-  }
-
-  initRefresh() {
-    if (Notes.interval) {
-      clearInterval(Notes.interval);
-    }
-    Notes.interval = setInterval(() => this.refresh(), this.pollingInterval);
-  }
-
-  refresh() {
-    if (!document.hidden) {
-      return this.getContent();
-    }
-  }
-
-  getContent() {
-    if (this.refreshing) {
-      return;
-    }
-
-    this.refreshing = true;
-
-    axios
-      .get(`${this.notes_url}?html=true`, {
-        headers: {
-          'X-Last-Fetched-At': this.last_fetched_at,
-        },
-      })
-      .then(({ data }) => {
-        const { notes } = data;
-        this.last_fetched_at = data.last_fetched_at;
-        this.setPollingInterval(data.notes.length);
-        $.each(notes, (i, note) => this.renderNote(note));
-
-        this.refreshing = false;
-      })
-      .catch(() => {
-        this.refreshing = false;
-      });
-  }
-
-  /**
-   * Increase @pollingInterval up to 120 seconds on every function call,
-   * if `shouldReset` has a truthy value, 'null' or 'undefined' the variable
-   * will reset to @basePollingInterval.
-   *
-   * Note: this function is used to gradually increase the polling interval
-   * if there aren't new notes coming from the server
-   */
-  setPollingInterval(shouldReset) {
-    if (shouldReset == null) {
-      shouldReset = true;
-    }
-    const nthInterval = this.basePollingInterval * Math.pow(2, this.maxPollingSteps - 1);
-    if (shouldReset) {
-      this.pollingInterval = this.basePollingInterval;
-    } else if (this.pollingInterval < nthInterval) {
-      this.pollingInterval *= 2;
-    }
-    return this.initRefresh();
-  }
-
-  handleQuickActions(noteEntity) {
-    let votesBlock;
-    if (noteEntity.commands_changes) {
-      if ('merge' in noteEntity.commands_changes) {
-        Notes.checkMergeRequestStatus();
-      }
-
-      if ('emoji_award' in noteEntity.commands_changes) {
-        votesBlock = $('.js-awards-block').eq(0);
-
-        loadAwardsHandler()
-          .then((awardsHandler) => {
-            awardsHandler.addAwardToEmojiBar(votesBlock, noteEntity.commands_changes.emoji_award);
-            awardsHandler.scrollToAwards();
-          })
-          .catch(() => {
-            // ignore
-          });
-      }
-    }
-  }
-
-  setupNewNote($note) {
-    // Update datetime format on the recent note
-    localTimeAgo($note.find('.js-timeago').get(), false);
-
-    this.collapseLongCommitList();
-    this.taskList.init();
-
-    // This stops the note highlight, #note_xxx`, from being removed after real time update
-    // The `:target` selector does not re-evaluate after we replace element in the DOM
-    Notes.updateNoteTargetSelector($note);
-    this.$noteToCleanHighlight = $note;
-  }
-
-  onHashChange() {
-    if (this.$noteToCleanHighlight) {
-      Notes.updateNoteTargetSelector(this.$noteToCleanHighlight);
-    }
-
-    this.$noteToCleanHighlight = null;
-  }
-
-  static updateNoteTargetSelector($note) {
-    const hash = getLocationHash();
-    // Needs to be an explicit true/false for the jQuery `toggleClass(force)`
-    const addTargetClass = Boolean(hash && $note.filter(`#${hash}`).length > 0);
-    $note.toggleClass('target', addTargetClass);
-  }
-
-  /**
-   * Render note in main comments area.
-   *
-   * Note: for rendering inline notes use renderDiscussionNote
-   */
-  renderNote(noteEntity, $form, $notesList = $('.main-notes-list')) {
-    if (noteEntity.discussion_html) {
-      return this.renderDiscussionNote(noteEntity, $form);
-    }
-
-    if (!noteEntity.valid) {
-      if (noteEntity.errors && noteEntity.errors.commands_only) {
-        if (noteEntity.commands_changes && Object.keys(noteEntity.commands_changes).length > 0) {
-          $notesList.find('.system-note.being-posted').remove();
-        }
-        this.addFlash({
-          message: noteEntity.errors.commands_only,
-          type: 'notice',
-          parent: this.parentTimeline.get(0),
-        });
-        this.refresh();
-      }
-      return;
-    }
-
-    const $note = $notesList.find(`#note_${noteEntity.id}`);
-    if (Notes.isNewNote(noteEntity, this.note_ids)) {
-      if (isInMRPage()) {
-        return;
-      }
-
-      this.note_ids.push(noteEntity.id);
-
-      if ($notesList.length) {
-        $notesList.find('.system-note.being-posted').remove();
-      }
-      const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
-
-      this.setupNewNote($newNote);
-      this.refresh();
-      return this.updateNotesCount(1);
-    } else if (Notes.isUpdatedNote(noteEntity, $note)) {
-      // The server can send the same update multiple times so we need to make sure to only update once per actual update.
-      const isEditing = $note.hasClass('is-editing');
-      const initialContent = normalizeNewlines($note.find('.original-note-content').text().trim());
-      const $textarea = $note.find('.js-note-text');
-      const currentContent = $textarea.val();
-      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
-      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
-      const isTextareaUntouched =
-        currentContent === initialContent || currentContent === sanitizedNoteNote;
-
-      if (isEditing && isTextareaUntouched) {
-        $textarea.val(noteEntity.note);
-        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-      } else if (isEditing && !isTextareaUntouched) {
-        this.putConflictEditWarningInPlace(noteEntity, $note);
-        this.updatedNotesTrackingMap[noteEntity.id] = noteEntity;
-      } else {
-        const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
-        this.setupNewNote($updatedNote);
-      }
-    }
-  }
-
-  isParallelView() {
-    return Cookies.get('diff_view') === 'parallel';
-  }
-
-  /**
-   * Render note in discussion area. To render inline notes use renderDiscussionNote.
-   */
-  renderDiscussionNote(noteEntity, $form) {
-    let discussionContainer;
-    let row;
-
-    if (!Notes.isNewNote(noteEntity, this.note_ids)) {
-      return;
-    }
-    this.note_ids.push(noteEntity.id);
-
-    const form =
-      $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
-    row =
-      form.length || !noteEntity.discussion_line_code
-        ? form.closest('tr')
-        : $(`#${noteEntity.discussion_line_code}`);
-
-    if (noteEntity.on_image) {
-      row = form;
-    }
-
-    // is this the first note of discussion?
-    discussionContainer = $(`.notes[data-discussion-id="${noteEntity.discussion_id}"]`);
-    if (!discussionContainer.length) {
-      discussionContainer = form.closest('.discussion').find('.notes');
-    }
-    if (discussionContainer.length === 0) {
-      if (noteEntity.diff_discussion_html) {
-        const $discussion = $(noteEntity.diff_discussion_html).renderGFM();
-
-        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
-          // insert the note and the reply button after the temp row
-          row.after($discussion);
-        } else {
-          // Merge new discussion HTML in
-          const $notes = $discussion.find(
-            `.notes[data-discussion-id="${noteEntity.discussion_id}"]`,
-          );
-          const contentContainerClass = $notes
-            .closest('.notes-content')
-            .attr('class')
-            .split(' ')
-            .join('.');
-
-          row
-            .find(`.${contentContainerClass} .content`)
-            .append($notes.closest('.content').children());
-        }
-      } else {
-        Notes.animateAppendNote(noteEntity.discussion_html, $('.main-notes-list'));
-      }
-    } else {
-      // append new note to all matching discussions
-      Notes.animateAppendNote(noteEntity.html, discussionContainer);
-    }
-
-    localTimeAgo(document.querySelectorAll('.js-timeago'), false);
-    Notes.checkMergeRequestStatus();
-    return this.updateNotesCount(1);
-  }
-
-  getLineHolder(changesDiscussionContainer) {
-    return $(changesDiscussionContainer)
-      .closest('.notes_holder')
-      .prevAll('.line_holder')
-      .first()
-      .get(0);
-  }
-
-  /**
-   * Called in response the main target form has been successfully submitted.
-   *
-   * Removes any errors.
-   * Resets text and preview.
-   * Resets buttons.
-   */
-  resetMainTargetForm(e) {
-    const form = $('.js-main-target-form');
-    // remove validation errors
-    form.find('.js-errors').remove();
-    // reset text and preview
-    form.find('.js-md-write-button').click();
-    form.find('.js-note-text').val('').trigger('input');
-    form.find('.js-note-text').data('autosave').reset();
-
-    const event = document.createEvent('Event');
-    event.initEvent('autosize:update', true, false);
-    form.find('.js-autosize')[0].dispatchEvent(event);
-
-    this.updateTargetButtons(e);
-  }
-
-  reenableTargetFormSubmitButton() {
-    const form = $('.js-main-target-form');
-    return form.find('.js-note-text').trigger('input');
-  }
-
-  /**
-   * Shows the main form and does some setup on it.
-   *
-   * Sets some hidden fields in the form.
-   */
-  setupMainTargetNoteForm(enableGFM) {
-    // find the form
-    const form = $('.js-new-note-form');
-    // Set a global clone of the form for later cloning
-    this.formClone = form.clone();
-    // show the form
-    this.setupNoteForm(form, enableGFM);
-    // fix classes
-    form.removeClass('js-new-note-form');
-    form.addClass('js-main-target-form');
-    form.find('#note_line_code').remove();
-    form.find('#note_position').remove();
-    form.find('#note_type').val('');
-    form.find('#note_project_id').remove();
-    form.find('#in_reply_to_discussion_id').remove();
-    this.parentTimeline = form.parents('.timeline');
-
-    if (form.length) {
-      Notes.initCommentTypeToggle(form.get(0));
-    }
-  }
-
-  /**
-   * General note form setup.
-   *
-   * deactivates the submit button when text is empty
-   * hides the preview button when text is empty
-   * set up GFM auto complete
-   * show the form
-   */
-  setupNoteForm(form, enableGFM = defaultAutocompleteConfig) {
-    this.glForm = new GLForm(form, enableGFM);
-    const textarea = form.find('.js-note-text');
-    const key = [
-      s__('NoteForm|Note'),
-      form.find('#note_noteable_type').val(),
-      form.find('#note_noteable_id').val(),
-      form.find('#note_commit_id').val(),
-      form.find('#note_type').val(),
-      form.find('#note_project_id').val(),
-      form.find('#in_reply_to_discussion_id').val(),
-
-      // LegacyDiffNote
-      form.find('#note_line_code').val(),
-
-      // DiffNote
-      form.find('#note_position').val(),
-    ];
-    return new Autosave(textarea, key);
-  }
-
-  /**
-   * Called in response to the new note form being submitted
-   *
-   * Adds new note to list.
-   */
-  addNote($form, note) {
-    return this.renderNote(note);
-  }
-
-  addNoteError($form) {
-    let formParentTimeline;
-    if ($form.hasClass('js-main-target-form')) {
-      formParentTimeline = $form.parents('.timeline');
-    } else if ($form.hasClass('js-discussion-note-form')) {
-      formParentTimeline = $form.closest('.discussion-notes').find('.notes');
-    }
-    return this.addFlash({
-      message: __(
-        'Your comment could not be submitted! Please check your network connection and try again.',
-      ),
-      parent: formParentTimeline.get(0),
-    });
-  }
-
-  updateNoteError() {
-    createFlash({
-      message: __(
-        'Your comment could not be updated! Please check your network connection and try again.',
-      ),
-    });
-  }
-
-  /**
-   * Called in response to the new note form being submitted
-   *
-   * Adds new note to list.
-   */
-  addDiscussionNote($form, note, isNewDiffComment) {
-    if ($form.attr('data-resolve-all') != null) {
-      const discussionId = $form.data('discussionId');
-      const mergeRequestId = $form.data('noteableIid');
-
-      if (ResolveService != null) {
-        ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
-      }
-    }
-
-    this.renderNote(note, $form);
-    // cleanup after successfully creating a diff/discussion note
-    if (isNewDiffComment) {
-      this.removeDiscussionNoteForm($form);
-    }
-  }
-
-  /**
-   * Called in response to the edit note form being submitted
-   *
-   * Updates the current note field.
-   */
-  updateNote(noteEntity, $targetNote) {
-    // Convert returned HTML to a jQuery object so we can modify it further
-    const $noteEntityEl = $(noteEntity.html);
-    this.revertNoteEditForm($targetNote);
-    $noteEntityEl.renderGFM();
-    // Find the note's `li` element by ID and replace it with the updated HTML
-    const $note_li = $(`.note-row-${noteEntity.id}`);
-
-    $note_li.replaceWith($noteEntityEl);
-    this.setupNewNote($noteEntityEl);
-  }
-
-  checkContentToAllowEditing($el) {
-    const initialContent = $el.find('.original-note-content').text().trim();
-    const currentContent = $el.find('.js-note-text').val();
-    let isAllowed = true;
-
-    if (currentContent === initialContent) {
-      this.removeNoteEditForm($el);
-    } else {
-      const isWidgetVisible = isInViewport($el.get(0));
-
-      if (!isWidgetVisible) {
-        scrollToElement($el);
-      }
-
-      $el.find('.js-finish-edit-warning').show();
-      isAllowed = false;
-    }
-
-    return isAllowed;
-  }
-
-  /**
-   * Called in response to clicking the edit note link
-   *
-   * Replaces the note text with the note edit form
-   * Adds a data attribute to the form with the original content of the note for cancellations
-   */
-  showEditForm(e) {
-    e.preventDefault();
-
-    const $target = $(e.target);
-    const $editForm = $(this.getEditFormSelector($target));
-    const $note = $target.closest('.note');
-    const $currentlyEditing = $('.note.is-editing:visible');
-
-    if ($currentlyEditing.length) {
-      const isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
-
-      if (!isEditAllowed) {
-        return;
-      }
-    }
-
-    $note.find('.js-note-attachment-delete').show();
-    $editForm.addClass('current-note-edit-form');
-    $note.addClass('is-editing');
-    this.putEditFormInPlace($target);
-  }
-
-  /**
-   * Called in response to clicking the edit note link
-   *
-   * Hides edit form and restores the original note text to the editor textarea.
-   */
-  cancelEdit(e) {
-    e.preventDefault();
-    const $target = $(e.target);
-    const $note = $target.closest('.note');
-    const noteId = $note.attr('data-note-id');
-
-    this.revertNoteEditForm($target);
-
-    if (this.updatedNotesTrackingMap[noteId]) {
-      const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
-      $note.replaceWith($newNote);
-      this.setupNewNote($newNote);
-      // Now that we have taken care of the update, clear it out
-      delete this.updatedNotesTrackingMap[noteId];
-    } else {
-      $note.find('.js-finish-edit-warning').hide();
-      this.removeNoteEditForm($note);
-    }
-  }
-
-  revertNoteEditForm($target) {
-    $target = $target || $('.note.is-editing:visible');
-    const selector = this.getEditFormSelector($target);
-    const $editForm = $(selector);
-
-    $editForm.insertBefore('.diffs');
-    $editForm.find('.js-comment-save-button').enable();
-    $editForm.find('.js-finish-edit-warning').hide();
-  }
-
-  getEditFormSelector($el) {
-    let selector = '.note-edit-form:not(.mr-note-edit-form)';
-
-    if ($el.parents('#diffs').length) {
-      selector = '.note-edit-form.mr-note-edit-form';
-    }
-
-    return selector;
-  }
-
-  removeNoteEditForm($note) {
-    const form = $note.find('.diffs .current-note-edit-form');
-
-    $note.removeClass('is-editing');
-    form.removeClass('current-note-edit-form');
-    form.find('.js-finish-edit-warning').hide();
-    // Replace markdown textarea text with original note text.
-    return form.find('.js-note-text').val(form.find('form.edit-note').data('originalNote'));
-  }
-
-  /**
-   * Called in response to deleting a note of any kind.
-   *
-   * Removes the actual note from view.
-   * Removes the whole discussion if the last note is being removed.
-   */
-  removeNote(e) {
-    const $note = $(e.currentTarget).closest('.note');
-    const noteElId = $note.attr('id');
-    $(`.note[id="${noteElId}"]`).each((i, el) => {
-      // A same note appears in the "Discussion" and in the "Changes" tab, we have
-      // to remove all. Using $('.note[id='noteId']') ensure we get all the notes,
-      // where $('#noteId') would return only one.
-      const $note = $(el);
-      const $notes = $note.closest('.discussion-notes');
-      const discussionId = $('.notes', $notes).data('discussionId');
-
-      $note.remove();
-
-      // check if this is the last note for this line
-      if ($notes.find('.note').length === 0) {
-        const notesTr = $notes.closest('tr');
-
-        // "Discussions" tab
-        $notes.closest('.timeline-entry').remove();
-
-        $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
-
-        // The notes tr can contain multiple lists of notes, like on the parallel diff
-        // notesTr does not exist for image diffs
-        if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
-          const $diffFile = $notes.closest('.diff-file');
-          if ($diffFile.length > 0) {
-            const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
-              detail: {
-                // badgeNumber's start with 1 and index starts with 0
-                badgeNumber: $notes.index() + 1,
-              },
-            });
-
-            $diffFile[0].dispatchEvent(removeBadgeEvent);
-          }
-
-          $notes.remove();
-        } else if (notesTr.length > 0) {
-          notesTr.remove();
-        }
-      }
-    });
-
-    Notes.checkMergeRequestStatus();
-    return this.updateNotesCount(-1);
-  }
-
-  /**
-   * Called in response to clicking the delete attachment link
-   *
-   * Removes the attachment wrapper view, including image tag if it exists
-   * Resets the note editing form
-   */
-  removeAttachment() {
-    const $note = $(this).closest('.note');
-    $note.find('.note-attachment').remove();
-    $note.find('.note-body > .note-text').show();
-    $note.find('.note-header').show();
-    return $note.find('.diffs .current-note-edit-form').remove();
-  }
-
-  /**
-   * Called when clicking on the "reply" button for a diff line.
-   *
-   * Shows the note form below the notes.
-   */
-  onReplyToDiscussionNote(e) {
-    this.replyToDiscussionNote(e.target);
-  }
-
-  replyToDiscussionNote(target) {
-    const form = this.cleanForm(this.formClone.clone());
-    const replyLink = $(target).closest('.js-discussion-reply-button');
-    // insert the form after the button
-    replyLink.closest('.discussion-reply-holder').hide().after(form);
-    // show the form
-    return this.setupDiscussionNoteForm(replyLink, form);
-  }
-
-  /**
-   * Shows the diff or discussion form and does some setup on it.
-   *
-   * Sets some hidden fields in the form.
-   *
-   * Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
-   */
-  setupDiscussionNoteForm(dataHolder, form) {
-    // set up note target
-    let diffFileData = dataHolder.closest('.text-file');
-
-    if (diffFileData.length === 0) {
-      diffFileData = dataHolder.closest('.image');
-    }
-
-    const discussionID = dataHolder.data('discussionId');
-
-    if (discussionID) {
-      form.attr('data-discussion-id', discussionID);
-      form.find('#in_reply_to_discussion_id').val(discussionID);
-    }
-
-    form.find('#note_project_id').val(dataHolder.data('discussionProjectId'));
-
-    form.attr('data-line-code', dataHolder.data('lineCode'));
-    form.find('#line_type').val(dataHolder.data('lineType'));
-
-    form.find('#note_noteable_type').val(diffFileData.data('noteableType'));
-    form.find('#note_noteable_id').val(diffFileData.data('noteableId'));
-    form.find('#note_commit_id').val(diffFileData.data('commitId'));
-
-    form.find('#note_type').val(dataHolder.data('noteType'));
-
-    // LegacyDiffNote
-    form.find('#note_line_code').val(dataHolder.data('lineCode'));
-
-    // DiffNote
-    form.find('#note_position').val(dataHolder.attr('data-position'));
-
-    form.append('</div>').find('.js-close-discussion-note-form').show().removeClass('hide');
-    form.find('.js-note-target-close').remove();
-    form.find('.js-note-new-discussion').remove();
-    this.setupNoteForm(form);
-
-    form.removeClass('js-main-target-form').addClass('discussion-form js-discussion-note-form');
-
-    form.find('.js-note-text').focus();
-    form.find('.js-comment-resolve-button').attr('data-discussion-id', discussionID);
-  }
-
-  /**
-   * Called when clicking on the "add a comment" button on the side of a diff line.
-   *
-   * Inserts a temporary row for the form below the line.
-   * Sets up the form and shows it.
-   */
-  onAddDiffNote(e) {
-    e.preventDefault();
-    const link = e.currentTarget || e.target;
-    const $link = $(link);
-    const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
-    this.toggleDiffNote({
-      target: $link,
-      lineType: link.dataset.lineType,
-      showReplyInput,
-      currentUsername: gon.current_username,
-      currentUserAvatar: gon.current_user_avatar_url,
-      currentUserFullname: gon.current_user_fullname,
-    });
-  }
-
-  onAddImageDiffNote(e) {
-    const $link = $(e.currentTarget || e.target);
-    const $diffFile = $link.closest('.diff-file');
-
-    const clickEvent = new CustomEvent('click.imageDiff', {
-      detail: e,
-    });
-
-    $diffFile[0].dispatchEvent(clickEvent);
-
-    // Set up comment form
-    let newForm;
-    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
-    const $form = $noteContainer.find('> .discussion-form');
-
-    if ($form.length === 0) {
-      newForm = this.cleanForm(this.formClone.clone());
-      newForm.appendTo($noteContainer);
-    } else {
-      newForm = $form;
-    }
-
-    this.setupDiscussionNoteForm($link, newForm);
-  }
-
-  toggleDiffNote({ target, lineType, forceShow, showReplyInput = false }) {
-    let addForm;
-    let newForm;
-    let noteForm;
-    let replyButton;
-    let rowCssToAdd;
-    const $link = $(target);
-    const row = $link.closest('tr');
-    const nextRow = row.next();
-    let targetRow = row;
-    if (nextRow.is('.notes_holder')) {
-      targetRow = nextRow;
-    }
-
-    const hasNotes = nextRow.is('.notes_holder');
-    addForm = false;
-    let lineTypeSelector = '';
-    rowCssToAdd =
-      '<tr class="notes_holder js-temp-notes-holder"><td class="notes-content" colspan="3"><div class="content"></div></td></tr>';
-    // In parallel view, look inside the correct left/right pane
-    if (this.isParallelView()) {
-      lineTypeSelector = `.${lineType}`;
-      rowCssToAdd =
-        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes-content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes-content parallel new"><div class="content"></div></td></tr>';
-    }
-    const notesContentSelector = `.notes-content${lineTypeSelector} .content`;
-    let notesContent = targetRow.find(notesContentSelector);
-
-    if (hasNotes && showReplyInput) {
-      targetRow.show();
-      notesContent = targetRow.find(notesContentSelector);
-      if (notesContent.length) {
-        notesContent.show();
-        replyButton = notesContent.find('.js-discussion-reply-button:visible');
-        if (replyButton.length) {
-          this.replyToDiscussionNote(replyButton[0]);
-        } else {
-          // In parallel view, the form may not be present in one of the panes
-          noteForm = notesContent.find('.js-discussion-note-form');
-          if (noteForm.length === 0) {
-            addForm = true;
-          }
-        }
-      }
-    } else if (showReplyInput) {
-      // add a notes row and insert the form
-      row.after(rowCssToAdd);
-      targetRow = row.next();
-      notesContent = targetRow.find(notesContentSelector);
-      addForm = true;
-    } else {
-      const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
-      const isForced = forceShow === true || forceShow === false;
-      const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
-
-      targetRow.toggleClass('hide', !showNow);
-      notesContent.toggleClass('hide', !showNow);
-    }
-
-    if (addForm) {
-      newForm = this.cleanForm(this.formClone.clone());
-      newForm.appendTo(notesContent);
-      // show the form
-      return this.setupDiscussionNoteForm($link, newForm);
-    }
-  }
-
-  /**
-   * Called in response to "cancel" on a diff note form.
-   *
-   * Shows the reply button again.
-   * Removes the form and if necessary it's temporary row.
-   */
-  removeDiscussionNoteForm(form) {
-    const row = form.closest('tr');
-    const glForm = form.data('glForm');
-    glForm.destroy();
-    form.find('.js-note-text').data('autosave').reset();
-    // show the reply button (will only work for replies)
-    form.prev('.discussion-reply-holder').show();
-    if (row.is('.js-temp-notes-holder')) {
-      // remove temporary row for diff lines
-      return row.remove();
-    }
-    // only remove the form
-    return form.remove();
-  }
-
-  cancelDiscussionForm(e) {
-    e.preventDefault();
-    const $form = $(e.target).closest('.js-discussion-note-form');
-    const $discussionNote = $(e.target).closest('.discussion-notes');
-
-    if ($discussionNote.length === 0) {
-      // Only send blur event when the discussion form
-      // is not part of a discussion note
-      const $diffFile = $form.closest('.diff-file');
-
-      if ($diffFile.length > 0) {
-        const blurEvent = new CustomEvent('blur.imageDiff', {
-          detail: e,
-        });
-
-        $diffFile[0].dispatchEvent(blurEvent);
-      }
-    }
-
-    return this.removeDiscussionNoteForm($form);
-  }
-
-  /**
-   * Called after an attachment file has been selected.
-   *
-   * Updates the file name for the selected attachment.
-   */
-  updateFormAttachment() {
-    const form = $(this).closest('form');
-    // get only the basename
-    const filename = $(this)
-      .val()
-      .replace(/^.*[\\\/]/, '');
-    return form.find('.js-attachment-filename').text(filename);
-  }
-
-  /**
-   * Called when the tab visibility changes
-   */
-  visibilityChange() {
-    return this.refresh();
-  }
-
-  updateTargetButtons(e) {
-    let closetext;
-    let reopentext;
-    const textarea = $(e.target);
-    const form = textarea.parents('form');
-    const reopenbtn = form.find('.js-note-target-reopen');
-    const closebtn = form.find('.js-note-target-close');
-
-    if (textarea.val().trim().length > 0) {
-      reopentext = reopenbtn.attr('data-alternative-text');
-      closetext = closebtn.attr('data-alternative-text');
-      if (reopenbtn.text() !== reopentext) {
-        reopenbtn.text(reopentext);
-      }
-      if (closebtn.text() !== closetext) {
-        closebtn.text(closetext);
-      }
-      if (reopenbtn.is(':not(.btn-comment-and-reopen)')) {
-        reopenbtn.addClass('btn-comment-and-reopen');
-      }
-      if (closebtn.is(':not(.btn-comment-and-close)')) {
-        closebtn.addClass('btn-comment-and-close');
-      }
-    } else {
-      reopentext = reopenbtn.data('originalText');
-      closetext = closebtn.data('originalText');
-      if (reopenbtn.text() !== reopentext) {
-        reopenbtn.text(reopentext);
-      }
-      if (closebtn.text() !== closetext) {
-        closebtn.text(closetext);
-      }
-      if (reopenbtn.is('.btn-comment-and-reopen')) {
-        reopenbtn.removeClass('btn-comment-and-reopen');
-      }
-      if (closebtn.is('.btn-comment-and-close')) {
-        closebtn.removeClass('btn-comment-and-close');
-      }
-    }
-  }
-
-  putEditFormInPlace($el) {
-    const $editForm = $(this.getEditFormSelector($el));
-    const $note = $el.closest('.note');
-
-    $editForm.insertAfter($note.find('.note-text'));
-
-    const $originalContentEl = $note.find('.original-note-content');
-    const originalContent = $originalContentEl.text().trim();
-    const postUrl = $originalContentEl.data('postUrl');
-    const targetId = $originalContentEl.data('targetId');
-    const targetType = $originalContentEl.data('targetType');
-
-    this.glForm = new GLForm($editForm.find('form'), this.enableGFM);
-
-    $editForm.find('form').attr('action', `${postUrl}?html=true`).attr('data-remote', 'true');
-    $editForm.find('.js-form-target-id').val(targetId);
-    $editForm.find('.js-form-target-type').val(targetType);
-    $editForm.find('.js-note-text').focus().val(originalContent);
-    $editForm.find('.js-md-write-button').trigger('click');
-    $editForm.find('.referenced-users').hide();
-  }
-
-  putConflictEditWarningInPlace(noteEntity, $note) {
-    if ($note.find('.js-conflict-edit-warning').length === 0) {
-      const open_link = `<a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">`;
-      const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
-        ${sprintf(
-          s__(
-            'Notes|This comment has changed since you started editing, please review the %{open_link}updated comment%{close_link} to ensure information is not lost',
-          ),
-          {
-            open_link,
-            close_link: '</a>',
-          },
-        )}
-      </div>`);
-      $alert.insertAfter($note.find('.note-text'));
-    }
-  }
-
-  updateNotesCount(updateCount) {
-    return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
-  }
-
-  static renderPlaceholderComponent($container) {
-    const el = $container.find('.js-code-placeholder').get(0);
-    // eslint-disable-next-line no-new
-    new Vue({
-      el,
-      components: {
-        GlSkeletonLoading,
-      },
-      render(createElement) {
-        return createElement('gl-skeleton-loading');
-      },
-    });
-  }
-
-  static renderDiffContent($container, data) {
-    const { discussion_html } = data;
-    const lines = $(discussion_html).find('.line_holder');
-    lines.addClass('fade-in');
-    $container.find('.diff-content > table > tbody').prepend(lines);
-    const fileHolder = $container.find('.file-holder');
-    $container.find('.line-holder-placeholder').remove();
-    syntaxHighlight(fileHolder);
-  }
-
-  onClickRetryLazyLoad(e) {
-    const $retryButton = $(e.currentTarget);
-
-    $retryButton.prop('disabled', true);
-
-    return this.loadLazyDiff(e).then(() => {
-      $retryButton.prop('disabled', false);
-    });
-  }
-
-  loadLazyDiff(e) {
-    const $container = $(e.currentTarget).closest('.js-toggle-container');
-    Notes.renderPlaceholderComponent($container);
-
-    $container.find('.js-toggle-lazy-diff').removeClass('js-toggle-lazy-diff');
-
-    const $tableEl = $container.find('tbody');
-    if ($tableEl.length === 0) return;
-
-    const fileHolder = $container.find('.file-holder');
-    const url = fileHolder.data('linesPath');
-
-    const $errorContainer = $container.find('.js-error-lazy-load-diff');
-    const $successContainer = $container.find('.js-success-lazy-load');
-
-    /**
-     * We only fetch resolved discussions.
-     * Unresolved discussions don't have an endpoint being provided.
-     */
-    if (url) {
-      return axios
-        .get(url)
-        .then(({ data }) => {
-          // Reset state in case last request returned error
-          $successContainer.removeClass('hidden');
-          $errorContainer.addClass('hidden');
-
-          Notes.renderDiffContent($container, data);
-        })
-        .catch(() => {
-          $successContainer.addClass('hidden');
-          $errorContainer.removeClass('hidden');
-        });
-    }
-    return Promise.resolve();
-  }
-
-  toggleCommitList(e) {
-    const $element = $(e.currentTarget);
-    const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
-    const $svgChevronUpElement = $element.find('svg.js-chevron-up');
-    const $svgChevronDownElement = $element.find('svg.js-chevron-down');
-
-    $svgChevronUpElement.toggleClass('gl-display-none');
-    $svgChevronDownElement.toggleClass('gl-display-none');
-
-    $closestSystemCommitList.toggleClass('hide-shade');
-  }
-
-  /**
-   * Scans system notes with `ul` elements in system note body
-   * then collapse long commit list pushed by user to make it less
-   * intrusive.
-   */
-  collapseLongCommitList() {
-    const systemNotes = $('#notes-list').find('li.system-note').has('ul');
-
-    $.each(systemNotes, (index, systemNote) => {
-      const $systemNote = $(systemNote);
-      const headerMessage = $systemNote
-        .find('.note-text')
-        .find('p')
-        .first()
-        .text()
-        .replace(':', '');
-
-      $systemNote.find('.note-header .system-note-message').html(headerMessage);
-
-      if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
-        $systemNote.find('.note-text').addClass('system-note-commit-list');
-        $systemNote.find('.system-note-commit-list-toggler').show();
-      } else {
-        $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
-      }
-    });
-  }
-
-  addFlash(...flashParams) {
-    this.flashContainer = createFlash(...flashParams);
-  }
-
-  clearFlash() {
-    if (this.flashContainer) {
-      this.flashContainer.style.display = 'none';
-      this.flashContainer = null;
-    }
-  }
-
-  cleanForm($form) {
-    // Remove JS classes that are not needed here
-    $form.find('.js-comment-type-dropdown').removeClass('btn-group');
-
-    // Remove dropdown
-    $form.find('.dropdown-menu').remove();
-
-    return $form;
-  }
-
-  /**
-   * Check if note does not exist on page
-   */
-  static isNewNote(noteEntity, noteIds) {
-    return $.inArray(noteEntity.id, noteIds) === -1;
-  }
-
-  /**
-   * Check if $note already contains the `noteEntity` content
-   */
-  static isUpdatedNote(noteEntity, $note) {
-    // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
-    const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
-    const currentNoteText = normalizeNewlines(
-      $note.find('.original-note-content').first().text().trim(),
-    );
-    return sanitizedNoteEntityText !== currentNoteText;
-  }
-
-  static checkMergeRequestStatus() {
-    if (getPagePath(1) === 'merge_requests' && gl.mrWidget) {
-      gl.mrWidget.checkStatus();
-    }
-  }
-
-  static animateAppendNote(noteHtml, $notesList) {
-    const $note = $(noteHtml);
-
-    $note.addClass('fade-in-full').renderGFM();
-    $notesList.append($note);
-    return $note;
-  }
-
-  static animateUpdateNote(noteHtml, $note) {
-    const $updatedNote = $(noteHtml);
-
-    $updatedNote.addClass('fade-in').renderGFM();
-    $note.replaceWith($updatedNote);
-    return $updatedNote;
-  }
-
-  /**
-   * Get data from Form attributes to use for saving/submitting comment.
-   */
-  getFormData($form) {
-    const content = $form.find('.js-note-text').val();
-    return {
-      // eslint-disable-next-line no-jquery/no-serialize
-      formData: $form.serialize(),
-      formContent: escape(content),
-      formAction: $form.attr('action'),
-      formContentOriginal: content,
-    };
-  }
-
-  /**
-   * Identify if comment has any quick actions
-   */
-  hasQuickActions(formContent) {
-    return REGEX_QUICK_ACTIONS.test(formContent);
-  }
-
-  /**
-   * Remove quick actions and leave comment with pure message
-   */
-  stripQuickActions(formContent) {
-    return formContent.replace(REGEX_QUICK_ACTIONS, '').trim();
-  }
-
-  /**
-   * Gets appropriate description from quick actions found in provided `formContent`
-   */
-  getQuickActionDescription(formContent, availableQuickActions = []) {
-    let tempFormContent;
-
-    // Identify executed quick actions from `formContent`
-    const executedCommands = availableQuickActions.filter((command) => {
-      const commandRegex = new RegExp(`/${command.name}`);
-      return commandRegex.test(formContent);
-    });
-
-    if (executedCommands && executedCommands.length) {
-      if (executedCommands.length > 1) {
-        tempFormContent = __('Applying multiple commands');
-      } else {
-        const commandDescription = executedCommands[0].description.toLowerCase();
-        tempFormContent = sprintf(__('Applying command to %{commandDescription}'), {
-          commandDescription,
-        });
-      }
-    } else {
-      tempFormContent = __('Applying command');
-    }
-
-    return tempFormContent;
-  }
-
-  /**
-   * Create placeholder note DOM element populated with comment body
-   * that we will show while comment is being posted.
-   * Once comment is _actually_ posted on server, we will have final element
-   * in response that we will show in place of this temporary element.
-   */
-  createPlaceholderNote({
-    formContent,
-    uniqueId,
-    isDiscussionNote,
-    currentUsername,
-    currentUserFullname,
-    currentUserAvatar,
-  }) {
-    const discussionClass = isDiscussionNote ? 'discussion' : '';
-    const $tempNote = $(
-      `<li id="${uniqueId}" class="note being-posted fade-in-half timeline-entry">
-         <div class="timeline-entry-inner">
-            <div class="timeline-icon">
-               <a href="/${escape(currentUsername)}">
-                 <img class="avatar s40" src="${currentUserAvatar}" />
-               </a>
-            </div>
-            <div class="timeline-content ${discussionClass}">
-               <div class="note-header">
-                  <div class="note-header-info">
-                     <a href="/${escape(currentUsername)}">
-                       <span class="d-none d-sm-inline-block bold">${escape(currentUsername)}</span>
-                       <span class="note-headline-light">${escape(currentUsername)}</span>
-                     </a>
-                  </div>
-               </div>
-               <div class="note-body">
-                 <div class="note-text">
-                   <p>${formContent}</p>
-                 </div>
-               </div>
-            </div>
-         </div>
-      </li>`,
-    );
-
-    $tempNote.find('.d-none.d-sm-inline-block').text(escape(currentUserFullname));
-    $tempNote.find('.note-headline-light').text(`@${escape(currentUsername)}`);
-
-    return $tempNote;
-  }
-
-  /**
-   * Create Placeholder System Note DOM element populated with quick action description
-   */
-  createPlaceholderSystemNote({ formContent, uniqueId }) {
-    const $tempNote = $(
-      `<li id="${uniqueId}" class="note system-note timeline-entry being-posted fade-in-half">
-         <div class="timeline-entry-inner">
-           <div class="timeline-content">
-             <i>${formContent}</i>
-           </div>
-         </div>
-       </li>`,
-    );
-
-    return $tempNote;
-  }
-
-  /**
-   * This method does following tasks step-by-step whenever a new comment
-   * is submitted by user (both main thread comments as well as discussion comments).
-   *
-   * 1) Get Form metadata
-   * 2) Identify comment type; a) Main thread b) Discussion thread c) Discussion resolve
-   * 3) Build temporary placeholder element (using `createPlaceholderNote`)
-   * 4) Show placeholder note on UI
-   * 5) Perform network request to submit the note using `axios.post`
-   *    a) If request is successfully completed
-   *        1. Remove placeholder element
-   *        2. Show submitted Note element
-   *        3. Perform post-submit errands
-   *           a. Mark discussion as resolved if comment submission was for resolve.
-   *           b. Reset comment form to original state.
-   *    b) If request failed
-   *        1. Remove placeholder element
-   *        2. Show error Flash message about failure
-   */
-  postComment(e) {
-    e.preventDefault();
-
-    // Get Form metadata
-    const $submitBtn = $(e.target);
-    $submitBtn.prop('disabled', true);
-    let $form = $submitBtn.parents('form');
-    const $closeBtn = $form.find('.js-note-target-close');
-    const isDiscussionNote =
-      $submitBtn.parent().find('li.droplab-item-selected').attr('id') === 'discussion';
-    const isMainForm = $form.hasClass('js-main-target-form');
-    const isDiscussionForm = $form.hasClass('js-discussion-note-form');
-    const isDiscussionResolve = $submitBtn.hasClass('js-comment-resolve-button');
-    const { formData, formContent, formAction, formContentOriginal } = this.getFormData($form);
-    let noteUniqueId;
-    let systemNoteUniqueId;
-    let hasQuickActions = false;
-    let $notesContainer;
-    let tempFormContent;
-
-    // Get reference to notes container based on type of comment
-    if (isDiscussionForm) {
-      $notesContainer = $form.parent('.discussion-notes').find('.notes');
-    } else if (isMainForm) {
-      $notesContainer = $('ul.main-notes-list');
-    }
-
-    // If comment is to resolve discussion, disable submit buttons while
-    // comment posting is finished.
-    if (isDiscussionResolve) {
-      $form.find('.js-comment-submit-button').disable();
-    }
-
-    tempFormContent = formContent;
-    if (this.glForm.supportsQuickActions && this.hasQuickActions(formContent)) {
-      tempFormContent = this.stripQuickActions(formContent);
-      hasQuickActions = true;
-    }
-
-    // Show placeholder note
-    if (tempFormContent) {
-      noteUniqueId = uniqueId('tempNote_');
-      $notesContainer.append(
-        this.createPlaceholderNote({
-          formContent: tempFormContent,
-          uniqueId: noteUniqueId,
-          isDiscussionNote,
-          currentUsername: gon.current_username,
-          currentUserFullname: gon.current_user_fullname,
-          currentUserAvatar: gon.current_user_avatar_url,
-        }),
-      );
-    }
-
-    // Show placeholder system note
-    if (hasQuickActions) {
-      systemNoteUniqueId = uniqueId('tempSystemNote_');
-      $notesContainer.append(
-        this.createPlaceholderSystemNote({
-          formContent: this.getQuickActionDescription(
-            formContent,
-            AjaxCache.get(gl.GfmAutoComplete.dataSources.commands),
-          ),
-          uniqueId: systemNoteUniqueId,
-        }),
-      );
-    }
-
-    // Clear the form textarea
-    if ($notesContainer.length) {
-      if (isMainForm) {
-        this.resetMainTargetForm(e);
-      } else if (isDiscussionForm) {
-        this.removeDiscussionNoteForm($form);
-      }
-    }
-
-    $closeBtn.text($closeBtn.data('originalText'));
-
-    // Make request to submit comment on server
-    return axios
-      .post(`${formAction}?html=true`, formData)
-      .then((res) => {
-        const note = res.data;
-
-        $submitBtn.prop('disabled', false);
-        // Submission successful! remove placeholder
-        $notesContainer.find(`#${noteUniqueId}`).remove();
-
-        const $diffFile = $form.closest('.diff-file');
-        if ($diffFile.length > 0) {
-          const blurEvent = new CustomEvent('blur.imageDiff', {
-            detail: e,
-          });
-
-          $diffFile[0].dispatchEvent(blurEvent);
-        }
-
-        // Reset cached commands list when command is applied
-        if (hasQuickActions) {
-          $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
-        }
-
-        // Clear previous form errors
-        this.clearFlashWrapper();
-
-        // Check if this was discussion comment
-        if (isDiscussionForm) {
-          // Remove flash-container
-          $notesContainer.find('.flash-container').remove();
-
-          // If comment intends to resolve discussion, do the same.
-          if (isDiscussionResolve) {
-            $form
-              .attr('data-discussion-id', $submitBtn.data('discussionId'))
-              .attr('data-resolve-all', 'true')
-              .attr('data-project-path', $submitBtn.data('projectPath'));
-          }
-
-          // Show final note element on UI
-          const isNewDiffComment = $notesContainer.length === 0;
-          this.addDiscussionNote($form, note, isNewDiffComment);
-
-          if (isNewDiffComment) {
-            // Add image badge, avatar badge and toggle discussion badge for new image diffs
-            const notePosition = $form.find('#note_position').val();
-            if ($diffFile.length > 0 && notePosition.length > 0) {
-              const { x, y, width, height } = JSON.parse(notePosition);
-              const addBadgeEvent = new CustomEvent('addBadge.imageDiff', {
-                detail: {
-                  x,
-                  y,
-                  width,
-                  height,
-                  noteId: `note_${note.id}`,
-                  discussionId: note.discussion_id,
-                },
-              });
-
-              $diffFile[0].dispatchEvent(addBadgeEvent);
-            }
-          }
-
-          // append flash-container to the Notes list
-          if ($notesContainer.length) {
-            $notesContainer.append('<div class="flash-container" style="display: none;"></div>');
-          }
-        } else if (isMainForm) {
-          // Check if this was main thread comment
-          // Show final note element on UI and perform form and action buttons cleanup
-          this.addNote($form, note);
-          this.reenableTargetFormSubmitButton(e);
-        }
-
-        if (note.commands_changes) {
-          this.handleQuickActions(note);
-        }
-
-        $form.trigger('ajax:success', [note]);
-      })
-      .catch(() => {
-        // Submission failed, remove placeholder note and show Flash error message
-        $notesContainer.find(`#${noteUniqueId}`).remove();
-        $submitBtn.prop('disabled', false);
-        const blurEvent = new CustomEvent('blur.imageDiff', {
-          detail: e,
-        });
-
-        const closestDiffFile = $form.closest('.diff-file');
-
-        if (closestDiffFile.length) {
-          closestDiffFile[0].dispatchEvent(blurEvent);
-        }
-
-        if (hasQuickActions) {
-          $notesContainer.find(`#${systemNoteUniqueId}`).remove();
-        }
-
-        // Show form again on UI on failure
-        if (isDiscussionForm && $notesContainer.length) {
-          const replyButton = $notesContainer.parent().find('.js-discussion-reply-button');
-          this.replyToDiscussionNote(replyButton[0]);
-          $form = $notesContainer.parent().find('form');
-        }
-
-        $form.find('.js-note-text').val(formContentOriginal);
-        this.reenableTargetFormSubmitButton(e);
-        this.addNoteError($form);
-      });
-  }
-
-  /**
-   * This method does following tasks step-by-step whenever an existing comment
-   * is updated by user (both main thread comments as well as discussion comments).
-   *
-   * 1) Get Form metadata
-   * 2) Update note element with new content
-   * 3) Perform network request to submit the updated note using `axios.post`
-   *    a) If request is successfully completed
-   *        1. Show submitted Note element
-   *    b) If request failed
-   *        1. Revert Note element to original content
-   *        2. Show error Flash message about failure
-   */
-  updateComment(e) {
-    e.preventDefault();
-
-    // Get Form metadata
-    const $submitBtn = $(e.target);
-    const $form = $submitBtn.parents('form');
-    const $closeBtn = $form.find('.js-note-target-close');
-    const $editingNote = $form.parents('.note.is-editing');
-    const $noteBody = $editingNote.find('.js-task-list-container');
-    const $noteBodyText = $noteBody.find('.note-text');
-    const { formData, formContent, formAction } = this.getFormData($form);
-
-    // Cache original comment content
-    const cachedNoteBodyText = $noteBodyText.html();
-
-    // Show updated comment content temporarily
-    $noteBodyText.html(formContent);
-    $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
-    $editingNote
-      .find('.note-headline-meta a')
-      .html('<span class="spinner align-text-bottom"></span>');
-
-    // Make request to update comment on server
-    axios
-      .post(`${formAction}?html=true`, formData)
-      .then(({ data }) => {
-        // Submission successful! render final note element
-        this.updateNote(data, $editingNote);
-      })
-      .catch(() => {
-        // Submission failed, revert back to original note
-        $noteBodyText.html(escape(cachedNoteBodyText));
-        $editingNote.removeClass('being-posted fade-in');
-        $editingNote.find('.gl-spinner').remove();
-
-        // Show Flash message about failure
-        this.updateNoteError();
-      });
-
-    return $closeBtn.text($closeBtn.data('originalText'));
-  }
-}
-
-window.Notes = Notes;
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 2ebebd76e1e..4e31fdcd4f0 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -1,14 +1,5 @@
 <script>
-import {
-  GlAlert,
-  GlButton,
-  GlIcon,
-  GlFormCheckbox,
-  GlTooltipDirective,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-} from '@gitlab/ui';
+import { GlAlert, GlButton, GlIcon, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui';
 import Autosize from 'autosize';
 import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
@@ -34,6 +25,7 @@ import { COMMENT_FORM } from '../i18n';
 
 import issuableStateMixin from '../mixins/issuable_state';
 import CommentFieldLayout from './comment_field_layout.vue';
+import CommentTypeDropdown from './comment_type_dropdown.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 
@@ -42,8 +34,6 @@ const { UNPROCESSABLE_ENTITY } = httpStatusCodes;
 export default {
   name: 'CommentForm',
   i18n: COMMENT_FORM,
-  noteTypeComment: constants.COMMENT,
-  noteTypeDiscussion: constants.DISCUSSION,
   components: {
     noteSignedOutWidget,
     discussionLockedWidget,
@@ -53,10 +43,8 @@ export default {
     TimelineEntryItem,
     GlIcon,
     CommentFieldLayout,
+    CommentTypeDropdown,
     GlFormCheckbox,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -88,12 +76,6 @@ export default {
       'hasDrafts',
     ]),
     ...mapState(['isToggleStateButtonLoading']),
-    isNoteTypeComment() {
-      return this.noteType === constants.COMMENT;
-    },
-    isNoteTypeDiscussion() {
-      return this.noteType === constants.DISCUSSION;
-    },
     noteableDisplayName() {
       return splitCamelCase(this.noteableType).toLowerCase();
     },
@@ -105,15 +87,8 @@ export default {
         ? this.$options.i18n.comment
         : this.$options.i18n.startThread;
     },
-    startDiscussionDescription() {
-      return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE
-        ? this.$options.i18n.discussionThatNeedsResolution
-        : this.$options.i18n.discussion;
-    },
-    commentDescription() {
-      return sprintf(this.$options.i18n.submitButton.commentHelp, {
-        noteableDisplayName: this.noteableDisplayName,
-      });
+    discussionsRequireResolution() {
+      return this.getNoteableData.noteableType === constants.MERGE_REQUEST_NOTEABLE_TYPE;
     },
     isOpen() {
       return this.openState === constants.OPENED || this.openState === constants.REOPENED;
@@ -314,15 +289,6 @@ export default {
 
       this.autosave.reset();
     },
-    setNoteType(type) {
-      this.noteType = type;
-    },
-    setNoteTypeToComment() {
-      this.setNoteType(constants.COMMENT);
-    },
-    setNoteTypeToDiscussion() {
-      this.setNoteType(constants.DISCUSSION);
-    },
     editCurrentUserLastNote() {
       if (this.note === '') {
         const lastNote = this.getCurrentUserLastNote;
@@ -448,40 +414,15 @@ export default {
                     class="gl-text-gray-500"
                   />
                 </gl-form-checkbox>
-                <gl-dropdown
-                  split
-                  :text="commentButtonTitle"
-                  class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown"
-                  category="primary"
-                  variant="confirm"
+                <comment-type-dropdown
+                  v-model="noteType"
+                  class="gl-mr-3"
                   :disabled="disableSubmitButton"
-                  data-testid="comment-button"
-                  data-qa-selector="comment_button"
-                  :data-track-label="trackingLabel"
-                  data-track-event="click_button"
-                  @click="handleSave()"
-                >
-                  <gl-dropdown-item
-                    is-check-item
-                    :is-checked="isNoteTypeComment"
-                    :selected="isNoteTypeComment"
-                    @click="setNoteTypeToComment"
-                  >
-                    <strong>{{ $options.i18n.submitButton.comment }}</strong>
-                    <p class="gl-m-0">{{ commentDescription }}</p>
-                  </gl-dropdown-item>
-                  <gl-dropdown-divider />
-                  <gl-dropdown-item
-                    is-check-item
-                    :is-checked="isNoteTypeDiscussion"
-                    :selected="isNoteTypeDiscussion"
-                    data-qa-selector="discussion_menu_item"
-                    @click="setNoteTypeToDiscussion"
-                  >
-                    <strong>{{ $options.i18n.submitButton.startThread }}</strong>
-                    <p class="gl-m-0">{{ startDiscussionDescription }}</p>
-                  </gl-dropdown-item>
-                </gl-dropdown>
+                  :tracking-label="trackingLabel"
+                  :noteable-display-name="noteableDisplayName"
+                  :discussions-require-resolution="discussionsRequireResolution"
+                  @click="handleSave"
+                />
               </template>
               <gl-button
                 v-if="canToggleIssueState"
diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
new file mode 100644
index 00000000000..663a912999d
--- /dev/null
+++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
@@ -0,0 +1,114 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+
+import { sprintf } from '~/locale';
+import { COMMENT_FORM } from '~/notes/i18n';
+import * as constants from '../constants';
+
+export default {
+  i18n: COMMENT_FORM,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  model: {
+    prop: 'noteType',
+    event: 'change',
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trackingLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    discussionsRequireResolution: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    noteableDisplayName: {
+      type: String,
+      required: true,
+    },
+    noteType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isNoteTypeComment() {
+      return this.noteType === constants.COMMENT;
+    },
+    isNoteTypeDiscussion() {
+      return this.noteType === constants.DISCUSSION;
+    },
+    commentButtonTitle() {
+      return this.noteType === constants.COMMENT
+        ? this.$options.i18n.comment
+        : this.$options.i18n.startThread;
+    },
+    startDiscussionDescription() {
+      return this.discussionsRequireResolution
+        ? this.$options.i18n.discussionThatNeedsResolution
+        : this.$options.i18n.discussion;
+    },
+    commentDescription() {
+      return sprintf(this.$options.i18n.submitButton.commentHelp, {
+        noteableDisplayName: this.noteableDisplayName,
+      });
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+    setNoteTypeToComment() {
+      if (this.noteType !== constants.COMMENT) {
+        this.$emit('change', constants.COMMENT);
+      }
+    },
+    setNoteTypeToDiscussion() {
+      if (this.noteType !== constants.DISCUSSION) {
+        this.$emit('change', constants.DISCUSSION);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    split
+    :text="commentButtonTitle"
+    class="gl-mr-3 js-comment-button js-comment-submit-button comment-type-dropdown"
+    category="primary"
+    variant="confirm"
+    :disabled="disabled"
+    data-testid="comment-button"
+    data-qa-selector="comment_button"
+    :data-track-label="trackingLabel"
+    data-track-action="click_button"
+    @click="$emit('click')"
+  >
+    <gl-dropdown-item is-check-item :is-checked="isNoteTypeComment" @click="setNoteTypeToComment">
+      <strong>{{ $options.i18n.submitButton.comment }}</strong>
+      <p class="gl-m-0">{{ commentDescription }}</p>
+    </gl-dropdown-item>
+    <gl-dropdown-divider />
+    <gl-dropdown-item
+      is-check-item
+      :is-checked="isNoteTypeDiscussion"
+      data-qa-selector="discussion_menu_item"
+      @click="setNoteTypeToDiscussion"
+    >
+      <strong>{{ $options.i18n.submitButton.startThread }}</strong>
+      <p class="gl-m-0">{{ startDiscussionDescription }}</p>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index e96e1204f76..b04aa74d46e 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
@@ -93,7 +92,11 @@ export default {
           >
             <td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
             <td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
-            <td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td>
+            <td
+              :class="line.type"
+              class="line_content"
+              v-html="trimChar(line.rich_text) /* eslint-disable-line vue/no-v-html */"
+            ></td>
           </tr>
         </template>
         <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder">
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index 55cf75132a9..831e6dd8f92 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -78,8 +78,8 @@ export default {
         v-if="resolveAllDiscussionsIssuePath && !allResolved"
         v-gl-tooltip
         :href="resolveAllDiscussionsIssuePath"
-        :title="s__('Resolve all threads in new issue')"
-        :aria-label="s__('Resolve all threads in new issue')"
+        :title="s__('Create issue to resolve all threads')"
+        :aria-label="s__('Create issue to resolve all threads')"
         class="new-issue-for-discussion discussion-create-issue-btn"
         icon="issue-new"
       />
@@ -89,7 +89,7 @@ export default {
         :title="__('Jump to next unresolved thread')"
         :aria-label="__('Jump to next unresolved thread')"
         class="discussion-next-btn"
-        data-track-event="click_button"
+        data-track-action="click_button"
         data-track-label="mr_next_unresolved_thread"
         data-track-property="click_next_unresolved_thread_top"
         icon="comment-next"
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index 9119d319d72..4ccba011014 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -4,7 +4,7 @@ import { s__ } from '~/locale';
 
 export default {
   i18n: {
-    buttonLabel: s__('MergeRequests|Resolve this thread in a new issue'),
+    buttonLabel: s__('MergeRequests|Create issue to resolve thread'),
   },
   name: 'ResolveWithIssueButton',
   components: {
diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
index 0cd2afcf8a0..8c8cc7984b1 100644
--- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue
+++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
@@ -19,7 +19,7 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip
-    data-track-event="click_button"
+    data-track-action="click_button"
     data-track-label="reply_comment_button"
     category="tertiary"
     icon="comment"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 9864e91c009..93f71276120 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
@@ -163,7 +162,11 @@ export default {
       @addToBatch="addSuggestionToBatch"
       @removeFromBatch="removeSuggestionFromBatch"
     />
-    <div v-else class="note-text md" v-html="note.note_html"></div>
+    <div
+      v-else
+      class="note-text md"
+      v-html="note.note_html /* eslint-disable-line vue/no-v-html */"
+    ></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index f2336e1b6f5..a4f06a8d9f5 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
@@ -322,7 +321,7 @@ export default {
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger"
-      v-html="changedCommentText"
+      v-html="changedCommentText /* eslint-disable-line vue/no-v-html */"
     ></div>
     <div class="flash-container timeline-content"></div>
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 1a4a6c137a6..4e686ce8719 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -169,7 +168,7 @@ export default {
         v-on="
           authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
         "
-        v-html="authorStatus"
+        v-html="authorStatus /* eslint-disable-line vue/no-v-html */"
       ></span>
       <span class="text-nowrap author-username">
         <a
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 6a4a3263e4a..656591e0c32 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,3 +1,4 @@
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import $ from 'jquery';
 import Visibility from 'visibilityjs';
 import Vue from 'vue';
diff --git a/app/assets/javascripts/packages/details/components/package_history.vue b/app/assets/javascripts/packages/details/components/package_history.vue
index 0d7a73c12f1..27d2f208a42 100644
--- a/app/assets/javascripts/packages/details/components/package_history.vue
+++ b/app/assets/javascripts/packages/details/components/package_history.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { first } from 'lodash';
 import { truncateSha } from '~/lib/utils/text_utility';
diff --git a/app/assets/javascripts/packages/shared/constants.js b/app/assets/javascripts/packages/shared/constants.js
index b4cdca34d92..f15c31b85c1 100644
--- a/app/assets/javascripts/packages/shared/constants.js
+++ b/app/assets/javascripts/packages/shared/constants.js
@@ -1,3 +1,4 @@
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { __, s__ } from '~/locale';
 
 export const PackageType = {
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
index 4d6a1d5462b..74c0cb44c51 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue
@@ -1,25 +1,24 @@
 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import Composer from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue';
+import Conan from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue';
+import Maven from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue';
+import Nuget from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue';
+import Pypi from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue';
 import {
-  PACKAGE_TYPE_NUGET,
+  PACKAGE_TYPE_COMPOSER,
   PACKAGE_TYPE_CONAN,
   PACKAGE_TYPE_MAVEN,
+  PACKAGE_TYPE_NUGET,
+  PACKAGE_TYPE_PYPI,
 } from '~/packages_and_registries/package_registry/constants';
-import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
 
 export default {
-  i18n: {
-    sourceText: s__('PackageRegistry|Source project located at %{link}'),
-    licenseText: s__('PackageRegistry|License information located at %{link}'),
-    recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
-    appGroup: s__('PackageRegistry|App group: %{group}'),
-    appName: s__('PackageRegistry|App name: %{name}'),
-  },
   components: {
-    DetailsRow,
-    GlLink,
-    GlSprintf,
+    Composer,
+    Conan,
+    Maven,
+    Nuget,
+    Pypi,
   },
   props: {
     packageEntity: {
@@ -28,21 +27,17 @@ export default {
     },
   },
   computed: {
-    showMetadata() {
-      return (
-        [PACKAGE_TYPE_NUGET, PACKAGE_TYPE_CONAN, PACKAGE_TYPE_MAVEN].includes(
-          this.packageEntity.packageType,
-        ) && this.packageEntity.metadata
-      );
-    },
-    showNugetMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_NUGET;
+    metadataComponent() {
+      return {
+        [PACKAGE_TYPE_COMPOSER]: Composer,
+        [PACKAGE_TYPE_CONAN]: Conan,
+        [PACKAGE_TYPE_MAVEN]: Maven,
+        [PACKAGE_TYPE_NUGET]: Nuget,
+        [PACKAGE_TYPE_PYPI]: Pypi,
+      }[this.packageEntity.packageType];
     },
-    showConanMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_CONAN;
-    },
-    showMavenMetadata() {
-      return this.packageEntity.packageType === PACKAGE_TYPE_MAVEN;
+    showMetadata() {
+      return this.metadataComponent && this.packageEntity.metadata;
     },
   },
 };
@@ -51,56 +46,12 @@ export default {
 <template>
   <div v-if="showMetadata">
     <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3>
-
     <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
-      <template v-if="showNugetMetadata">
-        <details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source">
-          <gl-sprintf :message="$options.i18n.sourceText">
-            <template #link>
-              <gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{
-                packageEntity.metadata.projectUrl
-              }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </details-row>
-        <details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
-          <gl-sprintf :message="$options.i18n.licenseText">
-            <template #link>
-              <gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{
-                packageEntity.metadata.licenseUrl
-              }}</gl-link>
-            </template>
-          </gl-sprintf>
-        </details-row>
-      </template>
-
-      <details-row
-        v-else-if="showConanMetadata"
-        icon="information-o"
-        padding="gl-p-4"
-        data-testid="conan-recipe"
-      >
-        <gl-sprintf :message="$options.i18n.recipeText">
-          <template #recipe>{{ packageEntity.metadata.recipe }}</template>
-        </gl-sprintf>
-      </details-row>
-
-      <template v-else-if="showMavenMetadata">
-        <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
-          <gl-sprintf :message="$options.i18n.appName">
-            <template #name>
-              <strong>{{ packageEntity.metadata.appName }}</strong>
-            </template>
-          </gl-sprintf>
-        </details-row>
-        <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
-          <gl-sprintf :message="$options.i18n.appGroup">
-            <template #group>
-              <strong>{{ packageEntity.metadata.appGroup }}</strong>
-            </template>
-          </gl-sprintf>
-        </details-row>
-      </template>
+      <component
+        :is="metadataComponent"
+        :package-entity="packageEntity"
+        data-testid="component-is"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
new file mode 100644
index 00000000000..b6a36a0b00f
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    targetShaCopyButton: s__('PackageRegistry|Copy target SHA'),
+    targetSha: s__('PackageRegistry|Target SHA: %{sha}'),
+    composerJson: s__(
+      'PackageRegistry|Composer.json with license: %{license} and version: %{version}',
+    ),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+    ClipboardButton,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha">
+      <gl-sprintf :message="$options.i18n.targetSha">
+        <template #sha>
+          <strong>{{ packageEntity.metadata.targetSha }}</strong>
+          <clipboard-button
+            :title="$options.i18n.targetShaCopyButton"
+            :text="packageEntity.metadata.targetSha"
+            category="tertiary"
+            css-class="gl-p-0!"
+          />
+        </template>
+      </gl-sprintf>
+    </details-row>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json">
+      <gl-sprintf :message="$options.i18n.composerJson">
+        <template #license>
+          <strong>{{ packageEntity.metadata.composerJson.license }}</strong>
+        </template>
+        <template #version>
+          <strong>{{ packageEntity.metadata.composerJson.version }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
new file mode 100644
index 00000000000..10797d74acf
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    recipeText: s__('PackageRegistry|Recipe: %{recipe}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="conan-recipe">
+      <gl-sprintf :message="$options.i18n.recipeText">
+        <template #recipe>{{ packageEntity.metadata.recipe }}</template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
new file mode 100644
index 00000000000..fd9fb49a9f2
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    appGroup: s__('PackageRegistry|App group: %{group}'),
+    appName: s__('PackageRegistry|App name: %{name}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app">
+      <gl-sprintf :message="$options.i18n.appName">
+        <template #name>
+          <strong>{{ packageEntity.metadata.appName }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group">
+      <gl-sprintf :message="$options.i18n.appGroup">
+        <template #group>
+          <strong>{{ packageEntity.metadata.appGroup }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
new file mode 100644
index 00000000000..f0da7db6c91
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue
@@ -0,0 +1,46 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    sourceText: s__('PackageRegistry|Source project located at %{link}'),
+    licenseText: s__('PackageRegistry|License information located at %{link}'),
+  },
+  components: {
+    DetailsRow,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source">
+      <gl-sprintf :message="$options.i18n.sourceText">
+        <template #link>
+          <gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{
+            packageEntity.metadata.projectUrl
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </details-row>
+    <details-row icon="license" padding="gl-p-4" data-testid="nuget-license">
+      <gl-sprintf :message="$options.i18n.licenseText">
+        <template #link>
+          <gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{
+            packageEntity.metadata.licenseUrl
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
new file mode 100644
index 00000000000..6534eef532c
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue
@@ -0,0 +1,34 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+import DetailsRow from '~/vue_shared/components/registry/details_row.vue';
+
+export default {
+  i18n: {
+    requiredPython: s__('PackageRegistry|Required Python: %{pythonVersion}'),
+  },
+  components: {
+    DetailsRow,
+    GlSprintf,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <details-row icon="information-o" padding="gl-p-4" data-testid="pypi-required-python">
+      <gl-sprintf :message="$options.i18n.requiredPython">
+        <template #pythonVersion>
+          <strong>{{ packageEntity.metadata.requiredPython }}</strong>
+        </template>
+      </gl-sprintf>
+    </details-row>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
index af4a984add4..408bd2e3dfe 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { first } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
index 65547af3913..44d7807639d 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlSprintf, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
@@ -21,6 +21,9 @@ export default {
     GlBadge,
     TimeAgoTooltip,
   },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective,
+  },
   i18n: {
     packageInfo: __('v%{version} published %{timeAgo}'),
   },
@@ -60,18 +63,26 @@ export default {
     },
   },
   mounted() {
-    this.isDesktop = GlBreakpointInstance.isDesktop();
+    this.checkBreakpoints();
   },
   methods: {
     dynamicSlotName(index) {
       return `metadata-tag${index}`;
     },
+    checkBreakpoints() {
+      this.isDesktop = GlBreakpointInstance.isDesktop();
+    },
   },
 };
 </script>
 
 <template>
-  <title-area :title="packageEntity.name" :avatar="packageIcon" data-qa-selector="package_title">
+  <title-area
+    v-gl-resize-observer="checkBreakpoints"
+    :title="packageEntity.name"
+    :avatar="packageIcon"
+    data-qa-selector="package_title"
+  >
     <template #sub-header>
       <gl-icon name="eye" class="gl-mr-3" />
       <span data-testid="sub-header">
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue
new file mode 100644
index 00000000000..280d292ce0b
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue
@@ -0,0 +1,57 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { s__ } from '~/locale';
+import { sortableFields } from '~/packages/list/utils';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
+import PackageTypeToken from './tokens/package_type_token.vue';
+
+export default {
+  tokens: [
+    {
+      type: 'type',
+      icon: 'package',
+      title: s__('PackageRegistry|Type'),
+      unique: true,
+      token: PackageTypeToken,
+      operators: OPERATOR_IS_ONLY,
+    },
+  ],
+  components: { RegistrySearch, UrlSync },
+  computed: {
+    ...mapState({
+      isGroupPage: (state) => state.config.isGroupPage,
+      sorting: (state) => state.sorting,
+      filter: (state) => state.filter,
+    }),
+    sortableFields() {
+      return sortableFields(this.isGroupPage);
+    },
+  },
+  methods: {
+    ...mapActions(['setSorting', 'setFilter']),
+    updateSorting(newValue) {
+      this.setSorting(newValue);
+      this.$emit('update');
+    },
+  },
+};
+</script>
+
+<template>
+  <url-sync>
+    <template #default="{ updateQuery }">
+      <registry-search
+        :filter="filter"
+        :sorting="sorting"
+        :tokens="$options.tokens"
+        :sortable-fields="sortableFields"
+        @sorting:changed="updateSorting"
+        @filter:changed="setFilter"
+        @filter:submit="$emit('update')"
+        @query:changed="updateQuery"
+      />
+    </template>
+  </url-sync>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue
new file mode 100644
index 00000000000..6e00a48586e
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_title.vue
@@ -0,0 +1,47 @@
+<script>
+import { n__ } from '~/locale';
+import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '~/packages/list/constants';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+
+export default {
+  name: 'PackageTitle',
+  components: {
+    TitleArea,
+    MetadataItem,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    helpUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    showPackageCount() {
+      return Number.isInteger(this.count);
+    },
+    packageAmountText() {
+      return n__(`%d Package`, `%d Packages`, this.count);
+    },
+    infoMessages() {
+      return [{ text: LIST_INTRO_TEXT, link: this.helpUrl }];
+    },
+  },
+  i18n: {
+    LIST_TITLE_TEXT,
+  },
+};
+</script>
+
+<template>
+  <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages">
+    <template #metadata-amount>
+      <metadata-item v-if="showPackageCount" icon="package" :text="packageAmountText" />
+    </template>
+  </title-area>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
new file mode 100644
index 00000000000..25bac687dbf
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
@@ -0,0 +1,129 @@
+<script>
+import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue';
+import { TrackingActions } from '~/packages/shared/constants';
+import { packageTypeToTrackCategory } from '~/packages/shared/utils';
+import Tracking from '~/tracking';
+
+export default {
+  components: {
+    GlPagination,
+    GlModal,
+    GlSprintf,
+    PackagesListLoader,
+    PackagesListRow,
+  },
+  mixins: [Tracking.mixin()],
+  data() {
+    return {
+      itemToBeDeleted: null,
+    };
+  },
+  computed: {
+    ...mapState({
+      perPage: (state) => state.pagination.perPage,
+      totalItems: (state) => state.pagination.total,
+      page: (state) => state.pagination.page,
+      isGroupPage: (state) => state.config.isGroupPage,
+      isLoading: 'isLoading',
+    }),
+    ...mapGetters({ list: 'getList' }),
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(value) {
+        this.$emit('page:changed', value);
+      },
+    },
+    isListEmpty() {
+      return !this.list || this.list.length === 0;
+    },
+    modalAction() {
+      return s__('PackageRegistry|Delete package');
+    },
+    deletePackageName() {
+      return this.itemToBeDeleted?.name ?? '';
+    },
+    tracking() {
+      const category = this.itemToBeDeleted
+        ? packageTypeToTrackCategory(this.itemToBeDeleted.package_type)
+        : undefined;
+      return {
+        category,
+      };
+    },
+  },
+  methods: {
+    setItemToBeDeleted(item) {
+      this.itemToBeDeleted = { ...item };
+      this.track(TrackingActions.REQUEST_DELETE_PACKAGE);
+      this.$refs.packageListDeleteModal.show();
+    },
+    deleteItemConfirmation() {
+      this.$emit('package:delete', this.itemToBeDeleted);
+      this.track(TrackingActions.DELETE_PACKAGE);
+      this.itemToBeDeleted = null;
+    },
+    deleteItemCanceled() {
+      this.track(TrackingActions.CANCEL_DELETE_PACKAGE);
+      this.itemToBeDeleted = null;
+    },
+  },
+  i18n: {
+    deleteModalContent: s__(
+      'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?',
+    ),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-flex-direction-column">
+    <slot v-if="isListEmpty && !isLoading" name="empty-state"></slot>
+
+    <div v-else-if="isLoading">
+      <packages-list-loader />
+    </div>
+
+    <template v-else>
+      <div data-qa-selector="packages-table">
+        <packages-list-row
+          v-for="packageEntity in list"
+          :key="packageEntity.id"
+          :package-entity="packageEntity"
+          :package-link="packageEntity._links.web_path"
+          :is-group="isGroupPage"
+          @packageToDelete="setItemToBeDeleted"
+        />
+      </div>
+
+      <gl-pagination
+        v-model="currentPage"
+        :per-page="perPage"
+        :total-items="totalItems"
+        align="center"
+        class="gl-w-full gl-mt-3"
+      />
+
+      <gl-modal
+        ref="packageListDeleteModal"
+        modal-id="confirm-delete-pacakge"
+        ok-variant="danger"
+        @ok="deleteItemConfirmation"
+        @cancel="deleteItemCanceled"
+      >
+        <template #modal-title>{{ modalAction }}</template>
+        <template #modal-ok>{{ modalAction }}</template>
+        <gl-sprintf :message="$options.i18n.deleteModalContent">
+          <template #name>
+            <strong>{{ deletePackageName }}</strong>
+          </template>
+        </gl-sprintf>
+      </gl-modal>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list_app.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list_app.vue
new file mode 100644
index 00000000000..75fbdb80192
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list_app.vue
@@ -0,0 +1,132 @@
+<script>
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import createFlash from '~/flash';
+import { historyReplaceState } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
+import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages/list/constants';
+import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
+import PackageList from './packages_list.vue';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlLink,
+    GlSprintf,
+    PackageList,
+    PackageTitle: () =>
+      import(/* webpackChunkName: 'package_registry_components' */ './package_title.vue'),
+    PackageSearch: () =>
+      import(/* webpackChunkName: 'package_registry_components' */ './package_search.vue'),
+    InfrastructureTitle: () =>
+      import(
+        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_title.vue'
+      ),
+    InfrastructureSearch: () =>
+      import(
+        /* webpackChunkName: 'infrastructure_registry_components' */ '~/packages_and_registries/infrastructure_registry/components/infrastructure_search.vue'
+      ),
+  },
+  inject: {
+    titleComponent: {
+      from: 'titleComponent',
+      default: 'PackageTitle',
+    },
+    searchComponent: {
+      from: 'searchComponent',
+      default: 'PackageSearch',
+    },
+    emptyPageTitle: {
+      from: 'emptyPageTitle',
+      default: s__('PackageRegistry|There are no packages yet'),
+    },
+    noResultsText: {
+      from: 'noResultsText',
+      default: s__(
+        'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
+      ),
+    },
+  },
+  computed: {
+    ...mapState({
+      emptyListIllustration: (state) => state.config.emptyListIllustration,
+      emptyListHelpUrl: (state) => state.config.emptyListHelpUrl,
+      filter: (state) => state.filter,
+      selectedType: (state) => state.selectedType,
+      packageHelpUrl: (state) => state.config.packageHelpUrl,
+      packagesCount: (state) => state.pagination?.total,
+    }),
+    emptySearch() {
+      return (
+        this.filter.filter((f) => f.type !== FILTERED_SEARCH_TERM || f.value?.data).length === 0
+      );
+    },
+
+    emptyStateTitle() {
+      return this.emptySearch
+        ? this.emptyPageTitle
+        : s__('PackageRegistry|Sorry, your filter produced no results');
+    },
+  },
+  mounted() {
+    const queryParams = getQueryParams(window.document.location.search);
+    const { sorting, filters } = extractFilterAndSorting(queryParams);
+    this.setSorting(sorting);
+    this.setFilter(filters);
+    this.requestPackagesList();
+    this.checkDeleteAlert();
+  },
+  methods: {
+    ...mapActions([
+      'requestPackagesList',
+      'requestDeletePackage',
+      'setSelectedType',
+      'setSorting',
+      'setFilter',
+    ]),
+    onPageChanged(page) {
+      return this.requestPackagesList({ page });
+    },
+    onPackageDeleteRequest(item) {
+      return this.requestDeletePackage(item);
+    },
+    checkDeleteAlert() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
+      if (showAlert) {
+        // to be refactored to use gl-alert
+        createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' });
+        const cleanUrl = window.location.href.split('?')[0];
+        historyReplaceState(cleanUrl);
+      }
+    },
+  },
+  i18n: {
+    widenFilters: s__('PackageRegistry|To widen your search, change or remove the filters above.'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <component :is="titleComponent" :help-url="packageHelpUrl" :count="packagesCount" />
+    <component :is="searchComponent" @update="requestPackagesList" />
+
+    <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
+      <template #empty-state>
+        <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration">
+          <template #description>
+            <gl-sprintf v-if="!emptySearch" :message="$options.i18n.widenFilters" />
+            <gl-sprintf v-else :message="noResultsText">
+              <template #noPackagesLink="{ content }">
+                <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </template>
+        </gl-empty-state>
+      </template>
+    </package-list>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue
new file mode 100644
index 00000000000..529a7893dfc
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue
@@ -0,0 +1,26 @@
+<script>
+import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
+import { PACKAGE_TYPES } from '~/packages/list/constants';
+
+export default {
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+  },
+  PACKAGE_TYPES,
+};
+</script>
+
+<template>
+  <gl-filtered-search-token v-bind="{ ...$attrs }" v-on="$listeners">
+    <template #suggestions>
+      <gl-filtered-search-suggestion
+        v-for="(type, index) in $options.PACKAGE_TYPES"
+        :key="index"
+        :value="type.type"
+      >
+        {{ type.title }}
+      </gl-filtered-search-suggestion>
+    </template>
+  </gl-filtered-search-token>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
index aad888b4433..f023b4481a0 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js
@@ -1,3 +1,4 @@
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { __, s__ } from '~/locale';
 
 export const PACKAGE_TYPE_CONAN = 'CONAN';
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.js b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.js
new file mode 100644
index 00000000000..1e01b75aabc
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import PackagesListApp from '../components/list/packages_list_app.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-vue-packages-list');
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(PackagesListApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
index 6da2e3a47e8..bf286c84d5f 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue
@@ -88,7 +88,7 @@ export default {
 <template>
   <section data-testid="registry-settings-app">
     <cleanup-policy-enabled-alert v-if="showCleanupPolicyOnAlert" :project-path="projectPath" />
-    <settings-block default-expanded>
+    <settings-block :collapsible="false">
       <template #title> {{ __('Clean up image tags') }}</template>
       <template #description>
         <span data-testid="description">
diff --git a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
index d17c37e9e1a..99461475af0 100644
--- a/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
+++ b/app/assets/javascripts/pages/dashboard/projects/index/components/customize_homepage_banner.vue
@@ -77,7 +77,7 @@ export default {
       );
 
       if (button) {
-        button.setAttribute('data-track-event', 'click_go_to_preferences');
+        button.setAttribute('data-track-action', 'click_go_to_preferences');
         button.setAttribute('data-track-label', this.trackLabel);
       }
     },
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index 342c054471d..8c9f23732aa 100644
--- a/app/assets/javascripts/pages/groups/issues/index.js
+++ b/app/assets/javascripts/pages/groups/issues/index.js
@@ -1,26 +1,30 @@
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import issuableInitBulkUpdateSidebar from '~/issuable_bulk_update_sidebar/issuable_init_bulk_update_sidebar';
-import { mountIssuablesListApp } from '~/issues_list';
+import { mountIssuablesListApp, mountIssuesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import projectSelect from '~/project_select';
 
-const ISSUE_BULK_UPDATE_PREFIX = 'issue_';
+if (gon.features?.vueIssuesList) {
+  mountIssuesListApp();
+} else {
+  const ISSUE_BULK_UPDATE_PREFIX = 'issue_';
 
-IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
-IssuableFilteredSearchTokenKeys.removeTokensForKeys('release');
-issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX);
+  IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
+  IssuableFilteredSearchTokenKeys.removeTokensForKeys('release');
+  issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX);
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.ISSUES,
-  isGroupDecendent: true,
-  useDefaultState: true,
-  filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-});
-projectSelect();
-initManualOrdering();
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ISSUES,
+    isGroupDecendent: true,
+    useDefaultState: true,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+  });
+  projectSelect();
+  initManualOrdering();
 
-if (gon.features?.vueIssuablesList) {
-  mountIssuablesListApp();
+  if (gon.features?.vueIssuablesList) {
+    mountIssuablesListApp();
+  }
 }
diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js
index 7557edb1b49..7b0418e1ad5 100644
--- a/app/assets/javascripts/pages/groups/new/index.js
+++ b/app/assets/javascripts/pages/groups/new/index.js
@@ -5,6 +5,7 @@ import Group from '~/group';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import NewGroupCreationApp from './components/app.vue';
 import GroupPathValidator from './group_path_validator';
+import initToggleInviteMembers from './toggle_invite_members';
 
 new GroupPathValidator(); // eslint-disable-line no-new
 
@@ -31,3 +32,5 @@ function initNewGroupCreation(el) {
 const el = document.querySelector('.js-new-group-creation');
 
 initNewGroupCreation(el);
+
+initToggleInviteMembers();
diff --git a/app/assets/javascripts/pages/groups/new/toggle_invite_members.js b/app/assets/javascripts/pages/groups/new/toggle_invite_members.js
new file mode 100644
index 00000000000..ffb4964cf7d
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/new/toggle_invite_members.js
@@ -0,0 +1,14 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export default function initToggleInviteMembers() {
+  const inviteMembersSection = document.querySelector('.js-invite-members-section');
+  const setupForCompanyRadios = document.querySelectorAll('input[name="group[setup_for_company]"]');
+
+  if (inviteMembersSection && setupForCompanyRadios.length) {
+    setupForCompanyRadios.forEach((el) => {
+      el.addEventListener('change', (event) => {
+        inviteMembersSection.classList.toggle('hidden', !parseBoolean(event.target.value));
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index b365e039191..80bcbefab46 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -14,7 +14,7 @@ import '~/sourcegraph/load';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
 const viewBlobEl = document.querySelector('#js-view-blob-app');
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index e3b30560fef..c6a76df7bde 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -4,8 +4,8 @@ import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
 import createFlash from '~/flash';
-import initChangesDropdown from '~/init_changes_dropdown';
-import initNotes from '~/init_notes';
+import initDeprecatedNotes from '~/init_deprecated_notes';
+import { initDiffStatsDropdown } from '~/init_diff_stats_dropdown';
 import axios from '~/lib/utils/axios_utils';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -17,13 +17,13 @@ import '~/sourcegraph/load';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
-initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
+initDiffStatsDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight);
 new ZenMode();
 new ShortcutsNavigation();
 
 initCommitBoxInfo();
 
-initNotes();
+initDeprecatedNotes();
 
 const filesContainer = $('.js-diffs-batch');
 
diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js
index 5edaa7f7e51..b74f7d1cf57 100644
--- a/app/assets/javascripts/pages/projects/compare/show/index.js
+++ b/app/assets/javascripts/pages/projects/compare/show/index.js
@@ -1,11 +1,11 @@
 import Diff from '~/diff';
 import GpgBadges from '~/gpg_badges';
-import initChangesDropdown from '~/init_changes_dropdown';
+import { initDiffStatsDropdown } from '~/init_diff_stats_dropdown';
 import initCompareSelector from '~/projects/compare';
 
 initCompareSelector();
 
 new Diff(); // eslint-disable-line no-new
 const paddingTop = 16;
-initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
+initDiffStatsDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
 GpgBadges.fetch();
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index e365f51567d..62aa5df888f 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -6,7 +6,7 @@ import Issue from '~/issue';
 import initIncidentApp from '~/issue_show/incident';
 import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import { parseIssuableData } from '~/issue_show/utils/parse_data';
-import initNotesApp from '~/notes/index';
+import initNotesApp from '~/notes';
 import { store } from '~/notes/stores';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js
index e4f99d1e7fd..1282d2aa303 100644
--- a/app/assets/javascripts/pages/projects/issues/show/index.js
+++ b/app/assets/javascripts/pages/projects/issues/show/index.js
@@ -1,7 +1,8 @@
+import { store } from '~/notes/stores';
 import initRelatedIssues from '~/related_issues';
 import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initShow from '../show';
 
 initShow();
-initSidebarBundle();
+initSidebarBundle(store);
 initRelatedIssues();
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
new file mode 100644
index 00000000000..51980b2d971
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue
@@ -0,0 +1,78 @@
+<script>
+import { GlProgressBar, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
+import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
+
+export default {
+  components: { GlProgressBar, GlSprintf, LearnGitlabSectionCard },
+  i18n: {
+    title: s__('LearnGitLab|Learn GitLab'),
+    description: s__(
+      'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
+    ),
+    percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
+  },
+  props: {
+    actions: {
+      required: true,
+      type: Object,
+    },
+    sections: {
+      required: true,
+      type: Object,
+    },
+  },
+  maxValue: Object.keys(ACTION_LABELS).length,
+  actionSections: Object.keys(ACTION_SECTIONS),
+  computed: {
+    progressValue() {
+      return Object.values(this.actions).filter((a) => a.completed).length;
+    },
+    progressPercentage() {
+      return Math.round((this.progressValue / this.$options.maxValue) * 100);
+    },
+  },
+  methods: {
+    actionsFor(section) {
+      const actions = Object.fromEntries(
+        Object.entries(this.actions).filter(
+          ([action]) => ACTION_LABELS[action].section === section,
+        ),
+      );
+      return actions;
+    },
+    svgFor(section) {
+      return this.sections[section].svg;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="row">
+      <div class="gl-mb-7 gl-ml-5">
+        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
+        <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
+      </div>
+    </div>
+    <div class="gl-mb-3">
+      <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
+        <gl-sprintf :message="$options.i18n.percentageCompleted">
+          <template #percentage>{{ progressPercentage }}</template>
+          <template #percentSymbol>%</template>
+        </gl-sprintf>
+      </p>
+      <gl-progress-bar :value="progressValue" :max="$options.maxValue" />
+    </div>
+    <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
+      <div v-for="section in $options.actionSections" :key="section" class="col gl-mb-6">
+        <learn-gitlab-section-card
+          :section="section"
+          :svg="svgFor(section)"
+          :actions="actionsFor(section)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
deleted file mode 100644
index 51980b2d971..00000000000
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script>
-import { GlProgressBar, GlSprintf } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
-import LearnGitlabSectionCard from './learn_gitlab_section_card.vue';
-
-export default {
-  components: { GlProgressBar, GlSprintf, LearnGitlabSectionCard },
-  i18n: {
-    title: s__('LearnGitLab|Learn GitLab'),
-    description: s__(
-      'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
-    ),
-    percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
-  },
-  props: {
-    actions: {
-      required: true,
-      type: Object,
-    },
-    sections: {
-      required: true,
-      type: Object,
-    },
-  },
-  maxValue: Object.keys(ACTION_LABELS).length,
-  actionSections: Object.keys(ACTION_SECTIONS),
-  computed: {
-    progressValue() {
-      return Object.values(this.actions).filter((a) => a.completed).length;
-    },
-    progressPercentage() {
-      return Math.round((this.progressValue / this.$options.maxValue) * 100);
-    },
-  },
-  methods: {
-    actionsFor(section) {
-      const actions = Object.fromEntries(
-        Object.entries(this.actions).filter(
-          ([action]) => ACTION_LABELS[action].section === section,
-        ),
-      );
-      return actions;
-    },
-    svgFor(section) {
-      return this.sections[section].svg;
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="row">
-      <div class="gl-mb-7 gl-ml-5">
-        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
-        <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
-      </div>
-    </div>
-    <div class="gl-mb-3">
-      <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
-        <gl-sprintf :message="$options.i18n.percentageCompleted">
-          <template #percentage>{{ progressPercentage }}</template>
-          <template #percentSymbol>%</template>
-        </gl-sprintf>
-      </p>
-      <gl-progress-bar :value="progressValue" :max="$options.maxValue" />
-    </div>
-    <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
-      <div v-for="section in $options.actionSections" :key="section" class="col gl-mb-6">
-        <learn-gitlab-section-card
-          :section="section"
-          :svg="svgFor(section)"
-          :actions="actionsFor(section)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
deleted file mode 100644
index 8f92ce95dbf..00000000000
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_b.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script>
-import { GlProgressBar, GlSprintf } from '@gitlab/ui';
-import { pick } from 'lodash';
-import { s__ } from '~/locale';
-import { ACTION_LABELS } from '../constants';
-import LearnGitlabInfoCard from './learn_gitlab_info_card.vue';
-
-export default {
-  components: { LearnGitlabInfoCard, GlProgressBar, GlSprintf },
-  i18n: {
-    title: s__('LearnGitLab|Learn GitLab'),
-    description: s__(
-      'LearnGitLab|Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project.',
-    ),
-    percentageCompleted: s__(`LearnGitLab|%{percentage}%{percentSymbol} completed`),
-    workspace: {
-      title: s__('LearnGitLab|Set up your workspace'),
-      description: s__(
-        "LearnGitLab|Complete these tasks first so you can enjoy GitLab's features to their fullest:",
-      ),
-    },
-    plan: {
-      title: s__('LearnGitLab|Plan and execute'),
-      description: s__(
-        'LearnGitLab|Create a workflow for your new workspace, and learn how GitLab features work together:',
-      ),
-    },
-    deploy: {
-      title: s__('LearnGitLab|Deploy'),
-      description: s__(
-        'LearnGitLab|Use your new GitLab workflow to deploy your application, monitor its health, and keep it secure:',
-      ),
-    },
-  },
-  props: {
-    actions: {
-      required: true,
-      type: Object,
-    },
-  },
-  maxValue: Object.keys(ACTION_LABELS).length,
-  methods: {
-    infoProps(action) {
-      return {
-        ...this.actions[action],
-        ...pick(ACTION_LABELS[action], ['title', 'actionLabel', 'description', 'trialRequired']),
-      };
-    },
-    progressValue() {
-      return Object.values(this.actions).filter((a) => a.completed).length;
-    },
-    progressPercentage() {
-      return Math.round((this.progressValue() / this.$options.maxValue) * 100);
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="row">
-      <div class="gl-mb-7 col-md-8 col-lg-7">
-        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
-        <p class="gl-text-gray-700 gl-mb-0">{{ $options.i18n.description }}</p>
-      </div>
-    </div>
-
-    <div class="gl-mb-3">
-      <p class="gl-text-gray-500 gl-mb-2" data-testid="completion-percentage">
-        <gl-sprintf :message="$options.i18n.percentageCompleted">
-          <template #percentage>{{ progressPercentage() }}</template>
-          <template #percentSymbol>%</template>
-        </gl-sprintf>
-      </p>
-      <gl-progress-bar :value="progressValue()" :max="$options.maxValue" />
-    </div>
-
-    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.workspace.title }}</h2>
-    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.workspace.description }}</p>
-
-    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
-      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('userAdded')" /></div>
-      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('gitWrite')" /></div>
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('pipelineCreated')" />
-      </div>
-      <div class="col gl-mb-6"><learn-gitlab-info-card v-bind="infoProps('trialStarted')" /></div>
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('codeOwnersEnabled')" />
-      </div>
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('requiredMrApprovalsEnabled')" />
-      </div>
-    </div>
-
-    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.plan.title }}</h2>
-    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.plan.description }}</p>
-
-    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('issueCreated')" />
-      </div>
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('mergeRequestCreated')" />
-      </div>
-    </div>
-
-    <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n.deploy.title }}</h2>
-    <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n.deploy.description }}</p>
-
-    <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
-      <div class="col gl-mb-6">
-        <learn-gitlab-info-card v-bind="infoProps('securityScanEnabled')" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index 3d31ac6c267..69fb5878f5c 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -39,7 +39,7 @@ export default {
         :href="value.url"
         data-track-action="click_link"
         :data-track-label="$options.i18n.ACTION_LABELS[action].title"
-        data-track-property="Growth::Conversion::Experiment::LearnGitLabA"
+        data-track-property="Growth::Conversion::Experiment::LearnGitLab"
       >
         {{ $options.i18n.ACTION_LABELS[action].title }}
       </gl-link>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
index ac7c94bdd9e..6da0a8fd212 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -1,8 +1,6 @@
 import Vue from 'vue';
-import trackLearnGitlab from '~/learn_gitlab/track_learn_gitlab';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import LearnGitlabA from '../components/learn_gitlab_a.vue';
-import LearnGitlabB from '../components/learn_gitlab_b.vue';
+import LearnGitlab from '../components/learn_gitlab.vue';
 
 function initLearnGitlab() {
   const el = document.getElementById('js-learn-gitlab-app');
@@ -14,14 +12,10 @@ function initLearnGitlab() {
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
   const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
 
-  const { learnGitlabA } = gon.experiments;
-
-  trackLearnGitlab(learnGitlabA);
-
   return new Vue({
     el,
     render(createElement) {
-      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, {
+      return createElement(LearnGitlab, {
         props: { actions, sections },
       });
     },
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index d6b6c9fe06a..dadf0988582 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -2,11 +2,10 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
-import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import { initPipelineCountListener } from '~/commit/pipelines/utils';
 import initIssuableSidebar from '~/init_issuable_sidebar';
 import StatusBox from '~/issuable/components/status_box.vue';
 import createDefaultClient from '~/lib/graphql';
-import { handleLocationHash } from '~/lib/utils/common_utils';
 import initSourcegraph from '~/sourcegraph';
 import ZenMode from '~/zen_mode';
 import getStateQuery from './queries/get_state.query.graphql';
@@ -15,11 +14,10 @@ export default function initMergeRequestShow() {
   const awardEmojiEl = document.getElementById('js-vue-awards-block');
 
   new ZenMode(); // eslint-disable-line no-new
-  initIssuableSidebar();
-  initPipelines();
+  initPipelineCountListener(document.querySelector('#commit-pipeline-table-view'));
   new ShortcutsIssuable(true); // eslint-disable-line no-new
-  handleLocationHash();
   initSourcegraph();
+  initIssuableSidebar();
   if (awardEmojiEl) {
     import('~/emoji/awards_app')
       .then((m) => m.default(awardEmojiEl))
@@ -29,7 +27,10 @@ export default function initMergeRequestShow() {
   }
 
   const el = document.querySelector('.js-mr-status-box');
-  const apolloProvider = new VueApollo({ defaultClient: createDefaultClient() });
+  const apolloProvider = new VueApollo({
+    assumeImmutableResults: true,
+    defaultClient: createDefaultClient(),
+  });
   // eslint-disable-next-line no-new
   new Vue({
     el,
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index 546fa66eda6..25dede33880 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -5,8 +5,11 @@ import initSidebarBundle from '~/sidebar/sidebar_bundle';
 import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning';
 import initShow from '../init_merge_request_show';
 
-initShow();
-initSidebarBundle();
 initMrNotes();
-initReviewBar();
-initIssuableHeaderWarning(store);
+initShow();
+
+requestIdleCallback(() => {
+  initSidebarBundle(store);
+  initReviewBar();
+  initIssuableHeaderWarning(store);
+});
diff --git a/app/assets/javascripts/pages/projects/new/components/new_project_url_select.vue b/app/assets/javascripts/pages/projects/new/components/new_project_url_select.vue
new file mode 100644
index 00000000000..ba8858c985a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/new/components/new_project_url_select.vue
@@ -0,0 +1,98 @@
+<script>
+import {
+  GlButton,
+  GlButtonGroup,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
+import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import Tracking from '~/tracking';
+import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
+import searchNamespacesWhereUserCanCreateProjectsQuery from '../queries/search_namespaces_where_user_can_create_projects.query.graphql';
+
+export default {
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownSectionHeader,
+    GlLoadingIcon,
+    GlSearchBoxByType,
+  },
+  mixins: [Tracking.mixin()],
+  apollo: {
+    currentUser: {
+      query: searchNamespacesWhereUserCanCreateProjectsQuery,
+      variables() {
+        return {
+          search: this.search,
+        };
+      },
+      skip() {
+        return this.search.length > 0 && this.search.length < MINIMUM_SEARCH_LENGTH;
+      },
+      debounce: DEBOUNCE_DELAY,
+    },
+  },
+  inject: ['namespaceFullPath', 'namespaceId', 'rootUrl', 'trackLabel'],
+  data() {
+    return {
+      currentUser: {},
+      search: '',
+      selectedNamespace: {
+        id: this.namespaceId,
+        fullPath: this.namespaceFullPath,
+      },
+    };
+  },
+  computed: {
+    userGroups() {
+      return this.currentUser.groups?.nodes || [];
+    },
+    userNamespace() {
+      return this.currentUser.namespace || {};
+    },
+  },
+  methods: {
+    handleClick({ id, fullPath }) {
+      this.selectedNamespace = {
+        id: getIdFromGraphQLId(id),
+        fullPath,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button-group class="gl-w-full">
+    <gl-button label>{{ rootUrl }}</gl-button>
+    <gl-dropdown
+      class="gl-w-full"
+      :text="selectedNamespace.fullPath"
+      toggle-class="gl-rounded-top-right-base! gl-rounded-bottom-right-base!"
+      data-qa-selector="select_namespace_dropdown"
+      @show="track('activate_form_input', { label: trackLabel, property: 'project_path' })"
+    >
+      <gl-search-box-by-type v-model.trim="search" />
+      <gl-loading-icon v-if="$apollo.queries.currentUser.loading" />
+      <template v-else>
+        <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
+        <gl-dropdown-item v-for="group of userGroups" :key="group.id" @click="handleClick(group)">
+          {{ group.fullPath }}
+        </gl-dropdown-item>
+        <gl-dropdown-section-header>{{ __('Users') }}</gl-dropdown-section-header>
+        <gl-dropdown-item @click="handleClick(userNamespace)">
+          {{ userNamespace.fullPath }}
+        </gl-dropdown-item>
+      </template>
+    </gl-dropdown>
+
+    <input type="hidden" name="project[namespace_id]" :value="selectedNamespace.id" />
+  </gl-button-group>
+</template>
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index f469c56e808..ed816e3be95 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,13 +1,15 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 import NewProjectCreationApp from './components/app.vue';
+import NewProjectUrlSelect from './components/new_project_url_select.vue';
 
-initProjectVisibilitySelector();
-initProjectNew.bindEvents();
+function initNewProjectCreation() {
+  const el = document.querySelector('.js-new-project-creation');
 
-function initNewProjectCreation(el) {
   const {
     pushToCreateProjectCommand,
     workingWithProjectsHelpPath,
@@ -29,9 +31,6 @@ function initNewProjectCreation(el) {
 
   return new Vue({
     el,
-    components: {
-      NewProjectCreationApp,
-    },
     provide,
     render(h) {
       return h(NewProjectCreationApp, { props });
@@ -39,6 +38,31 @@ function initNewProjectCreation(el) {
   });
 }
 
-const el = document.querySelector('.js-new-project-creation');
+function initNewProjectUrlSelect() {
+  const el = document.querySelector('.js-vue-new-project-url-select');
+
+  if (!el) {
+    return undefined;
+  }
 
-initNewProjectCreation(el);
+  Vue.use(VueApollo);
+
+  return new Vue({
+    el,
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+    }),
+    provide: {
+      namespaceFullPath: el.dataset.namespaceFullPath,
+      namespaceId: el.dataset.namespaceId,
+      rootUrl: el.dataset.rootUrl,
+      trackLabel: el.dataset.trackLabel,
+    },
+    render: (createElement) => createElement(NewProjectUrlSelect),
+  });
+}
+
+initProjectVisibilitySelector();
+initProjectNew.bindEvents();
+initNewProjectCreation();
+initNewProjectUrlSelect();
diff --git a/app/assets/javascripts/pages/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql b/app/assets/javascripts/pages/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql
new file mode 100644
index 00000000000..e16fe5dde49
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/new/queries/search_namespaces_where_user_can_create_projects.query.graphql
@@ -0,0 +1,14 @@
+query searchNamespacesWhereUserCanCreateProjects($search: String) {
+  currentUser {
+    groups(permissionScope: CREATE_PROJECTS, search: $search) {
+      nodes {
+        id
+        fullPath
+      }
+    }
+    namespace {
+      id
+      fullPath
+    }
+  }
+}
diff --git a/app/assets/javascripts/pages/projects/packages/packages/show/index.js b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
index ee06f247ddc..2dee87985cb 100644
--- a/app/assets/javascripts/pages/projects/packages/packages/show/index.js
+++ b/app/assets/javascripts/pages/projects/packages/packages/show/index.js
@@ -1,11 +1,3 @@
-(async function initPackage() {
-  let app;
-  if (document.getElementById('js-vue-packages-detail-new')) {
-    app = await import(
-      /* webpackChunkName: 'new_package_app' */ `~/packages_and_registries/package_registry/pages/details.js`
-    );
-  } else {
-    app = await import('~/packages/details/');
-  }
-  app.default();
-})();
+import initPackageDetails from '~/packages_and_registries/package_registry/pages/details';
+
+initPackageDetails();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index d0ec5668d21..0e646e8c505 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -141,9 +141,7 @@ export default {
       return Math.floor(Math.random() * 28);
     },
     showDailyLimitMessage({ value }) {
-      return (
-        value === KEY_CUSTOM && this.glFeatures.ciDailyLimitForPipelineSchedules && this.dailyLimit
-      );
+      return value === KEY_CUSTOM && this.dailyLimit;
     },
   },
 };
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index 92b2bc9644b..42b08bcaa7b 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -53,7 +53,7 @@ Those scheduled pipelines will inherit limited project access based on their ass
         <p>
           {{ __('Learn more in the') }}
           <a :href="docsUrl" target="_blank" rel="nofollow">
-            {{ s__('Learn more in the|pipeline schedules documentation') }}</a
+            {{ __('pipeline schedules documentation') }}</a
           >.
           <!-- oneline to prevent extra space before period -->
         </p>
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js
index fb0be31834d..0b662c945c6 100644
--- a/app/assets/javascripts/pages/projects/project_members/index.js
+++ b/app/assets/javascripts/pages/projects/project_members/index.js
@@ -1,4 +1,5 @@
 import groupsSelect from '~/groups_select';
+import initImportAProjectModal from '~/invite_members/init_import_a_project_modal';
 import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger';
 import initInviteMembersForm from '~/invite_members/init_invite_members_form';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
@@ -14,6 +15,7 @@ import UsersSelect from '~/users_select';
 groupsSelect();
 memberExpirationDate();
 memberExpirationDate('.js-access-expiration-date-groups');
+initImportAProjectModal();
 initInviteMembersModal();
 initInviteMembersTrigger();
 initInviteGroupTrigger();
diff --git a/app/assets/javascripts/pages/projects/usage_quotas/index.js b/app/assets/javascripts/pages/projects/usage_quotas/index.js
new file mode 100644
index 00000000000..9cd80b85c8a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/usage_quotas/index.js
@@ -0,0 +1,23 @@
+import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import storageCounter from '~/projects/storage_counter';
+import initSearchSettings from '~/search_settings';
+
+const initLinkedTabs = () => {
+  if (!document.querySelector('.js-usage-quota-tabs')) {
+    return false;
+  }
+
+  return new LinkedTabs({
+    defaultAction: '#storage-quota-tab',
+    parentEl: '.js-usage-quota-tabs',
+    hashedTabs: true,
+  });
+};
+
+const initVueApp = () => {
+  storageCounter('js-project-storage-count-app');
+};
+
+initVueApp();
+initLinkedTabs();
+initSearchSettings();
diff --git a/app/assets/javascripts/pages/projects/wikis/index.js b/app/assets/javascripts/pages/projects/wikis/index.js
index dead61cf358..2c1f9e634ab 100644
--- a/app/assets/javascripts/pages/projects/wikis/index.js
+++ b/app/assets/javascripts/pages/projects/wikis/index.js
@@ -1,3 +1,5 @@
+import { initDiffStatsDropdown } from '~/init_diff_stats_dropdown';
 import initWikis from '~/pages/shared/wikis';
 
 initWikis();
+initDiffStatsDropdown();
diff --git a/app/assets/javascripts/pages/projects/work_items/index/index.js b/app/assets/javascripts/pages/projects/work_items/index/index.js
new file mode 100644
index 00000000000..11c257611f0
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/work_items/index/index.js
@@ -0,0 +1,3 @@
+import { initWorkItemsRoot } from '~/work_items/index';
+
+initWorkItemsRoot();
diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
index 1e7c29aefaa..7e646125331 100644
--- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
@@ -8,7 +8,7 @@ export default class SigninTabsMemoizer {
   constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
-    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+    this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
     // sets selected tab if given as hash tag
     if (window.location.hash) {
       this.saveData(window.location.hash);
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 670b0535ca3..f204f0ebfaa 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 
 import { s__ } from '~/locale';
@@ -13,6 +13,9 @@ export default {
     DetailedMetric,
     RequestSelector,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     store: {
       type: Object,
@@ -129,6 +132,7 @@ export default {
       this.currentRequest = newRequestId;
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
@@ -144,7 +148,7 @@ export default {
           class="current-host"
           :class="{ canary: currentRequest.details.host.canary }"
         >
-          <span v-html="birdEmoji"></span>
+          <span v-safe-html:[$options.safeHtmlConfig]="birdEmoji"></span>
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 75fb7bbc5c5..a46ac620f48 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlPopover } from '@gitlab/ui';
+import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 import { n__ } from '~/locale';
 
@@ -8,6 +7,9 @@ export default {
   components: {
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     currentRequest: {
       type: Object,
@@ -43,6 +45,7 @@ export default {
   methods: {
     glEmojiTag,
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
@@ -59,7 +62,10 @@ export default {
       </option>
     </select>
     <span v-if="requestsWithWarnings.length" class="gl-cursor-default">
-      <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
+      <span
+        id="performance-bar-request-selector-warning"
+        v-safe-html:[$options.safeHtmlConfig]="glEmojiTag('warning')"
+      ></span>
       <gl-popover
         placement="bottom"
         target="performance-bar-request-selector-warning"
diff --git a/app/assets/javascripts/performance_bar/components/request_warning.vue b/app/assets/javascripts/performance_bar/components/request_warning.vue
index 7fe6b088ebb..3ebd222029b 100644
--- a/app/assets/javascripts/performance_bar/components/request_warning.vue
+++ b/app/assets/javascripts/performance_bar/components/request_warning.vue
@@ -1,12 +1,14 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlPopover } from '@gitlab/ui';
+import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 
 export default {
   components: {
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     htmlId: {
       type: String,
@@ -32,11 +34,12 @@ export default {
   methods: {
     glEmojiTag,
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
   <span v-if="hasWarnings" class="gl-cursor-default">
-    <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
+    <span :id="htmlId" v-safe-html:[$options.safeHtmlConfig]="glEmojiTag('warning')"></span>
     <gl-popover placement="bottom" :target="htmlId" :content="warningMessage" />
   </span>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
index 8f4894a0bde..0308cd9c565 100644
--- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
+++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue
@@ -10,7 +10,6 @@ import {
 import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql';
 import updateCurrentBranchMutation from '../../graphql/mutations/update_current_branch.mutation.graphql';
 import updateLastCommitBranchMutation from '../../graphql/mutations/update_last_commit_branch.mutation.graphql';
-import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from '../../graphql/queries/client/is_new_ci_config_file.graphql';
 import getPipelineEtag from '../../graphql/queries/client/pipeline_etag.graphql';
@@ -37,6 +36,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -49,9 +53,6 @@ export default {
     isNewCiConfigFile: {
       query: getIsNewCiConfigFile,
     },
-    commitSha: {
-      query: getCommitSha,
-    },
     currentBranch: {
       query: getCurrentBranch,
     },
@@ -96,13 +97,7 @@ export default {
             lastCommitId: this.commitSha,
           },
           update(store, { data }) {
-            const commitSha = data?.commitCreate?.commit?.sha;
             const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath;
-
-            if (commitSha) {
-              store.writeQuery({ query: getCommitSha, data: { commitSha } });
-            }
-
             if (pipelineEtag) {
               store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } });
             }
@@ -117,6 +112,9 @@ export default {
           this.$emit('commit', { type: COMMIT_SUCCESS });
           this.updateLastCommitBranch(targetBranch);
           this.updateCurrentBranch(targetBranch);
+          if (this.currentBranch === targetBranch) {
+            this.$emit('updateCommitSha');
+          }
         }
       } catch (error) {
         this.$emit('showError', { type: COMMIT_FAILURE, reasons: [error?.message] });
diff --git a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
index 77ede396496..f2a0f474bc4 100644
--- a/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
+++ b/app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue
@@ -3,7 +3,6 @@ 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 glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 
 export default {
   components: {
@@ -12,14 +11,11 @@ export default {
   mixins: [glFeatureFlagMixin()],
   inject: ['ciConfigPath', 'projectPath', 'projectNamespace', 'defaultBranch'],
   inheritAttrs: false,
-  data() {
-    return {
-      commitSha: '',
-    };
-  },
-  apollo: {
+  props: {
     commitSha: {
-      query: getCommitSha,
+      type: String,
+      required: false,
+      default: '',
     },
   },
   methods: {
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
index 9a6eed50fbe..68065cc3c73 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue
@@ -158,11 +158,9 @@ export default {
       const updatedPath = setUrlParams({ branch_name: newBranch });
       historyPushState(updatedPath);
 
-      this.$emit('updateCommitSha', { newBranch });
-
       // refetching the content will cause a lot of components to re-render,
       // including the text editor which uses the commit sha to register the CI schema
-      // so we need to make sure the commit sha is updated first
+      // so we need to make sure the currentBranch (and consequently, the commitSha) are updated first
       await this.$nextTick();
       this.$emit('refetchContent');
     },
diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
index ebe73bdcec3..551a0430fbf 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
@@ -1,21 +1,14 @@
 <script>
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BranchSwitcher from './branch_switcher.vue';
 
 export default {
   components: {
     BranchSwitcher,
   },
-  mixins: [glFeatureFlagsMixin()],
-  computed: {
-    showBranchSwitcher() {
-      return this.glFeatures.pipelineEditorBranchSwitcher;
-    },
-  },
 };
 </script>
 <template>
   <div class="gl-mb-4">
-    <branch-switcher v-if="showBranchSwitcher" v-on="$listeners" />
+    <branch-switcher v-on="$listeners" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
index 24bca04e115..fcc31f087ff 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_header.vue
@@ -33,6 +33,11 @@ export default {
       type: Object,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: true,
@@ -54,7 +59,11 @@ export default {
 </script>
 <template>
   <div class="gl-mb-5">
-    <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" />
+    <pipeline-status
+      v-if="showPipelineStatus"
+      :commit-sha="commitSha"
+      :class="$options.pipelineStatusClasses"
+    />
     <validation-segment :class="validationStyling" :ci-config="ciConfigData" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
index 46f6f4a28c1..ec240854be5 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue
@@ -3,7 +3,6 @@ import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
-import getCommitSha from '~/pipeline_editor/graphql/queries/client/commit_sha.graphql';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
 import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql';
 import {
@@ -33,10 +32,14 @@ export default {
     GlSprintf,
   },
   inject: ['projectFullPath'],
-  apollo: {
+  props: {
     commitSha: {
-      query: getCommitSha,
+      type: String,
+      required: false,
+      default: '',
     },
+  },
+  apollo: {
     pipelineEtag: {
       query: getPipelineEtag,
     },
@@ -51,7 +54,7 @@ export default {
           sha: this.commitSha,
         };
       },
-      update: (data) => {
+      update(data) {
         const { id, commitPath = '', detailedStatus = {} } = data.project?.pipeline || {};
 
         return {
@@ -60,6 +63,11 @@ export default {
           detailedStatus,
         };
       },
+      result(res) {
+        if (res.data?.project?.pipeline) {
+          this.hasError = false;
+        }
+      },
       error() {
         this.hasError = true;
       },
@@ -68,7 +76,6 @@ export default {
   },
   data() {
     return {
-      commitSha: '',
       hasError: false,
     };
   },
@@ -84,7 +91,11 @@ export default {
       // (e.g. pipeline is null during fetch when the pipeline hasn't been
       // triggered yet), we can just show the loading state until the pipeline
       // details are ready to be fetched
-      return this.$apollo.queries.pipeline.loading || (!this.hasPipelineData && !this.hasError);
+      return (
+        this.$apollo.queries.pipeline.loading ||
+        this.commitSha.length === 0 ||
+        (!this.hasPipelineData && !this.hasError)
+      );
     },
     shortSha() {
       return truncateSha(this.commitSha);
diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
index e463fcf379d..f7c9f10ea46 100644
--- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -69,6 +69,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   apollo: {
     appStatus: {
@@ -110,7 +115,7 @@ export default {
       @click="setCurrentTab($options.tabConstants.CREATE_TAB)"
     >
       <ci-editor-header />
-      <text-editor :value="ciFileContent" v-on="$listeners" />
+      <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" />
     </editor-tab>
     <editor-tab
       class="gl-mb-3"
diff --git a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index 0ac4a40ff4a..fbb66231f16 100644
--- a/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -24,9 +24,6 @@ export default {
     },
   },
   computed: {
-    showFileNav() {
-      return this.glFeatures.pipelineEditorBranchSwitcher;
-    },
     showCTAButton() {
       return this.glFeatures.pipelineEditorEmptyStateAction;
     },
@@ -40,7 +37,7 @@ export default {
 </script>
 <template>
   <div>
-    <pipeline-editor-file-nav v-if="showFileNav" v-on="$listeners" />
+    <pipeline-editor-file-nav v-on="$listeners" />
     <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
       <img :src="emptyStateIllustrationPath" />
       <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index d05b06d16db..bb03fa126a5 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -43,3 +43,5 @@ export const pipelineEditorTrackingOptions = {
 
 export const TEMPLATE_REPOSITORY_URL =
   'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates';
+
+export const COMMIT_SHA_POLL_INTERVAL = 1000;
diff --git a/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql b/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql
deleted file mode 100644
index dce17cad808..00000000000
--- a/app/assets/javascripts/pipeline_editor/graphql/mutations/update_commit_sha.mutation.graphql
+++ /dev/null
@@ -1,3 +0,0 @@
-mutation updateCommitSha($commitSha: String) {
-  updateCommitSha(commitSha: $commitSha) @client
-}
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql
deleted file mode 100644
index 6c7635887ec..00000000000
--- a/app/assets/javascripts/pipeline_editor/graphql/queries/client/commit_sha.graphql
+++ /dev/null
@@ -1,3 +0,0 @@
-query getCommitSha {
-  commitSha @client
-}
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql
index 219c23bb22b..02d49507947 100644
--- a/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql
+++ b/app/assets/javascripts/pipeline_editor/graphql/queries/latest_commit_sha.query.graphql
@@ -1,11 +1,10 @@
 query getLatestCommitSha($projectPath: ID!, $ref: String) {
   project(fullPath: $projectPath) {
-    pipelines(ref: $ref) {
-      nodes {
-        id
-        sha
-        path
-        commitPath
+    repository {
+      tree(ref: $ref) {
+        lastCommit {
+          sha
+        }
       }
     }
   }
diff --git a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
index 2bec2006e95..a34652b1495 100644
--- a/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
+++ b/app/assets/javascripts/pipeline_editor/graphql/resolvers.js
@@ -1,6 +1,5 @@
 import produce from 'immer';
 import axios from '~/lib/utils/axios_utils';
-import getCommitShaQuery from './queries/client/commit_sha.graphql';
 import getCurrentBranchQuery from './queries/client/current_branch.graphql';
 import getLastCommitBranchQuery from './queries/client/last_commit_branch.query.graphql';
 
@@ -32,14 +31,6 @@ export const resolvers = {
         __typename: 'CiLintContent',
       }));
     },
-    updateCommitSha: (_, { commitSha }, { cache }) => {
-      cache.writeQuery({
-        query: getCommitShaQuery,
-        data: produce(cache.readQuery({ query: getCommitShaQuery }), (draftData) => {
-          draftData.commitSha = commitSha;
-        }),
-      });
-    },
     updateCurrentBranch: (_, { currentBranch }, { cache }) => {
       cache.writeQuery({
         query: getCurrentBranchQuery,
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index e0f8d889cad..89b9091e6f9 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -4,7 +4,6 @@ import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants';
-import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import getLastCommitBranchQuery from './graphql/queries/client/last_commit_branch.query.graphql';
 import getPipelineEtag from './graphql/queries/client/pipeline_etag.graphql';
@@ -26,7 +25,6 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
 
   const {
     // Add to apollo cache as it can be updated by future queries
-    commitSha,
     initialBranchName,
     pipelineEtag,
     // Add to provide/inject API for static values
@@ -58,7 +56,11 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers, { typeDefs, useGet: true }),
+    defaultClient: createDefaultClient(resolvers, {
+      typeDefs,
+      useGet: true,
+      assumeImmutableResults: true,
+    }),
   });
   const { cache } = apolloProvider.clients.defaultClient;
 
@@ -69,13 +71,6 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     },
   });
 
-  cache.writeQuery({
-    query: getCommitSha,
-    data: {
-      commitSha,
-    },
-  });
-
   cache.writeQuery({
     query: getPipelineEtag,
     data: {
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 0e8a6805a59..e70417145ab 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -10,17 +10,16 @@ import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
 import PipelineEditorMessages from './components/ui/pipeline_editor_messages.vue';
 import {
+  COMMIT_SHA_POLL_INTERVAL,
   EDITOR_APP_STATUS_EMPTY,
   EDITOR_APP_STATUS_ERROR,
   EDITOR_APP_STATUS_LOADING,
   LOAD_FAILURE_UNKNOWN,
   STARTER_TEMPLATE_NAME,
 } from './constants';
-import updateCommitShaMutation from './graphql/mutations/update_commit_sha.mutation.graphql';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.graphql';
 import getAppStatus from './graphql/queries/client/app_status.graphql';
-import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql';
 import getTemplate from './graphql/queries/get_starter_template.query.graphql';
@@ -50,6 +49,7 @@ export default {
       failureType: null,
       failureReasons: [],
       initialCiFileContent: '',
+      isFetchingCommitSha: false,
       isNewCiConfigFile: false,
       lastCommittedContent: '',
       currentCiFileContent: '',
@@ -136,7 +136,7 @@ export default {
       update(data) {
         const { ciConfig } = data || {};
         const stageNodes = ciConfig?.stages?.nodes || [];
-        const stages = unwrapStagesWithNeeds(stageNodes);
+        const stages = unwrapStagesWithNeeds(JSON.parse(JSON.stringify(stageNodes)));
 
         return { ...ciConfig, stages };
       },
@@ -156,7 +156,25 @@ export default {
       query: getAppStatus,
     },
     commitSha: {
-      query: getCommitSha,
+      query: getLatestCommitShaQuery,
+      variables() {
+        return {
+          projectPath: this.projectFullPath,
+          ref: this.currentBranch,
+        };
+      },
+      update(data) {
+        const latestCommitSha = data.project?.repository?.tree?.lastCommit?.sha;
+
+        if (this.isFetchingCommitSha && latestCommitSha === this.commitSha) {
+          this.$apollo.queries.commitSha.startPolling(COMMIT_SHA_POLL_INTERVAL);
+          return this.commitSha;
+        }
+
+        this.isFetchingCommitSha = false;
+        this.$apollo.queries.commitSha.stopPolling();
+        return latestCommitSha;
+      },
     },
     currentBranch: {
       query: getCurrentBranch,
@@ -257,37 +275,9 @@ export default {
     updateCiConfig(ciFileContent) {
       this.currentCiFileContent = ciFileContent;
     },
-    async updateCommitSha({ newBranch }) {
-      let fetchResults;
-
-      try {
-        fetchResults = await this.$apollo.query({
-          query: getLatestCommitShaQuery,
-          variables: {
-            projectPath: this.projectFullPath,
-            ref: newBranch,
-          },
-        });
-      } catch {
-        this.showFetchError();
-        return;
-      }
-
-      if (fetchResults.errors?.length > 0) {
-        this.showFetchError();
-        return;
-      }
-
-      const pipelineNodes = fetchResults?.data?.project?.pipelines?.nodes ?? [];
-      if (pipelineNodes.length === 0) {
-        return;
-      }
-
-      const commitSha = pipelineNodes[0].sha;
-      this.$apollo.mutate({
-        mutation: updateCommitShaMutation,
-        variables: { commitSha },
-      });
+    updateCommitSha() {
+      this.isFetchingCommitSha = true;
+      this.$apollo.queries.commitSha.refetch();
     },
     updateOnCommit({ type }) {
       this.reportSuccess(type);
@@ -336,6 +326,7 @@ export default {
         :ci-config-data="ciConfigData"
         :ci-file-content="currentCiFileContent"
         :is-new-ci-config-file="isNewCiConfigFile"
+        :commit-sha="commitSha"
         @commit="updateOnCommit"
         @resetContent="resetContent"
         @showError="showErrorAlert"
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index dfe9c82b912..4324c64ab3b 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -25,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: true,
@@ -56,15 +61,22 @@ export default {
     <pipeline-editor-file-nav v-on="$listeners" />
     <pipeline-editor-header
       :ci-config-data="ciConfigData"
+      :commit-sha="commitSha"
       :is-new-ci-config-file="isNewCiConfigFile"
     />
     <pipeline-editor-tabs
       :ci-config-data="ciConfigData"
       :ci-file-content="ciFileContent"
+      :commit-sha="commitSha"
       v-on="$listeners"
       @set-current-tab="setCurrentTab"
     />
-    <commit-section v-if="showCommitForm" :ci-file-content="ciFileContent" v-on="$listeners" />
+    <commit-section
+      v-if="showCommitForm"
+      :ci-file-content="ciFileContent"
+      :commit-sha="commitSha"
+      v-on="$listeners"
+    />
     <pipeline-editor-drawer v-if="showPipelineDrawer" />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
index 5472e51445a..d74b6e8edf6 100644
--- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
+++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
@@ -123,6 +123,7 @@ export default {
       isWarningDismissed: false,
       isLoading: false,
       submitted: false,
+      ccAlertDismissed: false,
     };
   },
   computed: {
@@ -151,7 +152,7 @@ export default {
       return this.form[this.refFullName]?.descriptions ?? {};
     },
     ccRequiredError() {
-      return this.error === CC_VALIDATION_REQUIRED_ERROR;
+      return this.error === CC_VALIDATION_REQUIRED_ERROR && !this.ccAlertDismissed;
     },
   },
   watch: {
@@ -292,6 +293,7 @@ export default {
     },
     createPipeline() {
       this.submitted = true;
+      this.ccAlertDismissed = false;
 
       return axios
         .post(this.pipelinesPath, {
@@ -333,13 +335,17 @@ export default {
       this.warnings = warnings;
       this.totalWarnings = totalWarnings;
     },
+    dismissError() {
+      this.ccAlertDismissed = true;
+      this.error = null;
+    },
   },
 };
 </script>
 
 <template>
   <gl-form @submit.prevent="createPipeline">
-    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" />
+    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" @dismiss="dismissError" />
     <gl-alert
       v-else-if="error"
       :title="errorTitle"
diff --git a/app/assets/javascripts/pipelines/components/graph/accessors.js b/app/assets/javascripts/pipelines/components/graph/accessors.js
deleted file mode 100644
index 6ece855bcd8..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/accessors.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { get } from 'lodash';
-import { REST, GRAPHQL } from './constants';
-
-const accessors = {
-  [REST]: {
-    detailsPath: 'details_path',
-    groupId: 'id',
-    hasDetails: 'has_details',
-    pipelineStatus: ['details', 'status'],
-    sourceJob: ['source_job', 'name'],
-  },
-  [GRAPHQL]: {
-    detailsPath: 'detailsPath',
-    groupId: 'name',
-    hasDetails: 'hasDetails',
-    pipelineStatus: 'status',
-    sourceJob: ['sourceJob', 'name'],
-  },
-};
-
-const accessValue = (dataMethod, prop, item) => {
-  return get(item, accessors[dataMethod][prop]);
-};
-
-export { accessors, accessValue };
diff --git a/app/assets/javascripts/pipelines/components/graph/constants.js b/app/assets/javascripts/pipelines/components/graph/constants.js
index dd9cdae518f..0b59612b25c 100644
--- a/app/assets/javascripts/pipelines/components/graph/constants.js
+++ b/app/assets/javascripts/pipelines/components/graph/constants.js
@@ -8,9 +8,6 @@ export const UPSTREAM = 'upstream';
 */
 export const ONE_COL_WIDTH = 180;
 
-export const REST = 'rest';
-export const GRAPHQL = 'graphql';
-
 export const STAGE_VIEW = 'stage';
 export const LAYER_VIEW = 'layer';
 export const VIEW_TYPE_KEY = 'pipeline_graph_view_type';
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index b2a3f27e079..6f4360649ff 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -23,6 +23,11 @@ export default {
       required: false,
       default: -1,
     },
+    cssClassJobName: {
+      type: [String, Array],
+      required: false,
+      default: '',
+    },
     stageName: {
       type: String,
       required: false,
@@ -59,7 +64,8 @@ export default {
       type="button"
       data-toggle="dropdown"
       data-display="static"
-      class="dropdown-menu-toggle build-content gl-build-content gl-pipeline-job-width! gl-pr-4!"
+      :class="cssClassJobName"
+      class="dropdown-menu-toggle gl-pipeline-job-width! gl-pr-4!"
     >
       <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
         <job-item
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index 6584d89d87c..fd40ca0b9c9 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -7,8 +7,7 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '../../utils';
 import ActionComponent from '../jobs_shared/action_component.vue';
 import JobNameComponent from '../jobs_shared/job_name_component.vue';
-import { accessValue } from './accessors';
-import { REST, SINGLE_JOB } from './constants';
+import { SINGLE_JOB } from './constants';
 
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -47,18 +46,13 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [delayedJobMixin],
-  inject: {
-    dataMethod: {
-      default: REST,
-    },
-  },
   props: {
     job: {
       type: Object,
       required: true,
     },
     cssClassJobName: {
-      type: String,
+      type: [String, Array],
       required: false,
       default: '',
     },
@@ -111,10 +105,10 @@ export default {
       return this.pipelineId > -1 ? `${this.job.name}-${this.pipelineId}` : '';
     },
     detailsPath() {
-      return accessValue(this.dataMethod, 'detailsPath', this.status);
+      return this.status.detailsPath;
     },
     hasDetails() {
-      return accessValue(this.dataMethod, 'hasDetails', this.status);
+      return this.status.hasDetails;
     },
     isSingleItem() {
       return this.type === SINGLE_JOB;
@@ -189,7 +183,7 @@ export default {
       if (this.isSingleItem) {
         /*
           This is so the jobDropdown still toggles. Issue to refactor:
-          https://gitlab.com/gitlab-org/gitlab/-/issues/267117 
+          https://gitlab.com/gitlab-org/gitlab/-/issues/267117
         */
         evt.stopPropagation();
       }
@@ -226,11 +220,11 @@ export default {
       <div class="ci-job-name-component gl-display-flex gl-align-items-center">
         <ci-icon :size="24" :status="job.status" class="gl-line-height-0" />
         <div class="gl-pl-3 gl-display-flex gl-flex-direction-column gl-w-full">
-          <div class="gl-text-truncate mw-70p gl-line-height-normal">{{ job.name }}</div>
+          <div class="gl-text-truncate gl-w-70p gl-line-height-normal">{{ job.name }}</div>
           <div
             v-if="showStageName"
             data-testid="stage-name-in-job"
-            class="gl-text-truncate mw-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
+            class="gl-text-truncate gl-w-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
           >
             {{ stageName }}
           </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index dd8a354511a..be47799868b 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -4,8 +4,7 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '../../utils';
-import { accessValue } from './accessors';
-import { DOWNSTREAM, REST, UPSTREAM } from './constants';
+import { DOWNSTREAM, UPSTREAM } from './constants';
 
 export default {
   directives: {
@@ -18,11 +17,6 @@ export default {
     GlLoadingIcon,
     GlBadge,
   },
-  inject: {
-    dataMethod: {
-      default: REST,
-    },
-  },
   props: {
     columnTitle: {
       type: String,
@@ -40,20 +34,9 @@ export default {
       type: String,
       required: true,
     },
-    /*
-      The next two props will be removed or required
-      once the graph transition is done.
-      See: https://gitlab.com/gitlab-org/gitlab/-/issues/291043
-    */
     isLoading: {
       type: Boolean,
-      required: false,
-      default: false,
-    },
-    projectId: {
-      type: Number,
-      required: false,
-      default: -1,
+      required: true,
     },
   },
   computed: {
@@ -65,7 +48,7 @@ export default {
       return `js-linked-pipeline-${this.pipeline.id}`;
     },
     pipelineStatus() {
-      return accessValue(this.dataMethod, 'pipelineStatus', this.pipeline);
+      return this.pipeline.status;
     },
     projectName() {
       return this.pipeline.project.name;
@@ -97,12 +80,10 @@ export default {
       return this.type === UPSTREAM;
     },
     isSameProject() {
-      return this.projectId > -1
-        ? this.projectId === this.pipeline.project.id
-        : !this.pipeline.multiproject;
+      return !this.pipeline.multiproject;
     },
     sourceJobName() {
-      return accessValue(this.dataMethod, 'sourceJob', this.pipeline);
+      return this.pipeline.sourceJob?.name ?? '';
     },
     sourceJobInfo() {
       return this.isDownstream ? sprintf(__('Created by %{job}'), { job: this.sourceJobName }) : '';
@@ -143,9 +124,8 @@ export default {
   <div
     ref="linkedPipeline"
     v-gl-tooltip
-    class="linked-pipeline build gl-pipeline-job-width"
+    class="gl-pipeline-job-width"
     :title="tooltipText"
-    :class="{ 'downstream-pipeline': isDownstream }"
     data-qa-selector="child_pipeline"
     @mouseover="onDownstreamHovered"
     @mouseleave="onDownstreamHoverLeave"
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index d251e0d8bd8..3c1208afbf0 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -195,7 +195,7 @@ export default {
 <template>
   <div class="gl-display-flex">
     <div :class="columnClass" class="linked-pipelines-column">
-      <div data-testid="linked-column-title" class="stage-name" :class="computedTitleClasses">
+      <div data-testid="linked-column-title" :class="computedTitleClasses">
         {{ columnTitle }}
       </div>
       <ul class="gl-pl-0">
@@ -224,7 +224,7 @@ export default {
             <pipeline-graph
               v-if="isExpanded(pipeline.id)"
               :type="type"
-              class="d-inline-block gl-mt-n2"
+              class="gl-inline-block gl-mt-n2"
               :config-paths="configPaths"
               :pipeline="currentPipeline"
               :computed-pipeline-info="getPipelineLayers(pipeline.id)"
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index d34ae8036ed..b0f375c9aeb 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -4,8 +4,6 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { reportToSentry } from '../../utils';
 import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue';
 import ActionComponent from '../jobs_shared/action_component.vue';
-import { accessValue } from './accessors';
-import { GRAPHQL } from './constants';
 import JobGroupDropdown from './job_group_dropdown.vue';
 import JobItem from './job_item.vue';
 
@@ -65,6 +63,21 @@ export default {
       required: true,
     },
   },
+  jobClasses: [
+    'gl-py-3',
+    'gl-px-4',
+    'gl-border-gray-100',
+    'gl-border-solid',
+    'gl-border-1',
+    'gl-bg-white',
+    'gl-rounded-7',
+    'gl-hover-bg-gray-50',
+    'gl-focus-bg-gray-50',
+    'gl-hover-text-gray-900',
+    'gl-focus-text-gray-900',
+    'gl-hover-border-gray-200',
+    'gl-focus-border-gray-200',
+  ],
   titleClasses: [
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
@@ -97,7 +110,7 @@ export default {
   },
   methods: {
     getGroupId(group) {
-      return accessValue(GRAPHQL, 'groupId', group);
+      return group.name;
     },
     groupId(group) {
       return `ci-badge-${escape(group.name)}`;
@@ -134,7 +147,7 @@ export default {
           :action-icon="action.icon"
           :tooltip-text="action.title"
           :link="action.path"
-          class="js-stage-action stage-action rounded"
+          class="js-stage-action"
           @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
       </div>
@@ -157,7 +170,7 @@ export default {
           :pipeline-expanded="pipelineExpanded"
           :pipeline-id="pipelineId"
           :stage-name="showStageName ? group.stageName : ''"
-          css-class-job-name="gl-build-content"
+          :css-class-job-name="$options.jobClasses"
           :class="[
             { 'gl-opacity-3': isFadedOut(group.name) },
             'gl-transition-duration-slow gl-transition-timing-function-ease',
@@ -169,6 +182,7 @@ export default {
             :group="group"
             :stage-name="showStageName ? group.stageName : ''"
             :pipeline-id="pipelineId"
+            :css-class-job-name="$options.jobClasses"
           />
         </div>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 5db2b604956..4db6a3c9fd8 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -218,7 +218,7 @@ export default {
       :status="pipeline.detailedStatus"
       :time="pipeline.createdAt"
       :user="pipeline.user"
-      :item-id="Number(pipelineId)"
+      :item-id="pipelineId"
       item-name="Pipeline"
     >
       <gl-button
diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js
index 7e7f0572faf..fa7330ce890 100644
--- a/app/assets/javascripts/pipelines/components/parsing_utils.js
+++ b/app/assets/javascripts/pipelines/components/parsing_utils.js
@@ -1,55 +1,18 @@
 import { memoize } from 'lodash';
+import { createNodeDict } from '../utils';
 import { createSankey } from './dag/drawing_utils';
 
 /*
-    The following functions are the main engine in transforming the data as
-    received from the endpoint into the format the d3 graph expects.
-
-    Input is of the form:
-    [nodes]
-      nodes: [{category, name, jobs, size}]
-        category is the stage name
-        name is a group name; in the case that the group has one job, it is
-          also the job name
-        size is the number of parallel jobs
-        jobs: [{ name, needs}]
-          job name is either the same as the group name or group x/y
-          needs: [job-names]
-          needs is an array of job-name strings
-
-    Output is of the form:
-    { nodes: [node], links: [link] }
-      node: { name, category }, + unused info passed through
-      link: { source, target, value }, with source & target being node names
-        and value being a constant
-
-    We create nodes in the GraphQL update function, and then here we create the node dictionary,
-    then create links, and then dedupe the links, so that in the case where
-    job 4 depends on job 1 and job 2, and job 2 depends on job 1, we show only a single link
-    from job 1 to job 2 then another from job 2 to job 4.
-
-    CREATE LINKS
-    nodes.name -> target
-    nodes.name.needs.each -> source (source is the name of the group, not the parallel job)
-    10 -> value (constant)
-  */
-
-export const createNodeDict = (nodes) => {
-  return nodes.reduce((acc, node) => {
-    const newNode = {
-      ...node,
-      needs: node.jobs.map((job) => job.needs || []).flat(),
-    };
-
-    if (node.size > 1) {
-      node.jobs.forEach((job) => {
-        acc[job.name] = newNode;
-      });
-    }
+  A peformant alternative to lodash's isEqual. Because findIndex always finds
+  the first instance of a match, if the found index is not the first, we know
+  it is in fact a duplicate.
+*/
+const deduplicate = (item, itemIndex, arr) => {
+  const foundIdx = arr.findIndex((test) => {
+    return test.source === item.source && test.target === item.target;
+  });
 
-    acc[node.name] = newNode;
-    return acc;
-  }, {});
+  return foundIdx === itemIndex;
 };
 
 export const makeLinksFromNodes = (nodes, nodeDict) => {
@@ -83,7 +46,8 @@ export const getAllAncestors = (nodes, nodeDict) => {
       return nodeDict[node]?.needs || '';
     })
     .flat()
-    .filter(Boolean);
+    .filter(Boolean)
+    .filter(deduplicate);
 
   if (needs.length) {
     return [...needs, ...getAllAncestors(needs, nodeDict)];
@@ -108,29 +72,15 @@ export const filterByAncestors = (links, nodeDict) =>
     const targetNode = target;
     const targetNodeNeeds = nodeDict[targetNode].needs;
     const targetNodeNeedsMinusSource = targetNodeNeeds.filter((need) => need !== source);
-
     const allAncestors = getAllAncestors(targetNodeNeedsMinusSource, nodeDict);
     return !allAncestors.includes(source);
   });
 
-/*
-  A peformant alternative to lodash's isEqual. Because findIndex always finds
-  the first instance of a match, if the found index is not the first, we know
-  it is in fact a duplicate.
-*/
-const deduplicate = (item, itemIndex, arr) => {
-  const foundIdx = arr.findIndex((test) => {
-    return test.source === item.source && test.target === item.target;
-  });
-
-  return foundIdx === itemIndex;
-};
-
 export const parseData = (nodes) => {
   const nodeDict = createNodeDict(nodes);
   const allLinks = makeLinksFromNodes(nodes, nodeDict);
-  const filteredLinks = filterByAncestors(allLinks, nodeDict);
-  const links = filteredLinks.filter(deduplicate);
+  const filteredLinks = allLinks.filter(deduplicate);
+  const links = filterByAncestors(filteredLinks, nodeDict);
 
   return { nodes, links };
 };
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
index 40ee071f1f5..3470c963ade 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
@@ -100,7 +100,7 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="sm" />
 
-    <gl-dropdown-item v-if="!artifacts.length" data-testid="artifacts-empty-message">
+    <gl-dropdown-item v-if="!artifacts.length && !isLoading" data-testid="artifacts-empty-message">
       {{ $options.i18n.emptyArtifactsMessage }}
     </gl-dropdown-item>
 
@@ -110,6 +110,7 @@ export default {
       :href="artifact.path"
       rel="nofollow"
       download
+      class="gl-word-break-word"
       data-testid="artifact-item"
     >
       <gl-sprintf :message="$options.i18n.downloadArtifact">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue
index 24b5c85c9d6..3bd149fc782 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLink, GlModal } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { __, s__, sprintf } from '~/locale';
@@ -72,7 +71,7 @@ export default {
     :action-cancel="cancelProps"
     @primary="emitSubmit($event)"
   >
-    <p v-html="modalText"></p>
+    <p v-html="modalText /* eslint-disable-line vue/no-v-html */"></p>
 
     <p v-if="pipeline">
       <ci-icon
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
index 0b70e74b8ff..2dfdaa0ea28 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue
@@ -39,7 +39,7 @@ export default {
       return this.value.map((i) => i.type);
     },
     tokens() {
-      const tokens = [
+      return [
         {
           type: this.$options.userType,
           icon: 'user',
@@ -77,20 +77,15 @@ export default {
           token: PipelineStatusToken,
           operators: OPERATOR_IS_ONLY,
         },
-      ];
-
-      if (gon.features.pipelineSourceFilter) {
-        tokens.push({
+        {
           type: this.$options.sourceType,
           icon: 'trigger-source',
           title: s__('Pipeline|Source'),
           unique: true,
           token: PipelineSourceToken,
           operators: OPERATOR_IS_ONLY,
-        });
-      }
-
-      return tokens;
+        },
+      ];
     },
     parsedParams() {
       return map(this.params, (val, key) => ({
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 2475d958e3c..12ee82f0390 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -212,6 +212,7 @@ export default {
           <linked-pipelines-mini-list
             v-if="item.triggered.length"
             :triggered="item.triggered"
+            :pipeline-path="item.path"
             data-testid="mini-graph-downstream"
           />
         </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/constants.js b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/constants.js
new file mode 100644
index 00000000000..02baa76f627
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/constants.js
@@ -0,0 +1,52 @@
+import { s__ } from '~/locale';
+
+export const PIPELINE_SOURCES = [
+  {
+    text: s__('Pipeline|Source|Push'),
+    value: 'push',
+  },
+  {
+    text: s__('Pipeline|Source|Web'),
+    value: 'web',
+  },
+  {
+    text: s__('Pipeline|Source|Trigger'),
+    value: 'trigger',
+  },
+  {
+    text: s__('Pipeline|Source|Schedule'),
+    value: 'schedule',
+  },
+  {
+    text: s__('Pipeline|Source|API'),
+    value: 'api',
+  },
+  {
+    text: s__('Pipeline|Source|External'),
+    value: 'external',
+  },
+  {
+    text: s__('Pipeline|Source|Pipeline'),
+    value: 'pipeline',
+  },
+  {
+    text: s__('Pipeline|Source|Chat'),
+    value: 'chat',
+  },
+  {
+    text: s__('Pipeline|Source|Web IDE'),
+    value: 'webide',
+  },
+  {
+    text: s__('Pipeline|Source|Merge Request'),
+    value: 'merge_request_event',
+  },
+  {
+    text: s__('Pipeline|Source|External Pull Request'),
+    value: 'external_pull_request_event',
+  },
+  {
+    text: s__('Pipeline|Source|Parent Pipeline'),
+    value: 'parent_pipeline',
+  },
+];
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_source_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_source_token.vue
index 71efa8b2ab4..9643ddfbd21 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_source_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_source_token.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { PIPELINE_SOURCES } from 'ee_else_ce/pipelines/components/pipelines_list/tokens/constants';
 
 export default {
+  PIPELINE_SOURCES,
   components: {
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
@@ -18,68 +19,8 @@ export default {
     },
   },
   computed: {
-    sources() {
-      return [
-        {
-          text: s__('Pipeline|Source|Push'),
-          value: 'push',
-        },
-        {
-          text: s__('Pipeline|Source|Web'),
-          value: 'web',
-        },
-        {
-          text: s__('Pipeline|Source|Trigger'),
-          value: 'trigger',
-        },
-        {
-          text: s__('Pipeline|Source|Schedule'),
-          value: 'schedule',
-        },
-        {
-          text: s__('Pipeline|Source|API'),
-          value: 'api',
-        },
-        {
-          text: s__('Pipeline|Source|External'),
-          value: 'external',
-        },
-        {
-          text: s__('Pipeline|Source|Pipeline'),
-          value: 'pipeline',
-        },
-        {
-          text: s__('Pipeline|Source|Chat'),
-          value: 'chat',
-        },
-        {
-          text: s__('Pipeline|Source|Web IDE'),
-          value: 'webide',
-        },
-        {
-          text: s__('Pipeline|Source|Merge Request'),
-          value: 'merge_request_event',
-        },
-        {
-          text: s__('Pipeline|Source|External Pull Request'),
-          value: 'external_pull_request_event',
-        },
-        {
-          text: s__('Pipeline|Source|Parent Pipeline'),
-          value: 'parent_pipeline',
-        },
-        {
-          text: s__('Pipeline|Source|On-Demand DAST Scan'),
-          value: 'ondemand_dast_scan',
-        },
-        {
-          text: s__('Pipeline|Source|On-Demand DAST Validation'),
-          value: 'ondemand_dast_validation',
-        },
-      ];
-    },
-    findActiveSource() {
-      return this.sources.find((source) => source.value === this.value.data);
+    activeSource() {
+      return PIPELINE_SOURCES.find((source) => source.value === this.value.data);
     },
   },
 };
@@ -89,13 +30,13 @@ export default {
   <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <template #view>
       <div class="gl-display-flex gl-align-items-center">
-        <span>{{ findActiveSource.text }}</span>
+        <span>{{ activeSource.text }}</span>
       </div>
     </template>
 
     <template #suggestions>
       <gl-filtered-search-suggestion
-        v-for="source in sources"
+        v-for="source in $options.PIPELINE_SOURCES"
         :key="source.value"
         :value="source.value"
       >
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index c6e767d5424..ee9560e36c4 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,16 +1,10 @@
-import Vue from 'vue';
 import createFlash from '~/flash';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import Translate from '~/vue_shared/translate';
-import TestReports from './components/test_reports/test_reports.vue';
 import createDagApp from './pipeline_details_dag';
 import { createPipelinesDetailApp } from './pipeline_details_graph';
 import { createPipelineHeaderApp } from './pipeline_details_header';
 import { apolloProvider } from './pipeline_shared_client';
-import createTestReportsStore from './stores/test_reports';
-
-Vue.use(Translate);
+import { createTestDetails } from './pipeline_test_details';
 
 const SELECTORS = {
   PIPELINE_DETAILS: '.js-pipeline-details-vue',
@@ -19,33 +13,6 @@ const SELECTORS = {
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
-const createTestDetails = () => {
-  const el = document.querySelector(SELECTORS.PIPELINE_TESTS);
-  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
-    el?.dataset || {};
-  const testReportsStore = createTestReportsStore({
-    blobPath,
-    summaryEndpoint,
-    suiteEndpoint,
-  });
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      TestReports,
-    },
-    provide: {
-      emptyStateImagePath,
-      hasTestReport: parseBoolean(hasTestReport),
-    },
-    store: testReportsStore,
-    render(createElement) {
-      return createElement('test-reports');
-    },
-  });
-};
-
 export default async function initPipelineDetailsBundle() {
   const { dataset } = document.querySelector(SELECTORS.PIPELINE_DETAILS);
 
@@ -65,6 +32,27 @@ export default async function initPipelineDetailsBundle() {
     });
   }
 
-  createDagApp(apolloProvider);
-  createTestDetails();
+  try {
+    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading a section of this page.'),
+    });
+  }
+
+  try {
+    createDagApp(apolloProvider);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Needs tab.'),
+    });
+  }
+
+  try {
+    createTestDetails(SELECTORS.PIPELINE_TESTS);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Test Reports tab.'),
+    });
+  }
 }
diff --git a/app/assets/javascripts/pipelines/pipeline_details_graph.js b/app/assets/javascripts/pipelines/pipeline_details_graph.js
index 39c3c2ea5c5..9dd5cd7b281 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_graph.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_graph.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GRAPHQL } from './components/graph/constants';
 import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
 import { reportToSentry } from './utils';
 
@@ -23,7 +22,6 @@ const createPipelinesDetailApp = (
       pipelineProjectPath,
       pipelineIid,
       graphqlResourceEtag,
-      dataMethod: GRAPHQL,
     },
     errorCaptured(err, _vm, info) {
       reportToSentry('pipeline_details_graph', `error: ${err}, info: ${info}`);
diff --git a/app/assets/javascripts/pipelines/pipeline_test_details.js b/app/assets/javascripts/pipelines/pipeline_test_details.js
new file mode 100644
index 00000000000..46c7ec07d03
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_test_details.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import Translate from '~/vue_shared/translate';
+import TestReports from './components/test_reports/test_reports.vue';
+import createTestReportsStore from './stores/test_reports';
+
+Vue.use(Translate);
+
+export const createTestDetails = (selector) => {
+  const el = document.querySelector(selector);
+  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
+    el?.dataset || {};
+  const testReportsStore = createTestReportsStore({
+    blobPath,
+    summaryEndpoint,
+    suiteEndpoint,
+  });
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      TestReports,
+    },
+    provide: {
+      emptyStateImagePath,
+      hasTestReport: parseBoolean(hasTestReport),
+    },
+    store: testReportsStore,
+    render(createElement) {
+      return createElement('test-reports');
+    },
+  });
+};
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 02a9e5b7fc6..e28eb74fb1b 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -1,8 +1,58 @@
 import * as Sentry from '@sentry/browser';
 import { pickBy } from 'lodash';
-import { createNodeDict } from './components/parsing_utils';
 import { SUPPORTED_FILTER_PARAMETERS } from './constants';
 
+/*
+    The following functions are the main engine in transforming the data as
+    received from the endpoint into the format the d3 graph expects.
+
+    Input is of the form:
+    [nodes]
+      nodes: [{category, name, jobs, size}]
+        category is the stage name
+        name is a group name; in the case that the group has one job, it is
+          also the job name
+        size is the number of parallel jobs
+        jobs: [{ name, needs}]
+          job name is either the same as the group name or group x/y
+          needs: [job-names]
+          needs is an array of job-name strings
+
+    Output is of the form:
+    { nodes: [node], links: [link] }
+      node: { name, category }, + unused info passed through
+      link: { source, target, value }, with source & target being node names
+        and value being a constant
+
+    We create nodes in the GraphQL update function, and then here we create the node dictionary,
+    then create links, and then dedupe the links, so that in the case where
+    job 4 depends on job 1 and job 2, and job 2 depends on job 1, we show only a single link
+    from job 1 to job 2 then another from job 2 to job 4.
+
+    CREATE LINKS
+    nodes.name -> target
+    nodes.name.needs.each -> source (source is the name of the group, not the parallel job)
+    10 -> value (constant)
+  */
+
+export const createNodeDict = (nodes) => {
+  return nodes.reduce((acc, node) => {
+    const newNode = {
+      ...node,
+      needs: node.jobs.map((job) => job.needs || []).flat(),
+    };
+
+    if (node.size > 1) {
+      node.jobs.forEach((job) => {
+        acc[job.name] = newNode;
+      });
+    }
+
+    acc[node.name] = newNode;
+    return acc;
+  }, {});
+};
+
 export const validateParams = (params) => {
   return pickBy(params, (val, key) => SUPPORTED_FILTER_PARAMETERS.includes(key) && val);
 };
diff --git a/app/assets/javascripts/popovers/components/popovers.vue b/app/assets/javascripts/popovers/components/popovers.vue
index 05a209a97ad..a758503b56b 100644
--- a/app/assets/javascripts/popovers/components/popovers.vue
+++ b/app/assets/javascripts/popovers/components/popovers.vue
@@ -1,11 +1,5 @@
 <script>
-// We can't use v-safe-html here as the popover's title or content might contains SVGs that would
-// be stripped by the directive's sanitizer. Instead, we fallback on v-html and we use GitLab's
-// dompurify config that lets SVGs be rendered properly.
-// Context: https://gitlab.com/gitlab-org/gitlab/-/issues/247207
-/* eslint-disable vue/no-v-html */
-import { GlPopover } from '@gitlab/ui';
-import { sanitize } from '~/lib/dompurify';
+import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 
 const newPopover = (element) => {
   const { content, html, placement, title, triggers = 'focus' } = element.dataset;
@@ -24,6 +18,9 @@ export default {
   components: {
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   data() {
     return {
       popovers: [],
@@ -71,9 +68,9 @@ export default {
     popoverExists(element) {
       return this.popovers.some((popover) => popover.target === element);
     },
-    getSafeHtml(html) {
-      return sanitize(html);
-    },
+  },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
   },
 };
 </script>
@@ -82,10 +79,10 @@ export default {
   <div>
     <gl-popover v-for="(popover, index) in popovers" :key="index" v-bind="popover">
       <template #title>
-        <span v-if="popover.html" v-html="getSafeHtml(popover.title)"></span>
+        <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.title"></span>
         <span v-else>{{ popover.title }}</span>
       </template>
-      <span v-if="popover.html" v-html="getSafeHtml(popover.content)"></span>
+      <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.content"></span>
       <span v-else>{{ popover.content }}</span>
     </gl-popover>
   </div>
diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js
index 4b14df21f05..fd45d643ecc 100644
--- a/app/assets/javascripts/project_select_combo_button.js
+++ b/app/assets/javascripts/project_select_combo_button.js
@@ -30,7 +30,7 @@ export default class ProjectSelectComboButton {
   }
 
   initLocalStorage() {
-    const localStorageIsSafe = AccessorUtilities.isLocalStorageAccessSafe();
+    const localStorageIsSafe = AccessorUtilities.canUseLocalStorage();
 
     if (localStorageIsSafe) {
       this.localStorageKey = [
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
index a4a1cb5584d..da14b1e8470 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -87,6 +87,7 @@ export default {
       <linked-pipelines-mini-list
         v-if="hasDownstream"
         :triggered="downstreamPipelines"
+        :pipeline-path="pipeline.path"
         data-testid="commit-box-mini-graph-downstream"
       />
     </div>
diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql
index f7e930bb3f2..ee18c70b6fd 100644
--- a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql
+++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql
@@ -1,6 +1,7 @@
 query getLinkedPipelines($fullPath: ID!, $iid: ID!) {
   project(fullPath: $fullPath) {
     pipeline(iid: $iid) {
+      path
       downstream {
         nodes {
           id
diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
index 1d4ec4c110b..2505c47147f 100644
--- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
+++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
@@ -5,7 +5,12 @@ import createDefaultClient from '~/lib/graphql';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(
+    {},
+    {
+      assumeImmutableResults: true,
+    },
+  ),
 });
 
 export const initCommitPipelineMiniGraph = async (selector = '.js-commit-pipeline-mini-graph') => {
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index d3cadcd2bd5..ecd2288eb2f 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -199,6 +199,16 @@ export default {
         },
       ];
     },
+    chartOptions() {
+      return {
+        ...this.$options.timesChartOptions,
+        yAxis: {
+          axisLabel: {
+            formatter: (value) => value,
+          },
+        },
+      };
+    },
   },
   methods: {
     hideAlert() {
@@ -314,7 +324,7 @@ export default {
         <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong>
         <gl-column-chart
           :height="$options.chartContainerHeight"
-          :option="$options.timesChartOptions"
+          :option="chartOptions"
           :bars="timesChartTransformedData"
           :y-axis-title="__('Minutes')"
           :x-axis-title="__('Commit')"
diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js
index 5f5ee44c204..f7ea89068a0 100644
--- a/app/assets/javascripts/projects/pipelines/charts/index.js
+++ b/app/assets/javascripts/projects/pipelines/charts/index.js
@@ -7,7 +7,7 @@ import ProjectPipelinesCharts from './components/app.vue';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
 });
 
 const mountPipelineChartsApp = (el) => {
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index ee02f446795..ebd20583a1c 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -71,6 +71,17 @@ const deriveProjectPathFromUrl = ($projectImportUrl) => {
   }
 };
 
+const bindHowToImport = () => {
+  $('.how_to_import_link').on('click', (e) => {
+    e.preventDefault();
+    $(e.currentTarget).next('.modal').show();
+  });
+
+  $('.modal-header .close').on('click', () => {
+    $('.modal').hide();
+  });
+};
+
 const bindEvents = () => {
   const $newProjectForm = $('#new_project');
   const $projectImportUrl = $('#project_import_url');
@@ -88,14 +99,7 @@ const bindEvents = () => {
     return;
   }
 
-  $('.how_to_import_link').on('click', (e) => {
-    e.preventDefault();
-    $(e.currentTarget).next('.modal').show();
-  });
-
-  $('.modal-header .close').on('click', () => {
-    $('.modal').hide();
-  });
+  bindHowToImport();
 
   $('.btn_import_gitlab_project').on('click', () => {
     const importHref = $('a.btn_import_gitlab_project').attr('href');
@@ -174,3 +178,5 @@ export default {
   onProjectNameChange,
   onProjectPathChange,
 };
+
+export { bindHowToImport };
diff --git a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
index e4edb950a1e..91d8fca0487 100644
--- a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
+++ b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue
@@ -43,6 +43,7 @@ export default {
       isSharedRunnerEnabled: this.isEnabled,
       errorMessage: null,
       successfulValidation: false,
+      ccAlertDismissed: false,
     };
   },
   computed: {
@@ -50,7 +51,8 @@ export default {
       return (
         this.isCreditCardValidationRequired &&
         !this.isSharedRunnerEnabled &&
-        !this.successfulValidation
+        !this.successfulValidation &&
+        !this.ccAlertDismissed
       );
     },
   },
@@ -89,6 +91,7 @@ export default {
         class="gl-pb-5"
         :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT"
         @verifiedCreditCard="creditCardValidated"
+        @dismiss="ccAlertDismissed = true"
       />
 
       <gl-toggle
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
index 34d53e2de0c..fe2d376f1da 100644
--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
@@ -1,5 +1,13 @@
 <script>
-import { GlButton, GlFormSelect, GlToggle, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import {
+  GlButton,
+  GlFormSelect,
+  GlToggle,
+  GlLoadingIcon,
+  GlSprintf,
+  GlFormInput,
+  GlLink,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -14,6 +22,8 @@ export default {
     GlToggle,
     GlLoadingIcon,
     GlSprintf,
+    GlFormInput,
+    GlLink,
   },
   props: {
     isEnabled: {
@@ -148,17 +158,37 @@ export default {
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 
-        <template v-if="hasProjectKeySupport">
-          <label for="service-desk-project-suffix" class="mt-3">
-            {{ __('Project name suffix') }}
-          </label>
-          <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" />
-          <span class="form-text text-muted">
-            {{
-              __('A string appended to the project path to form the Service Desk email address.')
-            }}
-          </span>
-        </template>
+        <label for="service-desk-project-suffix" class="mt-3">
+          {{ __('Project name suffix') }}
+        </label>
+        <gl-form-input
+          v-if="hasProjectKeySupport"
+          id="service-desk-project-suffix"
+          v-model.trim="projectKey"
+          data-testid="project-suffix"
+          class="form-control"
+        />
+        <span v-if="hasProjectKeySupport" class="form-text text-muted">
+          {{ __('A string appended to the project path to form the Service Desk email address.') }}
+        </span>
+        <span v-else class="form-text text-muted">
+          <gl-sprintf
+            :message="
+              __(
+                'To add a custom suffix, set up a Service Desk email address. %{linkStart}Learn more.%{linkEnd}',
+              )
+            "
+          >
+            <template #link="{ content }">
+              <gl-link
+                href="https://docs.gitlab.com/ee/user/project/service_desk.html#using-a-custom-email-address"
+                target="_blank"
+                class="gl-text-blue-600 font-size-inherit"
+                >{{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </span>
 
         <label for="service-desk-template-select" class="mt-3">
           {{ __('Template to append to all Service Desk issues') }}
diff --git a/app/assets/javascripts/projects/storage_counter/components/app.vue b/app/assets/javascripts/projects/storage_counter/components/app.vue
new file mode 100644
index 00000000000..1a911ea3d9b
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/components/app.vue
@@ -0,0 +1,106 @@
+<script>
+import { GlAlert, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { sprintf } from '~/locale';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
+import {
+  ERROR_MESSAGE,
+  LEARN_MORE_LABEL,
+  USAGE_QUOTAS_LABEL,
+  TOTAL_USAGE_TITLE,
+  TOTAL_USAGE_SUBTITLE,
+  TOTAL_USAGE_DEFAULT_TEXT,
+  HELP_LINK_ARIA_LABEL,
+} from '../constants';
+import getProjectStorageCount from '../queries/project_storage.query.graphql';
+import { parseGetProjectStorageResults } from '../utils';
+import StorageTable from './storage_table.vue';
+
+export default {
+  name: 'StorageCounterApp',
+  components: {
+    GlAlert,
+    GlLink,
+    GlLoadingIcon,
+    StorageTable,
+    UsageGraph,
+  },
+  inject: ['projectPath', 'helpLinks'],
+  apollo: {
+    project: {
+      query: getProjectStorageCount,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+        };
+      },
+      update(data) {
+        return parseGetProjectStorageResults(data, this.helpLinks);
+      },
+      error() {
+        this.error = ERROR_MESSAGE;
+      },
+    },
+  },
+  data() {
+    return {
+      project: {},
+      error: '',
+    };
+  },
+  computed: {
+    totalUsage() {
+      return this.project?.storage?.totalUsage || TOTAL_USAGE_DEFAULT_TEXT;
+    },
+    storageTypes() {
+      return this.project?.storage?.storageTypes || [];
+    },
+  },
+  methods: {
+    clearError() {
+      this.error = '';
+    },
+    helpLinkAriaLabel(linkTitle) {
+      return sprintf(HELP_LINK_ARIA_LABEL, {
+        linkTitle,
+      });
+    },
+  },
+  LEARN_MORE_LABEL,
+  USAGE_QUOTAS_LABEL,
+  TOTAL_USAGE_TITLE,
+  TOTAL_USAGE_SUBTITLE,
+};
+</script>
+<template>
+  <gl-loading-icon v-if="$apollo.queries.project.loading" class="gl-mt-5" size="md" />
+  <gl-alert v-else-if="error" variant="danger" @dismiss="clearError">
+    {{ error }}
+  </gl-alert>
+  <div v-else>
+    <div class="gl-pt-5 gl-px-3">
+      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+        <div>
+          <p class="gl-m-0 gl-font-lg gl-font-weight-bold">{{ $options.TOTAL_USAGE_TITLE }}</p>
+          <p class="gl-m-0 gl-text-gray-400">
+            {{ $options.TOTAL_USAGE_SUBTITLE }}
+            <gl-link
+              :href="helpLinks.usageQuotasHelpPagePath"
+              target="_blank"
+              :aria-label="helpLinkAriaLabel($options.USAGE_QUOTAS_LABEL)"
+              data-testid="usage-quotas-help-link"
+            >
+              {{ $options.LEARN_MORE_LABEL }}
+            </gl-link>
+          </p>
+        </div>
+        <p class="gl-m-0 gl-font-size-h-display gl-font-weight-bold" data-testid="total-usage">
+          {{ totalUsage }}
+        </p>
+      </div>
+    </div>
+    <div v-if="project.statistics" class="gl-w-full">
+      <usage-graph :root-storage-statistics="project.statistics" :limit="0" />
+    </div>
+    <storage-table :storage-types="storageTypes" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/storage_counter/components/storage_table.vue b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue
new file mode 100644
index 00000000000..7047fd925fb
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue
@@ -0,0 +1,78 @@
+<script>
+import { GlLink, GlIcon, GlTable, GlSprintf } from '@gitlab/ui';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { thWidthClass } from '~/lib/utils/table_utility';
+import { sprintf } from '~/locale';
+import { PROJECT_TABLE_LABELS, HELP_LINK_ARIA_LABEL } from '../constants';
+
+export default {
+  name: 'StorageTable',
+  components: {
+    GlLink,
+    GlIcon,
+    GlTable,
+    GlSprintf,
+  },
+  props: {
+    storageTypes: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    helpLinkAriaLabel(linkTitle) {
+      return sprintf(HELP_LINK_ARIA_LABEL, {
+        linkTitle,
+      });
+    },
+  },
+  projectTableFields: [
+    {
+      key: 'storageType',
+      label: PROJECT_TABLE_LABELS.STORAGE_TYPE,
+      thClass: thWidthClass(90),
+      sortable: true,
+    },
+    {
+      key: 'value',
+      label: PROJECT_TABLE_LABELS.VALUE,
+      thClass: thWidthClass(10),
+      sortable: true,
+      formatter: (value) => {
+        return numberToHumanSize(value, 1);
+      },
+    },
+  ],
+};
+</script>
+<template>
+  <gl-table :items="storageTypes" :fields="$options.projectTableFields">
+    <template #cell(storageType)="{ item }">
+      <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`">
+        {{ item.storageType.name }}
+        <gl-link
+          v-if="item.storageType.helpPath"
+          :href="item.storageType.helpPath"
+          target="_blank"
+          :aria-label="helpLinkAriaLabel(item.storageType.name)"
+          :data-testid="`${item.storageType.id}-help-link`"
+        >
+          <gl-icon name="question" :size="12" />
+        </gl-link>
+      </p>
+      <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`">
+        {{ item.storageType.description }}
+      </p>
+      <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm">
+        <gl-icon name="warning" :size="12" />
+        <gl-sprintf :message="item.storageType.warningMessage">
+          <template #warningLink="{ content }">
+            <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{
+              content
+            }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-table>
+</template>
diff --git a/app/assets/javascripts/projects/storage_counter/constants.js b/app/assets/javascripts/projects/storage_counter/constants.js
new file mode 100644
index 00000000000..d9b28abfbe7
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/constants.js
@@ -0,0 +1,61 @@
+import { s__, __ } from '~/locale';
+
+export const PROJECT_STORAGE_TYPES = [
+  {
+    id: 'buildArtifactsSize',
+    name: s__('UsageQuota|Artifacts'),
+    description: s__('UsageQuota|Pipeline artifacts and job artifacts, created with CI/CD.'),
+    warningMessage: s__(
+      'UsageQuota|There is a known issue with Artifact storage where the total could be incorrect for some projects. More details and progress are available in %{warningLinkStart}the epic%{warningLinkEnd}.',
+    ),
+    warningLink: 'https://gitlab.com/groups/gitlab-org/-/epics/5380',
+  },
+  {
+    id: 'lfsObjectsSize',
+    name: s__('UsageQuota|LFS Storage'),
+    description: s__('UsageQuota|Audio samples, videos, datasets, and graphics.'),
+  },
+  {
+    id: 'packagesSize',
+    name: s__('UsageQuota|Packages'),
+    description: s__('UsageQuota|Code packages and container images.'),
+  },
+  {
+    id: 'repositorySize',
+    name: s__('UsageQuota|Repository'),
+    description: s__('UsageQuota|Git repository, managed by the Gitaly service.'),
+  },
+  {
+    id: 'snippetsSize',
+    name: s__('UsageQuota|Snippets'),
+    description: s__('UsageQuota|Shared bits of code and text.'),
+  },
+  {
+    id: 'uploadsSize',
+    name: s__('UsageQuota|Uploads'),
+    description: s__('UsageQuota|File attachments and smaller design graphics.'),
+  },
+  {
+    id: 'wikiSize',
+    name: s__('UsageQuota|Wiki'),
+    description: s__('UsageQuota|Wiki content.'),
+  },
+];
+
+export const PROJECT_TABLE_LABELS = {
+  STORAGE_TYPE: s__('UsageQuota|Storage type'),
+  VALUE: s__('UsageQuota|Usage'),
+};
+
+export const ERROR_MESSAGE = s__(
+  'UsageQuota|Something went wrong while fetching project storage statistics',
+);
+
+export const LEARN_MORE_LABEL = s__('Learn more.');
+export const USAGE_QUOTAS_LABEL = s__('UsageQuota|Usage Quotas');
+export const HELP_LINK_ARIA_LABEL = s__('UsageQuota|%{linkTitle} help link');
+export const TOTAL_USAGE_DEFAULT_TEXT = __('N/A');
+export const TOTAL_USAGE_TITLE = s__('UsageQuota|Usage Breakdown');
+export const TOTAL_USAGE_SUBTITLE = s__(
+  'UsageQuota|Includes project registry, artifacts, packages, wiki, uploads and other items.',
+);
diff --git a/app/assets/javascripts/projects/storage_counter/index.js b/app/assets/javascripts/projects/storage_counter/index.js
new file mode 100644
index 00000000000..10668f08402
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/index.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import StorageCounterApp from './components/app.vue';
+
+Vue.use(VueApollo);
+
+export default (containerId = 'js-project-storage-count-app') => {
+  const el = document.getElementById(containerId);
+
+  if (!el) {
+    return false;
+  }
+
+  const {
+    projectPath,
+    usageQuotasHelpPagePath,
+    buildArtifactsHelpPagePath,
+    lfsObjectsHelpPagePath,
+    packagesHelpPagePath,
+    repositoryHelpPagePath,
+    snippetsHelpPagePath,
+    uploadsHelpPagePath,
+    wikiHelpPagePath,
+  } = el.dataset;
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
+  });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      projectPath,
+      helpLinks: {
+        usageQuotasHelpPagePath,
+        buildArtifactsHelpPagePath,
+        lfsObjectsHelpPagePath,
+        packagesHelpPagePath,
+        repositoryHelpPagePath,
+        snippetsHelpPagePath,
+        uploadsHelpPagePath,
+        wikiHelpPagePath,
+      },
+    },
+    render(createElement) {
+      return createElement(StorageCounterApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql b/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql
new file mode 100644
index 00000000000..a4f2c529522
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql
@@ -0,0 +1,16 @@
+query getProjectStorageCount($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    statistics {
+      buildArtifactsSize
+      pipelineArtifactsSize
+      lfsObjectsSize
+      packagesSize
+      repositorySize
+      snippetsSize
+      storageSize
+      uploadsSize
+      wikiSize
+    }
+  }
+}
diff --git a/app/assets/javascripts/projects/storage_counter/utils.js b/app/assets/javascripts/projects/storage_counter/utils.js
new file mode 100644
index 00000000000..cb26603fff5
--- /dev/null
+++ b/app/assets/javascripts/projects/storage_counter/utils.js
@@ -0,0 +1,40 @@
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { PROJECT_STORAGE_TYPES } from './constants';
+
+/**
+ * This method parses the results from `getProjectStorageCount` call.
+ *
+ * @param {Object} data graphql result
+ * @returns {Object}
+ */
+export const parseGetProjectStorageResults = (data, helpLinks) => {
+  const projectStatistics = data?.project?.statistics;
+  if (!projectStatistics) {
+    return {};
+  }
+  const { storageSize, ...storageStatistics } = projectStatistics;
+  const storageTypes = PROJECT_STORAGE_TYPES.reduce((types, currentType) => {
+    if (!storageStatistics[currentType.id]) {
+      return types;
+    }
+
+    const helpPathKey = currentType.id.replace(`Size`, `HelpPagePath`);
+    const helpPath = helpLinks[helpPathKey];
+
+    return types.concat({
+      storageType: {
+        ...currentType,
+        helpPath,
+      },
+      value: storageStatistics[currentType.id],
+    });
+  }, []);
+
+  return {
+    storage: {
+      totalUsage: numberToHumanSize(storageSize, 1),
+      storageTypes,
+    },
+    statistics: projectStatistics,
+  };
+};
diff --git a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
index 02e31d6fbb3..668cc10c454 100644
--- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
+++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { setCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+import { EVENT_LABEL, DISMISS_EVENT, CLICK_EVENT } from '../constants';
+
+const trackingMixin = Tracking.mixin({ label: EVENT_LABEL });
 
 export default {
   name: 'TerraformNotification',
@@ -15,37 +19,42 @@ export default {
   },
   components: {
     GlBanner,
+    UserCalloutDismisser,
   },
-  inject: ['terraformImagePath', 'bannerDismissedKey'],
-  data() {
-    return {
-      isVisible: true,
-    };
-  },
+  mixins: [trackingMixin],
+  inject: ['terraformImagePath'],
   computed: {
     docsUrl() {
-      return helpPagePath('user/infrastructure/terraform_state');
+      return helpPagePath('user/infrastructure/iac/terraform_state.md');
     },
   },
   methods: {
     handleClose() {
-      setCookie(this.bannerDismissedKey, true);
-      this.isVisible = false;
+      this.track(DISMISS_EVENT);
+      this.$refs.calloutDismisser.dismiss();
+    },
+    buttonClick() {
+      this.track(CLICK_EVENT);
     },
   },
 };
 </script>
 <template>
-  <div v-if="isVisible" class="gl-py-5">
-    <gl-banner
-      :title="$options.i18n.title"
-      :button-text="$options.i18n.buttonText"
-      :button-link="docsUrl"
-      :svg-path="terraformImagePath"
-      variant="promotion"
-      @close="handleClose"
-    >
-      <p>{{ $options.i18n.description }}</p>
-    </gl-banner>
-  </div>
+  <user-callout-dismisser ref="calloutDismisser" feature-name="terraform_notification_dismissed">
+    <template #default="{ shouldShowCallout }">
+      <div v-if="shouldShowCallout" class="gl-py-5">
+        <gl-banner
+          :title="$options.i18n.title"
+          :button-text="$options.i18n.buttonText"
+          :button-link="docsUrl"
+          :svg-path="terraformImagePath"
+          variant="promotion"
+          @primary="buttonClick"
+          @close="handleClose"
+        >
+          <p>{{ $options.i18n.description }}</p>
+        </gl-banner>
+      </div>
+    </template>
+  </user-callout-dismisser>
 </template>
diff --git a/app/assets/javascripts/projects/terraform_notification/constants.js b/app/assets/javascripts/projects/terraform_notification/constants.js
new file mode 100644
index 00000000000..029f40b2ab2
--- /dev/null
+++ b/app/assets/javascripts/projects/terraform_notification/constants.js
@@ -0,0 +1,3 @@
+export const EVENT_LABEL = 'terraform_banner';
+export const DISMISS_EVENT = 'dismiss_banner';
+export const CLICK_EVENT = 'click_button';
diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js
index 0a273247930..362e71ed902 100644
--- a/app/assets/javascripts/projects/terraform_notification/index.js
+++ b/app/assets/javascripts/projects/terraform_notification/index.js
@@ -1,12 +1,18 @@
 import Vue from 'vue';
-import { parseBoolean, getCookie } from '~/lib/utils/common_utils';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import TerraformNotification from './components/terraform_notification.vue';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
 export default () => {
   const el = document.querySelector('.js-terraform-notification');
-  const bannerDismissedKey = 'terraform_notification_dismissed';
 
-  if (!el || parseBoolean(getCookie(bannerDismissedKey))) {
+  if (!el) {
     return false;
   }
 
@@ -14,9 +20,9 @@ export default () => {
 
   return new Vue({
     el,
+    apolloProvider,
     provide: {
       terraformImagePath,
-      bannerDismissedKey,
     },
     render: (createElement) => createElement(TerraformNotification),
   });
diff --git a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index c1dae75801e..eecb3573046 100644
--- a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -85,7 +84,7 @@ export default {
       </p>
     </div>
     <div class="col-lg-9">
-      <p v-html="sectionDescription"></p>
+      <p v-html="sectionDescription /* eslint-disable-line vue/no-v-html */"></p>
       <gl-form-group :label="__('URL')" label-for="notify-url" label-class="label-bold">
         <div class="input-group">
           <gl-form-input id="notify-url" :readonly="true" :value="notifyUrl" />
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index d0d2c1400a7..d4b52860261 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -12,7 +12,7 @@ export default class ProtectedBranchCreate {
     this.hasLicense = options.hasLicense;
 
     this.$form = $('.js-new-protected-branch');
-    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+    this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
     this.currentProjectUserDefaults = {};
     this.buildDropdowns();
     this.$forcePushToggle = this.$form.find('.js-force-push-toggle');
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index 82963fe98fd..ce781c64006 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -149,8 +149,7 @@ export default {
     // This method is defined here instead of in `methods`
     // because we need to access the .cancel() method
     // lodash attaches to the function, which is
-    // made inaccessible by Vue. More info:
-    // https://stackoverflow.com/a/52988020/1063392
+    // made inaccessible by Vue.
     this.debouncedSearch = debounce(function search() {
       this.search();
     }, SEARCH_DEBOUNCE_MS);
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
index 68bca2fc6b9..3201ca1f443 100644
--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import $ from 'jquery';
 import { isEmpty } from 'lodash';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -103,7 +102,10 @@ export default {
       <evidence-block v-if="hasEvidence" :release="release" />
 
       <div ref="gfm-content" class="card-text gl-mt-3">
-        <div class="md" v-html="release.descriptionHtml"></div>
+        <div
+          class="md"
+          v-html="release.descriptionHtml /* eslint-disable-line vue/no-v-html */"
+        ></div>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/reports/components/issue_body.js b/app/assets/javascripts/reports/components/issue_body.js
index 6014d9d6ad8..04e72809e62 100644
--- a/app/assets/javascripts/reports/components/issue_body.js
+++ b/app/assets/javascripts/reports/components/issue_body.js
@@ -1,18 +1,16 @@
 import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
-import AccessibilityIssueBody from '../accessibility_report/components/accessibility_issue_body.vue';
-import CodequalityIssueBody from '../codequality_report/components/codequality_issue_body.vue';
-import TestIssueBody from '../grouped_test_report/components/test_issue_body.vue';
 
 export const components = {
-  AccessibilityIssueBody,
-  CodequalityIssueBody,
-  TestIssueBody,
+  AccessibilityIssueBody: () =>
+    import('../accessibility_report/components/accessibility_issue_body.vue'),
+  CodequalityIssueBody: () => import('../codequality_report/components/codequality_issue_body.vue'),
+  TestIssueBody: () => import('../grouped_test_report/components/test_issue_body.vue'),
 };
 
 export const componentNames = {
-  AccessibilityIssueBody: AccessibilityIssueBody.name,
-  CodequalityIssueBody: CodequalityIssueBody.name,
-  TestIssueBody: TestIssueBody.name,
+  AccessibilityIssueBody: 'AccessibilityIssueBody',
+  CodequalityIssueBody: 'CodequalityIssueBody',
+  TestIssueBody: 'TestIssueBody',
 };
 
 export const iconComponents = {
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 8871da8fbd7..918263bfb5c 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -53,11 +53,7 @@ export default {
 };
 </script>
 <template>
-  <li
-    :class="{ 'is-dismissed': issue.isDismissed }"
-    class="report-block-list-issue align-items-center"
-    data-qa-selector="report_item_row"
-  >
+  <li class="report-block-list-issue align-items-center" data-qa-selector="report_item_row">
     <component
       :is="iconComponent"
       v-if="showReportSectionStatusIcon"
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 665b0698cc0..1d79818cbe8 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -118,7 +118,7 @@ export default {
       return this.$apollo.queries.project.loading || this.isLoadingLegacyViewer;
     },
     isBinaryFileType() {
-      return this.isBinary || this.viewer.fileType === 'download';
+      return this.isBinary || this.blobInfo.simpleViewer?.fileType !== 'text';
     },
     blobInfo() {
       const nodes = this.project?.repository?.blobs?.nodes || [];
@@ -180,7 +180,7 @@ export default {
     <div v-if="blobInfo && !isLoading" class="file-holder">
       <blob-header
         :blob="blobInfo"
-        :hide-viewer-switcher="!hasRichViewer || isBinary"
+        :hide-viewer-switcher="!hasRichViewer || isBinaryFileType"
         :is-binary="isBinaryFileType"
         :active-viewer-type="viewer.type"
         :has-render-error="hasRenderError"
@@ -188,7 +188,7 @@ export default {
       >
         <template #actions>
           <blob-edit
-            :show-edit-button="!isBinary"
+            :show-edit-button="!isBinaryFileType"
             :edit-path="blobInfo.editBlobPath"
             :web-ide-path="blobInfo.ideEditPath"
           />
diff --git a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
new file mode 100644
index 00000000000..83d36209bb3
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
@@ -0,0 +1,19 @@
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-center gl-p-7 gl-bg-gray-50">
+    <img :src="url" :alt="alt" data-testid="image" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index 4e16b16041f..3b4f4eb51fe 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/app/assets/javascripts/repository/components/blob_viewers/index.js
@@ -6,6 +6,8 @@ export const loadViewer = (type) => {
       return () => import(/* webpackChunkName: 'blob_text_viewer' */ './text_viewer.vue');
     case 'download':
       return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue');
+    case 'image':
+      return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue');
     default:
       return null;
   }
@@ -23,5 +25,9 @@ export const viewerProps = (type, blob) => {
       filePath: blob.rawPath,
       fileSize: blob.rawSize,
     },
+    image: {
+      url: blob.rawPath,
+      alt: blob.name,
+    },
   }[type];
 };
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index a7176853819..5c713796bd6 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
@@ -125,7 +124,7 @@ export default {
             :href="commit.webPath"
             :class="{ 'font-italic': !commit.message }"
             class="commit-row-message item-title"
-            v-html="commit.titleHtml"
+            v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
           />
           <gl-button
             v-if="commit.descriptionHtml"
@@ -153,11 +152,14 @@ export default {
             v-if="commitDescription"
             :class="{ 'd-block': showDescription }"
             class="commit-row-description gl-mb-3"
-            v-html="commitDescription"
+            v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
           ></pre>
         </div>
         <div class="commit-actions flex-row">
-          <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div>
+          <div
+            v-if="commit.signatureHtml"
+            v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"
+          ></div>
           <div v-if="commit.pipeline" class="ci-status-link">
             <gl-link
               v-gl-tooltip.left
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index b74c2333148..54e67c5ab5c 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -60,7 +59,11 @@ export default {
     </div>
     <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about">
       <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
-      <div v-else-if="readme" ref="readme" v-html="readme.html"></div>
+      <div
+        v-else-if="readme"
+        ref="readme"
+        v-html="readme.html /* eslint-disable-line vue/no-v-html */"
+      ></div>
     </div>
   </article>
 </template>
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 69eefc807d7..10a30bd44b1 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -100,9 +100,9 @@ export default {
           />
           <template v-for="val in entries">
             <table-row
-              v-for="entry in val"
+              v-for="(entry, index) in val"
               :id="entry.id"
-              :key="`${entry.flatPath}-${entry.id}`"
+              :key="`${entry.flatPath}-${entry.id}-${index}`"
               :sha="entry.sha"
               :project-path="projectPath"
               :current-path="path"
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index fa358a75cc1..009dd19b4a5 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlBadge,
   GlLink,
@@ -11,6 +10,7 @@ import {
 } from '@gitlab/ui';
 import { escapeRegExp } from 'lodash';
 import filesQuery from 'shared_queries/repository/files.query.graphql';
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { TREE_PAGE_SIZE } from '~/repository/constants';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -154,7 +154,8 @@ export default {
       return this.isFolder ? this.loadFolder() : this.loadBlob();
     },
     loadFolder() {
-      this.apolloQuery(filesQuery, {
+      const query = this.glFeatures.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery;
+      this.apolloQuery(query, {
         projectPath: this.projectPath,
         ref: this.ref,
         path: this.path,
@@ -230,7 +231,7 @@ export default {
         :href="commit.commitPath"
         :title="commit.message"
         class="str-truncated-100 tree-commit-link"
-        v-html="commit.titleHtml"
+        v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
       />
       <gl-skeleton-loading v-else :lines="1" class="h-auto" />
     </td>
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index c861fb8dd06..5a8ead9ae8f 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -1,5 +1,6 @@
 <script>
 import filesQuery from 'shared_queries/repository/files.query.graphql';
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import createFlash from '~/flash';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __ } from '../../locale';
@@ -69,6 +70,9 @@ export default {
     hasShowMore() {
       return !this.clickedShowMore && this.pageLimitReached;
     },
+    paginatedTreeEnabled() {
+      return this.glFeatures.paginatedTreeGraphqlQuery;
+    },
   },
 
   watch: {
@@ -91,7 +95,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: filesQuery,
+          query: this.paginatedTreeEnabled ? paginatedTreeQuery : filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
@@ -104,13 +108,20 @@ export default {
           if (data.errors) throw data.errors;
           if (!data?.project?.repository || originalPath !== (this.path || '/')) return;
 
-          const pageInfo = this.hasNextPage(data.project.repository.tree);
+          const pageInfo = this.paginatedTreeEnabled
+            ? data.project.repository.paginatedTree.pageInfo
+            : this.hasNextPage(data.project.repository.tree);
 
           this.isLoadingFiles = false;
           this.entries = Object.keys(this.entries).reduce(
             (acc, key) => ({
               ...acc,
-              [key]: this.normalizeData(key, data.project.repository.tree[key].edges),
+              [key]: this.normalizeData(
+                key,
+                this.paginatedTreeEnabled
+                  ? data.project.repository.paginatedTree.nodes[0][key]
+                  : data.project.repository.tree[key].edges,
+              ),
             }),
             {},
           );
@@ -132,7 +143,9 @@ export default {
         });
     },
     normalizeData(key, data) {
-      return this.entries[key].concat(data.map(({ node }) => node));
+      return this.entries[key].concat(
+        this.paginatedTreeEnabled ? data.nodes : data.map(({ node }) => node),
+      );
     },
     hasNextPage(data) {
       return []
diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js
index b536bcb1875..93032bf17e2 100644
--- a/app/assets/javascripts/repository/constants.js
+++ b/app/assets/javascripts/repository/constants.js
@@ -11,3 +11,5 @@ export const TOGGLE_CREATE_MR_LABEL = __('Start a new merge request with these c
 
 export const COMMIT_MESSAGE_SUBJECT_MAX_LENGTH = 52;
 export const COMMIT_MESSAGE_BODY_MAX_LENGTH = 72;
+
+export const LIMITED_CONTAINER_WIDTH_CLASS = 'limit-container-width';
diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js
index ffc260ec84f..a2ddcbf0e4c 100644
--- a/app/assets/javascripts/repository/mixins/preload.js
+++ b/app/assets/javascripts/repository/mixins/preload.js
@@ -1,4 +1,5 @@
 import filesQuery from 'shared_queries/repository/files.query.graphql';
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import projectPathQuery from '../queries/project_path.query.graphql';
 import getRefMixin from './get_ref';
 
@@ -21,7 +22,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: filesQuery,
+          query: gon.features.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
diff --git a/app/assets/javascripts/repository/pages/blob.vue b/app/assets/javascripts/repository/pages/blob.vue
index 2645b294096..c09e2133936 100644
--- a/app/assets/javascripts/repository/pages/blob.vue
+++ b/app/assets/javascripts/repository/pages/blob.vue
@@ -3,11 +3,25 @@
 // https://gitlab.com/gitlab-org/gitlab/-/issues/323200
 
 import BlobContentViewer from '../components/blob_content_viewer.vue';
+import { LIMITED_CONTAINER_WIDTH_CLASS } from '../constants';
 
 export default {
   components: {
     BlobContentViewer,
   },
+  beforeRouteEnter(to, from, next) {
+    next(({ $options }) => {
+      $options.limitedContainerElements.forEach((el) =>
+        el.classList.remove(LIMITED_CONTAINER_WIDTH_CLASS),
+      );
+    });
+  },
+  beforeRouteLeave(to, from, next) {
+    this.$options.limitedContainerElements.forEach((el) =>
+      el.classList.add(LIMITED_CONTAINER_WIDTH_CLASS),
+    );
+    next();
+  },
   props: {
     path: {
       type: String,
@@ -18,6 +32,7 @@ export default {
       required: true,
     },
   },
+  limitedContainerElements: document.querySelectorAll(`.${LIMITED_CONTAINER_WIDTH_CLASS}`),
 };
 </script>
 
diff --git a/app/assets/javascripts/rest_api.js b/app/assets/javascripts/rest_api.js
index 3e9e3e6f265..61fe89f4f7e 100644
--- a/app/assets/javascripts/rest_api.js
+++ b/app/assets/javascripts/rest_api.js
@@ -4,7 +4,7 @@ export * from './api/user_api';
 export * from './api/markdown_api';
 
 // Note: It's not possible to spy on methods imported from this file in
-// Jest tests. See https://stackoverflow.com/a/53307822/1063392.
+// Jest tests.
 // As a workaround, in Jest tests, import the methods from the file
 // in which they are defined:
 //
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 36f5e6f4ce1..23254fcc2eb 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
-import { hide } from '~/tooltips';
+import { hide, fixTitle } from '~/tooltips';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { sprintf, s__, __ } from './locale';
@@ -75,6 +75,9 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
   }
 
   $this.attr('data-original-title', tooltipLabel);
+  $this.attr('title', tooltipLabel);
+  fixTitle($this);
+  hide($this);
 
   if (!triggered) {
     Cookies.set('collapsed_gutter', $('.right-sidebar').hasClass('right-sidebar-collapsed'));
@@ -99,7 +102,7 @@ Sidebar.prototype.toggleTodo = function (e) {
     })
     .catch(() =>
       createFlash({
-        message: sprintf(__('There was an error %{message} todo.'), {
+        message: sprintf(__('There was an error %{message} to-do item.'), {
           message:
             ajaxType === 'post' ? s__('RightSidebar|adding a') : s__('RightSidebar|deleting the'),
         }),
diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 23ecee449a4..fedd2519958 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -2,12 +2,16 @@
 import createFlash from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
+import { formatNumber, sprintf, __ } from '~/locale';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
 import RunnerList from '../components/runner_list.vue';
 import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
 import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeHelp from '../components/runner_type_help.vue';
-import { INSTANCE_TYPE, I18N_FETCH_ERROR } from '../constants';
+import { statusTokenConfig } from '../components/search_tokens/status_token_config';
+import { tagTokenConfig } from '../components/search_tokens/tag_token_config';
+import { typeTokenConfig } from '../components/search_tokens/type_token_config';
+import { ADMIN_FILTERED_SEARCH_NAMESPACE, INSTANCE_TYPE, I18N_FETCH_ERROR } from '../constants';
 import getRunnersQuery from '../graphql/get_runners.query.graphql';
 import {
   fromUrlQueryToSearch,
@@ -78,6 +82,21 @@ export default {
     noRunnersFound() {
       return !this.runnersLoading && !this.runners.items.length;
     },
+    activeRunnersMessage() {
+      return sprintf(__('Runners currently online: %{active_runners_count}'), {
+        active_runners_count: formatNumber(this.activeRunnersCount),
+      });
+    },
+    searchTokens() {
+      return [
+        statusTokenConfig,
+        typeTokenConfig,
+        {
+          ...tagTokenConfig,
+          recentTokenValuesStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
+        },
+      ];
+    },
   },
   watch: {
     search: {
@@ -99,6 +118,7 @@ export default {
       captureException({ error, component: this.$options.name });
     },
   },
+  filteredSearchNamespace: ADMIN_FILTERED_SEARCH_NAMESPACE,
   INSTANCE_TYPE,
 };
 </script>
@@ -118,9 +138,13 @@ export default {
 
     <runner-filtered-search-bar
       v-model="search"
-      namespace="admin_runners"
-      :active-runners-count="activeRunnersCount"
-    />
+      :tokens="searchTokens"
+      :namespace="$options.filteredSearchNamespace"
+    >
+      <template #runner-count>
+        {{ activeRunnersMessage }}
+      </template>
+    </runner-filtered-search-bar>
 
     <div v-if="noRunnersFound" class="gl-text-center gl-p-5">
       {{ __('No runners found') }}
diff --git a/app/assets/javascripts/runner/components/runner_filtered_search_bar.vue b/app/assets/javascripts/runner/components/runner_filtered_search_bar.vue
index e14b3b17fa8..e04ca8ddca0 100644
--- a/app/assets/javascripts/runner/components/runner_filtered_search_bar.vue
+++ b/app/assets/javascripts/runner/components/runner_filtered_search_bar.vue
@@ -1,27 +1,8 @@
 <script>
 import { cloneDeep } from 'lodash';
-import { formatNumber, sprintf, __, s__ } from '~/locale';
-import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import { __ } from '~/locale';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
-import {
-  STATUS_ACTIVE,
-  STATUS_PAUSED,
-  STATUS_ONLINE,
-  STATUS_OFFLINE,
-  STATUS_NOT_CONNECTED,
-  INSTANCE_TYPE,
-  GROUP_TYPE,
-  PROJECT_TYPE,
-  CREATED_DESC,
-  CREATED_ASC,
-  CONTACTED_DESC,
-  CONTACTED_ASC,
-  PARAM_KEY_STATUS,
-  PARAM_KEY_RUNNER_TYPE,
-  PARAM_KEY_TAG,
-} from '../constants';
-import TagToken from './search_tokens/tag_token.vue';
+import { CREATED_DESC, CREATED_ASC, CONTACTED_DESC, CONTACTED_ASC } from '../constants';
 
 const sortOptions = [
   {
@@ -58,10 +39,6 @@ export default {
       type: String,
       required: true,
     },
-    activeRunnersCount: {
-      type: Number,
-      required: true,
-    },
   },
   data() {
     // filtered_search_bar_root.vue may mutate the inital
@@ -73,62 +50,6 @@ export default {
       initialSortBy: sort,
     };
   },
-  computed: {
-    searchTokens() {
-      return [
-        {
-          icon: 'status',
-          title: __('Status'),
-          type: PARAM_KEY_STATUS,
-          token: BaseToken,
-          unique: true,
-          options: [
-            { value: STATUS_ACTIVE, title: s__('Runners|Active') },
-            { value: STATUS_PAUSED, title: s__('Runners|Paused') },
-            { value: STATUS_ONLINE, title: s__('Runners|Online') },
-            { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
-
-            // Added extra quotes in this title to avoid splitting this value:
-            // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438
-            { value: STATUS_NOT_CONNECTED, title: `"${s__('Runners|Not connected')}"` },
-          ],
-          // TODO In principle we could support more complex search rules,
-          // this can be added to a separate issue.
-          operators: OPERATOR_IS_ONLY,
-        },
-
-        {
-          icon: 'file-tree',
-          title: __('Type'),
-          type: PARAM_KEY_RUNNER_TYPE,
-          token: BaseToken,
-          unique: true,
-          options: [
-            { value: INSTANCE_TYPE, title: s__('Runners|instance') },
-            { value: GROUP_TYPE, title: s__('Runners|group') },
-            { value: PROJECT_TYPE, title: s__('Runners|project') },
-          ],
-          // TODO We should support more complex search rules,
-          // search for multiple states (OR) or have NOT operators
-          operators: OPERATOR_IS_ONLY,
-        },
-
-        {
-          icon: 'tag',
-          title: s__('Runners|Tags'),
-          type: PARAM_KEY_TAG,
-          token: TagToken,
-          recentTokenValuesStorageKey: `${this.namespace}-recent-tags`,
-          operators: OPERATOR_IS_ONLY,
-        },
-      ];
-    },
-    activeRunnersMessage() {
-      return sprintf(__('Runners currently online: %{active_runners_count}'), {
-        active_runners_count: formatNumber(this.activeRunnersCount),
-      });
-    },
-  },
   methods: {
     onFilter(filters) {
       const { sort } = this.value;
@@ -161,12 +82,13 @@ export default {
       :sort-options="$options.sortOptions"
       :initial-filter-value="initialFilterValue"
       :initial-sort-by="initialSortBy"
-      :tokens="searchTokens"
       :search-input-placeholder="__('Search or filter results...')"
       data-testid="runners-filtered-search"
       @onFilter="onFilter"
       @onSort="onSort"
     />
-    <div class="gl-text-right" data-testid="active-runners-message">{{ activeRunnersMessage }}</div>
+    <div class="gl-text-right" data-testid="runner-count">
+      <slot name="runner-count"></slot>
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue
index a5bc1680852..9a6fc07f6dd 100644
--- a/app/assets/javascripts/runner/components/runner_update_form.vue
+++ b/app/assets/javascripts/runner/components/runner_update_form.vue
@@ -135,9 +135,9 @@ export default {
     </gl-form-checkbox>
 
     <gl-form-checkbox
+      v-if="canBeLockedToProject"
       v-model="model.locked"
       data-testid="runner-field-locked"
-      :disabled="!canBeLockedToProject"
     >
       {{ __('Lock to current projects') }}
       <template #help>
diff --git a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
new file mode 100644
index 00000000000..03dff5e61a5
--- /dev/null
+++ b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
@@ -0,0 +1,32 @@
+import { __, s__ } from '~/locale';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import {
+  STATUS_ACTIVE,
+  STATUS_PAUSED,
+  STATUS_ONLINE,
+  STATUS_OFFLINE,
+  STATUS_NOT_CONNECTED,
+  PARAM_KEY_STATUS,
+} from '../../constants';
+
+export const statusTokenConfig = {
+  icon: 'status',
+  title: __('Status'),
+  type: PARAM_KEY_STATUS,
+  token: BaseToken,
+  unique: true,
+  options: [
+    { value: STATUS_ACTIVE, title: s__('Runners|Active') },
+    { value: STATUS_PAUSED, title: s__('Runners|Paused') },
+    { value: STATUS_ONLINE, title: s__('Runners|Online') },
+    { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
+
+    // Added extra quotes in this title to avoid splitting this value:
+    // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438
+    { value: STATUS_NOT_CONNECTED, title: `"${s__('Runners|Not connected')}"` },
+  ],
+  // TODO In principle we could support more complex search rules,
+  // this can be added to a separate issue.
+  operators: OPERATOR_IS_ONLY,
+};
diff --git a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
index 51fae60b6b7..ab67ac608e2 100644
--- a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
+++ b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
@@ -33,6 +33,7 @@ export default {
       // The API should
       // 1) scope to the rights of the user
       // 2) stay up to date to the removal of old tags
+      // 3) consider the scope of search, like searching within the tags of a group
       // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333796
       return axios
         .get(TAG_SUGGESTIONS_PATH, {
diff --git a/app/assets/javascripts/runner/components/search_tokens/tag_token_config.js b/app/assets/javascripts/runner/components/search_tokens/tag_token_config.js
new file mode 100644
index 00000000000..fdeba714385
--- /dev/null
+++ b/app/assets/javascripts/runner/components/search_tokens/tag_token_config.js
@@ -0,0 +1,12 @@
+import { s__ } from '~/locale';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import { PARAM_KEY_TAG } from '../../constants';
+import TagToken from './tag_token.vue';
+
+export const tagTokenConfig = {
+  icon: 'tag',
+  title: s__('Runners|Tags'),
+  type: PARAM_KEY_TAG,
+  token: TagToken,
+  operators: OPERATOR_IS_ONLY,
+};
diff --git a/app/assets/javascripts/runner/components/search_tokens/type_token_config.js b/app/assets/javascripts/runner/components/search_tokens/type_token_config.js
new file mode 100644
index 00000000000..1da61c53386
--- /dev/null
+++ b/app/assets/javascripts/runner/components/search_tokens/type_token_config.js
@@ -0,0 +1,20 @@
+import { __, s__ } from '~/locale';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE, PARAM_KEY_RUNNER_TYPE } from '../../constants';
+
+export const typeTokenConfig = {
+  icon: 'file-tree',
+  title: __('Type'),
+  type: PARAM_KEY_RUNNER_TYPE,
+  token: BaseToken,
+  unique: true,
+  options: [
+    { value: INSTANCE_TYPE, title: s__('Runners|instance') },
+    { value: GROUP_TYPE, title: s__('Runners|group') },
+    { value: PROJECT_TYPE, title: s__('Runners|project') },
+  ],
+  // TODO We should support more complex search rules,
+  // search for multiple states (OR) or have NOT operators
+  operators: OPERATOR_IS_ONLY,
+};
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index 2822882e0cc..46e55b322c7 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -2,6 +2,7 @@ import { s__ } from '~/locale';
 
 export const RUNNER_PAGE_SIZE = 20;
 export const RUNNER_JOB_COUNT_LIMIT = 1000;
+export const GROUP_RUNNER_COUNT_LIMIT = 1000;
 
 export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.');
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
@@ -50,3 +51,8 @@ export const CONTACTED_DESC = 'CONTACTED_DESC'; // TODO Add this to the API
 export const CONTACTED_ASC = 'CONTACTED_ASC';
 
 export const DEFAULT_SORT = CREATED_DESC;
+
+// Local storage namespaces
+
+export const ADMIN_FILTERED_SEARCH_NAMESPACE = 'admin_runners';
+export const GROUP_FILTERED_SEARCH_NAMESPACE = 'group_runners';
diff --git a/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
new file mode 100644
index 00000000000..a601ee8d611
--- /dev/null
+++ b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
@@ -0,0 +1,35 @@
+#import "~/runner/graphql/runner_node.fragment.graphql"
+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+
+query getGroupRunners(
+  $groupFullPath: ID!
+  $before: String
+  $after: String
+  $first: Int
+  $last: Int
+  $status: CiRunnerStatus
+  $type: CiRunnerType
+  $search: String
+  $sort: CiRunnerSort
+) {
+  group(fullPath: $groupFullPath) {
+    runners(
+      membership: DESCENDANTS
+      before: $before
+      after: $after
+      first: $first
+      last: $last
+      status: $status
+      type: $type
+      search: $search
+      sort: $sort
+    ) {
+      nodes {
+        ...RunnerNode
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
index 07bbf60c453..42e1a9e1de9 100644
--- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
@@ -1,18 +1,135 @@
 <script>
+import createFlash from '~/flash';
+import { fetchPolicies } from '~/lib/graphql';
+import { updateHistory } from '~/lib/utils/url_utility';
+import { formatNumber, sprintf, s__ } from '~/locale';
+import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
+import RunnerList from '../components/runner_list.vue';
 import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
+import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeHelp from '../components/runner_type_help.vue';
-import { GROUP_TYPE } from '../constants';
+import { statusTokenConfig } from '../components/search_tokens/status_token_config';
+import { typeTokenConfig } from '../components/search_tokens/type_token_config';
+import {
+  I18N_FETCH_ERROR,
+  GROUP_FILTERED_SEARCH_NAMESPACE,
+  GROUP_TYPE,
+  GROUP_RUNNER_COUNT_LIMIT,
+} from '../constants';
+import getGroupRunnersQuery from '../graphql/get_group_runners.query.graphql';
+import {
+  fromUrlQueryToSearch,
+  fromSearchToUrl,
+  fromSearchToVariables,
+} from '../runner_search_utils';
+import { captureException } from '../sentry_utils';
 
 export default {
+  name: 'GroupRunnersApp',
   components: {
+    RunnerFilteredSearchBar,
+    RunnerList,
     RunnerManualSetupHelp,
     RunnerTypeHelp,
+    RunnerPagination,
   },
   props: {
     registrationToken: {
       type: String,
       required: true,
     },
+    groupFullPath: {
+      type: String,
+      required: true,
+    },
+    groupRunnersLimitedCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      search: fromUrlQueryToSearch(),
+      runners: {
+        items: [],
+        pageInfo: {},
+      },
+    };
+  },
+  apollo: {
+    runners: {
+      query: getGroupRunnersQuery,
+      // Runners can be updated by users directly in this list.
+      // A "cache and network" policy prevents outdated filtered
+      // results.
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      variables() {
+        return this.variables;
+      },
+      update(data) {
+        const { runners } = data?.group || {};
+        return {
+          items: runners?.nodes || [],
+          pageInfo: runners?.pageInfo || {},
+        };
+      },
+      error(error) {
+        createFlash({ message: I18N_FETCH_ERROR });
+
+        this.reportToSentry(error);
+      },
+    },
+  },
+  computed: {
+    variables() {
+      return {
+        ...fromSearchToVariables(this.search),
+        groupFullPath: this.groupFullPath,
+      };
+    },
+    runnersLoading() {
+      return this.$apollo.queries.runners.loading;
+    },
+    noRunnersFound() {
+      return !this.runnersLoading && !this.runners.items.length;
+    },
+    groupRunnersCount() {
+      if (this.groupRunnersLimitedCount > GROUP_RUNNER_COUNT_LIMIT) {
+        return `${formatNumber(GROUP_RUNNER_COUNT_LIMIT)}+`;
+      }
+      return formatNumber(this.groupRunnersLimitedCount);
+    },
+    runnerCountMessage() {
+      return sprintf(s__('Runners|Runners in this group: %{groupRunnersCount}'), {
+        groupRunnersCount: this.groupRunnersCount,
+      });
+    },
+    searchTokens() {
+      return [statusTokenConfig, typeTokenConfig];
+    },
+    filteredSearchNamespace() {
+      return `${GROUP_FILTERED_SEARCH_NAMESPACE}/${this.groupFullPath}`;
+    },
+  },
+  watch: {
+    search: {
+      deep: true,
+      handler() {
+        // TODO Implement back button reponse using onpopstate
+        updateHistory({
+          url: fromSearchToUrl(this.search),
+          title: document.title,
+        });
+      },
+    },
+  },
+  errorCaptured(error) {
+    this.reportToSentry(error);
+  },
+  methods: {
+    reportToSentry(error) {
+      captureException({ error, component: this.$options.name });
+    },
   },
   GROUP_TYPE,
 };
@@ -31,5 +148,23 @@ export default {
         />
       </div>
     </div>
+
+    <runner-filtered-search-bar
+      v-model="search"
+      :tokens="searchTokens"
+      :namespace="filteredSearchNamespace"
+    >
+      <template #runner-count>
+        {{ runnerCountMessage }}
+      </template>
+    </runner-filtered-search-bar>
+
+    <div v-if="noRunnersFound" class="gl-text-center gl-p-5">
+      {{ __('No runners found') }}
+    </div>
+    <template v-else>
+      <runner-list :runners="runners.items" :loading="runnersLoading" />
+      <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/group_runners/index.js b/app/assets/javascripts/runner/group_runners/index.js
index e14c583d73e..9545764c68d 100644
--- a/app/assets/javascripts/runner/group_runners/index.js
+++ b/app/assets/javascripts/runner/group_runners/index.js
@@ -12,7 +12,13 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
     return null;
   }
 
-  const { registrationToken, groupId } = el.dataset;
+  const {
+    registrationToken,
+    runnerInstallHelpPage,
+    groupId,
+    groupFullPath,
+    groupRunnersLimitedCount,
+  } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(
@@ -27,12 +33,15 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
     el,
     apolloProvider,
     provide: {
+      runnerInstallHelpPage,
       groupId,
     },
     render(h) {
       return h(GroupRunnersApp, {
         props: {
           registrationToken,
+          groupFullPath,
+          groupRunnersLimitedCount: parseInt(groupRunnersLimitedCount, 10),
         },
       });
     },
diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js
index 65f75eb11ac..0a817ea0acf 100644
--- a/app/assets/javascripts/runner/runner_search_utils.js
+++ b/app/assets/javascripts/runner/runner_search_utils.js
@@ -43,7 +43,6 @@ export const fromUrlQueryToSearch = (query = window.location.search) => {
       urlQueryToFilter(query, {
         filterNamesAllowList: [PARAM_KEY_STATUS, PARAM_KEY_RUNNER_TYPE, PARAM_KEY_TAG],
         filteredSearchTermKey: PARAM_KEY_SEARCH,
-        legacySpacesDecode: false,
       }),
     ),
     sort: params[PARAM_KEY_SORT] || DEFAULT_SORT,
diff --git a/app/assets/javascripts/search/highlight_blob_search_result.js b/app/assets/javascripts/search/highlight_blob_search_result.js
index c553d5b14a0..07967434f37 100644
--- a/app/assets/javascripts/search/highlight_blob_search_result.js
+++ b/app/assets/javascripts/search/highlight_blob_search_result.js
@@ -2,7 +2,7 @@ export default (search = '') => {
   const highlightLineClass = 'hll';
   const contentBody = document.getElementById('content-body');
   const searchTerm = search.toLowerCase();
-  const blobs = contentBody.querySelectorAll('.blob-result');
+  const blobs = contentBody.querySelectorAll('.js-blob-result');
 
   blobs.forEach((blob) => {
     const lines = blob.querySelectorAll('.line');
diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js
index ee5e778f63d..be64a9278e3 100644
--- a/app/assets/javascripts/search/store/actions.js
+++ b/app/assets/javascripts/search/store/actions.js
@@ -40,7 +40,7 @@ export const fetchProjects = ({ commit, state }, search) => {
     );
   } else {
     // The .catch() is due to the API method not handling a rejection properly
-    Api.projects(search, { order_by: 'id' }, callback).catch(() => {
+    Api.projects(search, { order_by: 'similarity' }, callback).catch(() => {
       callback();
     });
   }
diff --git a/app/assets/javascripts/search/store/utils.js b/app/assets/javascripts/search/store/utils.js
index b7d97213594..b00b9bb0f2e 100644
--- a/app/assets/javascripts/search/store/utils.js
+++ b/app/assets/javascripts/search/store/utils.js
@@ -6,7 +6,7 @@ function extractKeys(object, keyList) {
 }
 
 export const loadDataFromLS = (key) => {
-  if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (!AccessorUtilities.canUseLocalStorage()) {
     return [];
   }
 
@@ -20,7 +20,7 @@ export const loadDataFromLS = (key) => {
 };
 
 export const setFrequentItemToLS = (key, data, itemData) => {
-  if (!AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (!AccessorUtilities.canUseLocalStorage()) {
     return [];
   }
 
diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index ebe0138f046..6a282df99bf 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -10,6 +10,7 @@ import {
   REPORT_TYPE_CONTAINER_SCANNING,
   REPORT_TYPE_CLUSTER_IMAGE_SCANNING,
   REPORT_TYPE_COVERAGE_FUZZING,
+  REPORT_TYPE_CORPUS_MANAGEMENT,
   REPORT_TYPE_API_FUZZING,
   REPORT_TYPE_LICENSE_COMPLIANCE,
 } from '~/vue_shared/security_reports/constants';
@@ -104,6 +105,12 @@ export const COVERAGE_FUZZING_CONFIG_HELP_PATH = helpPagePath(
   { anchor: 'configuration' },
 );
 
+export const CORPUS_MANAGEMENT_NAME = __('Corpus Management');
+export const CORPUS_MANAGEMENT_DESCRIPTION = s__(
+  'SecurityConfiguration|Manage corpus files used as mutation sources in coverage fuzzing.',
+);
+export const CORPUS_MANAGEMENT_CONFIG_TEXT = s__('SecurityConfiguration|Manage corpus');
+
 export const API_FUZZING_NAME = __('API Fuzzing');
 export const API_FUZZING_DESCRIPTION = __('Find bugs in your code with API fuzzing.');
 export const API_FUZZING_HELP_PATH = helpPagePath('user/application_security/api_fuzzing/index');
@@ -202,6 +209,14 @@ export const securityFeatures = [
     helpPath: COVERAGE_FUZZING_HELP_PATH,
     configurationHelpPath: COVERAGE_FUZZING_CONFIG_HELP_PATH,
     type: REPORT_TYPE_COVERAGE_FUZZING,
+    secondary: gon?.features?.corpusManagement
+      ? {
+          type: REPORT_TYPE_CORPUS_MANAGEMENT,
+          name: CORPUS_MANAGEMENT_NAME,
+          description: CORPUS_MANAGEMENT_DESCRIPTION,
+          configurationText: CORPUS_MANAGEMENT_CONFIG_TEXT,
+        }
+      : {},
   },
 ];
 
diff --git a/app/assets/javascripts/sentry/sentry_config.js b/app/assets/javascripts/sentry/sentry_config.js
index a3a2c794a67..8f3c4c644bf 100644
--- a/app/assets/javascripts/sentry/sentry_config.js
+++ b/app/assets/javascripts/sentry/sentry_config.js
@@ -19,7 +19,6 @@ const IGNORE_ERRORS = [
   'fb_xd_fragment',
   // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
   // reduce this. (thanks @acdha)
-  // See http://stackoverflow.com/questions/4113268
   'bmi_SafeAddOnload',
   'EBCallBackMessageReceived',
   // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index e522e3ff408..b1c8f6ef22e 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import {
   GlToast,
   GlModal,
@@ -8,6 +7,7 @@ import {
   GlFormCheckbox,
   GlDropdown,
   GlDropdownItem,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import $ from 'jquery';
 import Vue from 'vue';
@@ -49,6 +49,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -234,6 +235,7 @@ export default {
     },
   },
   statusTimeRanges,
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -267,7 +269,7 @@ export default {
               @click="setEmoji"
             >
               <template #button-content>
-                <span v-html="emojiTag"></span>
+                <span v-safe-html:[$options.safeHtmlConfig]="emojiTag"></span>
                 <span
                   v-show="noEmoji"
                   class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
@@ -289,7 +291,7 @@ export default {
               class="js-toggle-emoji-menu emoji-menu-toggle-button btn"
               @click="showEmojiMenu"
             >
-              <span v-html="emojiTag"></span>
+              <span v-safe-html:[$options.safeHtmlConfig]="emojiTag"></span>
               <span
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index d9c5edc91f1..f98aa0dc77d 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -53,7 +53,7 @@ export default {
       class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
       href="#"
       data-test-id="edit-link"
-      data-track-event="click_edit_button"
+      data-track-action="click_edit_button"
       data-track-label="right_sidebar"
       data-track-property="assignee"
     >
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
index 1dd05d3886e..1b28ba2afd1 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue
@@ -3,7 +3,6 @@ import { GlDropdownItem } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import Vue from 'vue';
 import createFlash from '~/flash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
 import { __, n__ } from '~/locale';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
@@ -173,7 +172,7 @@ export default {
         })
         .then(({ data }) => {
           this.$emit('assignees-updated', {
-            id: getIdFromGraphQLId(data.issuableSetAssignees.issuable.id),
+            id: data.issuableSetAssignees.issuable.id,
             assignees: data.issuableSetAssignees.issuable.assignees.nodes,
           });
           return data;
diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
index 55179947756..9fdf941579d 100644
--- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
+++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
@@ -144,16 +144,11 @@ export default {
     v-if="glFeatures.labelsWidget"
     class="block labels js-labels-block"
     :allow-label-remove="allowLabelEdit"
-    :allow-label-create="allowLabelCreate"
-    :allow-label-edit="allowLabelEdit"
     :allow-multiselect="true"
-    :allow-scoped-labels="allowScopedLabels"
     :footer-create-label-title="__('Create project label')"
     :footer-manage-label-title="__('Manage project labels')"
     :labels-create-title="__('Create project label')"
-    :labels-fetch-path="labelsFetchPath"
     :labels-filter-base-path="projectIssuesPath"
-    :labels-manage-path="labelsManagePath"
     :labels-select-in-progress="isLabelsSelectInProgress"
     :selected-labels="selectedLabels"
     :variant="$options.variant"
diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
index 19543d0927a..cb49f329f7e 100644
--- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue
@@ -93,7 +93,7 @@ export default {
         class="float-right lock-edit btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary gl-mr-n2"
         href="#"
         data-testid="edit-link"
-        data-track-event="click_edit_button"
+        data-track-action="click_edit_button"
         data-track-label="right_sidebar"
         data-track-property="lock_issue"
         @click.prevent="toggleForm"
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue
index 39f72b251c7..a09138a708b 100644
--- a/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants_widget.vue
@@ -56,6 +56,11 @@ export default {
       return this.$apollo.queries.participants.loading;
     },
   },
+  methods: {
+    toggleSidebar() {
+      this.$emit('toggleSidebar');
+    },
+  },
 };
 </script>
 
@@ -66,5 +71,6 @@ export default {
     :number-of-less-participants="7"
     :lazy="false"
     class="block participants"
+    @toggleSidebar="toggleSidebar"
   />
 </template>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
index 1243603805a..367dcdb961b 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
@@ -40,7 +40,7 @@ export default {
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link btn gl-text-gray-900! gl-ml-auto hide-collapsed btn-default btn-sm gl-button btn-default-tertiary float-right"
       href="#"
-      data-track-event="click_edit_button"
+      data-track-action="click_edit_button"
       data-track-label="right_sidebar"
       data-track-property="reviewer"
     >
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 8ccc0102c3d..8f4d5406da8 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -369,6 +369,7 @@ export default {
         :text="dropdownText"
         :loading="loading"
         class="gl-w-full"
+        toggle-class="gl-max-w-100"
         @shown="setFocus"
       >
         <gl-search-box-by-type ref="search" v-model="searchTerm" />
diff --git a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
index 89aa03fd954..22adbd79ef6 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
@@ -136,7 +136,7 @@ export default {
         size="small"
         class="gl-text-gray-900! gl-ml-auto hide-collapsed gl-mr-n2"
         data-testid="edit-button"
-        :data-track-event="tracking.event"
+        :data-track-action="tracking.event"
         :data-track-label="tracking.label"
         :data-track-property="tracking.property"
         data-qa-selector="edit_link"
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
index 33c6ac6e2ba..db2197ec65e 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { sprintf, s__ } from '~/locale';
 
 export default {
@@ -27,5 +26,5 @@ export default {
 </script>
 
 <template>
-  <div data-testid="spentOnlyPane" v-html="timeSpent"></div>
+  <div data-testid="spentOnlyPane" v-html="timeSpent /* eslint-disable-line vue/no-v-html */"></div>
 </template>
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 031472a7d20..10ab80f4ec2 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createFlash from '~/flash';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
@@ -13,7 +12,6 @@ import {
   isInIncidentPage,
   parseBoolean,
 } from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
 import CollapsedAssigneeList from '~/sidebar/components/assignees/collapsed_assignee_list.vue';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
@@ -258,6 +256,8 @@ export function mountSidebarLabels() {
       allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
       initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
       variant: DropdownVariant.Sidebar,
+      canUpdate: parseBoolean(el.dataset.canEdit),
+      isClassicSidebar: true,
     },
     render: (createElement) => createElement(SidebarLabels),
   });
@@ -361,10 +361,10 @@ function mountReferenceComponent() {
   });
 }
 
-function mountLockComponent() {
+function mountLockComponent(store) {
   const el = document.getElementById('js-lock-entry-point');
 
-  if (!el) {
+  if (!el || !store) {
     return;
   }
 
@@ -373,37 +373,20 @@ function mountLockComponent() {
   const dataNode = document.getElementById('js-lock-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  let importStore;
-  if (isInIssuePage() || isInIncidentPage()) {
-    importStore = import(/* webpackChunkName: 'notesStore' */ '~/notes/stores').then(
-      ({ store }) => store,
-    );
-  } else {
-    importStore = import(/* webpackChunkName: 'mrNotesStore' */ '~/mr_notes/stores').then(
-      (store) => store.default,
-    );
-  }
-
-  importStore
-    .then(
-      (store) =>
-        new Vue({
-          el,
-          store,
-          provide: {
-            fullPath,
-          },
-          render: (createElement) =>
-            createElement(IssuableLockForm, {
-              props: {
-                isEditable: initialData.is_editable,
-              },
-            }),
-        }),
-    )
-    .catch(() => {
-      createFlash({ message: __('Failed to load sidebar lock status') });
-    });
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    store,
+    provide: {
+      fullPath,
+    },
+    render: (createElement) =>
+      createElement(IssuableLockForm, {
+        props: {
+          isEditable: initialData.is_editable,
+        },
+      }),
+  });
 }
 
 function mountParticipantsComponent() {
@@ -535,7 +518,7 @@ function mountCopyEmailComponent() {
 const isAssigneesWidgetShown =
   (isInIssuePage() || isInDesignPage()) && gon.features.issueAssigneesWidget;
 
-export function mountSidebar(mediator) {
+export function mountSidebar(mediator, store) {
   initInviteMembersModal();
   initInviteMembersTrigger();
 
@@ -546,11 +529,12 @@ export function mountSidebar(mediator) {
     mountAssigneesComponentDeprecated(mediator);
   }
   mountReviewersComponent(mediator);
+  mountSidebarLabels();
   mountMilestoneSelect();
   mountConfidentialComponent(mediator);
   mountDueDateComponent(mediator);
   mountReferenceComponent(mediator);
-  mountLockComponent();
+  mountLockComponent(store);
   mountParticipantsComponent();
   mountSubscriptionsComponent();
   mountCopyEmailComponent();
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index ace2a163adc..cea26acd101 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -22,7 +22,6 @@ export default class SidebarService {
   constructor(endpointMap) {
     if (!SidebarService.singleton) {
       this.endpoint = endpointMap.endpoint;
-      this.toggleSubscriptionEndpoint = endpointMap.toggleSubscriptionEndpoint;
       this.moveIssueEndpoint = endpointMap.moveIssueEndpoint;
       this.projectsAutocompleteEndpoint = endpointMap.projectsAutocompleteEndpoint;
       this.fullPath = endpointMap.fullPath;
@@ -75,10 +74,6 @@ export default class SidebarService {
     });
   }
 
-  toggleSubscription() {
-    return axios.post(this.toggleSubscriptionEndpoint);
-  }
-
   moveIssue(moveToProjectId) {
     return axios.post(this.moveIssueEndpoint, {
       move_to_project_id: moveToProjectId,
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 063e3313a3c..1be670f7590 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -1,9 +1,9 @@
-import { mountSidebar, getSidebarOptions } from './mount_sidebar';
+import { mountSidebar, getSidebarOptions } from 'ee_else_ce/sidebar/mount_sidebar';
 import Mediator from './sidebar_mediator';
 
-export default () => {
+export default (store) => {
   const mediator = new Mediator(getSidebarOptions());
   mediator.fetch();
 
-  mountSidebar(mediator);
+  mountSidebar(mediator, store);
 };
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 0a5e44a9b95..9144e3b08db 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -17,7 +17,6 @@ export default class SidebarMediator {
     this.store = new Store(options);
     this.service = new Service({
       endpoint: options.endpoint,
-      toggleSubscriptionEndpoint: options.toggleSubscriptionEndpoint,
       moveIssueEndpoint: options.moveIssueEndpoint,
       projectsAutocompleteEndpoint: options.projectsAutocompleteEndpoint,
       fullPath: options.fullPath,
@@ -85,22 +84,6 @@ export default class SidebarMediator {
     this.store.setAssigneeData(data);
     this.store.setReviewerData(data);
     this.store.setTimeTrackingData(data);
-    this.store.setParticipantsData(data);
-    this.store.setSubscriptionsData(data);
-  }
-
-  toggleSubscription() {
-    this.store.setFetchingState('subscriptions', true);
-    return this.service
-      .toggleSubscription()
-      .then(() => {
-        this.store.setSubscribedState(!this.store.subscribed);
-        this.store.setFetchingState('subscriptions', false);
-      })
-      .catch((err) => {
-        this.store.setFetchingState('subscriptions', false);
-        throw err;
-      });
   }
 
   fetchAutocompleteProjects(searchTerm) {
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index 3c108b06eab..94c54fc0980 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -22,8 +22,6 @@ export default class SidebarStore {
     this.isFetching = {
       assignees: true,
       reviewers: true,
-      participants: true,
-      subscriptions: true,
     };
     this.isLoading = {};
     this.autocompleteProjects = [];
@@ -63,18 +61,6 @@ export default class SidebarStore {
     this.humanTotalTimeSpent = data.human_total_time_spent;
   }
 
-  setParticipantsData(data) {
-    this.isFetching.participants = false;
-    this.participants = data.participants || [];
-  }
-
-  setSubscriptionsData(data) {
-    this.projectEmailsDisabled = data.project_emails_disabled || false;
-    this.subscribeDisabledDescription = data.subscribe_disabled_description;
-    this.isFetching.subscriptions = false;
-    this.subscribed = data.subscribed || false;
-  }
-
   setFetchingState(key, value) {
     this.isFetching[key] = value;
   }
diff --git a/app/assets/javascripts/sidebar/track_invite_members.js b/app/assets/javascripts/sidebar/track_invite_members.js
index eab15578f0f..45a3366197b 100644
--- a/app/assets/javascripts/sidebar/track_invite_members.js
+++ b/app/assets/javascripts/sidebar/track_invite_members.js
@@ -2,10 +2,12 @@ import $ from 'jquery';
 import Tracking from '~/tracking';
 
 export default function initTrackInviteMembers(userDropdown) {
-  const { trackEvent, trackLabel } = userDropdown.querySelector('.js-invite-members-track').dataset;
+  const { trackAction, trackLabel } = userDropdown.querySelector(
+    '.js-invite-members-track',
+  ).dataset;
 
   $(userDropdown).on('shown.bs.dropdown', () => {
-    Tracking.event(undefined, trackEvent, {
+    Tracking.event(undefined, trackAction, {
       label: trackLabel,
     });
   });
diff --git a/app/assets/javascripts/snippet/snippet_show.js b/app/assets/javascripts/snippet/snippet_show.js
index 22dffa90cef..6d0e4770e1c 100644
--- a/app/assets/javascripts/snippet/snippet_show.js
+++ b/app/assets/javascripts/snippet/snippet_show.js
@@ -1,12 +1,12 @@
 import loadAwardsHandler from '~/awards_handler';
-import initNotes from '~/init_notes';
+import initDeprecatedNotes from '~/init_deprecated_notes';
 import SnippetsAppFactory from '~/snippets';
 import SnippetsShow from '~/snippets/components/show.vue';
 import ZenMode from '~/zen_mode';
 
 SnippetsAppFactory(document.getElementById('js-snippet-view'), SnippetsShow);
 
-initNotes();
+initDeprecatedNotes();
 loadAwardsHandler();
 
 // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/snippets/components/snippet_description_view.vue b/app/assets/javascripts/snippets/components/snippet_description_view.vue
index e462f20535b..62d95a650da 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_view.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 
 export default {
@@ -17,6 +16,9 @@ export default {
 </script>
 <template>
   <markdown-field-view class="snippet-description" data-qa-selector="snippet_description_content">
-    <div class="md js-snippet-description" v-html="description"></div>
+    <div
+      class="md js-snippet-description"
+      v-html="description /* eslint-disable-line vue/no-v-html */"
+    ></div>
   </markdown-field-view>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js
index d770dd18d7f..e41dc51457a 100644
--- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js
+++ b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js
@@ -18,7 +18,7 @@ Regexp notes:
 const identifierInstanceRegex = /((?:\[.+?\]){1}(?:\[\]|\[.+?\])?(?!:))/g;
 
 const isIdentifierInstance = (literal) => {
-  // Reset lastIndex as global flag in regexp are stateful (https://stackoverflow.com/a/11477448)
+  // Reset lastIndex as global flag in regexp are stateful
   identifierInstanceRegex.lastIndex = 0;
   return identifierInstanceRegex.test(literal);
 };
diff --git a/app/assets/javascripts/tracking/constants.js b/app/assets/javascripts/tracking/constants.js
index 598111e4086..062a3404355 100644
--- a/app/assets/javascripts/tracking/constants.js
+++ b/app/assets/javascripts/tracking/constants.js
@@ -24,3 +24,7 @@ export const LOAD_ACTION_ATTR_SELECTOR = '[data-track-action="render"]';
 
 export const DEPRECATED_EVENT_ATTR_SELECTOR = '[data-track-event]';
 export const DEPRECATED_LOAD_EVENT_ATTR_SELECTOR = '[data-track-event="render"]';
+
+export const URLS_CACHE_STORAGE_KEY = 'gl-snowplow-pseudonymized-urls';
+
+export const REFERRER_TTL = 24 * 60 * 60 * 1000;
diff --git a/app/assets/javascripts/tracking/index.js b/app/assets/javascripts/tracking/index.js
index 5417e2d969b..7e99ecb4f4e 100644
--- a/app/assets/javascripts/tracking/index.js
+++ b/app/assets/javascripts/tracking/index.js
@@ -1,3 +1,4 @@
+import { getAllExperimentContexts } from '~/experimentation/utils';
 import { DEFAULT_SNOWPLOW_OPTIONS } from './constants';
 import getStandardContext from './get_standard_context';
 import Tracking from './tracking';
@@ -38,10 +39,14 @@ export function initDefaultTrackers() {
 
   const opts = { ...DEFAULT_SNOWPLOW_OPTIONS, ...window.snowplowOptions };
 
+  // must be before initializing the trackers
+  Tracking.setAnonymousUrls();
+
   window.snowplow('enableActivityTracking', 30, 30);
   // must be after enableActivityTracking
   const standardContext = getStandardContext();
-  window.snowplow('trackPageView', null, [standardContext]);
+  const experimentContexts = getAllExperimentContexts();
+  window.snowplow('trackPageView', null, [standardContext, ...experimentContexts]);
 
   if (window.snowplowOptions.formTracking) {
     Tracking.enableFormTracking(opts.formTrackingConfig);
diff --git a/app/assets/javascripts/tracking/tracking.js b/app/assets/javascripts/tracking/tracking.js
index a1f745bc172..657e0a79911 100644
--- a/app/assets/javascripts/tracking/tracking.js
+++ b/app/assets/javascripts/tracking/tracking.js
@@ -1,7 +1,14 @@
 import { LOAD_ACTION_ATTR_SELECTOR, DEPRECATED_LOAD_EVENT_ATTR_SELECTOR } from './constants';
 import { dispatchSnowplowEvent } from './dispatch_snowplow_event';
 import getStandardContext from './get_standard_context';
-import { getEventHandlers, createEventPayload, renameKey, addExperimentContext } from './utils';
+import {
+  getEventHandlers,
+  createEventPayload,
+  renameKey,
+  addExperimentContext,
+  getReferrersCache,
+  addReferrersCacheEntry,
+} from './utils';
 
 export default class Tracking {
   static queuedEvents = [];
@@ -158,6 +165,37 @@ export default class Tracking {
     }
   }
 
+  /**
+   * Replaces the URL and referrer for the default web context
+   * if the replacements are available.
+   *
+   * @returns {undefined}
+   */
+  static setAnonymousUrls() {
+    const { snowplowPseudonymizedPageUrl: pageUrl } = window.gl;
+
+    if (!pageUrl) {
+      return;
+    }
+
+    const referrers = getReferrersCache();
+    const pageLinks = Object.seal({ url: '', referrer: '', originalUrl: window.location.href });
+
+    pageLinks.url = `${pageUrl}${window.location.hash}`;
+    window.snowplow('setCustomUrl', pageLinks.url);
+
+    if (document.referrer) {
+      const node = referrers.find((links) => links.originalUrl === document.referrer);
+
+      if (node) {
+        pageLinks.referrer = node.url;
+        window.snowplow('setReferrerUrl', pageLinks.referrer);
+      }
+    }
+
+    addReferrersCacheEntry(referrers, pageLinks);
+  }
+
   /**
    * Returns an implementation of this class in the form of
    * a Vue mixin.
diff --git a/app/assets/javascripts/tracking/utils.js b/app/assets/javascripts/tracking/utils.js
index 1189b2168ad..3507872b511 100644
--- a/app/assets/javascripts/tracking/utils.js
+++ b/app/assets/javascripts/tracking/utils.js
@@ -6,6 +6,8 @@ import {
   LOAD_ACTION_ATTR_SELECTOR,
   DEPRECATED_EVENT_ATTR_SELECTOR,
   DEPRECATED_LOAD_EVENT_ATTR_SELECTOR,
+  URLS_CACHE_STORAGE_KEY,
+  REFERRER_TTL,
 } from './constants';
 
 export const addExperimentContext = (opts) => {
@@ -100,3 +102,25 @@ export const renameKey = (o, oldKey, newKey) => {
 
   return ret;
 };
+
+export const filterOldReferrersCacheEntries = (cache) => {
+  const now = Date.now();
+
+  return cache.filter((entry) => entry.timestamp && entry.timestamp > now - REFERRER_TTL);
+};
+
+export const getReferrersCache = () => {
+  try {
+    const referrers = JSON.parse(window.localStorage.getItem(URLS_CACHE_STORAGE_KEY) || '[]');
+
+    return filterOldReferrersCacheEntries(referrers);
+  } catch {
+    return [];
+  }
+};
+
+export const addReferrersCacheEntry = (cache, entry) => {
+  const referrers = JSON.stringify([{ ...entry, timestamp: Date.now() }, ...cache]);
+
+  window.localStorage.setItem(URLS_CACHE_STORAGE_KEY, referrers);
+};
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index 0e25f71fe05..7a7518bcf83 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -1,7 +1,4 @@
 import Vue from 'vue';
-
-import { sanitize } from '~/lib/dompurify';
-
 import UsersCache from './lib/utils/users_cache';
 import UserPopover from './vue_shared/components/user_popover/user_popover.vue';
 
@@ -41,7 +38,6 @@ const populateUserInfo = (user) => {
           name: userData.name,
           location: userData.location,
           bio: userData.bio,
-          bioHtml: sanitize(userData.bio_html),
           workInformation: userData.work_information,
           websiteUrl: userData.website_url,
           pronouns: userData.pronouns,
diff --git a/app/assets/javascripts/users_select/index.js b/app/assets/javascripts/users_select/index.js
index 7c17ce85cc6..69b3c27173f 100644
--- a/app/assets/javascripts/users_select/index.js
+++ b/app/assets/javascripts/users_select/index.js
@@ -536,9 +536,6 @@ function UsersSelect(currentUser, els, options = {}) {
       opened(e) {
         const $el = $(e.currentTarget);
         const selected = getSelected();
-        if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
-          this.addInput($dropdown.data('fieldName'), 0, {});
-        }
         $el.find('.is-active').removeClass('is-active');
 
         function highlightSelected(id) {
@@ -547,8 +544,6 @@ function UsersSelect(currentUser, els, options = {}) {
 
         if (selected.length > 0) {
           getSelected().forEach((selectedId) => highlightSelected(selectedId));
-        } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-          highlightSelected(0);
         } else {
           highlightSelected(selectedId);
         }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index ac6368a3025..306026072a3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { s__, n__ } from '~/locale';
 
 export default {
@@ -32,11 +31,16 @@ export default {
 </script>
 <template>
   <section class="mr-info-list gl-ml-7 gl-pb-5">
-    <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
+    <p v-if="relatedLinks.closing">
+      {{ closesText }}
+      <span v-html="relatedLinks.closing /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
     <p v-if="relatedLinks.mentioned">
       {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
-      <span v-html="relatedLinks.mentioned"></span>
+      <span v-html="relatedLinks.mentioned /* eslint-disable-line vue/no-v-html */"></span>
+    </p>
+    <p v-if="relatedLinks.assignToMe">
+      <span v-html="relatedLinks.assignToMe /* eslint-disable-line vue/no-v-html */"></span>
     </p>
-    <p v-if="relatedLinks.assignToMe"><span v-html="relatedLinks.assignToMe"></span></p>
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
index d2581f57837..f3673005c45 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
@@ -98,7 +98,7 @@ export default {
               data-testid="add-pipeline-link"
               :data-track-property="humanAccess"
               :data-track-value="$options.SP_LINK_TRACK_VALUE"
-              :data-track-event="$options.SP_LINK_TRACK_EVENT"
+              :data-track-action="$options.SP_LINK_TRACK_EVENT"
               :data-track-label="$options.SP_TRACK_LABEL"
             >
               {{ content }}
@@ -139,7 +139,7 @@ export default {
             :href="pipelinePath"
             :data-track-property="humanAccess"
             :data-track-value="$options.SP_SHOW_TRACK_VALUE"
-            :data-track-event="$options.SP_SHOW_TRACK_EVENT"
+            :data-track-action="$options.SP_SHOW_TRACK_EVENT"
             :data-track-label="$options.SP_TRACK_LABEL"
           >
             {{ __('Show me how to add a pipeline') }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index ebd2b5cd22d..e31e69d0f3a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -39,7 +39,7 @@ export default {
     target="_blank"
     rel="noopener noreferrer nofollow"
     :class="cssClass"
-    data-track-event="open_review_app"
+    data-track-action="open_review_app"
     data-track-label="review_app"
   >
     {{ display.text }} <gl-icon class="fgray" name="external-link" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index d331f1690f5..a55dba92e16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
+/* eslint-disable @gitlab/require-string-literal-i18n-helpers */
 import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
@@ -89,7 +89,10 @@ export default {
       />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
-        <span class="vertical-align-middle" v-html="message"></span>
+        <span
+          class="vertical-align-middle"
+          v-html="message /* eslint-disable-line vue/no-v-html */"
+        ></span>
         <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
         </gl-button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
new file mode 100644
index 00000000000..503ddf8a396
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/merge_checks_failed.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import notesEventHub from '~/notes/event_hub';
+import StatusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  i18n: {
+    pipelineFailed: s__(
+      'mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure.',
+    ),
+    approvalNeeded: s__('mrWidget|You can only merge once this merge request is approved.'),
+    unresolvedDiscussions: s__('mrWidget|Merge blocked: all threads must be resolved.'),
+  },
+  components: {
+    StatusIcon,
+    GlButton,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    failedText() {
+      if (this.mr.isPipelineFailed) {
+        return this.$options.i18n.pipelineFailed;
+      } else if (this.mr.approvals && !this.mr.isApproved) {
+        return this.$options.i18n.approvalNeeded;
+      } else if (this.mr.hasMergeableDiscussionsState) {
+        return this.$options.i18n.unresolvedDiscussions;
+      }
+
+      return null;
+    },
+  },
+  methods: {
+    jumpToFirstUnresolvedDiscussion() {
+      notesEventHub.$emit('jumpToFirstUnresolvedDiscussion');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media gl-flex-wrap">
+    <status-icon status="warning" />
+    <p class="media-body gl-m-0! gl-font-weight-bold gl-text-black-normal!">
+      {{ failedText }}
+      <template v-if="failedText == $options.i18n.unresolvedDiscussions">
+        <gl-button
+          class="gl-ml-3"
+          size="small"
+          variant="confirm"
+          data-testid="jumpToUnresolved"
+          @click="jumpToFirstUnresolvedDiscussion"
+        >
+          {{ s__('mrWidget|Jump to first unresolved thread') }}
+        </gl-button>
+        <gl-button
+          v-if="mr.createIssueToResolveDiscussionsPath"
+          :href="mr.createIssueToResolveDiscussionsPath"
+          class="gl-ml-3"
+          size="small"
+          variant="confirm"
+          category="secondary"
+          data-testid="resolveIssue"
+        >
+          {{ s__('mrWidget|Create issue to resolve all threads') }}
+        </gl-button>
+      </template>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 22f41b43095..1976d3639a6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { escape } from 'lodash';
 import createFlash from '~/flash';
@@ -171,7 +170,7 @@ export default {
           v-if="!rebaseInProgress && !canPushToSourceBranch"
           class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
-          v-html="fastForwardMergeText"
+          v-html="fastForwardMergeText /* eslint-disable-line vue/no-v-html */"
         ></span>
         <div
           v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue
new file mode 100644
index 00000000000..9a7743348ff
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue
@@ -0,0 +1,49 @@
+<script>
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import readyToMergeQuery from '../../queries/states/new_ready_to_merge.query.graphql';
+import StatusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  apollo: {
+    canMerge: {
+      query: readyToMergeQuery,
+      skip() {
+        return !this.mr || !window.gon?.features?.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: (data) => data?.project?.mergeRequest?.userPermissions?.canMerge,
+    },
+  },
+  components: {
+    StatusIcon,
+  },
+  mixins: [mergeRequestQueryVariablesMixin],
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      canMerge: null,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon status="success" />
+    <p class="media-body gl-m-0! gl-font-weight-bold">
+      <template v-if="canMerge">
+        {{ __('Ready to merge!') }}
+      </template>
+      <template v-else>
+        {{ __('Ready to merge by members who can write to the target branch.') }}
+      </template>
+    </p>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 01e0b91bd4a..7827c79cd31 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
@@ -11,6 +10,9 @@ export default {
     GlSprintf,
     GlLink,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     mr: {
       type: Object,
@@ -21,6 +23,7 @@ export default {
     return { emptyStateSVG };
   },
   ciHelpPage: helpPagePath('/ci/quick_start/index.html'),
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 
@@ -30,7 +33,7 @@ export default {
       <div
         class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
       >
-        <span v-html="emptyStateSVG"></span>
+        <span v-safe-html:[$options.safeHtmlConfig]="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
         <p class="highlight">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index f33f4d3fda0..7df65e995a5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -28,6 +28,7 @@ import {
   CONFIRM,
   WARNING,
   MT_MERGE_STRATEGY,
+  PIPELINE_FAILED_STATE,
 } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
@@ -39,7 +40,6 @@ import CommitsHeader from './commits_header.vue';
 import SquashBeforeMerge from './squash_before_merge.vue';
 
 const PIPELINE_RUNNING_STATE = 'running';
-const PIPELINE_FAILED_STATE = 'failed';
 const PIPELINE_PENDING_STATE = 'pending';
 const PIPELINE_SUCCESS_STATE = 'success';
 
@@ -105,6 +105,10 @@ export default {
       import(
         'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
       ),
+    MergeTrainFailedPipelineConfirmationDialog: () =>
+      import(
+        'ee_component/vue_merge_request_widget/components/merge_train_failed_pipeline_confirmation_dialog.vue'
+      ),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -125,6 +129,7 @@ export default {
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
       squashCommitMessage: this.mr.squashCommitMessage,
+      isPipelineFailedModalVisible: false,
     };
   },
   computed: {
@@ -327,7 +332,12 @@ export default {
         : this.mr.commitMessageWithDescription;
       this.commitMessage = includeDescription ? commitMessageWithDescription : commitMessage;
     },
-    handleMergeButtonClick(useAutoMerge, mergeImmediately = false) {
+    handleMergeButtonClick(useAutoMerge, mergeImmediately = false, confirmationClicked = false) {
+      if (this.showFailedPipelineModal && !confirmationClicked) {
+        this.isPipelineFailedModalVisible = true;
+        return;
+      }
+
       if (mergeImmediately) {
         this.isMergingImmediately = true;
       }
@@ -386,7 +396,7 @@ export default {
       }
     },
     onMergeImmediatelyConfirmation() {
-      this.handleMergeButtonClick(false, true);
+      this.handleMergeButtonClick(false, true, true);
     },
     initiateMergePolling() {
       simplePoll(
@@ -522,6 +532,11 @@ export default {
                   @mergeImmediately="onMergeImmediatelyConfirmation"
                 />
               </gl-dropdown>
+              <merge-train-failed-pipeline-confirmation-dialog
+                :visible="isPipelineFailedModalVisible"
+                @startMergeTrain="onStartMergeTrainConfirmation"
+                @cancel="isPipelineFailedModalVisible = false"
+              />
             </gl-button-group>
             <div
               v-if="shouldShowMergeControls"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index c6ce29acb09..69e4df0ca11 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -46,7 +46,7 @@ export default {
         size="small"
         icon="issue-new"
       >
-        {{ s__('mrWidget|Resolve all threads in new issue') }}
+        {{ s__('mrWidget|Create issue to resolve all threads') }}
       </gl-button>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index a1eb77479bd..393c599c7e8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -124,7 +124,7 @@ export default {
             },
           }) => {
             createFlash({
-              message: __('The merge request can now be merged.'),
+              message: __('Marked as ready. Merging is now allowed.'),
               type: 'notice',
             });
             $('.merge-request .detail-page-description .title').text(title);
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
index 427ab0842ea..87a310efe78 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue
@@ -104,7 +104,7 @@ export default {
           :href="plan.job_path"
           target="_blank"
           data-testid="terraform-report-link"
-          data-track-event="click_terraform_mr_plan_button"
+          data-track-action="click_terraform_mr_plan_button"
           data-track-label="mr_widget_terraform_mr_plan_button"
           data-track-property="terraform_mr_plan_button"
           class="btn btn-sm"
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index d067e531fad..f5710f46b7e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -10,6 +10,8 @@ export const MWPS_MERGE_STRATEGY = 'merge_when_pipeline_succeeds';
 export const MTWPS_MERGE_STRATEGY = 'add_to_merge_train_when_pipeline_succeeds';
 export const MT_MERGE_STRATEGY = 'merge_train';
 
+export const PIPELINE_FAILED_STATE = 'failed';
+
 export const AUTO_MERGE_STRATEGIES = [MWPS_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY, MT_MERGE_STRATEGY];
 
 // SP - "Suggest Pipelines"
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 3a3a1329483..f5dbcec7dbe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -6,9 +6,8 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import MrWidgetOptions from 'ee_else_ce/vue_merge_request_widget/mr_widget_options.vue';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
-import { registerExtension } from './components/extensions';
-import issueExtension from './extensions/issues';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -28,13 +27,13 @@ export default () => {
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
   gl.mrWidgetData.defaultAvatarUrl = gon.default_avatar_url;
 
-  registerExtension(issueExtension);
-
   const vm = new Vue({
     el: '#js-vue-mr-widget',
     provide: {
       artifactsEndpoint: gl.mrWidgetData.artifacts_endpoint,
       artifactsEndpointPlaceholder: gl.mrWidgetData.artifacts_endpoint_placeholder,
+      falsePositiveDocUrl: gl.mrWidgetData.false_positive_doc_url,
+      canViewFalsePositive: parseBoolean(gl.mrWidgetData.can_view_false_positive),
     },
     ...MrWidgetOptions,
     apolloProvider,
diff --git a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
index 23215982e6e..9d8e5d12d58 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mixins/ready_to_merge.js
@@ -38,5 +38,13 @@ export default {
     pipelineId() {
       return this.pipeline.id;
     },
+    showFailedPipelineModal() {
+      return false;
+    },
+  },
+  methods: {
+    onStartMergeTrainConfirmation() {
+      return false;
+    },
   },
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index a8a9df598f5..78aa3941bfe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -12,9 +12,6 @@ import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import { setFaviconOverlay } from '../lib/utils/favicon';
-import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue';
-import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue';
-import GroupedTestReportsApp from '../reports/grouped_test_report/grouped_test_reports_app.vue';
 import Loading from './components/loading.vue';
 import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
@@ -42,7 +39,6 @@ import ShaMismatch from './components/states/sha_mismatch.vue';
 import UnresolvedDiscussionsState from './components/states/unresolved_discussions.vue';
 import WorkInProgressState from './components/states/work_in_progress.vue';
 // import ExtensionsContainer from './components/extensions/container';
-import TerraformPlan from './components/terraform/mr_widget_terraform_container.vue';
 import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
@@ -72,7 +68,9 @@ export default {
     'mr-widget-nothing-to-merge': NothingToMergeState,
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
-    'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-ready-to-merge': window.gon?.features?.restructuredMrWidget
+      ? () => import('./components/states/new_ready_to_merge.vue')
+      : ReadyToMergeState,
     'sha-mismatch': ShaMismatch,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
@@ -82,12 +80,16 @@ export default {
     'mr-widget-auto-merge-failed': AutoMergeFailed,
     'mr-widget-rebase': RebaseState,
     SourceBranchRemovalStatus,
-    GroupedCodequalityReportsApp,
-    GroupedTestReportsApp,
-    TerraformPlan,
-    GroupedAccessibilityReportsApp,
+    GroupedCodequalityReportsApp: () =>
+      import('../reports/codequality_report/grouped_codequality_reports_app.vue'),
+    GroupedTestReportsApp: () =>
+      import('../reports/grouped_test_report/grouped_test_reports_app.vue'),
+    TerraformPlan: () => import('./components/terraform/mr_widget_terraform_container.vue'),
+    GroupedAccessibilityReportsApp: () =>
+      import('../reports/accessibility_report/grouped_accessibility_reports_app.vue'),
     MrWidgetApprovals,
     SecurityReportsApp: () => import('~/vue_shared/security_reports/security_reports_app.vue'),
+    MergeChecksFailed: () => import('./components/states/merge_checks_failed.vue'),
   },
   apollo: {
     state: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql b/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql
new file mode 100644
index 00000000000..3b34be73c15
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql
@@ -0,0 +1,9 @@
+query readyToMergeQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      userPermissions {
+        canMerge
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
index 04800cf43f0..65d78fc283c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -1,7 +1,9 @@
 import { stateKey } from './state_maps';
 
 export default function deviseState() {
-  if (this.projectArchived) {
+  if (this.hasMergeChecksFailed) {
+    return stateKey.mergeChecksFailed;
+  } else if (this.projectArchived) {
     return stateKey.archived;
   } else if (this.branchMissing) {
     return stateKey.missingBranch;
@@ -25,7 +27,7 @@ export default function deviseState() {
     return stateKey.shaMismatch;
   } else if (this.autoMergeEnabled && !this.mergeError) {
     return stateKey.autoMergeEnabled;
-  } else if (!this.canMerge) {
+  } else if (!this.canMerge && !window.gon?.features?.restructuredMrWidget) {
     return stateKey.notAllowedToMerge;
   } else if (this.canBeMerged) {
     return stateKey.readyToMerge;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 8979fe621ac..29e0c867f6b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -347,4 +347,13 @@ export default class MergeRequestStore {
     this.approvals = data;
     this.isApproved = data.approved || false;
   }
+
+  get hasMergeChecksFailed() {
+    if (!window.gon?.features?.restructuredMrWidget) return false;
+
+    return (
+      this.hasMergeableDiscussionsState ||
+      (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed)
+    );
+  }
 }
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 28507bba3e5..04454882666 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -18,6 +18,7 @@ const stateToComponentMap = {
   autoMergeFailed: 'mr-widget-auto-merge-failed',
   shaMismatch: 'sha-mismatch',
   rebase: 'mr-widget-rebase',
+  mergeChecksFailed: 'mergeChecksFailed',
 };
 
 const statesToShowHelpWidget = [
@@ -50,6 +51,7 @@ export const stateKey = {
   readyToMerge: 'readyToMerge',
   rebase: 'rebase',
   merged: 'merged',
+  mergeChecksFailed: 'mergeChecksFailed',
 };
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue b/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue
index 3705e36a579..f8f1613879f 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/system_notes/system_note.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import NoteHeader from '~/notes/components/note_header.vue';
 
@@ -40,7 +39,7 @@ export default {
 
       <div class="note-header">
         <note-header :author="noteAuthor" :created-at="note.createdAt" :note-id="note.id">
-          <span v-html="note.bodyHtml"></span>
+          <span v-html="note.bodyHtml /* eslint-disable-line vue/no-v-html */"></span>
         </note-header>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/awards_list.vue b/app/assets/javascripts/vue_shared/components/awards_list.vue
index f4c73d12923..82a28d4cb5f 100644
--- a/app/assets/javascripts/vue_shared/components/awards_list.vue
+++ b/app/assets/javascripts/vue_shared/components/awards_list.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlButton, GlTooltipDirective, GlSafeHtmlDirective } from '@gitlab/ui';
 import { groupBy } from 'lodash';
 import EmojiPicker from '~/emoji/components/picker.vue';
 import { __, sprintf } from '~/locale';
@@ -18,6 +17,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -164,6 +164,7 @@ export default {
       this.isMenuOpen = menuOpen;
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -180,7 +181,11 @@ export default {
       @click="handleAward(awardList.name)"
     >
       <template #emoji>
-        <span class="award-emoji-block" data-testid="award-html" v-html="awardList.html"></span>
+        <span
+          v-safe-html:[$options.safeHtmlConfig]="awardList.html"
+          class="award-emoji-block"
+          data-testid="award-html"
+        ></span>
       </template>
       <span class="js-counter">{{ awardList.list.length }}</span>
     </gl-button>
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
index 0589b47edbd..84770dbac6f 100644
--- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
@@ -75,7 +74,9 @@ export default {
         </a>
       </div>
       <div class="blob-content">
-        <pre class="code highlight"><code :data-blob-hash="blobHash" v-html="content"></code></pre>
+        <pre
+          class="code highlight"
+        ><code :data-blob-hash="blobHash" v-html="content /* eslint-disable-line vue/no-v-html */"></code></pre>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/code_block.vue b/app/assets/javascripts/vue_shared/components/code_block.vue
index 1928bf6dac5..9856f35c7f6 100644
--- a/app/assets/javascripts/vue_shared/components/code_block.vue
+++ b/app/assets/javascripts/vue_shared/components/code_block.vue
@@ -24,8 +24,13 @@ export default {
       return isScrollable ? scrollableStyles : null;
     },
   },
+  userColorScheme: window.gon.user_color_scheme,
 };
 </script>
 <template>
-  <pre class="code-block rounded" :style="styleObject"><code class="d-block">{{ code }}</code></pre>
+  <pre
+    class="code-block rounded code"
+    :class="$options.userColorScheme"
+    :style="styleObject"
+  ><code class="d-block">{{ code }}</code></pre>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
index 0ff33e462b4..3c21b14894b 100644
--- a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
@@ -110,7 +110,7 @@ export default {
           <div :class="previewColorClasses" :style="previewColor" data-testid="color-preview">
             <gl-form-input
               type="color"
-              class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-cursor-pointer gl-opacity-0"
+              class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-opacity-0"
               tabindex="-1"
               :value="value"
               @input="handleColorChange"
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index d1eee62683b..5f50a699034 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -136,6 +136,9 @@ export default {
     refUrl() {
       return this.commitRef.ref_url || this.commitRef.path;
     },
+    tooltipTitle() {
+      return this.mergeRequestRef ? this.mergeRequestRef.title : this.commitRef.name;
+    },
   },
 };
 </script>
@@ -148,23 +151,14 @@ export default {
         <gl-icon v-else name="branch" />
       </div>
 
-      <gl-link
-        v-if="mergeRequestRef"
-        v-gl-tooltip
-        :href="mergeRequestRef.path"
-        :title="mergeRequestRef.title"
-        class="ref-name"
-        >{{ mergeRequestRef.iid }}</gl-link
-      >
-      <gl-link
-        v-else
-        v-gl-tooltip
-        :href="refUrl"
-        :title="commitRef.name"
-        class="ref-name"
-        data-testid="ref-name"
-        >{{ commitRef.name }}</gl-link
-      >
+      <tooltip-on-truncate :title="tooltipTitle" truncate-target="child" placement="top">
+        <gl-link v-if="mergeRequestRef" :href="mergeRequestRef.path" class="ref-name">
+          {{ mergeRequestRef.iid }}
+        </gl-link>
+        <gl-link v-else :href="refUrl" class="ref-name" data-testid="ref-name">
+          {{ commitRef.name }}
+        </gl-link>
+      </tooltip-on-truncate>
     </template>
     <gl-icon name="commit" class="commit-icon js-commit-icon" />
 
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index 3790a509f26..7b88b36aa0f 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -110,6 +109,10 @@ export default {
 <template>
   <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
-    <div v-else class="md gl-ml-auto gl-mr-auto" v-html="previewContent"></div>
+    <div
+      v-else
+      class="md gl-ml-auto gl-mr-auto"
+      v-html="previewContent /* eslint-disable-line vue/no-v-html */"
+    ></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue b/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
new file mode 100644
index 00000000000..56e6399a1b7
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
@@ -0,0 +1,159 @@
+<script>
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownText,
+  GlSearchBoxByType,
+  GlSprintf,
+} from '@gitlab/ui';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { __, n__, s__, sprintf } from '~/locale';
+
+export const i18n = {
+  messageAdditionsDeletions: s__('Diffs|with %{additions} and %{deletions}'),
+  noFilesFound: __('No files found.'),
+  noFileNameAvailable: s__('Diffs|No file name available'),
+  searchFiles: __('Search files'),
+};
+
+export default {
+  i18n,
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownText,
+    GlSearchBoxByType,
+    GlSprintf,
+  },
+  props: {
+    changed: {
+      type: Number,
+      required: true,
+    },
+    added: {
+      type: Number,
+      required: true,
+    },
+    deleted: {
+      type: Number,
+      required: true,
+    },
+    files: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      search: '',
+    };
+  },
+  computed: {
+    filteredFiles() {
+      return this.search.length > 0
+        ? fuzzaldrinPlus.filter(this.files, this.search, { key: 'name' })
+        : this.files;
+    },
+    messageChanged() {
+      return sprintf(
+        n__(
+          'Diffs|Showing %{dropdownStart}%{count} changed file%{dropdownEnd}',
+          'Diffs|Showing %{dropdownStart}%{count} changed files%{dropdownEnd}',
+          this.changed,
+        ),
+        { count: this.changed },
+      );
+    },
+
+    additionsText() {
+      return n__('Diffs|%d addition', 'Diffs|%d additions', this.added);
+    },
+    deletionsText() {
+      return n__('Diffs|%d deletion', 'Diffs|%d deletions', this.deleted);
+    },
+  },
+  methods: {
+    jumpToFile(fileHash) {
+      window.location.hash = fileHash;
+    },
+    focusInput() {
+      this.$refs.search.focusInput();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-sprintf :message="messageChanged">
+      <template #dropdown="{ content: dropdownText }">
+        <gl-dropdown
+          category="tertiary"
+          variant="confirm"
+          :text="dropdownText"
+          data-testid="diff-stats-dropdown"
+          class="gl-vertical-align-baseline"
+          toggle-class="gl-px-0! gl-font-weight-bold!"
+          menu-class="gl-w-auto!"
+          no-flip
+          @shown="focusInput"
+        >
+          <template #header>
+            <gl-search-box-by-type
+              ref="search"
+              v-model.trim="search"
+              :placeholder="$options.i18n.searchFiles"
+            />
+          </template>
+          <gl-dropdown-item
+            v-for="file in filteredFiles"
+            :key="file.href"
+            :icon-name="file.icon"
+            :icon-color="file.iconColor"
+            @click="jumpToFile(file.href)"
+          >
+            <div class="gl-display-flex">
+              <span v-if="file.name" class="gl-font-weight-bold gl-mr-3 gl-text-truncate">{{
+                file.name
+              }}</span>
+              <span v-else class="gl-mr-3 gl-font-weight-bold gl-font-style-italic gl-gray-400">{{
+                $options.i18n.noFileNameAvailable
+              }}</span>
+              <span class="gl-ml-auto gl-white-space-nowrap">
+                <span class="gl-text-green-600">+{{ file.added }}</span>
+                <span class="gl-text-red-500">-{{ file.removed }}</span>
+              </span>
+            </div>
+            <div class="gl-text-gray-700 gl-overflow-hidden gl-text-overflow-ellipsis">
+              {{ file.path }}
+            </div>
+          </gl-dropdown-item>
+          <gl-dropdown-text v-if="!filteredFiles.length">
+            {{ $options.i18n.noFilesFound }}
+          </gl-dropdown-text>
+        </gl-dropdown>
+      </template>
+    </gl-sprintf>
+    <span
+      class="diff-stats-additions-deletions-expanded"
+      data-testid="diff-stats-additions-deletions-expanded"
+    >
+      <gl-sprintf :message="$options.i18n.messageAdditionsDeletions">
+        <template #additions>
+          <span class="gl-text-green-600 gl-font-weight-bold">{{ additionsText }}</span>
+        </template>
+        <template #deletions>
+          <span class="gl-text-red-500 gl-font-weight-bold">{{ deletionsText }}</span>
+        </template>
+      </gl-sprintf>
+    </span>
+
+    <div
+      class="diff-stats-additions-deletions-collapsed gl-float-right gl-display-none"
+      data-testid="diff-stats-additions-deletions-collapsed"
+    >
+      <span class="gl-text-green-600 gl-font-weight-bold">+{{ added }}</span>
+      <span class="gl-text-red-500 gl-font-weight-bold">-{{ deleted }}</span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index 2e9634819a0..1df65d0a666 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -20,19 +20,26 @@ export const OPERATOR_IS_ONLY = [{ value: OPERATOR_IS, description: OPERATOR_IS_
 export const OPERATOR_IS_NOT_ONLY = [{ value: OPERATOR_IS_NOT, description: OPERATOR_IS_NOT_TEXT }];
 export const OPERATOR_IS_AND_IS_NOT = [...OPERATOR_IS_ONLY, ...OPERATOR_IS_NOT_ONLY];
 
-export const DEFAULT_LABEL_NONE = { value: FILTER_NONE, text: __(FILTER_NONE) };
-export const DEFAULT_LABEL_ANY = { value: FILTER_ANY, text: __(FILTER_ANY) };
+export const DEFAULT_LABEL_NONE = { value: FILTER_NONE, text: __('None'), title: __('None') };
+export const DEFAULT_LABEL_ANY = { value: FILTER_ANY, text: __('Any'), title: __('Any') };
 export const DEFAULT_NONE_ANY = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
 
 export const DEFAULT_ITERATIONS = DEFAULT_NONE_ANY.concat([
-  { value: FILTER_CURRENT, text: __(FILTER_CURRENT) },
+  { value: FILTER_CURRENT, text: __('Current') },
 ]);
 
 export const DEFAULT_MILESTONES = DEFAULT_NONE_ANY.concat([
-  { value: FILTER_UPCOMING, text: __(FILTER_UPCOMING) },
-  { value: FILTER_STARTED, text: __(FILTER_STARTED) },
+  { value: FILTER_UPCOMING, text: __('Upcoming'), title: __('Upcoming') },
+  { value: FILTER_STARTED, text: __('Started'), title: __('Started') },
 ]);
 
+export const DEFAULT_MILESTONES_GRAPHQL = [
+  { value: 'any', text: __('Any'), title: __('Any') },
+  { value: 'none', text: __('None'), title: __('None') },
+  { value: '#upcoming', text: __('Upcoming'), title: __('Upcoming') },
+  { value: '#started', text: __('Started'), title: __('Started') },
+];
+
 export const SortDirection = {
   descending: 'descending',
   ascending: 'ascending',
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js
index 6573f366b52..5cc96471aef 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_utils.js
@@ -177,13 +177,10 @@ function filteredSearchTermValue(value) {
  * @param  {Object} options
  * @param  {String} [options.filteredSearchTermKey] if set, a FILTERED_SEARCH_TERM filter is created to this parameter. `'search'` is suggested
  * @param  {String[]} [options.filterNamesAllowList] if set, only this list of filters names is mapped
- * @param  {Boolean} [options.legacySpacesDecode] if set, plus symbols (+) are not encoded as spaces. `false` is suggested
  * @return {Object} filter object with filter names and their values
  */
-export function urlQueryToFilter(query = '', options = {}) {
-  const { filteredSearchTermKey, filterNamesAllowList, legacySpacesDecode = true } = options;
-
-  const filters = queryToObject(query, { gatherArrays: true, legacySpacesDecode });
+export function urlQueryToFilter(query = '', { filteredSearchTermKey, filterNamesAllowList } = {}) {
+  const filters = queryToObject(query, { gatherArrays: true });
   return Object.keys(filters).reduce((memo, key) => {
     const value = filters[key];
     if (!value) {
@@ -222,7 +219,7 @@ export function urlQueryToFilter(query = '', options = {}) {
  */
 export function getRecentlyUsedSuggestions(recentSuggestionsStorageKey) {
   let recentlyUsedSuggestions = [];
-  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (AccessorUtilities.canUseLocalStorage()) {
     recentlyUsedSuggestions = JSON.parse(localStorage.getItem(recentSuggestionsStorageKey)) || [];
   }
   return recentlyUsedSuggestions;
@@ -240,7 +237,7 @@ export function setTokenValueToRecentlyUsed(recentSuggestionsStorageKey, tokenVa
 
   recentlyUsedSuggestions.splice(0, 0, { ...tokenValue });
 
-  if (AccessorUtilities.isLocalStorageAccessSafe()) {
+  if (AccessorUtilities.canUseLocalStorage()) {
     localStorage.setItem(
       recentSuggestionsStorageKey,
       JSON.stringify(uniqWith(recentlyUsedSuggestions, isEqual).slice(0, MAX_RECENT_TOKENS_SIZE)),
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index 4b9ad6d8f91..523438f459c 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -39,8 +39,16 @@ export default {
   },
   methods: {
     getActiveMilestone(milestones, data) {
-      return milestones.find(
-        (milestone) => milestone.title.toLowerCase() === stripQuotes(data).toLowerCase(),
+      /* We need to check default milestones against the value not the
+       * title because there is a discrepancy between the value graphql
+       * accepts and the title.
+       * https://gitlab.com/gitlab-org/gitlab/-/issues/337687#note_648058797
+       */
+
+      return (
+        milestones.find(
+          (milestone) => milestone.title.toLowerCase() === stripQuotes(data).toLowerCase(),
+        ) || this.defaultMilestones.find(({ value }) => value === data)
       );
     },
     fetchMilestones(searchTerm) {
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index f169921d8a6..41613bb3307 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,6 +1,5 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlTooltipDirective, GlLink, GlButton, GlTooltip } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlTooltip, GlSafeHtmlDirective } from '@gitlab/ui';
 import { glEmojiTag } from '../../emoji';
 import { __, sprintf } from '../../locale';
 import CiIconBadge from './ci_badge_link.vue';
@@ -25,6 +24,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   EMOJI_REF: 'EMOJI_REF',
   props: {
@@ -37,8 +37,9 @@ export default {
       required: true,
     },
     itemId: {
-      type: Number,
-      required: true,
+      type: String,
+      required: false,
+      default: '',
     },
     time: {
       type: String,
@@ -86,6 +87,13 @@ export default {
     message() {
       return this.user?.status?.message;
     },
+    item() {
+      if (this.itemId) {
+        return `${this.itemName} #${this.itemId}`;
+      }
+
+      return this.itemName;
+    },
   },
 
   methods: {
@@ -93,6 +101,7 @@ export default {
       this.$emit('clickedSidebarButton');
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -105,7 +114,7 @@ export default {
     <section class="header-main-content gl-mr-3">
       <ci-icon-badge :status="status" />
 
-      <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
+      <strong data-testid="ci-header-item-text">{{ item }}</strong>
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
       <template v-else>{{ __('created') }}</template>
@@ -130,8 +139,8 @@ export default {
         <span
           v-if="statusTooltipHTML"
           :ref="$options.EMOJI_REF"
+          v-safe-html:[$options.safeHtmlConfig]="statusTooltipHTML"
           :data-testid="message"
-          v-html="statusTooltipHTML"
         ></span>
       </template>
     </section>
diff --git a/app/assets/javascripts/vue_shared/components/issuable/init_issuable_header_warning.js b/app/assets/javascripts/vue_shared/components/issuable/init_issuable_header_warning.js
index 18bfcc268dc..28aa93d6680 100644
--- a/app/assets/javascripts/vue_shared/components/issuable/init_issuable_header_warning.js
+++ b/app/assets/javascripts/vue_shared/components/issuable/init_issuable_header_warning.js
@@ -1,10 +1,20 @@
 import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import IssuableHeaderWarnings from './issuable_header_warnings.vue';
 
 export default function issuableHeaderWarnings(store) {
+  const el = document.getElementById('js-issuable-header-warnings');
+
+  if (!el) {
+    return false;
+  }
+
+  const { hidden } = el.dataset;
+
   return new Vue({
-    el: document.getElementById('js-issuable-header-warnings'),
+    el,
     store,
+    provide: { hidden: parseBoolean(hidden) },
     render(createElement) {
       return createElement(IssuableHeaderWarnings);
     },
diff --git a/app/assets/javascripts/vue_shared/components/issuable/issuable_header_warnings.vue b/app/assets/javascripts/vue_shared/components/issuable/issuable_header_warnings.vue
index 56adbe8c606..82223ab9ef4 100644
--- a/app/assets/javascripts/vue_shared/components/issuable/issuable_header_warnings.vue
+++ b/app/assets/javascripts/vue_shared/components/issuable/issuable_header_warnings.vue
@@ -1,11 +1,16 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
+import { __ } from '~/locale';
 
 export default {
   components: {
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['hidden'],
   computed: {
     ...mapGetters(['getNoteableData']),
     isLocked() {
@@ -26,6 +31,12 @@ export default {
           visible: this.isConfidential,
           dataTestId: 'confidential',
         },
+        {
+          iconName: 'spam',
+          visible: this.hidden,
+          dataTestId: 'hidden',
+          tooltip: __('This issue is hidden because its author has been banned'),
+        },
       ];
     },
   },
@@ -35,8 +46,15 @@ export default {
 <template>
   <div class="gl-display-inline-block">
     <template v-for="meta in warningIconsMeta">
-      <div v-if="meta.visible" :key="meta.iconName" class="issuable-warning-icon inline">
-        <gl-icon :name="meta.iconName" :data-testid="meta.dataTestId" class="icon" />
+      <div
+        v-if="meta.visible"
+        :key="meta.iconName"
+        v-gl-tooltip
+        :data-testid="meta.dataTestId"
+        :title="meta.tooltip || null"
+        class="issuable-warning-icon inline"
+      >
+        <gl-icon :name="meta.iconName" class="icon" />
       </div>
     </template>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index ccdb47e3144..095d1854c8b 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import '~/commons/bootstrap';
 import { GlIcon, GlTooltip, GlTooltipDirective, GlButton } from '@gitlab/ui';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
@@ -72,7 +71,7 @@ export default {
       class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 flex-xl-nowrap gl-min-h-7"
     >
       <!-- Title area: Status icon (XL) and title -->
-      <div class="item-title d-flex align-items-xl-center mb-xl-0">
+      <div class="item-title d-flex align-items-xl-center mb-xl-0 gl-min-w-0">
         <div ref="iconElementXL">
           <gl-icon
             v-if="hasState"
@@ -85,7 +84,7 @@ export default {
           />
         </div>
         <gl-tooltip :target="() => $refs.iconElementXL">
-          <span v-html="stateTitle"></span>
+          <span v-html="stateTitle /* eslint-disable-line vue/no-v-html */"></span>
         </gl-tooltip>
         <gl-icon
           v-if="confidential"
@@ -111,7 +110,7 @@ export default {
             class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
           >
             <gl-tooltip :target="() => this.$refs.iconElement">
-              <span v-html="stateTitle"></span>
+              <span v-html="stateTitle /* eslint-disable-line vue/no-v-html */"></span>
             </gl-tooltip>
             <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
               itemPath
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 9ea48050079..77730ada9bb 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
@@ -15,6 +14,10 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MarkdownHeader from './header.vue';
 import MarkdownToolbar from './toolbar.vue';
 
+function cleanUpLine(content) {
+  return unescape(stripHtml(content).replace(/\\n/g, '%br').replace(/\n/g, ''));
+}
+
 export default {
   components: {
     GfmAutocomplete,
@@ -129,7 +132,7 @@ export default {
               return text;
             }
 
-            return unescape(stripHtml(richText).replace(/\n/g, ''));
+            return cleanUpLine(richText);
           })
           .join('\\n');
       }
@@ -141,7 +144,7 @@ export default {
           return text;
         }
 
-        return unescape(stripHtml(richText).replace(/\n/g, ''));
+        return cleanUpLine(richText);
       }
 
       return '';
@@ -272,6 +275,7 @@ export default {
       :can-suggest="canSuggest"
       :show-suggest-popover="showSuggestPopover"
       :suggestion-start-index="suggestionsStartIndex"
+      data-testid="markdownHeader"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
       @handleSuggestDismissed="() => $emit('handleSuggestDismissed')"
@@ -319,14 +323,20 @@ export default {
         v-show="previewMarkdown"
         ref="markdown-preview"
         class="js-vue-md-preview md md-preview-holder"
-        v-html="markdownPreview"
+        v-html="markdownPreview /* eslint-disable-line vue/no-v-html */"
       ></div>
     </template>
     <template v-if="previewMarkdown && !markdownPreviewLoading">
-      <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
+      <div
+        v-if="referencedCommands"
+        class="referenced-commands"
+        v-html="referencedCommands /* eslint-disable-line vue/no-v-html */"
+      ></div>
       <div v-if="shouldShowReferencedUsers" class="referenced-users">
         <gl-icon name="warning-solid" />
-        <span v-html="addMultipleToDiscussionWarning"></span>
+        <span
+          v-html="addMultipleToDiscussionWarning /* eslint-disable-line vue/no-v-html */"
+        ></span>
       </div>
     </template>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 065d9b1b5dd..5fdef0b1a23 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -39,7 +39,8 @@ export default {
     },
     defaultCommitMessage: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     inapplicableReason: {
       type: String,
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 7112295fa57..912aa8ce294 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -75,7 +75,7 @@ export default {
         variant="link"
         :track-experiment="$options.inviteMembersInComment"
         :trigger-source="$options.inviteMembersInComment"
-        data-track-event="comment_invite_click"
+        data-track-action="comment_invite_click"
       />
       <span class="uploading-progress-container hide">
         <gl-icon name="media" />
diff --git a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
index ad6f6e0e2e3..0b302f22062 100644
--- a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlLink, GlIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
@@ -92,7 +91,9 @@ export default {
     <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" />
 
     <span v-if="isLockedAndConfidential" ref="lockedAndConfidential">
-      <span v-html="confidentialAndLockedDiscussionText"></span>
+      <span
+        v-html="confidentialAndLockedDiscussionText /* eslint-disable-line vue/no-v-html */"
+      ></span>
       {{
         __("People without permission will never get a notification and won't be able to comment.")
       }}
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index c3d861d74bc..755e6f1f224 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -1,6 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
-
 /**
  * Common component to render a system note, icon and user information.
  *
@@ -97,6 +95,9 @@ export default {
   methods: {
     ...mapActions(['fetchDescriptionVersion', 'softDeleteDescriptionVersion']),
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
@@ -106,7 +107,7 @@ export default {
     :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
     class="note system-note note-wrapper"
   >
-    <div class="timeline-icon" v-html="iconHtml"></div>
+    <div v-safe-html:[$options.safeHtmlConfig]="iconHtml" class="timeline-icon"></div>
     <div class="timeline-content">
       <div class="note-header">
         <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id">
diff --git a/app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue b/app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue
index 8a67754993d..6867b5a75e3 100644
--- a/app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlAlert, GlBadge, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlBadge,
+  GlPagination,
+  GlTab,
+  GlTabs,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
 import Api from '~/api';
 import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -20,6 +27,9 @@ export default {
     GlTab,
     FilteredSearchBar,
   },
+  directives: {
+    SafeHtml,
+  },
   inject: {
     projectPath: {
       default: '',
@@ -265,8 +275,7 @@ export default {
 <template>
   <div class="incident-management-list">
     <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="$emit('error-alert-dismissed')">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <p v-html="serverErrorMessage || i18n.errorMsg"></p>
+      <p v-safe-html="serverErrorMessage || i18n.errorMsg"></p>
     </gl-alert>
 
     <div
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
index 69f43c9e464..36d3696ec36 100644
--- a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { isString } from 'lodash';
 import highlight from '~/lib/utils/highlight';
@@ -61,7 +60,7 @@ export default {
       <div
         :title="project.name"
         class="js-project-name text-truncate"
-        v-html="highlightedProjectName"
+        v-html="highlightedProjectName /* eslint-disable-line vue/no-v-html */"
       ></div>
     </div>
   </gl-button>
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index c63d91b78d3..4b21ec0330a 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { isEqual } from 'lodash';
 
 export default {
   name: 'TitleArea',
@@ -36,13 +37,21 @@ export default {
       metadataSlots: [],
     };
   },
-  async mounted() {
-    const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+  mounted() {
+    this.recalculateMetadataSlots();
+  },
+  updated() {
+    this.recalculateMetadataSlots();
+  },
+  methods: {
+    recalculateMetadataSlots() {
+      const METADATA_PREFIX = 'metadata-';
+      const metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
-    // we need to wait for next tick to ensure that dynamic names slots are picked up
-    await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+      if (!isEqual(metadataSlots, this.metadataSlots)) {
+        this.metadataSlots = metadataSlots;
+      }
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
index f21dea468cb..57cc25caa25 100644
--- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import awsCloudFormationImageUrl from 'images/aws-cloud-formation.png';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { getBaseURL, objectToQuery } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -22,6 +23,11 @@ export default {
       type: String,
       required: true,
     },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: awsCloudFormationImageUrl,
+    },
   },
   methods: {
     easyButtonUrl(easyButton) {
@@ -76,7 +82,7 @@ export default {
           <img
             :title="easyButton.stackName"
             :alt="easyButton.stackName"
-            src="/assets/aws-cloud-formation.png"
+            :src="imgSrc"
             width="46"
             height="46"
             class="gl-mt-2 gl-mr-5 gl-mb-6"
diff --git a/app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js b/app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js
new file mode 100644
index 00000000000..5242743ad30
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js
@@ -0,0 +1,26 @@
+import SettingsBlock from './settings_block.vue';
+
+export default {
+  component: SettingsBlock,
+  title: 'vue_shared/components/settings/settings_block',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { SettingsBlock },
+  props: Object.keys(argTypes),
+  template: `
+  <settings-block v-bind="$props">
+    <template #title>Settings section title</template>
+    <template #description>Settings section description</template>
+    <template #default>
+      <p>Content</p>
+      <p>More content</p>
+      <p>Content</p>
+      <p>More content...</p>
+      <p>Content</p>
+    </template>
+  </settings-block>
+  `,
+});
+
+export const Default = Template.bind({});
diff --git a/app/assets/javascripts/vue_shared/components/settings/settings_block.vue b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue
index 92ae4575c52..e75fedbb1d7 100644
--- a/app/assets/javascripts/vue_shared/components/settings/settings_block.vue
+++ b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue
@@ -1,5 +1,7 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+
 import { __ } from '~/locale';
 
 export default {
@@ -15,35 +17,99 @@ export default {
       default: false,
       required: false,
     },
+    collapsible: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
   },
   data() {
     return {
-      sectionExpanded: false,
+      // Non-collapsible sections should always be expanded.
+      // For collapsible sections, fall back to defaultExpanded.
+      sectionExpanded: !this.collapsible || this.defaultExpanded,
     };
   },
   computed: {
-    expanded() {
-      return this.defaultExpanded || this.sectionExpanded;
-    },
     toggleText() {
-      return this.expanded ? __('Collapse') : __('Expand');
+      const { collapseText, expandText } = this.$options.i18n;
+      return this.sectionExpanded ? collapseText : expandText;
+    },
+    settingsContentId() {
+      return uniqueId('settings_content_');
     },
+    settingsLabelId() {
+      return uniqueId('settings_label_');
+    },
+    toggleButtonAriaLabel() {
+      const { collapseAriaLabel, expandAriaLabel } = this.$options.i18n;
+      return this.sectionExpanded ? collapseAriaLabel : expandAriaLabel;
+    },
+    ariaExpanded() {
+      return String(this.sectionExpanded);
+    },
+  },
+  methods: {
+    toggleSectionExpanded() {
+      this.sectionExpanded = !this.sectionExpanded;
+
+      if (this.sectionExpanded) {
+        this.$refs.settingsContent.focus();
+      }
+    },
+  },
+  i18n: {
+    collapseText: __('Collapse'),
+    expandText: __('Expand'),
+    collapseAriaLabel: __('Collapse settings section'),
+    expandAriaLabel: __('Expand settings section'),
   },
 };
 </script>
 
 <template>
-  <section class="settings" :class="{ 'no-animate': !slideAnimated, expanded }">
+  <section class="settings" :class="{ 'no-animate': !slideAnimated, expanded: sectionExpanded }">
     <div class="settings-header">
-      <h4><slot name="title"></slot></h4>
-      <gl-button @click="sectionExpanded = !sectionExpanded">
+      <h4>
+        <span
+          v-if="collapsible"
+          :id="settingsLabelId"
+          role="button"
+          tabindex="0"
+          class="gl-cursor-pointer"
+          :aria-controls="settingsContentId"
+          :aria-expanded="ariaExpanded"
+          data-testid="section-title-button"
+          @click="toggleSectionExpanded"
+          @keydown.enter.space="toggleSectionExpanded"
+        >
+          <slot name="title"></slot>
+        </span>
+        <template v-else>
+          <slot name="title"></slot>
+        </template>
+      </h4>
+      <gl-button
+        v-if="collapsible"
+        :aria-controls="settingsContentId"
+        :aria-expanded="ariaExpanded"
+        :aria-label="toggleButtonAriaLabel"
+        @click="toggleSectionExpanded"
+      >
         {{ toggleText }}
       </gl-button>
       <p>
         <slot name="description"></slot>
       </p>
     </div>
-    <div class="settings-content">
+    <div
+      :id="settingsContentId"
+      ref="settingsContent"
+      :aria-labelledby="settingsLabelId"
+      tabindex="-1"
+      role="region"
+      class="settings-content"
+    >
       <slot></slot>
     </div>
   </section>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue
index 46ccb9470e5..35ac9ef8565 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLabel } from '@gitlab/ui';
+import { sortBy } from 'lodash';
 import { mapState } from 'vuex';
 
 import { isScopedLabel } from '~/lib/utils/common_utils';
@@ -23,6 +24,9 @@ export default {
       'labelsFilterBasePath',
       'labelsFilterParam',
     ]),
+    sortedSelectedLabels() {
+      return sortBy(this.selectedLabels, (label) => (isScopedLabel(label) ? 0 : 1));
+    },
   },
   methods: {
     labelFilterUrl(label) {
@@ -47,7 +51,7 @@ export default {
     <span v-if="!selectedLabels.length" class="text-secondary">
       <slot></slot>
     </span>
-    <template v-for="label in selectedLabels" v-else>
+    <template v-for="label in sortedSelectedLabels" v-else>
       <gl-label
         :key="label.id"
         data-qa-selector="selected_label_content"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
index e8fdf4bb0c2..dd40add6376 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
@@ -56,7 +56,7 @@ export default {
     const labelLink = h(
       GlLink,
       {
-        class: 'gl-display-flex gl-align-items-center label-item gl-text-black-normal',
+        class: 'gl-display-flex gl-align-items-center label-item gl-text-body',
         on: {
           click: () => {
             listeners.clickLabel(label);
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_button.vue
deleted file mode 100644
index 60111210f5d..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_button.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-import { GlButton, GlIcon } from '@gitlab/ui';
-import { mapActions, mapGetters } from 'vuex';
-
-export default {
-  components: {
-    GlButton,
-    GlIcon,
-  },
-  computed: {
-    ...mapGetters([
-      'dropdownButtonText',
-      'isDropdownVariantStandalone',
-      'isDropdownVariantEmbedded',
-    ]),
-  },
-  methods: {
-    ...mapActions(['toggleDropdownContents']),
-    handleButtonClick(e) {
-      if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) {
-        this.toggleDropdownContents();
-      }
-
-      if (this.isDropdownVariantStandalone) {
-        e.stopPropagation();
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    class="labels-select-dropdown-button js-dropdown-button w-100 text-left"
-    @click="handleButtonClick"
-  >
-    <span class="dropdown-toggle-text gl-pointer-events-none flex-fill">
-      {{ dropdownButtonText }}
-    </span>
-    <gl-icon name="chevron-down" class="gl-pointer-events-none float-right" />
-  </gl-button>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
index 6694e349b6e..0fcc67c0ffa 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue
@@ -1,22 +1,21 @@
 <script>
-import { GlButton } from '@gitlab/ui';
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
 
 import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
+import { isDropdownVariantSidebar, isDropdownVariantEmbedded } from './utils';
 
 export default {
   components: {
     DropdownContentsLabelsView,
     DropdownContentsCreateView,
     GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlLink,
   },
+  inject: ['allowLabelCreate', 'labelsManagePath'],
   props: {
-    renderOnTop: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     labelsCreateTitle: {
       type: String,
       required: true,
@@ -33,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    dropdownButtonText: {
+      type: String,
+      required: true,
+    },
     footerCreateLabelTitle: {
       type: String,
       required: true,
@@ -41,70 +44,105 @@ export default {
       type: String,
       required: true,
     },
+    variant: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDropdownContentsCreateView: false,
+    };
   },
   computed: {
-    ...mapState(['showDropdownContentsCreateView']),
-    ...mapGetters(['isDropdownVariantSidebar', 'isDropdownVariantEmbedded']),
     dropdownContentsView() {
       if (this.showDropdownContentsCreateView) {
         return 'dropdown-contents-create-view';
       }
       return 'dropdown-contents-labels-view';
     },
-    directionStyle() {
-      const bottom = this.isDropdownVariantSidebar ? '3rem' : '2rem';
-      return this.renderOnTop ? { bottom } : {};
-    },
     dropdownTitle() {
       return this.showDropdownContentsCreateView ? this.labelsCreateTitle : this.labelsListTitle;
     },
+    showDropdownFooter() {
+      return (
+        !this.showDropdownContentsCreateView &&
+        (this.isDropdownVariantSidebar(this.variant) ||
+          this.isDropdownVariantEmbedded(this.variant))
+      );
+    },
   },
   methods: {
-    ...mapActions(['toggleDropdownContentsCreateView', 'toggleDropdownContents']),
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
+    toggleDropdownContentsCreateView() {
+      this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView;
+    },
+    toggleDropdownContent() {
+      this.toggleDropdownContentsCreateView();
+      // Required to recalculate dropdown position as its size changes
+      this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate();
+    },
+    isDropdownVariantSidebar,
+    isDropdownVariantEmbedded,
   },
 };
 </script>
 
 <template>
-  <div
-    class="labels-select-dropdown-contents gl-w-full gl-my-2 gl-py-3 gl-rounded-base gl-absolute"
+  <gl-dropdown
+    ref="dropdown"
+    :text="dropdownButtonText"
+    class="gl-w-full gl-mt-2"
     data-qa-selector="labels_dropdown_content"
-    :style="directionStyle"
   >
-    <div
-      v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
-      class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
-      data-testid="dropdown-title"
-    >
-      <gl-button
-        v-if="showDropdownContentsCreateView"
-        :aria-label="__('Go back')"
-        variant="link"
-        size="small"
-        class="js-btn-back dropdown-header-button p-0"
-        icon="arrow-left"
-        @click="toggleDropdownContentsCreateView"
-      />
-      <span class="flex-grow-1">{{ dropdownTitle }}</span>
-      <gl-button
-        :aria-label="__('Close')"
-        variant="link"
-        size="small"
-        class="dropdown-header-button gl-p-0!"
-        icon="close"
-        @click="toggleDropdownContents"
-      />
-    </div>
+    <template #header>
+      <div
+        v-if="isDropdownVariantSidebar(variant) || isDropdownVariantEmbedded(variant)"
+        class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
+      >
+        <gl-button
+          v-if="showDropdownContentsCreateView"
+          :aria-label="__('Go back')"
+          variant="link"
+          size="small"
+          class="js-btn-back dropdown-header-button gl-p-0"
+          icon="arrow-left"
+          data-testid="go-back-button"
+          @click.stop="toggleDropdownContent"
+        />
+        <span class="gl-flex-grow-1">{{ dropdownTitle }}</span>
+        <gl-button
+          :aria-label="__('Close')"
+          variant="link"
+          size="small"
+          class="dropdown-header-button gl-p-0!"
+          icon="close"
+          @click="$emit('closeDropdown')"
+        />
+      </div>
+    </template>
     <component
       :is="dropdownContentsView"
       :selected-labels="selectedLabels"
       :allow-multiselect="allowMultiselect"
-      :labels-list-title="labelsListTitle"
-      :footer-create-label-title="footerCreateLabelTitle"
-      :footer-manage-label-title="footerManageLabelTitle"
       @hideCreateView="toggleDropdownContentsCreateView"
-      @closeDropdown="$emit('closeDropdown', $event)"
-      @toggleDropdownContentsCreateView="toggleDropdownContentsCreateView"
+      @setLabels="$emit('setLabels', $event)"
     />
-  </div>
+    <template #footer>
+      <div v-if="showDropdownFooter" data-testid="dropdown-footer">
+        <gl-dropdown-item
+          v-if="allowLabelCreate"
+          data-testid="create-label-button"
+          @click.native.capture.stop="toggleDropdownContent"
+        >
+          {{ footerCreateLabelTitle }}
+        </gl-dropdown-item>
+        <gl-dropdown-item :href="labelsManagePath" @click.native.capture.stop>
+          {{ footerManageLabelTitle }}
+        </gl-dropdown-item>
+      </div>
+    </template>
+  </gl-dropdown>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
index 4651e7a1576..2e31b386fdd 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
@@ -1,8 +1,10 @@
 <script>
 import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import produce from 'immer';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import createLabelMutation from './graphql/create_label.mutation.graphql';
+import projectLabelsQuery from './graphql/project_labels.query.graphql';
 
 const errorMessage = __('Error creating label.');
 
@@ -47,6 +49,25 @@ export default {
     handleColorClick(color) {
       this.selectedColor = this.getColorCode(color);
     },
+    updateLabelsInCache(store, label) {
+      const sourceData = store.readQuery({
+        query: projectLabelsQuery,
+        variables: { fullPath: this.projectPath, searchTerm: '' },
+      });
+
+      const collator = new Intl.Collator('en');
+      const data = produce(sourceData, (draftData) => {
+        const { nodes } = draftData.workspace.labels;
+        nodes.push(label);
+        nodes.sort((a, b) => collator.compare(a.title, b.title));
+      });
+
+      store.writeQuery({
+        query: projectLabelsQuery,
+        variables: { fullPath: this.projectPath, searchTerm: '' },
+        data,
+      });
+    },
     async createLabel() {
       this.labelCreateInProgress = true;
       try {
@@ -59,6 +80,14 @@ export default {
             color: this.selectedColor,
             projectPath: this.projectPath,
           },
+          update: (
+            store,
+            {
+              data: {
+                labelCreate: { label },
+              },
+            },
+          ) => this.updateLabelsInCache(store, label),
         });
         if (labelCreate.errors.length) {
           createFlash({ message: errorMessage });
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
index ffa37424c2c..857367a0721 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
@@ -1,24 +1,23 @@
 <script>
-import { GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import { __ } from '~/locale';
-import { DropdownVariant } from './constants';
 import projectLabelsQuery from './graphql/project_labels.query.graphql';
 import LabelItem from './label_item.vue';
 
 export default {
   components: {
+    GlDropdownForm,
+    GlDropdownItem,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlLink,
     LabelItem,
   },
-  inject: ['projectPath', 'allowLabelCreate', 'labelsManagePath', 'variant'],
+  inject: ['projectPath'],
   props: {
     selectedLabels: {
       type: Array,
@@ -28,24 +27,11 @@ export default {
       type: Boolean,
       required: true,
     },
-    labelsListTitle: {
-      type: String,
-      required: true,
-    },
-    footerCreateLabelTitle: {
-      type: String,
-      required: true,
-    },
-    footerManageLabelTitle: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
       searchKey: '',
       labels: [],
-      currentHighlightItem: -1,
       localSelectedLabels: [...this.selectedLabels],
     };
   },
@@ -74,12 +60,6 @@ export default {
     },
   },
   computed: {
-    isDropdownVariantSidebar() {
-      return this.variant === DropdownVariant.Sidebar;
-    },
-    isDropdownVariantEmbedded() {
-      return this.variant === DropdownVariant.Embedded;
-    },
     labelsFetchInProgress() {
       return this.$apollo.queries.labels.loading;
     },
@@ -98,21 +78,11 @@ export default {
       return Boolean(this.searchKey) && this.visibleLabels.length === 0;
     },
   },
-  watch: {
-    searchKey(value) {
-      // When there is search string present
-      // and there are matching results,
-      // highlight first item by default.
-      if (value && this.visibleLabels.length) {
-        this.currentHighlightItem = 0;
-      }
-    },
-  },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
   },
   beforeDestroy() {
-    this.$emit('closeDropdown', this.localSelectedLabels);
+    this.$emit('setLabels', this.localSelectedLabels);
     this.debouncedSearchKeyUpdate.cancel();
   },
   methods: {
@@ -150,33 +120,6 @@ export default {
         });
       }
     },
-    /**
-     * This method enables keyboard navigation support for
-     * the dropdown.
-     */
-    handleKeyDown(e) {
-      if (e.keyCode === UP_KEY_CODE && this.currentHighlightItem > 0) {
-        this.currentHighlightItem -= 1;
-      } else if (
-        e.keyCode === DOWN_KEY_CODE &&
-        this.currentHighlightItem < this.visibleLabels.length - 1
-      ) {
-        this.currentHighlightItem += 1;
-      } else if (e.keyCode === ENTER_KEY_CODE && this.currentHighlightItem > -1) {
-        this.updateSelectedLabels(this.visibleLabels[this.currentHighlightItem]);
-        this.searchKey = '';
-      } else if (e.keyCode === ESC_KEY_CODE) {
-        this.$emit('closeDropdown', this.localSelectedLabels);
-      }
-
-      if (e.keyCode !== ESC_KEY_CODE) {
-        // Scroll the list only after highlighting
-        // styles are rendered completely.
-        this.$nextTick(() => {
-          this.scrollIntoViewIfNeeded();
-        });
-      }
-    },
     handleLabelClick(label) {
       this.updateSelectedLabels(label);
       if (!this.allowMultiselect) {
@@ -191,69 +134,41 @@ export default {
 </script>
 
 <template>
-  <div
-    class="labels-select-contents-list js-labels-list"
-    data-testid="dropdown-wrapper"
-    @keydown="handleKeyDown"
-  >
-    <div class="dropdown-input" @click.stop="() => {}">
-      <gl-search-box-by-type
-        ref="searchInput"
-        :value="searchKey"
-        :disabled="labelsFetchInProgress"
-        data-qa-selector="dropdown_input_field"
-        data-testid="dropdown-input-field"
-        @input="debouncedSearchKeyUpdate"
-      />
-    </div>
-    <div ref="labelsListContainer" class="dropdown-content" data-testid="dropdown-content">
+  <gl-dropdown-form class="labels-select-contents-list js-labels-list">
+    <gl-search-box-by-type
+      ref="searchInput"
+      :value="searchKey"
+      :disabled="labelsFetchInProgress"
+      data-qa-selector="dropdown_input_field"
+      data-testid="dropdown-input-field"
+      @input="debouncedSearchKeyUpdate"
+    />
+    <div ref="labelsListContainer" data-testid="dropdown-content">
       <gl-loading-icon
         v-if="labelsFetchInProgress"
         class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full"
         size="md"
       />
-      <ul v-else class="list-unstyled gl-mb-0 gl-word-break-word" data-testid="labels-list">
-        <label-item
-          v-for="(label, index) in visibleLabels"
+      <template v-else>
+        <gl-dropdown-item
+          v-for="label in visibleLabels"
           :key="label.id"
-          :label="label"
-          :is-label-set="isLabelSelected(label)"
-          :highlight="index === currentHighlightItem"
-          @clickLabel="handleLabelClick(label)"
-        />
-        <li
+          :is-checked="isLabelSelected(label)"
+          :is-check-centered="true"
+          :is-check-item="true"
+          data-testid="labels-list"
+          @click.native.capture.stop="handleLabelClick(label)"
+        >
+          <label-item :label="label" />
+        </gl-dropdown-item>
+        <gl-dropdown-item
           v-show="showNoMatchingResultsMessage"
           class="gl-p-3 gl-text-center"
           data-testid="no-results"
         >
           {{ __('No matching results') }}
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
-      class="dropdown-footer"
-      data-testid="dropdown-footer"
-    >
-      <ul class="list-unstyled">
-        <li v-if="allowLabelCreate">
-          <gl-link
-            class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item"
-            data-testid="create-label-button"
-            @click="$emit('toggleDropdownContentsCreateView')"
-          >
-            {{ footerCreateLabelTitle }}
-          </gl-link>
-        </li>
-        <li>
-          <gl-link
-            :href="labelsManagePath"
-            class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item"
-          >
-            {{ footerManageLabelTitle }}
-          </gl-link>
-        </li>
-      </ul>
+        </gl-dropdown-item>
+      </template>
     </div>
-  </div>
+  </gl-dropdown-form>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
deleted file mode 100644
index 46edfa1c42a..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
-import { mapState, mapActions } from 'vuex';
-
-export default {
-  components: {
-    GlButton,
-    GlLoadingIcon,
-  },
-  props: {
-    labelsSelectInProgress: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['allowLabelEdit', 'labelsFetchInProgress']),
-  },
-  methods: {
-    ...mapActions(['toggleDropdownContents']),
-  },
-};
-</script>
-
-<template>
-  <div class="title hide-collapsed gl-mb-3">
-    {{ __('Labels') }}
-    <template v-if="allowLabelEdit">
-      <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
-      <gl-button
-        category="tertiary"
-        size="small"
-        class="float-right js-sidebar-dropdown-toggle gl-mr-n2"
-        data-qa-selector="labels_edit_button"
-        @click="toggleDropdownContents"
-        >{{ __('Edit') }}</gl-button
-      >
-    </template>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
index 58a940bca3b..71d3d87cce5 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLabel } from '@gitlab/ui';
+import { sortBy } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 
@@ -7,6 +8,7 @@ export default {
   components: {
     GlLabel,
   },
+  inject: ['allowScopedLabels'],
   props: {
     disableLabels: {
       type: Boolean,
@@ -21,10 +23,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    allowScopedLabels: {
-      type: Boolean,
-      required: true,
-    },
     labelsFilterBasePath: {
       type: String,
       required: true,
@@ -34,6 +32,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    sortedSelectedLabels() {
+      return sortBy(this.selectedLabels, (label) => (isScopedLabel(label) ? 0 : 1));
+    },
+  },
   methods: {
     labelFilterUrl(label) {
       return `${this.labelsFilterBasePath}?${this.labelsFilterParam}[]=${encodeURIComponent(
@@ -63,7 +66,7 @@ export default {
     </span>
     <template v-else>
       <gl-label
-        v-for="label in selectedLabels"
+        v-for="label in sortedSelectedLabels"
         :key="label.id"
         data-qa-selector="selected_label_content"
         :data-qa-label-name="label.title"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql
index 9aa4f5d165e..eb478645a03 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql
@@ -6,9 +6,7 @@ mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPa
       id
       color
       description
-      descriptionHtml
       title
-      textColor
     }
     errors
   }
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue
index e8fdf4bb0c2..f27f0b4e34c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue
@@ -1,82 +1,21 @@
 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-
 export default {
-  functional: true,
   props: {
     label: {
       type: Object,
       required: true,
     },
-    isLabelSet: {
-      type: Boolean,
-      required: true,
-    },
-    highlight: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  render(h, { props, listeners }) {
-    const { label, highlight, isLabelSet } = props;
-
-    const labelColorBox = h('span', {
-      class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
-      style: {
-        backgroundColor: label.color,
-      },
-      attrs: {
-        'data-testid': 'label-color-box',
-      },
-    });
-
-    const checkedIcon = h(GlIcon, {
-      class: {
-        'gl-mr-3 gl-flex-shrink-0': true,
-        hidden: !isLabelSet,
-      },
-      props: {
-        name: 'mobile-issue-close',
-      },
-    });
-
-    const noIcon = h('span', {
-      class: {
-        'gl-mr-5 gl-pr-3': true,
-        hidden: isLabelSet,
-      },
-      attrs: {
-        'data-testid': 'no-icon',
-      },
-    });
-
-    const labelTitle = h('span', label.title);
-
-    const labelLink = h(
-      GlLink,
-      {
-        class: 'gl-display-flex gl-align-items-center label-item gl-text-black-normal',
-        on: {
-          click: () => {
-            listeners.clickLabel(label);
-          },
-        },
-      },
-      [noIcon, checkedIcon, labelColorBox, labelTitle],
-    );
-
-    return h(
-      'li',
-      {
-        class: {
-          'gl-display-block': true,
-          'gl-text-left': true,
-          'is-focused': highlight,
-        },
-      },
-      [labelLink],
-    );
   },
 };
 </script>
+
+<template>
+  <div>
+    <span
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
+      :style="{ 'background-color': label.color }"
+      data-testid="label-color-box"
+    ></span>
+    <span>{{ label.title }}</span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
index 0499dfe468f..3c834770563 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
@@ -1,57 +1,40 @@
 <script>
-import $ from 'jquery';
 import Vue from 'vue';
-import Vuex, { mapState, mapActions, mapGetters } from 'vuex';
-import { isInViewport } from '~/lib/utils/common_utils';
+import Vuex from 'vuex';
 import { __ } from '~/locale';
-
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import { DropdownVariant } from './constants';
-import DropdownButton from './dropdown_button.vue';
 import DropdownContents from './dropdown_contents.vue';
-import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
 import issueLabelsQuery from './graphql/issue_labels.query.graphql';
-import labelsSelectModule from './store';
+import {
+  isDropdownVariantSidebar,
+  isDropdownVariantStandalone,
+  isDropdownVariantEmbedded,
+} from './utils';
 
 Vue.use(Vuex);
 
 export default {
-  store: new Vuex.Store(labelsSelectModule()),
   components: {
-    DropdownTitle,
     DropdownValue,
-    DropdownButton,
     DropdownContents,
     DropdownValueCollapsed,
+    SidebarEditableItem,
   },
-  inject: ['iid', 'projectPath'],
+  inject: ['iid', 'projectPath', 'allowLabelEdit'],
   props: {
     allowLabelRemove: {
       type: Boolean,
       required: false,
       default: false,
     },
-    allowLabelEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    allowLabelCreate: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     allowMultiselect: {
       type: Boolean,
       required: false,
       default: false,
     },
-    allowScopedLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     variant: {
       type: String,
       required: false,
@@ -67,16 +50,6 @@ export default {
       required: false,
       default: false,
     },
-    labelsFetchPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    labelsManagePath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     labelsFilterBasePath: {
       type: String,
       required: false,
@@ -138,149 +111,25 @@ export default {
       },
     },
   },
-  computed: {
-    ...mapState(['showDropdownButton', 'showDropdownContents']),
-    ...mapGetters([
-      'isDropdownVariantSidebar',
-      'isDropdownVariantStandalone',
-      'isDropdownVariantEmbedded',
-    ]),
-    dropdownButtonVisible() {
-      return this.isDropdownVariantSidebar ? this.showDropdownButton : true;
-    },
-  },
-  watch: {
-    selectedLabels(selectedLabels) {
-      this.setInitialState({
-        selectedLabels,
-      });
-    },
-    showDropdownContents(showDropdownContents) {
-      this.setContentIsOnViewport(showDropdownContents);
-    },
-    isEditing(newVal) {
-      if (newVal) {
-        this.toggleDropdownContents();
-      }
-    },
-  },
-  mounted() {
-    this.setInitialState({
-      variant: this.variant,
-      allowLabelRemove: this.allowLabelRemove,
-      allowLabelEdit: this.allowLabelEdit,
-      allowLabelCreate: this.allowLabelCreate,
-      allowMultiselect: this.allowMultiselect,
-      allowScopedLabels: this.allowScopedLabels,
-      dropdownButtonText: this.dropdownButtonText,
-      selectedLabels: this.selectedLabels,
-      labelsFetchPath: this.labelsFetchPath,
-      labelsManagePath: this.labelsManagePath,
-      labelsFilterBasePath: this.labelsFilterBasePath,
-      labelsFilterParam: this.labelsFilterParam,
-      labelsListTitle: this.labelsListTitle,
-      footerCreateLabelTitle: this.footerCreateLabelTitle,
-      footerManageLabelTitle: this.footerManageLabelTitle,
-    });
-
-    this.$store.subscribeAction({
-      after: this.handleVuexActionDispatch,
-    });
-
-    document.addEventListener('mousedown', this.handleDocumentMousedown);
-    document.addEventListener('click', this.handleDocumentClick);
-  },
-  beforeDestroy() {
-    document.removeEventListener('mousedown', this.handleDocumentMousedown);
-    document.removeEventListener('click', this.handleDocumentClick);
-  },
   methods: {
-    ...mapActions(['setInitialState', 'toggleDropdownContents']),
-    /**
-     * This method stores a mousedown event's target.
-     * Required by the click listener because the click
-     * event itself has no reference to this element.
-     */
-    handleDocumentMousedown({ target }) {
-      this.mousedownTarget = target;
-    },
-    /**
-     * This method listens for document-wide click event
-     * and toggle dropdown if user clicks anywhere outside
-     * the dropdown while dropdown is visible.
-     */
-    handleDocumentClick({ target }) {
-      // We also perform the toggle exception check for the
-      // last mousedown event's target to avoid hiding the
-      // box when the mousedown happened inside the box and
-      // only the mouseup did not.
-      if (
-        this.showDropdownContents &&
-        !this.preventDropdownToggleOnClick(target) &&
-        !this.preventDropdownToggleOnClick(this.mousedownTarget)
-      ) {
-        this.toggleDropdownContents();
-      }
-    },
-    /**
-     * This method checks whether a given click target
-     * should prevent the dropdown from being toggled.
-     */
-    preventDropdownToggleOnClick(target) {
-      // This approach of element detection is needed
-      // as the dropdown wrapper is not using `GlDropdown` as
-      // it will also require us to use `BDropdownForm`
-      // which is yet to be implemented in GitLab UI.
-      const hasExceptionClass = [
-        'js-dropdown-button',
-        'js-btn-cancel-create',
-        'js-sidebar-dropdown-toggle',
-      ].some(
-        (className) =>
-          target?.classList.contains(className) ||
-          target?.parentElement?.classList.contains(className),
-      );
-
-      const hasExceptionParent = ['.js-btn-back', '.js-labels-list'].some(
-        (className) => $(target).parents(className).length,
-      );
-
-      const isInDropdownButtonCollapsed = this.$refs.dropdownButtonCollapsed?.$el.contains(target);
-
-      const isInDropdownContents = this.$refs.dropdownContents?.$el.contains(target);
-
-      return (
-        hasExceptionClass ||
-        hasExceptionParent ||
-        isInDropdownButtonCollapsed ||
-        isInDropdownContents
-      );
-    },
     handleDropdownClose(labels) {
-      // Only emit label updates if there are any labels to update
-      // on UI.
-      if (this.showDropdownContents) {
-        this.toggleDropdownContents();
-      }
       if (labels.length) this.$emit('updateSelectedLabels', labels);
       this.$emit('onDropdownClose');
     },
+    collapseDropdown() {
+      this.$refs.editable.collapse();
+    },
     handleCollapsedValueClick() {
       this.$emit('toggleCollapse');
     },
-    setContentIsOnViewport(showDropdownContents) {
-      if (!showDropdownContents) {
-        this.contentIsOnViewport = true;
-
-        return;
-      }
-
+    showDropdown() {
       this.$nextTick(() => {
-        if (this.$refs.dropdownContents) {
-          this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el);
-        }
+        this.$refs.dropdownContents.showDropdown();
       });
     },
+    isDropdownVariantSidebar,
+    isDropdownVariantStandalone,
+    isDropdownVariantEmbedded,
   },
 };
 </script>
@@ -289,58 +138,63 @@ export default {
   <div
     class="labels-select-wrapper position-relative"
     :class="{
-      'is-standalone': isDropdownVariantStandalone,
-      'is-embedded': isDropdownVariantEmbedded,
+      'is-standalone': isDropdownVariantStandalone(variant),
+      'is-embedded': isDropdownVariantEmbedded(variant),
     }"
   >
-    <template v-if="isDropdownVariantSidebar">
+    <template v-if="isDropdownVariantSidebar(variant)">
       <dropdown-value-collapsed
         ref="dropdownButtonCollapsed"
         :labels="issueLabels"
         @onValueClick="handleCollapsedValueClick"
       />
-      <dropdown-title
-        :allow-label-edit="allowLabelEdit"
-        :labels-select-in-progress="labelsSelectInProgress"
-      />
-      <dropdown-value
-        :disable-labels="labelsSelectInProgress"
-        :selected-labels="issueLabels"
-        :allow-label-remove="allowLabelRemove"
-        :allow-scoped-labels="allowScopedLabels"
-        :labels-filter-base-path="labelsFilterBasePath"
-        :labels-filter-param="labelsFilterParam"
-        @onLabelRemove="$emit('onLabelRemove', $event)"
+      <sidebar-editable-item
+        ref="editable"
+        :title="__('Labels')"
+        :loading="labelsSelectInProgress"
+        :can-edit="allowLabelEdit"
+        @open="showDropdown"
       >
-        <slot></slot>
-      </dropdown-value>
-      <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" />
-      <dropdown-contents
-        v-if="dropdownButtonVisible && showDropdownContents"
-        ref="dropdownContents"
-        :allow-multiselect="allowMultiselect"
-        :labels-list-title="labelsListTitle"
-        :footer-create-label-title="footerCreateLabelTitle"
-        :footer-manage-label-title="footerManageLabelTitle"
-        :render-on-top="!contentIsOnViewport"
-        :labels-create-title="labelsCreateTitle"
-        :selected-labels="selectedLabels"
-        @closeDropdown="handleDropdownClose"
-      />
-    </template>
-    <template v-if="isDropdownVariantStandalone || isDropdownVariantEmbedded">
-      <dropdown-button v-show="dropdownButtonVisible" />
-      <dropdown-contents
-        v-if="dropdownButtonVisible && showDropdownContents"
-        ref="dropdownContents"
-        :allow-multiselect="allowMultiselect"
-        :labels-list-title="labelsListTitle"
-        :footer-create-label-title="footerCreateLabelTitle"
-        :footer-manage-label-title="footerManageLabelTitle"
-        :render-on-top="!contentIsOnViewport"
-        :selected-labels="selectedLabels"
-        @closeDropdown="handleDropdownClose"
-      />
+        <template #collapsed>
+          <dropdown-value
+            :disable-labels="labelsSelectInProgress"
+            :selected-labels="issueLabels"
+            :allow-label-remove="allowLabelRemove"
+            :labels-filter-base-path="labelsFilterBasePath"
+            :labels-filter-param="labelsFilterParam"
+            @onLabelRemove="$emit('onLabelRemove', $event)"
+          >
+            <slot></slot>
+          </dropdown-value>
+        </template>
+        <template #default="{ edit }">
+          <dropdown-value
+            :disable-labels="labelsSelectInProgress"
+            :selected-labels="issueLabels"
+            :allow-label-remove="allowLabelRemove"
+            :labels-filter-base-path="labelsFilterBasePath"
+            :labels-filter-param="labelsFilterParam"
+            class="gl-mb-2"
+            @onLabelRemove="$emit('onLabelRemove', $event)"
+          >
+            <slot></slot>
+          </dropdown-value>
+          <dropdown-contents
+            v-if="edit"
+            ref="dropdownContents"
+            :dropdown-button-text="dropdownButtonText"
+            :allow-multiselect="allowMultiselect"
+            :labels-list-title="labelsListTitle"
+            :footer-create-label-title="footerCreateLabelTitle"
+            :footer-manage-label-title="footerManageLabelTitle"
+            :labels-create-title="labelsCreateTitle"
+            :selected-labels="selectedLabels"
+            :variant="variant"
+            @closeDropdown="collapseDropdown"
+            @setLabels="handleDropdownClose"
+          />
+        </template>
+      </sidebar-editable-item>
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
deleted file mode 100644
index b3d4a204a81..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as types from './mutation_types';
-
-export const setInitialState = ({ commit }, props) => commit(types.SET_INITIAL_STATE, props);
-
-export const toggleDropdownButton = ({ commit }) => commit(types.TOGGLE_DROPDOWN_BUTTON);
-export const toggleDropdownContents = ({ commit }) => commit(types.TOGGLE_DROPDOWN_CONTENTS);
-
-export const toggleDropdownContentsCreateView = ({ commit }) =>
-  commit(types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW);
-
-export const updateSelectedLabels = ({ commit }, labels) =>
-  commit(types.UPDATE_SELECTED_LABELS, { labels });
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js
deleted file mode 100644
index d14f96720b7..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/getters.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { __, s__, sprintf } from '~/locale';
-import { DropdownVariant } from '../constants';
-
-/**
- * Returns string representing current labels
- * selection on dropdown button.
- *
- * @param {object} state
- */
-export const dropdownButtonText = (state, getters) => {
-  const selectedLabels = getters.isDropdownVariantSidebar
-    ? state.labels.filter((label) => label.set)
-    : state.selectedLabels;
-
-  if (!selectedLabels.length) {
-    return state.dropdownButtonText || __('Label');
-  } else if (selectedLabels.length > 1) {
-    return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
-      firstLabelName: selectedLabels[0].title,
-      remainingLabelCount: selectedLabels.length - 1,
-    });
-  }
-  return selectedLabels[0].title;
-};
-
-/**
- * Returns array containing only label IDs from
- * selectedLabels array.
- * @param {object} state
- */
-export const selectedLabelsList = (state) => state.selectedLabels.map((label) => label.id);
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `sidebar`
- * @param {object} state
- */
-export const isDropdownVariantSidebar = (state) => state.variant === DropdownVariant.Sidebar;
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `standalone`
- * @param {object} state
- */
-export const isDropdownVariantStandalone = (state) => state.variant === DropdownVariant.Standalone;
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `embedded`
- * @param {object} state
- */
-export const isDropdownVariantEmbedded = (state) => state.variant === DropdownVariant.Embedded;
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js
deleted file mode 100644
index 5f61cb732c8..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-
-export default () => ({
-  namespaced: true,
-  state: state(),
-  actions,
-  getters,
-  mutations,
-});
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
deleted file mode 100644
index bd71c3b85f1..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutation_types.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
-export const TOGGLE_DROPDOWN_BUTTON = 'TOGGLE_DROPDOWN_VISIBILITY';
-export const TOGGLE_DROPDOWN_CONTENTS = 'TOGGLE_DROPDOWN_CONTENTS';
-
-export const UPDATE_SELECTED_LABELS = 'UPDATE_SELECTED_LABELS';
-
-export const TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW = 'TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW';
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
deleted file mode 100644
index 45ec4d7ae04..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/mutations.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils';
-import { DropdownVariant } from '../constants';
-import * as types from './mutation_types';
-
-export default {
-  [types.SET_INITIAL_STATE](state, props) {
-    Object.assign(state, { ...props });
-  },
-
-  [types.TOGGLE_DROPDOWN_BUTTON](state) {
-    state.showDropdownButton = !state.showDropdownButton;
-  },
-
-  [types.TOGGLE_DROPDOWN_CONTENTS](state) {
-    if (state.variant === DropdownVariant.Sidebar) {
-      state.showDropdownButton = !state.showDropdownButton;
-    }
-    state.showDropdownContents = !state.showDropdownContents;
-    // Ensure that Create View is hidden by default
-    // when dropdown contents are revealed.
-    if (state.showDropdownContents) {
-      state.showDropdownContentsCreateView = false;
-    }
-  },
-
-  [types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW](state) {
-    state.showDropdownContentsCreateView = !state.showDropdownContentsCreateView;
-  },
-  [types.UPDATE_SELECTED_LABELS](state, { labels }) {
-    // Find the label to update from all the labels
-    // and change `set` prop value to represent their current state.
-    const labelId = labels.pop()?.id;
-    const candidateLabel = state.labels.find((label) => labelId === label.id);
-    if (candidateLabel) {
-      candidateLabel.touched = true;
-      candidateLabel.set = !candidateLabel.set;
-    }
-
-    if (isScopedLabel(candidateLabel)) {
-      const scopedBase = scopedLabelKey(candidateLabel);
-      const currentActiveScopedLabel = state.labels.find(
-        ({ title }) => title.indexOf(scopedBase) === 0 && title !== candidateLabel.title,
-      );
-
-      if (currentActiveScopedLabel) {
-        currentActiveScopedLabel.set = false;
-      }
-    }
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
deleted file mode 100644
index 220bab05ed2..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/state.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default () => ({
-  // Initial Data
-  labels: [],
-  selectedLabels: [],
-  labelsListTitle: '',
-  footerCreateLabelTitle: '',
-  footerManageLabelTitle: '',
-  dropdownButtonText: '',
-
-  // Paths
-  namespace: '',
-  labelsFetchPath: '',
-  labelsFilterBasePath: '',
-
-  // UI Flags
-  variant: '',
-  allowLabelRemove: false,
-  allowLabelCreate: false,
-  allowLabelEdit: false,
-  allowScopedLabels: false,
-  allowMultiselect: false,
-  showDropdownButton: false,
-  showDropdownContents: false,
-  showDropdownContentsCreateView: false,
-  labelsFetchInProgress: false,
-  labelCreateInProgress: false,
-  selectedLabelsUpdated: false,
-});
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js
new file mode 100644
index 00000000000..b5cd946a189
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/utils.js
@@ -0,0 +1,22 @@
+import { DropdownVariant } from './constants';
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `sidebar`
+ * @param {string} variant
+ */
+export const isDropdownVariantSidebar = (variant) => variant === DropdownVariant.Sidebar;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `standalone`
+ * @param {string} variant
+ */
+export const isDropdownVariantStandalone = (variant) => variant === DropdownVariant.Standalone;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `embedded`
+ * @param {string} variant
+ */
+export const isDropdownVariantEmbedded = (variant) => variant === DropdownVariant.Embedded;
diff --git a/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.stories.js b/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.stories.js
new file mode 100644
index 00000000000..00aa5519ec6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.stories.js
@@ -0,0 +1,38 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import '@gitlab/ui/dist/utility_classes.css';
+import UsageGraph from './usage_graph.vue';
+
+export default {
+  component: UsageGraph,
+  title: 'vue_shared/components/storage_counter/usage_graph',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { UsageGraph },
+  props: Object.keys(argTypes),
+  template: '<usage-graph v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.argTypes = {
+  rootStorageStatistics: {
+    description: 'The statistics object with all its fields',
+    type: { name: 'object', required: true },
+    defaultValue: {
+      buildArtifactsSize: 400000,
+      pipelineArtifactsSize: 38000,
+      lfsObjectsSize: 4800000,
+      packagesSize: 3800000,
+      repositorySize: 39000000,
+      snippetsSize: 2000112,
+      storageSize: 39930000,
+      uploadsSize: 7000,
+      wikiSize: 300000,
+    },
+  },
+  limit: {
+    description:
+      'When a limit is set, users will see how much of their storage usage (limit) is used. In case the limit is 0 or the current usage exceeds the limit, it just renders the distribution',
+    defaultValue: 0,
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.vue b/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.vue
new file mode 100644
index 00000000000..c33d065ff4b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.vue
@@ -0,0 +1,148 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    rootStorageStatistics: {
+      required: true,
+      type: Object,
+    },
+    limit: {
+      required: true,
+      type: Number,
+    },
+  },
+  computed: {
+    storageTypes() {
+      const {
+        buildArtifactsSize,
+        pipelineArtifactsSize,
+        lfsObjectsSize,
+        packagesSize,
+        repositorySize,
+        storageSize,
+        wikiSize,
+        snippetsSize,
+        uploadsSize,
+      } = this.rootStorageStatistics;
+      const artifactsSize = buildArtifactsSize + pipelineArtifactsSize;
+
+      if (storageSize === 0) {
+        return null;
+      }
+
+      return [
+        {
+          name: s__('UsageQuota|Repositories'),
+          style: this.usageStyle(this.barRatio(repositorySize)),
+          class: 'gl-bg-data-viz-blue-500',
+          size: repositorySize,
+        },
+        {
+          name: s__('UsageQuota|LFS Objects'),
+          style: this.usageStyle(this.barRatio(lfsObjectsSize)),
+          class: 'gl-bg-data-viz-orange-600',
+          size: lfsObjectsSize,
+        },
+        {
+          name: s__('UsageQuota|Packages'),
+          style: this.usageStyle(this.barRatio(packagesSize)),
+          class: 'gl-bg-data-viz-aqua-500',
+          size: packagesSize,
+        },
+        {
+          name: s__('UsageQuota|Artifacts'),
+          style: this.usageStyle(this.barRatio(artifactsSize)),
+          class: 'gl-bg-data-viz-green-600',
+          size: artifactsSize,
+          tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
+        },
+        {
+          name: s__('UsageQuota|Wikis'),
+          style: this.usageStyle(this.barRatio(wikiSize)),
+          class: 'gl-bg-data-viz-magenta-500',
+          size: wikiSize,
+        },
+        {
+          name: s__('UsageQuota|Snippets'),
+          style: this.usageStyle(this.barRatio(snippetsSize)),
+          class: 'gl-bg-data-viz-orange-800',
+          size: snippetsSize,
+        },
+        {
+          name: s__('UsageQuota|Uploads'),
+          style: this.usageStyle(this.barRatio(uploadsSize)),
+          class: 'gl-bg-data-viz-aqua-700',
+          size: uploadsSize,
+        },
+      ]
+        .filter((data) => data.size !== 0)
+        .sort((a, b) => b.size - a.size);
+    },
+  },
+  methods: {
+    formatSize(size) {
+      return numberToHumanSize(size);
+    },
+    usageStyle(ratio) {
+      return { flex: ratio };
+    },
+    barRatio(size) {
+      let max = this.rootStorageStatistics.storageSize;
+
+      if (this.limit !== 0 && max <= this.limit) {
+        max = this.limit;
+      }
+
+      return size / max;
+    },
+  },
+};
+</script>
+<template>
+  <div v-if="storageTypes" class="gl-display-flex gl-flex-direction-column w-100">
+    <div class="gl-h-6 gl-my-5 gl-bg-gray-50 gl-rounded-base gl-display-flex">
+      <div
+        v-for="storageType in storageTypes"
+        :key="storageType.name"
+        class="storage-type-usage gl-h-full gl-display-inline-block"
+        :class="storageType.class"
+        :style="storageType.style"
+        data-testid="storage-type-usage"
+      ></div>
+    </div>
+    <div class="row py-0">
+      <div
+        v-for="storageType in storageTypes"
+        :key="storageType.name"
+        class="col-md-auto gl-display-flex gl-align-items-center"
+        data-testid="storage-type-legend"
+      >
+        <div class="gl-h-2 gl-w-5 gl-mr-2 gl-display-inline-block" :class="storageType.class"></div>
+        <span class="gl-mr-2 gl-font-weight-bold gl-font-sm">
+          {{ storageType.name }}
+        </span>
+        <span class="gl-text-gray-500 gl-font-sm">
+          {{ formatSize(storageType.size) }}
+        </span>
+        <span
+          v-if="storageType.tooltip"
+          v-gl-tooltip
+          :title="storageType.tooltip"
+          :aria-label="storageType.tooltip"
+          class="gl-ml-2"
+        >
+          <gl-icon name="question" :size="12" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue b/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
index b9ee74d6a03..42334d80eec 100644
--- a/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
@@ -66,7 +66,7 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="selectedTimezoneLabel" block lazy menu-class="gl-w-full!">
+  <gl-dropdown :text="selectedTimezoneLabel" block lazy menu-class="gl-w-full!" v-bind="$attrs">
     <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
     <gl-dropdown-item
       v-for="timezone in filteredResults"
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index f387f8ca128..74616763f8f 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -1,6 +1,12 @@
 <script>
-/* eslint-disable vue/no-v-html */
-import { GlPopover, GlLink, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
+import {
+  GlPopover,
+  GlLink,
+  GlSkeletonLoader,
+  GlIcon,
+  GlSafeHtmlDirective,
+  GlSprintf,
+} from '@gitlab/ui';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import { glEmojiTag } from '../../../emoji';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
@@ -17,6 +23,10 @@ export default {
     GlSkeletonLoader,
     UserAvatarImage,
     UserNameWithStatus,
+    GlSprintf,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
   },
   props: {
     target: {
@@ -50,6 +60,7 @@ export default {
       return this.user?.status?.availability || '';
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -83,7 +94,7 @@ export default {
           <div class="gl-text-gray-500">
             <div v-if="user.bio" class="gl-display-flex gl-mb-2">
               <gl-icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
-              <span ref="bio" class="gl-ml-2 gl-overflow-hidden" v-html="user.bioHtml"></span>
+              <span ref="bio" class="gl-ml-2 gl-overflow-hidden">{{ user.bio }}</span>
             </div>
             <div v-if="user.workInformation" class="gl-display-flex gl-mb-2">
               <gl-icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" />
@@ -95,12 +106,14 @@ export default {
             <span class="gl-ml-2">{{ user.location }}</span>
           </div>
           <div v-if="statusHtml" class="js-user-status gl-mt-3">
-            <span v-html="statusHtml"></span>
+            <span v-safe-html:[$options.safeHtmlConfig]="statusHtml"></span>
           </div>
           <div v-if="user.bot" class="gl-text-blue-500">
             <gl-icon name="question" />
             <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl">
-              {{ sprintf(__('Learn more about %{username}'), { username: user.name }) }}
+              <gl-sprintf :message="__('Learn more about %{username}')">
+                <template #username>{{ user.name }}</template>
+              </gl-sprintf>
             </gl-link>
           </div>
         </template>
diff --git a/app/assets/javascripts/vue_shared/security_reports/constants.js b/app/assets/javascripts/vue_shared/security_reports/constants.js
index 4a50dfbd82f..b024e92bd0e 100644
--- a/app/assets/javascripts/vue_shared/security_reports/constants.js
+++ b/app/assets/javascripts/vue_shared/security_reports/constants.js
@@ -24,6 +24,7 @@ export const REPORT_TYPE_DEPENDENCY_SCANNING = 'dependency_scanning';
 export const REPORT_TYPE_CONTAINER_SCANNING = 'container_scanning';
 export const REPORT_TYPE_CLUSTER_IMAGE_SCANNING = 'cluster_image_scanning';
 export const REPORT_TYPE_COVERAGE_FUZZING = 'coverage_fuzzing';
+export const REPORT_TYPE_CORPUS_MANAGEMENT = 'corpus_management';
 export const REPORT_TYPE_LICENSE_COMPLIANCE = 'license_scanning';
 export const REPORT_TYPE_API_FUZZING = 'api_fuzzing';
 
diff --git a/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/state.js b/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/state.js
index e860e3af924..c1b3f546431 100644
--- a/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/state.js
+++ b/app/assets/javascripts/vue_shared/security_reports/store/modules/sast/state.js
@@ -1,7 +1,5 @@
 export default () => ({
   paths: {
-    head: null,
-    base: null,
     diffEndpoint: null,
   },
 
diff --git a/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/state.js b/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/state.js
index e860e3af924..c1b3f546431 100644
--- a/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/state.js
+++ b/app/assets/javascripts/vue_shared/security_reports/store/modules/secret_detection/state.js
@@ -1,7 +1,5 @@
 export default () => ({
   paths: {
-    head: null,
-    base: null,
     diffEndpoint: null,
   },
 
diff --git a/app/assets/javascripts/webpack_non_compiled_placeholder.js b/app/assets/javascripts/webpack_non_compiled_placeholder.js
index 8cd1d2eb2ca..55ac2f0be6a 100644
--- a/app/assets/javascripts/webpack_non_compiled_placeholder.js
+++ b/app/assets/javascripts/webpack_non_compiled_placeholder.js
@@ -8,7 +8,7 @@ Object.assign(div.style, {
   left: 0,
   'z-index': 100000,
   background: 'rgba(0,0,0,0.9)',
-  'font-size': '25px',
+  'font-size': '20px',
   'font-family': 'monospace',
   color: 'white',
   padding: '2.5em',
@@ -16,9 +16,23 @@ Object.assign(div.style, {
 });
 
 div.innerHTML = `
-<h1 style="color:white">🧙 Webpack is doing its magic 🧙</h1>
-<p>If you use Hot Module reloading, the page will reload in a few seconds.</p>
-<p>If you do not use Hot Module reloading, please <a href="">reload the page manually in a few seconds</a></p>
+<!-- https://github.com/webpack/media/blob/master/logo/icon-square-big.svg -->
+<svg height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
+  <path fill="#FFF" d="M600 0l530.3 300v600L600 1200 69.7 900V300z"/>
+  <path fill="#8ED6FB" class="st1" d="M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z"/>
+  <path fill="#1C78C0" d="M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z"/>
+</svg>
+
+<h1 style="color:white">✨ webpack is compiling frontend assets ✨</h1>
+<p>
+  To reduce GDK memory consumption, incremental on-demand compiling is on by default.<br />
+  You can disable this within gdk.yml.
+  Learn more <a href="https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/configuration.md#webpack-settings">here</a>.
+</p>
+<p>
+  If you have live_reload enabled, the page will reload automatically when complete.<br />
+  Otherwise, please <a href="">reload the page manually in a few seconds</a>
+</p>
 `;
 
 document.body.append(div);
diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue
index 11096b08032..a93bda326de 100644
--- a/app/assets/javascripts/whats_new/components/feature.vue
+++ b/app/assets/javascripts/whats_new/components/feature.vue
@@ -40,7 +40,7 @@ export default {
       :href="feature.url"
       target="_blank"
       class="gl-display-block"
-      data-track-event="click_whats_new_item"
+      data-track-action="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
@@ -55,7 +55,7 @@ export default {
       :href="feature.url"
       target="_blank"
       class="whats-new-item-title-link gl-display-block gl-mt-4 gl-mb-1"
-      data-track-event="click_whats_new_item"
+      data-track-action="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
@@ -79,7 +79,7 @@ export default {
     <gl-button
       :href="feature.url"
       target="_blank"
-      data-track-event="click_whats_new_item"
+      data-track-action="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
diff --git a/app/assets/javascripts/work_items/components/app.vue b/app/assets/javascripts/work_items/components/app.vue
new file mode 100644
index 00000000000..93de17d1e43
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/app.vue
@@ -0,0 +1,9 @@
+<script>
+export default {
+  name: 'WorkItemRoot',
+};
+</script>
+
+<template>
+  <div></div>
+</template>
diff --git a/app/assets/javascripts/work_items/graphql/typedefs.graphql b/app/assets/javascripts/work_items/graphql/typedefs.graphql
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/app/assets/javascripts/work_items/index.js b/app/assets/javascripts/work_items/index.js
new file mode 100644
index 00000000000..a635d43776d
--- /dev/null
+++ b/app/assets/javascripts/work_items/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import App from './components/app.vue';
+
+export const initWorkItemsRoot = () => {
+  const el = document.querySelector('#js-work-items');
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(App);
+    },
+  });
+};
-- 
cgit v1.2.1