Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42

162 files changed, 577 insertions, 842 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index c091a2180c5..0f7b10f822d 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -69,4 +69,6 @@
     = render 'admin/application_settings/invitation_flow_enforcement', form: f
     = render 'admin/application_settings/user_restrictions', form: f
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
+    -# This is added for Jihu edition which should not be deleted without notifying Jihu
+    = render_if_exists 'admin/application_settings/password_expiration_setting', form: f
   = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_jira_connect_application_key.html.haml b/app/views/admin/application_settings/_jira_connect.html.haml
index b67e7680720..ad0660797ee 100644
--- a/app/views/admin/application_settings/_jira_connect_application_key.html.haml
+++ b/app/views/admin/application_settings/_jira_connect.html.haml
@@ -18,4 +18,10 @@
         .form-group
           = f.label :jira_connect_application_key, s_('JiraConnect|Jira Connect Application ID'), class: 'label-bold'
           = f.text_field :jira_connect_application_key, class: 'form-control gl-form-input'
+
+      %fieldset
+        .form-group
+          = f.label :jira_connect_proxy_url, s_('JiraConnect|Jira Connect Proxy URL'), class: 'label-bold'
+          = f.text_field :jira_connect_proxy_url, class: 'form-control gl-form-input'
+
       = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_package_registry.html.haml b/app/views/admin/application_settings/_package_registry.html.haml
index 3506038ca68..66b04006beb 100644
--- a/app/views/admin/application_settings/_package_registry.html.haml
+++ b/app/views/admin/application_settings/_package_registry.html.haml
@@ -6,7 +6,7 @@
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded_by_default? ? _('Collapse') : _('Expand')
       %p
-        = _("Control how the GitLab Package Registry functions.")
+        = s_('PackageRegistry|Configure package forwarding and package file size limits.')
 
     = render_if_exists 'admin/application_settings/ee_package_registry'
 
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
index ef8d3ccc8ab..aaf76c5ff7a 100644
--- a/app/views/admin/application_settings/_repository_check.html.haml
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -18,8 +18,8 @@
     .sub-section
       %h4= _("Housekeeping")
       .form-group
-        - help_text = _("Leaving this setting enabled is recommended.")
-        - help_link = link_to s_('Learn more.'), help_page_path('administration/housekeeping.md', anchor: 'housekeeping-options'), target: '_blank', rel: 'noopener noreferrer'
+        - help_text = _("Run housekeeping tasks to automatically optimize Git repositories. Disabling this option will cause performance to degenerate over time.")
+        - help_link = link_to s_('Learn more.'), help_page_path('administration/housekeeping.md', anchor: 'configure-push-based-maintenance'), target: '_blank', rel: 'noopener noreferrer'
         = f.gitlab_ui_checkbox_component :housekeeping_enabled,
           _("Enable automatic repository housekeeping"),
           help_text: '%{help_text} %{help_link}'.html_safe % { help_text: help_text, help_link: help_link }
diff --git a/app/views/admin/application_settings/_user_restrictions.html.haml b/app/views/admin/application_settings/_user_restrictions.html.haml
index de8faa6705f..82f5e6def9f 100644
--- a/app/views/admin/application_settings/_user_restrictions.html.haml
+++ b/app/views/admin/application_settings/_user_restrictions.html.haml
@@ -3,4 +3,4 @@
 .form-group
   = label_tag _('User restrictions')
   = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: form
-  = form.gitlab_ui_checkbox_component :can_create_group, _("Allow users to create top-level groups")
+  = form.gitlab_ui_checkbox_component :can_create_group, _("Allow new users to create top-level groups")
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index b69b2f74d0d..85bee72e863 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -64,4 +64,7 @@
 
     = render_if_exists 'admin/application_settings/globally_allowed_ips', form: f
 
+    -# This is added for Jihu edition in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/1112
+    = render_if_exists 'admin/application_settings/disable_download_button', f: f
+
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/appearances/_form.html.haml b/app/views/admin/application_settings/appearances/_form.html.haml
index a3bd8b52148..5f51e91436c 100644
--- a/app/views/admin/application_settings/appearances/_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_form.html.haml
@@ -101,7 +101,7 @@
             = parsed_with_gfm
 
       .gl-mt-3.gl-mb-3
-        = f.submit _('Update appearance settings'), class: 'btn gl-button btn-confirm'
+        = f.submit _('Update appearance settings'), pajamas_button: true
         - if @appearance.persisted? || @appearance.updated_at
           .mt-4
             - if @appearance.persisted?
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index ec5d1ef4a34..6d8428d1aa6 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -119,8 +119,9 @@
 = render_if_exists 'admin/application_settings/feishu_integration'
 = render 'admin/application_settings/third_party_offers'
 = render 'admin/application_settings/snowplow'
+= render_if_exists 'admin/application_settings/product_analytics'
 = render 'admin/application_settings/error_tracking' if Feature.enabled?(:gitlab_error_tracking)
 = render 'admin/application_settings/eks'
 = render 'admin/application_settings/floc'
 = render_if_exists 'admin/application_settings/add_license'
-= render 'admin/application_settings/jira_connect_application_key' if Feature.enabled?(:jira_connect_oauth, current_user)
+= render 'admin/application_settings/jira_connect' if Feature.enabled?(:jira_connect_oauth_self_managed_setting, current_user)
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index 06bb9df84c4..82b627e1805 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -24,7 +24,7 @@
       = c.body do
         - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
         - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
-        - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
+        - generate_manually_link_url = help_page_path('development/service_ping/troubleshooting', anchor: 'generate-service-ping')
         - generate_manually_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_manually_link_url }
 
         = html_escape(s_('%{enable_service_ping_link_start}Enable%{link_end} or %{generate_manually_link_start}generate%{link_end} Service Ping to preview and download service usage data payload.')) % { enable_service_ping_link_start: enable_service_ping_link, generate_manually_link_start: generate_manually_link, link_end: '</a>'.html_safe }
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index ccea1714973..886402139e9 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -122,7 +122,7 @@
             = s_('AdminArea|Components')
             - if show_version_check?
               .float-right
-                .js-gitlab-version-check{ data: { "size": "lg" } }
+                .js-gitlab-version-check-badge{ data: { "size": "lg", "actionable": "true" } }
                 = link_to(sprite_icon('question'), "https://gitlab.com/gitlab-org/gitlab/-/blob/master/CHANGELOG.md", class: 'gl-ml-2', target: '_blank', rel: 'noopener noreferrer')
           %p
             = link_to _('GitLab'), general_admin_application_settings_path
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 6d370919460..c8b0704c35d 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -7,8 +7,9 @@
 %h1.page-title.gl-font-size-h-display
   = _('Group: %{group_name}') % { group_name: @group.full_name }
 
-  = link_to admin_group_edit_path(@group), class: "btn btn-default gl-button float-right", data: { qa_selector: 'edit_group_link' } do
-    = sprite_icon('pencil', css_class: 'gl-icon gl-mr-2')
+  = render Pajamas::ButtonComponent.new(href: admin_group_edit_path(@group),
+    button_options: { class: 'gl-float-right', data: { qa_selector: 'edit_group_link' }},
+    icon: 'pencil') do
     = _('Edit')
 %hr
 .row
diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml
index 47a761e608f..6809f147ef8 100644
--- a/app/views/admin/users/_form.html.haml
+++ b/app/views/admin/users/_form.html.haml
@@ -75,8 +75,8 @@
 
     %div
       - if @user.new_record?
-        = f.submit _('Create user'), class: "btn gl-button btn-confirm"
+        = f.submit _('Create user'), pajamas_button: true
         = link_to _('Cancel'), admin_users_path, class: "gl-button btn btn-default btn-cancel"
       - else
-        = f.submit _('Save changes'), class: "btn gl-button btn-confirm"
+        = f.submit _('Save changes'), pajamas_button: true
         = link_to _('Cancel'), admin_user_path(@user), class: "gl-button btn btn-default btn-cancel"
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index 0ceff211806..1fa7c9c8651 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -30,9 +30,11 @@
     .gl-p-2
       #js-admin-user-actions{ data: admin_user_actions_data_attributes(@user) }
     - if @user != current_user
-      - if impersonation_enabled? && @user.can?(:log_in)
+      - if impersonation_enabled?
         .gl-p-2
-          = link_to _('Impersonate'), impersonate_admin_user_path(@user), method: :post, class: "btn btn-default gl-button", data: { qa_selector: 'impersonate_user_link' }
+          %span.btn-group{ class: !@can_impersonate ? 'has-tooltip' : nil, title: @impersonation_error_text }
+            = render Pajamas::ButtonComponent.new(disabled: !@can_impersonate, method: :post, href: impersonate_admin_user_path(@user), button_options: { data: { qa_selector: 'impersonate_user_link', testid: 'impersonate_user_link' } }) do
+              = _('Impersonate')
       - if can_force_email_confirmation?(@user)
         .gl-p-2
           = render Pajamas::ButtonComponent.new(variant: :default, button_options: { class: 'js-confirm-modal-button', data: confirm_user_data(@user) }) do
diff --git a/app/views/admin/users/_projects.html.haml b/app/views/admin/users/_projects.html.haml
index 3ccf3ef4f2a..2f77e83ac49 100644
--- a/app/views/admin/users/_projects.html.haml
+++ b/app/views/admin/users/_projects.html.haml
@@ -5,7 +5,7 @@
     - c.body do
       = render 'shared/projects/list',
         projects: contributed_projects.sort_by(&:star_count).reverse,
-        projects_limit: 5, stars: true, avatar: false
+        projects_limit: 5, stars: true, avatar: false, compact_mode: true
 
 - if local_assigns.has_key?(:projects) && projects.present?
   = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }) do |c|
@@ -14,4 +14,4 @@
     - c.body do
       = render 'shared/projects/list',
         projects: projects.sort_by(&:star_count).reverse,
-        projects_limit: 10, stars: true, avatar: false
+        projects_limit: 10, stars: true, avatar: false, compact_mode: true
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 8c77cb394ba..6d85ff50fbe 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -54,7 +54,7 @@
       = hidden_field_tag "filter", h(params[:filter])
     .search-holder
       .search-field-holder.gl-mb-4
-        = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false, data: { qa_selector: 'user_search_field' }
+        = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email, or username'), class: 'form-control search-text-input js-search-input', spellcheck: false, data: { qa_selector: 'user_search_field' }
         - if @sort.present?
           = hidden_field_tag :sort, @sort
         = sprite_icon('search', css_class: 'search-icon')
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 3952a450c4a..5062599c261 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,7 +1,7 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
 - if api_awards_path
-  .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-py-3
+  .gl-display-flex.gl-flex-wrap.gl-justify-content-space-between.gl-pt-3
     #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s } }
     = yield
 - else
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 9ca11b35064..08865abbe86 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -10,7 +10,7 @@
 - is_group = !@group.nil?
 - is_project = !@project.nil?
 
-#js-ci-project-variables{ data: { endpoint: save_endpoint,
+#js-ci-variables{ data: { endpoint: save_endpoint,
   is_project: is_project.to_s,
   project_id: @project&.id || '',
   project_full_path: @project&.full_path || '',
diff --git a/app/views/ci/variables/_url_query_variable_row.html.haml b/app/views/ci/variables/_url_query_variable_row.html.haml
deleted file mode 100644
index 77bcacdb94b..00000000000
--- a/app/views/ci/variables/_url_query_variable_row.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-- form_field = local_assigns.fetch(:form_field, nil)
-- variable = local_assigns.fetch(:variable, nil)
-
-- key = variable[0]
-- value = variable[1]
-- variable_type = variable[2] || "env_var"
-
-- destroy_input_name = "#{form_field}[variables_attributes][][_destroy]"
-- variable_type_input_name = "#{form_field}[variables_attributes][][variable_type]"
-- key_input_name = "#{form_field}[variables_attributes][][key]"
-- value_input_name = "#{form_field}[variables_attributes][][secret_value]"
-
-%li.js-row.ci-variable-row
-  .ci-variable-row-body.border-bottom
-    %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
-    %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name }
-      = options_for_select(ci_variable_type_options, variable_type)
-    %input.js-ci-variable-input-key.ci-variable-body-item.form-control.table-section.section-15{ type: "text",
-      name: key_input_name,
-      value: key,
-      placeholder: s_('CiVariables|Input variable key') }
-    .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
-      %textarea.js-ci-variable-input-value.js-secret-value.form-control{ rows: 1,
-        name: value_input_name,
-        placeholder: s_('CiVariables|Input variable value') }
-        = value
-    %button.gl-button.btn.btn-default.btn-icon.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
-      = sprite_icon('close')
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 813c1cdbfe4..1c82b30ed8d 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -8,7 +8,7 @@
 .top-area
   = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-0' }) do
     = gl_tab_link_to _("Your groups"), dashboard_groups_path
-    = gl_tab_link_to _("Explore public groups"), explore_groups_path
+    = gl_tab_link_to _("Explore public groups"), explore_groups_path, data: { qa_selector: "public_groups_tab" }
   .nav-controls
     = render 'shared/groups/search_form'
     = render 'shared/groups/dropdown'
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 95e772f324b..79f6bfc866a 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -1,6 +1,7 @@
 - @hide_top_links = true
 - page_title _("Issues")
 - @breadcrumb_link = issues_dashboard_path(assignee_username: current_user.username)
+- add_page_specific_style 'page_bundles/dashboard'
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{current_user.name} issues")
 
@@ -13,14 +14,20 @@
     .page-title-controls
       = render 'shared/new_project_item_select', path: 'issues/new', label: _("issue"), with_feature_enabled: 'issues', type: :issues
 
-.top-area
-  = render 'shared/issuable/nav', type: :issues, display_count: !@no_filters_set
-  .nav-controls
-    = render 'shared/issuable/feed_buttons'
+- if ::Feature.enabled?(:vue_issues_dashboard)
+  .js-issues-dashboard{ data: { calendar_path: url_for(safe_params.merge(calendar_url_options)),
+    empty_state_svg_path: image_path('illustrations/issue-dashboard_results-without-filter.svg'),
+    is_signed_in: current_user.present?.to_s,
+    rss_path: url_for(safe_params.merge(rss_url_options)) } }
+- else
+  .top-area
+    = render 'shared/issuable/nav', type: :issues, display_count: !@no_filters_set
+    .nav-controls
+      = render 'shared/issuable/feed_buttons'
 
-= render 'shared/issuable/search_bar', type: :issues
+  = render 'shared/issuable/search_bar', type: :issues
 
-- if current_user && @no_filters_set
-  = render 'shared/dashboard/no_filter_selected'
-- else
-  = render 'shared/issues'
+  - if current_user && @no_filters_set
+    = render 'shared/dashboard/no_filter_selected'
+  - else
+    = render 'shared/issues'
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index b4668b1e52a..47bc8f5c95b 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -27,8 +27,7 @@
           = todo_target_title(todo)
 
         %span.title-item.todo-project.todo-label
-          at
-          = todo_parent_path(todo)
+          = s_('Todo|at %{todo_parent_path}').html_safe % { todo_parent_path: todo_parent_path(todo) }
 
         - if todo.self_assigned?
           %span.title-item.action-name
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
index ef19ac33a15..01f9595f35c 100644
--- a/app/views/devise/confirmations/almost_there.haml
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -1,4 +1,4 @@
-- user_email = "(#{params[:email]})" if params[:email].present?
+- user_email = "(#{params[:email]})" if Devise.email_regexp.match?(params[:email])
 - request_link_start = '<a href="%{new_user_confirmation_path}">'.html_safe % { new_user_confirmation_path: new_user_confirmation_path }
 - request_link_end = '</a>'.html_safe
 - content_for :page_specific_javascripts do
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index e0e0b82b596..a4edf165a89 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -2,7 +2,6 @@
 - content_for :page_specific_javascripts do
   = render "layouts/google_tag_manager_head"
   = render "layouts/one_trust"
-  = render "layouts/bizible"
 = render "layouts/google_tag_manager_body"
 
 #signin-container
@@ -17,7 +16,7 @@
     %div
       = _('No authentication methods configured.')
 
-  - if Feature.enabled?(:restyle_login_page, @project)
+  - if Feature.enabled?(:restyle_login_page, @project) && Gitlab::CurrentSettings.current_application_settings.terms
     %p.gl-px-5
       = html_escape(s_("SignUp|By signing in you accept the %{link_start}Terms of Use and acknowledge the Privacy Policy and Cookie Policy%{link_end}.")) % { link_start: "<a href='#{terms_path}' target='_blank' rel='noreferrer noopener'>".html_safe,
       link_end: '</a>'.html_safe }
diff --git a/app/views/doorkeeper/authorizations/forbidden.html.haml b/app/views/doorkeeper/authorizations/forbidden.html.haml
new file mode 100644
index 00000000000..9cad5ce62d8
--- /dev/null
+++ b/app/views/doorkeeper/authorizations/forbidden.html.haml
@@ -0,0 +1,5 @@
+%h1.page-title.gl-font-size-h-display= _("Forbidden")
+%main{ :role => "main" }
+  %p
+    = sprite_icon('warning-solid')
+    = (_("Administrators are not permitted to connect applications with these scopes: %{code_open}api%{code_close}, %{code_open}read_api%{code_close}, %{code_open}read_repository%{code_close}, %{code_open}write_repository%{code_close}, %{code_open}write_registry%{code_close}, %{code_open}read_registry%{code_close}, and %{code_open}sudo%{code_close}. To permit this, change the %{code_open}disable_admin_oauth_scopes%{code_close} setting using the API.") % { code_open: '<code>', code_close: '</code>' }).html_safe
diff --git a/app/views/errors/request_conflict.html.haml b/app/views/errors/request_conflict.html.haml
index 2f5abaca72f..040aa880e1c 100644
--- a/app/views/errors/request_conflict.html.haml
+++ b/app/views/errors/request_conflict.html.haml
@@ -13,6 +13,6 @@
   %p
     = s_('409|Please contact your GitLab administrator if you think this is a mistake.')
   .action-container.js-go-back{ hidden: true }
-    %button{ type: 'button', class: 'gl-button btn btn-primary' }
+    = render Pajamas::ButtonComponent.new(variant: :confirm) do
       = _('Go Back')
 = render "errors/footer"
diff --git a/app/views/groups/_archived_projects.html.haml b/app/views/groups/_archived_projects.html.haml
deleted file mode 100644
index 21107cc22a1..00000000000
--- a/app/views/groups/_archived_projects.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-#js-groups-archived-tree
-  .empty-state.text-center.hidden
-    %p= _("There are no archived projects yet")
-
-  %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
-    .js-groups-list-holder
-      = gl_loading_icon(size: 'md', css_class: 'gl-mt-6')
diff --git a/app/views/groups/_shared_projects.html.haml b/app/views/groups/_shared_projects.html.haml
deleted file mode 100644
index 6063d160fab..00000000000
--- a/app/views/groups/_shared_projects.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-#js-groups-shared-tree
-  .empty-state.text-center.hidden
-    %p= _("There are no projects shared with this group yet")
-
-  %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
-    .js-groups-list-holder{ data: { current_group_visibility: group.visibility } }
-      = gl_loading_icon
diff --git a/app/views/groups/_subgroups_and_projects.html.haml b/app/views/groups/_subgroups_and_projects.html.haml
deleted file mode 100644
index dc749af3c0c..00000000000
--- a/app/views/groups/_subgroups_and_projects.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-#js-groups-subgroups_and_projects-tree
-  %section{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
-    .js-groups-list-holder{ data: subgroups_and_projects_list_app_data(group) }
-      = gl_loading_icon(size: 'md', css_class: 'gl-mt-6')
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index d9fef8940eb..4da70c8bf5d 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -1,8 +1,6 @@
 - add_page_specific_style 'page_bundles/members'
 - page_title _('Group members')
 
-= render_if_exists 'shared/free_user_cap_alert', source: @group
-
 .row.gl-mt-3
   .col-lg-12
     .gl-display-flex.gl-flex-wrap
diff --git a/app/views/groups/observability/index.html.haml b/app/views/groups/observability/index.html.haml
deleted file mode 100644
index 582651c329b..00000000000
--- a/app/views/groups/observability/index.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-- page_title _("Observability")
-%iframe{ id: 'observability-ui-iframe', src: @observability_iframe_src, frameborder: 0, width: "100%", height: "100%" }
diff --git a/app/views/groups/observability/observability.html.haml b/app/views/groups/observability/observability.html.haml
new file mode 100644
index 00000000000..834fa0e027c
--- /dev/null
+++ b/app/views/groups/observability/observability.html.haml
@@ -0,0 +1,3 @@
+- page_title observability_page_title
+
+#js-observability-app{ data: { observability_iframe_src: observability_iframe_src(@group) } }
diff --git a/app/views/groups/settings/_remove.html.haml b/app/views/groups/settings/_remove.html.haml
index 8571b93364b..a37a0f8053b 100644
--- a/app/views/groups/settings/_remove.html.haml
+++ b/app/views/groups/settings/_remove.html.haml
@@ -1,6 +1,6 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.adjourned_deletion?
-  = render_if_exists 'groups/settings/adjourned_deletion', group: group, remove_form_id: remove_form_id
+  = render_if_exists 'groups/settings/delayed_deletion', group: group, remove_form_id: remove_form_id
 - else
   = render 'groups/settings/permanent_deletion', group: group, remove_form_id: remove_form_id
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index 7fe5a7a665b..e01d703206c 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -1,5 +1,5 @@
 - form_id = "transfer-group-form"
-- initial_data = { button_text: s_('GroupSettings|Transfer group'), group_name: @group.name, target_form_id: form_id, parent_groups: parent_group_options(group), is_paid_group: group.paid?.to_s }
+- initial_data = { button_text: s_('GroupSettings|Transfer group'), group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
 
 .sub-section
   %h4.warning-title= s_('GroupSettings|Transfer group')
diff --git a/app/views/groups/settings/access_tokens/index.html.haml b/app/views/groups/settings/access_tokens/index.html.haml
index 5e3d814687e..309633471a5 100644
--- a/app/views/groups/settings/access_tokens/index.html.haml
+++ b/app/views/groups/settings/access_tokens/index.html.haml
@@ -39,6 +39,5 @@
           prefix: :resource_access_token,
           help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_resource_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true
+    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true
  } }
-
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 012a31c1ecf..72b7bec1b92 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -4,7 +4,6 @@
 - add_page_specific_style 'page_bundles/group'
 
 = render_if_exists 'shared/qrtly_reconciliation_alert', group: @group
-= render_if_exists 'shared/free_user_cap_alert', source: @group
 
 - if show_invite_banner?(@group)
   = content_for :group_invite_members_banner do
@@ -30,36 +29,4 @@
 
 = render_if_exists 'groups/group_activity_analytics', group: @group
 
-- if Feature.enabled?(:group_overview_tabs_vue, @group)
-  #js-group-overview-tabs{ data: group_overview_tabs_app_data(@group) }
-- else
-  .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
-    .top-area.group-nav-container.justify-content-between
-      .scrolling-tabs-container.inner-page-scroll-tabs
-        .fade-left= sprite_icon('chevron-lg-left', size: 12)
-        .fade-right= sprite_icon('chevron-lg-right', size: 12)
-        -# `item_active` is set to `false` as the active state is set by `app/assets/javascripts/pages/groups/shared/group_details.js`
-        -# TODO: Replace this approach in https://gitlab.com/gitlab-org/gitlab/-/issues/23466
-        = gl_tabs_nav({ class: 'nav-links scrolling-tabs gl-display-flex gl-flex-grow-1 gl-flex-nowrap gl-border-0' }) do
-          = gl_tab_link_to group_path, item_active: false, tab_class: 'js-subgroups_and_projects-tab', data: { target: 'div#subgroups_and_projects', action: 'subgroups_and_projects', toggle: 'tab' } do
-            = _("Subgroups and projects")
-          = gl_tab_link_to group_shared_path, item_active: false, tab_class: 'js-shared-tab', data: { target: 'div#shared', action: 'shared', toggle: 'tab' } do
-            = _("Shared projects")
-          = gl_tab_link_to group_archived_path, item_active: false, tab_class: 'js-archived-tab', data: { target: 'div#archived', action: 'archived', toggle: 'tab' } do
-            = _("Archived projects")
-
-      .nav-controls.d-block.d-md-flex
-        .group-search
-          = render "shared/groups/search_form"
-
-        = render "shared/groups/dropdown", options_hash: subgroups_sort_options_hash
-
-    .tab-content
-      #subgroups_and_projects.tab-pane
-        = render "subgroups_and_projects", group: @group
-
-      #shared.tab-pane
-        = render "shared_projects", group: @group
-
-      #archived.tab-pane
-        = render "archived_projects", group: @group
+#js-group-overview-tabs{ data: group_overview_tabs_app_data(@group) }
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index eaa58580454..8c74aac5ef5 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -11,7 +11,7 @@
       %span= link_to_version
   - if show_version_check?
     %span.gl-mt-5.gl-mb-3.gl-ml-3
-      .js-gitlab-version-check{ data: { "size": "lg" } }
+      .js-gitlab-version-check-badge{ data: { "size": "lg", "actionable": "true" } }
 %hr
 
 - unless Gitlab::CurrentSettings.help_page_hide_commercial_content?
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
index 9ea52a8f82f..e92db09aaf1 100644
--- a/app/views/import/_githubish_status.html.haml
+++ b/app/views/import/_githubish_status.html.haml
@@ -4,7 +4,7 @@
 - filterable = local_assigns.fetch(:filterable, true)
 - paginatable = local_assigns.fetch(:paginatable, false)
 - default_namespace_path = (local_assigns[:default_namespace] || current_user.namespace).full_path
-- provider_title = Gitlab::ImportSources.title(provider)
+- provider_title = Gitlab::ImportSources.title(local_assigns.fetch(:provider))
 - optional_stages = local_assigns.fetch(:optional_stages, [])
 
 - header_title _("New project"), new_project_path
diff --git a/app/views/layouts/_img_loader.html.haml b/app/views/layouts/_img_loader.html.haml
index f6d7d163e6f..979ebeb0a02 100644
--- a/app/views/layouts/_img_loader.html.haml
+++ b/app/views/layouts/_img_loader.html.haml
@@ -12,6 +12,7 @@
         img.src = imgUrl;
         img.removeAttribute('data-src');
         img.classList.remove('lazy');
-        img.classList.add('js-lazy-loaded', 'qa-js-lazy-loaded');
+        img.classList.add('js-lazy-loaded');
+        img.dataset.qa_selector = 'js_lazy_loaded_content';
       });
     }
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 014e26c7613..d668399b408 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -24,7 +24,7 @@
       = yield :group_invite_members_banner
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
-    %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
+    %div{ class: "#{container_class unless @no_container} #{@content_class}" }
       %main.content{ id: "content-body", **page_itemtype }
         = render "layouts/flash", extra_flash_class: 'limit-container-width'
         = yield :after_flash_content
diff --git a/app/views/layouts/component_preview.html.haml b/app/views/layouts/component_preview.html.haml
index ec12395a5d4..a1b1304f994 100644
--- a/app/views/layouts/component_preview.html.haml
+++ b/app/views/layouts/component_preview.html.haml
@@ -1,5 +1,14 @@
 %head
-  = stylesheet_link_tag "application"
-  = stylesheet_link_tag "application_utilities"
-%body{ style: "background-color: #{params.dig(:lookbook, :display, :bg_color) || 'white'}" }
-  .container.gl-mt-6= yield
+  - if params[:lookbook][:display][:theme] == 'light'
+    = stylesheet_link_tag "application"
+    = stylesheet_link_tag "application_utilities"
+  - else
+    = stylesheet_link_tag "application_dark"
+    = stylesheet_link_tag "application_utilities_dark"
+%body
+  .container.gl-mt-6
+    - if params[:lookbook][:display][:bg_dark]
+      .bg-dark.rounded.shadow.p-4
+        = yield
+    - else
+      = yield
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index 97c2b8bb7e3..95934f43a51 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -16,4 +16,6 @@
       :plain
         window.uploads_path = "#{group_uploads_path(@group)}";
 
+= dispensable_render_if_exists "shared/free_user_cap_alert", source: @group
+
 = render template: base_layout || "layouts/application"
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index b74dfd4d3a1..42ffd155647 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -19,16 +19,9 @@
           .gl-display-none.gl-sm-display-block
             = render "layouts/nav/top_nav"
         - else
-          - experiment(:logged_out_marketing_header, actor: nil) do |e|
-            - e.candidate do
-              = render 'layouts/header/marketing_links'
-            - e.try(:trial_focused) do
-              = render 'layouts/header/marketing_links'
-            - e.control do
-              .gl-display-none.gl-sm-display-block
-                = render "layouts/nav/top_nav"
+          = render 'layouts/header/marketing_links'
 
-      - if top_nav_show_search && Feature.enabled?(:new_navbar_layout)
+      - if top_nav_show_search
         .navbar-collapse.gl-transition-medium.collapse.gl-mr-auto.global-search-container.hide-when-top-nav-responsive-open
           - search_menu_item = top_nav_search_menu_item_attrs
           %ul.nav.navbar-nav.gl-w-full.gl-align-items-center
@@ -42,21 +35,10 @@
               = link_to search_menu_item.fetch(:href), title: search_menu_item.fetch(:title), aria: { label: search_menu_item.fetch(:title) }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = sprite_icon(search_menu_item.fetch(:icon))
 
-      .navbar-collapse.gl-transition-medium.collapse{ class: ('global-search-container' unless Feature.enabled?(:new_navbar_layout)) }
+      .navbar-collapse.gl-transition-medium.collapse
         %ul.nav.navbar-nav.gl-w-full.gl-align-items-center.gl-justify-content-end
           - if current_user
             = render 'layouts/header/new_dropdown', class: 'gl-display-none gl-sm-display-block gl-white-space-nowrap gl-text-right'
-          - if top_nav_show_search && Feature.disabled?(:new_navbar_layout)
-            - search_menu_item = top_nav_search_menu_item_attrs
-            %li.nav-item.header-search-new.gl-display-none.gl-lg-display-block.gl-w-full
-              - unless current_controller?(:search)
-                - if Feature.enabled?(:new_header_search)
-                  = render 'layouts/header_search'
-                - else
-                  = render 'layouts/search'
-            %li.nav-item{ class: 'd-none d-sm-inline-block d-lg-none' }
-              = link_to search_menu_item.fetch(:href), title: search_menu_item.fetch(:title), aria: { label: search_menu_item.fetch(:title) }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = sprite_icon(search_menu_item.fetch(:icon))
           - if header_link?(:issues)
             = nav_link(path: 'dashboard#issues', html_options: { class: "user-counter" }) do
               = link_to assigned_issues_dashboard_path, title: _('Issues'), class: 'dashboard-shortcuts-issues js-prefetch-document', aria: { label: _('Issues') },
@@ -67,7 +49,7 @@
                 container: 'body' } do
                 = sprite_icon('issues')
                 - issues_count = assigned_issuables_count(:issues)
-                = gl_badge_tag({ size: :sm, variant: :success }, { class: "gl-ml-n2 #{(' gl-display-none' if issues_count == 0)}", "aria-label": n_("%d assigned issue", "%d assigned issues", issues_count) % issues_count }) do
+                = gl_badge_tag({ size: :sm, variant: :success }, { class: "gl-ml-n2 #{'gl-display-none' if issues_count == 0}", "aria-label": n_("%d assigned issue", "%d assigned issues", issues_count) % issues_count }) do
                   = number_with_delimiter(issues_count)
           - if header_link?(:merge_requests)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter dropdown" }) do
@@ -81,7 +63,7 @@
                 track_property: 'navigation',
                 container: 'body' } do
                 = sprite_icon('git-merge')
-                = gl_badge_tag({ size: :sm, variant: :warning }, { class: "js-merge-requests-count gl-ml-n2#{(' gl-display-none' if user_merge_requests_counts[:total] == 0)}", "aria-label": n_("%d merge request", "%d merge requests", user_merge_requests_counts[:total]) % user_merge_requests_counts[:total] }) do
+                = gl_badge_tag({ size: :sm, variant: :warning }, { class: "js-merge-requests-count gl-ml-n2 #{'gl-display-none' if user_merge_requests_counts[:total] == 0}", "aria-label": n_("%d merge request", "%d merge requests", user_merge_requests_counts[:total]) % user_merge_requests_counts[:total] }) do
                   = number_with_delimiter(user_merge_requests_counts[:total])
                 = sprite_icon('chevron-down', css_class: 'caret-down gl-mx-0!')
               .dropdown-menu.dropdown-menu-right
@@ -94,7 +76,7 @@
                       = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-assigned-mr-count gl-ml-auto" }) do
                         = user_merge_requests_counts[:assigned]
                   %li
-                    = link_to reviewer_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
+                    = link_to reviewer_mrs_dashboard_path, class: 'dashboard-shortcuts-review_requests gl-display-flex! gl-align-items-center js-prefetch-document' do
                       = _('Review requests for you')
                       = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-reviewer-mr-count gl-ml-auto" }) do
                         = user_merge_requests_counts[:review_requested]
@@ -109,7 +91,7 @@
                 = sprite_icon('todo-done')
                 -# The todos' counter badge's visibility is being toggled by adding or removing the .hidden class in Js.
                 -# We'll eventually migrate to .gl-display-none: https://gitlab.com/gitlab-org/gitlab/-/issues/351792.
-                = gl_badge_tag({ size: :sm, variant: :info }, { class: "js-todos-count gl-ml-n2#{(' hidden' if todos_pending_count == 0)}", "aria-label": _("Todos count") }) do
+                = gl_badge_tag({ size: :sm, variant: :info }, { class: "js-todos-count gl-ml-n2 #{'hidden' if todos_pending_count == 0}", "aria-label": _("Todos count") }) do
                   = todos_count_format(todos_pending_count)
           %li.nav-item.header-help.dropdown.d-none.d-md-block{ data: { track_action: 'click_question_mark_link', track_label: 'main_navigation', track_property: 'navigation', track_experiment: 'cross_stage_fdm' } }
             = link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown" } do
@@ -121,14 +103,8 @@
             .dropdown-menu.dropdown-menu-right
               = render 'layouts/header/help_dropdown'
           - unless current_user
-            - experiment(:logged_out_marketing_header, actor: nil) do |e|
-              - e.candidate do
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = render "layouts/nav/top_nav"
-              - e.try(:trial_focused) do
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = render "layouts/nav/top_nav"
-              - e.control {}
+            %li.nav-item.gl-display-none.gl-sm-display-block
+              = render "layouts/nav/top_nav"
           - if header_link?(:user_dropdown)
             %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { track_label: "profile_dropdown", track_action: "click_dropdown", track_value: "", qa_selector: 'user_menu', testid: 'user-menu' }, class: ('mr-0' if has_impersonation_link) }
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
@@ -142,23 +118,11 @@
               = link_to admin_impersonation_path, class: 'nav-link impersonation-btn', method: :delete, title: _('Stop impersonation'), aria: { label: _('Stop impersonation') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body', qa_selector: 'stop_impersonation_link' } do
                 = sprite_icon('incognito', size: 18)
           - if header_link?(:sign_in)
-            - experiment(:logged_out_marketing_header, actor: nil) do |e|
-              - e.candidate do
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = link_to _('Sign up now'), new_user_registration_path, class: 'gl-button btn btn-default btn-sign-in', data: { track_action: 'click_button', track_experiment: e.name, track_label: 'sign_up_now' }
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = link_to _('Login'), new_session_path(:user, redirect_to_referer: 'yes')
-                = render 'layouts/header/sign_in_register_button', class: 'gl-sm-display-none'
-              - e.try(:trial_focused) do
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = link_to _('Get a free trial'), 'https://about.gitlab.com/free-trial/', class: 'gl-button btn btn-default btn-sign-in', data: { track_action: 'click_button', track_experiment: e.name, track_label: 'get_a_free_trial' }
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = link_to _('Sign up'), new_user_registration_path, data: { track_action: 'click_button', track_experiment: e.name, track_label: 'sign_up' }
-                %li.nav-item.gl-display-none.gl-sm-display-block
-                  = link_to _('Login'), new_session_path(:user, redirect_to_referer: 'yes')
-                = render 'layouts/header/sign_in_register_button', class: 'gl-sm-display-none'
-              - e.control do
-                = render 'layouts/header/sign_in_register_button'
+            %li.nav-item.gl-display-none.gl-sm-display-block
+              = link_to _('Sign up now'), new_user_registration_path, class: 'gl-button btn btn-default btn-sign-in'
+            %li.nav-item.gl-display-none.gl-sm-display-block
+              = link_to _('Login'), new_session_path(:user, redirect_to_referer: 'yes')
+            = render 'layouts/header/sign_in_register_button', class: 'gl-sm-display-none'
 
       %button.navbar-toggler.d-block.d-sm-none{ type: 'button', class: 'gl-border-none!', data: { testid: 'top-nav-responsive-toggle', qa_selector: 'mobile_navbar_button' } }
         %span.sr-only= _('Toggle navigation')
diff --git a/app/views/layouts/header/_gitlab_version.html.haml b/app/views/layouts/header/_gitlab_version.html.haml
index fae6926a687..2315caa5fe8 100644
--- a/app/views/layouts/header/_gitlab_version.html.haml
+++ b/app/views/layouts/header/_gitlab_version.html.haml
@@ -1,6 +1,15 @@
 - return unless show_version_check?
 
-%a{ class: 'gl-display-flex! gl-flex-direction-column gl-px-4! gl-py-3! gl-line-height-24!', href: help_page_path('update/index'), 'data-testid': 'gitlab-version-container' }
+%a{
+    class: 'gl-display-flex! gl-flex-direction-column gl-px-4! gl-py-3! gl-line-height-24!',
+    href: help_page_path('update/index'),
+    data: {
+      testid: 'gitlab-version-container',
+      track_action: 'click_link',
+      track_label: 'version_help_dropdown',
+      track_property: "#{Gitlab.version_info.major}.#{Gitlab.version_info.minor}"
+    }
+  }
   %span
     = s_("VersionCheck|Your GitLab Version")
     = emoji_icon('rocket')
@@ -8,4 +17,4 @@
     %span.gl-font-sm.gl-text-gray-500
       #{Gitlab.version_info.major}.#{Gitlab.version_info.minor}
     %span.gl-ml-2
-      .js-gitlab-version-check{ data: { "size": "sm" } }
+      .js-gitlab-version-check-badge{ data: { "size": "sm" } }
diff --git a/app/views/layouts/header/_new_dropdown.html.haml b/app/views/layouts/header/_new_dropdown.html.haml
index 9801b0cc055..f39fb53032d 100644
--- a/app/views/layouts/header/_new_dropdown.html.haml
+++ b/app/views/layouts/header/_new_dropdown.html.haml
@@ -7,7 +7,7 @@
 - return if menu_sections.empty?
 
 %li.header-new.gl-flex-grow-1.gl-flex-shrink-1.dropdown{ class: top_class, data: { track_label: "new_dropdown", track_action: "click_dropdown" } }
-  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip gl-display-inline-block!", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
+  = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip gl-display-flex", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
     = sprite_icon('plus-square')
     = sprite_icon('chevron-down', css_class: 'caret-down')
   .dropdown-menu.dropdown-menu-right.dropdown-extended-height
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 75d5e40011c..6ad6696b313 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -19,5 +19,6 @@
         window.uploads_path = "#{project_uploads_path(project)}";
 
 = dispensable_render_if_exists "shared/web_hooks/web_hook_disabled_alert"
+= dispensable_render_if_exists "projects/free_user_cap_alert", project: @project
 
 = render template: "layouts/application"
diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml
index 4e8d8a20ef1..5d4d2c0fcd8 100644
--- a/app/views/notify/pipeline_failed_email.html.haml
+++ b/app/views/notify/pipeline_failed_email.html.haml
@@ -6,7 +6,7 @@
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;line-height:1;" }
             %img{ alt: "✖", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), style: "display:block;", width: "13" }/
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
-            Pipeline ##{@pipeline.id} has failed!
+            = s_('Notify|Pipeline #%{pipeline_id} has failed!') % { pipeline_id: @pipeline.id }
 %tr.spacer
   %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
     &nbsp;
@@ -15,7 +15,8 @@
     %table.table-info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
       %tbody
         %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" }
+            = _('Project')
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:500;padding:14px 0;margin:0;color:#333333;width:75%;padding-left:5px;" }
             - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
             - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
@@ -25,7 +26,8 @@
             %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
               = @project.name
         %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Branch
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" }
+            = _('Branch')
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:500;padding:14px 0;margin:0;color:#333333;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
             %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
               %tbody
@@ -36,7 +38,8 @@
                     %a.muted{ href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;" }
                       = @pipeline.source_ref
         %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Commit
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" }
+            = _('Commit')
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:400;padding:14px 0;margin:0;color:#333333;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
             %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
               %tbody
@@ -54,7 +57,8 @@
               = @pipeline.git_commit_message.truncate(50)
         - commit = @pipeline.commit
         %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Commit Author
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" }
+            = s_('Notify|Commit Author')
           %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:500;padding:14px 0;margin:0;color:#333333;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
             %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
               %tbody
@@ -93,11 +97,10 @@
     %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
       %tbody
         %tr
-          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;font-weight:500;line-height:1.4;vertical-align:baseline;" }
-            Pipeline
-            %a{ href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
-              = "\##{@pipeline.id}"
-            triggered by
+          - common_style = "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;font-weight:500;line-height:1.4;vertical-align:baseline;"
+          - pipeline_link = link_to "##{@pipeline.id}", pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;"
+          %td{ style: "#{common_style}" }
+            = s_('Notify|Pipeline %{pipeline_link} triggered by').html_safe % { pipeline_link: pipeline_link }
           - if @pipeline.user
             %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;padding-left:5px", width: "24" }
               %img.avatar{ height: "24", src: avatar_icon_for_user(@pipeline.user, 24, only_path: false), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "" }/
diff --git a/app/views/notify/unknown_sign_in_email.html.haml b/app/views/notify/unknown_sign_in_email.html.haml
index b1c79274e26..64bf4e7b4e8 100644
--- a/app/views/notify/unknown_sign_in_email.html.haml
+++ b/app/views/notify/unknown_sign_in_email.html.haml
@@ -9,7 +9,7 @@
         %tr
           %td{ style: "#{default_font}vertical-align:middle;color:#ffffff;text-align:center;" }
             %span
-              = _("Your %{host} account was signed in to from a new location") % { host: Gitlab.config.gitlab.host }
+              = _("Someone signed in to your %{host} account from a new location") % { host: Gitlab.config.gitlab.host }
 %tr.spacer
   %td{ style: spacer_style }
     &nbsp;
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index b37a0d9cc1a..e6d91543585 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -5,12 +5,12 @@
 
     .form-group
       = f.label :key, s_('Profiles|Key'), class: 'label-bold'
-      = f.text_area :key, class: "form-control gl-form-input js-add-ssh-key-validation-input qa-key-public-key-field", rows: 8, required: true, data: { supported_algorithms: Gitlab::SSHPublicKey.supported_algorithms }
+      = f.text_area :key, class: "form-control gl-form-input js-add-ssh-key-validation-input", rows: 8, required: true, data: { supported_algorithms: Gitlab::SSHPublicKey.supported_algorithms, qa_selector: 'key_public_key_field' }
       %p.form-text.text-muted= s_('Profiles|Begins with %{ssh_key_algorithms}.') % { ssh_key_algorithms: ssh_key_allowed_algorithms }
     .form-row
       .col.form-group
         = f.label :title, s_('Profiles|Title'), class: 'label-bold'
-        = f.text_field :title, class: "form-control gl-form-input input-lg qa-key-title-field", required: true, placeholder: s_('Profiles|Example: MacBook key')
+        = f.text_field :title, class: "form-control gl-form-input input-lg", required: true, placeholder: s_('Profiles|Example: MacBook key'), data: { qa_selector: 'key_title_field' }
         %p.form-text.text-muted= s_('Profiles|Key titles are publicly visible.')
 
     .form-row
@@ -29,4 +29,4 @@
         button_options: { class: 'js-add-ssh-key-validation-confirm-submit' }) do
         = _("Yes, add it")
     .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit qa-add-key-button", pajamas_button: true
+      = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit", pajamas_button: true, data: { qa_selector: 'add_key_button' }
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 23a0d824bfe..efc1e23d9b4 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/notifications'
 - page_title _('Notifications')
 - @content_class = "limit-container-width" unless fluid_layout
 
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 636defb3f10..82df6b1b2c7 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -25,6 +25,6 @@
         scopes: @scopes,
         help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_personal_access_tokens.to_json } }
+    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json } }
 
 #js-tokens-app{ data: { tokens_data: tokens_app_data } }
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index dfaa4c31cdf..a140d780180 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -62,7 +62,7 @@
       %p= s_("Profiles|Set your local time zone.")
     .col-lg-8
       = f.label :user_timezone, _("Time zone")
-      .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @user.timezone } }
+      .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @user.timezone, name: 'user[timezone]' } }
     .col-lg-12
       %hr
   .row.js-search-settings-section
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 319c6333e77..51222784847 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -6,7 +6,7 @@
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
-#tree-holder.tree-holder.clearfix
+#tree-holder.tree-holder.clearfix.js-per-page{ data: { blame_per_page: Projects::BlameService::PER_PAGE } }
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
     = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
 
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index 42cdc1d6989..cc5271a1cd2 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -10,45 +10,32 @@
     .import-buttons
       - if gitlab_project_import_enabled?
         .import_gitlab_project.has-tooltip{ data: { container: 'body', qa_selector: 'gitlab_import_button' } }
-          = link_to '#', class: 'gl-button btn-default btn btn_import_gitlab_project js-import-project-btn', data: { href: new_import_gitlab_project_path, platform: 'gitlab_export', **tracking_attrs_data(track_label, 'click_button', 'gitlab_export') } do
-            .gl-button-icon
-              = sprite_icon('tanuki')
-            = _("GitLab export")
+          = render Pajamas::ButtonComponent.new(href: '#', icon: 'tanuki', button_options: { class: 'btn_import_gitlab_project js-import-project-btn', data: { href: new_import_gitlab_project_path, platform: 'gitlab_export', **tracking_attrs_data(track_label, 'click_button', 'gitlab_export') } }) do
+            = _('GitLab export')
+
+      - if gitlab_import_enabled?
+        %div
+          = render Pajamas::ButtonComponent.new(href: status_import_gitlab_path(namespace_id: namespace_id), icon: 'tanuki', button_options: { class: "import_gitlab js-import-project-btn #{'js-how-to-import-link' unless gitlab_import_configured?}", data: { modal_title: _("Import projects from GitLab.com"), modal_message: import_from_gitlab_message, platform: 'gitlab_com', **tracking_attrs_data(track_label, 'click_button', 'gitlab_com') } }) do
+            GitLab.com
 
       - if github_import_enabled?
         %div
-          = link_to new_import_github_path(namespace_id: namespace_id), class: 'gl-button btn-default btn js-import-github js-import-project-btn', data: { platform: 'github', **tracking_attrs_data(track_label, 'click_button', 'github') } do
-            .gl-button-icon
-              = sprite_icon('github')
+          = render Pajamas::ButtonComponent.new(href: new_import_github_path(namespace_id: namespace_id), icon: 'github', button_options: { class: 'js-import-github js-import-project-btn', data: { platform: 'github', **tracking_attrs_data(track_label, 'click_button', 'github') } }) do
             GitHub
 
       - if bitbucket_import_enabled?
         %div
-          = link_to status_import_bitbucket_path(namespace_id: namespace_id), class: "gl-button btn-default btn import_bitbucket js-import-project-btn #{'js-how-to-import-link' unless bitbucket_import_configured?}",
-          data: { modal_title: _("Import projects from Bitbucket"), modal_message: import_from_bitbucket_message, platform: 'bitbucket_cloud', **tracking_attrs_data(track_label, 'click_button', 'bitbucket_cloud') } do
-            .gl-button-icon
-              = sprite_icon('bitbucket')
+          = render Pajamas::ButtonComponent.new(href: status_import_bitbucket_path(namespace_id: namespace_id), icon: 'bitbucket', button_options: { class: "import_bitbucket js-import-project-btn #{'js-how-to-import-link' unless bitbucket_import_configured?}", data: { modal_title: _("Import projects from Bitbucket"), modal_message: import_from_bitbucket_message, platform: 'bitbucket_cloud', **tracking_attrs_data(track_label, 'click_button', 'bitbucket_cloud') } }) do
             Bitbucket Cloud
+
       - if bitbucket_server_import_enabled?
         %div
-          = link_to status_import_bitbucket_server_path(namespace_id: namespace_id), class: "gl-button btn-default btn import_bitbucket js-import-project-btn", data: { platform: 'bitbucket_server', **tracking_attrs_data(track_label, 'click_button', 'bitbucket_server') } do
-            .gl-button-icon
-              = sprite_icon('bitbucket')
+          = render Pajamas::ButtonComponent.new(href: status_import_bitbucket_server_path(namespace_id: namespace_id), icon: 'bitbucket', button_options: { class: 'import_bitbucket js-import-project-btn', data: { platform: 'bitbucket_server', **tracking_attrs_data(track_label, 'click_button', 'bitbucket_server') } }) do
             Bitbucket Server
-        %div
-      - if gitlab_import_enabled?
-        %div
-          = link_to status_import_gitlab_path(namespace_id: namespace_id), class: "gl-button btn-default btn import_gitlab js-import-project-btn #{'js-how-to-import-link' unless gitlab_import_configured?}",
-            data: { modal_title: _("Import projects from GitLab.com"), modal_message: import_from_gitlab_message, platform: 'gitlab_com', **tracking_attrs_data(track_label, 'click_button', 'gitlab_com') } do
-            .gl-button-icon
-              = sprite_icon('tanuki')
-            = _("GitLab.com")
 
       - if fogbugz_import_enabled?
         %div
-          = link_to new_import_fogbugz_path(namespace_id: namespace_id), class: 'gl-button btn-default btn import_fogbugz js-import-project-btn', data: { platform: 'fogbugz', **tracking_attrs_data(track_label, 'click_button', 'fogbugz') } do
-            .gl-button-icon
-              = sprite_icon('bug')
+          = render Pajamas::ButtonComponent.new(href: new_import_fogbugz_path(namespace_id: namespace_id), icon: 'bug', button_options: { class: 'import_fogbugz js-import-project-btn', data: { platform: 'fogbugz', **tracking_attrs_data(track_label, 'click_button', 'fogbugz') } }) do
             FogBugz
 
       - if gitea_import_enabled?
@@ -60,24 +47,20 @@
 
       - if git_import_enabled?
         %div
-          %button.gl-button.btn-default.btn.btn-svg.js-toggle-button.js-import-git-toggle-button.js-import-project-btn{ type: "button", data: { platform: 'repo_url', toggle_open_class: 'active', **tracking_attrs_data(track_label, 'click_button', 'repo_url') } }
-            .gl-button-icon
-              = sprite_icon('link', css_class: 'gl-icon')
+          = render Pajamas::ButtonComponent.new(icon: 'link', button_options: { class: 'js-toggle-button js-import-git-toggle-button js-import-project-btn', data: { platform: 'repo_url', toggle_open_class: 'active', **tracking_attrs_data(track_label, 'click_button', 'repo_url') } }) do
             = _('Repository by URL')
 
       - if manifest_import_enabled?
         %div
-          = link_to new_import_manifest_path(namespace_id: namespace_id), class: 'gl-button btn-default btn import_manifest js-import-project-btn', data: { platform: 'manifest_file', **tracking_attrs_data(track_label, 'click_button', 'manifest_file') } do
-            .gl-button-icon
-              = sprite_icon('doc-text')
-            Manifest file
+          = render Pajamas::ButtonComponent.new(href: new_import_manifest_path(namespace_id: namespace_id), icon: 'doc-text', button_options: { class: 'import_manifest js-import-project-btn', data: { platform: 'manifest_file', **tracking_attrs_data(track_label, 'click_button', 'manifest_file') } }) do
+            = _('Manifest file')
 
       - if phabricator_import_enabled?
         %div
-          = link_to new_import_phabricator_path(namespace_id: namespace_id), class: 'gl-button btn-default btn import_phabricator js-import-project-btn', data: { platform: 'phabricator', track_label: "#{track_label}", track_action: "click_button", track_property: "phabricator" } do
-            .gl-button-icon
-              = custom_icon('issues')
-            = _("Phabricator Tasks")
+          = render Pajamas::ButtonComponent.new(href: new_import_phabricator_path(namespace_id: namespace_id), icon: 'issues', button_options: { class: 'import_phabricator js-import-project-btn', data: { platform: 'phabricator', track_label: "#{track_label}", track_action: "click_button", track_property: "phabricator" } }) do
+            = _('Phabricator tasks')
+
+      = render_if_exists "projects/gitee_import_button", namespace_id: namespace_id, track_label: track_label
 
 
   .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 859f065377d..5b493772f0a 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -16,5 +16,5 @@
 
     - if create_mr_button_from_event?(event)
       = c.actions do
-        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { class: 'qa-create-merge-request' }) do
+        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { data: { qa_selector: 'create_merge_request_button' }}) do
           = _('Create merge request')
diff --git a/app/views/projects/_merge_request_merge_checks_settings.html.haml b/app/views/projects/_merge_request_merge_checks_settings.html.haml
index 3345b3043b8..8c12399fdbb 100644
--- a/app/views/projects/_merge_request_merge_checks_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_checks_settings.html.haml
@@ -12,6 +12,7 @@
       s_('ProjectSettings|Skipped pipelines are considered successful'),
       help_text: s_('ProjectSettings|Introduces the risk of merging changes that do not pass the pipeline.'),
       checkbox_options: { class: 'gl-pl-6' }
+  = render_if_exists 'projects/merge_request_merge_checks_status_checks', form: form, project: @project
   = form.gitlab_ui_checkbox_component :only_allow_merge_if_all_discussions_are_resolved,
     s_('ProjectSettings|All threads must be resolved'),
     checkbox_options: { data: { qa_selector: 'allow_merge_if_all_discussions_are_resolved_checkbox' } }
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index e3aa2d8afc9..93fc8d12960 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -3,7 +3,7 @@
 - hidden_input_id = "new_namespace_id"
 - initial_data = { button_text: s_('ProjectSettings|Transfer project'), confirm_danger_message: transfer_project_message(@project), phrase: @project.name, target_form_id: form_id, target_hidden_input_id: hidden_input_id, project_id: @project.id }
 
-.sub-section
+.sub-section{ data: { qa_selector: 'transfer_project_content' } }
   %h4.danger-title= _('Transfer project')
   = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
     .form-group
@@ -20,5 +20,4 @@
         %li= _('You will need to update your local repositories to point to the new location.')
         %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
       = hidden_field_tag(hidden_input_id)
-      = label_tag :new_namespace_id, _('Select a new namespace'), class: 'gl-font-weight-bold'
       .js-transfer-project-form{ data: initial_data }
diff --git a/app/views/projects/_visibility_modal.html.haml b/app/views/projects/_visibility_modal.html.haml
deleted file mode 100644
index e8a4e091dcf..00000000000
--- a/app/views/projects/_visibility_modal.html.haml
+++ /dev/null
@@ -1,29 +0,0 @@
-- strong_start = "<strong>".html_safe
-- strong_end = "</strong>".html_safe
-
-.modal.js-confirm-project-visiblity{ tabindex: -1 }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h1.page-title.gl-font-size-h-display= _('Reduce this project’s visibility?')
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": "true" }= sprite_icon("close")
-      .modal-body
-        %p
-          - if @project.group
-            = _("You're about to reduce the visibility of the project %{strong_start}%{project_name}%{strong_end} in %{strong_start}%{group_name}%{strong_end}.").html_safe % { project_name: @project.name, group_name: @project.group.name, strong_start: strong_start, strong_end: strong_end }
-          - else
-            = _("You're about to reduce the visibility of the project %{strong_start}%{project_name}%{strong_end}.").html_safe % { project_name: @project.name, strong_start: strong_start, strong_end: strong_end }
-        %p
-          = _('Once you confirm and press "Reduce project visibility":')
-        %ul
-          %li
-            = _("Current forks will keep their visibility level.").html_safe
-        %label{ for: "confirm_path_input" }
-          = _("To confirm, type %{phrase_code}").html_safe % { phrase_code: '<code class="js-legacy-confirm-danger-match">%{phrase_name}</code>'.html_safe % { phrase_name: @project.full_path } }
-        .form-group
-          = text_field_tag 'confirm_path_input', '', class: 'form-control js-legacy-confirm-danger-input'
-        .form-actions
-          %button.btn.gl-button.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
-            = _('Cancel')
-          = submit_tag _('Reduce project visibility'), class: "btn gl-button btn-danger js-legacy-confirm-danger-submit", disabled: true
diff --git a/app/views/projects/artifacts/_artifact.html.haml b/app/views/projects/artifacts/_artifact.html.haml
deleted file mode 100644
index 9e548582396..00000000000
--- a/app/views/projects/artifacts/_artifact.html.haml
+++ /dev/null
@@ -1,61 +0,0 @@
-.gl-responsive-table-row.px-md-3
-  .table-section.section-25.section-wrap.commit
-    .table-mobile-header{ role: 'rowheader' }= _('Job')
-    .table-mobile-content
-      .branch-commit.cgray
-        - if can?(current_user, :read_build, @project)
-          = link_to project_job_path(@project, artifact.job) do
-            %span.build-link ##{artifact.job_id}
-        - else
-          %span.build-link ##{artifact.job_id}
-
-        - if artifact.job.ref
-          .icon-container.gl-display-inline-block{ "aria-label" => artifact.job.tag? ? _('Tag') : _('Branch') }
-            = artifact.job.tag? ? sprite_icon('tag', css_class: 'sprite') : sprite_icon('branch', css_class: 'sprite')
-          = link_to artifact.job.ref, project_ref_path(@project, artifact.job.ref), class: 'ref-name'
-        - else
-          .light= _('none')
-        .icon-container.commit-icon{ "aria-label" => _('Commit') }
-          = sprite_icon('commit')
-
-        - if artifact.job.sha
-          = link_to artifact.job.short_sha, project_commit_path(@project, artifact.job.sha), class: 'commit-sha mr-0'
-
-  .table-section.section-15.section-wrap
-    .table-mobile-header{ role: 'rowheader' }= _('Name')
-    .table-mobile-content
-      = artifact.job.name
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Creation date')
-    .table-mobile-content
-      %p.finished-at
-        = sprite_icon("calendar")
-        %span= time_ago_with_tooltip(artifact.created_at)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Expiration date')
-    .table-mobile-content
-      - if artifact.expire_at
-        %p.finished-at
-          = sprite_icon("calendar")
-          %span= time_ago_with_tooltip(artifact.expire_at)
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Size')
-    .table-mobile-content
-      = number_to_human_size(artifact.size, precision: 2)
-
-  .table-section.table-button-footer.section-10
-    .table-action-buttons
-      .btn-group
-        - if can?(current_user, :read_build, @project)
-          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
-            = sprite_icon('download', css_class: 'gl-icon')
-
-          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
-            = sprite_icon('folder-open', css_class: 'gl-icon')
-
-        - if can?(current_user, :destroy_artifacts, @project)
-          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?'), confirm_btn_variant: "danger" }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger btn-icon has-tooltip' do
-            = sprite_icon('remove', css_class: 'gl-icon')
diff --git a/app/views/projects/artifacts/_table.html.haml b/app/views/projects/artifacts/_table.html.haml
deleted file mode 100644
index 1963449d704..00000000000
--- a/app/views/projects/artifacts/_table.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- if artifacts.blank?
-  .nothing-here-block= _('No jobs to show')
-- else
-  .table-holder
-    .ci-table
-      .gl-responsive-table-row.table-row-header.px-md-3{ role: 'row' }
-        .table-section.section-25{ role: 'rowheader' }= _('Job')
-        .table-section.section-15{ role: 'rowheader' }= _('Name')
-        .table-section.section-20{ role: 'rowheader' }= _('Creation date')
-        .table-section.section-20{ role: 'rowheader' }= _('Expiration date')
-        .table-section.section-10{ role: 'rowheader' }= _('Size')
-        .table-section.section-10{ role: 'rowheader' }
-
-      = render partial: 'artifact', collection: artifacts, as: :artifact
-
-  = paginate artifacts, theme: "gitlab", total_pages: @total_pages
diff --git a/app/views/projects/artifacts/index.html.haml b/app/views/projects/artifacts/index.html.haml
index 1ab3e8e67d8..9cbc149177c 100644
--- a/app/views/projects/artifacts/index.html.haml
+++ b/app/views/projects/artifacts/index.html.haml
@@ -1,10 +1,9 @@
-- @no_container = true
 - page_title _('Artifacts')
 
 %div{ class: container_class }
-  .top-area.py-3
-    .align-self-center
-      = _('Total artifacts size: %{total_size}') % { total_size: number_to_human_size(@total_size, precicion: 2) }
-
-  .content-list.builds-content-list
-    = render "table", artifacts: @artifacts, project: @project
+  %h1.page-title.gl-font-size-h-display.gl-mb-0
+    = s_('Artifacts|Artifacts')
+  .gl-mb-6
+    %strong= s_('Artifacts|Total artifacts size')
+    = number_to_human_size(@total_size, precicion: 2)
+  #js-artifact-management{ data: { "project-path" => @project.full_path } }
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 9fd542e0cfb..17d5ef69b76 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -13,7 +13,7 @@
   #js-code-owners{ data: { blob_path: blob.path, project_path: @project.full_path, branch: @ref } }
   = render "projects/blob/auxiliary_viewer", blob: blob
 
-#blob-content-holder.blob-content-holder
+#blob-content-holder.blob-content-holder.js-per-page{ data: { blame_per_page: Projects::BlameService::PER_PAGE } }
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
   - if !expanded
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index bd08ab67cd3..a907e175443 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -16,7 +16,7 @@
     - if current_action?(:new) || current_action?(:create)
       %span.float-left.gl-mr-3
         \/
-      = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
+      = text_field_tag 'file_name', params[:file_name], placeholder: "File name", data: { qa_selector: 'file_name_field' },
         required: true, class: 'form-control gl-form-input new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
       = render 'template_selectors'
       - if should_suggest_gitlab_ci_yml?
@@ -38,7 +38,7 @@
   .file-editor.code
     - if Feature.enabled?(:source_editor_toolbar, current_user)
       #editor-toolbar
-    .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true, qa_selector: 'source_editor_preview_container' } }<
+    .js-edit-mode-pane#editor{ data: { 'editor-loading': true, qa_selector: 'source_editor_preview_container' } }<
       %pre.editor-loading-content= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
       .js-edit-mode-pane#preview.hide
diff --git a/app/views/projects/blob/viewers/_loading.html.haml b/app/views/projects/blob/viewers/_loading.html.haml
index 9cb934da7c0..d8efaf9ad95 100644
--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/app/views/projects/blob/viewers/_loading.html.haml
@@ -1 +1 @@
-= gl_loading_icon(size: "md", css_class: "qa-spinner gl-my-4")
+= gl_loading_icon(size: "md", css_class: "gl-my-4", data: { qa_selector: 'spinner_placeholder' })
diff --git a/app/views/projects/branch_defaults/_branch_names_fields.html.haml b/app/views/projects/branch_defaults/_branch_names_fields.html.haml
new file mode 100644
index 00000000000..65f975fbd9e
--- /dev/null
+++ b/app/views/projects/branch_defaults/_branch_names_fields.html.haml
@@ -0,0 +1,14 @@
+- if @project.project_feature.issues_access_level > 0
+  %fieldset#branch-names-settings
+    .form-group
+      = f.label :issue_branch_template, _('Branch name template'), class: 'label-bold'
+      %p= s_('ProjectSettings|Branches created from issues follow this pattern.')
+
+    .form-group
+      .gl-mb-2
+        = f.text_field :issue_branch_template, class: 'form-control gl-mb-2', placeholder: "%{id}-%{title}"
+        %p.form-text.text-muted
+          = s_('ProjectSettings|Leave empty to use default template.')
+          = sprintf(s_('ProjectSettings|Maximum %{maxLength} characters.'), { maxLength: Issue::MAX_BRANCH_TEMPLATE })
+          - branch_name_help_link = help_page_path('user/project/repository/web_editor.md', anchor: 'create-a-new-branch-from-an-issue')
+          = link_to _('What variables can I use?'), branch_name_help_link, target: "_blank"
diff --git a/app/views/projects/branch_defaults/_default_branch_fields.html.haml b/app/views/projects/branch_defaults/_default_branch_fields.html.haml
new file mode 100644
index 00000000000..e4f51725f1a
--- /dev/null
+++ b/app/views/projects/branch_defaults/_default_branch_fields.html.haml
@@ -0,0 +1,16 @@
+%fieldset#default-branch-settings
+  - if @project.empty_repo?
+    .text-secondary
+      = s_('ProjectSettings|A default branch cannot be chosen for an empty project.')
+  - else
+    .form-group
+      = f.label :default_branch, _("Default branch"), class: 'label-bold'
+      %p= s_('ProjectSettings|All merge requests and commits are made against this branch unless you specify a different one.')
+      .js-select-default-branch{ data: { default_branch: @project.default_branch, project_id: @project.id } }
+
+  .form-group
+    - help_text = _("When merge requests and commits in the default branch close, any issues they reference also close.")
+    - help_icon = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'closing-issues-automatically'), target: '_blank', rel: 'noopener noreferrer'
+    = f.gitlab_ui_checkbox_component :autoclose_referenced_issues,
+        s_('ProjectSettings|Auto-close referenced issues on default branch'),
+        help_text: (help_text + "&nbsp;" + help_icon).html_safe
diff --git a/app/views/projects/branch_defaults/_show.html.haml b/app/views/projects/branch_defaults/_show.html.haml
new file mode 100644
index 00000000000..4ecbc3b7fc8
--- /dev/null
+++ b/app/views/projects/branch_defaults/_show.html.haml
@@ -0,0 +1,17 @@
+- expanded = expanded_by_default?
+
+%section.settings.no-animate#branch-defaults-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Branch defaults')
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = s_('ProjectSettings|Select the default branch for this project, and configure the template for branch names.')
+
+  .settings-content
+    - url = namespace_project_settings_repository_path(@project.namespace, @project)
+    = gitlab_ui_form_for @project, url: url, method: :put, html: { multipart: true, class: "issue-settings-form js-issue-settings-form" }, authenticity_token: true do |f|
+      %input{ name: 'update_section', type: 'hidden', value: 'js-issue-settings' }
+        = render 'projects/branch_defaults/default_branch_fields', f: f
+        = render 'projects/branch_defaults/branch_names_fields', f: f
+      = f.submit _('Save changes'), pajamas_button: true, data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 52b8d6bc66f..51c218f40b9 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,19 +1,19 @@
 - merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
 - merge_project = merge_request_source_project_for_project(@project)
-%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name}", data: { name: branch.name } }
+%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name}", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
   .branch-info
     .gl-display-flex.gl-align-items-center
       = sprite_icon('branch', size: 12, css_class: 'gl-flex-shrink-0')
-      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3 qa-branch-name' do
+      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3', data: { qa_selector: 'branch_link' } do
         = branch.name
       = clipboard_button(text: branch.name, title: _("Copy branch name"))
       - if branch.name == @repository.root_ref
-        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :info, size: :sm }, { class: 'gl-ml-2' }
+        = gl_badge_tag s_('DefaultBranchLabel|default'), { variant: :info, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
       - elsif merged
-        = gl_badge_tag s_('Branches|merged'), { variant: :info, size: :sm }, { class: 'gl-ml-2', title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref }, data: { toggle: 'tooltip', container: 'body' } }
+        = gl_badge_tag s_('Branches|merged'), { variant: :info, size: :sm }, { class: 'gl-ml-2', title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref }, data: { toggle: 'tooltip', container: 'body', qa_selector: 'badge_content' } }
       - if protected_branch?(@project, branch)
-        = gl_badge_tag s_('Branches|protected'), { variant: :success, size: :sm }, { class: 'gl-ml-2' }
+        = gl_badge_tag s_('Branches|protected'), { variant: :success, size: :sm }, { class: 'gl-ml-2', data: { qa_selector: 'badge_content' } }
 
       = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch
 
@@ -46,4 +46,5 @@
 
     = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name], class: 'gl-vertical-align-top'
 
-    = render 'projects/branches/delete_branch_modal_button', project: @project, branch: branch, merged: merged
+    - if can?(current_user, :push_code, @project)
+      = render 'projects/branches/delete_branch_modal_button', project: @project, branch: branch, merged: merged
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index 6ca5aaf061e..a1f93d21647 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -11,7 +11,7 @@
   - c.header do
     = panel_title
   - c.body do
-    %ul.content-list.all-branches.qa-all-branches
+    %ul.content-list.all-branches{ data: { qa_selector: 'all_branches_container' } }
       - branches.first(overview_max_branches).each do |branch|
         = render "projects/branches/branch", branch: branch, merged: project.repository.merged_to_root_ref?(branch), commit_status: @branch_pipeline_statuses[branch.name], show_commit_status: @branch_pipeline_statuses.any?
   - if branches.size > overview_max_branches
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 295b2de9bd2..475bc9e1c20 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/branches'
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
 
@@ -6,21 +7,16 @@
     = gl_tab_link_to s_('Branches|Overview'), project_branches_path(@project), { item_active: @mode == 'overview', title: s_('Branches|Show overview of the branches') }
     = gl_tab_link_to s_('Branches|Active'), project_branches_filtered_path(@project, state: 'active'), { title: s_('Branches|Show active branches') }
     = gl_tab_link_to s_('Branches|Stale'), project_branches_filtered_path(@project, state: 'stale'), { title: s_('Branches|Show stale branches') }
-    = gl_tab_link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), { item_active: !%w[overview active stale].include?(@mode), title: s_('Branches|Show all branches') }
+    = gl_tab_link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), { item_active: %w[overview active stale].exclude?(@mode), title: s_('Branches|Show all branches') }
 
   .nav-controls
     #js-branches-sort-dropdown{ data: { project_branches_filtered_path: project_branches_path(@project, state: 'all'), sort_options: branches_sort_options_hash.to_json, mode: @mode } }
 
     - if can? current_user, :push_code, @project
-      = link_to project_merged_branches_path(@project),
-        class: 'gl-button btn btn-danger btn-danger-secondary has-tooltip qa-delete-merged-branches',
-        title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref },
-        method: :delete,
-        aria: { label: s_('Branches|Delete merged branches') },
-        data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
-          confirm_btn_variant: 'danger',
-          container: 'body' } do
-        = s_('Branches|Delete merged branches')
+      .js-delete-merged-branches{ data: {
+          default_branch: @project.repository.root_ref,
+          form_path: project_merged_branches_path(@project) }
+        }
       = link_to new_project_branch_path(@project), class: 'gl-button btn btn-confirm' do
         = s_('Branches|New branch')
 
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 2d32e07d379..23dcb7f41e1 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,3 +1,5 @@
+- project = local_assigns.fetch(:project)
+- ref = local_assigns.fetch(:ref)
 - pipeline = local_assigns.fetch(:pipeline) { project.latest_successful_pipeline_for(ref) }
 
 - if !project.empty_repo? && can?(current_user, :download_code, project)
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 23572d1d6ac..6e202063900 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -30,7 +30,7 @@
       = preserve(markdown_field(@commit, :description))
 
 .info-well.js-commit-box-info{ 'data-commit-path' => branches_project_commit_path(@project, @commit.id) }
-  .well-segment.branch-info
+  .well-segment
     .icon-container.commit-icon
       = custom_icon("icon_commit")
     %span.cgray= n_('parent', 'parents', @commit.parents.count)
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index bf6b628dd36..b5481f19352 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -34,8 +34,8 @@
         &middot;
         = commit.short_id
       - if commit.description? && collapsible
-        %button.gl-button.btn.btn-default.button-ellipsis-horizontal.btn-sm.gl-ml-2.text-expander.js-toggle-button{ data: { toggle: 'tooltip', container: 'body' }, :title => _("Toggle commit description"), aria: { label: _("Toggle commit description") } }
-          = sprite_icon('ellipsis_h', size: 12)
+        = render Pajamas::ButtonComponent.new(icon: 'ellipsis_h',
+          button_options: { class: 'button-ellipsis-horizontal text-expander js-toggle-button', data: { toggle: 'tooltip', container: 'body' }, :title => _("Toggle commit description"), aria: { label: _("Toggle commit description") }})
 
       .committer
         - commit_author_link = commit_author_link(commit, avatar: false, size: 24)
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index bb3a38d6ac8..b5ecc9b0193 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -33,16 +33,15 @@
       - else
         = render partial: 'projects/commits/commit', collection: context_commits, locals: { project: project, ref: ref, merge_request: merge_request }
 
-- if hidden > 0
+- if hidden > 0 && !@merge_request
   %li
     = render Pajamas::AlertComponent.new(variant: :warning,
       dismissible: false) do |c|
       = c.body do
         = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)
 
-- if can_update_merge_request && context_commits&.empty?
-  = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-mt-5 add-review-item-modal-trigger', data: { context_commits_empty: 'true' } }) do
-    = _('Add previously merged commits')
+- if can_update_merge_request && context_commits&.empty? && !(defined?(@next_page) && @next_page)
+  .add-review-item-modal-trigger{ data: { context_commits_empty: 'true' } }
 
 - if commits.size == 0 && context_commits.nil?
   .commits-empty.gl-mt-6
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
deleted file mode 100644
index 04712cd59f7..00000000000
--- a/app/views/projects/default_branch/_show.html.haml
+++ /dev/null
@@ -1,29 +0,0 @@
-- expanded = expanded_by_default?
-
-%section.settings.no-animate#default-branch-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Default branch')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Set the default branch for this project. All merge requests and commits are made against this branch unless you specify a different one.')
-
-  .settings-content
-    = gitlab_ui_form_for @project, remote: true, html: { multipart: true, anchor: 'default-branch-settings' }, authenticity_token: true do |f|
-      %fieldset
-        - if @project.empty_repo?
-          .text-secondary
-            = _('A default branch cannot be chosen for an empty project.')
-        - else
-          .form-group
-            = f.label :default_branch, _("Default branch"), class: 'label-bold'
-            .js-select-default-branch{ data: { default_branch: @project.default_branch, project_id: @project.id } }
-
-        .form-group
-          - help_text = _("When merge requests and commits in the default branch close, any issues they reference also close.")
-          - help_icon = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'closing-issues-automatically'), target: '_blank', rel: 'noopener noreferrer'
-          = f.gitlab_ui_checkbox_component :autoclose_referenced_issues,
-            _("Auto-close referenced issues on default branch"),
-            help_text: (help_text + "&nbsp;" + help_icon).html_safe
-
-      = f.submit _('Save changes'), data: { qa_selector: 'save_changes_button' }, pajamas_button: true
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index c0fe143020a..e1c8992a28c 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -1,4 +1,4 @@
-- if can?(current_user, :create_deployment, deployment)
+- if can?(current_user, :read_deployment, deployment)
   - actions = deployment.manual_actions
   - if actions.present?
     .btn-group
@@ -8,7 +8,7 @@
           = sprite_icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-right
           - actions.each do |action|
-            - next unless can?(current_user, :update_build, action)
+            - next unless can?(current_user, :play_job, action)
             %li
               = link_to [:play, @project, action], method: :post, rel: 'nofollow' do
                 %span= action.name
diff --git a/app/views/projects/deployments/_rollback.haml b/app/views/projects/deployments/_rollback.haml
index 223f7520b47..e50fa1fa0f7 100644
--- a/app/views/projects/deployments/_rollback.haml
+++ b/app/views/projects/deployments/_rollback.haml
@@ -1,4 +1,4 @@
-- if deployment.deployable && can?(current_user, :create_deployment, deployment)
+- if deployment.deployable && can?(current_user, :play_job, deployment.deployable)
   - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment')
   - icon = deployment.last? ? 'repeat' : 'redo'
   = render Pajamas::ButtonComponent.new(icon: icon, button_options: { title: tooltip, class: 'js-confirm-rollback-modal-button has-tooltip', data: { environment_name: @environment.name, commit_short_sha: deployment.short_sha, commit_url: project_commit_path(@project, deployment.sha), is_last_deployment: deployment.last?.to_s, retry_path: retry_project_job_path(@environment.project, deployment.deployable) } })
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 6f2e135f9d3..43159a759f4 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -3,8 +3,6 @@
 - escaped_default_branch_name = default_branch_name.shellescape
 - @skip_current_level_breadcrumb = true
 
-= render_if_exists 'projects/free_user_cap_alert', project: @project
-
 = render partial: 'flash_messages', locals: { project: @project }
 = render 'clusters_deprecation_alert'
 
@@ -20,7 +18,7 @@
   %p
     = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
-.project-buttons.qa-quick-actions
+.project-buttons{ data: { qa_selector: 'quick_actions_container' } }
   .project-clone-holder.d-block.d-md-none.gl-mt-3.gl-mr-3
     = render "shared/mobile_clone_panel"
 
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index ca71990f5e3..3e63faaf448 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -9,7 +9,7 @@
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
   .col-lg-9.gl-mb-3
-    = gitlab_ui_form_for [@project, @hook], as: :hook, url: project_hook_path(@project, @hook) do |f|
+    = gitlab_ui_form_for [@project, @hook], as: :hook, url: project_hook_path(@project, @hook), html: { class: 'js-webhook-form' } do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 
       = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 0476193c2cb..15cb7869dc5 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -7,8 +7,8 @@
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
   .col-lg-8.gl-mb-3
-    = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]) do |f|
+    = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]), html: { class: 'js-webhook-form' } do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-      = f.submit 'Add webhook', pajamas_button: true
+      = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
 
     = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
diff --git a/app/views/projects/incidents/show.html.haml b/app/views/projects/incidents/show.html.haml
index 7a1e7f503f8..6d733dc46df 100644
--- a/app/views/projects/incidents/show.html.haml
+++ b/app/views/projects/incidents/show.html.haml
@@ -2,6 +2,7 @@
 - add_to_breadcrumbs _("Incidents"), project_incidents_path(@project)
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Incidents")
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/incidents'
 - add_page_specific_style 'page_bundles/issues_show'
 
diff --git a/app/views/projects/issues/_related_issues.html.haml b/app/views/projects/issues/_related_issues.html.haml
index 1c252958525..80f2b8b189c 100644
--- a/app/views/projects/issues/_related_issues.html.haml
+++ b/app/views/projects/issues/_related_issues.html.haml
@@ -4,4 +4,5 @@
     full_path: @project.full_path,
     has_issue_weights_feature: @project.licensed_feature_available?(:issue_weights).to_s,
     help_path: help_page_path('user/project/issues/related_issues'),
-    show_categorized_issues: @project.licensed_feature_available?(:blocked_issues).to_s } }
+    show_categorized_issues: @project.licensed_feature_available?(:blocked_issues).to_s,
+    has_iterations_feature: @project.licensed_feature_available?(:iterations).to_s } }
diff --git a/app/views/projects/issues/_work_item_links.html.haml b/app/views/projects/issues/_work_item_links.html.haml
index c0de711136a..72f9ec2ff16 100644
--- a/app/views/projects/issues/_work_item_links.html.haml
+++ b/app/views/projects/issues/_work_item_links.html.haml
@@ -1,2 +1 @@
-- if Feature.enabled?(:work_items_hierarchy, @project)
-  .js-work-item-links-root{ data: { issuable_id: @issue.id, iid: @issue.iid, project_namespace: @project.namespace.path, project_path: @project.full_path, wi: work_items_index_data(@project) } }
+.js-work-item-links-root{ data: { issuable_id: @issue.id, iid: @issue.iid, project_path: @project.full_path, wi: work_items_index_data(@project) } }
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 76b725d140c..a8edf87b696 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -2,6 +2,7 @@
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Issues")
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/incidents'
 - add_page_specific_style 'page_bundles/issues_show'
 - add_page_specific_style 'page_bundles/work_items'
diff --git a/app/views/projects/merge_requests/_awards_block.html.haml b/app/views/projects/merge_requests/_awards_block.html.haml
index 820927fdd1a..c1952793e72 100644
--- a/app/views/projects/merge_requests/_awards_block.html.haml
+++ b/app/views/projects/merge_requests/_awards_block.html.haml
@@ -1,2 +1,2 @@
-.content-block.emoji-block.emoji-list-container.js-noteable-awards
+.emoji-block.emoji-list-container.js-noteable-awards
   = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request)
diff --git a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
index 478db70877d..78fce3f7087 100644
--- a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
+++ b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml
@@ -1,7 +1,7 @@
 - display_issuable_type = issuable_display_type(@merge_request)
 
-.float-left.btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-new-dropdown.gl-md-w-auto.gl-w-full
-  = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret has-tooltip gl-display-none! gl-md-display-inline-flex!", data: { toggle: 'dropdown', title: _('Merge request actions'), testid: 'merge-request-actions' } do
+.btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-new-dropdown.gl-md-w-auto.gl-w-full
+  = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret has-tooltip gl-display-none! gl-md-display-inline-flex!", data: { toggle: 'dropdown', title: _('Merge request actions'), testid: 'merge-request-actions', 'aria-label': _('Merge request actions') } do
     = sprite_icon "ellipsis_v", size: 16, css_class: "dropdown-icon gl-icon"
   = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md btn-block gl-button gl-dropdown-toggle gl-md-display-none!", data: { 'toggle' => 'dropdown' } do
     %span.gl-new-dropdown-button-text= _('Merge request actions')
@@ -11,7 +11,7 @@
       .gl-new-dropdown-contents
         %ul
           - if current_user && moved_mr_sidebar_enabled?
-            %li.gl-new-dropdown-item.js-sidebar-subscriptions-entry-point
+            %li.gl-new-dropdown-item.js-sidebar-subscriptions-widget-root
             %li.gl-new-dropdown-divider
               %hr.dropdown-divider
           - if can?(current_user, :update_merge_request, @merge_request)
@@ -36,7 +36,7 @@
                   = _('Reopen')
                   = display_issuable_type
           - if moved_mr_sidebar_enabled?
-            %li.gl-new-dropdown-item#js-lock-entry-point
+            %li.gl-new-dropdown-item.js-sidebar-lock-root
             %li.gl-new-dropdown-item
               %button.dropdown-item.js-copy-reference{ type: "button", data: { 'clipboard-text': @merge_request.to_reference(full: true) } }
                 .gl-new-dropdown-item-text-wrapper
diff --git a/app/views/projects/merge_requests/_code_dropdown.html.haml b/app/views/projects/merge_requests/_code_dropdown.html.haml
index bb42c3067d9..5c7fe56095c 100644
--- a/app/views/projects/merge_requests/_code_dropdown.html.haml
+++ b/app/views/projects/merge_requests/_code_dropdown.html.haml
@@ -1,4 +1,4 @@
-.float-left.gl-md-ml-3.dropdown.gl-new-dropdown{ class: "gl-display-none! gl-md-display-flex!" }
+.gl-md-ml-3.dropdown.gl-new-dropdown{ class: "gl-display-none! gl-md-display-flex!" }
   #js-check-out-modal{ data: how_merge_modal_data(@merge_request) }
   = button_tag type: 'button', class: "btn dropdown-toggle btn-confirm gl-button gl-dropdown-toggle", data: { toggle: 'dropdown', qa_selector: 'mr_code_dropdown' } do
     %span.gl-new-dropdown-button-text= _('Code')
@@ -16,12 +16,12 @@
                 = _('Check out branch')
           - if current_user
             %li.gl-new-dropdown-item
-              = link_to ide_merge_request_path(@merge_request), class: 'dropdown-item', data: { qa_selector: 'open_in_web_ide_button' } do
+              = link_to ide_merge_request_path(@merge_request), class: 'dropdown-item', target: '_blank', data: { qa_selector: 'open_in_web_ide_button' } do
                 .gl-new-dropdown-item-text-wrapper
                   = _('Open in Web IDE')
           - if Gitlab::CurrentSettings.gitpod_enabled && current_user&.gitpod_enabled
             %li.gl-new-dropdown-item
-              = link_to "#{Gitlab::CurrentSettings.gitpod_url}##{merge_request_url(@merge_request)}", class: 'dropdown-item' do
+              = link_to "#{Gitlab::CurrentSettings.gitpod_url}##{merge_request_url(@merge_request)}", target: '_blank', class: 'dropdown-item' do
                 .gl-new-dropdown-item-text-wrapper
                   = _('Open in Gitpod')
           %li.gl-new-dropdown-divider
diff --git a/app/views/projects/merge_requests/_commits.html.haml b/app/views/projects/merge_requests/_commits.html.haml
index 7cadc37b0fd..ee0ab984d6f 100644
--- a/app/views/projects/merge_requests/_commits.html.haml
+++ b/app/views/projects/merge_requests/_commits.html.haml
@@ -13,6 +13,9 @@
 - else
   %ol#commits-list.list-unstyled
     = render "projects/commits/commits", merge_request: @merge_request
+  - if @next_page && @merge_request
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-load-more-commits', data: { next_page: @next_page } }) do
+      = _('Load more')
 
-- if can_update_merge_request && @merge_request.iid
+- if can_update_merge_request && @merge_request.iid && !@next_page
   .add-review-item-modal-wrapper{ data: { context_commits_path: context_commits_project_json_merge_request_url(@merge_request&.project, @merge_request, :json), target_branch: @merge_request.target_branch, merge_request_iid: @merge_request.iid, project_id: @merge_request.project.id } }
diff --git a/app/views/projects/merge_requests/_mr_box.html.haml b/app/views/projects/merge_requests/_mr_box.html.haml
index 4fc405c63ff..901a2ebfd1e 100644
--- a/app/views/projects/merge_requests/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/_mr_box.html.haml
@@ -1,3 +1,3 @@
-.detail-page-description.py-2{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
+.detail-page-description.py-2.gl-display-flex.gl-align-items-center.gl-flex-wrap{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
   = render 'shared/issuable/status_box', issuable: @merge_request
   = merge_request_header(@project, @merge_request)
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 893f03157db..a73d2aa5cc4 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -25,9 +25,9 @@
           - display_class = moved_mr_sidebar_enabled? ? 'gl-md-display-none!' : 'gl-sm-display-none!'
           = render Pajamas::ButtonComponent.new(icon: "chevron-double-lg-left", button_options: { class: "btn-icon float-right gl-display-block gutter-toggle issuable-gutter-toggle js-sidebar-toggle #{display_class}" })
 
-    .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions
+    .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex
       - if can_update_merge_request
-        = link_to _('Edit'), edit_project_merge_request_path(@project, @merge_request), class: "gl-display-none gl-md-display-block btn gl-button btn-default btn-grouped js-issuable-edit", data: { qa_selector: "edit_button" }
+        = link_to _('Edit'), edit_project_merge_request_path(@project, @merge_request), class: "gl-display-none gl-md-display-block btn gl-button btn-default js-issuable-edit", data: { qa_selector: "edit_button" }
 
       - if @merge_request.source_project
         = render 'projects/merge_requests/code_dropdown'
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index ef3174efcc7..1246c45a529 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -14,7 +14,7 @@
   - if @commits.empty?
     .commits-empty
       %h4
-        There are no commits yet.
+        = _("There are no commits yet.")
       = custom_icon ('illustration_no_commits')
   - else
     .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
@@ -25,16 +25,16 @@
           %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
-                Commits
+                = _("Commits")
                 = gl_badge_tag @total_commit_count, { size: :sm }, { class: 'gl-tab-counter-badge' }
             - if @pipelines.any?
               %li.builds-tab
                 = link_to url_for(safe_params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tabvue'} do
-                  Pipelines
+                  = _("Pipelines")
                   = gl_badge_tag @pipelines.size, { size: :sm }, { class: 'gl-tab-counter-badge' }
             %li.diffs-tab
               = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tabvue', qa_selector: 'diffs_tab'} do
-                Changes
+                = _("Changes")
                 = gl_badge_tag @merge_request.diff_size, { size: :sm }, { class: 'gl-tab-counter-badge' }
 
     #diff-notes-app.tab-content
diff --git a/app/views/projects/merge_requests/dropdowns/_branch.html.haml b/app/views/projects/merge_requests/dropdowns/_branch.html.haml
index a60c445aa51..d6af8b2f5a5 100644
--- a/app/views/projects/merge_requests/dropdowns/_branch.html.haml
+++ b/app/views/projects/merge_requests/dropdowns/_branch.html.haml
@@ -1,5 +1,5 @@
 %ul
   - branches.each do |branch|
     %li
-      %a{ href: '#', class: "#{('is-active' if selected == branch)}", title: branch, data: { id: branch } }
+      %a{ href: '#', class: "#{'is-active' if selected == branch}", title: branch, data: { id: branch } }
         = branch
diff --git a/app/views/projects/merge_requests/dropdowns/_project.html.haml b/app/views/projects/merge_requests/dropdowns/_project.html.haml
index b3cf3c1d369..41c0b0ab55b 100644
--- a/app/views/projects/merge_requests/dropdowns/_project.html.haml
+++ b/app/views/projects/merge_requests/dropdowns/_project.html.haml
@@ -1,5 +1,5 @@
 %ul
   - projects.each do |project|
     %li
-      %a{ href: "#", class: "#{('is-active' if selected == project.id)}", data: { id: project.id, 'refs-url': refs_project_path(project) } }
+      %a{ href: "#", class: "#{'is-active' if selected == project.id}", data: { id: project.id, 'refs-url': refs_project_path(project) } }
         = project.full_path
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index d77d5231a7d..203724fc1f1 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -8,12 +8,15 @@
 - page_card_attributes @merge_request.card_attributes
 - suggest_changes_help_path = help_page_path('user/project/merge_requests/reviews/suggestions.md')
 - mr_action = j(params[:tab].presence || 'show')
+- add_page_specific_style 'page_bundles/design_management'
 - add_page_specific_style 'page_bundles/merge_requests'
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
+- if mr_action == 'diffs'
+  - add_page_startup_api_call @endpoint_diff_batch_url
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   - if moved_mr_sidebar_enabled?
@@ -47,7 +50,7 @@
           #js-vue-discussion-counter{ data: { blocks_merge: @project.only_allow_merge_if_all_discussions_are_resolved?.to_s } }
           - if moved_mr_sidebar_enabled?
             - if !!@issuable_sidebar.dig(:current_user, :id)
-              .js-issuable-todo{ data: { project_path: @issuable_sidebar[:project_full_path], iid: @issuable_sidebar[:iid], id: @issuable_sidebar[:id] } }
+              .js-sidebar-todo-widget-root{ data: { project_path: @issuable_sidebar[:project_full_path], iid: @issuable_sidebar[:iid], id: @issuable_sidebar[:id] } }
             .gl-ml-auto.gl-align-items-center.gl-display-none.gl-md-display-flex.gl-ml-3.js-expand-sidebar{ class: "gl-lg-display-none!" }
               = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left',
                 button_options: { class: 'js-sidebar-toggle' }) do
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index fb7c1130f5c..cdb8a63bca9 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -25,8 +25,8 @@
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit _('Create milestone'), class: 'gl-button btn-confirm btn', data: { qa_selector: 'create_milestone_button' }
+      = f.submit _('Create milestone'), data: { qa_selector: 'create_milestone_button' }, pajamas_button: true
       = link_to _('Cancel'), project_milestones_path(@project), class: 'gl-button btn btn-default btn-cancel'
     - else
-      = f.submit _('Save changes'), class: 'gl-button btn-confirm btn'
+      = f.submit _('Save changes'), pajamas_button: true
       = link_to _('Cancel'), project_milestone_path(@project, @milestone), class: 'gl-button btn btn-default btn-cancel'
diff --git a/app/views/projects/mirrors/_authentication_method.html.haml b/app/views/projects/mirrors/_authentication_method.html.haml
index 4b549aaf1cd..54e1f1a8b20 100644
--- a/app/views/projects/mirrors/_authentication_method.html.haml
+++ b/app/views/projects/mirrors/_authentication_method.html.haml
@@ -5,10 +5,10 @@
   = f.label :auth_method, _('Authentication method'), class: 'label-bold'
   = f.select :auth_method,
       options_for_select(auth_options, mirror.auth_method),
-      {}, { class: "custom-select gl-form-select js-mirror-auth-type qa-authentication-method" }
+      {}, { class: "custom-select gl-form-select js-mirror-auth-type", data: { qa_selector: 'authentication_method_field' } }
   = f.hidden_field :auth_method, value: "password", class: "js-hidden-mirror-auth-type"
 
 .form-group
   .well-password-auth.collapse.js-well-password-auth
     = f.label :password, _("Password"), class: "label-bold"
-    = f.password_field :password, class: 'form-control gl-form-input qa-password js-mirror-password-field', autocomplete: 'off'
+    = f.password_field :password, class: 'form-control gl-form-input js-mirror-password-field', autocomplete: 'off', data: { qa_selector: 'password_field' }
diff --git a/app/views/projects/mirrors/_disabled_mirror_badge.html.haml b/app/views/projects/mirrors/_disabled_mirror_badge.html.haml
index 86e54acecc4..1834627c705 100644
--- a/app/views/projects/mirrors/_disabled_mirror_badge.html.haml
+++ b/app/views/projects/mirrors/_disabled_mirror_badge.html.haml
@@ -1,2 +1,2 @@
-%span.qa-disabled-mirror-badge.rspec-disabled-mirror-badge{ data: { toggle: 'tooltip', html: 'true' }, title: _('Disabled mirrors can only be enabled by instance owners. It is recommended that you delete them.') }
+%span.rspec-disabled-mirror-badge{ data: { toggle: 'tooltip', html: 'true' }, title: _('Disabled mirrors can only be enabled by instance owners. It is recommended that you delete them.') }
   = gl_badge_tag _('Disabled'), variant: :warning
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index c98f88fa31e..f4e57450aa1 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -21,7 +21,7 @@
 
             .form-group.has-feedback
               = label_tag :url, _('Git repository URL'), class: 'label-light'
-              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url qa-mirror-repository-url-input', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password'
+              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password', data: { qa_selector: 'mirror_repository_url_field' }
 
             = render 'projects/mirrors/instructions'
 
@@ -35,7 +35,7 @@
                 = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
 
           .panel-footer
-            = f.submit _('Mirror repository'), class: 'js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror, pajamas_button: true
+            = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
     - else
       = render Pajamas::AlertComponent.new(dismissible: false) do |c|
         = c.body do
diff --git a/app/views/projects/mirrors/_mirror_repos_form.html.haml b/app/views/projects/mirrors/_mirror_repos_form.html.haml
index 34b7c75debf..1322e677d5a 100644
--- a/app/views/projects/mirrors/_mirror_repos_form.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_form.html.haml
@@ -1,7 +1,7 @@
 .form-group
   = label_tag :mirror_direction, _('Mirror direction'), class: 'label-light'
   .select-wrapper
-    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control gl-form-select select-control js-mirror-direction qa-mirror-direction', disabled: true
+    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control gl-form-select select-control js-mirror-direction', disabled: true, data: { qa_selector: 'mirror_direction_field' }
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
 
 = render partial: "projects/mirrors/mirror_repos_push", locals: { f: f }
diff --git a/app/views/projects/mirrors/_mirror_repos_list.html.haml b/app/views/projects/mirrors/_mirror_repos_list.html.haml
index 2dbcbd659c8..fb8133e6de8 100644
--- a/app/views/projects/mirrors/_mirror_repos_list.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_list.html.haml
@@ -25,17 +25,17 @@
           = render_if_exists 'projects/mirrors/table_pull_row'
           - @project.remote_mirrors.each_with_index do |mirror, index|
             - next if mirror.new_record?
-            %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row' } }
-              %td{ data: { qa_selector: 'mirror_repository_url_cell' } }= mirror.safe_url || _('Invalid URL')
+            %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
+              %td{ data: { qa_selector: 'mirror_repository_url_content' } }= mirror.safe_url || _('Invalid URL')
               %td= _('Push')
               %td
                 = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
-              %td{ data: { qa_selector: 'mirror_last_update_at_cell' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
+              %td{ data: { qa_selector: 'mirror_last_update_at_content' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
               %td
                 - if mirror.disabled?
                   = render 'projects/mirrors/disabled_mirror_badge'
                 - if mirror.last_error.present?
-                  = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge' }, title: html_escape(mirror.last_error.try(:strip)) }
+                  = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge_content' }, title: html_escape(mirror.last_error.try(:strip)) }
               %td.gl-display-flex
                 - if mirror_settings_enabled
                   .btn-group.mirror-actions-group{ role: 'group' }
@@ -44,4 +44,4 @@
                     = render 'shared/remote_mirror_update_button', remote_mirror: mirror
                     = render Pajamas::ButtonComponent.new(variant: :danger,
                       icon: 'remove',
-                      button_options: { class: 'js-delete-mirror qa-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
+                      button_options: { class: 'js-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
diff --git a/app/views/projects/ml/experiments/_experiment.html.haml b/app/views/projects/ml/experiments/_experiment.html.haml
new file mode 100644
index 00000000000..42823f47469
--- /dev/null
+++ b/app/views/projects/ml/experiments/_experiment.html.haml
@@ -0,0 +1,3 @@
+%li.ml-experiment-row.py-3
+  = link_to project_ml_experiment_path(@project, experiment.iid), class: "title" do
+    = experiment.name
diff --git a/app/views/projects/ml/experiments/_experiment_list.html.haml b/app/views/projects/ml/experiments/_experiment_list.html.haml
new file mode 100644
index 00000000000..a25e814b2b5
--- /dev/null
+++ b/app/views/projects/ml/experiments/_experiment_list.html.haml
@@ -0,0 +1,7 @@
+- if experiments.blank?
+  .nothing-here-block= s_('MlExperimentsEmptyState|No Experiments to Show')
+- else
+  .ml-experiments-list-holder
+    %ul.content-list
+      = render partial: 'experiment', collection: experiments, as: :experiment
+      = paginate_collection @experiments
diff --git a/app/views/projects/ml/experiments/_incubation_banner.html.haml b/app/views/projects/ml/experiments/_incubation_banner.html.haml
new file mode 100644
index 00000000000..e34f3fd2d2f
--- /dev/null
+++ b/app/views/projects/ml/experiments/_incubation_banner.html.haml
@@ -0,0 +1,8 @@
+= render Pajamas::AlertComponent.new(variant: :warning,
+                title: _('Machine Learning Experiment Tracking is in Incubating Phase'),
+                alert_options: { class: 'gl-my-3' }) do |c|
+  = c.body do
+    = _('GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited')
+    = link_to _('Learn more.'), 'https://about.gitlab.com/handbook/engineering/incubation/', target: "_blank"
+  = c.actions do
+    = link_to _('Feedback and Updates'), 'https://gitlab.com/groups/gitlab-org/-/epics/8560', target: "_blank"
diff --git a/app/views/projects/ml/experiments/index.html.haml b/app/views/projects/ml/experiments/index.html.haml
new file mode 100644
index 00000000000..a84cb15d940
--- /dev/null
+++ b/app/views/projects/ml/experiments/index.html.haml
@@ -0,0 +1,11 @@
+- breadcrumb_title _('ML Experiments')
+- page_title _('ML Experiments')
+
+.page-title-holder.d-flex.align-items-center
+  %h1.page-title.gl-font-size-h-display= _('Machine Learning Experiments')
+
+= render "incubation_banner"
+
+%div{ class: container_class }
+  .content-list.builds-content-list
+    = render "experiment_list", experiments: @experiments, project: @project
diff --git a/app/views/projects/ml/experiments/show.html.haml b/app/views/projects/ml/experiments/show.html.haml
new file mode 100644
index 00000000000..2c350439762
--- /dev/null
+++ b/app/views/projects/ml/experiments/show.html.haml
@@ -0,0 +1,14 @@
+- add_to_breadcrumbs _("Experiments"), project_ml_experiments_path(@project)
+- breadcrumb_title @experiment.name
+- page_title @experiment.name
+- items = candidates_table_items(@candidates)
+- metrics = unique_logged_names(@candidates, &:latest_metrics)
+- params = unique_logged_names(@candidates, &:params)
+
+.page-title-holder.d-flex.align-items-center
+  %h1.page-title.gl-font-size-h-display= @experiment.name
+
+#js-show-ml-experiment{ data: {
+  candidates: items,
+  metrics: metrics,
+  params: params } }
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index b6700c9ed1e..2a3171e9fd8 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -6,8 +6,7 @@
     .controls.gl-bg-gray-50.gl-p-2.gl-font-base.gl-text-gray-400.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-300
       = form_tag project_network_path(@project, @id), method: :get, class: 'form-inline network-form' do |f|
         = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input input-mx-250 search-sha gl-mr-2'
-        = button_tag class: 'btn gl-button btn-confirm btn-icon' do
-          = sprite_icon('search')
+        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'search')
         .inline.gl-ml-5
           .form-check.light
             = check_box_tag :filter_ref, 1, @options[:filter_ref], class: 'form-check-input'
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index a8a30d73000..e3f46d601a3 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -1,8 +1,6 @@
 - page_title _('No repository')
 - @skip_current_level_breadcrumb = true
 
-= render_if_exists 'projects/free_user_cap_alert', project: @project
-
 %h2.gl-display-flex
   .gl-display-flex.gl-align-items-center.gl-justify-content-center
     = sprite_icon('warning-solid', size: 24, css_class: 'gl-mr-2')
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 9a8b83649de..6b875ff904c 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -9,14 +9,16 @@
 - if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     .note-actions-item
-      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary", data: { position: 'right', container: 'body' } do
+      = render Pajamas::ButtonComponent.new(category: :tertiary,
+        button_options: { title: _('Add reaction'), class: 'btn-icon note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip', data: { position: 'right', container: 'body' }, 'aria-label': _('Add reaction') }) do
         = sprite_icon('slight-smile', css_class: 'award-control-icon-neutral gl-button-icon gl-icon')
         = sprite_icon('smiley', css_class: 'award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
         = sprite_icon('smile', css_class: 'award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
 
   - if note_editable
     .note-actions-item.gl-ml-0
-      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn gl-button btn-default-tertiary btn-icon', data: { container: 'body', qa_selector: 'edit_comment_button' } do
-        = sprite_icon('pencil', css_class: 'gl-button-icon gl-icon')
+      = render Pajamas::ButtonComponent.new(category: :tertiary,
+        icon: 'pencil',
+        button_options: { class: 'note-action-button js-note-edit has-tooltip', data: { container: 'body', qa_selector: 'edit_comment_button' }, title: _('Edit comment'), 'aria-label': _('Edit comment') })
 
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index ab692d1830a..235b89b8c5b 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -9,10 +9,10 @@
       = f.label :cron, _('Interval Pattern'), class: 'label-bold'
       #interval-pattern-input{ data: { initial_interval: @schedule.cron, daily_limit: @schedule.daily_limit } }
   .form-group.row
-    .col-md-9
-      = f.label :cron_timezone, _('Cron Timezone'), class: 'label-bold'
-      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn btn-default js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
-      = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
+    .col-md-9{ data: { testid: 'schedule-timezone' } }
+      = f.label :cron_timezone, _("Cron Timezone")
+      .js-timezone-dropdown{ data: { timezone_data: timezone_data.to_json, initial_value: @schedule.cron_timezone, name: 'schedule[cron_timezone]' } }
+
   .form-group.row
     .col-md-9
       = f.label :ref, _('Target branch or tag'), class: 'label-bold'
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 2e403358e2e..30cc7f94311 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,9 +1,13 @@
-.commit-box
-  %h3.commit-title
-    = markdown(commit.title, pipeline: :single_line)
-  - if commit.description.present?
-    %pre.commit-description<
-      = preserve(markdown(commit.description, pipeline: :single_line))
+- if Feature.enabled?(:pipeline_name, @pipeline.project) && @pipeline.name
+  %h3
+    = @pipeline.name
+- else
+  .commit-box
+    %h3.commit-title
+      = markdown(commit.title, pipeline: :single_line)
+    - if commit.description.present?
+      %pre.commit-description<
+        = preserve(markdown(commit.description, pipeline: :single_line))
 
 .info-well
   .well-segment.pipeline-info{ class: "gl-align-items-baseline!" }
@@ -19,7 +23,7 @@
       = s_("Pipelines|(queued for %{queued_duration})") % { queued_duration: time_interval_in_words(@pipeline.queued_duration)}
 
   - if has_pipeline_badges?(@pipeline)
-    .well-segment.qa-pipeline-badges
+    .well-segment
       .icon-container
         = sprite_icon('flag', css_class: 'gl-top-0!')
       - if @pipeline.schedule?
@@ -45,11 +49,16 @@
       - if @pipeline.stuck?
         = gl_badge_tag s_('Pipelines|stuck'), { variant: :warning, size: :sm }, { class: 'js-pipeline-url-stuck has-tooltip' }
 
-  .well-segment.branch-info
+  .well-segment{ 'data-testid': 'commit-row' }
     .icon-container.commit-icon
       = sprite_icon('commit', css_class: 'gl-top-0!')
-    = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
-    = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
+    - if Feature.enabled?(:pipeline_name, @pipeline.project) && @pipeline.name
+      = markdown(commit.title, pipeline: :single_line)
+      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
+      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
+    - else
+      = link_to commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha"
+      = clipboard_button(text: @pipeline.sha, title: _("Copy commit SHA"))
 
   .well-segment.related-merge-request-info
     .icon-container
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index c9eb2e92193..4531bb2d0a9 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -30,4 +30,4 @@
     #js-pipeline-tabs{ data: js_pipeline_tabs_data(@project, @pipeline, @current_user) }
   - else
     = render "projects/pipelines/with_tabs", pipeline: @pipeline, stages: @stages, pipeline_has_errors: pipeline_has_errors
-.js-pipeline-details-vue{ data: { metrics_path: namespace_project_ci_prometheus_metrics_histograms_path(namespace_id: @project.namespace, project_id: @project, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline) } }
+.js-pipeline-details-vue{ data: { metrics_path: namespace_project_ci_prometheus_metrics_histograms_path(namespace_id: @project.namespace, project_id: @project, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline), pipeline_path: pipeline_path(@pipeline) } }
diff --git a/app/views/projects/product_analytics/_graph.html.haml b/app/views/projects/product_analytics/_graph.html.haml
deleted file mode 100644
index fd81a248005..00000000000
--- a/app/views/projects/product_analytics/_graph.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-- graph = local_assigns.fetch(:graph)
-
-%h3
-  = graph[:id]
-
-.js-project-analytics-chart{ "data-chart-data": graph.to_json, "data-chart-id": graph[:id] }
diff --git a/app/views/projects/product_analytics/_links.html.haml b/app/views/projects/product_analytics/_links.html.haml
deleted file mode 100644
index 6e5667e2644..00000000000
--- a/app/views/projects/product_analytics/_links.html.haml
+++ /dev/null
@@ -1,5 +0,0 @@
-= gl_tabs_nav({ class: 'mb-3'}) do
-  = gl_tab_link_to _('Events'), project_product_analytics_path(@project)
-  = gl_tab_link_to _('Graphs'), graphs_project_product_analytics_path(@project)
-  = gl_tab_link_to _('Test'), test_project_product_analytics_path(@project)
-  = gl_tab_link_to _('Setup'), setup_project_product_analytics_path(@project)
diff --git a/app/views/projects/product_analytics/_tracker.html.erb b/app/views/projects/product_analytics/_tracker.html.erb
deleted file mode 100644
index dbb96f19e22..00000000000
--- a/app/views/projects/product_analytics/_tracker.html.erb
+++ /dev/null
@@ -1,10 +0,0 @@
-;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[];
-p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments)
-};p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1;
-n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","<%= product_analytics_tracker_url -%>","snowplow<%= @random -%>"));
-snowplow<%= @random -%>("newTracker", "sp", "<%= product_analytics_tracker_collector_url -%>", {
-  appId: "<%= @project_id -%>",
-  platform: "<%= @platform -%>",
-  eventMethod: "get"
-});
-snowplow<%= @random -%>('trackPageView');
diff --git a/app/views/projects/product_analytics/graphs.html.haml b/app/views/projects/product_analytics/graphs.html.haml
deleted file mode 100644
index c345561e6ce..00000000000
--- a/app/views/projects/product_analytics/graphs.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- page_title _('Product Analytics')
-
-= render 'links'
-
-%p
-  = _('Showing graphs based on events of the last %{timerange} days.') % { timerange: @timerange }
-
-
-.gl-mb-3
-  = render 'graph', graph: @activity_graph
-
-- @graphs.each_slice(2) do |pair|
-  .row.append-bottom-10
-    - pair.each do |graph|
-      .col-md-6{ id: graph[:id] }
-        = render 'graph', graph: graph
diff --git a/app/views/projects/product_analytics/index.html.haml b/app/views/projects/product_analytics/index.html.haml
deleted file mode 100644
index 386f9265179..00000000000
--- a/app/views/projects/product_analytics/index.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- page_title _('Product Analytics')
-
-= render 'links'
-
-- if @events.any?
-  %p
-    - if @events.total_count > @events.size
-      = _('Number of events for this project: %{total_count}.') % { total_count: number_with_delimiter(@events.total_count) }
-  %ol
-    - @events.each do |event|
-      %li
-        %code= event.as_json_wo_empty
-- else
-  .empty-state
-    .text-content
-      = _('There are currently no events.')
diff --git a/app/views/projects/product_analytics/setup.html.haml b/app/views/projects/product_analytics/setup.html.haml
deleted file mode 100644
index e1819c7d74b..00000000000
--- a/app/views/projects/product_analytics/setup.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-- page_title _('Product Analytics')
-
-= render 'links'
-
-%p
-  = _('Copy the code below to implement tracking in your application:')
-
-%pre
-  = render "tracker"
-
-%p.hint
-  = _('A platform value can be web, mob or app.')
diff --git a/app/views/projects/product_analytics/test.html.haml b/app/views/projects/product_analytics/test.html.haml
deleted file mode 100644
index 3204cd5fbbe..00000000000
--- a/app/views/projects/product_analytics/test.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- page_title _('Product Analytics')
-
-= render 'links'
-
-%p
-  = _('This page sends a payload. Go back to the events page to see a newly created event.')
-
-- if @event
-  %p
-    = _('Last item before this page loaded in your browser:')
-
-  %code
-    = @event.as_json_wo_empty
-
--# haml-lint:disable InlineJavaScript
-:javascript
-  #{render 'tracker'}
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 34305d15eff..c7818602f52 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,7 +1,6 @@
 - add_page_specific_style 'page_bundles/members'
 - page_title _("Members")
 
-= render_if_exists 'projects/free_user_cap_alert', project: @project
 = render_if_exists 'shared/ultimate_feature_removal_banner', project: @project
 
 .row.gl-mt-3
diff --git a/app/views/projects/protected_branches/shared/_dropdown.html.haml b/app/views/projects/protected_branches/shared/_dropdown.html.haml
index d5111bd8be5..c5dbf8991cd 100644
--- a/app/views/projects/protected_branches/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/shared/_dropdown.html.haml
@@ -3,14 +3,16 @@
 = f.hidden_field(:name)
 
 = dropdown_tag(_('Select branch or create wildcard'),
-               options: { toggle_class: "js-protected-branch-select js-filter-submit wide monospace qa-protected-branch-select #{toggle_classes}",
+               options: { toggle_class: "js-protected-branch-select js-filter-submit wide monospace #{toggle_classes}",
                           filter: true,
-                          dropdown_class: "dropdown-menu-selectable git-revision-dropdown qa-protected-branch-dropdown",
+                          dropdown_class: "dropdown-menu-selectable git-revision-dropdown",
+                          dropdown_qa_selector: "protected_branch_dropdown_content",
                           placeholder: _("Search protected branches"),
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_branch_name],
-                                  project_id: @project.try(:id) } }) do
+                                  project_id: @project.try(:id),
+                                  qa_selector: "protected_branch_dropdown" } }) do
 
   %ul.dropdown-footer-list
     %li
diff --git a/app/views/projects/protected_branches/shared/_index.html.haml b/app/views/projects/protected_branches/shared/_index.html.haml
index 1d60791eae2..c204508d355 100644
--- a/app/views/projects/protected_branches/shared/_index.html.haml
+++ b/app/views/projects/protected_branches/shared/_index.html.haml
@@ -4,7 +4,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_("ProtectedBranch|Protected branches")
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle qa-expand-protected-branches' }) do
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
     %p
       = s_("ProtectedBranch|Keep stable branches secure and force developers to use merge requests.")
diff --git a/app/views/projects/protected_tags/shared/_dropdown.html.haml b/app/views/projects/protected_tags/shared/_dropdown.html.haml
index 9c7f532fa29..9d5d649bc40 100644
--- a/app/views/projects/protected_tags/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/shared/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
-= dropdown_tag('Select tag or create wildcard',
+= dropdown_tag(s_('ProtectedBranch|Select tag or create wildcard'),
                options: { toggle_class: 'js-protected-tag-select js-filter-submit wide monospace',
-                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: "Search protected tags",
+                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: s_("ProtectedBranch|Search protected tags"),
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_tag_name],
@@ -10,6 +10,6 @@
 
   %ul.dropdown-footer-list
     %li
-      %button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item", title: "New Protected Tag" }
-        Create wildcard
+      %button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item", title: s_("ProtectedBranch|New Protected Tag") }
+        = s_('ProtectedBranch|Create wildcard')
         %code
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index 5f3ea281278..0a85a353e27 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -1,9 +1,9 @@
 .protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
     .card-header
-      Protected tags (0)
+      = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: 0 }
     %p.settings-message.text-center
-      No tags are protected.
+      = s_('ProtectedBranch|No tags are protected.')
   - else
     - can_admin_project = can?(current_user, :admin_project, @project)
 
@@ -16,9 +16,12 @@
           %col
       %thead
         %tr
-          %th Protected tags (#{@protected_tags_count})
-          %th Last commit
-          %th Allowed to create
+          %th
+            = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: @protected_tags_count }
+          %th
+            = s_('ProtectedBranch|Last commit')
+          %th
+            = s_('ProtectedBranch|Allowed to create')
           - if can_admin_project
             %th
       %tbody
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 2f97a068b49..70e14eadaf9 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -1,6 +1,6 @@
 - return unless can?(current_user, :archive_project, @project)
 
-.sub-section{ data: { qa_selector: 'archive_project_content' } }
+.sub-section
   %h4.warning-title
     - if @project.archived?
       = _('Unarchive project')
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 9f598ffb2d1..f6c5c4e2950 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -40,5 +40,5 @@
           description_prefix: :project_access_token,
           help_path: help_page_path('user/project/settings/project_access_tokens', anchor: 'scopes-for-a-project-access-token')
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_resource_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
+    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
  } }
diff --git a/app/views/projects/settings/branch_rules/index.html.haml b/app/views/projects/settings/branch_rules/index.html.haml
index a7e80101a88..571a992a552 100644
--- a/app/views/projects/settings/branch_rules/index.html.haml
+++ b/app/views/projects/settings/branch_rules/index.html.haml
@@ -3,4 +3,4 @@
 
 %h3.gl-mb-5= s_('BranchRules|Branch rules details')
 
-#js-branch-rules{ data: { project_path: @project.full_path, protected_branches_path: project_settings_repository_path(@project, anchor: 'js-protected-branches-settings'), approval_rules_path: project_settings_merge_requests_path(@project, anchor: 'js-merge-request-approval-settings') } }
+#js-branch-rules{ data: { project_path: @project.full_path, protected_branches_path: project_settings_repository_path(@project, anchor: 'js-protected-branches-settings'), approval_rules_path: project_settings_merge_requests_path(@project, anchor: 'js-merge-request-approval-settings'), status_checks_path: project_settings_merge_requests_path(@project, anchor: 'js-merge-request-settings') } }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 51d28411b30..68dc7f2be8d 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,6 +1,6 @@
 - help_link_public_pipelines = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'change-which-users-can-view-your-pipelines'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_auto_canceling = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank', rel: 'noopener noreferrer'
-- help_link_skip_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_skip_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'prevent-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_separated_caches = link_to sprite_icon('question-o'), help_page_path('ci/caching/index', anchor: 'cache-key-names'), target: '_blank', rel: 'noopener noreferrer'
 
 .row.gl-mt-3
@@ -22,8 +22,8 @@
 
         .form-group
           = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
-            = form.gitlab_ui_checkbox_component :forward_deployment_enabled, _("Skip outdated deployment jobs"),
-              help_text: (_('When a deployment job is successful, skip older deployment jobs that are still pending.') + ' ' + help_link_skip_outdated).html_safe
+            = form.gitlab_ui_checkbox_component :forward_deployment_enabled, _("Prevent outdated deployment jobs"),
+              help_text: (_('When a deployment job is successful, prevent older deployment jobs that are still pending.') + ' ' + help_link_skip_outdated).html_safe
 
         .form-group
           = f.gitlab_ui_checkbox_component :ci_separated_caches,
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index c4f589f3f91..1b35de85145 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -57,7 +57,7 @@
     .settings-content
       #js-artifacts-settings-app{ data: { full_path: @project.full_path, help_page_path: help_page_path('ci/pipelines/job_artifacts', anchor: 'keep-artifacts-from-most-recent-successful-jobs') } }
 
-%section.qa-variables-settings.settings.no-animate#js-cicd-variables-settings{ class: ('expanded' if expanded), data: { qa_selector: 'variables_settings_content' } }
+%section.settings.no-animate#js-cicd-variables-settings{ class: ('expanded' if expanded), data: { qa_selector: 'variables_settings_content' } }
   .settings-header
     = render 'ci/variables/header', expanded: expanded
   .settings-content
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 500cfdcb62b..306ce47cee7 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -3,7 +3,7 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - deploy_token_description = s_('DeployTokens|Deploy tokens allow access to packages, your repository, and registry images.')
 
-= render "projects/default_branch/show"
+= render "projects/branch_defaults/show"
 - if Feature.enabled?(:branch_rules, @project)
   = render "projects/branch_rules/show"
 = render_if_exists "projects/push_rules/index"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index c7ac28fa194..77c44b792ab 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -7,7 +7,6 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_path(@project, rss_url_options), title: "#{@project.name} activity")
 
-= render_if_exists 'projects/free_user_cap_alert', project: @project
 = render_if_exists 'shared/ultimate_feature_removal_banner', project: @project
 = render partial: 'flash_messages', locals: { project: @project }
 = render 'clusters_deprecation_alert'
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index ddebc19be15..58e86ebffa0 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -3,9 +3,9 @@
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
+#js-snippet-view{ data: { 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
 
-.row-content-block.top-block.content-component-block.gl-px-0.gl-py-2
+.gl-px-0.gl-py-2
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
 
 #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => true
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index 9043b8e60fc..b6b24a0c26a 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
+= gitlab_ui_form_for [@project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
   = form_errors(@trigger)
 
   - if @trigger.token
@@ -8,4 +8,4 @@
   .form-group
     = f.label :key, "Description", class: "label-bold"
     = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
-  = f.submit btn_text, class: "gl-button btn btn-confirm"
+  = f.submit btn_text, pajamas_button: true
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
index fe455f4a0bc..283659875ef 100644
--- a/app/views/registrations/welcome/show.html.haml
+++ b/app/views/registrations/welcome/show.html.haml
@@ -7,7 +7,6 @@
   = render "layouts/one_trust"
   = render "layouts/bizible"
 = render "layouts/google_tag_manager_body"
-
 .row.gl-flex-grow-1
   .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
     .edit-profile.login-page.d-flex.flex-column.gl-align-items-center
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 54aa9aad8a5..c15afd7bd5b 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -5,7 +5,7 @@
 .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
   .fade-left= sprite_icon('chevron-lg-left', size: 12)
   .fade-right= sprite_icon('chevron-lg-right', size: 12)
-  = gl_tabs_nav({ class: 'search-filter scrolling-tabs nav-links'}) do
+  = gl_tabs_nav({ class: 'scrolling-tabs nav-links', data: { testid: 'search-filter' } }) do
     - if @project
       - if project_search_tabs?(:blobs)
         = search_filter_link 'blobs', _("Code"), data: { qa_selector: 'code_tab' }
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 8262c3c90e1..027ae6bf77c 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -1,13 +1,12 @@
 - search_bar_classes = 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4'
 
 = render_if_exists 'shared/promotions/promote_advanced_search'
-- if Feature.enabled?(:search_page_vertical_nav, current_user) && %w[issues merge_requests].include?(@scope)
+- if Feature.enabled?(:search_page_vertical_nav, current_user)
   .results.gl-md-display-flex.gl-mt-0
     #js-search-sidebar{ class: search_bar_classes, data: { navigation: search_navigation_json } }
     .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
       = render partial: 'search/results_status', locals: { search_service: @search_service } unless @search_objects.to_a.empty?
       = render partial: 'search/results_list'
-
 - else
   = render partial: 'search/results_status', locals: { search_service: @search_service } unless @search_objects.to_a.empty?
 
diff --git a/app/views/search/_results_status.html.haml b/app/views/search/_results_status.html.haml
index e6bb0c18b90..adea6b598f7 100644
--- a/app/views/search/_results_status.html.haml
+++ b/app/views/search/_results_status.html.haml
@@ -3,7 +3,6 @@
 - return unless search_service.show_results_status?
 
 - if Feature.enabled?(:search_page_vertical_nav, current_user)
-  = render partial: 'search/results_status_vert_nav', locals: { search_service: @search_service }
-
+  = render partial: 'search/results_status_vert_nav', locals: { search_service: search_service }
 - else
-  = render partial: 'search/results_status_horiz_nav', locals: { search_service: @search_service }
+  = render partial: 'search/results_status_horiz_nav', locals: { search_service: search_service }
diff --git a/app/views/search/results/_blob_highlight.html.haml b/app/views/search/results/_blob_highlight.html.haml
index 7ba114496af..37ffabad717 100644
--- a/app/views/search/results/_blob_highlight.html.haml
+++ b/app/views/search/results/_blob_highlight.html.haml
@@ -4,7 +4,8 @@
 #search-blob-content.file-content.code.js-syntax-highlight{ class: 'gl-py-3!' }
   - if blob.present?
     .blob-content{ data: { blob_id: blob.id, path: blob.path, highlight_line: highlight, qa_selector: 'file_content' } }
-      - blob.present.highlight.lines.each_with_index do |line, index|
+      - blob_highlight = blob.present.highlight_and_trim(trim_length: 1024, ellipsis_svg: sprite_icon('ellipsis_h', size: 12, css_class: "gl-text-gray-700"))
+      - blob_highlight.lines.each_with_index do |line, index|
         - i = index + offset
         .line_holder.code-search-line.gl-display-flex
           .line-numbers
diff --git a/app/views/shared/_file_picker_button.html.haml b/app/views/shared/_file_picker_button.html.haml
index 1d688e7f4b0..8d76e9c1b7d 100644
--- a/app/views/shared/_file_picker_button.html.haml
+++ b/app/views/shared/_file_picker_button.html.haml
@@ -1,7 +1,8 @@
 - classes = local_assigns.fetch(:classes, '')
 
 %span.js-filepicker
-  %button.gl-button.btn.btn-default.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
+  = render Pajamas::ButtonComponent.new(button_options: { class: "js-filepicker-button #{classes}" }) do
+    = _("Choose file…")
   %span.file_name.js-filepicker-filename= _("No file chosen.")
   = f.file_field field, class: "js-filepicker-input hidden"
   - if help_text.present?
diff --git a/app/views/shared/_flash_user_callout.html.haml b/app/views/shared/_flash_user_callout.html.haml
index 7b2d59407b4..c549c4e6e4d 100644
--- a/app/views/shared/_flash_user_callout.html.haml
+++ b/app/views/shared/_flash_user_callout.html.haml
@@ -4,7 +4,7 @@
 .flash-container.flash-container-page.user-callout{ data: callout_data }
   -# We currently only support `alert`, `warning`, `notice`, `success`
   %div{ class: "flash-#{flash_type}" }
-    %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
+    %div{ class: "#{container_class unless fluid_layout} #{extra_flash_class unless @no_container} #{@content_class}" }
       %span= message
       %button.btn.gl-button.btn-default.close.js-close{ type: 'button',
         'aria-label' => _('Dismiss') }
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index c0bc50fef5b..1645c2695b5 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -42,7 +42,7 @@
     - if current_user
       %li.gl-display-inline-block.label-subscription.js-label-subscription.gl-ml-3
         - if label.can_subscribe_to_label_in_different_levels?
-          = render Pajamas::ButtonComponent.new(button_options: { class: "js-unsubscribe-button #{('hidden' if status.unsubscribed?)}", data: { url: toggle_subscription_path, toggle: 'tooltip', container: 'body' }, title: tooltip_title } ) do
+          = render Pajamas::ButtonComponent.new(button_options: { class: "js-unsubscribe-button #{'hidden' if status.unsubscribed?}", data: { url: toggle_subscription_path, toggle: 'tooltip', container: 'body' }, title: tooltip_title } ) do
             = _('Unsubscribe')
           .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
             = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-w-full', data: { toggle: 'dropdown' } }) do
@@ -51,10 +51,10 @@
             .dropdown-menu.dropdown-open-left
               %ul
                 %li
-                  = render Pajamas::ButtonComponent.new(category: :tertiary, button_options: { class: "js-subscribe-button #{('hidden' unless status.unsubscribed?)}", data: { status: status, url: toggle_subscription_project_label_path(@project, label) } } ) do
+                  = render Pajamas::ButtonComponent.new(category: :tertiary, button_options: { class: "js-subscribe-button #{'hidden' unless status.unsubscribed?}", data: { status: status, url: toggle_subscription_project_label_path(@project, label) } } ) do
                     = _('Subscribe at project level')
                 %li
-                  = render Pajamas::ButtonComponent.new(category: :tertiary, button_options: { class: "js-subscribe-button js-group-level #{('hidden' unless status.unsubscribed?)}", data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } } ) do
+                  = render Pajamas::ButtonComponent.new(category: :tertiary, button_options: { class: "js-subscribe-button js-group-level #{'hidden' unless status.unsubscribed?}", data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } } ) do
                     = _('Subscribe at group level')
         - else
           = render Pajamas::ButtonComponent.new(button_options: { class: 'js-subscribe-button gl-w-full', data: { status: status, url: toggle_subscription_path, toggle: 'tooltip', container: 'body' }, title: tooltip_title } ) do
diff --git a/app/views/shared/_md_preview.html.haml b/app/views/shared/_md_preview.html.haml
index 7314a7ddadc..2fff70cdc74 100644
--- a/app/views/shared/_md_preview.html.haml
+++ b/app/views/shared/_md_preview.html.haml
@@ -1,6 +1,6 @@
 - referenced_users = local_assigns.fetch(:referenced_users, nil)
 
-- if defined?(@merge_request) && @merge_request.discussion_locked?
+- if @merge_request&.discussion_locked?
   .issuable-note-warning
     = sprite_icon('lock', css_class: 'icon')
     %span
diff --git a/app/views/shared/access_tokens/_created_container.html.haml b/app/views/shared/access_tokens/_created_container.html.haml
deleted file mode 100644
index c0aaa46e761..00000000000
--- a/app/views/shared/access_tokens/_created_container.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-.created-personal-access-token-container
-  %h5.gl-mt-0
-    = _('Your new %{type}') % { type: type }
-  .form-group
-    .input-group
-      = text_field_tag 'created-personal-access-token', new_token_value, readonly: true, class: 'form-control js-select-on-focus', data: { qa_selector: 'created_access_token_field' }, 'aria-describedby' => 'created-token-help-block'
-      %span.input-group-append
-        = clipboard_button(text: new_token_value, title: _('Copy %{type}') % { type: type }, placement: 'left', class: 'input-group-text btn-default btn-clipboard')
-    %span#created-token-help-block.form-text.text-muted.text-danger
-      = _("Make sure you save it - you won't be able to access it again.")
-
-%hr
diff --git a/app/views/shared/access_tokens/_table.html.haml b/app/views/shared/access_tokens/_table.html.haml
deleted file mode 100644
index 53c6800f93d..00000000000
--- a/app/views/shared/access_tokens/_table.html.haml
+++ /dev/null
@@ -1,51 +0,0 @@
-- no_active_tokens_message = local_assigns.fetch(:no_active_tokens_message, _('This user has no active %{type}.') % { type: type_plural })
-- impersonation = local_assigns.fetch(:impersonation, false)
-- resource = local_assigns.fetch(:resource, false)
-
-%hr
-
-%h5
-  = _('Active %{type} (%{token_length})') % { type: type_plural, token_length: active_tokens.length }
-
-- if impersonation
-  %p.profile-settings-content
-    = _("To see all the user's personal access tokens you must impersonate them first.")
-
-- if active_tokens.present?
-  .table-responsive
-    %table.table.active-tokens
-      %thead
-        %tr
-          %th= _('Token name')
-          %th= _('Scopes')
-          %th= s_('AccessTokens|Created')
-          %th
-            = _('Last Used')
-            = link_to sprite_icon('question-o'), help_page_path('user/profile/personal_access_tokens.md', anchor: 'view-the-last-time-a-token-was-used'), target: '_blank', rel: 'noopener noreferrer'
-          %th= _('Expires')
-          - if resource
-            %th= _('Role')
-          %th
-      %tbody
-        - active_tokens.each do |token|
-          %tr
-            %td= token.name
-            %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td= token.created_at.to_date.to_s(:medium)
-            %td
-              - if token.last_used_at?
-                %span.token-last-used-label= _(time_ago_with_tooltip(token.last_used_at))
-              - else
-                %span.token-never-used-label= _('Never')
-            %td
-              - if token.expires?
-                %span{ class: ('text-warning' if token.expires_soon?) }
-                  = time_ago_with_tooltip(token.expires_at)
-              - else
-                %span.token-never-expires-label= _('Never')
-            - if resource
-              %td= resource.member(token.user).human_access
-            %td= link_to _('Revoke'), revoke_route_helper.call(token), method: :put, class: "gl-button btn btn-danger btn-sm float-right #{'btn-danger-secondary' unless token.expires?}", aria: { label: _('Revoke') }, data: { confirm: _('Are you sure you want to revoke this %{type}? This action cannot be undone.') % { type: type }, 'confirm-btn-variant': 'danger', qa_selector: 'revoke_button' }
-- else
-  .settings-message.text-center
-    = no_active_tokens_message
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index 1b48843eb10..0f290f34a95 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -3,7 +3,7 @@
   - group_deploy_tokens_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_deploy_tokens_help_link_url }
   = s_('DeployTokens|Create a new deploy token for all projects in this group. %{link_start}What are deploy tokens?%{link_end}').html_safe % { link_start: group_deploy_tokens_help_link_start, link_end: '</a>'.html_safe }
 
-= gitlab_ui_form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: Feature.enabled?(:ajax_new_deploy_token, group_or_project) do |f|
+= gitlab_ui_form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: true do |f|
 
   .form-group
     = f.label :name, class: 'label-bold'
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index faec379e42b..e5f1fd99125 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -8,20 +8,13 @@
     %p
       = description
   .settings-content
-    - if Feature.enabled?(:ajax_new_deploy_token, group_or_project)
-      #js-new-deploy-token{ data: {
-          container_registry_enabled: container_registry_enabled?(group_or_project),
-          packages_registry_enabled: packages_registry_enabled?(group_or_project),
-          create_new_token_path: create_deploy_token_path(group_or_project),
-          token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
-          deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
-        }
+    #js-new-deploy-token{ data: {
+        container_registry_enabled: container_registry_enabled?(group_or_project),
+        packages_registry_enabled: packages_registry_enabled?(group_or_project),
+        create_new_token_path: create_deploy_token_path(group_or_project),
+        token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
+        deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
       }
-    - else
-      - if @created_deploy_token
-        = render 'shared/deploy_tokens/new_deploy_token', deploy_token: @created_deploy_token
-      %h5.gl-mt-0
-        = s_('DeployTokens|New deploy token')
-      = render 'shared/deploy_tokens/form', group_or_project: group_or_project, token: @new_deploy_token, presenter: @deploy_tokens
+    }
     %hr
     = render 'shared/deploy_tokens/table', group_or_project: group_or_project, active_tokens: @deploy_tokens
diff --git a/app/views/shared/empty_states/_snippets.html.haml b/app/views/shared/empty_states/_snippets.html.haml
index a006a3bc0a4..e34166bac6c 100644
--- a/app/views/shared/empty_states/_snippets.html.haml
+++ b/app/views/shared/empty_states/_snippets.html.haml
@@ -2,8 +2,8 @@
 
 .row.empty-state
   .col-12
-    .svg-content
-      = image_tag 'illustrations/snippets_empty.svg', data: { qa_selector: 'svg_content' }
+    .svg-content{ data: { qa_selector: 'svg_content' } }
+      = image_tag 'illustrations/snippets_empty.svg'
     .text-content.gl-text-center.gl-pt-0
       - if current_user
         %h4
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index e6bdefc64d2..da8477f4b2e 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -1,5 +1,6 @@
 - type = local_assigns.fetch(:type)
 - is_issue = type == :issues
+- move_data = { projects_fetch_path: autocomplete_projects_path(project_id: @project.id), project_full_path: @project.full_path }
 
 %aside.issues-bulk-update.js-right-sidebar.right-sidebar{ "aria-live" => "polite", data: { 'signed-in': current_user.present? }, 'aria-label': _('Bulk update') }
   .issuable-sidebar.hidden
@@ -33,7 +34,7 @@
         .title
           = _('Milestone')
         .filter-item
-          = dropdown_tag(_("Select milestone"), options: { title: _("Assign milestone"), toggle_class: "js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: _("Search milestones"), data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, use_id: true, default_label: _("Milestone") } })
+          .js-milestone-dropdown-root{ data: { full_path: @project.full_path, workspace_type: Namespaces::ProjectNamespace.sti_name.downcase } }
       - if is_issue
         = render_if_exists 'shared/issuable/iterations_dropdown', parent: @project.group
       - if is_issue
@@ -42,6 +43,9 @@
         .title
           = _('Subscriptions')
         .js-subscriptions-dropdown
+      - if is_issue
+        .block
+          .js-move-issues{ data: move_data }
 
       = hidden_field_tag "update[issuable_ids]", []
       = hidden_field_tag :state_event, params[:state_event]
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 5b7f9c4226c..a325ad5f447 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -71,7 +71,10 @@
   - else
     = link_to _('Cancel'), polymorphic_path([@project, issuable]), class: 'gl-button btn btn-default js-reset-autosave'
     - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
-      = link_to 'Delete', polymorphic_path([@project, issuable], params: { destroy_confirm: true }), data: { confirm: _('%{issuableType} will be removed! Are you sure?') % { issuableType: issuable.human_class_name } }, method: :delete, class: 'btn gl-button btn-danger btn-danger-secondary gl-float-right js-reset-autosave'
+      - confirm_title = _('Delete %{issuableType}?') % { issuableType: issuable.human_class_name }
+      - confirm_body = _('You’re about to permanently delete the %{issuableType} ‘%{strongOpen}%{issuableTitle}%{strongClose}’. To avoid data loss, consider %{strongOpen}closing this %{issuableType}%{strongClose} instead. Once deleted, it cannot be undone or recovered.') % { issuableType: issuable.human_class_name, issuableTitle: issuable.title, strongOpen: '<strong>', strongClose: '</strong>' }
+      - confirm_primary_btn_text = _('Delete %{issuableType}') % { issuableType: issuable.human_class_name }
+      = link_to _('Delete'), polymorphic_path([@project, issuable], params: { destroy_confirm: true }), data: { title: confirm_title, confirm: confirm_body, is_html_message: true, confirm_btn_variant: 'danger'}, method: :delete, class: 'btn gl-button btn-danger btn-danger-secondary gl-float-right js-reset-autosave', "aria-label": confirm_primary_btn_text
 
 - if issuable.respond_to?(:issue_type)
   = form.hidden_field :issue_type
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index 58108ceeb76..a02d2851c4c 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -1,19 +1,11 @@
+- name = local_assigns.fetch(:name, nil)
 - project = @target_project || @project
-- extra_class = extra_class || ''
-- show_menu_above = show_menu_above || false
 - selected = local_assigns.fetch(:selected, nil)
 
-- selected_text = selected.try(:title) || params[:milestone_title]
-- dropdown_title = local_assigns.fetch(:dropdown_title, _('Filter by milestone'))
-- if selected.present? || params[:milestone_title].present?
-  = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
-= dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", dropdown_qa_selector: "issuable_milestone_dropdown_content",
-  placeholder: _('Search milestones'), footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected_text, project_id: project.try(:id), default_label: _('Milestone'), qa_selector: "issuable_milestone_dropdown", testid: "issuable-milestone-dropdown" } }) do
-  - if project
-    %ul.dropdown-footer-list
-      %li
-        = link_to project_milestones_path(project) do
-          - if can? current_user, :admin_milestone, project
-            = _('Manage milestones')
-          - else
-            = _('View milestones')
+.js-milestone-dropdown-root{ data: { can_admin_milestone: can?(current_user, :admin_milestone, project),
+  full_path: project.full_path,
+  input_name: name,
+  milestone_id: selected.try(:id),
+  milestone_title: selected.try(:title),
+  project_milestones_path: project_milestones_path(project),
+  workspace_type: Namespaces::ProjectNamespace.sti_name.downcase } }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 4199b7e870b..0fd128df997 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -17,14 +17,14 @@
       %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if signed_in && !moved_sidebar_enabled
-        .js-issuable-todo{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
+        .js-sidebar-todo-widget-root{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } }
 
     = form_for issuable_type, url: issuable_sidebar[:issuable_json_path], remote: true, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
-      .block.assignee.qa-assignee-block{ class: "#{'gl-mt-3' if !signed_in && moved_sidebar_enabled}", data: { qa_selector: 'assignee_block_container' } }
+      .block.assignee{ class: "#{'gl-mt-3' if !signed_in && moved_sidebar_enabled}", data: { qa_selector: 'assignee_block_container' } }
         = render "shared/issuable/sidebar_assignees", issuable_sidebar: issuable_sidebar, assignees: assignees, signed_in: signed_in
 
       - if issuable_sidebar[:supports_severity]
-        #js-severity
+        .js-sidebar-severity-root
 
       - if reviewers
         .block.reviewer{ data: { qa_selector: 'reviewers_block_container' } }
@@ -32,17 +32,17 @@
 
       - if issuable_sidebar[:supports_escalation]
         .block.escalation-status{ data: { testid: 'escalation_status_container' } }
-          #js-escalation-status{ data: { can_update: issuable_sidebar.dig(:current_user, :can_update_escalation_status).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
+          .js-sidebar-escalation-status-root{ data: { can_update: issuable_sidebar.dig(:current_user, :can_update_escalation_status).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
         = render_if_exists 'shared/issuable/sidebar_escalation_policy', issuable_sidebar: issuable_sidebar
 
       - if @project.group.present?
         = render_if_exists 'shared/issuable/sidebar_item_epic', issuable_sidebar: issuable_sidebar, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
 
-      .js-sidebar-labels{ data: sidebar_labels_data(issuable_sidebar, @project) }
+      .js-sidebar-labels-widget-root{ data: sidebar_labels_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar[:supports_milestone]
         .block.milestone{ :class => ("gl-border-b-0!" if in_group_context_with_iterations), data: { qa_selector: 'milestone_block', testid: 'sidebar-milestones' } }
-          .js-milestone-select{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
+          .js-sidebar-milestone-widget-root{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
 
       - if in_group_context_with_iterations
         .block.gl-collapse-empty{ data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }<
@@ -50,40 +50,40 @@
 
       - if issuable_sidebar[:show_crm_contacts]
         .block.contact
-          #js-issue-crm-contacts{ data: { issue_id: issuable_sidebar[:id], group_issues_path: issues_group_path(@project.group) } }
+          .js-sidebar-crm-contacts-root{ data: { issue_id: issuable_sidebar[:id], group_issues_path: issues_group_path(@project.group) } }
 
       = render_if_exists 'shared/issuable/sidebar_weight', issuable_sidebar: issuable_sidebar, can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid]
 
       - if issuable_sidebar.has_key?(:due_date)
-        #js-due-date-entry-point
+        .js-sidebar-due-date-widget-root
 
       - if issuable_sidebar[:supports_time_tracking]
-        #issuable-time-tracker.block
+        .js-sidebar-time-tracking-root.block
           // Fallback while content is loading
           .title.hide-collapsed
             = _('Time tracking')
             = gl_loading_icon(inline: true)
 
       - if issuable_sidebar.dig(:features_available, :health_status)
-        .js-sidebar-health-status-entry-point{ data: sidebar_status_data(issuable_sidebar, @project) }
+        .js-sidebar-health-status-widget-root{ data: sidebar_status_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar.has_key?(:confidential)
         -# haml-lint:disable InlineJavaScript
         %script#js-confidential-issue-data{ type: "application/json" }= { is_confidential: issuable_sidebar[:confidential], is_editable: can_edit_issuable }.to_json.html_safe
-        #js-confidential-entry-point
+        .js-sidebar-confidential-widget-root
 
         = render_if_exists 'shared/issuable/sidebar_cve_id_request', issuable_sidebar: issuable_sidebar
 
       - if !moved_sidebar_enabled
-        #js-lock-entry-point
+        .js-sidebar-lock-root
         - if signed_in
-          .js-sidebar-subscriptions-entry-point
+          .js-sidebar-subscriptions-widget-root
 
-      .js-sidebar-participants-entry-point
+      .js-sidebar-participants-widget-root
 
       .block.with-sub-blocks
         - if !moved_sidebar_enabled
-          #js-reference-entry-point
+          .js-sidebar-reference-widget-root
         - if issuable_type == 'merge_request' && !moved_sidebar_enabled
           .sub-block.js-sidebar-source-branch
             .sidebar-collapsed-icon.js-dont-change-state
@@ -95,7 +95,7 @@
 
       - if show_forwarding_email
         .block
-          #issuable-copy-email
+          .js-sidebar-copy-email-root
       - if issuable_sidebar.dig(:current_user, :can_move)
         .block.js-sidebar-move-issue-block
           .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 62221fb8218..8ca30d7ca97 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -1,7 +1,7 @@
 - issuable_type = issuable_sidebar[:type]
 - dropdown_options = assignees_dropdown_options(issuable_type)
 
-#js-vue-sidebar-assignees{ data: { field: issuable_type,
+.js-sidebar-assignees-root{ data: { field: issuable_type,
   signed_in: signed_in,
   max_assignees: dropdown_options[:data][:"max-select"],
   directly_invite_members: can_admin_project_member?(@project) } }
@@ -39,7 +39,7 @@
   - data[:multi_select] = true
   - data['dropdown-title'] = title
   - data['dropdown-header'] = dropdown_options[:data][:'dropdown-header']
-  - data['max-select'] = dropdown_max_select(dropdown_options[:data], :limit_assignees_per_issuable)
+  - data['max-select'] = dropdown_max_select(dropdown_options[:data], nil)
   - options[:data].merge!(data)
 
   = render 'shared/issuable/sidebar_user_dropdown',
diff --git a/app/views/shared/issuable/_sidebar_reviewers.html.haml b/app/views/shared/issuable/_sidebar_reviewers.html.haml
index 771db8af6a8..4df393eeb67 100644
--- a/app/views/shared/issuable/_sidebar_reviewers.html.haml
+++ b/app/views/shared/issuable/_sidebar_reviewers.html.haml
@@ -1,16 +1,12 @@
 - issuable_type = issuable_sidebar[:type]
 
-#js-vue-sidebar-reviewers{ data: { field: issuable_type, signed_in: signed_in } }
+.js-sidebar-reviewers-root{ data: { field: issuable_type, signed_in: signed_in } }
   .title.hide-collapsed
     = _('Reviewers')
     = gl_loading_icon(inline: true)
 
 .selectbox.hide-collapsed
-  - if reviewers.none?
-    = hidden_field_tag "#{issuable_type}[reviewer_ids][]", 0, id: nil
-  - else
-    - reviewers.each do |reviewer|
-      = hidden_field_tag "#{issuable_type}[reviewer_ids][]", reviewer.id, id: nil, data: reviewer_sidebar_data(reviewer, merge_request: @merge_request)
+  .js-reviewers-inputs
 
   - options = { toggle_class: 'js-reviewer-search js-author-search',
     title: _('Request review from'),
@@ -32,10 +28,10 @@
   - dropdown_options = reviewers_dropdown_options(issuable_type)
   - title = dropdown_options[:title]
   - options[:toggle_class] += ' js-multiselect js-save-user-data'
-  - data = { field_name: "#{issuable_type}[reviewer_ids][]" }
-  - data[:multi_select] = true
+  - data = { multi_select: true }
   - data['dropdown-title'] = title
   - data['dropdown-header'] = dropdown_options[:data][:'dropdown-header']
+  - data[:suggested_reviewers_help_path] = dropdown_options[:data][:suggested_reviewers_help_path]
   - data[:suggested_reviewers_header] = dropdown_options[:data][:suggested_reviewers_header]
   - data[:all_members_header] = dropdown_options[:data][:all_members_header]
   - data[:show_suggested] = dropdown_options[:data][:show_suggested]
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 76469b34832..9603178f7de 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -35,7 +35,7 @@
           = form.label :milestone_id, _('Milestone'), class: "col-12"
           .col-12
             .issuable-form-select-holder
-              = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: _('Select milestone')
+              = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]"
 
       .form-group.row
         = form.label :label_ids, _('Labels'), class: "col-12"
@@ -54,3 +54,4 @@
           .col-12
             .issuable-form-select-holder
               = form.gitlab_ui_datepicker :due_date, placeholder: _('Select due date'), autocomplete: 'off', id: "issuable-due-date"
+        = render_if_exists "shared/issuable/form/iteration", form: form, group: project.group
diff --git a/app/views/shared/issue_type/_emoji_block.html.haml b/app/views/shared/issue_type/_emoji_block.html.haml
index a5c71fb1d24..7eb3c0f5c9f 100644
--- a/app/views/shared/issue_type/_emoji_block.html.haml
+++ b/app/views/shared/issue_type/_emoji_block.html.haml
@@ -1,8 +1,8 @@
 - api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
-.content-block.emoji-block.emoji-block-sticky
+.emoji-block.emoji-block-sticky
   .row.gl-m-0.gl-justify-content-space-between
     .js-noteable-awards
       = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path
-    .new-branch-col.gl-font-size-0
+    .new-branch-col.gl-font-size-0.gl-my-2
       = render 'new_branch' if show_new_branch_button?
diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml
index c6932d49d33..9ef4b9e084d 100644
--- a/app/views/shared/labels/_form.html.haml
+++ b/app/views/shared/labels/_form.html.haml
@@ -29,8 +29,10 @@
         = f.submit _('Save changes'), class: 'js-save-button gl-mr-2', pajamas_button: true
       - else
         = f.submit _('Create label'), class: 'js-save-button gl-mr-2', data: { qa_selector: 'label_create_button' }, pajamas_button: true
-      = link_to _('Cancel'), back_path, class: 'btn gl-button btn-default btn-cancel gl-mr-2'
+      = render Pajamas::ButtonComponent.new(href: back_path) do
+        = _('Cancel')
+
     - if @label.persisted?
       - presented_label = @label.present
-      %button.btn.btn-danger.gl-button.btn-danger-secondary.js-delete-label-modal-button{ type: 'button', data: { label_name: presented_label.name, subject_name: presented_label.subject_name, destroy_path: presented_label.destroy_path } }
-        %span.gl-button-text= _('Delete')
+      = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, button_options: { class: 'js-delete-label-modal-button', data: { label_name: presented_label.name, subject_name: presented_label.subject_name, destroy_path: presented_label.destroy_path } }) do
+        = _('Delete')
diff --git a/app/views/shared/members/_access_request_links.html.haml b/app/views/shared/members/_access_request_links.html.haml
index 7af946377be..0b38b9d7945 100644
--- a/app/views/shared/members/_access_request_links.html.haml
+++ b/app/views/shared/members/_access_request_links.html.haml
@@ -8,9 +8,10 @@
             data: { confirm: leave_confirmation_message(source), confirm_btn_variant: 'danger', qa_selector: 'leave_group_link' },
             class: 'js-leave-link'
 - elsif requester = source.requesters.find_by(user_id: current_user.id) # rubocop: disable CodeReuse/ActiveRecord
-  = link_to _('Withdraw Access Request'), polymorphic_path([:leave, source, :members]),
-            method: :delete,
-            data: { confirm: remove_member_message(requester) }
+  - if can?(current_user, :withdraw_member_access_request, requester)
+    = link_to _('Withdraw Access Request'), polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: remove_member_message(requester) }
 - elsif source.request_access_enabled && can?(current_user, :request_access, source)
   = link_to _('Request Access'), polymorphic_path([:request_access, source, :members]),
             method: :post
diff --git a/app/views/shared/milestones/_delete_button.html.haml b/app/views/shared/milestones/_delete_button.html.haml
index 8a709a36835..432d2efc36e 100644
--- a/app/views/shared/milestones/_delete_button.html.haml
+++ b/app/views/shared/milestones/_delete_button.html.haml
@@ -1,11 +1,7 @@
 - milestone_url = @milestone.project_milestone? ? project_milestone_path(@project, @milestone) : group_milestone_path(@group, @milestone)
 
-%button.js-delete-milestone-button.btn.gl-button.btn-grouped.btn-danger{ data: { milestone_id: @milestone.id,
-  milestone_title: markdown_field(@milestone, :title),
-  milestone_url: milestone_url,
-  milestone_issue_count: @milestone.issues.count,
-  milestone_merge_request_count: @milestone.merge_requests.count },
-  disabled: true }
+= render Pajamas::ButtonComponent.new(variant: :danger,
+  button_options: { class: 'js-delete-milestone-button btn-grouped', data: { milestone_id: @milestone.id, milestone_title: markdown_field(@milestone, :title), milestone_url: milestone_url, milestone_issue_count: @milestone.issues.count, milestone_merge_request_count: @milestone.merge_requests.count }, disabled: true }) do
   = gl_loading_icon(inline: true, css_class: "gl-mr-2 js-loading-icon hidden")
   = _('Delete')
 
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index 6a65909b1c2..cc1965945ac 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -94,7 +94,7 @@
               = milestone.issues_visible_to_user(current_user).closed.count
 
     .block
-      #issuable-time-tracker{ data: { time_estimate: @milestone.total_time_estimate,
+      .js-sidebar-time-tracking-root{ data: { time_estimate: @milestone.total_time_estimate,
         time_spent: @milestone.total_time_spent,
         human_time_estimate: @milestone.human_total_time_estimate,
         human_time_spent: @milestone.human_total_time_spent,
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index c39dc561801..43cd2ee4c5b 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -32,7 +32,7 @@
   - if any_projects?(projects)
     - load_pipeline_status(projects) if pipeline_status
     - load_max_project_member_accesses(projects) # Prime cache used in shared/projects/project view rendered below
-    %ul.projects-list{ class: css_classes }
+    %ul.projects-list.gl-text-secondary.gl-w-full.gl-my-2{ class: css_classes }
       - projects.each_with_index do |project, i|
         - css_class = (i >= projects_limit) || project.pending_delete? ? 'hide' : nil
         = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 81e2e066bd3..908eb2428e8 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -8,102 +8,108 @@
 - access = max_project_member_access(project)
 - compact_mode = false unless local_assigns[:compact_mode] == true
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && can_show_last_commit_in_list?(project)
-- css_class = '' unless local_assigns[:css_class]
-- css_class += " gl-display-flex!"
+- css_class = "gl-sm-display-flex gl-align-items-center gl-vertical-align-middle!" if project.description.blank? && !show_last_commit_as_description
 - cache_key = project_list_cache_key(project, pipeline_status: pipeline_status)
 - updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
 - show_pipeline_status_icon = pipeline_status && can?(current_user, :read_cross_project) && project.pipeline_status.has_status? && can?(current_user, :read_build, project)
 - last_pipeline = project.last_pipeline if show_pipeline_status_icon
-- css_controls_class = compact_mode ? [] : ["flex-lg-row", "justify-content-lg-between"]
-- css_controls_class << "with-pipeline-status" if show_pipeline_status_icon && last_pipeline.present?
-- avatar_container_class = project.creator && use_creator_avatar ? '' : 'rect-avatar'
+- css_controls_class = "with-pipeline-status" if show_pipeline_status_icon && last_pipeline.present?
+- css_controls_container_class = compact_mode ? "" : "gl-lg-flex-direction-row gl-justify-content-space-between"
+- css_metadata_classes = "gl-display-flex gl-align-items-center gl-mr-5 gl-reset-color! icon-wrapper has-tooltip"
 
-%li.project-row.gl-align-items-center{ class: css_class }
+%li.project-row
   = cache(cache_key) do
     - if avatar
-      .flex-grow-0.flex-shrink-0{ class: avatar_container_class }
+      .project-cell.gl-w-11
         = link_to project_path(project), class: dom_class(project) do
           - if project.creator && use_creator_avatar
             = render Pajamas::AvatarComponent.new(project.creator, size: 48, alt: '', class: 'gl-mr-5')
           - else
             = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
-    .project-details.d-sm-flex.flex-sm-fill.align-items-center{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
-      .flex-wrapper
-        .d-flex.align-items-center.flex-wrap.project-title
-          %h2.d-flex.gl-mt-3
-            = link_to project_path(project), class: 'text-plain js-prefetch-document' do
-              %span.project-full-name.gl-mr-3><
-                %span.namespace-name
-                  - if project.namespace && !skip_namespace
-                    = project.namespace.human_name
-                    \/
-                %span.project-name<
-                  = project.name
+  .project-cell{ class: css_class }
+    .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
+      .gl-display-flex.gl-align-items-center.gl-flex-wrap-wrap
+        %h2.gl-font-base.gl-line-height-20.gl-my-0
+          = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document' do
+            %span.namespace-name.gl-font-weight-normal
+              - if project.namespace && !skip_namespace
+                = project.namespace.human_name
+                \/
+            %span.project-name<
+              = project.name
 
-          %span.metadata-info.visibility-icon.gl-mr-3.gl-mt-3.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
-            = visibility_level_icon(project.visibility_level)
+        %span.gl-mr-3.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
+          = visibility_level_icon(project.visibility_level)
 
-          - if explore_projects_tab? && project_license_name(project)
-            %span.metadata-info.d-inline-flex.align-items-center.gl-mr-3.gl-mt-3
-              = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
-              = project_license_name(project)
+        - if explore_projects_tab? && project_license_name(project)
+          %span.gl-display-inline-flex.gl-align-items-center.gl-mr-3
+            = sprite_icon('scale', size: 14, css_class: 'gl-mr-2')
+            = project_license_name(project)
 
-          - if !explore_projects_tab? && access&.nonzero?
-            -# haml-lint:disable UnnecessaryStringOutput
-            = ' ' # prevent haml from eating the space between elements
-            .metadata-info.gl-mt-3
-              %span.user-access-role.gl-display-block{ data: { qa_selector: 'user_role_content' } }= localized_project_human_access(access)
+        - if !explore_projects_tab? && access&.nonzero?
+          -# haml-lint:disable UnnecessaryStringOutput
+          = ' ' # prevent haml from eating the space between elements
+          %span.user-access-role.gl-display-block.gl-m-0{ data: { qa_selector: 'user_role_content' } }= Gitlab::Access.human_access(access)
 
-          - if !explore_projects_tab?
-            .metadata-info.gl-mt-3
-              = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project
+        - if !explore_projects_tab?
+          = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project
 
-        - if show_last_commit_as_description
-          .description.d-none.d-sm-block.gl-mr-3
-            = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
-        - elsif project.description.present?
-          .description.d-none.d-sm-block.gl-mr-3
-            = markdown_field(project, :description)
+      - if show_last_commit_as_description
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2
+          = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
+      - elsif project.description.present?
+        .description.gl-display-none.gl-sm-display-block.gl-overflow-hidden.gl-mr-3.gl-mt-2
+          = markdown_field(project, :description)
 
-        - if project.topics.any?
-          .gl-mt-2
-            = render "shared/projects/topics", project: project.present(current_user: current_user)
+      - if project.topics.any?
+        .gl-mt-2
+          = render "shared/projects/topics", project: project.present(current_user: current_user)
 
-        = render_if_exists 'shared/projects/removed', project: project
+      = render_if_exists 'shared/projects/removed', project: project
 
-      .controls.d-flex.flex-sm-column.align-items-center.align-items-sm-end.flex-wrap.flex-shrink-0.text-secondary{ class: css_controls_class.join(" ") }
-        .icon-container.d-flex.align-items-center
+      .gl-display-flex.gl-mt-3{ class: "#{css_class} gl-sm-display-none!" }
+        .controls.gl-display-flex.gl-align-items-center
           - if show_pipeline_status_icon && last_pipeline.present?
             - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
-            %span.icon-wrapper.pipeline-status
+            %span.icon-wrapper.pipeline-status.gl-mr-5
               = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
 
           = render_if_exists 'shared/projects/archived', project: project
           - if stars
-            = link_to project_starrers_path(project),
-                class: "d-flex align-items-center icon-wrapper stars has-tooltip",
-                title: _('Stars'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('star', size: 14, css_class: 'gl-mr-2')
-              = number_with_delimiter(project.star_count)
-          - if forks
-            = link_to project_forks_path(project),
-                class: "align-items-center icon-wrapper forks has-tooltip",
-                title: _('Forks'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
-              = number_with_delimiter(project.forks_count)
-          - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
-            = link_to project_merge_requests_path(project),
-                class: "d-none d-xl-flex align-items-center icon-wrapper merge-requests has-tooltip",
-                title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
-              = number_with_delimiter(project.open_merge_requests_count)
-          - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
-            = link_to project_issues_path(project),
-                class: "d-none d-xl-flex align-items-center icon-wrapper issues has-tooltip",
-                title: _('Issues'), data: { container: 'body', placement: 'top' } do
-              = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
-              = number_with_delimiter(project.open_issues_count)
-        .updated-note
+            = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+              = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+              = badge_count(project.star_count)
+        .updated-note.gl-ml-3.gl-sm-ml-0
           %span
             = _('Updated')
             = updated_tooltip
+
+  .project-cell{ class: "#{css_class} gl-xs-display-none!" }
+    .project-controls.gl-display-flex.gl-flex-direction-column.gl-w-full{ class: css_controls_container_class, data: { testid: 'project_controls'} }
+      .controls.gl-display-flex.gl-align-items-center{ class: css_controls_class }
+        - if show_pipeline_status_icon && last_pipeline.present?
+          - pipeline_path = pipelines_project_commit_path(project.pipeline_status.project, project.pipeline_status.sha, ref: project.pipeline_status.ref)
+          %span.icon-wrapper.pipeline-status.gl-mr-5
+            = render 'ci/status/icon', status: last_pipeline.detailed_status(current_user), tooltip_placement: 'top', path: pipeline_path
+
+        = render_if_exists 'shared/projects/archived', project: project
+        - if stars
+          = link_to project_starrers_path(project), class: "#{css_metadata_classes} stars", title: _('Stars'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('star-o', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.star_count)
+        - if forks
+          = link_to project_forks_path(project), class: "#{css_metadata_classes} forks", title: _('Forks'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('fork', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.forks_count)
+        - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
+          = link_to project_merge_requests_path(project), class: "#{css_metadata_classes} merge-requests", title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_merge_requests_count)
+        - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
+          = link_to project_issues_path(project), class: "#{css_metadata_classes} issues", title: _('Issues'), data: { container: 'body', placement: 'top' } do
+            = sprite_icon('issues', size: 14, css_class: 'gl-mr-2')
+            = badge_count(project.open_issues_count)
+      .updated-note.gl-white-space-nowrap.gl-justify-content-end
+        %span
+          = _('Updated')
+          = updated_tooltip
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index c95e63bdc83..ecb736dac4f 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -10,21 +10,25 @@
       = s_('Webhooks|URL must be percent-encoded if it contains one or more special characters.')
 .form-group
   = form.label :token, s_('Webhooks|Secret token'), class: 'label-bold'
-  = form.text_field :token, class: 'form-control gl-form-input', placeholder: ''
+  = form.password_field :token, value: hook.masked_token, autocomplete: 'new-password', class: 'form-control gl-form-input'
   %p.form-text.text-muted
     - code_start = '<code>'.html_safe
     - code_end = '</code>'.html_safe
-    = s_('Webhooks|Used to validate received payloads. Sent with the request in the %{code_start}X-Gitlab-Token HTTP%{code_end} header.').html_safe % { code_start: code_start, code_end: code_end }
+    = s_('Webhooks|Used to validate received payloads. Sent with the request in the %{code_start}X-Gitlab-Token%{code_end} HTTP header.').html_safe % { code_start: code_start, code_end: code_end }
 .form-group
   = form.label :url, s_('Webhooks|Trigger'), class: 'label-bold'
   %ul.list-unstyled
     %li.gl-pb-5
-      = form.gitlab_ui_checkbox_component :push_events, s_('Webhooks|Push events')
-      .gl-pl-6
-        = form.text_field :push_events_branch_filter, class: 'form-control gl-form-input',
-          placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
-      %p.form-text.text-muted.custom-control
-        = s_('Webhooks|Push to the repository.')
+      - if Feature.enabled?(:enhanced_webhook_support_regex)
+        - is_new_hook = hook.id.nil?
+        .js-vue-push-events{ data: { push_events: hook.push_events.to_s, strategy: hook.branch_filter_strategy, is_new_hook: is_new_hook.to_s, push_events_branch_filter: hook.push_events_branch_filter } }
+      - else
+        = form.gitlab_ui_checkbox_component :push_events, s_('Webhooks|Push events')
+        .gl-pl-6
+          = form.text_field :push_events_branch_filter, class: 'form-control gl-form-input',
+            placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
+        %p.form-text.text-muted.custom-control
+          = s_('Webhooks|Push to the repository.')
     %li.gl-pb-5
       = form.gitlab_ui_checkbox_component :tag_push_events,
           s_('Webhooks|Tag push events'),
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 47ccc449e1b..bb43c3c6274 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -12,7 +12,7 @@
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
+#js-snippet-view{ data: { 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet), 'can-report-spam': @snippet.submittable_as_spam_by?(current_user).to_s } }
 
 .row-content-block.top-block.content-component-block.gl-px-0.gl-py-2
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 952023b3745..7cef87ba19f 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -14,33 +14,31 @@
   .cover-block.user-cover-block{ class: [('border-bottom' if profile_tabs.empty?)] }
     = render layout: 'users/cover_controls' do
       - if @user == current_user
-        = link_to profile_path, class: link_classes + 'btn gl-button btn-default btn-icon has-tooltip',
-          title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-          = sprite_icon('pencil')
+        = render Pajamas::ButtonComponent.new(href: profile_path,
+          icon: 'pencil',
+          button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
       - elsif current_user
         - if @user.abuse_report
-          %button{ class: link_classes + 'btn gl-button btn-danger btn-icon', title: s_('UserProfile|Already reported for abuse'),
-            data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } }>
-            = sprite_icon('error')
+          = render Pajamas::ButtonComponent.new(variant: :danger,
+            icon: 'error',
+            button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Already reported for abuse'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
         - else
-          = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referer), class: link_classes + 'btn gl-button btn-default btn-icon',
-            title: s_('UserProfile|Report abuse'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-            = sprite_icon('error')
+          = render Pajamas::ButtonComponent.new(href: new_abuse_report_path(user_id: @user.id, ref_url: request.referer),
+            icon: 'error',
+            button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Report abuse'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
       - verified_gpg_keys = @user.gpg_keys.select(&:verified?)
       - if verified_gpg_keys.any?
-        = link_to user_gpg_keys_path,
-          class: link_classes + 'btn btn-default btn-md gl-button btn-icon has-tooltip',
-          title: n_('View public GPG key', 'View public GPG keys', verified_gpg_keys.length),
-          data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-          = sprite_icon('key', css_class: 'gl-button-icon gl-icon')
+        = render Pajamas::ButtonComponent.new(href: user_gpg_keys_path,
+          icon: 'key',
+          button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: n_('View public GPG key', 'View public GPG keys', verified_gpg_keys.length), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
       - if can?(current_user, :read_user_profile, @user)
-        = link_to user_path(@user, rss_url_options), class: link_classes + 'btn gl-button btn-default btn-icon has-tooltip',
-          title: s_('UserProfile|Subscribe'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
-          = sprite_icon('rss')
+        = render Pajamas::ButtonComponent.new(href: user_path(@user, rss_url_options),
+          icon: 'rss',
+          button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|Subscribe'), data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }})
       - if current_user && current_user.admin?
-        = link_to [:admin, @user], class: link_classes + 'btn gl-button btn-default btn-icon', title: s_('UserProfile|View user in admin area'),
-          data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-          = sprite_icon('user')
+        = render Pajamas::ButtonComponent.new(href: [:admin, @user],
+          icon: 'user',
+          button_options: { class: 'gl-flex-grow-1 gl-mx-1 has-tooltip', title: s_('UserProfile|View user in admin area'), data: {toggle: 'tooltip', placement: 'bottom', container: 'body'}})
       - if current_user && current_user.id != @user.id
         - if current_user.following?(@user)
           = form_tag user_unfollow_path(@user, :json), class: link_classes + 'gl-display-inline-block' do
@@ -58,12 +56,12 @@
 
       - if @user.blocked? || !@user.confirmed?
         .user-info
-          .cover-title
+          %h1.cover-title
             = user_display_name(@user)
         = render "users/profile_basic_info"
       - else
         .user-info
-          .cover-title{ itemprop: 'name' }
+          %h1.cover-title{ itemprop: 'name' }
             = @user.name
             - if @user.pronouns.present?
               %span.gl-font-base.gl-text-gray-500.gl-vertical-align-middle
@@ -133,7 +131,6 @@
             .profile-user-bio
               = @user.bio
 
-
     - unless profile_tabs.empty?
       .scrolling-tabs-container
         .fade-left= sprite_icon('chevron-lg-left', size: 12)