Merge branch 'collapsable-pipeline-settings' into 'master'

Add collapsable sections for Pipeline Settings

Closes #37275

See merge request !13951

10 files changed, 94 insertions, 63 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 0445dd4e6ea..6db0b18ae5a 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/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;
diff --git a/app/views/ci/variables/_content.html.haml b/app/views/ci/variables/_content.html.haml
index 98f618ca3b8..fbfe3e56588 100644
--- a/app/views/ci/variables/_content.html.haml
+++ b/app/views/ci/variables/_content.html.haml
@@ -1,9 +1,3 @@
-%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.
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 007c2344b5a..2bac69bc536 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -1,7 +1,5 @@
 .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"
diff --git a/app/views/ci/variables/_show.html.haml b/app/views/ci/variables/_show.html.haml
index 2bfb290629d..6d75ae96124 100644
--- a/app/views/ci/variables/_show.html.haml
+++ b/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"
diff --git a/app/views/projects/pipelines_settings/_badge.html.haml b/app/views/projects/pipelines_settings/_badge.html.haml
index 3de518c8b9a..e8028059487 100644
--- a/app/views/projects/pipelines_settings/_badge.html.haml
+++ b/app/views/projects/pipelines_settings/_badge.html.haml
@@ -1,34 +1,32 @@
 %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
-            = badge.title.capitalize
-            ·
-          = badge.to_html
-          .pull-right
-            = render 'shared/ref_switcher', destination: 'badges', align_right: true
-        .panel-body
-          .row
-            .col-md-2.text-center
-              Markdown
-            .col-md-10.code.js-syntax-highlight
-              = highlight('.md', badge.to_markdown)
-          .row
-            %hr
-          .row
-            .col-md-2.text-center
-              HTML
-            .col-md-10.code.js-syntax-highlight
-              = highlight('.html', badge.to_html)
-          .row
-            %hr
-          .row
-            .col-md-2.text-center
-              AsciiDoc
-            .col-md-10.code.js-syntax-highlight
-              = highlight('.adoc', badge.to_asciidoc)
+    .panel.panel-default
+      .panel-heading
+        %b
+          = badge.title.capitalize
+          ·
+        = badge.to_html
+        .pull-right
+          = render 'shared/ref_switcher', destination: 'badges', align_right: true
+      .panel-body
+        .row
+          .col-md-2.text-center
+            Markdown
+          .col-md-10.code.js-syntax-highlight
+            = highlight('.md', badge.to_markdown)
+        .row
+          %hr
+        .row
+          .col-md-2.text-center
+            HTML
+          .col-md-10.code.js-syntax-highlight
+            = highlight('.html', badge.to_html)
+        .row
+          %hr
+        .row
+          .col-md-2.text-center
+            AsciiDoc
+          .col-md-10.code.js-syntax-highlight
+            = highlight('.adoc', badge.to_asciidoc)
diff --git a/app/views/projects/pipelines_settings/_show.html.haml b/app/views/projects/pipelines_settings/_show.html.haml
index d407e187df0..8bf76b646f7 100644
--- a/app/views/projects/pipelines_settings/_show.html.haml
+++ b/app/views/projects/pipelines_settings/_show.html.haml
@@ -1,8 +1,5 @@
 .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
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 099e3b8493f..eaf374bcb83 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/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'
diff --git a/app/views/projects/triggers/_content.html.haml b/app/views/projects/triggers/_content.html.haml
index ea32eac2ae2..6c2d603d95d 100644
--- a/app/views/projects/triggers/_content.html.haml
+++ b/app/views/projects/triggers/_content.html.haml
@@ -1,14 +1,8 @@
-%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'
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index e9a2f803edd..0f655e4ed83 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,7 +1,6 @@
 .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
diff --git a/changelogs/unreleased/collapsable-pipeline-settings.yml b/changelogs/unreleased/collapsable-pipeline-settings.yml
new file mode 100644
index 00000000000..d41959f8ab0
--- /dev/null
+++ b/changelogs/unreleased/collapsable-pipeline-settings.yml
@@ -0,0 +1,5 @@
+---
+title: Add collapsable sections for Pipeline Settings
+merge_request:
+author:
+type: added