Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

77 files changed, 216 insertions, 273 deletions

diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index b713b805009..f9d8a2d2989 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -1,7 +1,9 @@
 - project = local_assigns.fetch(:project)
 - return unless project.delete_error.present?
 
-= render 'shared/global_alert', variant: :warning, dismissible: false, alert_class: 'project-deletion-failed-message' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  dismissible: false,
+  alert_class: 'project-deletion-failed-message') do
   .gl-alert-body
     This project was scheduled for deletion, but failed with the following message:
     = project.delete_error
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index a7cf50623f0..74ace549bb1 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -20,6 +20,6 @@
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout), project_buttons: true
 
   #js-tree-list{ data: vue_file_list_data(project, ref) }
-  - if !Feature.enabled?(:new_dir_modal, default_enabled: :yaml) && can_edit_tree?
+  - if can_edit_tree?
     = render 'projects/blob/new_dir'
 
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index a8b809d1871..6dfb338a916 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -1,10 +1,12 @@
 - active_tab = local_assigns.fetch(:active_tab, 'blank')
 - track_label = local_assigns.fetch(:track_label, 'import_project')
+- namespace_id = local_assigns.fetch(:destination_namespace_id, nil)
 
 .project-import
   .form-group.import-btn-container.clearfix
-    %h5
+    %h5.gl-display-flex
       = _("Import project from")
+      = link_to _('History'), import_history_index_path, class: 'gl-link gl-ml-auto gl-font-weight-normal'
     .import-buttons
       - if gitlab_project_import_enabled?
         .import_gitlab_project.has-tooltip{ data: { container: 'body', qa_selector: 'gitlab_import_button' } }
@@ -15,7 +17,7 @@
 
       - if github_import_enabled?
         %div
-          = link_to new_import_github_path, 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
+          = 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')
             GitHub
@@ -79,7 +81,7 @@
 
 
   .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-    = form_for @project, html: { class: 'new_project gl-show-field-errors js-project-import' } do |f|
+    = gitlab_ui_form_for @project, html: { class: 'new_project gl-show-field-errors js-project-import' } do |f|
       %hr
       = render "shared/import_form", f: f
       = render 'projects/new_project_fields', f: f, project_name_id: "import-url-name", hide_init_with_readme: true, track_label: track_label
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 88cce9e71c0..66857dadb65 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -1,9 +1,8 @@
 - event = last_push_event
 - if event && show_last_push_widget?(event)
-  = render 'shared/global_alert',
-    variant: :success,
+  = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-mt-3',
-    close_button_class: 'js-close-banner' do
+    close_button_class: 'js-close-banner') do
     .gl-alert-body
       %span= s_("LastPushEvent|You pushed to")
       %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 1fb045544aa..e79825bdfc4 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -9,33 +9,37 @@
     = f.label :name, class: 'label-bold' do
       %span= _("Project name")
     = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { qa_selector: 'project_name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
-  .form-group.project-path.col-sm-6
+  .form-group.project-path.col-sm-6.gl-pr-0
     = f.label :namespace_id, class: 'label-bold' do
       %span= _('Project URL')
     .input-group.gl-flex-nowrap
       - if current_user.can_select_namespace?
         - namespace_id = namespace_id_from(params)
-        .js-vue-new-project-url-select{ data: { namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id)&.full_path,
-          namespace_id: namespace_id,
+        .js-vue-new-project-url-select{ data: { namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id)&.full_path || @current_user_group&.full_path,
+          namespace_id: namespace_id || @current_user_group&.id,
           root_url: root_url,
           track_label: track_label,
-          user_namespace_full_path: current_user.namespace.full_path,
           user_namespace_id: current_user.namespace.id } }
       - else
         .input-group-prepend.static-namespace.flex-shrink-0.has-tooltip{ title: user_url(current_user.username) + '/' }
           .input-group-text.border-0
             #{user_url(current_user.username)}/
         = f.hidden_field :namespace_id, value: current_user.namespace_id
+      .gl-align-self-center.gl-pl-5 /
   .form-group.project-path.col-sm-6
     = f.label :path, class: 'label-bold' do
       %span= _("Project slug")
     = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }, data: { qa_selector: 'project_path', username: current_user.username }
+.js-group-namespace-error.form-text.gl-text-red-500.gl-display-none
+  = s_('ProjectsNew|Pick a group or namespace where you want to create this project.')
 - if current_user.can_create_group?
   .form-text.text-muted
     - link_start_group_path = '<a href="%{path}">' % { path: new_group_path }
     - project_tip = s_('ProjectsNew|Want to house several dependent projects under the same namespace? %{link_start}Create a group.%{link_end}') % { link_start: link_start_group_path, link_end: '</a>' }
     = project_tip.html_safe
-= render 'shared/global_alert', alert_class: "gl-mb-4 gl-display-none js-user-readme-repo", dismissible: false, variant: :success do
+= render Pajamas::AlertComponent.new(alert_class: "gl-mb-4 gl-display-none js-user-readme-repo",
+  dismissible: false,
+  variant: :success) do
   .gl-alert-body
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/profile/index', anchor: 'add-details-to-your-profile-with-a-readme') }
     = html_escape(_('%{project_path} is a project that you can use to add a README to your GitLab profile. Create a public project and initialize the repository with a README to get started. %{help_link_start}Learn more.%{help_link_end}')) % { project_path: "<strong>#{current_user.username} / #{current_user.username}</strong>".html_safe, help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
@@ -45,7 +49,7 @@
     = s_('ProjectsNew|Project description %{tag_start}(optional)%{tag_end}').html_safe % { tag_start: '<span>'.html_safe, tag_end: '</span>'.html_safe }
   = f.text_area :description, placeholder: s_('ProjectsNew|Description format'), class: "form-control gl-form-input", rows: 3, maxlength: 250, data: { qa_selector: 'project_description', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_description", track_value: "" }
 
-- unless Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers?
+- unless Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers? || !Gitlab.com?
   .js-deployment-target-select
 
 = f.label :visibility_level, class: 'label-bold' do
@@ -64,15 +68,14 @@
       .form-text.text-muted
         = s_('ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.')
 
-  - experiment(:new_project_sast_enabled, user: current_user) do |e|
-    - e.variant(:candidate) do
-      = render 'new_project_initialize_with_sast', experiment_name: e.name, track_label: track_label, checked: true, with_free_badge: false
-    - e.variant(:unchecked_candidate) do
-      = render 'new_project_initialize_with_sast', experiment_name: e.name, track_label: track_label, checked: false, with_free_badge: false
-    - e.variant(:free_indicator) do
-      = render 'new_project_initialize_with_sast', experiment_name: e.name, track_label: track_label, checked: true, with_free_badge: true
-    - e.variant(:unchecked_free_indicator) do
-      = render 'new_project_initialize_with_sast', experiment_name: e.name, track_label: track_label, checked: false, with_free_badge: true
+  .form-group
+    .form-check.gl-mb-3
+      = check_box_tag 'project[initialize_with_sast]', '1', false, class: 'form-check-input', data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' }
+      = label_tag 'project[initialize_with_sast]', class: 'form-check-label' do
+        = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
+      .form-text.text-muted
+        = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
+        = link_to _('Learn more.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed' }
 
-= f.submit _('Create project'), class: "btn gl-button btn-confirm", data: { qa_selector: 'project_create_button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }
+= f.submit _('Create project'), class: "btn gl-button btn-confirm js-create-project-button", data: { qa_selector: 'project_create_button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }
 = link_to _('Cancel'), dashboard_projects_path, class: 'btn gl-button btn-default btn-cancel', data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
diff --git a/app/views/projects/_new_project_initialize_with_sast.html.haml b/app/views/projects/_new_project_initialize_with_sast.html.haml
deleted file mode 100644
index ec12abbf789..00000000000
--- a/app/views/projects/_new_project_initialize_with_sast.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- experiment_name = local_assigns.fetch(:experiment_name)
-- track_label = local_assigns.fetch(:track_label)
-
-- with_free_badge = local_assigns.fetch(:with_free_badge, false)
-- checked = local_assigns.fetch(:checked, false)
-
-.form-group
-  .form-check.gl-mb-3
-    = check_box_tag 'project[initialize_with_sast]', '1', checked, class: 'form-check-input', data: { qa_selector: 'initialize_with_sast_checkbox', track_experiment: experiment_name, track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' }
-    = label_tag 'project[initialize_with_sast]', class: 'form-check-label' do
-      = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
-      - if with_free_badge
-        = gl_badge_tag _('Free'), variant: :info, size: :sm
-    .form-text.text-muted
-      = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
-      = link_to _('Learn more.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed', track_experiment: experiment_name }
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index 9f9daa7ec6f..9e6648c71fc 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -9,6 +9,11 @@
     .form-group
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'transferring-an-existing-project-into-another-namespace') }
       %p= _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      %p= _('When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, pipeline minutes, and users, and start a trial or upgrade to a paid tier.')
+      %p
+        = _("Don't have a group?")
+        = link_to _('Create one'), new_group_path, target: '_blank'
+      = _('Things to be aware of before transferring:')
       %ul
         %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
         %li= _('You can only transfer the project to namespaces you manage.')
diff --git a/app/views/projects/alert_management/details.html.haml b/app/views/projects/alert_management/details.html.haml
index b1d680e4f3d..66bbed8c5ec 100644
--- a/app/views/projects/alert_management/details.html.haml
+++ b/app/views/projects/alert_management/details.html.haml
@@ -2,4 +2,4 @@
 - page_title s_('AlertManagement|Alert detail')
 - add_page_specific_style 'page_bundles/alert_management_details'
 
-#js-alert_details{ data: alert_management_detail_data(@project, @alert_id) }
+#js-alert_details{ data: alert_management_detail_data(current_user, @project, @alert_id) }
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index ae8f89bf16a..7f72438c3f9 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -22,7 +22,7 @@
 
     .table-responsive.file-content.blame.code{ class: user_color_scheme }
       %table
-        - current_line = 1
+        - current_line = @blame.first_line
         - @blame.groups.each do |blame_group|
           - commit_data = @blame.commit_data(blame_group[:commit])
           - line_count = blame_group[:lines].count
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 1d3bec1ad44..629fa9c0e8a 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -15,7 +15,9 @@
                 #{ dropzone_text.html_safe }
 
           %br
-          .dropzone-alerts.gl-alert.gl-alert-danger.gl-mb-5.data{ style: "display:none" }
+          = render Pajamas::AlertComponent.new(variant: :danger,
+            alert_class: 'dropzone-alerts gl-alert gl-alert-danger gl-mb-5 data gl-display-none',
+            dismissible: false)
 
           = render 'shared/new_commit_form', placeholder: placeholder, ref: local_assigns[:ref]
 
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 773137ff3f2..aefa4a41ab5 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -4,10 +4,9 @@
   - webpack_preload_asset_tag('monaco')
 
 - if @conflict
-  = render 'shared/global_alert',
-    alert_class: 'gl-mb-5 gl-mt-5',
+  = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5 gl-mt-5',
     variant: :danger,
-    dismissible: false do
+    dismissible: false) do
     - blob_url = project_blob_path(@project, @id)
     - external_link_icon = content_tag 'span', { aria: { label: _('Opens new window') }} do
       - sprite_icon('external-link', css_class: 'gl-icon').html_safe
diff --git a/app/views/projects/blob/viewers/_balsamiq.html.haml b/app/views/projects/blob/viewers/_balsamiq.html.haml
deleted file mode 100644
index b20106e8c3a..00000000000
--- a/app/views/projects/blob/viewers/_balsamiq.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_path } }
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index f5e61c010cc..e4ec7a43d61 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -7,6 +7,7 @@
       = 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
         = 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' }
       - elsif merged
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index f03b5cf2eff..bd6831ff3b2 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,7 +7,7 @@
 
 - return unless branches.any?
 
-.card.gl-mt-3
+.card
   .card-header
     = panel_title
   %ul.content-list.all-branches.qa-all-branches
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 96acd863a4c..85a0346e691 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -27,11 +27,6 @@
 = render_if_exists 'projects/commits/mirror_status'
 
 .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json), default_branch: @project.default_branch } }
-- if can?(current_user, :admin_project, @project)
-  - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
-  .row-content-block
-    %h5
-      = s_('Branches|Protected branches can be managed in %{project_settings_link}.').html_safe % { project_settings_link: project_settings_link }
 
 - if @gitaly_unavailable
   = render 'shared/errors/gitaly_unavailable', reason: s_('Branches|Unable to load branches')
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 5cc83111b34..07bae7819a4 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,9 +2,7 @@
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
-  = render 'shared/global_alert',
-    variant: :danger,
-    close_button_class: 'js-close' do
+  = render Pajamas::AlertComponent.new(variant: :danger) do
     .gl-alert-body
       = @error
 %h3.page-title
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index a3343aa4228..23572d1d6ac 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -47,9 +47,7 @@
 
   - if can?(current_user, :read_pipeline, @last_pipeline)
     .well-segment.pipeline-info
-      .status-icon-container
-        = link_to project_pipeline_path(@project, @last_pipeline.id), class: "ci-status-icon-#{@last_pipeline.status}" do
-          = ci_icon_for_status(@last_pipeline.status)
+      .js-commit-pipeline-status{ data: { full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
       #{ _('Pipeline') }
       = link_to "##{@last_pipeline.id}", project_pipeline_path(@project, @last_pipeline.id)
       = ci_label_for_status(@last_pipeline.status)
@@ -57,7 +55,7 @@
         #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), @last_pipeline.stages_count) }
         .mr-widget-pipeline-graph
           .stage-cell
-            .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe, full_path: @project.full_path, iid: @last_pipeline.iid } }
+            .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe, full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
       - if @last_pipeline.duration
         in
         = time_interval_in_words @last_pipeline.duration
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index e22d33e3c72..c26f24dd52c 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -16,6 +16,7 @@
     diffs: @diffs,
     environment: @environment,
     diff_page_context: "is-commit",
+    page: pagination_params[:page],
     paginate_diffs: true,
     paginate_diffs_per_page: Projects::CommitController::COMMIT_DIFFS_PER_PAGE
 
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 02b5fe00ad0..82d3bfbcfe6 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -35,9 +35,8 @@
 
 - if hidden > 0
   %li
-    = render 'shared/global_alert',
-      variant: :warning,
-      dismissible: false do
+    = render Pajamas::AlertComponent.new(variant: :warning,
+      dismissible: false) do
       .gl-alert-body
         = 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)
 
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 36641a8c508..e5be3a897a5 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -20,7 +20,7 @@
             = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn gl-button'
         - elsif create_mr_button?(from: @repository.root_ref, to: @ref, source_project: @project, target_project: @project)
           .control.d-none.d-md-block
-            = link_to _("Create merge request"), create_mr_path(from: @repository.root_ref, to: @ref, source_project: @project, target_project: @project), class: 'btn gl-button btn-success'
+            = link_to _("Create merge request"), create_mr_path(from: @repository.root_ref, to: @ref, source_project: @project, target_project: @project), class: 'btn gl-button btn-confirm'
 
         .control
           = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 1fc067b6be1..cb2c2d488e8 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -13,6 +13,7 @@
     diffs: @diffs,
     environment: @environment,
     diff_page_context: "is-compare",
+    page: pagination_params[:page],
     paginate_diffs: true,
     paginate_diffs_per_page: Projects::CompareController::COMMIT_DIFFS_PER_PAGE
 - else
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index f0214ade313..263b0025fe8 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -3,7 +3,7 @@
 %hr
 
 %div
-  = form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
+  = gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
     = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
     .form-actions
       = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index bb2682bb7c0..6f4ffecd5e0 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -5,7 +5,8 @@
 - load_diff_files_async = Feature.enabled?(:async_commit_diff_files, @project) && diff_page_context == "is-commit"
 - paginate_diffs = local_assigns.fetch(:paginate_diffs, false) && !load_diff_files_async
 - paginate_diffs_per_page = local_assigns.fetch(:paginate_diffs_per_page, nil)
-- diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs, per: paginate_diffs_per_page)
+- page = local_assigns.fetch(:page, nil)
+- diff_files = conditionally_paginate_diff_files(diffs, paginate: paginate_diffs, page: page, per: paginate_diffs_per_page)
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
   .files-changed-inner
@@ -24,10 +25,10 @@
       .btn-group.gl-ml-3
         = inline_diff_btn
         = parallel_diff_btn
-    = render 'projects/diffs/stats', diff_files: diff_files
+    = render Diffs::StatsComponent.new(diff_files: diff_files)
 
 - if render_overflow_warning?(diffs)
-  = render 'projects/diffs/warning', diff_files: diffs
+  = render Diffs::OverflowWarningComponent.new(diffs: diffs, diff_files: diff_files, project: @project, commit: @commit, merge_request: @merge_request)
 
 .files{ data: { can_create_note: can_create_note } }
   - if load_diff_files_async
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 0638481d968..64bd1bf32f0 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -15,6 +15,7 @@
 
     - unless diff_file.submodule?
       .file-actions.gl-display-none.gl-sm-display-flex
+        #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
           %span.has-tooltip{ title: _("Toggle comments for this file") }
             = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do
diff --git a/app/views/projects/diffs/_line.html.haml b/app/views/projects/diffs/_line.html.haml
index a5d3328b439..dd5114e3cec 100644
--- a/app/views/projects/diffs/_line.html.haml
+++ b/app/views/projects/diffs/_line.html.haml
@@ -10,6 +10,8 @@
   - case line.type
   - when 'match'
     = diff_match_line line.old_pos, line.new_pos, text: line.text
+  - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+    = diff_nomappinginraw_line line, %w[old_line diff-line-num], %w[new_line diff-line-num], %w[line_content]
   - when 'old-nonewline', 'new-nonewline'
     %td.old_line.diff-line-num
     %td.new_line.diff-line-num
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index ebe3aad064a..03fe3e6edf5 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -11,6 +11,8 @@
           - case left.type
           - when 'match'
             = diff_match_line left.old_pos, nil, text: left.text, view: :parallel
+          - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+            = diff_nomappinginraw_line left, %w[old_line diff-line-num], nil, %w[line_content parallel left-side]
           - when 'old-nonewline', 'new-nonewline'
             %td.old_line.diff-line-num
             %td.line_content.match.left-side= left.text
@@ -29,6 +31,8 @@
           - case right.type
           - when 'match'
             = diff_match_line nil, right.new_pos, text: left.text, view: :parallel
+          - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+            = diff_nomappinginraw_line right, %w[new_line diff-line-num], nil, %w[line_content parallel right-side]
           - when 'old-nonewline', 'new-nonewline'
             %td.new_line.diff-line-num
             %td.line_content.match.right-side= right.text
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
deleted file mode 100644
index fe9658a440a..00000000000
--- a/app/views/projects/diffs/_stats.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-.js-diff-stats-dropdown{ data: { changed: diff_files.size, added: diff_files.sum(&:added_lines), deleted: diff_files.sum(&:removed_lines), files: diff_files_data(diff_files) } }
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index 6e7e0244721..2cd215c5518 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -12,6 +12,8 @@
         - case line.type
         - when 'match'
           = diff_match_line line.old_pos, line.new_pos, text: line.text
+        - when 'old-nomappinginraw', 'new-nomappinginraw', 'unchanged-nomappinginraw'
+          = diff_nomappinginraw_line line, %w[old_line diff-line-num], %w[new_line diff-line-num], %w[line_content]
         - when 'old-nonewline', 'new-nonewline'
           %td.old_line.diff-line-num
           %td.new_line.diff-line-num
diff --git a/app/views/projects/diffs/_warning.html.haml b/app/views/projects/diffs/_warning.html.haml
deleted file mode 100644
index 3d31773694f..00000000000
--- a/app/views/projects/diffs/_warning.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-= render 'shared/global_alert',
-  title: _('Too many changes to show.'),
-  variant: :warning,
-  alert_class: 'gl-mb-5' do
-  .gl-alert-body
-    = html_escape(_("To preserve performance only %{strong_open}%{display_size} of %{real_size}%{strong_close} files are displayed.")) % { display_size: diff_files.size, real_size: diff_files.real_size, strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-  .gl-alert-actions
-    - if current_controller?(:commit)
-      = link_to _("Plain diff"), project_commit_path(@project, @commit, format: :diff), class: "btn gl-alert-action btn-default gl-button btn-default-secondary"
-      = link_to _("Email patch"), project_commit_path(@project, @commit, format: :patch), class: "btn gl-alert-action btn-default gl-button btn-default-secondary"
-    - elsif current_controller?('projects/merge_requests/diffs') && @merge_request&.persisted?
-      = link_to _("Plain diff"), merge_request_path(@merge_request, format: :diff), class: "btn gl-alert-action btn-default gl-button btn-default-secondary"
-      = link_to _("Email patch"), merge_request_path(@merge_request, format: :patch), class: "btn gl-alert-action btn-default gl-button btn-default-secondary"
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 1609d81c0fd..92dbde07709 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -5,6 +5,8 @@
 - expanded = expanded_by_default?
 - reduce_visibility_form_id = 'reduce-visibility-form'
 
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
+
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
@@ -33,7 +35,7 @@
   .settings-content
     = render_if_exists 'shared/promotions/promote_mr_features'
 
-    = form_for @project, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
+    = gitlab_ui_form_for @project, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
       = f.submit _('Save changes'), class: "btn gl-button btn-confirm rspec-save-merge-request-changes", data: { qa_selector: 'save_merge_request_changes_button' }
@@ -98,7 +100,7 @@
                 .input-group-text
                   #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
               = f.text_field :path, class: 'form-control h-auto', data: { qa_selector: 'project_path_field' }
-        = f.submit _('Change path'), class: "gl-button btn btn-warning", data: { qa_selector: 'change_path_button' }
+        = f.submit _('Change path'), class: "gl-button btn btn-danger", data: { qa_selector: 'change_path_button' }
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 6a54eedf6c8..b2338fa6c55 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -3,6 +3,7 @@
 - escaped_default_branch_name = default_branch_name.shellescape
 - @skip_current_level_breadcrumb = true
 
+= render_if_exists 'shared/user_over_limit_free_plan_alert', source: @project
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "home_panel"
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 7933e0e07b3..9b64f158a1b 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -1,10 +1,9 @@
 - page_title _("Fork project")
 - if @forked_project && !@forked_project.saved?
-  = render 'shared/global_alert',
-    title: _('Fork Error!'),
+  = render Pajamas::AlertComponent.new(title: _('Fork Error!'),
     variant: :danger,
     alert_class: 'gl-mt-5',
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       %p
         = _("You tried to fork %{link_to_the_project} but it failed for the following reason:").html_safe % { link_to_the_project: link_to_project(@project) }
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 5330c3aa6d6..905c5779c7d 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -1,5 +1,7 @@
 - sort_value = @sort || sort_value_recently_created
-- sort_title = forks_sort_options_hash[sort_value]
+- excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
+- created_at = { value: sort_value_created_date, text: sort_title_created_date, href: page_filter_path(sort: sort_value_recently_created, without: excluded_filters) }
+- activity = { value: sort_value_latest_activity, text: sort_title_latest_activity, href: page_filter_path(sort: sort_value_latest_activity, without: excluded_filters) }
 
 .top-area
   .nav-text
@@ -14,14 +16,7 @@
     .dropdown.gl-display-inline.gl-md-ml-3.issue-sort-dropdown.gl-mt-3.gl-md-mt-0
       .btn-group{ role: 'group' }
         .btn-group{ role: 'group' }
-          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
-            = sort_title
-            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-            %li
-              - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
-              = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_recently_created, without: excluded_filters), sort_title)
-              = sortable_item(sort_title_latest_activity, page_filter_path(sort: sort_value_latest_activity, without: excluded_filters), sort_title)
+          = gl_redirect_listbox_tag [created_at, activity], @sort
         = forks_sort_direction_button(sort_value)
 
     - if current_user && can?(current_user, :fork_project, @project)
diff --git a/app/views/projects/harbor/repositories/index.html.haml b/app/views/projects/harbor/repositories/index.html.haml
index b3f5b91596d..270cbf3facd 100644
--- a/app/views/projects/harbor/repositories/index.html.haml
+++ b/app/views/projects/harbor/repositories/index.html.haml
@@ -4,6 +4,8 @@
 #js-harbor-registry-list-project{ data: { endpoint: project_harbor_registry_index_path(@project),
   "no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
   "containers_error_image" => image_path('illustrations/docker-error-state.svg'),
-  "help_page_path" => help_page_path('user/packages/container_registry/index'),
+  "repository_url" => 'demo.harbor.com/gitlab-cn/build/cng-images/gitlab-kas',
+  "registry_host_url_with_port" => 'demo.harbor.com',
   connection_error: (!!@connection_error).to_s,
-  invalid_path_error: (!!@invalid_path_error).to_s, } }
+  invalid_path_error: (!!@invalid_path_error).to_s,
+  is_group_page: false.to_s, } }
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index 4df109dbb61..74af65904cd 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
-    = 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) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 
       = f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mr-3'
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 5ca65d55eea..7d62a851aa1 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -7,7 +7,7 @@
     = render 'shared/web_hooks/title_and_docs', hook: @hook
 
   .col-lg-8.gl-mb-3
-    = form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]) do |f|
+    = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
       = f.submit 'Add webhook', class: 'gl-button btn btn-confirm'
 
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index b021087c394..dc2bcfa33bb 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -12,7 +12,7 @@
         :preserve
           #{h(@project.import_state.last_error)}
 
-= form_for @project, url: project_import_path(@project), method: :post, html: { class: 'js-project-import' } do |f|
+= gitlab_ui_form_for @project, url: project_import_path(@project), method: :post, html: { class: 'js-project-import' } do |f|
   = render "shared/import_form", f: f
 
   .form-actions
diff --git a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
index 26bd65fbe26..f28b951ad62 100644
--- a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
+++ b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
@@ -2,9 +2,7 @@
 - service_desk_link_url = help_page_path('user/project/service_desk')
 - service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
 
-= render 'shared/global_alert',
-  variant: :warning,
-  close_button_class: 'js-close',
-  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5' do
+= render Pajamas::AlertComponent.new(variant: :warning,
+  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do
   .gl-alert-body.gl-mr-3
     = s_('This project does not have %{service_desk_link_start}Service Desk%{service_desk_link_end} enabled, so the user who created the issue will no longer receive email notifications about new activity.').html_safe % { service_desk_link_start: service_desk_link_start, service_desk_link_end: '</a>'.html_safe }
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index 34e46807fb6..11741059ee5 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -1,3 +1,3 @@
-= form_for [@project, @issue],
-  html: { class: 'issue-form common-note-form gl-mt-3 js-quick-submit gl-show-field-errors' } do |f|
+= gitlab_ui_form_for [@project, @issue],
+  html: { class: 'issue-form common-note-form gl-mt-3 js-quick-submit gl-show-field-errors', data: issues_form_data(@project) } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index f6ed6c26752..801841edc26 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -13,13 +13,13 @@
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.unavailable
       %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
-        .gl-spinner.align-text-bottom.gl-button-icon.hide
+        = gl_loading_icon(inline: true, css_class: 'js-create-mr-spinner gl-button-icon gl-display-none')
         %span.text
           Checking branch availability…
 
     .btn-group.available.hidden
       %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        .gl-spinner.js-spinner.gl-mr-2.gl-display-none
+        = gl_loading_icon(css_class: 'js-create-mr-spinner js-spinner gl-mr-2 gl-display-none')
         = value
 
       %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
@@ -55,12 +55,12 @@
               %label{ for: 'source-name' }
                 = _('Source (branch or tag)')
               %input#source-name.js-ref.ref.form-control.gl-form-input{ type: 'text', placeholder: "#{@project.default_branch}", value: "#{@project.default_branch}", data: { value: "#{@project.default_branch}" } }
-              %span.js-ref-message.form-text.text-muted
+              %span.js-ref-message.form-text
 
             .form-group
               %button.btn.gl-button.btn-confirm.js-create-target{ type: 'button', data: { action: 'create-mr' } }
                 = create_mr_text
 
             - if can_create_confidential_merge_request?
-              %p.text-warning.js-exposed-info-warning.hidden
+              %p.gl-text-orange-500.js-exposed-info-warning.gl-display-none
                 = _('This may expose confidential information as the selected fork is in another namespace that can have other members.')
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index c58c6ab8287..9a2a1e57165 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -1,9 +1,11 @@
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
+
 - page_title _("Jobs")
 - add_page_specific_style 'page_bundles/ci_status'
 - admin = local_assigns.fetch(:admin, false)
 
 - if Feature.enabled?(:jobs_table_vue, @project, default_enabled: :yaml)
-  #js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_counts: job_counts.to_json, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
+  #js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
 - else
   .top-area
     - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
index 1efec0c017c..3d901c6f59b 100644
--- a/app/views/projects/mattermosts/_no_teams.html.haml
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -1,8 +1,8 @@
 - if @teams_error_message
   = content_for :flash_message do
-    .gl-alert.gl-alert-danger
-      = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-      .gl-alert-body= @teams_error_message
+    = render Pajamas::AlertComponent.new(variant: :danger) do
+      .gl-alert-body
+        = @teams_error_message
 
 %p
   You aren’t a member of any team on the Mattermost instance at
diff --git a/app/views/projects/merge_requests/_form.html.haml b/app/views/projects/merge_requests/_form.html.haml
index a68a4318538..5f1c72156eb 100644
--- a/app/views/projects/merge_requests/_form.html.haml
+++ b/app/views/projects/merge_requests/_form.html.haml
@@ -1,3 +1,3 @@
-= form_for [@project, @merge_request],
+= gitlab_ui_form_for [@project, @merge_request],
            html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request, presenter: @mr_presenter
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index d894aeaad65..49b7320d630 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -6,10 +6,9 @@
 
 = cache(cache_key, expires_in: 1.day) do
   - if @merge_request.closed_or_merged_without_fork?
-    = render 'shared/global_alert',
-      alert_class: 'gl-mb-5',
+    = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5',
       variant: :danger,
-      dismissible: false do
+      dismissible: false) do
       .gl-alert-body
         = _('The source project of this merge request has been removed.')
 
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 253f50d5090..ef6e930bf23 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -1,6 +1,6 @@
 %h3.page-title
   = _('New merge request')
-= form_for [@project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
+= gitlab_ui_form_for [@project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits, presenter: @mr_presenter
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index aa68fe031bb..ce5a042fbf8 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -9,9 +9,8 @@
   = render "projects/merge_requests/mr_title"
   = render "projects/merge_requests/mr_box"
 
-  = render 'shared/global_alert',
-    variant: :danger,
-    dismissible: false do
+  = render Pajamas::AlertComponent.new(variant: :danger,
+    dismissible: false) do
     .gl-alert-body
       - if @merge_request.for_fork? && !@merge_request.source_project
         = err_fork_project_removed
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 059ef53c42b..154a92e6ec8 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -1,24 +1,36 @@
 - page_title _('Milestones')
 - add_page_specific_style 'page_bundles/milestone'
 
-.top-area
-  = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
+- if @milestone_states.any? { |name, count| count > 0 }
+  .top-area
+    = render 'shared/milestones_filter', counts: @milestone_states
 
-  .nav-controls
-    = render 'shared/milestones/search_form'
-    = render 'shared/milestones_sort_dropdown'
-    - if can?(current_user, :admin_milestone, @project)
-      = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
-        = _('New milestone')
+    .nav-controls
+      = render 'shared/milestones/search_form'
+      = render 'shared/milestones_sort_dropdown'
+      - if can?(current_user, :admin_milestone, @project)
+        = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+          = _('New milestone')
 
-- if @milestones.blank?
-  = render 'shared/empty_states/milestones'
-- else
-  .milestones
-    #js-delete-milestone-modal
-    #promote-milestone-modal
+  - if @milestones.blank?
+    = render 'shared/empty_states/milestones_tab' do
+      - if can?(current_user, :admin_milestone, @project)
+        .text-center
+          = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+            = _('New milestone')
+
+  - else
+    .milestones
+      #js-delete-milestone-modal
+      #promote-milestone-modal
 
-    %ul.content-list
-      = render @milestones
+      %ul.content-list
+        = render @milestones
 
-    = paginate @milestones, theme: 'gitlab'
+      = paginate @milestones, theme: 'gitlab'
+- else
+  = render 'shared/empty_states/milestones' do
+    - if can?(current_user, :admin_milestone, @project)
+      .text-center
+        = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-confirm', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
+          = _('New milestone')
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 225f8c7dd66..13aa8f56d20 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -12,11 +12,9 @@
 = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count == 0
-  = render 'shared/global_alert',
-    variant: :info,
-    dismissible: false,
+  = render Pajamas::AlertComponent.new(dismissible: false,
     alert_data: { testid: 'no-issues-alert' },
-    alert_class: 'gl-mt-3 gl-mb-5' do
+    alert_class: 'gl-mt-3 gl-mb-5') do
     .gl-alert-body
       = _('Assign some issues to this milestone.')
 - else
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 3af95633214..bc8400a63f9 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -14,7 +14,7 @@
 
   .settings-content
     - if mirror_settings_enabled
-      = form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
+      = gitlab_ui_form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
         .panel.panel-default
           .panel-body
             %div= form_errors(@project)
@@ -37,9 +37,7 @@
           .panel-footer
             = f.submit _('Mirror repository'), class: 'gl-button btn btn-confirm js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
     - else
-      = render 'shared/global_alert',
-        dismissible: false,
-        variant: :info do
+      = render Pajamas::AlertComponent.new(dismissible: false) do
         .gl-alert-body
           = _('Mirror settings are only available to GitLab administrators.')
 
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 4411bc474b8..3abab0281a0 100644
--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -4,7 +4,7 @@
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
   %button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
-    .js-spinner.d-none.gl-spinner.mr-1
+    = gl_loading_icon(inline: true, css_class: 'js-spinner gl-display-none gl-mr-2')
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index e3f46d601a3..1331ed24307 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -1,6 +1,8 @@
 - page_title _('No repository')
 - @skip_current_level_breadcrumb = true
 
+= render_if_exists 'shared/user_over_limit_free_plan_alert', source: @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/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index 15fb5755b61..0010564081e 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -2,21 +2,20 @@
 - can_enforce_https_only=Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
 
 - return unless can_edit_max_page_size || can_enforce_https_only
-= form_for @project, url: project_pages_path(@project), html: { class: 'inline', title: pages_https_only_title } do |f|
+= gitlab_ui_form_for @project, url: project_pages_path(@project), html: { class: 'inline', title: pages_https_only_title } do |f|
   - if can_edit_max_page_size
     = render_if_exists 'shared/pages/max_pages_size_input', form: f
 
   - if can_enforce_https_only
     .form-group
-      .form-check
-        = f.check_box :pages_https_only, class: 'form-check-input', disabled: pages_https_only_disabled?
-        = f.label :pages_https_only, class: pages_https_only_label_class do
-          %strong
-            = s_('GitLabPages|Force HTTPS (requires valid certificates)')
-        - docs_link_start = "<a href='#{help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index', anchor: 'force-https-for-gitlab-pages-websites')}' target='_blank' rel='noopener noreferrer'>".html_safe
-        - link_end = '</a>'.html_safe
-        %p
-          = s_("GitLabPages|When enabled, all attempts to visit your website through HTTP are automatically redirected to HTTPS using a response with status code 301. Requires a valid certificate for all domains. %{docs_link_start}Learn more.%{link_end}").html_safe % { docs_link_start: docs_link_start, link_end: link_end }
+      = f.gitlab_ui_checkbox_component :pages_https_only,
+        s_('GitLabPages|Force HTTPS (requires valid certificates)'),
+        checkbox_options: { disabled: pages_https_only_disabled? },
+        label_options: { class: 'label-bold' }
+      - docs_link_start = "<a href='#{help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index', anchor: 'force-https-for-gitlab-pages-websites')}' target='_blank' rel='noopener noreferrer'>".html_safe
+      - link_end = '</a>'.html_safe
+      %p.gl-pl-6
+        = s_("GitLabPages|When enabled, all attempts to visit your website through HTTP are automatically redirected to HTTPS using a response with status code 301. Requires a valid certificate for all domains. %{docs_link_start}Learn more.%{link_end}").html_safe % { docs_link_start: docs_link_start, link_end: link_end }
 
   .gl-mt-3
     = f.submit s_('GitLabPages|Save changes'), class: 'btn btn-confirm gl-button'
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index 453134ce5ab..d3e2854ff19 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -1,6 +1,5 @@
 - if domain_presenter.errors.any?
-  .gl-alert.gl-alert-danger
-    = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
     - domain_presenter.errors.full_messages.each do |msg|
       = msg
 
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 0818c3d5cff..5ff0e2ccac3 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -1,4 +1,4 @@
-= form_for [@project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form pipeline-schedule-form" } do |f|
+= gitlab_ui_form_for [@project, @schedule], as: :schedule, html: { id: "new-pipeline-schedule-form", class: "js-pipeline-schedule-form pipeline-schedule-form" } do |f|
   = form_errors(@schedule)
   .form-group.row
     .col-md-9
@@ -15,7 +15,7 @@
       = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
   .form-group.row
     .col-md-9
-      = f.label :ref, Feature.enabled?(:pipeline_schedules_with_tags, default_enabled: :yaml) ? _('Target branch or tag') : _('Target branch'), class: 'label-bold'
+      = f.label :ref, _('Target branch or tag'), class: 'label-bold'
       %div{ data: { testid: 'schedule-target-ref' } }
         .js-target-ref-dropdown{ data: { project_id: @project.id, default_branch: @project.default_branch } }
       = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
@@ -37,8 +37,7 @@
     .col-md-9
       = f.label :active, s_('PipelineSchedules|Activated'), class: 'label-bold'
       %div
-        = f.check_box :active, required: false, value: @schedule.active?
-        = f.label :active, _('Active'), class: 'gl-font-weight-normal'
+        = f.gitlab_ui_checkbox_component :active, _('Active'), checkbox_options: { value: @schedule.active, required: false }
   .footer-block.row-content-block
     = f.submit _('Save pipeline schedule'), class: 'btn gl-button btn-confirm'
     = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn gl-button btn-default btn-cancel'
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index a56e8f7f5c7..10a49fbd779 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -1,3 +1,5 @@
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
+
 - breadcrumb_title _("Schedules")
 - page_title _("Pipeline Schedules")
 - add_page_specific_style 'page_bundles/pipeline_schedules'
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index f4b242ffc40..817cc6d6e6c 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -1,3 +1,5 @@
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
+
 - page_title _('Pipelines')
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index ba498352278..2b0a0fc1253 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -27,6 +27,8 @@
       = s_('You can also test your %{gitlab_ci_yml} in %{lint_link_start}CI Lint%{lint_link_end}').html_safe % { gitlab_ci_yml: '.gitlab-ci.yml', lint_link_start: lint_link_start, lint_link_end: '</a>'.html_safe }
 
   #js-pipeline-notification{ data: { deprecated_keywords_doc_path: help_page_path('ci/yaml/index.md', anchor: 'deprecated-keywords'), full_path: @project.full_path, pipeline_iid: @pipeline.iid } }
-  = render "projects/pipelines/with_tabs", pipeline: @pipeline, stages: @stages, pipeline_has_errors: pipeline_has_errors
-
+  - if Feature.enabled?(:pipeline_tabs_vue, @project, default_enabled: :yaml)
+    #js-pipeline-tabs{ data: js_pipeline_tabs_data(@project, @pipeline) }
+  - 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) } }
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index f97b9a2b02f..298c2074062 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,6 +1,8 @@
 - add_page_specific_style 'page_bundles/members'
 - page_title _("Members")
 
+= render_if_exists 'shared/user_over_limit_free_plan_alert', source: @project
+
 .row.gl-mt-3
   .col-lg-12
     - if can_invite_members_for_project?(@project)
diff --git a/app/views/projects/protected_branches/shared/_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
index c9e964b2984..6dd3b2e8d5e 100644
--- a/app/views/projects/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_protected_branch.html.haml
@@ -20,4 +20,4 @@
 
   - if can_admin_project
     %td
-      = link_to s_('ProtectedBranch|Unprotect'), [@project, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, class: "btn gl-button btn-warning"
+      = link_to s_('ProtectedBranch|Unprotect'), [@project, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, class: "btn gl-button btn-danger btn-sm"
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index aab5e9fca98..51f0b6319a1 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -19,7 +19,7 @@
     "project_path": @project.full_path,
     "gid_prefix": container_repository_gid_prefix,
     "is_admin": current_user&.admin.to_s,
-    "show_cleanup_policy_on_alert": show_cleanup_policy_on_alert(@project).to_s,
+    "show_cleanup_policy_link": show_cleanup_policy_link(@project).to_s,
     "cleanup_policies_settings_path": project_settings_packages_and_registries_path(@project),
     connection_error: (!!@connection_error).to_s,
     invalid_path_error: (!!@invalid_path_error).to_s,
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 5eaf6c9d22b..18803bdd8f3 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -8,7 +8,7 @@
         %span
           = "##{runner.id} (#{runner.short_sha})"
       - if runner.locked?
-        %span.has-tooltip{ title: _('Locked to current projects') }
+        %span.has-tooltip{ title: s_('Runners|Runner is locked and available for currently assigned projects only. Only administrators can change the assigned projects.') }
           = sprite_icon('lock')
     .gl-ml-2
       .btn-group.btn-group-sm
@@ -22,10 +22,10 @@
             = link_to resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: s_('Runners|Resume accepting jobs'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body' } do
               = sprite_icon('play')
           - if runner.belongs_to_one_project?
-            = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger'
+            = link_to _('Remove runner'), project_runner_path(@project, runner), aria: { label: _('Remove') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'btn gl-button btn-danger'
           - else
             - runner_project = @project.runner_projects.find_by(runner_id: runner) # rubocop: disable CodeReuse/ActiveRecord
-            = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger'
+            = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), aria: { label: _('Disable') }, data: { confirm: _("Are you sure?"), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'btn gl-button btn-danger'
         - elsif runner.project_type?
           = form_for [@project, @project.runner_projects.new] do |f|
             = f.hidden_field :runner_id, value: runner.id
diff --git a/app/views/projects/security/configuration/show.html.haml b/app/views/projects/security/configuration/show.html.haml
index df14bd09a4d..4b82f74d035 100644
--- a/app/views/projects/security/configuration/show.html.haml
+++ b/app/views/projects/security/configuration/show.html.haml
@@ -3,5 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 #js-security-configuration{ data: { **@configuration.to_html_data_attribute,
+  vulnerability_training_docs_path: vulnerability_training_docs_path,
   upgrade_path: security_upgrade_path,
   project_full_path: @project.full_path } }
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 7a47b504b7c..d1d9a220068 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -5,14 +5,13 @@
   -# When using integration.activate_disabled_reason[:trackers], it's potentially insecure to use the raw records
   -# when passed directly to the frontend. Only use specific fields that are needed for render.
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
-  = render 'shared/global_alert',
-    title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
+  = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false do
+    dismissible: false) do
     .gl-alert-body
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
-%h3.page-title
+%h2.gl-mb-4
   = integration.title
   - if integration.operating?
     = sprite_icon('check', css_class: 'gl-text-green-500')
diff --git a/app/views/projects/services/prometheus/_configuration_banner.html.haml b/app/views/projects/services/prometheus/_configuration_banner.html.haml
deleted file mode 100644
index a34aa22acbb..00000000000
--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ /dev/null
@@ -1,26 +0,0 @@
-%h4
-  = s_('PrometheusService|Prometheus cluster integration')
-
-- if integration.manual_configuration?
-  .info-well
-    = s_('PrometheusService|To use a Prometheus installed on a cluster, deactivate the manual configuration.')
-- else
-  .container-fluid
-    .row
-      - if integration.prometheus_available?
-        .col-sm-2
-          .svg-container
-            = image_tag 'illustrations/monitoring/getting_started.svg'
-        .col-sm-10
-          %p.text-success.gl-mt-3
-            = s_('PrometheusService|You have a cluster with the Prometheus integration enabled.')
-          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn gl-button'
-      - else
-        .col-sm-2
-          = image_tag 'illustrations/monitoring/loading.svg'
-        .col-sm-10
-          %p.gl-mt-3
-            = s_('PrometheusService|Configure GitLab to query a Prometheus installed in one of your clusters.')
-          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn gl-button btn-confirm'
-
-%hr
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml
index 9b3cb8893c4..f40d8638845 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/projects/services/prometheus/_help.html.haml
@@ -1,5 +1,6 @@
 - if @project
-  = render 'projects/services/prometheus/configuration_banner', project: @project, integration: integration
+  = render 'shared/prometheus_configuration_banner', project: @project, integration: integration, header_tag: :h4
+  %hr
 
 %h4.gl-mb-3
   = s_('PrometheusService|Manual configuration')
diff --git a/app/views/projects/services/prometheus/_top.html.haml b/app/views/projects/services/prometheus/_top.html.haml
index f7446273a80..52b29ea2e8f 100644
--- a/app/views/projects/services/prometheus/_top.html.haml
+++ b/app/views/projects/services/prometheus/_top.html.haml
@@ -2,8 +2,7 @@
 
 .row
   .col-lg-12
-    .gl-alert.gl-alert-info{ role: 'alert' }
-      = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    = render Pajamas::AlertComponent.new(dismissible: false) do
       .gl-alert-body
         = s_('AlertSettings|You can now set up alert endpoints for manually configured Prometheus instances in the Alerts section on the Operations settings page. Alert endpoint fields on this page have been deprecated.')
       .gl-alert-actions
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 12cb1c3574a..1b0294bc967 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -18,5 +18,5 @@
     %p= _("Archiving the project will make it entirely read-only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
     = link_to _('Archive project'), archive_project_path(@project),
       aria: { label: _('Archive project') },
-      data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'warning' },
-      method: :post, class: "gl-button btn btn-warning"
+      data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' },
+      method: :post, class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 43d34173af6..7783e83b88f 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -11,22 +11,19 @@
 
 .row
   .col-lg-12
-    = form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings') do |f|
+    = gitlab_ui_form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings') do |f|
       = form_errors(@project)
       %fieldset.builds-feature.js-auto-devops-settings
         .form-group
           = f.fields_for :auto_devops_attributes, @auto_devops do |form|
             .card.auto-devops-card
               .card-body
-                .form-check
-                  = form.check_box :enabled, class: 'form-check-input js-toggle-extra-settings', checked: auto_devops_enabled, data: { qa_selector: 'enable_autodevops_checkbox' }
-                  = form.label :enabled, class: 'form-check-label' do
-                    %strong= s_('CICD|Default to Auto DevOps pipeline')
-                    - if auto_devops_enabled
-                      = gl_badge_tag badge_for_auto_devops_scope(@project), { variant: :info }, { class: 'js-instance-default-badge'}
-                  .form-text.text-muted
-                    = s_('CICD|The Auto DevOps pipeline runs if no alternative CI configuration file is found.')
-                    = link_to _('Learn more.'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
+                - autodevops_help_link = link_to _('Learn more.'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
+                - auto_devops_badge = auto_devops_enabled ? (gl_badge_tag badge_for_auto_devops_scope(@project), { variant: :info }, { class: 'js-instance-default-badge gl-ml-3 gl-mt-n1'}) : ''
+                = form.gitlab_ui_checkbox_component :enabled,
+                  (s_('CICD|Default to Auto DevOps pipeline') + auto_devops_badge).html_safe,
+                  checkbox_options: { class: 'js-toggle-extra-settings', checked: auto_devops_enabled, data: { qa_selector: 'enable_autodevops_checkbox' } },
+                  help_text: (s_('CICD|The Auto DevOps pipeline runs if no alternative CI configuration file is found.') + ' ' + autodevops_help_link).html_safe
               .card-footer.js-extra-settings{ class: auto_devops_enabled || 'hidden' }
                 - if @project.all_clusters.empty?
                   %p.settings-message.text-center
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 66a1cbb4649..5ef56cda6d2 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,35 +1,28 @@
+- 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'
+
 .row.gl-mt-3
   .col-lg-12
-    = form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings') do |f|
+    = gitlab_ui_form_for @project, url: project_settings_ci_cd_path(@project, anchor: 'js-general-pipeline-settings') do |f|
       = form_errors(@project)
       %fieldset.builds-feature
         .form-group
-          .form-check
-            = f.check_box :public_builds, { class: 'form-check-input' }
-            = f.label :public_builds, class: 'form-check-label' do
-              %strong= _("Public pipelines")
-            .form-text.text-muted
-              = _("Allow public access to pipelines and job details, including output logs and artifacts.")
-              = 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'
+          = f.gitlab_ui_checkbox_component :public_builds,
+            _("Public pipelines"),
+            help_text: (_('Allow public access to pipelines and job details, including output logs and artifacts.') + ' ' + help_link_public_pipelines).html_safe
 
         .form-group
-          .form-check
-            = f.check_box :auto_cancel_pending_pipelines, { class: 'form-check-input' }, 'enabled', 'disabled'
-            = f.label :auto_cancel_pending_pipelines, class: 'form-check-label' do
-              %strong= _("Auto-cancel redundant pipelines")
-            .form-text.text-muted
-              = _("New pipelines cause older pending or running pipelines on the same branch to be cancelled.")
-              = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank', rel: 'noopener noreferrer'
+          = f.gitlab_ui_checkbox_component :auto_cancel_pending_pipelines,
+            _("Auto-cancel redundant pipelines"),
+            checked_value: 'enabled',
+            unchecked_value: 'disabled',
+            help_text: (_('New pipelines cause older pending or running pipelines on the same branch to be cancelled.') + ' ' + help_link_auto_canceling).html_safe
 
         .form-group
-          .form-check
-            = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
-              = form.check_box :forward_deployment_enabled, { class: 'form-check-input' }
-              = form.label :forward_deployment_enabled, class: 'form-check-label' do
-                %strong= _("Skip outdated deployment jobs")
-              .form-text.text-muted
-                = _("When a deployment job is successful, skip older deployment jobs that are still pending.")
-                = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'skip-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+          = 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-group
           = f.label :ci_config_path, _('CI/CD configuration file'), class: 'label-bold'
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index f342728feee..28cde994d00 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -1,3 +1,5 @@
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
+
 - @content_class = "limit-container-width" unless fluid_layout
 - page_title _("CI/CD Settings")
 - page_title _("CI/CD")
diff --git a/app/views/projects/settings/operations/_configuration_banner.html.haml b/app/views/projects/settings/operations/_configuration_banner.html.haml
deleted file mode 100644
index 9803ffc3c4e..00000000000
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-%b
-  = s_('PrometheusService|Prometheus cluster integration')
-
-- if service.manual_configuration?
-  .info-well.p-2.mt-2
-    = s_('PrometheusService|To use a Prometheus installed on a cluster, deactivate the manual configuration.')
-- else
-  .container-fluid
-    .row
-      - if service.prometheus_available?
-        .col-sm-2
-          .svg-container
-            = image_tag 'illustrations/monitoring/getting_started.svg'
-        .col-sm-10
-          %p.text-success.gl-mt-3
-            = s_('PrometheusService|You have a cluster with the Prometheus integration enabled.')
-          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'gl-button btn btn-default'
-      - else
-        .col-sm-2
-          = image_tag 'illustrations/monitoring/loading.svg'
-        .col-sm-10
-          %p.gl-mt-3
-            = s_('PrometheusService|Configure GitLab to query a Prometheus installed in one of your clusters.')
-          = link_to s_('PrometheusService|Manage clusters'), project_clusters_path(project), class: 'btn gl-button btn-confirm'
diff --git a/app/views/projects/settings/operations/_prometheus.html.haml b/app/views/projects/settings/operations/_prometheus.html.haml
index 1c7bcbbca0b..93281cc225b 100644
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/app/views/projects/settings/operations/_prometheus.html.haml
@@ -9,7 +9,7 @@
       = link_to _('More information'), help_page_path('user/project/integrations/prometheus'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     - if @project
-      = render 'projects/settings/operations/configuration_banner', project: @project, service: service
+      = render 'shared/prometheus_configuration_banner', project: @project, integration: service, header_tag: :b, info_well_classes: 'gl-p-3 gl-mt-3'
 
     %b.gl-mb-3
       = s_('PrometheusService|Manual configuration')
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 4e94c96fdde..9a31666c316 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -15,7 +15,7 @@
         = s_('Deprecations|Feature deprecation and removal')
       .gl-alert-body
         %p
-          = html_escape(s_('Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
+          = html_escape(s_('Deprecations|The metrics feature was deprecated in GitLab 14.7. The logs and tracing features were also deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
 
 = render 'projects/settings/operations/metrics_dashboard'
 = render 'projects/settings/operations/tracing'
diff --git a/app/views/projects/settings/packages_and_registries/show.html.haml b/app/views/projects/settings/packages_and_registries/show.html.haml
index 658b2f2e65c..378bb0f9306 100644
--- a/app/views/projects/settings/packages_and_registries/show.html.haml
+++ b/app/views/projects/settings/packages_and_registries/show.html.haml
@@ -11,5 +11,5 @@
     admin_settings_path: ci_cd_admin_application_settings_path(anchor: 'js-registry-settings'),
     enable_historic_entries: container_expiration_policies_historic_entry_enabled?.to_s,
     help_page_path: help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'cleanup-policy'),
-    show_cleanup_policy_on_alert: show_cleanup_policy_on_alert(@project).to_s,
+    show_cleanup_policy_link: show_cleanup_policy_link(@project).to_s,
     tags_regex_help_page_path: help_page_path('user/packages/container_registry/reduce_container_registry_storage', anchor: 'regex-pattern-examples') } }
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index d840ea01b89..1934f293b0f 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -6,6 +6,8 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_path(@project, rss_url_options), title: "#{@project.name} activity")
 
+= render_if_exists 'shared/user_over_limit_free_plan_alert', source: @project
+= render_if_exists 'shared/minute_limit_banner', namespace: @project
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "projects/last_push"
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 4a44ad2337f..a654d0a8863 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -29,9 +29,12 @@
 
     - else
       .nothing-here-block
-        = s_('TagsPage|Repository has no tags yet.')
-        %br
-        %small
-          = s_('TagsPage|Use git tag command to add a new one:')
+        - if @search.present?
+          = s_('TagsPage|Sorry, your filter produced no results.')
+        - else
+          = s_('TagsPage|Repository has no tags yet.')
           %br
-          %span.monospace git tag -a v1.4 -m 'version 1.4'
+          %small
+            = s_('TagsPage|Use git tag command to add a new one:')
+            %br
+            %span.monospace git tag -a v1.4 -m 'version 1.4'
diff --git a/app/views/projects/tracings/show.html.haml b/app/views/projects/tracings/show.html.haml
index a7a02ab917e..c9aac68b19d 100644
--- a/app/views/projects/tracings/show.html.haml
+++ b/app/views/projects/tracings/show.html.haml
@@ -14,7 +14,7 @@
         = s_('Deprecations|Feature deprecation and removal')
       .gl-alert-body
         %p
-          = html_escape(s_('Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
+          = html_escape(s_('Deprecations|The logs and tracing features were deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
 
 - if @project.tracing_external_url.present?
   %h3.page-title= _('Tracing')