diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-05-28 06:41:35 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-05-28 06:41:35 +0000 |
commit | daa72ac868f904115d2ce8f49be916123a56b25d (patch) | |
tree | 3b26b524d7e9e2cc5010026aba99919219e34634 | |
parent | 4dbf10164abf648fe0d68209976eedee501b7fa5 (diff) | |
parent | e0c5deaf1b06787f7af9f376975925335dab20f7 (diff) | |
download | gitlab-ce-daa72ac868f904115d2ce8f49be916123a56b25d.tar.gz |
Merge branch '61511-add-expand-collapse-to-project-operation-setttings-2' into 'master'
Add expand/collapse button to operation settings
Closes #61511
See merge request gitlab-org/gitlab-ce!28620
-rw-r--r-- | app/assets/javascripts/operation_settings/components/external_dashboard.vue | 7 | ||||
-rw-r--r-- | spec/frontend/operation_settings/components/external_dashboard_spec.js | 15 |
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; |