Add expand/collapse button61511-add-expand-collapse-to-project-operation-setttings-2

Add ability to expand/collapse operation settings

2 files changed, 21 insertions, 1 deletions

diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
index 0a87d193b72..b2b37355033 100644
--- a/app/assets/javascripts/operation_settings/components/external_dashboard.vue
+++ b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+import initSettingsPanels from '~/settings_panels';
 
 export default {
   components: {
@@ -19,15 +20,19 @@ export default {
       required: true,
     },
   },
+  mounted() {
+    initSettingsPanels();
+  },
 };
 </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__(
diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/external_dashboard_spec.js
index de1dd219fe0..4d35d35965c 100644
--- a/spec/frontend/operation_settings/components/external_dashboard_spec.js
+++ b/spec/frontend/operation_settings/components/external_dashboard_spec.js
@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
 import { TEST_HOST } from 'helpers/test_constants';
+import initSettingsPanels from '~/settings_panels';
+
+jest.mock('~/settings_panels');
 
 describe('operation settings external dashboard component', () => {
   let wrapper;
@@ -21,6 +24,18 @@ describe('operation settings external dashboard component', () => {
     expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard');
   });
 
+  describe('expand/collapse button', () => {
+    it('is properly instantiated as a settings panel', () => {
+      expect(initSettingsPanels).toHaveBeenCalled();
+    });
+
+    it('defaults to collapsed state', () => {
+      const button = wrapper.find(GlButton);
+
+      expect(button.text()).toBe('Expand');
+    });
+  });
+
   describe('sub-header', () => {
     let subHeader;