diff --git a/app/assets/javascripts/ide/components/terminal/session.vue b/app/assets/javascripts/ide/components/terminal/session.vue index a8fe9ea686668c0518f6adc5dc9a836fadbe45d1..0e67a2ab45fa8e1e9c0715bfe4c5574ad3dda1c6 100644 --- a/app/assets/javascripts/ide/components/terminal/session.vue +++ b/app/assets/javascripts/ide/components/terminal/session.vue @@ -1,5 +1,6 @@ <script> import { mapActions, mapState } from 'vuex'; +import { GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; import Terminal from './terminal.vue'; import { isEndingStatus } from '../../stores/modules/terminal/utils'; @@ -7,6 +8,7 @@ import { isEndingStatus } from '../../stores/modules/terminal/utils'; export default { components: { Terminal, + GlButton, }, computed: { ...mapState('terminal', ['session']), @@ -14,15 +16,17 @@ export default { if (isEndingStatus(this.session.status)) { return { action: () => this.restartSession(), + variant: 'info', + category: 'primary', text: __('Restart Terminal'), - class: 'btn-primary', }; } return { action: () => this.stopSession(), + variant: 'danger', + category: 'secondary', text: __('Stop Terminal'), - class: 'btn-inverted btn-remove', }; }, }, @@ -37,15 +41,13 @@ export default { <header class="ide-job-header d-flex align-items-center"> <h5>{{ __('Web Terminal') }}</h5> <div class="ml-auto align-self-center"> - <button + <gl-button v-if="actionButton" - type="button" - class="btn btn-sm" - :class="actionButton.class" + :variant="actionButton.variant" + :category="actionButton.category" @click="actionButton.action" + >{{ actionButton.text }}</gl-button > - {{ actionButton.text }} - </button> </div> </header> <terminal :terminal-path="session.terminalPath" :status="session.status" /> diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js index ce61a31691aee1794f6aeea0c175491aa0dd9d80..3ca37166ac4f58881cde0c91c6bd83dd916a61a6 100644 --- a/spec/frontend/ide/components/terminal/session_spec.js +++ b/spec/frontend/ide/components/terminal/session_spec.js @@ -1,4 +1,5 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; import Vuex from 'vuex'; import TerminalSession from '~/ide/components/terminal/session.vue'; import Terminal from '~/ide/components/terminal/terminal.vue'; @@ -38,6 +39,8 @@ describe('IDE TerminalSession', () => { }); }; + const findButton = () => wrapper.find(GlButton); + beforeEach(() => { state = { session: { status: RUNNING, terminalPath: TEST_TERMINAL_PATH }, @@ -69,8 +72,8 @@ describe('IDE TerminalSession', () => { state.session = { status }; factory(); - const button = wrapper.find('button'); - button.trigger('click'); + const button = findButton(); + button.vm.$emit('click'); return wrapper.vm.$nextTick().then(() => { expect(button.text()).toEqual('Stop Terminal'); @@ -84,8 +87,8 @@ describe('IDE TerminalSession', () => { state.session = { status }; factory(); - const button = wrapper.find('button'); - button.trigger('click'); + const button = findButton(); + button.vm.$emit('click'); return wrapper.vm.$nextTick().then(() => { expect(button.text()).toEqual('Restart Terminal');