Add expand/collapse button

Add ability to expand/collapse error tracking settings

app/assets/javascripts/error_tracking_settings/index.js

 import Vue from 'vue';
 import ErrorTrackingSettings from './components/app.vue';
 import createStore from './store';
+import initSettingsPanels from '~/settings_panels';
 
 export default () => {
+  initSettingsPanels();
   const formContainerEl = document.querySelector('.js-error-tracking-form');
   const {
     dataset: { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },

app/views/projects/settings/operations/_error_tracking.html.haml

@@ -2,10 +2,12 @@
 
 - setting = error_tracking_setting
 
-%section.settings.expanded.no-animate
+%section.settings.no-animate.js-error-tracking-settings
   .settings-header
     %h4
       = _('Error Tracking')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = _('Expand')
     %p
       = _('To link Sentry to GitLab, enter your Sentry URL and Auth Token.')
       = link_to _('More information'), help_page_path('user/project/operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'

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

@@ -3,6 +3,6 @@
 - breadcrumb_title _('Operations Settings')
 
 = render_if_exists 'projects/settings/operations/incidents'
-= render 'projects/settings/operations/error_tracking', expanded: true
+= render 'projects/settings/operations/error_tracking'
 = render 'projects/settings/operations/external_dashboard'
 = render_if_exists 'projects/settings/operations/tracing'

changelogs/unreleased/61511-add-expand-collapse-to-project-operation-settings.yml

+---
+title: Add expand/collapse to error tracking settings
+merge_request: 28619
+author:
+type: added

spec/features/projects/settings/operations_settings_spec.rb

@@ -46,6 +46,9 @@ describe 'Projects > Settings > For a forked project', :js do
 
           wait_for_requests
 
+          within '.js-error-tracking-settings' do
+            click_button('Expand')
+          end
           expect(page).to have_content('Sentry API URL')
           expect(page.body).to include('Error Tracking')
           expect(page).to have_button('Connect')
@@ -86,6 +89,9 @@ describe 'Projects > Settings > For a forked project', :js do
 
           wait_for_requests
 
+          within '.js-error-tracking-settings' do
+            click_button('Expand')
+          end
           check('Active')
           fill_in('error-tracking-api-host', with: 'http://sentry.example.com')
           fill_in('error-tracking-token', with: 'token')