Make group settings page have expandable menus (#10244)

app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js

@@ -1,6 +1,10 @@
+import initSettingsPanels from '~/settings_panels';
 import AjaxVariableList from '~/ci_variable_list/ajax_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
+
   const variableListEl = document.querySelector('.js-ci-variable-list-section');
   // eslint-disable-next-line no-new
   new AjaxVariableList({

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

@@ -1,11 +1,16 @@
 - breadcrumb_title "CI / CD Settings"
 - page_title "CI / CD"
 
-%h4
-  = _('Secret variables')
-  = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank', rel: 'noopener noreferrer'
+- expanded = Rails.env.test?
 
-%p
-  = render "ci/variables/content"
-
-= render 'ci/variables/index', save_endpoint: group_variables_path
+%section.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Secret variables')
+      = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'secret-variables'), target: '_blank', rel: 'noopener noreferrer'
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p.append-bottom-0
+      = render "ci/variables/content"
+  .settings-content
+    = render 'ci/variables/index', save_endpoint: group_variables_path