Add collapsable sections for Pipeline Settings

app/assets/javascripts/dispatcher.js

@@ -488,6 +488,8 @@ import initChangesDropdown from './init_changes_dropdown';
           initSettingsPanels();
           break;
         case 'projects:settings:ci_cd:show':
+          // Initialize expandable settings panels
+          initSettingsPanels();
         case 'groups:settings:ci_cd:show':
           new gl.ProjectVariables();
           break;

app/views/ci/variables/_content.html.haml

-%h4.prepend-top-0
-  Secret variables
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank'
-%p
-  These variables will be set to environment by the runner, and could be protected by exposing only to protected branches or tags.
-%p
-  So you can use them for passwords, secret keys or whatever you want.
-%p
-  The value of the variable can be visible in job log if explicitly asked to do so.
+%p.append-bottom-default
+  Variables are applied to environments via the runner. They can be protected by only exposing them to protected branches or tags.
+  You can use variables for passwords, secret keys, or whatever you want.

app/views/ci/variables/_index.html.haml

 .row.prepend-top-default.append-bottom-default
-  .col-lg-4
-    = render "ci/variables/content"
-  .col-lg-8
+  .col-lg-12
     %h5.prepend-top-0
       Add a variable
     = render "ci/variables/form", btn_text: "Add new variable"

app/views/ci/variables/_show.html.haml

@@ -4,6 +4,6 @@
   .col-lg-3
     = render "ci/variables/content"
   .col-lg-9
-    %h5.prepend-top-0
+    %h4.prepend-top-0
       Update variable
     = render "ci/variables/form", btn_text: "Save variable"

app/views/projects/pipelines_settings/_badge.html.haml

 %div{ class: badge.title.gsub(' ', '-') }
-  .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
+  .col-lg-12
+    %h4
       = badge.title.capitalize
-  .col-lg-8
-    .prepend-top-10
     .panel.panel-default
       .panel-heading
         %b

app/views/projects/pipelines_settings/_show.html.haml

 .row.prepend-top-default
-  .col-lg-4.profile-settings-sidebar
-    %h4.prepend-top-0
-      Pipelines
-  .col-lg-8
+  .col-lg-12
     = form_for @project, url: project_pipelines_settings_path(@project) do |f|
       %fieldset.builds-feature
         - unless @repository.gitlab_ci_yml

app/views/projects/settings/ci_cd/show.html.haml

@@ -4,7 +4,51 @@
 
 = render "projects/settings/head"
 
-= render 'projects/runners/index'
-= render 'ci/variables/index'
-= render 'projects/triggers/index'
-= render 'projects/pipelines_settings/show'
+- expanded = Rails.env.test?
+
+%section.settings
+  .settings-header
+    %h4
+      General pipelines settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Update your CI/CD configuration, like job timeout.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = render 'projects/pipelines_settings/show'
+
+%section.settings
+  .settings-header
+    %h4
+      Runners settings
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Register and see your runners for this project.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = render 'projects/runners/index'
+
+%section.settings
+  .settings-header
+    %h4
+      Secret variables
+      = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank'
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = render "ci/variables/content"
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = render 'ci/variables/index'
+
+%section.settings
+  .settings-header
+    %h4
+      Pipeline triggers
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      Triggers can force a specific branch or tag to get rebuilt with an API call.  These tokens will
+      impersonate their associated user including their access to projects and their project
+      permissions.
+  .settings-content.no-animate{ class: ('expanded' if expanded) }
+    = render 'projects/triggers/index'

app/views/projects/triggers/_content.html.haml

-%h4.prepend-top-0
-  Triggers
-%p.prepend-top-20
-  Triggers can force a specific branch or tag to get rebuilt with an API call.  These tokens will
-  impersonate their associated user including their access to projects and their project
-  permissions.
-%p.prepend-top-20
+%p.append-bottom-default
   Triggers with the
   %span.label.label-primary legacy
   label do not have an associated user and only have access to the current project.
-%p.append-bottom-0
+  %br
   = succeed '.' do
     Learn more in the
     = link_to 'triggers documentation', help_page_path('ci/triggers/README'), target: '_blank'

app/views/projects/triggers/_index.html.haml

 .row.prepend-top-default.append-bottom-default.triggers-container
-  .col-lg-4
+  .col-lg-12
     = render "projects/triggers/content"
-  .col-lg-8
     .panel.panel-default
       .panel-heading
         %h4.panel-title

changelogs/unreleased/collapsable-pipeline-settings.yml

+---
+title: Add collapsable sections for Pipeline Settings
+merge_request:
+author:
+type: added