Commit 3dedeb5c authored by Justin Mandell's avatar Justin Mandell Committed by Jacques Erasmus

Update environment delete button

Button migration to update the CSS
parent f422a13f
<script> <script>
/** /**
* Renders the delete button that allows deleting a stopped environment. * Renders the delete button that allows deleting a stopped environment.
* Used in the environments table and the environment detail view. * Used in the environments table.
*/ */
import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import LoadingButton from '../../vue_shared/components/loading_button.vue';
export default { export default {
components: { components: {
GlIcon, GlButton,
LoadingButton,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -54,16 +52,17 @@ export default { ...@@ -54,16 +52,17 @@ export default {
}; };
</script> </script>
<template> <template>
<loading-button <gl-button
v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }" v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }"
:loading="isLoading" :loading="isLoading"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
container-class="btn btn-danger d-none d-md-block" class="gl-display-none gl-display-md-block"
variant="danger"
category="primary"
icon="remove"
data-toggle="modal" data-toggle="modal"
data-target="#delete-environment-modal" data-target="#delete-environment-modal"
@click="onClick" @click="onClick"
> />
<gl-icon name="remove" />
</loading-button>
</template> </template>
import $ from 'jquery'; import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import DeleteComponent from '~/environments/components/environment_delete.vue'; import DeleteComponent from '~/environments/components/environment_delete.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '~/environments/event_hub'; import eventHub from '~/environments/event_hub';
$.fn.tooltip = () => {};
describe('External URL Component', () => { describe('External URL Component', () => {
let wrapper; let wrapper;
...@@ -17,7 +15,7 @@ describe('External URL Component', () => { ...@@ -17,7 +15,7 @@ describe('External URL Component', () => {
}); });
}; };
const findButton = () => wrapper.find(LoadingButton); const findButton = () => wrapper.find(GlButton);
beforeEach(() => { beforeEach(() => {
jest.spyOn(window, 'confirm'); jest.spyOn(window, 'confirm');
......
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