Merge branch...

Merge branch '229282-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javascripts-ide-components' into 'master'

Resolve "Migrate Bootstrap button to GitLab UI GlButton in app/assets/javascripts/ide/components/terminal/session.vue"

See merge request gitlab-org/gitlab!46990

app/assets/javascripts/ide/components/terminal/session.vue

 <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" />

spec/frontend/ide/components/terminal/session_spec.js

 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');