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

Add expand/collapse button

Add ability to expand/collapse operation settings
parent 09234566
import Vue from 'vue'; import Vue from 'vue';
import ErrorTrackingSettings from './components/app.vue'; import ErrorTrackingSettings from './components/app.vue';
import createStore from './store'; import createStore from './store';
import initSettingsPanels from '~/settings_panels';
export default () => { export default () => {
initSettingsPanels();
const formContainerEl = document.querySelector('.js-error-tracking-form'); const formContainerEl = document.querySelector('.js-error-tracking-form');
const { const {
dataset: { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint }, dataset: { apiHost, enabled, project, token, listProjectsEndpoint, operationsSettingsEndpoint },
......
...@@ -23,11 +23,12 @@ export default { ...@@ -23,11 +23,12 @@ export default {
</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__(
......
import mountErrorTrackingForm from '~/error_tracking_settings'; import mountErrorTrackingForm from '~/error_tracking_settings';
import mountOperationSettings from '~/operation_settings'; import mountOperationSettings from '~/operation_settings';
import initSettingsPanels from '~/settings_panels';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
mountErrorTrackingForm(); mountErrorTrackingForm();
mountOperationSettings(); mountOperationSettings();
initSettingsPanels();
}); });
...@@ -21,6 +21,14 @@ describe('operation settings external dashboard component', () => { ...@@ -21,6 +21,14 @@ 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('renders as an expand button by default', () => {
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