Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

52 files changed, 242 insertions, 178 deletions

diff --git a/app/views/projects/_bitbucket_import_modal.html.haml b/app/views/projects/_bitbucket_import_modal.html.haml
deleted file mode 100644
index 1379a339feb..00000000000
--- a/app/views/projects/_bitbucket_import_modal.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-#bitbucket_import_modal.modal
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h3.modal-title Import projects from Bitbucket
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": "true" } ×
-      .modal-body
-        To enable importing projects from Bitbucket,
-        - if current_user.admin?
-          as administrator you need to configure
-        - else
-          ask your GitLab administrator to configure
-        = link_to 'OAuth integration', help_page_path("integration/bitbucket")
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 7e8daea5651..8e6cc6da65d 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -37,7 +37,7 @@
               = sprite_icon('admin')
           .gl-display-flex.gl-align-items-start.gl-mr-3
             - if @notification_setting
-              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id } }
+              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id, no_flip: 'true' } }
 
         .count-buttons.gl-display-flex.gl-align-items-flex-start
           = render 'projects/buttons/star'
@@ -71,11 +71,13 @@
     = render_if_exists "projects/home_mirror"
 
   - if @project.badges.present?
-    .project-badges.mb-2
+    .project-badges.mb-2{ data: { qa_selector: 'project_badges_content' } }
       - @project.badges.each do |badge|
-        %a.gl-mr-3{ href: badge.rendered_link_url(@project),
+        - badge_link_url = badge.rendered_link_url(@project)
+        %a.gl-mr-3{ href: badge_link_url,
           target: '_blank',
-          rel: 'noopener noreferrer' }>
+          rel: 'noopener noreferrer',
+          data: { qa_selector: 'badge_image_link', qa_link_url: badge_link_url } }>
           %img.project-badge{ src: badge.rendered_image_url(@project),
             'aria-hidden': true,
             alt: 'Project badge' }>
diff --git a/app/views/projects/_import_project_pane.html.haml b/app/views/projects/_import_project_pane.html.haml
index 63f09a065df..aca7b73267b 100644
--- a/app/views/projects/_import_project_pane.html.haml
+++ b/app/views/projects/_import_project_pane.html.haml
@@ -22,13 +22,11 @@
 
       - if bitbucket_import_enabled?
         %div
-          = link_to status_import_bitbucket_path, class: "gl-button btn-default btn import_bitbucket js-import-project-btn #{'how_to_import_link' unless bitbucket_import_configured?}",
-          data: { platform: 'bitbucket_cloud', **tracking_attrs_data(track_label, 'click_button', 'bitbucket_cloud') } do
+          = link_to status_import_bitbucket_path, 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')
             Bitbucket Cloud
-          - unless bitbucket_import_configured?
-            = render 'projects/bitbucket_import_modal'
       - if bitbucket_server_import_enabled?
         %div
           = link_to status_import_bitbucket_server_path, 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
@@ -82,7 +80,7 @@
 
 
   .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-    = form_for @project, html: { class: 'new_project gl-show-field-errors' } do |f|
+    = 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/_invite_groups_modal.html.haml b/app/views/projects/_invite_groups_modal.html.haml
new file mode 100644
index 00000000000..d16e87d1c26
--- /dev/null
+++ b/app/views/projects/_invite_groups_modal.html.haml
@@ -0,0 +1,3 @@
+- return unless can_admin_project_member?(project)
+
+.js-invite-groups-modal{ data: common_invite_group_modal_data(project, ProjectMember, 'true') }
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 6b25c5ddaef..4f9af40f711 100644
--- a/app/views/projects/_merge_request_merge_checks_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_checks_settings.html.haml
@@ -8,9 +8,7 @@
     = form.label :only_allow_merge_if_pipeline_succeeds, class: 'form-check-label' do
       = s_('ProjectSettings|Pipelines must succeed')
       .text-secondary
-        - configuring_pipelines_for_merge_requests_help_link_url = help_page_path('ci/pipelines/merge_request_pipelines.md', anchor: 'prerequisites')
-        - configuring_pipelines_for_merge_requests_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configuring_pipelines_for_merge_requests_help_link_url }
-        = s_('ProjectSettings|To enable this feature, configure pipelines. %{link_start}How to configure pipelines for merge requests?%{link_end}').html_safe % { link_start: configuring_pipelines_for_merge_requests_help_link_start, link_end: '</a>'.html_safe }
+        = s_("ProjectSettings|Merge requests can't be merged if the latest pipeline did not succeed or is still running.")
   .form-check.mb-2
     .gl-pl-6
       = form.check_box :allow_merge_on_skipped_pipeline, class: 'form-check-input'
diff --git a/app/views/projects/_merge_request_merge_commit_template.html.haml b/app/views/projects/_merge_request_merge_commit_template.html.haml
index 1c023ae6ceb..502014b7279 100644
--- a/app/views/projects/_merge_request_merge_commit_template.html.haml
+++ b/app/views/projects/_merge_request_merge_commit_template.html.haml
@@ -5,10 +5,10 @@
   %p.text-secondary
     = s_('ProjectSettings|The commit message used when merging, if the merge method creates a merge commit.')
   .mb-2
-    - default_merge_commit_template = "Merge branch '%{source_branch}' into '%{target_branch}'\n\n%{title}\n\n%{issues}\n\nSee merge request %{reference}"
-    = form.text_area :merge_commit_template, class: 'form-control gl-form-input', rows: 8, maxlength: 500, placeholder: default_merge_commit_template
+    = form.text_area :merge_commit_template_or_default, class: 'form-control gl-form-input', rows: 8, maxlength: Project::MAX_COMMIT_TEMPLATE_LENGTH, placeholder: s_('ProjectSettings|The default template will be applied on save.')
     %p.form-text.text-muted
-      = s_('ProjectSettings|Maximum 500 characters.')
+      = s_('ProjectSettings|Leave empty to use default template.')
+      = sprintf(s_('ProjectSettings|Maximum %{maxLength} characters.'), { maxLength: Project::MAX_COMMIT_TEMPLATE_LENGTH })
       - configure_the_merge_commit_message_help_link_url = help_page_path('user/project/merge_requests/commit_templates.md')
       - configure_the_merge_commit_message_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configure_the_merge_commit_message_help_link_url }
       = s_('ProjectSettings|%{link_start}What variables can I use?%{link_end}').html_safe % { link_start: configure_the_merge_commit_message_help_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
index b0e3bda2b4f..778586a592e 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -2,7 +2,9 @@
 
 .form-group
   %b= s_('ProjectSettings|Merge method')
-  %p.text-secondary= s_('ProjectSettings|Determine what happens to the commit history when you merge a merge request.')
+  %p.text-secondary
+    = s_('ProjectSettings|Determine what happens to the commit history when you merge a merge request.')
+    = link_to s_('ProjectSettings|Learn about commit history.'), help_page_path('user/project/merge_requests/commits.md'), target: '_blank', rel: 'noopener noreferrer'
   .form-check.mb-2
     = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
     = label_tag :project_merge_method_merge, class: 'form-check-label' do
@@ -33,4 +35,4 @@
         = s_('ProjectSettings|When there is a merge conflict, the user is given the option to rebase.')
         %div
           = s_('ProjectSettings|If merge trains are enabled, merging is only possible if the branch can be rebased without conflicts.')
-          = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/merge_trains.md', anchor: 'enable-merge-trains'), target: '_blank', rel: 'noopener noreferrer'
+          = link_to s_('ProjectSettings|What are merge trains?'), help_page_path('ci/pipelines/merge_trains.md', anchor: 'enable-merge-trains'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
index 9ed21593203..eb2fc05686c 100644
--- a/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_suggestions_settings.html.haml
@@ -7,6 +7,8 @@
   .mb-2
     = form.text_field :suggestion_commit_message, class: 'form-control mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
     %p.form-text.text-muted
+      = s_('ProjectSettings|Leave empty to use default template.')
+      = sprintf(s_('ProjectSettings|Maximum %{maxLength} characters.'), { maxLength: Project::MAX_SUGGESTIONS_TEMPLATE_LENGTH })
       - configure_the_commit_message_for_applied_suggestions_help_link_url = help_page_path('user/project/merge_requests/reviews/suggestions.md', anchor: 'configure-the-commit-message-for-applied-suggestions')
       - configure_the_commit_message_for_applied_suggestions_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configure_the_commit_message_for_applied_suggestions_help_link_url }
       = s_('ProjectSettings|%{link_start}What variables can I use?%{link_end}').html_safe % { link_start: configure_the_commit_message_for_applied_suggestions_help_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/projects/_merge_request_squash_commit_template.html.haml b/app/views/projects/_merge_request_squash_commit_template.html.haml
index be1d78154c6..4d1b89bea83 100644
--- a/app/views/projects/_merge_request_squash_commit_template.html.haml
+++ b/app/views/projects/_merge_request_squash_commit_template.html.haml
@@ -5,9 +5,10 @@
   %p.text-secondary
     = s_('ProjectSettings|The commit message used when squashing commits.')
   .mb-2
-    = form.text_area :squash_commit_template, class: 'form-control gl-form-input', rows: 8, maxlength: 500, placeholder: '%{title}'
+    = form.text_area :squash_commit_template_or_default, class: 'form-control gl-form-input', rows: 8, maxlength: Project::MAX_COMMIT_TEMPLATE_LENGTH, placeholder: s_('ProjectSettings|The default template will be applied on save.')
     %p.form-text.text-muted
-      = s_('ProjectSettings|Maximum 500 characters.')
+      = s_('ProjectSettings|Leave empty to use default template.')
+      = sprintf(s_('ProjectSettings|Maximum %{maxLength} characters.'), { maxLength: Project::MAX_COMMIT_TEMPLATE_LENGTH })
       - configure_the_squash_commit_message_help_link_url = help_page_path('user/project/merge_requests/commit_templates.md')
       - configure_the_squash_commit_message_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: configure_the_squash_commit_message_help_link_url }
       = s_('ProjectSettings|%{link_start}What variables can I use?%{link_end}').html_safe % { link_start: configure_the_squash_commit_message_help_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 0b5da84e4e3..966587a9210 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -46,6 +46,8 @@
     = 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: { track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_description", track_value: "" }
 
+.js-deployment-target-select
+
 = f.label :visibility_level, class: 'label-bold' do
   = s_('ProjectsNew|Visibility Level')
   = link_to sprite_icon('question-o'), help_page_path('public_access/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
@@ -63,44 +65,14 @@
         = 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.try(:candidate) do
-      .form-group
-        .form-check.gl-mb-3
-          = check_box_tag 'project[initialize_with_sast]', '1', true, class: 'form-check-input', data: { qa_selector: 'initialize_with_sast_checkbox', track_experiment: e.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)')
-          .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: e.name }
-    - e.try(:unchecked_candidate) do
-      .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_experiment: e.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)')
-          .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: e.name }
-    - e.try(:free_indicator) do
-      .form-group
-        .form-check.gl-mb-3
-          = check_box_tag 'project[initialize_with_sast]', '1', true, class: 'form-check-input', data: { qa_selector: 'initialize_with_sast_checkbox', track_experiment: e.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)')
-            = 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: e.name }
-    - e.try(:unchecked_free_indicator) do
-      .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_experiment: e.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)')
-            = 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: e.name }
+    - 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
 
 = f.submit _('Create project'), class: "btn gl-button btn-confirm", data: { 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
new file mode 100644
index 00000000000..ec12abbf789
--- /dev/null
+++ b/app/views/projects/_new_project_initialize_with_sast.html.haml
@@ -0,0 +1,16 @@
+- 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/_remove.html.haml b/app/views/projects/_remove.html.haml
index 815e76ebcb9..d0dfbb89ca7 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -1,6 +1,7 @@
 - return unless can?(current_user, :remove_project, project)
 - merge_requests_count = Projects::AllMergeRequestsCountService.new(project).count
 - issues_count = Projects::AllIssuesCountService.new(project).count
+- forks_count = Projects::ForksCountService.new(project).count
 
 .sub-section
   %h4.danger-title= _('Delete project')
@@ -9,4 +10,4 @@
     = link_to _('Learn more.'), help_page_path('user/project/settings/index', anchor: 'removing-a-fork-relationship'), target: '_blank', rel: 'noopener noreferrer'
   %p
     %strong= _('Deleted projects cannot be restored!')
-  #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(project.forks_count), stars_count: number_with_delimiter(project.star_count) } }
+  #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 9fa65f27651..919cafe7ce8 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,6 +1,7 @@
 = render "projects/blob/breadcrumb", blob: blob
 - project = @project.present(current_user: current_user)
 - ref = local_assigns[:ref] || @ref
+- expanded = params[:expanded].present?
 
 .info-well.d-none.d-sm-block
   .well-segment
@@ -13,7 +14,7 @@
 #blob-content-holder.blob-content-holder
   - 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 Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml)
+  - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml) && !expanded
     -# Data info will be removed once we migrate this to use GraphQL
     -# Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/330406
     #js-view-blob-app{ data: { blob_path: blob.path,
diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml
index 95a5d63e07f..9cd2f583fdd 100644
--- a/app/views/projects/blob/_header_content.html.haml
+++ b/app/views/projects/blob/_header_content.html.haml
@@ -9,9 +9,9 @@
   = copy_file_path_button(blob.path)
 
   %small.mr-1
-    - if blob.mode == Blob::MODE_SYMLINK
+    - if blob.symlink?
       = _('Symbolic link') << ' ·'
     = number_to_human_size(blob.raw_size)
 
   - if blob.stored_externally? && blob.external_storage == :lfs
-    %span.badge.label-lfs.gl-mr-2 LFS
+    = gl_badge_tag(_('LFS'), variant: :neutral)
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 2121d15643c..96acd863a4c 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -16,7 +16,9 @@
         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')
       = link_to new_project_branch_path(@project), class: 'gl-button btn btn-confirm' do
diff --git a/app/views/projects/ci/lints/show.html.haml b/app/views/projects/ci/lints/show.html.haml
index 4463220e951..b48e69c2c23 100644
--- a/app/views/projects/ci/lints/show.html.haml
+++ b/app/views/projects/ci/lints/show.html.haml
@@ -3,4 +3,4 @@
 
 %h4.pt-3.pb-3= _("Validate your GitLab CI configuration")
 
-#js-ci-lint{ data: { endpoint: project_ci_lint_path(@project), pipeline_simulation_help_page_path: help_page_path('ci/lint', anchor: 'pipeline-simulation') , lint_help_page_path: help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax') } }
+#js-ci-lint{ data: { endpoint: project_ci_lint_path(@project), pipeline_simulation_help_page_path: help_page_path('ci/lint', anchor: 'simulate-a-pipeline') , lint_help_page_path: help_page_path('ci/lint', anchor: 'check-cicd-syntax') } }
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 62ed50f5a0c..4442f62b221 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -34,7 +34,7 @@
         &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
+        %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)
 
       .committer
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 8ca41941e07..12d3f28dc20 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -13,4 +13,4 @@
   = html_escape(_("Changes are shown as if the %{b_open}source%{b_close} revision was being merged into the %{b_open}target%{b_close} revision.")) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
 
 .prepend-top-20
-  #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
+  #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, @compare_params) }
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index aa9a3ea61f7..f32514141c5 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title _("General Settings")
 - page_title _("General")
+- add_page_specific_style 'page_bundles/projects_edit'
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 - reduce_visibility_form_id = 'reduce-visibility-form'
@@ -40,7 +41,7 @@
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
 
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
@@ -62,7 +63,7 @@
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }= expanded ? _('Collapse') : _('Expand')
-    %p= _('Housekeeping, export, path, transfer, remove, archive.')
+    %p= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
 
   .settings-content
     .sub-section
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 72ccc8d830c..2b05ffe3eea 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -1,4 +1,5 @@
 - page_title _("Environments")
+- add_page_specific_style 'page_bundles/environments'
 
 - if Feature.enabled?(:new_environments_table)
   #environments-table{ data: { endpoint: project_environments_path(@project, format: :json),
@@ -9,7 +10,6 @@
     "project-path" => @project.full_path,
     "default-branch-name" => @project.default_branch_or_main } }
 - else
-  - add_page_specific_style 'page_bundles/environments'
   #environments-list-view{ data: { environments_data: environments_list_data,
     "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
     "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index b123b81b89c..6d60ef92d86 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -14,7 +14,7 @@
         .text-content
           %h4.state-title
             = _("You don't have any deployments right now.")
-          %p.blank-state-text
+          %p
             = html_escape(_("Define environments in the deploy stage(s) in %{code_open}.gitlab-ci.yml%{code_close} to track deployments here.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
           .text-center
             = link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index 7d696a988d4..4df109dbb61 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -14,7 +14,7 @@
 
       = f.submit _('Save changes'), class: 'btn gl-button btn-confirm gl-mr-3'
       = render 'shared/web_hooks/test_button', hook: @hook
-      = link_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'btn gl-button btn-danger float-right', data: { confirm: _('Are you sure?') }
+      = link_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'btn gl-button btn-danger float-right', aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this project hook?'), confirm_btn_variant: 'danger' }
 
 %hr
 
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index 77c715aa376..b021087c394 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -12,8 +12,8 @@
         :preserve
           #{h(@project.import_state.last_error)}
 
-= form_for @project, url: project_import_path(@project), method: :post do |f|
+= 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
-    = f.submit 'Start import', class: "gl-button btn btn-confirm"
+    = f.submit 'Start import', class: "gl-button btn btn-confirm", data: { disable_with: false }
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 1cf0551535b..8d6c0e29b6a 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -6,8 +6,8 @@
   - create_mr_text = can_create_confidential_merge_request? ? _('Create confidential merge request') : _('Create merge request')
 
   - can_create_path = can_create_branch_project_issue_path(@project, @issue)
-  - create_mr_path = create_merge_request_project_issue_path(@project, @issue, branch_name: @issue.to_branch_name, ref: @project.default_branch)
-  - create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid)
+  - create_mr_path = project_new_merge_request_path(@project, merge_request: { source_branch: @issue.to_branch_name, target_branch: @project.default_branch })
+  - create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid, format: :json)
   - refs_path = refs_namespace_project_path(@project.namespace, @project, search: '')
 
   .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 } }
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
index 6bca145dc18..9924b172875 100644
--- a/app/views/projects/learn_gitlab/index.html.haml
+++ b/app/views/projects/learn_gitlab/index.html.haml
@@ -2,7 +2,6 @@
 - page_title _("Learn GitLab")
 - add_page_specific_style 'page_bundles/learn_gitlab'
 - data = learn_gitlab_data(@project)
-- invite_members_open = session.delete(:confetti_post_signup)
 
 = render 'projects/invite_members_modal', project: @project
 
@@ -10,4 +9,4 @@
   - e.control do
     #js-learn-gitlab-app{ data: data }
   - e.candidate do
-    #js-learn-gitlab-app{ data: data.merge(invite_members_open: invite_members_open) }
+    #js-learn-gitlab-app{ data: data.merge(invite_members: 'true') }
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 9d5d1de1005..f2a271da771 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -2,7 +2,7 @@
 - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request)
 - can_reopen_merge_request = can?(current_user, :reopen_merge_request, @merge_request)
 - are_close_and_open_buttons_hidden = merge_request_button_hidden?(@merge_request, true) && merge_request_button_hidden?(@merge_request, false)
-- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden]
+- cache_key = [@project, @merge_request, can_update_merge_request, can_reopen_merge_request, are_close_and_open_buttons_hidden, current_user&.preferred_language]
 
 = cache(cache_key, expires_in: 1.day) do
   - if @merge_request.closed_or_merged_without_fork?
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index a0e78b7570a..a7667d03138 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -49,8 +49,6 @@
       = render "projects/merge_requests/tabs/pane", id: "notes", class: "notes voting_notes" do
         .row
           %section.col-md-12
-            -# haml-lint:disable InlineJavaScript
-            %script.js-notes-data{ type: "application/json" }= initial_notes_data(true).to_json.html_safe
             .issuable-discussion.js-vue-notes-event
               - if @merge_request.description.present?
                 .detail-page-description
diff --git a/app/views/projects/no_repo.html.haml b/app/views/projects/no_repo.html.haml
index c88ea313287..e3f46d601a3 100644
--- a/app/views/projects/no_repo.html.haml
+++ b/app/views/projects/no_repo.html.haml
@@ -23,4 +23,4 @@
 
 - if can? current_user, :remove_project, @project
   .prepend-top-20
-    = link_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn gl-button btn-danger float-right"
+    = link_to _('Delete project'), project_path(@project), data: { confirm: remove_project_message(@project), confirm_btn_variant: 'danger' }, aria: { label: _('Delete project') }, method: :delete, class: "btn gl-button btn-danger float-right"
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index d11b61466e2..31c14aaad50 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -6,36 +6,6 @@
 - elsif note.contributor?
   %span{ class: 'note-role user-access-role has-tooltip', title: _("This user has previously committed to the %{name} project.") % { name: note.project_name } }= _("Contributor")
 
-- if note.resolvable?
-  - can_resolve = can?(current_user, :resolve_note, note)
-  %resolve-btn{ "project-path" => project_path(note.project),
-      "discussion-id" => note.discussion_id(@noteable),
-      ":note-id" => note.id,
-      ":resolved" => note.resolved?,
-      ":can-resolve" => can_resolve,
-      ":author-name" => "'#{j(note.author.name)}'",
-      "author-avatar" => note.author.avatar_url,
-      ":note-truncated" => "'#{j(truncate(note.note, length: 17))}'",
-      ":resolved-by" => "'#{j(note.resolved_by.try(:name))}'",
-      "v-show" => "#{can_resolve || note.resolved?}",
-      "inline-template" => true,
-      "ref" => "note_#{note.id}" }
-
-    .note-actions-item
-      %button.note-action-button.line-resolve-btn{ type: "button",
-          class: ("is-disabled" unless can_resolve),
-          ":class" => "{ 'is-active': isResolved }",
-          ":aria-label" => "buttonText",
-          "@click" => "resolve",
-          ":title" => "buttonText",
-          ":ref" => "'button'" }
-
-        %div
-          %template{ 'v-if' => 'isResolved' }
-            = render 'shared/icons/icon_status_success_solid.svg'
-          %template{ 'v-else' => '' }
-            = render 'shared/icons/icon_resolve_discussion.svg'
-
 - if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     .note-actions-item
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index c81a3683e90..5385c6a4cc6 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -13,6 +13,6 @@
             = _('Report abuse to admin')
       - if note_editable
         %li
-          = link_to note_url(note), method: :delete, data: { confirm: 'Are you sure you want to delete this comment?', qa_selector: 'delete_comment_button' }, remote: true, class: 'js-note-delete' do
+          = link_to note_url(note), method: :delete, data: { confirm: _('Are you sure you want to delete this comment?'), confirm_btn_variant: 'danger', qa_selector: 'delete_comment_button' }, aria: { label: _('Delete comment') }, remote: true, class: 'js-note-delete' do
             %span.text-danger
               = _('Delete comment')
diff --git a/app/views/projects/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index 2db44528d51..15fb5755b61 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -1,11 +1,12 @@
+- can_edit_max_page_size=can?(current_user, :update_max_pages_size)
+- 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|
-  - if can?(current_user, :update_max_pages_size)
+  - if can_edit_max_page_size
     = render_if_exists 'shared/pages/max_pages_size_input', form: f
-    .gl-mt-3
-      = f.submit s_('GitLabPages|Save changes'), class: 'btn btn-confirm gl-button'
-
-  - if Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
 
+  - if can_enforce_https_only
     .form-group
       .form-check
         = f.check_box :pages_https_only, class: 'form-check-input', disabled: pages_https_only_disabled?
@@ -17,5 +18,5 @@
         %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 }
 
-    .gl-mt-3
-      = f.submit s_('GitLabPages|Save changes'), class: 'btn btn-confirm gl-button'
+  .gl-mt-3
+    = f.submit s_('GitLabPages|Save changes'), class: 'btn btn-confirm gl-button'
diff --git a/app/views/projects/pages_domains/_dns.html.haml b/app/views/projects/pages_domains/_dns.html.haml
index 2732463020e..6943469aaac 100644
--- a/app/views/projects/pages_domains/_dns.html.haml
+++ b/app/views/projects/pages_domains/_dns.html.haml
@@ -20,10 +20,9 @@
         = _("Verification status")
       .col-sm-10
         .status-badge
-          - text, status = domain_presenter.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success']
-          .badge{ class: status }
-            = text
-          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "gl-button btn btn-default has-tooltip", title: _("Retry verification")
+          - text, status = domain_presenter.unverified? ? [_('Unverified'), :danger] : [_('Verified'), :success]
+          = gl_badge_tag text, variant: status
+          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "gl-ml-2 gl-button btn btn-default has-tooltip", title: _("Retry verification")
         .input-group
           = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-append
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index f6a0638ccd0..908de68f825 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -36,5 +36,5 @@
           = link_to edit_pipeline_schedule_path(pipeline_schedule), title: _('Edit'), class: 'btn gl-button btn-default btn-icon' do
             = sprite_icon('pencil')
         - if can?(current_user, :admin_pipeline_schedule, pipeline_schedule)
-          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger btn-icon', data: { confirm: _("Are you sure you want to delete this pipeline schedule?") } do
+          = link_to pipeline_schedule_path(pipeline_schedule), title: _('Delete'), method: :delete, class: 'btn gl-button btn-danger btn-icon', aria: { label: _('Delete pipeline schedule') }, data: { confirm: _("Are you sure you want to delete this pipeline schedule?"), confirm_btn_variant: 'danger' } do
             = sprite_icon('remove')
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 13a77dbf2fd..4e93d7a04e7 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -38,7 +38,7 @@
         - popover_content_text = _('Learn more about Auto DevOps')
         = gl_badge_tag s_('Pipelines|Auto DevOps'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-autodevops', href: "#", tabindex: "0", role: "button", data: { container: 'body', toggle: 'popover', placement: 'top', html: 'true', triggers: 'focus', title: "<div class='gl-font-weight-normal gl-line-height-normal'>#{popover_title_text}</div>", content: "<a href='#{popover_content_url}' target='_blank' rel='noopener noreferrer nofollow'>#{popover_content_text}</a>" } }
       - if @pipeline.detached_merge_request_pipeline?
-        = gl_badge_tag s_('Pipelines|detached'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-mergerequest has-tooltip', title: _('Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.') }
+        = gl_badge_tag s_('Pipelines|detached'), { variant: :info, size: :sm }, { class: 'js-pipeline-url-mergerequest has-tooltip', title: _('Merge request pipelines are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for merge request pipelines.') }
       - if @pipeline.stuck?
         = gl_badge_tag s_('Pipelines|stuck'), { variant: :warning, size: :sm }, { class: 'js-pipeline-url-stuck has-tooltip' }
 
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index d654d0e04d7..70815dbe7a7 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -26,6 +26,7 @@
       - lint_link_start = '<a href="%{url}" class="gl-text-blue-500!">'.html_safe % { url: lint_link_url }
       = 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
 
 .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 12b2b33e364..220e44679cd 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -21,6 +21,7 @@
               .js-import-a-project-modal{ data: { project_id: @project.id, project_name: @project.name } }
             - if @project.allowed_to_share_with_group?
               .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite a group') } }
+              = render 'projects/invite_groups_modal', project: @project
             - if can_admin_project_member?(@project)
               .js-invite-members-trigger{ data: { variant: 'success',
                 classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3',
@@ -38,7 +39,7 @@
           %p
             = html_escape(_("Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}")) % { i_open: '<i>'.html_safe, i_close: '</i>'.html_safe }
 
-    - if Feature.disabled?(:invite_members_group_modal, @project.group) && can?(current_user, :admin_project_member, @project) && project_can_be_shared?
+    - if Feature.disabled?(:invite_members_group_modal, @project.group, default_enabled: :yaml) && can?(current_user, :admin_project_member, @project) && project_can_be_shared?
       - if !membership_locked? && @project.allowed_to_share_with_group?
         %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
           %li.nav-tab{ role: 'presentation' }
@@ -61,7 +62,7 @@
               default_access_level: ProjectGroupLink.default_access,
               group_link_field: 'link_group_id',
               group_access_field: 'link_group_access',
-              groups_select_tag_data: { skip_groups: @skip_groups }
+              groups_select_tag_data: { min_access_level: Gitlab::Access::GUEST, skip_groups: @skip_groups }
       - elsif !membership_locked?
         .invite-member
           = render 'shared/members/invite_member',
@@ -78,7 +79,7 @@
             submit_url: project_group_links_path(@project),
             group_link_field: 'link_group_id',
             group_access_field: 'link_group_access',
-            groups_select_tag_data: { skip_groups: @skip_groups }
+            groups_select_tag_data: { min_access_level: Gitlab::Access::GUEST, skip_groups: @skip_groups }
     .js-project-members-list-app{ data: { members_data: project_members_app_data_json(@project,
                                                                                       members: @project_members,
                                                                                       group_links: @group_links,
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 f3bb2a66a4c..c9e964b2984 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], data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?') }, 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-warning"
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index fe63f921780..8f5ce798dc7 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -11,7 +11,7 @@
       =  link_to s_("ProtectedTag|What are protected tags?"), help_page_path("user/project/protected_tags")
   .settings-content
     %p
-      = s_("ProtectedTag|By default, protected branches restrict who can modify the tag.")
+      = s_("ProtectedTag|By default, protected tags restrict who can modify the tag.")
       = link_to s_("ProtectedTag|Learn more."), help_page_path("user/project/protected_tags", anchor: "who-can-modify-a-protected-tag")
 
     - if can? current_user, :admin_project, @project
diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
index b312a09aadd..ed5b5b17942 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -19,4 +19,4 @@
 
   - if can? current_user, :admin_project, @project
     %td
-      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], data: { confirm: 'Tag will be writable for developers. Are you sure?' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
+      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], aria: { label: s_('ProtectedTags|Unprotect tag') }, data: { confirm: 'Tag will be writable for developers. Are you sure?', confirm_btn_variant: 'danger' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
diff --git a/app/views/projects/readme_templates/default.md.tt b/app/views/projects/readme_templates/default.md.tt
new file mode 100644
index 00000000000..d5fef29b290
--- /dev/null
+++ b/app/views/projects/readme_templates/default.md.tt
@@ -0,0 +1,93 @@
+# <%= project.name %>
+
+<%= project.description %>
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin <%= project.http_url_to_repo %>
+git branch -M <%= project.default_branch_or_main %>
+git push -uf origin <%= project.default_branch_or_main %>
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](<%= project_settings_integrations_url(project) %>)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!).  Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
diff --git a/app/views/projects/security/configuration/show.html.haml b/app/views/projects/security/configuration/show.html.haml
index e8ac572df1d..df14bd09a4d 100644
--- a/app/views/projects/security/configuration/show.html.haml
+++ b/app/views/projects/security/configuration/show.html.haml
@@ -2,4 +2,6 @@
 - page_title _("Security Configuration")
 - @content_class = "limit-container-width" unless fluid_layout
 
-#js-security-configuration-static{ data: { project_path: @project.full_path, upgrade_path: security_upgrade_path } }
+#js-security-configuration{ data: { **@configuration.to_html_data_attribute,
+  upgrade_path: security_upgrade_path,
+  project_full_path: @project.full_path } }
diff --git a/app/views/projects/serverless/functions/index.html.haml b/app/views/projects/serverless/functions/index.html.haml
index b17e6df1e8e..03a1b0ee7bb 100644
--- a/app/views/projects/serverless/functions/index.html.haml
+++ b/app/views/projects/serverless/functions/index.html.haml
@@ -10,8 +10,6 @@
   help_path: help_page_path('user/project/clusters/serverless/index'),
   empty_image_path: image_path('illustrations/empty-state/empty-serverless-lg.svg') } }
 
-.js-serverless-survey-banner{ data: { user_name: current_user.name, user_email: current_user.email } }
-
 .js-serverless-functions-notice
   .flash-container
 
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 419dd827e49..65b93dc930a 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -6,13 +6,7 @@
   - if integration.operating?
     = sprite_icon('check', css_class: 'gl-text-green-500')
 
-- if vue_integration_form_enabled?
-  = render 'shared/integration_settings', integration: integration
-- else
-  = form_for(integration, as: :service, url: scoped_integration_path(integration, project: @project, group: @group), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => test_project_integration_path(@project, integration), testid: 'integration-form' } }) do |form|
-    = render 'shared/integration_settings', form: form, integration: integration
-    %input{ id: 'services_redirect_to', type: 'hidden', name: 'redirect_to', value: request.referer }
-
+= render 'shared/integration_settings', integration: integration
 - if lookup_context.template_exists?('show', "projects/services/#{integration.to_param}", true)
   %hr
   = render "projects/services/#{integration.to_param}/show", integration: integration
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index be9bd3dfc01..12cb1c3574a 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -10,11 +10,13 @@
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchiving-a-project') }
     %p= _("Unarchiving the project will restore its members' ability to make changes to it. The repository can be committed to, and issues, comments, and other entities can be created. %{strong_start}Once active, this project shows up in the search and on the dashboard.%{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 _('Unarchive project'), unarchive_project_path(@project),
+        aria: { label: _('Unarchive project') },
         data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' },
         method: :post, class: "gl-button btn btn-confirm"
   - else
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archiving-a-project') }
     %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),
-      data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link' },
+      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"
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index 0f4d5869cea..960b1d67610 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -27,6 +27,7 @@
 
   .row= render_if_exists 'projects/classification_policy_settings', f: f
 
+  = render 'shared/repository_size_limit_setting_registration_features_cta', form: f
   = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project
 
   .form-group.gl-mt-3.gl-mb-3
@@ -36,6 +37,6 @@
     = render 'shared/choose_avatar_button', f: f
     - if @project.avatar?
       %hr
-      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'
+      = link_to _('Remove avatar'), project_avatar_path(@project), aria: { label: _('Remove avatar') }, data: { confirm: _('Avatar will be removed. Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index d3cdfc4f7c9..c70e153ae41 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -94,7 +94,7 @@
               .input-group-text /
           %p.form-text.text-muted
             = html_escape(_('The regular expression used to find test coverage output in the job log. For example, use %{regex} for Simplecov (Ruby). Leave blank to disable.')) % { regex: '<code>\(\d+.\d+%\)</code>'.html_safe }
-            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'add-test-coverage-results-to-a-merge-request'), target: '_blank', rel: 'noopener noreferrer'
+            = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'add-test-coverage-results-to-a-merge-request-deprecated'), target: '_blank', rel: 'noopener noreferrer'
 
         = f.submit _('Save changes'), class: "btn gl-button btn-confirm", data: { qa_selector: 'save_general_pipelines_changes_button' }
 
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 215448be3d6..4e94c96fdde 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -2,6 +2,21 @@
 - page_title _('Monitor Settings')
 - breadcrumb_title _('Monitor Settings')
 
+.gl-alert.gl-alert-danger.gl-mb-5
+  - removal_epic_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/7188'
+  - removal_epic_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: removal_epic_link_url }
+  - opstrace_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/6976'
+  - opstrace_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: opstrace_link_url }
+  - link_end = '</a>'.html_safe
+  .gl-alert-container
+    = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    .gl-alert-content
+      .gl-alert-title
+        = 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 }
+
 = render 'projects/settings/operations/metrics_dashboard'
 = render 'projects/settings/operations/tracing'
 = render 'projects/settings/operations/error_tracking'
diff --git a/app/views/projects/starrers/index.html.haml b/app/views/projects/starrers/index.html.haml
index 618c4c249a1..fe8a6508dd7 100644
--- a/app/views/projects/starrers/index.html.haml
+++ b/app/views/projects/starrers/index.html.haml
@@ -12,21 +12,13 @@
             = search_field_tag :search, params[:search], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
             %button.user-search-btn{ type: "submit", "aria-label" => _("Submit search") }
               = sprite_icon('search')
-          .dropdown.inline.gl-ml-3
-            = dropdown_toggle(starrers_sort_options_hash[@sort], { toggle: 'dropdown' })
-            %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-              %li.dropdown-header
-                = _("Sort by")
-              - starrers_sort_options_hash.each do |value, title|
-                %li
-                  = link_to filter_starrer_path(sort: value), class: ("is-active" if @sort == value) do
-                    = title
+          - starrers_sort_options = starrers_sort_options_hash.map { |value, text| { value: value, text: text, href: filter_starrer_path(sort: value) } }
+          = gl_redirect_listbox_tag starrers_sort_options, @sort, class: 'gl-ml-3', data: { right: true }
 - if @starrers.size > 0
   .row.gl-mt-3
     = render partial: 'starrer', collection: @starrers, as: :starrer
   = paginate @starrers, theme: 'gitlab'
+- elsif params[:search].present?
+  .nothing-here-block= _('No starrers matched your search')
 - else
-  - if params[:search].present?
-    .nothing-here-block= _('No starrers matched your search')
-  - else
-    .nothing-here-block= _('Nobody has starred this repository yet')
+  .nothing-here-block= _('Nobody has starred this repository yet')
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index d3cc409df1d..4a44ad2337f 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -1,4 +1,3 @@
-- @sort ||= sort_value_recently_updated
 - page_title s_('TagsPage|Tags')
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_tags_url(@project, rss_url_options), title: "#{@project.name} tags")
@@ -9,7 +8,7 @@
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
 
     .nav-controls
-      #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path, sort_options: tags_sort_options_hash.to_json } }
+      #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path(search: @search, sort: @sort), sort_options: tags_sort_options_hash.to_json } }
       = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon has-tooltip gl-ml-auto' do
         = sprite_icon('rss', css_class: 'gl-icon qa-rss-icon')
       - if can?(current_user, :admin_tag, @project)
diff --git a/app/views/projects/tracings/show.html.haml b/app/views/projects/tracings/show.html.haml
index 813908e5a57..a7a02ab917e 100644
--- a/app/views/projects/tracings/show.html.haml
+++ b/app/views/projects/tracings/show.html.haml
@@ -1,6 +1,21 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - page_title _("Tracing")
 
+.gl-alert.gl-alert-danger.gl-mb-5
+  - removal_epic_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/7188'
+  - removal_epic_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: removal_epic_link_url }
+  - opstrace_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/6976'
+  - opstrace_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: opstrace_link_url }
+  - link_end = '</a>'.html_safe
+  .gl-alert-container
+    = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    .gl-alert-content
+      .gl-alert-title
+        = 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 }
+
 - if @project.tracing_external_url.present?
   %h3.page-title= _('Tracing')
   .gl-alert.gl-alert-info.gl-mb-5
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index 081afacdaa6..9d082436aa7 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -8,7 +8,7 @@
 
     .label-container
       - unless trigger.can_access_project?
-        %span.badge.badge-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid
+        = gl_badge_tag s_('Trigger|invalid'), { variant: :danger }, { title: s_('Trigger|Trigger user has insufficient permissions to project'), data: { toggle: 'tooltip', container: 'body' } }
 
   %td
     - if trigger.description? && trigger.description.length > 15
diff --git a/app/views/projects/usage_quotas/index.html.haml b/app/views/projects/usage_quotas/index.html.haml
index de1135cf928..5b4edc92d1d 100644
--- a/app/views/projects/usage_quotas/index.html.haml
+++ b/app/views/projects/usage_quotas/index.html.haml
@@ -9,11 +9,10 @@
     %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
       = s_('UsageQuota|Learn more about usage quotas') + '.'
 
-.top-area.scrolling-tabs-container.inner-page-scroll-tabs
-  %ul.nav.nav-tabs.nav-links.scrolling-tabs.separator.js-usage-quota-tabs{ role: 'tablist' }
-    %li.nav-item
-      %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#storage-quota-tab' }, href: '#storage-quota-tab', 'aria-controls': '#storage-quota-tab', 'aria-selected': 'true' }
-        = s_('UsageQuota|Storage')
+= gl_tabs_nav do
+  = gl_tab_link_to '#storage-quota-tab', item_active: true do
+    = s_('UsageQuota|Storage')
+
 .tab-content
-  .tab-pane#storage-quota-tab
+  .tab-pane.active#storage-quota-tab
     #js-project-storage-count-app{ data: { project_path: @project.full_path } }