Migrate to GlButton in environments dropdown

parent e423e643
<script> <script>
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { GlDeprecatedButton, GlSearchBoxByType } from '@gitlab/ui'; import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash'; import { deprecatedCreateFlash as createFlash } from '~/flash';
...@@ -28,7 +28,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash'; ...@@ -28,7 +28,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
export default { export default {
name: 'EnvironmentsSearchableInput', name: 'EnvironmentsSearchableInput',
components: { components: {
GlDeprecatedButton, GlButton,
GlSearchBoxByType, GlSearchBoxByType,
}, },
props: { props: {
...@@ -159,19 +159,20 @@ export default { ...@@ -159,19 +159,20 @@ export default {
<div class="dropdown-content"> <div class="dropdown-content">
<ul v-if="results.length"> <ul v-if="results.length">
<li v-for="(result, i) in results" :key="i"> <li v-for="(result, i) in results" :key="i">
<gl-deprecated-button class="btn-transparent" @click="selectEnvironment(result)">{{ <gl-button category="tertiary" @click="selectEnvironment(result)">{{
result result
}}</gl-deprecated-button> }}</gl-button>
</li> </li>
</ul> </ul>
<div v-else-if="!results.length" class="text-secondary gl-p-3"> <div v-else-if="!results.length" class="text-secondary gl-p-3">
{{ __('No matching results') }} {{ __('No matching results') }}
</div> </div>
<div v-if="shouldRenderCreateButton" class="dropdown-footer"> <div v-if="shouldRenderCreateButton" class="dropdown-footer">
<gl-deprecated-button <gl-button
class="js-create-button btn-blank dropdown-item" category="tertiary"
class="js-create-button dropdown-item"
@click="createClicked" @click="createClicked"
>{{ composedCreateButtonLabel }}</gl-deprecated-button >{{ composedCreateButtonLabel }}</gl-button
> >
</div> </div>
</div> </div>
......
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon, GlDeprecatedButton, GlSearchBoxByType } from '@gitlab/ui'; import { GlLoadingIcon, GlButton, GlSearchBoxByType } from '@gitlab/ui';
import { TEST_HOST } from 'spec/test_constants'; import { TEST_HOST } from 'spec/test_constants';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue'; import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue';
...@@ -99,7 +99,7 @@ describe('Feature flags > Environments dropdown ', () => { ...@@ -99,7 +99,7 @@ describe('Feature flags > Environments dropdown ', () => {
it('emits event when a suggestion is clicked', async () => { it('emits event when a suggestion is clicked', async () => {
const button = wrapper const button = wrapper
.findAll(GlDeprecatedButton) .findAll(GlButton)
.filter(b => b.text() === 'production') .filter(b => b.text() === 'production')
.at(0); .at(0);
button.vm.$emit('click'); button.vm.$emit('click');
...@@ -110,7 +110,7 @@ describe('Feature flags > Environments dropdown ', () => { ...@@ -110,7 +110,7 @@ describe('Feature flags > Environments dropdown ', () => {
describe('on click clear button', () => { describe('on click clear button', () => {
beforeEach(async () => { beforeEach(async () => {
wrapper.find(GlDeprecatedButton).vm.$emit('click'); wrapper.find(GlButton).vm.$emit('click');
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
}); });
...@@ -137,7 +137,7 @@ describe('Feature flags > Environments dropdown ', () => { ...@@ -137,7 +137,7 @@ describe('Feature flags > Environments dropdown ', () => {
it('emits create event', async () => { it('emits create event', async () => {
wrapper wrapper
.findAll(GlDeprecatedButton) .findAll(GlButton)
.at(0) .at(0)
.vm.$emit('click'); .vm.$emit('click');
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
......
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