Merge branch 'adriel-expand-collapse-operation-settings' into 'master'

Add expand/collapse button to operation settings

Closes #61511

See merge request gitlab-org/gitlab-ce!28840

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/assets/javascripts/operation_settings/components/external_dashboard.vue

@@ -23,11 +23,12 @@ export default {
 </script>
 
 <template>
-  <section class="settings expanded">
+  <section class="settings no-animate">
     <div class="settings-header">
       <h4 class="js-section-header">
         {{ s__('ExternalMetrics|External Dashboard') }}
       </h4>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{
           s__(

app/assets/javascripts/pages/projects/settings/operations/show/index.js

 import mountErrorTrackingForm from '~/error_tracking_settings';
 import mountOperationSettings from '~/operation_settings';
+import initSettingsPanels from '~/settings_panels';
 
 document.addEventListener('DOMContentLoaded', () => {
   mountErrorTrackingForm();
   mountOperationSettings();
+  initSettingsPanels();
 });

spec/frontend/operation_settings/components/external_dashboard_spec.js

@@ -21,6 +21,14 @@ describe('operation settings external dashboard component', () => {
     expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard');
   });
 
+  describe('expand/collapse button', () => {
+    it('renders as an expand button by default', () => {
+      const button = wrapper.find(GlButton);
+
+      expect(button.text()).toBe('Expand');
+    });
+  });
+
   describe('sub-header', () => {
     let subHeader;