Move the rest of application settings to expandable blocks

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

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :email_author_in_body do
+            = f.check_box :email_author_in_body
+            Include author name in notification email body
+          .help-block
+            Some email servers do not support overriding the email sender name.
+            Enable this option to include the name of the author of the issue,
+            merge request or comment in the email body instead.
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :html_emails_enabled do
+            = f.check_box :html_emails_enabled
+            Enable HTML emails
+          .help-block
+            By default GitLab sends emails in HTML and plain text formats so mail
+            clients can choose what format to use. Disable this option if you only
+            want to send emails in plain text format.
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

@@ -4,176 +4,8 @@
   - if License.feature_available?(:repository_mirrors)
     = render partial: 'repository_mirrors_form', locals: { f: f }
 
-  - if Gitlab.config.registry.enabled
-    %fieldset
-      %legend Container Registry
-      .form-group
-        = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.number_field :container_registry_token_expire_delay, class: 'form-control'
-
   = render partial: 'elasticsearch_form', locals: { f: f }
 
-  - if koding_enabled?
-    %fieldset
-      %legend Koding
-      .form-group
-        .col-sm-offset-2.col-sm-10
-          .checkbox
-            = f.label :koding_enabled do
-              = f.check_box :koding_enabled
-              Enable Koding
-          .help-block
-            Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again.
-      .form-group
-        = f.label :koding_url, 'Koding URL', class: 'control-label col-sm-2'
-        .col-sm-10
-          = f.text_field :koding_url, class: 'form-control', placeholder: 'http://gitlab.your-koding-instance.com:8090'
-          .help-block
-            Koding has integration enabled out of the box for the
-            %strong gitlab
-            team, and you need to provide that team's URL here. Learn more in the
-            = succeed "." do
-              = link_to "Koding administration documentation", help_page_path("administration/integration/koding")
-
-  %fieldset
-    %legend PlantUML
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :plantuml_enabled do
-            = f.check_box :plantuml_enabled
-            Enable PlantUML
-    .form-group
-      = f.label :plantuml_url, 'PlantUML URL', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080'
-        .help-block
-          Allow rendering of
-          = link_to "PlantUML", "http://plantuml.com"
-          diagrams in Asciidoc documents using an external PlantUML service.
-
-  %fieldset
-    %legend#usage-statistics Usage statistics
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :version_check_enabled do
-            = f.check_box :version_check_enabled
-            Enable version check
-          .help-block
-            GitLab will inform you if a new version is available.
-            = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check")
-            about what information is shared with GitLab Inc.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        - can_be_configured = @application_setting.usage_ping_can_be_configured?
-        .checkbox
-          = f.label :usage_ping_enabled do
-            = f.check_box :usage_ping_enabled, disabled: !can_be_configured
-            Enable usage ping
-          .help-block
-            - if can_be_configured
-              To help improve GitLab and its user experience, GitLab will
-              periodically collect usage information.
-              = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-ping")
-              about what information is shared with GitLab Inc. Visit
-              = link_to 'Cohorts', admin_cohorts_path(anchor: 'usage-ping')
-              to see the JSON payload sent.
-            - else
-              The usage ping is disabled, and cannot be configured through this
-              form. For more information, see the documentation on
-              = succeed '.' do
-                = link_to 'deactivating the usage ping', help_page_path('user/admin_area/settings/usage_statistics', anchor: 'deactivate-the-usage-ping')
-
-  %fieldset
-    %legend Email
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :email_author_in_body do
-            = f.check_box :email_author_in_body
-            Include author name in notification email body
-          .help-block
-            Some email servers do not support overriding the email sender name.
-            Enable this option to include the name of the author of the issue,
-            merge request or comment in the email body instead.
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :html_emails_enabled do
-            = f.check_box :html_emails_enabled
-            Enable HTML emails
-          .help-block
-            By default GitLab sends emails in HTML and plain text formats so mail
-            clients can choose what format to use. Disable this option if you only
-            want to send emails in plain text format.
-
-  %fieldset
-    %legend Gitaly Timeouts
-    .form-group
-      = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_default, class: 'form-control'
-        .help-block
-          Timeout for Gitaly calls from the GitLab application (in seconds). This timeout is not enforced
-          for git fetch/push operations or Sidekiq jobs.
-    .form-group
-      = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_fast, class: 'form-control'
-        .help-block
-          Fast operation timeout (in seconds). Some Gitaly operations are expected to be fast.
-          If they exceed this threshold, there may be a problem with a storage shard and 'failing fast'
-          can help maintain the stability of the GitLab instance.
-    .form-group
-      = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :gitaly_timeout_medium, class: 'form-control'
-        .help-block
-          Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout.
-
-  %fieldset
-    %legend Web terminal
-    .form-group
-      = f.label :terminal_max_session_time, 'Max session time', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :terminal_max_session_time, class: 'form-control'
-        .help-block
-          Maximum time for web terminal websocket connection (in seconds).
-          0 for unlimited.
-
-  %fieldset
-    %legend Real-time features
-    .form-group
-      = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :polling_interval_multiplier, class: 'form-control'
-        .help-block
-          Change this value to influence how frequently the GitLab UI polls for updates.
-          If you set the value to 2 all polling intervals are multiplied
-          by 2, which means that polling happens half as frequently.
-          The multiplier can also have a decimal value.
-          The default value (1) is a reasonable choice for the majority of GitLab
-          installations. Set to 0 to completely disable polling.
-          = link_to icon('question-circle'), help_page_path('administration/polling')
-
-  %fieldset
-    %legend Performance optimization
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :authorized_keys_enabled do
-            = f.check_box :authorized_keys_enabled
-            Write to "authorized_keys" file
-          .help-block
-            By default, we write to the "authorized_keys" file to support Git
-            over SSH without additional configuration. GitLab can be optimized
-            to authenticate SSH keys via the database file. Only uncheck this
-            if you have configured your OpenSSH server to use the
-            AuthorizedKeysCommand. Click on the help icon for more details.
-            = link_to icon('question-circle'), help_page_path('administration/operations/fast_ssh_key_lookup')
-
   - if Gitlab.com? || Rails.env.development?
     %fieldset
       %legend Slack application

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :gitaly_timeout_default, 'Default Timeout Period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :gitaly_timeout_default, class: 'form-control'
+        .help-block
+          Timeout for Gitaly calls from the GitLab application (in seconds). This timeout is not enforced
+          for git fetch/push operations or Sidekiq jobs.
+    .form-group
+      = f.label :gitaly_timeout_fast, 'Fast Timeout Period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :gitaly_timeout_fast, class: 'form-control'
+        .help-block
+          Fast operation timeout (in seconds). Some Gitaly operations are expected to be fast.
+          If they exceed this threshold, there may be a problem with a storage shard and 'failing fast'
+          can help maintain the stability of the GitLab instance.
+    .form-group
+      = f.label :gitaly_timeout_medium, 'Medium Timeout Period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :gitaly_timeout_medium, class: 'form-control'
+        .help-block
+          Medium operation timeout (in seconds). This should be a value between the Fast and the Default timeout.
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :koding_enabled do
+            = f.check_box :koding_enabled
+            Enable Koding
+        .help-block
+          Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again.
+    .form-group
+      = f.label :koding_url, 'Koding URL', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :koding_url, class: 'form-control', placeholder: 'http://gitlab.your-koding-instance.com:8090'
+        .help-block
+          Koding has integration enabled out of the box for the
+          %strong gitlab
+          team, and you need to provide that team's URL here. Learn more in the
+          = succeed "." do
+            = link_to "Koding administration documentation", help_page_path("administration/integration/koding")
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :authorized_keys_enabled do
+            = f.check_box :authorized_keys_enabled
+            Write to "authorized_keys" file
+          .help-block
+            By default, we write to the "authorized_keys" file to support Git
+            over SSH without additional configuration. GitLab can be optimized
+            to authenticate SSH keys via the database file. Only uncheck this
+            if you have configured your OpenSSH server to use the
+            AuthorizedKeysCommand. Click on the help icon for more details.
+            = link_to icon('question-circle'), help_page_path('administration/operations/fast_ssh_key_lookup')
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :plantuml_enabled do
+            = f.check_box :plantuml_enabled
+            Enable PlantUML
+    .form-group
+      = f.label :plantuml_url, 'PlantUML URL', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080'
+        .help-block
+          Allow rendering of
+          = link_to "PlantUML", "http://plantuml.com"
+          diagrams in Asciidoc documents using an external PlantUML service.
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :polling_interval_multiplier, class: 'form-control'
+        .help-block
+          Change this value to influence how frequently the GitLab UI polls for updates.
+          If you set the value to 2 all polling intervals are multiplied
+          by 2, which means that polling happens half as frequently.
+          The multiplier can also have a decimal value.
+          The default value (1) is a reasonable choice for the majority of GitLab
+          installations. Set to 0 to completely disable polling.
+          = link_to icon('question-circle'), help_page_path('administration/polling')
+
+  = f.submit 'Save changes', class: "btn btn-success"
+

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :container_registry_token_expire_delay, class: 'form-control'
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      = f.label :terminal_max_session_time, 'Max session time', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :terminal_max_session_time, class: 'form-control'
+        .help-block
+          Maximum time for web terminal websocket connection (in seconds).
+          0 for unlimited.
+
+  = f.submit 'Save changes', class: "btn btn-success"

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

+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :version_check_enabled do
+            = f.check_box :version_check_enabled
+            Enable version check
+          .help-block
+            GitLab will inform you if a new version is available.
+            = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "version-check")
+            about what information is shared with GitLab Inc.
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        - can_be_configured = @application_setting.usage_ping_can_be_configured?
+        .checkbox
+          = f.label :usage_ping_enabled do
+            = f.check_box :usage_ping_enabled, disabled: !can_be_configured
+            Enable usage ping
+          .help-block
+            - if can_be_configured
+              To help improve GitLab and its user experience, GitLab will
+              periodically collect usage information.
+              = link_to 'Learn more', help_page_path("user/admin_area/settings/usage_statistics", anchor: "usage-ping")
+              about what information is shared with GitLab Inc. Visit
+              = link_to 'Cohorts', admin_cohorts_path(anchor: 'usage-ping')
+              to see the JSON payload sent.
+            - else
+              The usage ping is disabled, and cannot be configured through this
+              form. For more information, see the documentation on
+              = succeed '.' do
+                = link_to 'deactivating the usage ping', help_page_path('user/admin_area/settings/usage_statistics', anchor: 'deactivate-the-usage-ping')
+
+  = f.submit 'Save changes', class: "btn btn-success"
+

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

@@ -102,7 +102,7 @@
   .settings-content
     = render 'prometheus'
 
-%section.settings.as-performance.no-animate#js-performance-settings{ class: ('expanded' if expanded) }
+%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4
       = _('Profiling - Performance bar')
@@ -180,6 +180,107 @@
   .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.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
+      %h4
+        = _('Koding')
+      %button.btn.js-settings-toggle{ type: 'button' }
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        = _('Online IDE integration settings.')
+    .settings-content
+      = render 'koding'
+
+%section.settings.as-plantuml.no-animate#js-plantuml-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('PlantUML')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Allow rendering of PlantUML diagrams in Asciidoc documents.')
+  .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.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.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.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
+      = _('Web terminal')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Set max session time for web terminal.')
+  .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.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.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

spec/features/admin/admin_settings_spec.rb

@@ -148,7 +148,7 @@ feature 'Admin updates settings' do
   scenario 'Change Performance bar settings' do
     group = create(:group)
 
-    page.within('.as-performance') do
+    page.within('.as-performance-bar') do
       check 'Enable the Performance Bar'
       fill_in 'Allowed group', with: group.path
       click_on 'Save changes'
@@ -158,7 +158,7 @@ feature 'Admin updates settings' do
     expect(find_field('Enable the Performance Bar')).to be_checked
     expect(find_field('Allowed group').value).to eq group.path
 
-    page.within('.as-performance') do
+    page.within('.as-performance-bar') do
       uncheck 'Enable the Performance Bar'
       click_on 'Save changes'
     end
@@ -192,6 +192,26 @@ feature 'Admin updates settings' do
     expect(Gitlab::CurrentSettings.unique_ips_limit_per_user).to eq(15)
   end
 
+  scenario 'Configure web terminal' do
+    page.within('.as-terminal') do
+      fill_in 'Max session time', with: 15
+      click_button 'Save changes'
+    end
+
+    expect(page).to have_content "Application settings saved successfully"
+    expect(Gitlab::CurrentSettings.terminal_max_session_time).to eq(15)
+  end
+
+  scenario 'Enable outbound requests' do
+    page.within('.as-outbound') do
+      check 'Allow requests to the local network from hooks and services'
+      click_button 'Save changes'
+    end
+
+    expect(page).to have_content "Application settings saved successfully"
+    expect(Gitlab::CurrentSettings.allow_local_requests_from_hooks_and_services).to be true
+  end
+
   scenario 'Change Slack Notifications Service template settings' do
     first(:link, 'Service Templates').click
     click_link 'Slack notifications'