kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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:
Kushal Pandya 2019-05-28 06:41:35 +00:00
parent 4dbf10164a e0c5deaf1b
commit daa72ac868
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/operation_settings/components/external_dashboard.vue
View File

@ -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__(

15
spec/frontend/operation_settings/components/external_dashboard_spec.js
View File

@ -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;