Move UI of several application settings to expandable block

To make design consistent with project settings

Next admin area application settings are afected by this commit:

* Visibility and access control
* Account and limit settings
* Sign in
* Sign up
* Help page
* Pages

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

11 files changed, 412 insertions, 279 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js
new file mode 100644
index 00000000000..48d75f5443b
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/index.js
@@ -0,0 +1,6 @@
+import initSettingsPanels from '~/settings_panels';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+});
diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
new file mode 100644
index 00000000000..14561353806
--- /dev/null
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -0,0 +1,39 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :gravatar_enabled do
+          = f.check_box :gravatar_enabled
+          Gravatar enabled
+  .form-group
+    = f.label :default_projects_limit, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.number_field :default_projects_limit, class: 'form-control'
+  .form-group
+    = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.number_field :max_attachment_size, class: 'form-control'
+  .form-group
+    = f.label :session_expire_delay, 'Session duration (minutes)', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.number_field :session_expire_delay, class: 'form-control'
+      %span.help-block#session_expire_delay_help_block GitLab restart is required to apply changes
+  .form-group
+    = f.label :user_oauth_applications, 'User OAuth applications', class: 'control-label col-sm-2'
+    .col-sm-10
+      .checkbox
+        = f.label :user_oauth_applications do
+          = f.check_box :user_oauth_applications
+          Allow users to register any application to use GitLab as an OAuth provider
+  .form-group
+    = f.label :user_default_external, 'New users set to external', class: 'control-label col-sm-2'
+    .col-sm-10
+      .checkbox
+        = f.label :user_default_external do
+          = f.check_box :user_default_external
+          Newly registered users will by default be external
+
+  .form-actions
+    = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index 54b39df8cf3..0f75db3f6ae 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -2,254 +2,6 @@
   = form_errors(@application_setting)
 
   %fieldset
-    %legend Visibility and Access Controls
-    .form-group
-      = f.label :default_branch_protection, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control'
-    .form-group.visibility-level-setting
-      = f.label :default_project_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_project_visibility, form: f, selected_level: @application_setting.default_project_visibility, form_model: Project.new)
-    .form-group.visibility-level-setting
-      = f.label :default_snippet_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_snippet_visibility, form: f, selected_level: @application_setting.default_snippet_visibility, form_model: ProjectSnippet.new)
-    .form-group.visibility-level-setting
-      = f.label :default_group_visibility, class: 'control-label col-sm-2'
-      .col-sm-10
-        = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
-    .form-group
-      = f.label :restricted_visibility_levels, class: 'control-label col-sm-2'
-      .col-sm-10
-        - checkbox_name = 'application_setting[restricted_visibility_levels][]'
-        = hidden_field_tag(checkbox_name)
-        - restricted_level_checkboxes('restricted-visibility-help', checkbox_name).each do |level|
-          .checkbox
-            = level
-        %span.help-block#restricted-visibility-help
-          Selected levels cannot be used by non-admin users for projects or snippets.
-          If the public level is restricted, user profiles are only visible to logged in users.
-    .form-group
-      = f.label :import_sources, class: 'control-label col-sm-2'
-      .col-sm-10
-        - import_sources_checkboxes('import-sources-help').each do |source|
-          .checkbox= source
-        %span.help-block#import-sources-help
-          Enabled sources for code import during project creation. OmniAuth must be configured for GitHub
-          = link_to "(?)", help_page_path("integration/github")
-          , Bitbucket
-          = link_to "(?)", help_page_path("integration/bitbucket")
-          and GitLab.com
-          = link_to "(?)", help_page_path("integration/gitlab")
-
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :project_export_enabled do
-            = f.check_box :project_export_enabled
-            Project export enabled
-
-    .form-group
-      %label.control-label.col-sm-2 Enabled Git access protocols
-      .col-sm-10
-        = select(:application_setting, :enabled_git_access_protocol, [['Both SSH and HTTP(S)', nil], ['Only SSH', 'ssh'], ['Only HTTP(S)', 'http']], {}, class: 'form-control')
-        %span.help-block#clone-protocol-help
-          Allow only the selected protocols to be used for Git access.
-
-    - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type|
-      - field_name = :"#{type}_key_restriction"
-      .form-group
-        = f.label field_name, "#{type.upcase} SSH keys", class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
-
-  %fieldset
-    %legend Account and Limit Settings
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :gravatar_enabled do
-            = f.check_box :gravatar_enabled
-            Gravatar enabled
-    .form-group
-      = f.label :default_projects_limit, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :default_projects_limit, class: 'form-control'
-    .form-group
-      = f.label :max_attachment_size, 'Maximum attachment size (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_attachment_size, class: 'form-control'
-    .form-group
-      = f.label :session_expire_delay, 'Session duration (minutes)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :session_expire_delay, class: 'form-control'
-        %span.help-block#session_expire_delay_help_block GitLab restart is required to apply changes
-    .form-group
-      = f.label :user_oauth_applications, 'User OAuth applications', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :user_oauth_applications do
-            = f.check_box :user_oauth_applications
-            Allow users to register any application to use GitLab as an OAuth provider
-    .form-group
-      = f.label :user_default_external, 'New users set to external', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :user_default_external do
-            = f.check_box :user_default_external
-            Newly registered users will by default be external
-
-  %fieldset
-    %legend Sign-up Restrictions
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :signup_enabled do
-            = f.check_box :signup_enabled
-            Sign-up enabled
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :send_user_confirmation_email do
-            = f.check_box :send_user_confirmation_email
-            Send confirmation email on sign-up
-    .form-group
-      = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :domain_whitelist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
-        .help-block ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-    .form-group
-      = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :domain_blacklist_enabled do
-            = f.check_box :domain_blacklist_enabled
-            Enable domain blacklist for sign ups
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .radio
-          = label_tag :blacklist_type_file do
-            = radio_button_tag :blacklist_type, :file
-            .option-title
-              Upload blacklist file
-        .radio
-          = label_tag :blacklist_type_raw do
-            = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?
-            .option-title
-              Enter blacklist manually
-    .form-group.blacklist-file
-      = f.label :domain_blacklist_file, 'Blacklist file', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.file_field :domain_blacklist_file, class: 'form-control', accept: '.txt,.conf'
-        .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries.
-    .form-group.blacklist-raw
-      = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :domain_blacklist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
-        .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-
-    .form-group
-      = f.label :after_sign_up_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-
-  %fieldset
-    %legend Sign-in Restrictions
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :password_authentication_enabled_for_web do
-            = f.check_box :password_authentication_enabled_for_web
-            Password authentication enabled for web interface
-            .help-block
-              When disabled, an external authentication provider must be used.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :password_authentication_enabled_for_git do
-            = f.check_box :password_authentication_enabled_for_git
-            Password authentication enabled for Git over HTTP(S)
-            .help-block
-              When disabled, a Personal Access Token
-              - if Gitlab::Auth::LDAP::Config.enabled?
-                or LDAP password
-              must be used to authenticate.
-    - if omniauth_enabled? && button_based_providers.any?
-      .form-group
-        = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'control-label col-sm-2'
-        .col-sm-10
-          .btn-group{ data: { toggle: 'buttons' } }
-            - oauth_providers_checkboxes.each do |source|
-              = source
-    .form-group
-      = f.label :two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2'
-      .col-sm-10
-        .checkbox
-          = f.label :require_two_factor_authentication do
-            = f.check_box :require_two_factor_authentication
-            Require all users to setup Two-factor authentication
-    .form-group
-      = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :two_factor_grace_period, min: 0, class: 'form-control', placeholder: '0'
-        .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
-    .form-group
-      = f.label :home_page_url, 'Home page URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
-        %span.help-block#home_help_block We will redirect non-logged in users to this page
-    .form-group
-      = f.label :after_sign_out_path, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :after_sign_out_path, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'after_sign_out_path_help_block'
-        %span.help-block#after_sign_out_path_help_block We will redirect users to this page after they sign out
-    .form-group
-      = f.label :sign_in_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :sign_in_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-
-  %fieldset
-    %legend Help Page
-    .form-group
-      = f.label :help_page_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :help_page_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :help_page_hide_commercial_content do
-            = f.check_box :help_page_hide_commercial_content
-            Hide marketing-related entries from help
-    .form-group
-      = f.label :help_page_support_url, 'Support page URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :help_page_support_url, class: 'form-control', placeholder: 'http://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
-        %span.help-block#support_help_block Alternate support URL for help page
-
-  %fieldset
-    %legend Pages
-    .form-group
-      = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_pages_size, class: 'form-control'
-        .help-block 0 for unlimited
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :pages_domain_verification_enabled do
-            = f.check_box :pages_domain_verification_enabled
-            Require users to prove ownership of custom domains
-        .help-block
-          Domain verification is an essential security measure for public GitLab
-          sites. Users are required to demonstrate they control a domain before
-          it is enabled
-          = link_to icon('question-circle'), help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
-
-  %fieldset
     %legend Continuous Integration and Deployment
     .form-group
       .col-sm-offset-2.col-sm-10
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
new file mode 100644
index 00000000000..732da8e0c98
--- /dev/null
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -0,0 +1,20 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+  .form-group
+    = f.label :help_page_text, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_area :help_page_text, class: 'form-control', rows: 4
+      .help-block Markdown enabled
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :help_page_hide_commercial_content do
+          = f.check_box :help_page_hide_commercial_content
+          Hide marketing-related entries from help
+  .form-group
+    = f.label :help_page_support_url, 'Support page URL', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_field :help_page_support_url, class: 'form-control', placeholder: 'http://company.example.com/getting-help', :'aria-describedby' => 'support_help_block'
+      %span.help-block#support_help_block Alternate support URL for help page
+  .form-actions
+    = f.submit 'Save changes', class: "btn btn-save"
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
new file mode 100644
index 00000000000..1b83250bc0f
--- /dev/null
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -0,0 +1,20 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+  .form-group
+    = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.number_field :max_pages_size, class: 'form-control'
+      .help-block 0 for unlimited
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :pages_domain_verification_enabled do
+          = f.check_box :pages_domain_verification_enabled
+          Require users to prove ownership of custom domains
+      .help-block
+        Domain verification is an essential security measure for public GitLab
+        sites. Users are required to demonstrate they control a domain before
+        it is enabled
+        = link_to icon('question-circle'), help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
+  .form-actions
+    = f.submit 'Save changes', class: "btn btn-save"
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
new file mode 100644
index 00000000000..c3f6b99b1db
--- /dev/null
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -0,0 +1,57 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :password_authentication_enabled_for_web do
+          = f.check_box :password_authentication_enabled_for_web
+          Password authentication enabled for web interface
+          .help-block
+            When disabled, an external authentication provider must be used.
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :password_authentication_enabled_for_git do
+          = f.check_box :password_authentication_enabled_for_git
+          Password authentication enabled for Git over HTTP(S)
+          .help-block
+            When disabled, a Personal Access Token
+            - if Gitlab::Auth::LDAP::Config.enabled?
+              or LDAP password
+            must be used to authenticate.
+  - if omniauth_enabled? && button_based_providers.any?
+    .form-group
+      = f.label :enabled_oauth_sign_in_sources, 'Enabled OAuth sign-in sources', class: 'control-label col-sm-2'
+      .col-sm-10
+        .btn-group{ data: { toggle: 'buttons' } }
+          - oauth_providers_checkboxes.each do |source|
+            = source
+  .form-group
+    = f.label :two_factor_authentication, 'Two-factor authentication', class: 'control-label col-sm-2'
+    .col-sm-10
+      .checkbox
+        = f.label :require_two_factor_authentication do
+          = f.check_box :require_two_factor_authentication
+          Require all users to setup Two-factor authentication
+  .form-group
+    = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.number_field :two_factor_grace_period, min: 0, class: 'form-control', placeholder: '0'
+      .help-block Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
+  .form-group
+    = f.label :home_page_url, 'Home page URL', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_field :home_page_url, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'home_help_block'
+      %span.help-block#home_help_block We will redirect non-logged in users to this page
+  .form-group
+    = f.label :after_sign_out_path, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_field :after_sign_out_path, class: 'form-control', placeholder: 'http://company.example.com', :'aria-describedby' => 'after_sign_out_path_help_block'
+      %span.help-block#after_sign_out_path_help_block We will redirect users to this page after they sign out
+  .form-group
+    = f.label :sign_in_text, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_area :sign_in_text, class: 'form-control', rows: 4
+      .help-block Markdown enabled
+  .form-actions
+    = f.submit 'Save changes', class: "btn btn-save"
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
new file mode 100644
index 00000000000..873761e5380
--- /dev/null
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -0,0 +1,57 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :signup_enabled do
+          = f.check_box :signup_enabled
+          Sign-up enabled
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :send_user_confirmation_email do
+          = f.check_box :send_user_confirmation_email
+          Send confirmation email on sign-up
+  .form-group
+    = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_area :domain_whitelist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
+      .help-block ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
+  .form-group
+    = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'control-label col-sm-2'
+    .col-sm-10
+      .checkbox
+        = f.label :domain_blacklist_enabled do
+          = f.check_box :domain_blacklist_enabled
+          Enable domain blacklist for sign ups
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .radio
+        = label_tag :blacklist_type_file do
+          = radio_button_tag :blacklist_type, :file
+          .option-title
+            Upload blacklist file
+      .radio
+        = label_tag :blacklist_type_raw do
+          = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?
+          .option-title
+            Enter blacklist manually
+  .form-group.blacklist-file
+    = f.label :domain_blacklist_file, 'Blacklist file', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.file_field :domain_blacklist_file, class: 'form-control', accept: '.txt,.conf'
+      .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries.
+  .form-group.blacklist-raw
+    = f.label :domain_blacklist, 'Blacklisted domains for sign-ups', class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_area :domain_blacklist_raw, placeholder: 'domain.com', class: 'form-control', rows: 8
+      .help-block Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
+
+  .form-group
+    = f.label :after_sign_up_text, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
+      .help-block Markdown enabled
+
+  .form-actions
+    = f.submit 'Save changes', class: "btn btn-save"
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
new file mode 100644
index 00000000000..a5f861dcf4c
--- /dev/null
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -0,0 +1,64 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+  .form-group
+    = f.label :default_branch_protection, class: 'control-label col-sm-2'
+    .col-sm-10
+      = f.select :default_branch_protection, options_for_select(Gitlab::Access.protection_options, @application_setting.default_branch_protection), {}, class: 'form-control'
+  .form-group.visibility-level-setting
+    = f.label :default_project_visibility, class: 'control-label col-sm-2'
+    .col-sm-10
+      = render('shared/visibility_radios', model_method: :default_project_visibility, form: f, selected_level: @application_setting.default_project_visibility, form_model: Project.new)
+  .form-group.visibility-level-setting
+    = f.label :default_snippet_visibility, class: 'control-label col-sm-2'
+    .col-sm-10
+      = render('shared/visibility_radios', model_method: :default_snippet_visibility, form: f, selected_level: @application_setting.default_snippet_visibility, form_model: ProjectSnippet.new)
+  .form-group.visibility-level-setting
+    = f.label :default_group_visibility, class: 'control-label col-sm-2'
+    .col-sm-10
+      = render('shared/visibility_radios', model_method: :default_group_visibility, form: f, selected_level: @application_setting.default_group_visibility, form_model: Group.new)
+  .form-group
+    = f.label :restricted_visibility_levels, class: 'control-label col-sm-2'
+    .col-sm-10
+      - checkbox_name = 'application_setting[restricted_visibility_levels][]'
+      = hidden_field_tag(checkbox_name)
+      - restricted_level_checkboxes('restricted-visibility-help', checkbox_name).each do |level|
+        .checkbox
+          = level
+      %span.help-block#restricted-visibility-help
+        Selected levels cannot be used by non-admin users for projects or snippets.
+        If the public level is restricted, user profiles are only visible to logged in users.
+  .form-group
+    = f.label :import_sources, class: 'control-label col-sm-2'
+    .col-sm-10
+      - import_sources_checkboxes('import-sources-help').each do |source|
+        .checkbox= source
+      %span.help-block#import-sources-help
+        Enabled sources for code import during project creation. OmniAuth must be configured for GitHub
+        = link_to "(?)", help_page_path("integration/github")
+        , Bitbucket
+        = link_to "(?)", help_page_path("integration/bitbucket")
+        and GitLab.com
+        = link_to "(?)", help_page_path("integration/gitlab")
+
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = f.label :project_export_enabled do
+          = f.check_box :project_export_enabled
+          Project export enabled
+
+  .form-group
+    %label.control-label.col-sm-2 Enabled Git access protocols
+    .col-sm-10
+      = select(:application_setting, :enabled_git_access_protocol, [['Both SSH and HTTP(S)', nil], ['Only SSH', 'ssh'], ['Only HTTP(S)', 'http']], {}, class: 'form-control')
+      %span.help-block#clone-protocol-help
+        Allow only the selected protocols to be used for Git access.
+
+  - ApplicationSetting::SUPPORTED_KEY_TYPES.each do |type|
+    - field_name = :"#{type}_key_restriction"
+    .form-group
+      = f.label field_name, "#{type.upcase} SSH keys", class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
+  .form-actions
+    = f.submit 'Save changes', class: "btn btn-save"
diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml
index ecc46d86afe..7aa4130e574 100644
--- a/app/views/admin/application_settings/show.html.haml
+++ b/app/views/admin/application_settings/show.html.haml
@@ -1,5 +1,73 @@
+- breadcrumb_title "Settings"
 - page_title "Settings"
+- @content_class = "limit-container-width" unless fluid_layout
+- expanded = Rails.env.test?
 
-%h3.page-title Settings
-%hr
-= render 'form'
+%section.settings.as-visibility-access.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Visibility and access controls
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Set default and restrict visibility levels. Configure import sources and git access protocol.
+  .settings-content
+    = render 'visibility_and_access'
+
+%section.settings.as-account-limit.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Account and limit settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Session expiration, projects limit and attachment size.
+  .settings-content
+    = render 'account_and_limit'
+
+%section.settings.as-signup.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Sign-up restrictions
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Configure the way a user creates a new account.
+  .settings-content
+    = render 'signup'
+
+%section.settings.as-signin.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Sign-in restrictions
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Set requirements for a user to sign-in. Enable mandatory two-factor authentication.
+  .settings-content
+    = render 'signin'
+
+%section.settings.as-help-page.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Help page
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Help page text and support page url.
+  .settings-content
+    = render 'help_page'
+
+%section.settings.as-pages.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      Pages
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Size and domain settings for static websites
+  .settings-content
+    = render 'pages'
+
+.prepend-top-20
+  = render 'form'
diff --git a/spec/features/admin/admin_disables_git_access_protocol_spec.rb b/spec/features/admin/admin_disables_git_access_protocol_spec.rb
index 9ea3cfa72c6..9946cc77d1d 100644
--- a/spec/features/admin/admin_disables_git_access_protocol_spec.rb
+++ b/spec/features/admin/admin_disables_git_access_protocol_spec.rb
@@ -55,14 +55,19 @@ feature 'Admin disables Git access protocol' do
   end
 
   def disable_http_protocol
-    visit admin_application_settings_path
-    find('#application_setting_enabled_git_access_protocol').find(:xpath, 'option[2]').select_option
-    click_on 'Save'
+    switch_git_protocol(2)
   end
 
   def disable_ssh_protocol
+    switch_git_protocol(3)
+  end
+
+  def switch_git_protocol(value)
     visit admin_application_settings_path
-    find('#application_setting_enabled_git_access_protocol').find(:xpath, 'option[3]').select_option
-    click_on 'Save'
+
+    page.within('.as-visibility-access') do
+      find('#application_setting_enabled_git_access_protocol').find(:xpath, "option[#{value}]").select_option
+      click_on 'Save'
+    end
   end
 end
diff --git a/spec/features/admin/admin_settings_spec.rb b/spec/features/admin/admin_settings_spec.rb
index 39b213988f0..34d45aec2fd 100644
--- a/spec/features/admin/admin_settings_spec.rb
+++ b/spec/features/admin/admin_settings_spec.rb
@@ -10,18 +10,21 @@ feature 'Admin updates settings' do
   end
 
   scenario 'Change visibility settings' do
-    choose "application_setting_default_project_visibility_20"
-    click_button 'Save'
+    page.within('.as-visibility-access') do
+      choose "application_setting_default_project_visibility_20"
+      click_button 'Save changes'
+    end
 
     expect(page).to have_content "Application settings saved successfully"
   end
 
   scenario 'Uncheck all restricted visibility levels' do
-    find('#application_setting_visibility_level_0').set(false)
-    find('#application_setting_visibility_level_10').set(false)
-    find('#application_setting_visibility_level_20').set(false)
-
-    click_button 'Save'
+    page.within('.as-visibility-access') do
+      find('#application_setting_visibility_level_0').set(false)
+      find('#application_setting_visibility_level_10').set(false)
+      find('#application_setting_visibility_level_20').set(false)
+      click_button 'Save changes'
+    end
 
     expect(page).to have_content "Application settings saved successfully"
     expect(find('#application_setting_visibility_level_0')).not_to be_checked
@@ -29,21 +32,59 @@ feature 'Admin updates settings' do
     expect(find('#application_setting_visibility_level_20')).not_to be_checked
   end
 
-  scenario 'Change application settings' do
-    uncheck 'Gravatar enabled'
-    fill_in 'Home page URL', with: 'https://about.gitlab.com/'
-    fill_in 'Help page text', with: 'Example text'
-    check 'Hide marketing-related entries from help'
-    fill_in 'Support page URL', with: 'http://example.com/help'
-    uncheck 'Project export enabled'
-    click_button 'Save'
+  scenario 'Change Visibility and Access Controls' do
+    page.within('.as-visibility-access') do
+      uncheck 'Project export enabled'
+      click_button 'Save changes'
+    end
+
+    expect(Gitlab::CurrentSettings.project_export_enabled).to be_falsey
+    expect(page).to have_content "Application settings saved successfully"
+  end
+
+  scenario 'Change Account and Limit Settings' do
+    page.within('.as-account-limit') do
+      uncheck 'Gravatar enabled'
+      click_button 'Save changes'
+    end
 
     expect(Gitlab::CurrentSettings.gravatar_enabled).to be_falsey
+    expect(page).to have_content "Application settings saved successfully"
+  end
+
+  scenario 'Change Sign-in restrictions' do
+    page.within('.as-signin') do
+      fill_in 'Home page URL', with: 'https://about.gitlab.com/'
+      click_button 'Save changes'
+    end
+
     expect(Gitlab::CurrentSettings.home_page_url).to eq "https://about.gitlab.com/"
+    expect(page).to have_content "Application settings saved successfully"
+  end
+
+  scenario 'Change Help page' do
+    page.within('.as-help-page') do
+      fill_in 'Help page text', with: 'Example text'
+      check 'Hide marketing-related entries from help'
+      fill_in 'Support page URL', with: 'http://example.com/help'
+      click_button 'Save changes'
+    end
+
     expect(Gitlab::CurrentSettings.help_page_text).to eq "Example text"
     expect(Gitlab::CurrentSettings.help_page_hide_commercial_content).to be_truthy
     expect(Gitlab::CurrentSettings.help_page_support_url).to eq "http://example.com/help"
-    expect(Gitlab::CurrentSettings.project_export_enabled).to be_falsey
+    expect(page).to have_content "Application settings saved successfully"
+  end
+
+  scenario 'Change Pages settings' do
+    page.within('.as-pages') do
+      fill_in 'Maximum size of pages (MB)', with: 15
+      check 'Require users to prove ownership of custom domains'
+      click_button 'Save changes'
+    end
+
+    expect(Gitlab::CurrentSettings.max_pages_size).to eq 15
+    expect(Gitlab::CurrentSettings.pages_domain_verification_enabled?).to be_truthy
     expect(page).to have_content "Application settings saved successfully"
   end
 
@@ -83,18 +124,22 @@ feature 'Admin updates settings' do
 
   context 'sign-in restrictions', :js do
     it 'de-activates oauth sign-in source' do
-      find('input#application_setting_enabled_oauth_sign_in_sources_[value=gitlab]').send_keys(:return)
+      page.within('.as-signin') do
+        find('input#application_setting_enabled_oauth_sign_in_sources_[value=gitlab]').send_keys(:return)
 
-      expect(find('.btn', text: 'GitLab.com')).not_to have_css('.active')
+        expect(find('.btn', text: 'GitLab.com')).not_to have_css('.active')
+      end
     end
   end
 
   scenario 'Change Keys settings' do
-    select 'Are forbidden', from: 'RSA SSH keys'
-    select 'Are allowed', from: 'DSA SSH keys'
-    select 'Must be at least 384 bits', from: 'ECDSA SSH keys'
-    select 'Are forbidden', from: 'ED25519 SSH keys'
-    click_on 'Save'
+    page.within('.as-visibility-access') do
+      select 'Are forbidden', from: 'RSA SSH keys'
+      select 'Are allowed', from: 'DSA SSH keys'
+      select 'Must be at least 384 bits', from: 'ECDSA SSH keys'
+      select 'Are forbidden', from: 'ED25519 SSH keys'
+      click_on 'Save changes'
+    end
 
     forbidden = ApplicationSetting::FORBIDDEN_KEY_VALUE.to_s