Merge branch...

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

Migrate button to GlButton in empty_state.vue

See merge request gitlab-org/gitlab!46105

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

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlLoadingIcon,
+    GlButton,
   },
   props: {
     isLoading: {
@@ -41,24 +42,24 @@ export default {
 };
 </script>
 <template>
-  <div class="text-center p-3">
+  <div class="gl-text-center gl-p-5">
     <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
     <h4>{{ __('Web Terminal') }}</h4>
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
     <template v-else>
       <p>{{ __('Run tests against your code live using the Web Terminal') }}</p>
       <p>
-        <button
+        <gl-button
           :disabled="!isValid"
-          class="btn btn-info"
-          type="button"
+          category="primary"
+          variant="info"
           data-qa-selector="start_web_terminal_button"
           @click="onStart"
         >
           {{ __('Start Web Terminal') }}
-        </button>
+        </gl-button>
       </p>
-      <div v-if="!isValid && message" class="bs-callout text-left" v-html="message"></div>
+      <div v-if="!isValid && message" class="bs-callout gl-text-left" v-html="message"></div>
       <p v-else>
         <a
           v-if="helpPath"

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

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue';
 
@@ -36,7 +36,7 @@ describe('IDE TerminalEmptyState', () => {
     const img = wrapper.find('.svg-content img');
 
     expect(img.exists()).toBe(true);
-    expect(img.attributes('src')).toEqual(TEST_PATH);
+    expect(img.attributes('src')).toBe(TEST_PATH);
   });
 
   it('when loading, shows loading icon', () => {
@@ -71,24 +71,23 @@ describe('IDE TerminalEmptyState', () => {
         },
       });
 
-      button = wrapper.find('button');
+      button = wrapper.find(GlButton);
     });
 
     it('shows button', () => {
-      expect(button.text()).toEqual('Start Web Terminal');
-      expect(button.attributes('disabled')).toBeFalsy();
+      expect(button.text()).toBe('Start Web Terminal');
+      expect(button.props('disabled')).toBe(false);
     });
 
     it('emits start when button is clicked', () => {
-      expect(wrapper.emitted().start).toBeFalsy();
-
-      button.trigger('click');
+      expect(wrapper.emitted().start).toBeUndefined();
+      button.vm.$emit('click');
 
       expect(wrapper.emitted().start).toHaveLength(1);
     });
 
     it('shows help path link', () => {
-      expect(wrapper.find('a').attributes('href')).toEqual(TEST_HELP_PATH);
+      expect(wrapper.find('a').attributes('href')).toBe(TEST_HELP_PATH);
     });
   });
 
@@ -101,7 +100,7 @@ describe('IDE TerminalEmptyState', () => {
       },
     });
 
-    expect(wrapper.find('button').attributes('disabled')).not.toBe(null);
-    expect(wrapper.find('.bs-callout').element.innerHTML).toEqual(TEST_HTML_MESSAGE);
+    expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+    expect(wrapper.find('.bs-callout').element.innerHTML).toBe(TEST_HTML_MESSAGE);
   });
 });