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
This commit is contained in:
commit
daa72ac868
2 changed files with 21 additions and 1 deletions
|
@ -1,5 +1,6 @@
|
||||||
<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 {
|
||||||
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';
|
||||||
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', () => {
|
||||||
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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue