Move UI of several application settings to expandable block

app/assets/javascripts/pages/admin/application_settings/index.js

+import initSettingsPanels from '~/settings_panels';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+});

app/views/admin/application_settings/_account_and_limit.html.haml

+= 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'

app/views/admin/application_settings/_help_page.html.haml

+= 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"

app/views/admin/application_settings/_pages.html.haml

+= 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"

app/views/admin/application_settings/_signin.html.haml

+= 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"

app/views/admin/application_settings/_signup.html.haml

+= 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"

app/views/admin/application_settings/_visibility_and_access.html.haml

+= 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"

app/views/admin/application_settings/show.html.haml

+- 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'

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
+
+    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

spec/features/admin/admin_settings_spec.rb

@@ -10,18 +10,21 @@ feature 'Admin updates settings' do
   end
 
   scenario 'Change visibility settings' do
+    page.within('.as-visibility-access') do
       choose "application_setting_default_project_visibility_20"
-    click_button 'Save'
+      click_button 'Save changes'
+    end
 
     expect(page).to have_content "Application settings saved successfully"
   end
 
   scenario 'Uncheck all restricted visibility levels' do
+    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'
+      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
+  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'
-    uncheck 'Project export enabled'
-    click_button 'Save'
+      click_button 'Save changes'
+    end
 
-    expect(Gitlab::CurrentSettings.gravatar_enabled).to be_falsey
-    expect(Gitlab::CurrentSettings.home_page_url).to eq "https://about.gitlab.com/"
     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
+      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')
       end
     end
+  end
 
   scenario 'Change Keys settings' do
+    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'
+      click_on 'Save changes'
+    end
 
     forbidden = ApplicationSetting::FORBIDDEN_KEY_VALUE.to_s