Commit e0c5deaf authored by Adriel Santiago's avatar Adriel Santiago Committed by Kushal Pandya

Add expand/collapse button

Add ability to expand/collapse operation settings
parent 4dbf1016
<script> <script>
import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
import initSettingsPanels from '~/settings_panels';
export default { export default {
components: { components: {
...@@ -19,15 +20,19 @@ export default { ...@@ -19,15 +20,19 @@ export default {
required: true, required: true,
}, },
}, },
mounted() {
initSettingsPanels();
},
}; };
</script> </script>
<template> <template>
<section class="settings expanded"> <section class="settings no-animate">
<div class="settings-header"> <div class="settings-header">
<h4 class="js-section-header"> <h4 class="js-section-header">
{{ s__('ExternalMetrics|External Dashboard') }} {{ s__('ExternalMetrics|External Dashboard') }}
</h4> </h4>
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
<p class="js-section-sub-header"> <p class="js-section-sub-header">
{{ {{
s__( s__(
......
...@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils'; ...@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui'; import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue'; import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import initSettingsPanels from '~/settings_panels';
jest.mock('~/settings_panels');
describe('operation settings external dashboard component', () => { describe('operation settings external dashboard component', () => {
let wrapper; let wrapper;
...@@ -21,6 +24,18 @@ describe('operation settings external dashboard component', () => { ...@@ -21,6 +24,18 @@ describe('operation settings external dashboard component', () => {
expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard'); 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', () => { describe('sub-header', () => {
let subHeader; let subHeader;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment