Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

29 files changed, 197 insertions, 164 deletions

diff --git a/app/views/shared/_allow_request_access.html.haml b/app/views/shared/_allow_request_access.html.haml
index 93868f13e58..ca09fd39dc1 100644
--- a/app/views/shared/_allow_request_access.html.haml
+++ b/app/views/shared/_allow_request_access.html.haml
@@ -1,6 +1,6 @@
 - label_class = local_assigns.fetch(:bold_label, false) ? 'font-weight-bold' : ''
 
-.gl-form-checkbox.custom-control.custom-checkbox
-  = form.check_box :request_access_enabled, class: 'custom-control-input', data: { qa_selector: 'request_access_checkbox' }
-  = form.label :request_access_enabled, class: 'custom-control-label' do
-    %span{ class: label_class }= _('Allow users to request access (if visibility is public or internal)')
+= form.gitlab_ui_checkbox_component :request_access_enabled,
+    _('Allow users to request access (if visibility is public or internal)'),
+    label_options: { class: label_class },
+    checkbox_options: { data: { qa_selector: 'request_access_checkbox' } }
diff --git a/app/views/shared/_captcha_check.html.haml b/app/views/shared/_captcha_check.html.haml
new file mode 100644
index 00000000000..3d611c22491
--- /dev/null
+++ b/app/views/shared/_captcha_check.html.haml
@@ -0,0 +1,37 @@
+- resource_name = spammable.class.model_name.singular
+- humanized_resource_name = spammable.class.model_name.human.downcase
+- script = local_assigns.fetch(:script, true)
+- method = params[:action] == 'create' ? :post : :put
+
+%h3.page-title
+  = _('Anti-spam verification')
+%hr
+
+%p
+  = _("We detected potential spam in the %{humanized_resource_name}. Please solve the reCAPTCHA to proceed.") % { humanized_resource_name: humanized_resource_name }
+
+= form_for resource_name, method: method, html: { class: 'recaptcha-form js-recaptcha-form' } do |f|
+  .recaptcha
+    -# Create a hidden field for each param of the resource
+    - params[resource_name].each do |field, value|
+      = hidden_field(resource_name, field, value: value)
+
+    -# The reCAPTCHA response value will be returned in the 'g-recaptcha-response' field in non-test environments
+    = recaptcha_tags script: script, callback: 'recaptchaDialogCallback', nonce: content_security_policy_nonce unless Rails.env.test?
+
+    -# Fake the 'g-recaptcha-response' field in the test environment, so that the feature spec
+    -# can get to the (mocked) SpamVerdictService check.
+    = hidden_field_tag('g-recaptcha-response', 'abc123') if Rails.env.test?
+
+    -# Create a hidden field to pass back the ID of the spam_log record which was previously created
+    = hidden_field_tag(:spam_log_id, spammable.spam_log.id)
+
+    -# Yields a block with given extra params which are not included in `params[resource_name]`.
+    -# Currently, this is only used for these params which are passed via URL parameters,
+    -# and can be removed once they are no longer needed to be passed:
+    -# - merge_request_to_resolve_discussions_of
+    -# - discussion_to_resolve
+    = yield
+
+  .row-content-block.footer-block
+    = f.submit _("Create %{humanized_resource_name}") % { humanized_resource_name: humanized_resource_name }, class: 'gl-button btn btn-confirm'
diff --git a/app/views/shared/_check_recovery_settings.html.haml b/app/views/shared/_check_recovery_settings.html.haml
index 7ac90e5af03..2ba0cca9ef6 100644
--- a/app/views/shared/_check_recovery_settings.html.haml
+++ b/app/views/shared/_check_recovery_settings.html.haml
@@ -1,6 +1,11 @@
-.gl-alert.gl-alert-warning.js-recovery-settings-callout{ role: 'alert', data: { feature_id: "account_recovery_regular_check", dismiss_endpoint: user_callouts_path, defer_links: "true" } }
-  %button.js-close.gl-alert-dismiss.gl-cursor-pointer{ type: 'button', 'aria-label' => _('Dismiss') }
-    = sprite_icon('close', css_class: 'gl-icon')
+= render 'shared/global_alert',
+  variant: :warning,
+  alert_class: 'js-recovery-settings-callout',
+  alert_data: { feature_id: 'account_recovery_regular_check', dismiss_endpoint: user_callouts_path, defer_links: 'true' },
+  close_button_data: { testid: 'close-account-recovery-regular-check-callout' } do
   .gl-alert-body
-    - account_link_start = '<a class="deferred-link" href="%{url}">'.html_safe % { url: profile_account_path }
-    = _("Please ensure your account's %{account_link_start}recovery settings%{account_link_end} are up to date.").html_safe % { account_link_start: account_link_start, account_link_end: '</a>'.html_safe }
+    = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.')
+    = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer'
+  .gl-alert-actions
+    = link_to profile_two_factor_auth_path, class: 'deferred-link btn gl-alert-action btn-confirm btn-md gl-button' do
+      = s_('Profiles|Manage two-factor authentication')
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index e96372a29db..63468340992 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -25,7 +25,8 @@
       = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' },
         autofocus: local_assigns[:autofocus] || false, required: true,
         pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-        title: _('Please choose a group URL with no special characters.'),
+        title: group_url_error_message,
+        maxlength: ::Namespace::URL_MAX_LENGTH,
         "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
     %p.validation-error.gl-field-error.field-validation.hide
       = _("Group path is already taken. We've suggested one that is available.")
diff --git a/app/views/shared/_recaptcha_form.html.haml b/app/views/shared/_recaptcha_form.html.haml
deleted file mode 100644
index ae0a22fd255..00000000000
--- a/app/views/shared/_recaptcha_form.html.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-- resource_name = spammable.class.model_name.singular
-- humanized_resource_name = spammable.class.model_name.human.downcase
-- script = local_assigns.fetch(:script, true)
-- method = params[:action] == 'create' ? :post : :put
-- has_submit = local_assigns.fetch(:has_submit, true)
-
-= form_for resource_name, method: method, html: { class: 'recaptcha-form js-recaptcha-form' } do |f|
-  .recaptcha
-    - params[resource_name].each do |field, value|
-      = hidden_field(resource_name, field, value: value)
-    = hidden_field_tag(:spam_log_id, spammable.spam_log.id)
-    -# The reCAPTCHA response value will be returned in the 'g-recaptcha-response' field
-    = recaptcha_tags script: script, callback: 'recaptchaDialogCallback', nonce: content_security_policy_nonce unless Rails.env.test?
-    -# Fake the 'g-recaptcha-response' field in the test environment, so that the feature spec
-    -# can get to the (mocked) SpamVerdictService check.
-    = hidden_field_tag('g-recaptcha-response', 'abc123') if Rails.env.test?
-
-    -# Yields a block with given extra params.
-    = yield
-
-  - if has_submit
-    .row-content-block.footer-block
-      = f.submit _("Create %{humanized_resource_name}") % { humanized_resource_name: humanized_resource_name }, class: 'gl-button btn btn-confirm'
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 77597124e5c..821d92e9d7e 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,8 +1,8 @@
 - if session[:ask_for_usage_stats_consent]
-  .service-ping-consent-message.gl-alert.gl-alert-info
-    = sprite_icon('information-o', 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', css_class: 'gl-icon')
+  = 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'
       - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'
@@ -11,4 +11,4 @@
       - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 })
       - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 })
       = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info'
-      = link_to _("Don't send service data"), not_now_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': false, 'data-service-ping-enabled': false, class: 'js-service-ping-consent-action alert-link btn gl-button btn-default gl-ml-2'
+      = link_to _("Don't send service data"), not_now_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': false, 'data-service-ping-enabled': false, class: 'js-service-ping-consent-action alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/access_tokens/_table.html.haml b/app/views/shared/access_tokens/_table.html.haml
index 1f08bff9858..33d6b9573d4 100644
--- a/app/views/shared/access_tokens/_table.html.haml
+++ b/app/views/shared/access_tokens/_table.html.haml
@@ -7,6 +7,7 @@
 
 %h5
   = _('Active %{type} (%{token_length})') % { type: type_plural, token_length: active_tokens.length }
+
 - if personal && !personal_access_token_expiration_enforced?
   %p.profile-settings-content
     = _("Personal access tokens are not revoked upon expiration.")
@@ -14,6 +15,9 @@
   %p.profile-settings-content
     = _("To see all the user's personal access tokens you must impersonate them first.")
 
+- if personal
+  = render_if_exists 'profiles/personal_access_tokens/token_expiry_notification', active_tokens: active_tokens
+
 - if active_tokens.present?
   .table-responsive
     %table.table.active-tokens
@@ -42,7 +46,7 @@
                 %span.token-never-used-label= _('Never')
             %td
               - if token.expires?
-                - if token.expires_at.past? || token.expires_at.today?
+                - if token.expired? || token.expired_but_not_enforced?
                   %span{ class: 'text-danger has-tooltip', title: _('Token valid until revoked') }
                     = _('Expired')
                 - else
diff --git a/app/views/shared/blob/_markdown_buttons.html.haml b/app/views/shared/blob/_markdown_buttons.html.haml
index 033ed69da41..e02c24b93f1 100644
--- a/app/views/shared/blob/_markdown_buttons.html.haml
+++ b/app/views/shared/blob/_markdown_buttons.html.haml
@@ -24,5 +24,5 @@
                               title: _("Add a collapsible section") })
   = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
   - if show_fullscreen_button
-    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
+    %button.gl-button.btn.btn-default-tertiary.btn-icon.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
       = sprite_icon("maximize")
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index 9ccd5655fb0..a49c17e9265 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -4,7 +4,8 @@
 - @no_container = true
 - @content_wrapper_class = "#{@content_wrapper_class} gl-relative"
 - @content_class = "issue-boards-content js-focus-mode-board"
-- if board.to_type == "EpicBoard"
+- is_epic_board = board.to_type == "EpicBoard"
+- if is_epic_board
   - breadcrumb_title _("Epic Boards")
 - else
   - breadcrumb_title _("Issue Boards")
@@ -19,5 +20,6 @@
 = render 'shared/issuable/search_bar', type: :boards, board: board
 #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
   %board-content{ ":lists" => "state.lists", ":disabled" => "disabled" }
-  = render "shared/boards/components/sidebar", group: group
+  - if !is_epic_board && !Feature.enabled?(:graphql_board_lists, default_enabled: :yaml)
+    = render "shared/boards/components/sidebar", group: group
   %board-settings-sidebar
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index 5d351bd11fd..e7bbb351633 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -1,5 +1,7 @@
 %p.profile-settings-content
-  = s_("DeployTokens|Pick a name for your unique deploy token.")
+  - group_deploy_tokens_help_link_url = help_page_path('user/project/deploy_tokens/index.md')
+  - group_deploy_tokens_help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_deploy_tokens_help_link_url }
+  = s_('DeployTokens|Create a new deploy token for all projects in this group. %{link_start}What are deploy tokens?%{link_end}').html_safe % { link_start: group_deploy_tokens_help_link_start, link_end: '</a>'.html_safe }
 
 = form_for token, url: create_deploy_token_path(group_or_project, anchor: 'js-deploy-tokens'), method: :post, remote: Feature.enabled?(:ajax_new_deploy_token, group_or_project) do |f|
   = form_errors(token)
@@ -7,23 +9,26 @@
   .form-group
     = f.label :name, class: 'label-bold'
     = f.text_field :name, class: 'form-control gl-form-input', data: { qa_selector: 'deploy_token_name_field' }, required: true
+    .text-secondary= s_('DeployTokens|Enter a unique name for your deploy token.')
 
   .form-group
-    = f.label :expires_at, _('Expires at (optional)'), class: 'label-bold'
+    = f.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
     = f.text_field :expires_at, class: 'datepicker form-control', data: { qa_selector: 'deploy_token_expires_at_field' }, value: f.object.expires_at
-    .text-secondary= s_('DeployTokens|Unless you enter a date, the token does not expire.')
+    .text-secondary= s_('DeployTokens|Enter an expiration date for your token. Defaults to never expire.')
 
   .form-group
     = f.label :username, _('Username (optional)'), class: 'label-bold'
     = f.text_field :username, class: 'form-control'
-    .text-secondary= s_('DeployTokens|Unless you specify a username, it is set to "gitlab+deploy-token-{n}".')
+    .text-secondary
+      = html_escape(s_('DeployTokens|Enter a username for your token. Defaults to %{code_start}gitlab+deploy-token-{n}%{code_end}.')) % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
   .form-group
-    = f.label :scopes, _('Scopes [Select 1 or more]'), class: 'label-bold'
+    = f.label :scopes, _('Scopes (select at least one)'), class: 'label-bold'
     %fieldset.form-group.form-check
       = f.check_box :read_repository, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_repository_checkbox' }
       = f.label :read_repository, 'read_repository', class: 'label-bold form-check-label'
-      .text-secondary= s_('DeployTokens|Allows read-only access to the repository.')
+      .text-secondary
+        = s_('DeployTokens|Allows read-only access to the repository.')
 
     - if container_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
@@ -34,18 +39,18 @@
       %fieldset.form-group.form-check
         = f.check_box :write_registry, class: 'form-check-input'
         = f.label :write_registry, 'write_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows write access to registry images.')
+        .text-secondary= s_('DeployTokens|Allows read and write access to registry images.')
 
     - if packages_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
         = f.check_box :read_package_registry, class: 'form-check-input', data: { qa_selector: 'deploy_token_read_package_registry_checkbox' }
         = f.label :read_package_registry, 'read_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows read access to the package registry.')
+        .text-secondary= s_('DeployTokens|Allows read-only access to the package registry.')
 
       %fieldset.form-group.form-check
         = f.check_box :write_package_registry, class: 'form-check-input'
         = f.label :write_package_registry, 'write_package_registry', class: 'label-bold form-check-label'
-        .text-secondary= s_('DeployTokens|Allows write access to the package registry.')
+        .text-secondary= s_('DeployTokens|Allows read and write access to the package registry.')
 
   .gl-mt-3
     = f.submit s_('DeployTokens|Create deploy token'), class: 'btn gl-button btn-confirm', data: { qa_selector: 'create_deploy_token_button' }
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index 3e8368b7b78..860fb5614af 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -11,7 +11,7 @@
     - if @new_deploy_token.persisted?
       = render 'shared/deploy_tokens/new_deploy_token', deploy_token: @new_deploy_token
     %h5.gl-mt-0
-      = s_('DeployTokens|Add a deploy token')
+      = s_('DeployTokens|New deploy token')
     = render 'shared/deploy_tokens/form', group_or_project: group_or_project, token: @new_deploy_token, presenter: @deploy_tokens
     %hr
     = render 'shared/deploy_tokens/table', group_or_project: group_or_project, active_tokens: @deploy_tokens
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index b690aa74ff0..8d6b9604c1c 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -1,3 +1,5 @@
+- show_trusted_row = local_assigns.fetch(:show_trusted_row, false)
+
 .table-holder.oauth-application-show
   %table.table
     %tr
@@ -13,11 +15,7 @@
       %td
         = _('Secret')
       %td
-        .clipboard-group
-          .input-group
-            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
-            .input-group-append
-              = clipboard_button(target: '#secret', title: _("Copy secret"), class: "gl-button btn btn-default")
+        = clipboard_button(clipboard_text: @application.secret, button_text: _('Copy'), title: _("Copy secret"), class: "btn btn-default btn-md gl-button")
     %tr
       %td
         = _('Callback URL')
@@ -26,6 +24,13 @@
           %div
             %span.monospace= uri
 
+    - if show_trusted_row
+      %tr
+        %td
+          = _('Trusted')
+        %td
+          = @application.trusted? ? _('Yes') : _('No')
+
     %tr
       %td
         = _('Confidential')
diff --git a/app/views/shared/groups/_empty_state.html.haml b/app/views/shared/groups/_empty_state.html.haml
index 506954c53ca..aaba9697fea 100644
--- a/app/views/shared/groups/_empty_state.html.haml
+++ b/app/views/shared/groups/_empty_state.html.haml
@@ -6,8 +6,3 @@
     %h4= s_("GroupsEmptyState|A group is a collection of several projects.")
     %p= s_("GroupsEmptyState|If you organize your projects under a group, it works like a folder.")
     %p= s_("GroupsEmptyState|You can manage your group member’s permissions and access to each project in the group.")
-    - if invite_group_members?(@group)
-      = link_to _('Invite your team'),
-        group_group_members_path(@group),
-        class: 'gl-button btn btn-confirm-secondary',
-        data: { track_event: 'click_invite_team_group_empty_state', track_label: 'invite_team_group_empty_state' }
diff --git a/app/views/shared/icons/_dev_ops_report_overview.svg b/app/views/shared/icons/_dev_ops_report_overview.svg
deleted file mode 100644
index 2f31113bad7..00000000000
--- a/app/views/shared/icons/_dev_ops_report_overview.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="208" height="127" viewBox="0 0 208 127" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <rect id="a" width="58" height="98" y="17" rx="6"/>
-    <rect id="b" width="58" height="98" x="3.5" y="17" rx="6"/>
-    <rect id="c" width="58" height="98.394" rx="6"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd" transform="translate(1)">
-    <path fill="#000" fill-opacity=".06" fill-rule="nonzero" d="M16 11.06c0-1.39.56-2.69 1.534-3.635.398-.386.41-1.025.027-1.426-.382-.402-1.015-.414-1.413-.028C14.785 7.294 14 9.116 14 11.062c0 .556.448 1.007 1 1.007s1-.452 1-1.01zm6.432-5.043h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0h4.8c.552 0 1-.452 1-1.01 0-.556-.448-1.007-1-1.007h-4.8c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zm10.8 0H185c1.21 0 2.354.435 3.254 1.215.42.362 1.05.314 1.41-.108.36-.423.312-1.06-.107-1.422C188.297 4.612 186.694 4 185 4h-.568c-.552 0-1 .45-1 1.008 0 .557.448 1.01 1 1.01zM190 11.932v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.008zm0 10.89v4.84c0 .556.448 1.008 1 1.008s1-.452 1-1.01v-4.838c0-.557-.448-1.01-1-1.01s-1 .453-1 1.01zm0 10.89v4.84c0 .555.448 1.007 1 1.007s1-.453 1-1.01v-4.84c0-.556-.448-1.007-1-1.007s-1 .45-1 1.008zm0 10.888v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008V44.6c0-.557-.448-1.008-1-1.008s-1 .45-1 1.008zm0 10.89v4.84c0 .556.448 1.007 1 1.007s1-.45 1-1.008v-4.84c0-.557-.448-1.01-1-1.01s-1 .453-1 1.01zm0 10.89v4.838c0 .557.448 1.01 1 1.01s1-.453 1-1.01v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.01zm0 10.888v4.84c0 .556.448 1.008 1 1.008s1-.452 1-1.008v-4.84c0-.557-.448-1.008-1-1.008s-1 .45-1 1.008zm0 10.89v4.84c0 .556.448 1.007 1 1.007s1-.45 1-1.008v-4.84c0-.557-.448-1.008-1-1.008s-1 .45-1 1.007zm0 10.888v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.008zm-.24 21.446c-.42 1.304-1.353 2.385-2.572 2.985-.497.244-.703.847-.46 1.348.24.5.84.708 1.336.464 1.707-.84 3.013-2.35 3.598-4.178.17-.53-.12-1.098-.644-1.27-.526-.17-1.09.12-1.26.65zm-8.063 3.49h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.8 0h-4.8c-.552 0-1 .453-1 1.01 0 .557.448 1.008 1 1.008h4.8c.553 0 1-.45 1-1.008 0-.557-.447-1.01-1-1.01zm-10.577-.116c-1.33-.295-2.48-1.13-3.19-2.3-.287-.474-.902-.623-1.373-.333-.472.29-.62.91-.332 1.386.99 1.632 2.6 2.8 4.465 3.215.54.12 1.073-.224 1.192-.768.12-.544-.222-1.082-.762-1.2zM16 105.292v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.01v4.838c0 .557.448 1.01 1 1.01s1-.453 1-1.01zm0-10.89v-4.84c0-.555-.448-1.007-1-1.007s-1 .452-1 1.008v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.007zm0-10.888v-4.84c0-.557-.448-1.008-1-1.008s-1 .45-1 1.008v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008zm0-10.89v-4.84c0-.556-.448-1.007-1-1.007s-1 .45-1 1.008v4.84c0 .556.448 1.008 1 1.008s1-.452 1-1.008zm0-10.89v-4.838c0-.557-.448-1.01-1-1.01s-1 .453-1 1.01v4.84c0 .556.448 1.008 1 1.008s1-.452 1-1.01zm0-11.888v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.008v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008zm0-9.89v-4.84c0-.556-.448-1.007-1-1.007s-1 .45-1 1.007v4.84c0 .557.448 1.008 1 1.008s1-.45 1-1.008zm0-10.888v-4.84c0-.557-.448-1.008-1-1.008s-1 .45-1 1.008v4.84c0 .556.448 1.008 1 1.008s1-.452 1-1.008zm0-10.89v-4.84c0-.556-.448-1.008-1-1.008s-1 .452-1 1.01v4.838c0 .557.448 1.01 1 1.01s1-.453 1-1.01z"/>
-    <g transform="translate(74)">
-      <rect width="58" height="98" y="20" fill="#000" fill-opacity=".02" rx="6"/>
-      <use fill="#FFF" xlink:href="#a"/>
-      <rect width="56" height="96" x="1" y="18" stroke="#EEE" stroke-width="2" rx="6"/>
-      <g transform="translate(16 45.185)">
-        <path fill="#333" d="M.59 33.815h5.655V32.15H4.58v-7.225H3.066c-.63.378-1.246.63-2.212.812v1.274H2.52v5.14H.59v1.665zm10.093.168c-1.778 0-3.094-.994-3.094-2.436 0-1.078.67-1.736 1.51-2.184v-.056c-.685-.518-1.19-1.162-1.19-2.1 0-1.512 1.19-2.45 2.843-2.45 1.624 0 2.702.966 2.702 2.436 0 .854-.546 1.54-1.162 1.946v.055c.854.462 1.54 1.148 1.54 2.324 0 1.4-1.26 2.463-3.15 2.463zm.56-5.348c.35-.406.546-.84.546-1.302 0-.686-.407-1.148-1.08-1.148-.545 0-.993.336-.993 1.022 0 .728.616 1.078 1.526 1.428zm-.518 3.92c.686 0 1.19-.364 1.19-1.106 0-.785-.756-1.08-1.876-1.555-.393.364-.687.868-.687 1.414 0 .783.63 1.245 1.372 1.245zm6.3-2.24c-1.316 0-2.268-1.078-2.268-2.912 0-1.82.952-2.884 2.268-2.884 1.316 0 2.282 1.063 2.282 2.883 0 1.834-.966 2.912-2.282 2.912zm0-1.148c.462 0 .84-.462.84-1.764s-.378-1.736-.84-1.736c-.462 0-.84.434-.84 1.736s.378 1.764.84 1.764zm.308 4.816l4.928-9.464h1.19l-4.927 9.463h-1.19zm6.426 0c-1.317 0-2.27-1.078-2.27-2.912 0-1.82.953-2.883 2.27-2.883 1.315 0 2.28 1.064 2.28 2.884 0 1.835-.965 2.913-2.28 2.913zm0-1.148c.46 0 .84-.462.84-1.764 0-1.3-.38-1.735-.84-1.735-.463 0-.84.434-.84 1.736 0 1.303.377 1.765.84 1.765z"/>
-        <rect width="13" height="2" x="6" y=".815" fill="#FB722E" rx="1"/>
-        <path fill="#F0EDF8" d="M3 47.815c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1 0 .553-.455 1-.992 1H3.992c-.548 0-.992-.444-.992-1zm0 6c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1 0 .553-.455 1-.992 1H3.992c-.548 0-.992-.444-.992-1z"/>
-        <rect width="20" height="2" x="3" y="6.815" fill="#FEE1D3" rx="1"/>
-      </g>
-      <g transform="translate(10.81)">
-        <circle cx="18.19" cy="18" r="18" fill="#FFF"/>
-        <path fill="#F0EDF8" fill-rule="nonzero" d="M18.19 34c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16zm0 2c-9.94 0-18-8.06-18-18s8.06-18 18-18 18 8.06 18 18-8.06 18-18 18z"/>
-        <g transform="translate(10 11)">
-          <path fill="#C3B8E3" fill-rule="nonzero" d="M2.19 13.32L5.397 11h7.783c.566 0 1.01-.444 1.01-1V3c0-.55-.45-1-1.01-1H3.2c-.566 0-1.01.444-1.01 1v10.32zM6.045 13l-3.422 2.476C1.28 16.45.19 15.892.19 14.23V3c0-1.657 1.337-3 3.01-3h9.98c1.663 0 3.01 1.342 3.01 3v7c0 1.657-1.337 3-3.01 3H6.045z"/>
-          <rect width="4" height="2" x="5.19" y="4" fill="#6B4FBB" rx="1"/>
-          <rect width="6" height="2" x="5.19" y="7" fill="#6B4FBB" rx="1"/>
-        </g>
-      </g>
-    </g>
-    <g transform="translate(144.5)">
-      <rect width="58" height="98" x=".5" y="20" fill="#000" fill-opacity=".02" rx="6"/>
-      <use fill="#FFF" xlink:href="#b"/>
-      <rect width="56" height="96" x="4.5" y="18" stroke="#EEE" stroke-width="2" rx="6"/>
-      <g transform="translate(19 46.185)">
-        <path fill="#333" d="M4.01 33.746c1.793 0 3.305-.938 3.305-2.59 0-1.148-.742-1.876-1.764-2.17v-.056c.953-.406 1.485-1.05 1.485-1.974 0-1.554-1.232-2.436-3.066-2.436-1.093 0-1.99.434-2.8 1.134l1.035 1.26c.56-.49 1.036-.784 1.666-.784.7 0 1.093.364 1.093.98 0 .714-.504 1.19-2.1 1.19v1.456c1.932 0 2.394.49 2.394 1.274 0 .672-.574 1.05-1.442 1.05-.756 0-1.414-.378-1.946-.896l-.953 1.302c.644.756 1.652 1.26 3.094 1.26zm4.51-.168h6.257v-1.736h-1.792c-.42 0-1.036.056-1.484.112 1.443-1.512 2.843-3.108 2.843-4.606 0-1.708-1.19-2.828-2.94-2.828-1.274 0-2.1.476-2.982 1.414l1.12 1.106c.45-.476.94-.91 1.583-.91.77 0 1.26.476 1.26 1.344 0 1.26-1.596 2.786-3.864 4.928v1.176zm9.505-3.5c-1.316 0-2.268-1.078-2.268-2.912 0-1.82.952-2.884 2.268-2.884 1.316 0 2.282 1.064 2.282 2.884 0 1.834-.966 2.912-2.282 2.912zm0-1.148c.462 0 .84-.462.84-1.764s-.378-1.736-.84-1.736c-.462 0-.84.434-.84 1.736s.378 1.764.84 1.764zm.308 4.816l4.928-9.464h1.19l-4.927 9.464h-1.19zm6.426 0c-1.317 0-2.27-1.078-2.27-2.912 0-1.82.953-2.884 2.27-2.884 1.315 0 2.28 1.064 2.28 2.884 0 1.834-.965 2.912-2.28 2.912zm0-1.148c.46 0 .84-.462.84-1.764s-.38-1.736-.84-1.736c-.463 0-.84.434-.84 1.736s.377 1.764.84 1.764z"/>
-        <rect width="13" height="2.008" x="7.5" fill="#FB722E" rx="1.004"/>
-        <path fill="#F0EDF8" d="M3.5 47.19c0-.556.455-1.005 1.006-1.005h17.988c.556 0 1.006.445 1.006 1.004 0 .553-.455 1.003-1.006 1.003H4.506c-.556 0-1.006-.446-1.006-1.004zm0 6.023c0-.555.455-1.004 1.006-1.004h17.988c.556 0 1.006.444 1.006 1.003 0 .554-.455 1.004-1.006 1.004H4.506c-.556 0-1.006-.446-1.006-1.004z"/>
-        <rect width="20" height="2.008" x="4" y="6.024" fill="#FEE1D3" rx="1.004"/>
-      </g>
-      <g transform="translate(14.413)">
-        <circle cx="18.087" cy="18" r="18" fill="#FFF"/>
-        <path fill="#F0EDF8" fill-rule="nonzero" d="M18.087 34c8.836 0 16-7.163 16-16s-7.164-16-16-16c-8.837 0-16 7.163-16 16s7.163 16 16 16zm0 2c-9.942 0-18-8.06-18-18s8.058-18 18-18c9.94 0 18 8.06 18 18s-8.06 18-18 18z"/>
-        <path fill="#C3B8E3" fill-rule="nonzero" d="M18.087 24c3.313 0 6-2.686 6-6s-2.687-6-6-6c-3.314 0-6 2.686-6 6s2.686 6 6 6zm0 2c-4.42 0-8-3.582-8-8s3.58-8 8-8c4.418 0 8 3.582 8 8s-3.582 8-8 8z"/>
-        <path fill="#6B4FBB" d="M19.087 17v-2c0-.556-.448-1-1-1-.557 0-1 .448-1 1v3c0 .278.11.528.292.71.18.18.43.29.706.29h3c.557 0 1-.448 1-1 0-.556-.447-1-1-1h-2z"/>
-      </g>
-    </g>
-    <rect width="58" height="98" x="3" y="20" fill="#000" fill-opacity=".02" rx="6"/>
-    <g transform="translate(0 16.754)">
-      <use fill="#FFF" xlink:href="#c"/>
-      <rect width="56" height="96.394" x="1" y="1" stroke="#EEE" stroke-width="2" rx="6"/>
-      <g transform="translate(16 29.618)">
-        <path fill="#333" d="M3.137 27.84c.462 0 .98-.253 1.33-.883-.182-1.4-.756-1.848-1.386-1.848-.6 0-1.12.433-1.12 1.44 0 .94.505 1.29 1.177 1.29zm-.322 4.955C1.64 32.795.77 32.29.21 31.73l1.093-1.23c.294.335.854.63 1.372.63.994 0 1.764-.7 1.834-2.773-.463.588-1.233.938-1.78.938-1.51 0-2.645-.868-2.645-2.744 0-1.847 1.344-2.98 2.954-2.98 1.72 0 3.373 1.287 3.373 4.41 0 3.317-1.736 4.815-3.598 4.815zm8.12 0c-1.722 0-3.36-1.288-3.36-4.41 0-3.318 1.722-4.816 3.598-4.816 1.176 0 2.03.49 2.59 1.063l-1.078 1.232c-.308-.336-.868-.63-1.386-.63-.98 0-1.765.7-1.835 2.772.462-.588 1.232-.938 1.778-.938 1.526 0 2.646.867 2.646 2.743 0 1.848-1.345 2.982-2.955 2.982zm-.042-1.54c.616 0 1.12-.434 1.12-1.442 0-.938-.49-1.288-1.162-1.288-.46 0-.98.252-1.343.882.182 1.4.77 1.848 1.386 1.848zm6.132-2.128c-1.316 0-2.268-1.078-2.268-2.912 0-1.82.952-2.884 2.268-2.884 1.316 0 2.282 1.065 2.282 2.885 0 1.834-.966 2.912-2.282 2.912zm0-1.148c.462 0 .84-.463.84-1.765 0-1.302-.378-1.736-.84-1.736-.462 0-.84.433-.84 1.735s.378 1.764.84 1.764zm.308 4.815l4.928-9.464h1.19l-4.927 9.465h-1.19zm6.426 0c-1.317 0-2.27-1.078-2.27-2.912 0-1.82.953-2.884 2.27-2.884 1.315 0 2.28 1.063 2.28 2.883 0 1.834-.965 2.912-2.28 2.912zm0-1.148c.46 0 .84-.462.84-1.764s-.38-1.736-.84-1.736c-.463 0-.84.434-.84 1.736s.377 1.764.84 1.764z"/>
-        <rect width="13" height="2.008" x="6.5" y=".314" fill="#FEE1D3" rx="1.004"/>
-        <path fill="#F0EDF8" d="M3 46.627c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1 0 .553-.455 1-.992 1H3.992c-.548 0-.992-.444-.992-1zm0 6c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1 0 .553-.455 1-.992 1H3.992c-.548 0-.992-.444-.992-1z"/>
-        <rect width="20" height="2" x="3" y="5.627" fill="#FB722E" rx="1"/>
-      </g>
-    </g>
-    <g transform="translate(10.41)">
-      <circle cx="18.589" cy="18" r="18" fill="#FFF"/>
-      <path fill="#F0EDF8" fill-rule="nonzero" d="M18.59 34c8.836 0 16-7.163 16-16s-7.164-16-16-16c-8.837 0-16 7.163-16 16s7.163 16 16 16zm0 2c-9.942 0-18-8.06-18-18s8.058-18 18-18c9.94 0 18 8.06 18 18s-8.06 18-18 18z"/>
-      <path fill="#C3B8E3" d="M17.05 19.262h3.367l.248-2.808H17.3l-.25 2.808zm-.177 2.008l-.144 1.627c-.06.662-.646 1.2-1.3 1.2h.25c-.658 0-1.144-.534-1.085-1.2l.144-1.627H13.59c-.554 0-1.003-.446-1.003-1.004 0-.555.455-1.004 1.002-1.004h1.325l.248-2.808h-1.15c-.555 0-1.004-.445-1.004-1.004 0-.554.457-1.004 1.004-1.004h1.33l.106-1.2c.058-.66.644-1.198 1.298-1.198h-.25c.66 0 1.145.533 1.086 1.2l-.106 1.198h3.365l.107-1.2c.058-.66.644-1.198 1.298-1.198h-.25c.66 0 1.145.533 1.086 1.2l-.106 1.198h1.03c.554 0 1.003.446 1.003 1.004 0 .555-.455 1.004-1 1.004H22.8l-.25 2.808h1.037c.554 0 1.002.446 1.002 1.004 0 .554-.456 1.004-1.003 1.004h-1.214l-.144 1.627c-.06.662-.646 1.2-1.3 1.2h.25c-.658 0-1.144-.534-1.085-1.2l.144-1.627h-3.367z"/>
-      <path fill="#6B4FBB" d="M17.05 19.262l-.177 2.008H14.74l.177-2.008h2.134zm-1.707-4.816h2.135l-.178 2.008h-2.135l.178-2.008zm5.5 0h2.135l-.178 2.008h-2.135l.178-2.008zm1.708 4.816l-.177 2.008H20.24l.177-2.008h2.134z"/>
-    </g>
-  </g>
-</svg>
diff --git a/app/views/shared/integrations/_form.html.haml b/app/views/shared/integrations/_form.html.haml
index 62f8d986296..35f302a28a6 100644
--- a/app/views/shared/integrations/_form.html.haml
+++ b/app/views/shared/integrations/_form.html.haml
@@ -1,7 +1,4 @@
 - integration = local_assigns.fetch(:integration)
 
-%h3.page-title
-  = integration.title
-
 = form_for integration, as: :service, url: scoped_integration_path(integration), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'test-url' => scoped_test_integration_path(integration) } } do |form|
   = render 'shared/service_settings', form: form, integration: integration
diff --git a/app/views/shared/integrations/_tabs.html.haml b/app/views/shared/integrations/_tabs.html.haml
new file mode 100644
index 00000000000..553401e47bd
--- /dev/null
+++ b/app/views/shared/integrations/_tabs.html.haml
@@ -0,0 +1,18 @@
+- active_tab = local_assigns.fetch(:active_tab, 'edit')
+- active_classes = 'gl-tab-nav-item-active gl-tab-nav-item-active-indigo active'
+- tabs = integration_tabs(integration: integration)
+
+- if tabs.length <= 1
+  = yield
+- else
+  .tabs.gl-tabs
+    %div
+      %ul.nav.gl-tabs-nav{ role: 'tablist' }
+        - tabs.each do |tab|
+          %li.nav-item{ role: 'presentation' }
+            %a.nav-link.gl-tab-nav-item{ role: 'tab', class: (active_classes if tab[:key] == active_tab), href: tab[:href] }
+              = tab[:text]
+
+    .tab-content.gl-tab-content
+      .tab-pane.gl-pt-3.active{ role: 'tabpanel' }
+        = yield
diff --git a/app/views/shared/integrations/edit.html.haml b/app/views/shared/integrations/edit.html.haml
index a996f72e2f4..02cb94e3555 100644
--- a/app/views/shared/integrations/edit.html.haml
+++ b/app/views/shared/integrations/edit.html.haml
@@ -3,4 +3,8 @@
 - page_title @integration.title, _('Integrations')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-= render 'shared/integrations/form', integration: @integration
+%h3.page-title
+  = @integration.title
+
+= render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do
+  = render 'shared/integrations/form', integration: @integration
diff --git a/app/views/shared/integrations/overrides.html.haml b/app/views/shared/integrations/overrides.html.haml
new file mode 100644
index 00000000000..dc87fae704c
--- /dev/null
+++ b/app/views/shared/integrations/overrides.html.haml
@@ -0,0 +1,10 @@
+- add_to_breadcrumbs _('Integrations'), scoped_integrations_path
+- breadcrumb_title @integration.title
+- page_title @integration.title, _('Integrations')
+- @content_class = 'limit-container-width' unless fluid_layout
+
+%h3.page-title
+  = @integration.title
+
+= render 'shared/integrations/tabs', integration: @integration, active_tab: 'overrides' do
+  .js-vue-integration-overrides{ data: integration_overrides_data(@integration) }
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 6aa80e6808d..dc93442d6cd 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -31,8 +31,6 @@
 
 = render 'shared/issuable/form/metadata', issuable: issuable, form: form, project: project, presenter: presenter
 
-= render_if_exists 'shared/issuable/approvals', issuable: issuable, presenter: presenter, form: form
-
 = render 'shared/issuable/form/merge_params', issuable: issuable, project: project
 
 = render 'shared/issuable/form/contribution', issuable: issuable, form: form
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 7416fda6b44..9a0b25f4015 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -4,7 +4,7 @@
 #js-vue-sidebar-assignees{ data: { field: issuable_type,
   signed_in: signed_in,
   max_assignees: dropdown_options[:data][:"max-select"],
-  directly_invite_members: directly_invite_members? } }
+  directly_invite_members: can_admin_project_member?(@project) } }
   .title.hide-collapsed
     = _('Assignee')
     = loading_icon(css_class: 'gl-vertical-align-text-bottom')
diff --git a/app/views/shared/issuable/_sidebar_user_dropdown.html.haml b/app/views/shared/issuable/_sidebar_user_dropdown.html.haml
index 3a17db5acf8..84d2fc033c8 100644
--- a/app/views/shared/issuable/_sidebar_user_dropdown.html.haml
+++ b/app/views/shared/issuable/_sidebar_user_dropdown.html.haml
@@ -1,7 +1,7 @@
 - options = local_assigns.fetch(:options)
 - data = options[:data]
 
-- if directly_invite_members?
+- if can_admin_project_member?(@project)
   - options[:dropdown_class] += ' dropdown-extended-height'
   - options[:footer_content] = true
   - options[:wrapper_class] = local_assigns.fetch(:wrapper_class)
diff --git a/app/views/shared/issuable/_sort_dropdown.html.haml b/app/views/shared/issuable/_sort_dropdown.html.haml
index caf271e9ee9..f5bf010e4db 100644
--- a/app/views/shared/issuable/_sort_dropdown.html.haml
+++ b/app/views/shared/issuable/_sort_dropdown.html.haml
@@ -19,6 +19,7 @@
           = sortable_item(sort_title_popularity,        page_filter_path(sort: sort_value_popularity),        sort_title)
           = sortable_item(sort_title_label_priority,    page_filter_path(sort: sort_value_label_priority),    sort_title)
           = sortable_item(sort_title_merged_date,       page_filter_path(sort: sort_value_merged_date),       sort_title) if viewing_merge_requests
+          = sortable_item(sort_title_closed_date,       page_filter_path(sort: sort_value_closed_date),       sort_title) if viewing_merge_requests
           = sortable_item(sort_title_relative_position, page_filter_path(sort: sort_value_relative_position), sort_title) if viewing_issues
           = render_if_exists('shared/ee/issuable/sort_dropdown', viewing_issues: viewing_issues, sort_title: sort_title)
     = issuable_sort_direction_button(sort_value)
diff --git a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
index a0df007f8ca..fad13c78e26 100644
--- a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml
@@ -8,5 +8,4 @@
       = hidden_field_tag "#{issuable.to_ability_name}[reviewer_ids][]", 0, id: nil, data: { meta: '' }
 
     = dropdown_tag(users_dropdown_label(issuable.reviewers), options: reviewers_dropdown_options(issuable.to_ability_name, issuable.iid, issuable.target_branch))
-  - if Feature.enabled?(:mr_collapsed_approval_rules, @project)
-    = render_if_exists 'shared/issuable/approver_suggestion', issuable: issuable, presenter: presenter
+  = render_if_exists 'shared/issuable/approver_suggestion', issuable: issuable, presenter: presenter
diff --git a/app/views/shared/issuable/form/_type_selector.html.haml b/app/views/shared/issuable/form/_type_selector.html.haml
index b5c5e2fa091..3b4ab22ce32 100644
--- a/app/views/shared/issuable/form/_type_selector.html.haml
+++ b/app/views/shared/issuable/form/_type_selector.html.haml
@@ -16,14 +16,14 @@
                 = _("Select type")
               %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
                 = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
-            .dropdown-content
+            .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
-                    = _("Issue")
+                    #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_("Issue")}
                 %li.js-filter-issuable-type{ data: { track: { event: "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
-                    = _("Incident")
+                    #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_("Incident")}
 
       #js-type-popover
 
diff --git a/app/views/shared/nav/_sidebar_menu.html.haml b/app/views/shared/nav/_sidebar_menu.html.haml
index 9a04139d2f2..903d2d077ba 100644
--- a/app/views/shared/nav/_sidebar_menu.html.haml
+++ b/app/views/shared/nav/_sidebar_menu.html.haml
@@ -1,27 +1,30 @@
 = nav_link(**sidebar_menu.all_active_routes, html_options: sidebar_menu.nav_link_html_options) do
-  = link_to sidebar_menu.link, **sidebar_menu.container_html_options, data: { qa_selector: 'sidebar_menu_link', qa_menu_item: sidebar_menu.title } do
-    - if sidebar_menu.icon_or_image?
-      %span.nav-icon-container
-        - if sidebar_menu.image_path
-          = image_tag(sidebar_menu.image_path, **sidebar_menu.image_html_options)
-        - elsif sidebar_menu.sprite_icon
-          = sprite_icon(sidebar_menu.sprite_icon, **sidebar_menu.sprite_icon_html_options)
+  - if sidebar_menu.menu_with_partial?
+    = render_if_exists sidebar_menu.menu_partial, **sidebar_menu.menu_partial_options
+  - else
+    = link_to sidebar_menu.link, **sidebar_menu.container_html_options, data: { qa_selector: 'sidebar_menu_link', qa_menu_item: sidebar_menu.title } do
+      - if sidebar_menu.icon_or_image?
+        %span.nav-icon-container
+          - if sidebar_menu.image_path
+            = image_tag(sidebar_menu.image_path, **sidebar_menu.image_html_options)
+          - elsif sidebar_menu.sprite_icon
+            = sprite_icon(sidebar_menu.sprite_icon, **sidebar_menu.sprite_icon_html_options)
 
-    %span.nav-item-name{ **sidebar_menu.title_html_options }
-      = sidebar_menu.title
-    - if sidebar_menu.has_pill?
-      %span.badge.badge-pill.count{ **sidebar_menu.pill_html_options }
-        = number_with_delimiter(sidebar_menu.pill_count)
+      %span.nav-item-name{ **sidebar_menu.title_html_options }
+        = sidebar_menu.title
+      - if sidebar_menu.has_pill?
+        %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)
+    %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
+      - 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/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index 1129fed9c3b..d0a2d97df0f 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,6 +1,6 @@
 - noteable_name = @note.noteable.human_class_name
 
-.float-left.btn-group.gl-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
+.float-left.btn-group.gl-sm-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
   %input.btn.gl-button.btn-confirm.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
 
   - if @note.can_be_discussion_note?
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 6f54c54d0a9..98008fede90 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -35,7 +35,7 @@
       = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
       .error-alert
 
-    .note-form-actions.clearfix
+    .note-form-actions.clearfix.gl-display-flex.gl-flex-wrap
       = render partial: 'shared/notes/comment_button'
 
       %a.btn.gl-button.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: { cancel_text: _("Cancel") } }
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 7466f360f67..2136d287f53 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -65,6 +65,10 @@
           .description.d-none.d-sm-block.gl-mr-3
             = markdown_field(project, :description)
 
+        - if project.topics.any?
+          .gl-mt-2
+            = render "shared/projects/topics", project: project.present(current_user: current_user)
+
         = render_if_exists 'shared/projects/removed', project: project
 
       .controls.d-flex.flex-sm-column.align-items-center.align-items-sm-end.flex-wrap.flex-shrink-0.text-secondary{ class: css_controls_class.join(" ") }
diff --git a/app/views/shared/projects/_topics.html.haml b/app/views/shared/projects/_topics.html.haml
new file mode 100644
index 00000000000..a7429483da1
--- /dev/null
+++ b/app/views/shared/projects/_topics.html.haml
@@ -0,0 +1,32 @@
+- cache_enabled = false unless local_assigns[:cache_enabled] == true
+- max_project_topic_length = 15
+- project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
+
+- if project.topics.present?
+  = cache_if(cache_enabled, [project, :topic_list], expires_in: 1.day) do
+    %span.gl-w-full.gl-display-inline-flex.gl-font-base.gl-font-weight-normal.gl-align-items-center{ 'data-testid': 'project_topic_list' }
+      = 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)
+        - 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)
+        - else
+          %a{ class: project_topics_classes, href: explore_project_topic_path, itemprop: 'keywords' }
+            = topic
+
+      - if project.has_extra_topics?
+        - title = _('More topics')
+        - 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)
+              - 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)
+              - else
+                %a{ class: "#{ project_topics_classes } gl-mb-3", href: explore_project_topic_path, itemprop: 'keywords' }
+                  = topic
+        .text-nowrap{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
+          = _("+ %{count} more") % { count: project.count_of_extra_topics_not_shown }