Commit 308a0562 authored by Marvin Karegyeya's avatar Marvin Karegyeya Committed by Jose Ivan Vargas

Replace GlDeprecatedDropdown in app/assets/javascripts/ci variable list

parent 4c1368a9
<script>
import {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlSearchBoxByType,
GlIcon,
} from '@gitlab/ui';
import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
import { mapGetters } from 'vuex';
import { __, sprintf } from '~/locale';
export default {
name: 'CiEnvironmentsDropdown',
components: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
GlSearchBoxByType,
GlIcon,
},
props: {
value: {
......@@ -66,28 +59,25 @@ export default {
};
</script>
<template>
<gl-deprecated-dropdown :text="value">
<gl-dropdown :text="value">
<gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="environment in filteredResults"
:key="environment"
:is-checked="isSelected(environment)"
is-check-item
@click="selectEnvironment(environment)"
>
<gl-icon
:class="{ invisible: !isSelected(environment) }"
name="mobile-issue-close"
class="vertical-align-middle"
/>
{{ environment }}
</gl-deprecated-dropdown-item>
<gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
</gl-dropdown-item>
<gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
__('No matching results')
}}</gl-deprecated-dropdown-item>
}}</gl-dropdown-item>
<template v-if="shouldRenderCreateButton">
<gl-deprecated-dropdown-divider />
<gl-deprecated-dropdown-item @click="createClicked">
<gl-dropdown-divider />
<gl-dropdown-item @click="createClicked">
{{ composedCreateButtonLabel }}
</gl-deprecated-dropdown-item>
</gl-dropdown-item>
</template>
</gl-deprecated-dropdown>
</gl-dropdown>
</template>
---
title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/ci_variable_list
merge_request: 41413
author: nuwe1
type: other
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
import { mount, createLocalVue } from '@vue/test-utils';
import { GlDropdownItem, GlIcon } from '@gitlab/ui';
import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
const localVue = createLocalVue();
......@@ -17,7 +17,7 @@ describe('Ci environments dropdown', () => {
},
});
wrapper = shallowMount(CiEnvironmentsDropdown, {
wrapper = mount(CiEnvironmentsDropdown, {
store,
localVue,
propsData: {
......@@ -26,9 +26,9 @@ describe('Ci environments dropdown', () => {
});
};
const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index);
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
const findActiveIconByIndex = index => findDropdownItemByIndex(index).find(GlIcon);
afterEach(() => {
wrapper.destroy();
......@@ -61,6 +61,10 @@ describe('Ci environments dropdown', () => {
expect(findDropdownItemByIndex(1).text()).toBe('prod');
expect(findDropdownItemByIndex(2).text()).toBe('staging');
});
it('should not display active checkmark on the inactive stage', () => {
expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true);
});
});
describe('Enviroments found', () => {
......@@ -84,7 +88,7 @@ describe('Ci environments dropdown', () => {
});
it('should display active checkmark if active', () => {
expect(findActiveIconByIndex(0).classes('invisible')).toBe(false);
expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false);
});
describe('Custom events', () => {
......
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