split application settings into multiple sub pages

12 files changed, 361 insertions, 251 deletions

diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
new file mode 100644
index 00000000000..25338d56d83
--- /dev/null
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -0,0 +1,38 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Continuous Integration and Deployment')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Auto DevOps, runners and job artifacts')
+  .settings-content
+    = render 'ci_cd'
+
+%section.settings.as-repository-check.no-animate#js-repository-check-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository maintenance')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure automatic git checks and housekeeping on repositories.')
+  .settings-content
+    = render 'repository_check'
+
+- if Gitlab.config.registry.enabled
+  %section.settings.as-registry.no-animate#js-registry-settings{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4
+        = _('Container Registry')
+      %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+        = expanded ? _('Collapse') : _('Expand')
+      %p
+        = _('Various container registry settings.')
+    .settings-content
+      = render 'registry'
diff --git a/app/views/admin/application_settings/integrations.html.haml b/app/views/admin/application_settings/integrations.html.haml
new file mode 100644
index 00000000000..bb6e6171390
--- /dev/null
+++ b/app/views/admin/application_settings/integrations.html.haml
@@ -0,0 +1,31 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+= render_if_exists 'admin/application_settings/elasticsearch_form', expanded: expanded
+
+%section.settings.as-plantuml.no-animate#js-plantuml-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('PlantUML')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Allow rendering of PlantUML diagrams in Asciidoc documents.')
+  .settings-content
+    = render 'plantuml'
+
+= render_if_exists 'admin/application_settings/slack', expanded: expanded
+
+%section.settings.as-third-party-offers.no-animate#js-third-party-offers-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Third party offers')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Control the display of third party offers.')
+  .settings-content
+    = render 'third_party_offers', application_setting: @application_setting
+  
diff --git a/app/views/admin/application_settings/metrics_and_profiling.html.haml b/app/views/admin/application_settings/metrics_and_profiling.html.haml
new file mode 100644
index 00000000000..0851527d30d
--- /dev/null
+++ b/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -0,0 +1,51 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-influx.no-animate#js-influx-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Influx')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable and configure InfluxDB metrics.')
+  .settings-content
+    = render 'influx'
+
+%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Prometheus')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable and configure Prometheus metrics.')
+  .settings-content
+    = render 'prometheus'
+
+%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Profiling - Performance bar')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable the Performance Bar for a given group.')
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/performance_bar')
+  .settings-content
+    = render 'performance_bar'
+
+%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded) }
+  .settings-header#usage-statistics
+    %h4
+      = _('Usage statistics')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable or disable version check and usage ping.')
+  .settings-content
+    = render 'usage'
+
+= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
new file mode 100644
index 00000000000..714a2e09a3c
--- /dev/null
+++ b/app/views/admin/application_settings/network.html.haml
@@ -0,0 +1,37 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-performance.no-animate#js-performance-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Performance optimization')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Various settings that affect GitLab performance.')
+  .settings-content
+    = render 'performance'
+
+%section.settings.as-ip-limits.no-animate#js-ip-limits-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('User and IP Rate Limits')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure limits for web and API requests.')
+  .settings-content
+    = render 'ip_limits'
+
+%section.settings.as-outbound.no-animate#js-outbound-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Outbound requests')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Allow requests to the local network from hooks and services.')
+  .settings-content
+    = render 'outbound'
diff --git a/app/views/admin/application_settings/preferences.html.haml b/app/views/admin/application_settings/preferences.html.haml
new file mode 100644
index 00000000000..b757692834b
--- /dev/null
+++ b/app/views/admin/application_settings/preferences.html.haml
@@ -0,0 +1,70 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-email.no-animate#js-email-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Email')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Various email settings.')
+  .settings-content
+    = render 'email'
+
+%section.settings.as-help-page.no-animate#js-help-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Help page')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Help page text and support page url.')
+  .settings-content
+    = render 'help_page'
+
+%section.settings.as-pages.no-animate#js-pages-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Pages')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Size and domain settings for static websites')
+  .settings-content
+    = render 'pages'
+
+%section.settings.as-realtime.no-animate#js-realtime-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Real-time features')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Change this value to influence how frequently the GitLab UI polls for updates.')
+  .settings-content
+    = render 'realtime'
+
+%section.settings.as-background.no-animate#js-background-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Background jobs')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure Sidekiq job throttling.')
+  .settings-content
+    = render 'background_jobs'
+
+%section.settings.as-gitaly.no-animate#js-gitaly-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Gitaly')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure Gitaly timeouts.')
+  .settings-content
+    = render 'gitaly'
diff --git a/app/views/admin/application_settings/reporting.html.haml b/app/views/admin/application_settings/reporting.html.haml
new file mode 100644
index 00000000000..ed5f2601841
--- /dev/null
+++ b/app/views/admin/application_settings/reporting.html.haml
@@ -0,0 +1,37 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-spam.no-animate#js-spam-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Spam and Anti-bot Protection')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable reCAPTCHA or Akismet and set IP limits.')
+  .settings-content
+    = render 'spam'
+
+%section.settings.as-abuse.no-animate#js-abuse-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Abuse reports')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Set notification email for abuse reports.')
+  .settings-content
+    = render 'abuse'
+
+%section.settings.as-logging.no-animate#js-logging-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Error Reporting and Logging')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Enable Sentry for error reporting and logging.')
+  .settings-content
+    = render 'logging'
diff --git a/app/views/admin/application_settings/repository.html.haml b/app/views/admin/application_settings/repository.html.haml
new file mode 100644
index 00000000000..fcbb2449bdf
--- /dev/null
+++ b/app/views/admin/application_settings/repository.html.haml
@@ -0,0 +1,37 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+%section.settings.as-mirror.no-animate#js-mirror-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository mirror')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Configure push mirrors.')
+  .settings-content
+    = render partial: 'repository_mirrors_form'
+
+%section.qa-repository-storage-settings.settings.as-repository-storage.no-animate#js-repository-storage-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository storage')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure storage path and circuit breaker settings.')
+  .settings-content
+    = render 'repository_storage'
+
+%section.settings.as-repository-check.no-animate#js-repository-check-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Repository maintenance')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Configure automatic git checks and housekeeping on repositories.')
+  .settings-content
+    = render 'repository_check'
diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml
index 6133a7646f4..a5a664592a9 100644
--- a/app/views/admin/application_settings/show.html.haml
+++ b/app/views/admin/application_settings/show.html.haml
@@ -58,151 +58,6 @@
   .settings-content
     = render 'terms'
 
-%section.settings.as-help-page.no-animate#js-help-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Help page')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Help page text and support page url.')
-  .settings-content
-    = render 'help_page'
-
-%section.settings.as-pages.no-animate#js-pages-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Pages')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Size and domain settings for static websites')
-  .settings-content
-    = render 'pages'
-
-%section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Continuous Integration and Deployment')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Auto DevOps, runners and job artifacts')
-  .settings-content
-    = render 'ci_cd'
-
-%section.settings.as-influx.no-animate#js-influx-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Metrics - Influx')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable and configure InfluxDB metrics.')
-  .settings-content
-    = render 'influx'
-
-%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Metrics - Prometheus')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable and configure Prometheus metrics.')
-  .settings-content
-    = render 'prometheus'
-
-%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Profiling - Performance bar')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable the Performance Bar for a given group.')
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/performance_bar')
-  .settings-content
-    = render 'performance_bar'
-
-%section.settings.as-background.no-animate#js-background-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Background jobs')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Configure Sidekiq job throttling.')
-  .settings-content
-    = render 'background_jobs'
-
-%section.settings.as-spam.no-animate#js-spam-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Spam and Anti-bot Protection')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable reCAPTCHA or Akismet and set IP limits.')
-  .settings-content
-    = render 'spam'
-
-%section.settings.as-abuse.no-animate#js-abuse-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Abuse reports')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Set notification email for abuse reports.')
-  .settings-content
-    = render 'abuse'
-
-%section.settings.as-logging.no-animate#js-logging-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Error Reporting and Logging')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable Sentry for error reporting and logging.')
-  .settings-content
-    = render 'logging'
-
-%section.qa-repository-storage-settings.settings.as-repository-storage.no-animate#js-repository-storage-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Repository storage')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Configure storage path and circuit breaker settings.')
-  .settings-content
-    = render 'repository_storage'
-
-%section.settings.as-repository-check.no-animate#js-repository-check-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Repository maintenance')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Configure automatic git checks and housekeeping on repositories.')
-  .settings-content
-    = render 'repository_check'
-
-- if Gitlab.config.registry.enabled
-  %section.settings.as-registry.no-animate#js-registry-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4
-        = _('Container Registry')
-      %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-        = expanded ? _('Collapse') : _('Expand')
-      %p
-        = _('Various container registry settings.')
-    .settings-content
-      = render 'registry'
-
 - if koding_enabled?
   %section.settings.as-koding.no-animate#js-koding-settings{ class: ('expanded' if expanded) }
     .settings-header
@@ -226,39 +81,6 @@
   .settings-content
     = render 'plantuml'
 
-%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded) }
-  .settings-header#usage-statistics
-    %h4
-      = _('Usage statistics')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Enable or disable version check and usage ping.')
-  .settings-content
-    = render 'usage'
-
-%section.settings.as-email.no-animate#js-email-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Email')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Various email settings.')
-  .settings-content
-    = render 'email'
-
-%section.settings.as-gitaly.no-animate#js-gitaly-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Gitaly')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Configure Gitaly timeouts.')
-  .settings-content
-    = render 'gitaly'
-
 %section.settings.as-terminal.no-animate#js-terminal-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4
@@ -270,76 +92,6 @@
   .settings-content
     = render 'terminal'
 
-%section.settings.as-realtime.no-animate#js-realtime-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Real-time features')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Change this value to influence how frequently the GitLab UI polls for updates.')
-  .settings-content
-    = render 'realtime'
-
-%section.settings.as-performance.no-animate#js-performance-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Performance optimization')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Various settings that affect GitLab performance.')
-  .settings-content
-    = render 'performance'
-
-%section.settings.as-ip-limits.no-animate#js-ip-limits-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('User and IP Rate Limits')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Configure limits for web and API requests.')
-  .settings-content
-    = render 'ip_limits'
-
-%section.settings.as-outbound.no-animate#js-outbound-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Outbound requests')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Allow requests to the local network from hooks and services.')
-  .settings-content
-    = render 'outbound'
-
-%section.settings.as-mirror.no-animate#js-mirror-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Repository mirror')
-    %button.btn.js-settings-toggle{ type: 'button' }
-      = expanded ? 'Collapse' : 'Expand'
-    %p
-      = _('Configure push mirrors.')
-  .settings-content
-    = render partial: 'repository_mirrors_form'
-
-= render_if_exists 'admin/application_settings/templates', expanded: expanded
-
-%section.settings.as-third-party-offers.no-animate#js-third-party-offers-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4
-      = _('Third party offers')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = _('Control the display of third party offers.')
-  .settings-content
-    = render 'third_party_offers', application_setting: @application_setting
-
-= render_if_exists 'admin/application_settings/custom_templates_form', expanded: expanded
-
 %section.settings.no-animate#js-web-ide-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4
@@ -362,5 +114,3 @@
               = s_('IDE|Allow live previews of JavaScript projects in the Web IDE using CodeSandbox client side evaluation.')
 
       = f.submit _('Save changes'), class: "btn btn-success"
-
-= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded
diff --git a/app/views/admin/application_settings/templates.html.haml b/app/views/admin/application_settings/templates.html.haml
new file mode 100644
index 00000000000..eafb6c2ea27
--- /dev/null
+++ b/app/views/admin/application_settings/templates.html.haml
@@ -0,0 +1,8 @@
+- breadcrumb_title "Settings"
+- page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
+
+= render_if_exists 'admin/application_settings/templates', expanded: expanded
+
+= render_if_exists 'admin/application_settings/custom_templates_form', expanded: expanded
diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml
index ff25b040913..396c904c1be 100644
--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -199,10 +199,55 @@
             = sprite_icon('settings')
           %span.nav-item-name
             = _('Settings')
-        %ul.sidebar-sub-level-items.is-fly-out-only
+        %ul.sidebar-sub-level-items
           = nav_link(controller: :application_settings, html_options: { class: "fly-out-top-item" } ) do
             = link_to admin_application_settings_path do
               %strong.fly-out-top-item-name
                 = _('Settings')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#show') do
+              = link_to admin_application_settings_path, title: _('General') do
+                %span
+                  = _('General')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#integrations') do
+              = link_to integrations_admin_application_settings_path, title: _('Integrations') do
+                %span
+                  = _('Integrations')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#repository') do
+              = link_to repository_admin_application_settings_path, title: _('Repository') do
+                %span
+                  = _('Repository')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#templates') do
+              = link_to templates_admin_application_settings_path, title: _('Templates') do
+                %span
+                  = _('Templates')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#ci_cd') do
+              = link_to ci_cd_admin_application_settings_path, title: _('CI/CD') do
+                %span
+                  = _('CI/CD')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#reporting') do
+              = link_to reporting_admin_application_settings_path, title: _('Reporting') do
+                %span
+                  = _('Reporting')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#metrics_and_profiling') do
+              = link_to metrics_and_profiling_admin_application_settings_path, title: _('Metrics and profiling') do
+                %span
+                  = _('Metrics and profiling')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#network') do
+              = link_to network_admin_application_settings_path, title: _('Network') do
+                %span
+                  = _('Network')
+            %li.divider.fly-out-top-item
+            = nav_link(path: 'application_settings#preferences') do
+              = link_to preferences_admin_application_settings_path, title: _('Preferences') do
+                %span
+                  = _('Preferences')
 
     = render 'shared/sidebar_toggle_button'
diff --git a/changelogs/unreleased/44998-split-admin-settings-into-multiple-sub-pages.yml b/changelogs/unreleased/44998-split-admin-settings-into-multiple-sub-pages.yml
new file mode 100644
index 00000000000..4b398e9419d
--- /dev/null
+++ b/changelogs/unreleased/44998-split-admin-settings-into-multiple-sub-pages.yml
@@ -0,0 +1,5 @@
+---
+title: Split admin settings into multiple sub pages
+merge_request: 21467
+author:
+type: other
diff --git a/config/routes/admin.rb b/config/routes/admin.rb
index fa1f79a90be..4aa56837587 100644
--- a/config/routes/admin.rb
+++ b/config/routes/admin.rb
@@ -110,6 +110,7 @@ namespace :admin do
     put :reset_runners_token
     put :reset_health_check_token
     put :clear_repository_check_states
+    get :integrations, :repository, :templates, :ci_cd, :reporting, :metrics_and_profiling, :network, :preferences
   end
 
   resources :labels