Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

33 files changed, 75 insertions, 187 deletions

diff --git a/app/views/shared/_default_branch_protection.html.haml b/app/views/shared/_default_branch_protection.html.haml
index 7a6152f6d96..1a660f3f896 100644
--- a/app/views/shared/_default_branch_protection.html.haml
+++ b/app/views/shared/_default_branch_protection.html.haml
@@ -1,4 +1,4 @@
-%fieldset.form-group
-  %legend.h5.gl-border-none.gl-mt-0.gl-mb-3= _('Default branch protection')
+.form-group
+  %legend.h5.gl-border-none.gl-mt-0.gl-mb-3= _('Initial 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/_gl_toggle.html.haml b/app/views/shared/_gl_toggle.html.haml
deleted file mode 100644
index afaa6b6df92..00000000000
--- a/app/views/shared/_gl_toggle.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
--# This partial renders a GlToggle root element.
--# To actually initialize the component, make sure to call the initToggle helper from ~/toggles.
-
-- classes = local_assigns.fetch(:classes)
-- name = local_assigns.fetch(:name, nil)
-- is_checked = local_assigns.fetch(:is_checked, false).to_s
-- disabled = local_assigns.fetch(:disabled, false).to_s
-- is_loading = local_assigns.fetch(:is_loading, false).to_s
-- label = local_assigns.fetch(:label, nil)
-- help = local_assigns.fetch(:help, nil)
-- label_position = local_assigns.fetch(:label_position, nil)
-- data = local_assigns.fetch(:data, {})
-
-%span{ class: classes,
-  data: { name: name,
-    is_checked: is_checked,
-    disabled: disabled,
-    is_loading: is_loading,
-    label: label,
-    help: help,
-    label_position: label_position,
-    **data } }
-
--# Leverage this block to render a rich help text. To render a plain text help text,
--# prefer the `help` parameter.
-- if yield.present?
-  .gl-text-secondary.gl-mt-1
-    = yield
diff --git a/app/views/shared/_global_alert.html.haml b/app/views/shared/_global_alert.html.haml
index 1eaf21fc568..cb7ad32e474 100644
--- a/app/views/shared/_global_alert.html.haml
+++ b/app/views/shared/_global_alert.html.haml
@@ -8,16 +8,14 @@
 - close_button_class = local_assigns.fetch(:close_button_class, nil)
 - close_button_data = local_assigns.fetch(:close_button_data, nil)
 - icon = icons[variant]
-- alert_container_class = [container_class, @content_class] unless fluid_layout || local_assigns.fetch(:is_contained, false)
 
 %div{ role: 'alert', class: ['gl-alert', "gl-alert-#{variant}", alert_class], data: alert_data }
-  .gl-alert-container{ class: alert_container_class }
-    = sprite_icon(icon, size: 16, css_class: "gl-alert-icon#{' gl-alert-icon-no-title' if title.nil?}")
-    - if dismissible
-      %button.btn.gl-dismiss-btn.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-close{ type: 'button', aria: { label: _('Dismiss') }, class: close_button_class, data: close_button_data }
-        = sprite_icon('close', size: 16)
-    .gl-alert-content{ role: 'alert' }
-      - if title
-        %h4.gl-alert-title
-          = title
-      = yield
+  = sprite_icon(icon, css_class: "gl-alert-icon#{' gl-alert-icon-no-title' if title.nil?}")
+  - if dismissible
+    %button.btn.gl-dismiss-btn.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-close{ type: 'button', aria: { label: _('Dismiss') }, class: close_button_class, data: close_button_data }
+      = sprite_icon('close')
+  .gl-alert-content{ role: 'alert' }
+    - if title
+      %h4.gl-alert-title
+        = title
+    = yield
diff --git a/app/views/shared/_logo_ukraine.svg b/app/views/shared/_logo_ukraine.svg
new file mode 100644
index 00000000000..e2c2bb3855d
--- /dev/null
+++ b/app/views/shared/_logo_ukraine.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" class="tanuki-logo" viewBox="0 0 24 24">
+  <path d="M4.89929534,0.3165 L7.56629534,8.5025 L16.3922953,8.5025 L19.0592953,0.3165 C19.1962953,-0.1055 19.8432953,-0.1055 19.9792953,0.3165 L23.9122953,12.6095 C23.9722953,12.7935 23.9722953,12.9895 23.9192953,13.1695 L0.0392953418,13.1695 C-0.0143874393,12.9863283 -0.0119492421,12.7912726 0.0462953418,12.6095 L3.97929534,0.3165 C4.11529534,-0.1055 4.76229534,-0.1055 4.89929534,0.3165 Z" id="Path" fill="#005BBB"></path>
+  <path d="M7.20329534,9.0025 L16.7552953,9.0025 L16.8682953,8.6575 L19.5182953,0.5185 L23.4362953,12.7615 C23.4961172,12.9376949 23.435535,13.1323657 23.2862953,13.2435 L23.2852953,13.2455 L11.9852953,21.4655 L11.9792953,21.4715 L0.673295342,13.2455 C0.522422013,13.1321007 0.462258936,12.9374792 0.522295342,12.7615 L4.43929534,0.5185 L7.09029534,8.6585 L7.20329534,9.0025 Z" id="Shape" stroke="#FFFFFF" opacity="0.32" stroke-linejoin="round"></path>
+  <path d="M0.0012953418,12.8575 C-0.0152229638,13.1685309 0.127095079,13.4667211 0.379295342,13.6495 L11.9792953,22.0895 L11.9862953,22.0845 L11.9922953,22.0895 L11.9872953,22.0835 L23.5792953,13.6495 C23.8319507,13.466647 23.9743476,13.1679148 23.9572953,12.8565 L0.0012953418,12.8565 L0.0012953418,12.8575 Z" id="Path" fill="#FFD500"></path>
+</svg>
\ No newline at end of file
diff --git a/app/views/shared/_new_project_item_select.html.haml b/app/views/shared/_new_project_item_select.html.haml
index 08003346d09..74a397d7a03 100644
--- a/app/views/shared/_new_project_item_select.html.haml
+++ b/app/views/shared/_new_project_item_select.html.haml
@@ -1,7 +1,7 @@
 - if any_projects?(@projects)
   .project-item-select-holder.btn-group.gl-ml-auto.gl-mr-auto.gl-relative.gl-overflow-hidden{ class: 'gl-display-flex!' }
     %a.btn.gl-button.btn-confirm.js-new-project-item-link.block-truncated.qa-new-project-item-link{ href: '', data: { label: local_assigns[:label], type: local_assigns[:type] }, class: "gl-m-0!" }
-      = loading_icon(color: 'light')
+      = gl_loading_icon(inline: true, color: 'light')
     = project_select_tag :project_path, class: "project-item-select gl-absolute! gl-visibility-hidden", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at', relative_path: local_assigns[:path], with_shared: local_assigns[:with_shared], include_projects_in_subgroups: local_assigns[:include_projects_in_subgroups] }, with_feature_enabled: local_assigns[:with_feature_enabled]
     %button.btn.dropdown-toggle.btn-confirm.btn-md.gl-button.gl-dropdown-toggle.dropdown-toggle-split.new-project-item-select-button.qa-new-project-item-select-button.gl-p-0.gl-w-100{ class: "gl-m-0!", 'aria-label': _('Toggle project select') }
       = sprite_icon('chevron-down')
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 821d92e9d7e..9cdff35ead2 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,7 +1,6 @@
 - if session[:ask_for_usage_stats_consent]
   = render 'shared/global_alert',
     variant: :info,
-    is_contained: true,
     alert_class: 'service-ping-consent-message' do
     .gl-alert-body
       - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
diff --git a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
index e7239661313..f21acd26ada 100644
--- a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
+++ b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
@@ -1,6 +1,6 @@
 = render 'shared/global_alert',
   variant: :warning,
-  alert_class: 'js-recovery-settings-callout',
+  alert_class: 'js-recovery-settings-callout gl-mt-5',
   alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK, dismiss_endpoint: callouts_path, defer_links: 'true' },
   close_button_data: { testid: 'close-account-recovery-regular-check-callout' } do
   .gl-alert-body
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index a52b7236137..0b68cfe65e5 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -19,18 +19,14 @@
       .row
         = f.label :name, _('Token name'), class: 'label-bold col-md-12'
         .col-md-6
+          - resource_type = resource.is_a?(Group) ? "group" : "project"
           = f.text_field :name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
-        %span.form-text.text-muted.col-md-12#access_token_help_text= _('For example, the application using the token or the purpose of the token.')
+        %span.form-text.text-muted.col-md-12#access_token_help_text= _("For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
 
   .row
-    .form-group.col-md-6
-      = f.label :expires_at, _('Expiration date'), class: 'label-bold'
-      .input-icon-wrapper
-
-        = render_if_exists 'personal_access_tokens/callout_max_personal_access_token_lifetime'
-
-        .js-access-tokens-expires-at
-          = f.text_field :expires_at, class: 'datepicker gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { js_name: 'expiresAt' }
+    .col
+      .js-access-tokens-expires-at{ data: expires_at_field_data }
+        = f.text_field :expires_at, class: 'datepicker gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { js_name: 'expiresAt' }
 
   - if resource
     .row
diff --git a/app/views/shared/blob/_markdown_buttons.html.haml b/app/views/shared/blob/_markdown_buttons.html.haml
index e02c24b93f1..60641006e96 100644
--- a/app/views/shared/blob/_markdown_buttons.html.haml
+++ b/app/views/shared/blob/_markdown_buttons.html.haml
@@ -9,6 +9,10 @@
                               data: { "md-tag" => "_", "md-shortcuts": '["mod+i"]' },
                               title: sprintf(s_("MarkdownEditor|Add italic text (%{modifier_key}I)") % { modifier_key: modifier_key }) })
 
+  = markdown_toolbar_button({ icon: "strikethrough",
+                              data: { "md-tag" => "~~", "md-shortcuts": '["mod+shift+x"]' },
+                              title: sprintf(s_("MarkdownEditor|Add strikethrough text (%{modifier_key}⇧X)") % { modifier_key: modifier_key }) })
+
   = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: _("Insert a quote") })
   = markdown_toolbar_button({ icon: "code", data: { "md-tag" => "`", "md-block" => "```" }, title: _("Insert code") })
 
diff --git a/app/views/shared/buttons/_project_feature_toggle.html.haml b/app/views/shared/buttons/_project_feature_toggle.html.haml
deleted file mode 100644
index 321fbee1b35..00000000000
--- a/app/views/shared/buttons/_project_feature_toggle.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-- class_list ||= "js-project-feature-toggle project-feature-toggle"
-- data ||= nil
-- disabled ||= false
-- is_checked ||= false
-- label ||= nil
-
-%button{ type: 'button',
-         class: "#{class_list} #{'is-disabled' if disabled} #{'is-checked' if is_checked}",
-         "aria-label": label,
-         disabled: disabled,
-         data: data }
-  - if yield.present?
-    = yield
-  %span.toggle-icon
-    = sprite_icon('status_success_borderless', size: 18, css_class: 'gl-text-blue-500 toggle-status-checked')
-    = sprite_icon('status_failed_borderless', size: 18, css_class: 'gl-text-gray-400 toggle-status-unchecked')
diff --git a/app/views/shared/deploy_tokens/_table.html.haml b/app/views/shared/deploy_tokens/_table.html.haml
index db9c646b694..a7bf3bfb81e 100644
--- a/app/views/shared/deploy_tokens/_table.html.haml
+++ b/app/views/shared/deploy_tokens/_table.html.haml
@@ -25,7 +25,7 @@
                 %span.token-never-expires-label= _('Never')
             %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
             %td
-              .js-deploy-token-revoke-button{ data: { button_class: 'float-right', token: token.to_json, revoke_path: revoke_deploy_token_path(group_or_project, token) } }
+              .js-deploy-token-revoke-button{ data: deploy_token_revoke_button_data(token: token, group_or_project: group_or_project) }
 
 - else
   .settings-message.text-center
diff --git a/app/views/shared/doorkeeper/applications/_delete_form.html.haml b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
index caa553bc2ef..7cce0652f6f 100644
--- a/app/views/shared/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
@@ -2,9 +2,9 @@
 = form_tag path do
   %input{ :name => "_method", :type => "hidden", :value => "delete" }
   - if defined? small
-    = button_tag type: "submit", class: "gl-button btn btn-danger btn-icon", data: { confirm: _("Are you sure?") } do
+    = button_tag type: "submit", class: "gl-button btn btn-danger btn-icon", data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } do
       %span.sr-only
         = _('Destroy')
       = sprite_icon('remove')
   - else
-    = submit_tag _('Destroy'), data: { confirm: _("Are you sure?") }, class: submit_btn_css
+    = submit_tag _('Destroy'), data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Destroy') }, class: submit_btn_css
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index 96a68cbcdc6..366d4585435 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,8 +1,7 @@
-.gl-alert.gl-alert-danger.gl-mb-5.gl-mt-5
-  .gl-alert-container
-    = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-    .gl-alert-content
-      .gl-alert-title
-        = reason
-      .gl-alert-body
-        = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')
+= render 'shared/global_alert',
+  alert_class: 'gl-my-5',
+  variant: :danger,
+  dismissible: false,
+  title: reason do
+  .gl-alert-body
+    = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index ae896b7348d..3f6e7a6fb32 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -9,7 +9,6 @@
   = render 'shared/global_alert',
     variant: :danger,
     dismissible: false,
-    is_contained: true,
     alert_class: 'gl-mb-5' do
     .gl-alert-body
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
@@ -20,7 +19,9 @@
 = render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form
 
 .form-group.row
-  = form.label :title, class: 'col-form-label col-sm-2'
+  = form.label :title, class: 'col-form-label col-sm-2' do
+    = _('Title')
+    %i{ aria: { hidden: true } }= '*'
 
   = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?)
 #js-suggestions{ data: { project_path: @project.full_path } }
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index 84cdf129cb2..6a58acf8c05 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -6,10 +6,7 @@
 .dropdown-page-two.dropdown-new-label
   = dropdown_title(create_label_title(subject), options: { back: true, close: show_close })
   = dropdown_content do
-    .js-label-error.gl-alert.gl-alert-danger.gl-mb-3
-      .gl-alert-container
-        = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-      .gl-alert-content
+    = render 'shared/global_alert', variant: :danger, alert_class: 'js-label-error gl-mb-3', dismissible: false
     %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') }
     .suggest-colors.suggest-colors-dropdown
       = render_suggested_colors
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index b02c6b65359..37a79a50fb1 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -5,10 +5,6 @@
 - placeholder = local_assigns[:placeholder] || _('Search or filter results...')
 - block_css_class = type != :productivity_analytics ? 'row-content-block second-block' : ''
 - is_epic_board = board&.to_type == "EpicBoard"
-- if @group.present?
-  - ff_resource = @group
-- else
-  - ff_resource = board&.resource_parent&.group
 
 - if is_epic_board
   - user_can_admin_list = can?(current_user, :admin_epic_board_list, board.resource_parent)
@@ -31,7 +27,7 @@
             = check_box_tag checkbox_id, nil, false, class: "check-all-issues left"
         - if is_epic_board
           #js-board-filtered-search{ data: { full_path: @group&.full_path } }
-        - elsif Feature.enabled?(:issue_boards_filtered_search, ff_resource, default_enabled: :yaml) && board
+        - elsif board
           #js-issue-board-filtered-search
         - else
           .issues-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 7787e5dd660..37d31515307 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -27,7 +27,7 @@
 
       - if issuable_sidebar[:supports_escalation]
         .block.escalation-status{ data: { testid: 'escalation_status_container' } }
-          #js-escalation-status{ data: { can_edit: issuable_sidebar.dig(:current_user, :can_update_escalation_status).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
+          #js-escalation-status{ data: { can_update: issuable_sidebar.dig(:current_user, :can_update_escalation_status).to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
         = render_if_exists 'shared/issuable/sidebar_escalation_policy', issuable_sidebar: issuable_sidebar
 
       - if @project.group.present?
@@ -41,7 +41,7 @@
         .block{ class: 'gl-pt-0! gl-collapse-empty', data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }<
           = render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
 
-      - if @show_crm_contacts
+      - if issuable_sidebar[:show_crm_contacts]
         .block.contact
           #js-issue-crm-contacts{ data: { issue_id: issuable_sidebar[:id] } }
 
@@ -50,7 +50,7 @@
           // Fallback while content is loading
           .title.hide-collapsed
             = _('Time tracking')
-            = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+            = gl_loading_icon(inline: true)
       - if issuable_sidebar.has_key?(:due_date)
         #js-due-date-entry-point
 
@@ -109,8 +109,8 @@
               = dropdown_loading
               = dropdown_footer add_content_class: true do
                 %button.gl-button.btn.btn-confirm.sidebar-move-issue-confirmation-button.js-move-issue-confirmation-button{ type: 'button', disabled: true }
+                  = gl_loading_icon(inline: true, css_class: 'sidebar-move-issue-confirmation-loading-icon gl-mr-2')
                   = _('Move')
-                  = loading_icon(css_class: 'gl-vertical-align-text-bottom sidebar-move-issue-confirmation-loading-icon')
 
     -# haml-lint:disable InlineJavaScript
     %script.js-sidebar-options{ type: "application/json" }= issuable_sidebar_options(issuable_sidebar).to_json.html_safe
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 9a0b25f4015..2fd4c598580 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -7,7 +7,7 @@
   directly_invite_members: can_admin_project_member?(@project) } }
   .title.hide-collapsed
     = _('Assignee')
-    = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+    = gl_loading_icon(inline: true)
 
 .js-sidebar-assignee-data.selectbox.hide-collapsed
   - if assignees.none?
diff --git a/app/views/shared/issuable/_sidebar_reviewers.html.haml b/app/views/shared/issuable/_sidebar_reviewers.html.haml
index bc76d292dd6..ce252e74570 100644
--- a/app/views/shared/issuable/_sidebar_reviewers.html.haml
+++ b/app/views/shared/issuable/_sidebar_reviewers.html.haml
@@ -3,7 +3,7 @@
 #js-vue-sidebar-reviewers{ data: { field: issuable_type, signed_in: signed_in } }
   .title.hide-collapsed
     = _('Reviewer')
-    = loading_icon(css_class: 'gl-vertical-align-text-bottom')
+    = gl_loading_icon(inline: true)
 
 .selectbox.hide-collapsed
   - if reviewers.none?
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 9e42c528a11..34720576526 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -4,6 +4,16 @@
 - has_due_date = issuable.has_attribute?(:due_date)
 - form = local_assigns.fetch(:form)
 
+- if @add_related_issue
+  .form-group.row
+    .offset-sm-2.col-sm-10
+      .form-check
+        = check_box_tag :add_related_issue, @add_related_issue.iid, true, class: 'form-check-input'
+        = label_tag :add_related_issue, class: 'form-check-label' do
+          - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title
+          #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }}
+          %p.text-muted= _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type }
+
 - if issuable.respond_to?(:confidential) && can?(current_user, :set_confidentiality, issuable)
   .form-group.row
     .offset-sm-2.col-sm-10
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index 257ad7a8518..6b00cdc5e24 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -8,9 +8,9 @@
 - add_wip_text = (_('%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft:</code>'.html_safe } ).html_safe
 - remove_wip_text = (_('%{link_start}Remove the %{draft_snippet} prefix%{link_end} from the title to allow this merge request to be merged when it\'s ready.' ) % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft</code>'.html_safe } ).html_safe
 
-%div{ class: div_class }
-  = form.text_field :title, required: true, maxlength: 255, autofocus: true,
-      autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
+%div{ class: div_class, data: { testid: 'issue-title-input-field' } }
+  = form.text_field :title, required: true, aria: { required: true }, maxlength: 255, autofocus: true,
+    autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
 
   - if issuable.respond_to?(:work_in_progress?)
     .form-text.text-muted
diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml
index e5197acf06f..1babc6885c2 100644
--- a/app/views/shared/issue_type/_details_content.html.haml
+++ b/app/views/shared/issue_type/_details_content.html.haml
@@ -5,7 +5,7 @@
   .detail-page-description.content-block
     #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, full_path: @project.full_path } }
       .title-container
-        %h2.title= markdown_field(issuable, :title)
+        %h1.title= markdown_field(issuable, :title)
       - if issuable.description.present?
         .description
           .md= markdown_field(issuable, :description)
diff --git a/app/views/shared/labels/_sort_dropdown.html.haml b/app/views/shared/labels/_sort_dropdown.html.haml
index cfc00bd41ca..bb582b159ba 100644
--- a/app/views/shared/labels/_sort_dropdown.html.haml
+++ b/app/views/shared/labels/_sort_dropdown.html.haml
@@ -1,9 +1,3 @@
-- sort_title = label_sort_options_hash[@sort] || sort_title_name_desc
-.dropdown.inline
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
-    = sort_title
-    = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
-    %li
-      - label_sort_options_hash.each do |value, title|
-        = sortable_item(title, page_filter_path(sort: value), sort_title)
+- label_sort_options = label_sort_options_hash.map { |value, text| { value: value, text: text, href: page_filter_path(sort: value) } }
+
+= gl_redirect_listbox_tag label_sort_options, @sort, data: { right: true }
diff --git a/app/views/shared/members/_invite_group.html.haml b/app/views/shared/members/_invite_group.html.haml
deleted file mode 100644
index cefdf825eaa..00000000000
--- a/app/views/shared/members/_invite_group.html.haml
+++ /dev/null
@@ -1,30 +0,0 @@
-- access_levels = local_assigns[:access_levels]
-- default_access_level = local_assigns[:default_access_level]
-- submit_url = local_assigns[:submit_url]
-- group_link_field = local_assigns[:group_link_field]
-- group_access_field = local_assigns[:group_access_field]
-- groups_select_tag_data = local_assigns[:groups_select_tag_data]
-
-.row
-  .col-sm-12
-    = form_tag submit_url, class: 'invite-group-form js-requires-input', method: :post do
-      .form-group
-        = label_tag group_link_field, _("Select a group to invite"), class: "label-bold"
-        = groups_select_tag(group_link_field, data: groups_select_tag_data, class: 'input-clamp qa-group-select-field', required: true)
-        .form-text.text-muted.gl-mb-3
-          = _('Group sharing provides access to all group members (including members who inherited group membership from a parent group).')
-      .form-group
-        = label_tag group_access_field, _("Max role"), class: "label-bold"
-        .select-wrapper
-          = select_tag group_access_field, options_for_select(access_levels, default_access_level), data: { qa_selector: 'group_access_field' }, class: "form-control select-control"
-          = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
-        .form-text.text-muted.gl-mb-3
-          - permissions_docs_path = help_page_path('user/permissions')
-          - link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
-          = _("%{link_start}Learn more%{link_end} about roles.").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      .form-group
-        = label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
-        .clearable-input
-          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: _('Expiration date'), id: 'expires_at_groups'
-          = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
-      = submit_tag _("Invite"), class: "gl-button btn btn-confirm gl-mr-3", data: { qa_selector: 'invite_group_button' }
diff --git a/app/views/shared/members/_invite_member.html.haml b/app/views/shared/members/_invite_member.html.haml
deleted file mode 100644
index e6863ed56a5..00000000000
--- a/app/views/shared/members/_invite_member.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-- access_levels = local_assigns[:access_levels]
-- default_access_level = local_assigns[:default_access_level]
-- submit_url = local_assigns[:submit_url]
-- can_import_members = local_assigns[:can_import_members?]
-- import_path = local_assigns[:import_path]
-.row
-  .col-sm-12
-    = form_tag submit_url, class: 'invite-users-form', data: { testid: 'invite-users-form' }, method: :post do
-      .form-group
-        = label_tag :user_ids, _("GitLab member or Email address"), class: "label-bold"
-        = users_select_tag(:user_ids, multiple: true, class: 'input-clamp qa-member-select-field', scope: :all, email_user: true, placeholder: 'Search for members to update or invite')
-      .form-group
-        = label_tag :access_level, _("Select a role"), class: "label-bold"
-        .select-wrapper
-          = select_tag :access_level, options_for_select(access_levels, default_access_level), class: "form-control project-access-select select-control"
-          = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
-        .form-text.text-muted.gl-mb-3
-          - permissions_docs_path = help_page_path('user/permissions')
-          - link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
-          = _("%{link_start}Learn more%{link_end} about roles.").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      .form-group
-        = label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
-        .clearable-input
-          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
-          = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
-      = submit_tag _("Invite"), class: "gl-button btn btn-confirm gl-mr-2", data: { qa_selector: 'invite_member_button' }
-      - if can_import_members
-        = link_to _("Import"), import_path, class: "gl-button btn btn-default", title: _("Import members from another project")
diff --git a/app/views/shared/milestones/_delete_button.html.haml b/app/views/shared/milestones/_delete_button.html.haml
index 6d4ff255f06..8a709a36835 100644
--- a/app/views/shared/milestones/_delete_button.html.haml
+++ b/app/views/shared/milestones/_delete_button.html.haml
@@ -6,7 +6,7 @@
   milestone_issue_count: @milestone.issues.count,
   milestone_merge_request_count: @milestone.merge_requests.count },
   disabled: true }
+  = gl_loading_icon(inline: true, css_class: "gl-mr-2 js-loading-icon hidden")
   = _('Delete')
-  .gl-spinner.js-loading-icon.hidden
 
 #js-delete-milestone-modal
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 1c25fae747e..5b05fdb6019 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -3,7 +3,6 @@
 - if milestone.complete? && milestone.active?
   = render 'shared/global_alert',
     variant: :success,
-    is_contained: true,
     alert_data: { testid: 'all-issues-closed-alert' },
     dismissible: false do
     .gl-alert-body
diff --git a/app/views/shared/milestones/_tab_loading.html.haml b/app/views/shared/milestones/_tab_loading.html.haml
index b19e994ef80..ebd4ef7d4c3 100644
--- a/app/views/shared/milestones/_tab_loading.html.haml
+++ b/app/views/shared/milestones/_tab_loading.html.haml
@@ -1,2 +1 @@
-.text-center.gl-mt-3
-  .gl-spinner.gl-spinner-md
+= gl_loading_icon(size: 'md', css_class: 'gl-mt-3')
diff --git a/app/views/shared/nav/_sidebar_submenu.html.haml b/app/views/shared/nav/_sidebar_submenu.html.haml
index 750e6c9ee57..344dafe7c0f 100644
--- a/app/views/shared/nav/_sidebar_submenu.html.haml
+++ b/app/views/shared/nav/_sidebar_submenu.html.haml
@@ -4,7 +4,7 @@
       %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 }
+        = gl_badge_tag({ variant: :info, size: :sm }, { class: "count fly-out-badge #{sidebar_menu.pill_html_options[:class]}" }) do
           = number_with_delimiter(sidebar_menu.pill_count)
 
   - if sidebar_menu.has_renderable_items?
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
index 6c8b2a9e5bb..8a79a17b166 100644
--- a/app/views/shared/notes/_hints.html.haml
+++ b/app/views/shared/notes/_hints.html.haml
@@ -18,7 +18,7 @@
         %span.attaching-file-message
           -# Populated by app/assets/javascripts/dropzone_input.js
         %span.uploading-progress 0%
-        = loading_icon(css_class: 'align-text-bottom gl-mr-2')
+        = gl_loading_icon(inline: true, css_class: 'gl-mr-2')
 
       %span.uploading-error-container.hide
         %span.uploading-error-icon
diff --git a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
index 3cbe35e5c15..32b9044c551 100644
--- a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
+++ b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
@@ -34,4 +34,7 @@
       = _('Members of %{group} can also push to this branch: %{branch}') % { group: (group_push_access_levels.size > 1 ? 'these groups' : 'this group'), branch: group_push_access_levels.map(&:humanize).to_sentence }
 
 %td
-  = render "shared/buttons/project_feature_toggle", is_checked: protected_branch.allow_force_push, label: s_("ProtectedBranch|Toggle allowed to force push"), class_list: "js-force-push-toggle project-feature-toggle", data: { qa_selector: 'force_push_toggle_button', qa_branch_name: protected_branch.name }
+  = render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
+    label: s_("ProtectedBranch|Toggle allowed to force push"),
+    is_checked: protected_branch.allow_force_push,
+    label_position: :hidden)
diff --git a/app/views/shared/web_hooks/_hook_errors.html.haml b/app/views/shared/web_hooks/_hook_errors.html.haml
index 23010b8349c..03f373783f8 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/app/views/shared/web_hooks/_hook_errors.html.haml
@@ -13,7 +13,6 @@
   = render 'shared/global_alert',
     title: s_('Webhooks|Webhook was automatically disabled'),
     variant: :danger,
-    is_contained: true,
     close_button_class: 'js-close' do
     .gl-alert-body
       = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
@@ -21,7 +20,6 @@
   = render 'shared/global_alert',
     title: s_('Webhooks|Webhook failed to connect'),
     variant: :danger,
-    is_contained: true,
     close_button_class: 'js-close' do
     .gl-alert-body
       = s_('Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % { strong_start: strong_start, strong_end: strong_end }
@@ -35,7 +33,6 @@
   = render 'shared/global_alert',
     title: s_('Webhooks|Webhook fails to connect'),
     variant: :warning,
-    is_contained: true,
     close_button_class: 'js-close' do
     .gl-alert-body
       = s_('Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % placeholders
diff --git a/app/views/shared/wikis/pages.html.haml b/app/views/shared/wikis/pages.html.haml
index 0a8ca309823..abe7753b9f1 100644
--- a/app/views/shared/wikis/pages.html.haml
+++ b/app/views/shared/wikis/pages.html.haml
@@ -1,8 +1,8 @@
 - add_to_breadcrumbs _('Wiki'), wiki_path(@wiki)
 - breadcrumb_title s_("Wiki|Pages")
 - page_title s_("Wiki|Pages"), _("Wiki")
-- sort_title = wiki_sort_title(params[:sort])
 - add_page_specific_style 'page_bundles/wiki'
+- wiki_sort_options = [{ text: s_("Wiki|Title"), value: 'title', href: wiki_path(@wiki, action: :pages, sort: Wiki::TITLE_ORDER)}, { text: s_("Wiki|Created date"), value: 'created_at', href: wiki_path(@wiki, action: :pages, sort: Wiki::CREATED_AT_ORDER) }]
 
 .wiki-page-header.top-area.flex-column.flex-lg-row
   %h3.page-title.gl-flex-grow-1
@@ -15,14 +15,7 @@
 
     .dropdown.inline.wiki-sort-dropdown
       .btn-group{ role: 'group' }
-        .btn-group{ role: 'group' }
-          %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn gl-button btn-default' }
-            = sort_title
-            = sprite_icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-            %li
-              = sortable_item(s_("Wiki|Title"), wiki_path(@wiki, action: :pages, sort: Wiki::TITLE_ORDER), sort_title)
-              = sortable_item(s_("Wiki|Created date"), wiki_path(@wiki, action: :pages, sort: Wiki::CREATED_AT_ORDER), sort_title)
+        = gl_redirect_listbox_tag wiki_sort_options, params[:sort], data: { right: true }
         = wiki_sort_controls(@wiki, params[:sort], params[:direction])
 
 %ul.wiki-pages-list.content-list