Commit 21d83a10 authored by Neil McCorrison's avatar Neil McCorrison Committed by Vitaly Slobodin

Replaced GlDeprecatedDropdown with GlDropdown on dependencies page

parent 4f028edc
<script> <script>
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
GlButton,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlIcon,
GlTooltipDirective,
} from '@gitlab/ui';
import { DEPENDENCY_LIST_TYPES } from '../store/constants'; import { DEPENDENCY_LIST_TYPES } from '../store/constants';
import { SORT_FIELDS, SORT_ORDER } from '../store/modules/list/constants'; import { SORT_FIELDS, SORT_ORDER } from '../store/modules/list/constants';
...@@ -14,8 +8,8 @@ export default { ...@@ -14,8 +8,8 @@ export default {
name: 'DependenciesActions', name: 'DependenciesActions',
components: { components: {
GlButton, GlButton,
GlDeprecatedDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDropdownItem,
GlIcon, GlIcon,
}, },
directives: { directives: {
...@@ -72,12 +66,8 @@ export default { ...@@ -72,12 +66,8 @@ export default {
<template> <template>
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group flex-grow-1 mr-2"> <div class="btn-group flex-grow-1 mr-2">
<gl-deprecated-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right> <gl-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
<gl-deprecated-dropdown-item <gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)">
v-for="(name, id) in sortFields"
:key="id"
@click="setSortField(id)"
>
<span class="d-flex"> <span class="d-flex">
<gl-icon <gl-icon
class="flex-shrink-0 gl-mr-2" class="flex-shrink-0 gl-mr-2"
...@@ -86,8 +76,8 @@ export default { ...@@ -86,8 +76,8 @@ export default {
/> />
{{ name }} {{ name }}
</span> </span>
</gl-deprecated-dropdown-item> </gl-dropdown-item>
</gl-deprecated-dropdown> </gl-dropdown>
<gl-button <gl-button
v-gl-tooltip v-gl-tooltip
:title="__('Sort direction')" :title="__('Sort direction')"
......
...@@ -7,12 +7,22 @@ exports[`DependenciesActions component matches the snapshot 1`] = ` ...@@ -7,12 +7,22 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
<div <div
class="btn-group flex-grow-1 mr-2" class="btn-group flex-grow-1 mr-2"
> >
<gl-deprecated-dropdown-stub <gl-dropdown-stub
category="tertiary"
class="flex-grow-1 text-center" class="flex-grow-1 text-center"
headertext=""
right="" right=""
size="medium"
text="Severity" text="Severity"
variant="default"
>
<gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
> >
<gl-deprecated-dropdown-item-stub>
<span <span
class="d-flex" class="d-flex"
> >
...@@ -25,8 +35,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = ` ...@@ -25,8 +35,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
Component name Component name
</span> </span>
</gl-deprecated-dropdown-item-stub> </gl-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub> <gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span <span
class="d-flex" class="d-flex"
> >
...@@ -39,8 +55,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = ` ...@@ -39,8 +55,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
Packager Packager
</span> </span>
</gl-deprecated-dropdown-item-stub> </gl-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub> <gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span <span
class="d-flex" class="d-flex"
> >
...@@ -53,8 +75,8 @@ exports[`DependenciesActions component matches the snapshot 1`] = ` ...@@ -53,8 +75,8 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
Severity Severity
</span> </span>
</gl-deprecated-dropdown-item-stub> </gl-dropdown-item-stub>
</gl-deprecated-dropdown-stub> </gl-dropdown-stub>
<gl-button-stub <gl-button-stub
category="primary" category="primary"
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlDropdownItem } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import createStore from 'ee/dependencies/store'; import createStore from 'ee/dependencies/store';
import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants'; import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants';
...@@ -39,7 +39,7 @@ describe('DependenciesActions component', () => { ...@@ -39,7 +39,7 @@ describe('DependenciesActions component', () => {
}); });
it('dispatches the right setSortField action on clicking each item in the dropdown', () => { it('dispatches the right setSortField action on clicking each item in the dropdown', () => {
const dropdownItems = wrapper.findAll(GlDeprecatedDropdownItem).wrappers; const dropdownItems = wrapper.findAll(GlDropdownItem).wrappers;
dropdownItems.forEach(item => { dropdownItems.forEach(item => {
// trigger() does not work on stubbed/shallow mounted components // trigger() does not work on stubbed/shallow mounted components
......
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