Merge branch '229205-stop-environment-button' into 'master'

Migrate external link and stop environment button templates

Closes #229205

See merge request gitlab-org/gitlab!38845

app/assets/javascripts/environments/components/environment_external_url.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 /**
@@ -8,7 +7,7 @@ import { s__ } from '~/locale';
  */
 export default {
   components: {
-    Icon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -27,15 +26,14 @@ export default {
 };
 </script>
 <template>
-  <a
+  <gl-button
     v-gl-tooltip
     :title="title"
     :aria-label="title"
     :href="externalUrl"
-    class="btn external-url"
+    class="external-url"
     target="_blank"
+    icon="external-link"
     rel="noopener noreferrer nofollow"
-  >
-    <icon name="external-link" />
-  </a>
+  />
 </template>

app/assets/javascripts/environments/components/environment_stop.vue

@@ -5,16 +5,13 @@
  */
 
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
-import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   components: {
-    Icon,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -55,16 +52,16 @@ export default {
 };
 </script>
 <template>
-  <loading-button
+  <gl-button
     v-gl-tooltip
     :loading="isLoading"
     :title="title"
     :aria-label="title"
-    container-class="btn btn-danger d-none d-sm-none d-md-block"
+    icon="stop"
+    category="primary"
+    variant="danger"
     data-toggle="modal"
     data-target="#stop-environment-modal"
     @click="onClick"
-  >
-    <icon name="stop" />
-  </loading-button>
+  />
 </template>

spec/features/projects/environments/environments_spec.rb

@@ -37,7 +37,7 @@ RSpec.describe 'Environments page', :js do
 
           expect(page).to have_css('.environments-container')
           expect(page.all('.environment-name').length).to eq(1)
-          expect(page.all('.ic-stop').length).to eq(1)
+          expect(page.all('[data-testid="stop-icon"]').length).to eq(1)
         end
       end
 

spec/frontend/environments/environment_external_url_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ExternalUrlComp from '~/environments/components/environment_external_url.vue';
 
 describe('External URL Component', () => {
@@ -6,7 +6,7 @@ describe('External URL Component', () => {
   const externalUrl = 'https://gitlab.com';
 
   beforeEach(() => {
-    wrapper = shallowMount(ExternalUrlComp, { propsData: { externalUrl } });
+    wrapper = mount(ExternalUrlComp, { propsData: { externalUrl } });
   });
 
   it('should link to the provided externalUrl prop', () => {

spec/frontend/environments/environment_stop_spec.js

 import $ from 'jquery';
 import { shallowMount } from '@vue/test-utils';
 import StopComponent from '~/environments/components/environment_stop.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import eventHub from '~/environments/event_hub';
 
 $.fn.tooltip = () => {};
@@ -17,7 +17,7 @@ describe('Stop Component', () => {
     });
   };
 
-  const findButton = () => wrapper.find(LoadingButton);
+  const findButton = () => wrapper.find(GlButton);
 
   beforeEach(() => {
     jest.spyOn(window, 'confirm');