Add expand/collapse button

Add ability to expand/collapse error tracking settings

5 files changed, 17 insertions, 2 deletions

diff --git a/app/assets/javascripts/error_tracking_settings/index.js b/app/assets/javascripts/error_tracking_settings/index.js
index ce315963723..e39452353f5 100644
--- a/app/assets/javascripts/error_tracking_settings/index.js
+++ b/app/assets/javascripts/error_tracking_settings/index.js
@@ -1,8 +1,10 @@
 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 },
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index 451a79becc3..583fc08f375 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/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'
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index edc2c58a8ed..0a7a155bc12 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/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'
diff --git a/changelogs/unreleased/61511-add-expand-collapse-to-project-operation-settings.yml b/changelogs/unreleased/61511-add-expand-collapse-to-project-operation-settings.yml
new file mode 100644
index 00000000000..1a3a019e1f4
--- /dev/null
+++ b/changelogs/unreleased/61511-add-expand-collapse-to-project-operation-settings.yml
@@ -0,0 +1,5 @@
+---
+title: Add expand/collapse to error tracking settings
+merge_request: 28619
+author:
+type: added
diff --git a/spec/features/projects/settings/operations_settings_spec.rb b/spec/features/projects/settings/operations_settings_spec.rb
index af56cb0d4ee..d96e243d96b 100644
--- a/spec/features/projects/settings/operations_settings_spec.rb
+++ b/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')