Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

25 files changed, 130 insertions, 98 deletions

diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index 8b13bb948ee..4cb3f6d1739 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -12,10 +12,10 @@
         %p
           %span.js-warning-text= _('This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.')
           %br
-            - phrase_code = '<code class="js-confirm-danger-match">%{phrase_name}</code>'.html_safe % { phrase_name: phrase }
+            - phrase_code = '<code class="js-legacy-confirm-danger-match">%{phrase_name}</code>'.html_safe % { phrase_name: phrase }
             = _('Please type %{phrase_code} to proceed or close this modal to cancel.').html_safe % { phrase_code: phrase_code }
 
         .form-group
-          = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
+          = text_field_tag 'confirm_name_input', '', class: 'form-control js-legacy-confirm-danger-input qa-confirm-input'
         .form-actions
-          = submit_tag _('Confirm'), class: "gl-button btn btn-danger js-confirm-danger-submit qa-confirm-button"
+          = submit_tag _('Confirm'), class: "gl-button btn btn-danger js-legacy-confirm-danger-submit qa-confirm-button"
diff --git a/app/views/shared/_default_branch_protection.html.haml b/app/views/shared/_default_branch_protection.html.haml
index d7ae21debd8..7a6152f6d96 100644
--- a/app/views/shared/_default_branch_protection.html.haml
+++ b/app/views/shared/_default_branch_protection.html.haml
@@ -1,3 +1,4 @@
-.form-group
-  = f.label :default_branch_protection, class: 'label-bold'
-  = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, selected_level), {}, class: 'form-control'
+%fieldset.form-group
+  %legend.h5.gl-border-none.gl-mt-0.gl-mb-3= _('Default branch protection')
+  - Gitlab::Access.protection_options.each do |option|
+    = f.gitlab_ui_radio_component :default_branch_protection, option[:value], option[:label], help_text: option[:help_text]
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 6eb736b0710..4e3b1e02f16 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -1,4 +1,4 @@
-= render 'shared/alerts/positioning_disabled'
+= render 'shared/alerts/positioning_disabled' if @sort == 'relative_position'
 
 - if @issues.to_a.any?
   %ul.content-list.issues-list.issuable-list{ class: issue_manual_ordering_class, data: { group_full_path: @group&.full_path } }
diff --git a/app/views/shared/_md_preview.html.haml b/app/views/shared/_md_preview.html.haml
index 0976defea1b..a49a0667d84 100644
--- a/app/views/shared/_md_preview.html.haml
+++ b/app/views/shared/_md_preview.html.haml
@@ -9,7 +9,7 @@
 
 .md-area.position-relative
   .md-header
-    %ul.nav.nav-tabs.nav-links.clearfix
+    = gl_tabs_nav({ class: 'clearfix nav-links'}) do
       %li.md-header-tab.active
         %button.js-md-write-button
           = _("Write")
diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml
index 5641c67e462..14ea96f9669 100644
--- a/app/views/shared/_new_commit_form.html.haml
+++ b/app/views/shared/_new_commit_form.html.haml
@@ -5,9 +5,7 @@
 
 - if project.empty_repo?
   - ref = local_assigns[:ref] || @ref
-  - branch_name_class = project.empty_repo_upload_experiment? ? 'js-branch-name' : nil
-
-  = hidden_field_tag 'branch_name', ref, class: branch_name_class
+  = hidden_field_tag 'branch_name', ref, class: 'js-branch-name'
 - else
   - if can?(current_user, :push_code, @project)
     .form-group.row.branch
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 9c1e5a49b44..d1e1a8a819d 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,12 +1,10 @@
 - if show_no_password_message?
-  .no-password-message.gl-alert.gl-alert-warning
-    = sprite_icon('warning', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-    %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label': _('Dismiss') }
-      = sprite_icon('close', size: 16, css_class: 'gl-icon')
+  = render 'shared/global_alert',
+    variant: :warning,
+    alert_class: 'js-no-password-message',
+    close_button_class: 'js-hide-no-password-message' do
     .gl-alert-body
-      - translation_params = { protocol: gitlab_config.protocol.upcase, set_password_link: link_to_set_password }
-      - set_password_message = _("You won't be able to pull or push repositories via %{protocol} until you %{set_password_link} on your account") % translation_params
-      = set_password_message.html_safe
+      = no_password_message
     .gl-alert-actions
-      = link_to _('Remind later'), '#', class: 'hide-no-password-message btn gl-alert-action btn-info btn-md gl-button'
-      = link_to _("Don't show again"), profile_path(user: {hide_no_password: true}), method: :put, role: 'button', class: 'btn gl-alert-action btn-md btn-default gl-button btn-default-secondary'
+      = link_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action btn btn-confirm btn-md gl-button'
+      = link_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index 2c6ceb58654..20dc1b41970 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,10 +1,10 @@
 - if show_no_ssh_key_message?
-  %div{ class: 'no-ssh-key-message gl-alert gl-alert-warning', role: 'alert' }
-    = sprite_icon('warning', css_class: 'gl-icon s16 gl-alert-icon gl-alert-icon-no-title')
-    %button{ class: 'gl-alert-dismiss hide-no-ssh-message', type: 'button', 'aria-label': _('Dismiss') }
-      = sprite_icon('close', css_class: 'gl-icon s16')
+  = render 'shared/global_alert',
+    variant: :warning,
+    alert_class: 'js-no-ssh-message',
+    close_button_class: 'js-hide-no-ssh-message' do
     .gl-alert-body
-      = s_("MissingSSHKeyWarningLink|You won't be able to pull or push repositories via SSH until you add an SSH key to your profile")
+      = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
     .gl-alert-actions
-      = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "btn gl-alert-action btn-warning btn-md gl-button"
-      = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: {hide_no_ssh_key: true}), method: :put, role: 'button', class: 'btn gl-alert-action btn-md btn-warning gl-button btn-warning-secondary'
+      = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "gl-alert-action btn btn-confirm btn-md gl-button"
+      = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: { hide_no_ssh_key: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_project_creation_levels.html.haml b/app/views/shared/_project_creation_levels.html.haml
new file mode 100644
index 00000000000..00f495a26dc
--- /dev/null
+++ b/app/views/shared/_project_creation_levels.html.haml
@@ -0,0 +1,7 @@
+- method = local_assigns.fetch(:method, nil)
+- legend = local_assigns.fetch(:legend, nil)
+
+%fieldset.form-group
+  %legend.h5.gl-border-none.gl-mt-0.gl-mb-3= legend
+  - Gitlab::Access.project_creation_options.each do |label, value|
+    = f.gitlab_ui_radio_component method, value, label
diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml
index f48bfcd0e72..760fe18ddec 100644
--- a/app/views/shared/_visibility_radios.html.haml
+++ b/app/views/shared/_visibility_radios.html.haml
@@ -10,6 +10,7 @@
         = visibility_level_label(level)
       .option-description
         = visibility_level_description(level, form_model)
+      .option-disabled-reason
 
 .text-muted
   - if all_visibility_levels_restricted?
diff --git a/app/views/shared/alerts/_positioning_disabled.html.haml b/app/views/shared/alerts/_positioning_disabled.html.haml
index 91c1d3463d8..59f2fcef24c 100644
--- a/app/views/shared/alerts/_positioning_disabled.html.haml
+++ b/app/views/shared/alerts/_positioning_disabled.html.haml
@@ -1,2 +1,2 @@
 - if issue_repositioning_disabled?
-  = render 'shared/alert_info', body: _('Issues manual ordering is temporarily disabled for technical reasons.')
+  = render 'shared/alert_info', body: _('Issues are being rebalanced at the moment, so manual reordering is disabled.')
diff --git a/app/views/shared/boards/_switcher.html.haml b/app/views/shared/boards/_switcher.html.haml
index 18e0ca20cf7..c667b3a4626 100644
--- a/app/views/shared/boards/_switcher.html.haml
+++ b/app/views/shared/boards/_switcher.html.haml
@@ -3,15 +3,10 @@
 - milestone_filter_opts = milestone_filter_opts.merge(only_group_milestones: true) if board.group_board?
 - weights = Gitlab.ee? ? ([Issue::WEIGHT_ANY] + Issue.weight_options) : []
 
-#js-multiple-boards-switcher.inline.boards-switcher{ data: { current_board: current_board_json.to_json,
-    milestone_path: milestones_filter_path(milestone_filter_opts),
+#js-multiple-boards-switcher.inline.boards-switcher{ data: { milestone_path: milestones_filter_path(milestone_filter_opts),
     board_base_url: board_base_url,
     has_missing_boards: (!multiple_boards_available? && current_board_parent.boards.size > 1).to_s,
     can_admin_board: can?(current_user, :admin_issue_board, parent).to_s,
     multiple_issue_boards_available: parent.multiple_issue_boards_available?.to_s,
-    labels_path: labels_filter_path_with_defaults(only_group_labels: true, include_descendant_groups: true),
-    labels_web_url: parent.is_a?(Project) ? project_labels_path(@project) : group_labels_path(@group),
-    project_id: @project&.id,
-    group_id: @group&.id,
     scoped_issue_board_feature_enabled: Gitlab.ee? && parent.feature_available?(:scoped_issue_board) ? 'true' : 'false',
     weights: weights.to_json } }
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index e049afbc40b..902a0cad483 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -36,7 +36,7 @@
         .text-secondary= s_('DeployTokens|Allows read-only access to registry images.')
 
       %fieldset.form-group.form-check
-        = f.check_box :write_registry, class: 'form-check-input'
+        = f.check_box :write_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_write_registry_checkbox' }
         = f.label :write_registry, 'write_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows read and write access to registry images.')
 
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index 8d6b9604c1c..f533b5b5a4d 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -39,6 +39,9 @@
 
     = render "shared/tokens/scopes_list", token: @application
 
-.form-actions
-  = link_to _('Edit'), edit_path, class: 'gl-button btn btn-confirm wide float-left'
-  = render 'shared/doorkeeper/applications/delete_form', path: delete_path, submit_btn_css: 'gl-button btn btn-danger gl-ml-3'
+.form-actions.gl-display-flex.gl-justify-content-space-between
+  %div
+    - if @created
+      = link_to _('Continue'), index_path, class: 'btn btn-confirm btn-md gl-button gl-mr-3'
+    = link_to _('Edit'), edit_path, class: 'btn btn-default btn-md gl-button'
+  = render 'shared/doorkeeper/applications/delete_form', path: delete_path, submit_btn_css: 'btn btn-danger btn-md gl-button btn-danger-secondary'
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 51f44afe55e..ab6875a09f7 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -1,44 +1,47 @@
-%p
-  %strong Request URL:
-  POST
-  = hook_log.url
-  = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+%span.gl-display-flex.gl-align-items-center
+  %h4
+    POST
+    = hook_log.url
+  %span.badge.gl-badge.badge-pill.badge-muted.sm.gl-ml-3
+    = hook_log.trigger.singularize.titleize
 
 %p
-  %strong Trigger:
-  %td.d-none.d-sm-block
-    %span.badge.badge-gray.deploy-project-label
-      = hook_log.trigger.singularize.titleize
-%p
-  %strong Elapsed time:
-  #{number_with_precision(hook_log.execution_duration, precision: 2)} sec
-%p
-  %strong Request time:
-  = time_ago_with_tooltip(hook_log.created_at)
+  = _('Completed in %{duration_seconds} seconds (%{relative_time})').html_safe % { duration_seconds: number_with_precision(hook_log.execution_duration, precision: 2), relative_time: time_ago_with_tooltip(hook_log.created_at) }
 
 %hr
 
 - if hook_log.internal_error_message.present?
-  .bs-callout.bs-callout-danger
-    = hook_log.internal_error_message
+  .gl-alert-container
+    .gl-alert.gl-alert-danger
+      .gl-alert-container
+        = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+        .gl-alert-content
+          %h4.gl-alert-title= _('Internal error occured while delivering this webhook.')
+          .gl-alert-body
+            = _('Error: %{error}') % { error: hook_log.internal_error_message }
+
+%h4= _('Response')
+= render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+%pre.gl-mt-3
+  :escaped
+    #{hook_log.response_body}
 
-%h5 Request headers:
+%h5= _('Headers')
 %pre
-  - hook_log.request_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.response_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Request body:
+%h4.gl-mt-6= _('Request')
 %pre
   :escaped
     #{Gitlab::Json.pretty_generate(hook_log.request_data)}
-%h5 Response headers:
+
+%h5= _('Headers')
 %pre
-  - hook_log.response_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.request_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Response body:
-%pre
-  :escaped
-    #{hook_log.response_body}
+
+
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 81a7581d392..e097852216c 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -15,6 +15,7 @@
     .d-flex.flex-column.flex-md-row.flex-grow-1.mb-lg-0.mb-md-2.mb-sm-0.w-100
       - if type == :boards
         = render "shared/boards/switcher", board: board
+        .js-new-board{ data: { multiple_issue_boards_available: parent.multiple_issue_boards_available?.to_s, can_admin_board: can?(current_user, :admin_issue_board, parent).to_s, } }
       = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
         - if params[:search].present?
           = hidden_field_tag :search, params[:search]
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 1f391e8a321..46df9b4ef9a 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -23,7 +23,7 @@
       = html_escape(_('From %{code_open}%{source_title}%{code_close} into')) % { source_title: source_title, code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
 
     - if issuable.new_record?
-      %code#js-target-branch-title= target_title
+      %code#js-target-branch-title{ data: { branch_name: @merge_request.target_branch } }= target_title
       &nbsp;
       = link_to _('Change branches'), mr_change_branches_path(issuable)
     - elsif issuable.for_fork?
diff --git a/app/views/shared/issuable/form/_type_selector.html.haml b/app/views/shared/issuable/form/_type_selector.html.haml
index f5f6f32d5ba..ae0fe54de4f 100644
--- a/app/views/shared/issuable/form/_type_selector.html.haml
+++ b/app/views/shared/issuable/form/_type_selector.html.haml
@@ -18,17 +18,19 @@
                 = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
             .dropdown-content{ data: { testid: 'issue-type-select-dropdown' } }
               %ul
-                %li.js-filter-issuable-type
-                  = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
-                    #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_("Issue")}
-                %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
-                  = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
-                    #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_("Incident")}
+                - if create_issue_type_allowed?(@project, :issue)
+                  %li.js-filter-issuable-type
+                    = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
+                      #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_('Issue')}
+                - if create_issue_type_allowed?(@project, :incident)
+                  %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
+                    = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
+                      #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_('Incident')}
 
       #js-type-popover
 
     - if issuable.incident?
       %p.form-text.text-muted
         - incident_docs_url = help_page_path('operations/incident_management/incidents.md')
-        - incident_docs_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: incident_docs_url }
-        = _('A %{incident_docs_start}modified issue%{incident_docs_end} to guide the resolution of incidents.').html_safe % { incident_docs_start: incident_docs_start, incident_docs_end: '</a>'.html_safe }
+        - incident_docs_start = format('<a href="%{url}" target="_blank" rel="noopener noreferrer">', url: incident_docs_url)
+        = format(_('A %{incident_docs_start}modified issue%{incident_docs_end} to guide the resolution of incidents.'), incident_docs_start: incident_docs_start, incident_docs_end: '</a>').html_safe
diff --git a/app/views/shared/labels/_nav.html.haml b/app/views/shared/labels/_nav.html.haml
index a0225e35c90..47e9d9b0e4a 100644
--- a/app/views/shared/labels/_nav.html.haml
+++ b/app/views/shared/labels/_nav.html.haml
@@ -1,14 +1,10 @@
 - subscribed = params[:subscribed]
 
 .top-area.adjust
-  %ul.nav-links.nav.nav-tabs
-    %li{ class: active_when(subscribed != 'true') }>
-      = link_to labels_filter_path do
-        = _('All')
+  = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-0' }) do
+    = gl_tab_link_to _('All'), labels_filter_path, { item_active: subscribed != 'true' }
     - if current_user
-      %li{ class: active_when(subscribed == 'true') }>
-        = link_to labels_filter_path(subscribed: 'true') do
-          = _('Subscribed')
+      = gl_tab_link_to _('Subscribed'), labels_filter_path(subscribed: 'true'), { item_active: subscribed == 'true' }
   .nav-controls
     = form_tag labels_filter_path, method: :get do
       = hidden_field_tag :subscribed, params[:subscribed]
diff --git a/app/views/shared/nav/_sidebar_menu.html.haml b/app/views/shared/nav/_sidebar_menu.html.haml
index 903d2d077ba..3f71368aff3 100644
--- a/app/views/shared/nav/_sidebar_menu.html.haml
+++ b/app/views/shared/nav/_sidebar_menu.html.haml
@@ -16,15 +16,4 @@
         %span.badge.badge-pill.count{ **sidebar_menu.pill_html_options }
           = number_with_delimiter(sidebar_menu.pill_count)
 
-    %ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_renderable_items?) }
-      = nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do
-        %span.fly-out-top-item-container
-          %strong.fly-out-top-item-name
-            = sidebar_menu.title
-          - if sidebar_menu.has_pill?
-            %span.badge.badge-pill.count.fly-out-badge{ **sidebar_menu.pill_html_options }
-              = number_with_delimiter(sidebar_menu.pill_count)
-
-      - if sidebar_menu.has_renderable_items?
-        %li.divider.fly-out-top-item
-        = render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items
+    = render partial: 'shared/nav/sidebar_submenu', locals: { sidebar_menu: sidebar_menu }
diff --git a/app/views/shared/nav/_sidebar_submenu.html.haml b/app/views/shared/nav/_sidebar_submenu.html.haml
new file mode 100644
index 00000000000..750e6c9ee57
--- /dev/null
+++ b/app/views/shared/nav/_sidebar_submenu.html.haml
@@ -0,0 +1,12 @@
+%ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_renderable_items?) }
+  = nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do
+    %span.fly-out-top-item-container
+      %strong.fly-out-top-item-name
+        = sidebar_menu.title
+      - if sidebar_menu.has_pill?
+        %span.badge.badge-pill.count.fly-out-badge{ **sidebar_menu.pill_html_options }
+          = number_with_delimiter(sidebar_menu.pill_count)
+
+  - if sidebar_menu.has_renderable_items?
+    %li.divider.fly-out-top-item
+    = render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items
diff --git a/app/views/shared/projects/_topics.html.haml b/app/views/shared/projects/_topics.html.haml
index a7429483da1..e303f05c5df 100644
--- a/app/views/shared/projects/_topics.html.haml
+++ b/app/views/shared/projects/_topics.html.haml
@@ -8,7 +8,7 @@
       = sprite_icon('tag', css_class: 'icon gl-relative gl-mr-2')
 
       - project.topics_to_show.each do |topic|
-        - explore_project_topic_path = explore_projects_path(topic: topic)
+        - explore_project_topic_path = topic_explore_projects_path(topic_name: topic)
         - if topic.length > max_project_topic_length
           %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
             = truncate(topic, length: max_project_topic_length)
@@ -21,7 +21,7 @@
         - content = capture do
           %span.gl-display-inline-flex.gl-flex-wrap
             - project.topics_not_shown.each do |topic|
-              - explore_project_topic_path = explore_projects_path(topic: topic)
+              - explore_project_topic_path = topic_explore_projects_path(topic_name: topic)
               - if topic.length > max_project_topic_length
                 %a{ class: "#{ project_topics_classes } gl-mb-3 str-truncated has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
                   = truncate(topic, length: max_project_topic_length)
diff --git a/app/views/shared/runners/_shared_runners_description.html.haml b/app/views/shared/runners/_shared_runners_description.html.haml
index a276f725576..e2b57a7fd73 100644
--- a/app/views/shared/runners/_shared_runners_description.html.haml
+++ b/app/views/shared/runners/_shared_runners_description.html.haml
@@ -1,4 +1,5 @@
-- link = link_to _('MaxBuilds'), 'https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-runnersmachine-section', target: '_blank'
+-# "MaxBuilds" is a runner configuration keyword so it must not be translated.
+- link = link_to 'MaxBuilds', 'https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-runnersmachine-section', target: '_blank'
 
 %h4
   = _('Shared runners')
diff --git a/app/views/shared/topics/_list.html.haml b/app/views/shared/topics/_list.html.haml
new file mode 100644
index 00000000000..ddf47261d42
--- /dev/null
+++ b/app/views/shared/topics/_list.html.haml
@@ -0,0 +1,9 @@
+- remote = local_assigns.fetch(:remote, false)
+
+- if @topics.empty?
+  = render 'shared/empty_states/topics'
+- else
+  .row.gl-mt-3
+    = render partial: 'shared/topics/topic', collection: @topics
+
+  = paginate_collection @topics, remote: remote
diff --git a/app/views/shared/topics/_topic.html.haml b/app/views/shared/topics/_topic.html.haml
new file mode 100644
index 00000000000..a47d4495777
--- /dev/null
+++ b/app/views/shared/topics/_topic.html.haml
@@ -0,0 +1,16 @@
+- max_topic_name_length = 30
+- detail_page_link = topic_explore_projects_path(topic_name: topic.name)
+
+.col-lg-3.col-md-4.col-sm-12
+  .gl-card.gl-mb-5
+    .gl-card-body.gl-display-flex.gl-align-items-center
+      .avatar-container.rect-avatar.s40.gl-flex-shrink-0
+        = link_to detail_page_link do
+          = topic_icon(topic, class: "avatar s40")
+      = link_to detail_page_link do
+        - if topic.name.length > max_topic_name_length
+          %h5.str-truncated.has-tooltip{ title: topic.name }
+            = truncate(topic.name, length: max_topic_name_length)
+        - else
+          %h5
+            = topic.name
diff --git a/app/views/shared/web_hooks/_index.html.haml b/app/views/shared/web_hooks/_index.html.haml
index 794418b8336..f1eef5d7f0f 100644
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
@@ -3,7 +3,7 @@
   .card-header
     %h5
       = hook_class.underscore.humanize.titleize.pluralize
-      (#{hooks.load.size})
+      (#{hooks.size})
 
   - if hooks.any?
     %ul.content-list