Merge branch '233592-replace-deprecated-dropdown-dependencies' into 'master'

Replaced GlDeprecatedDropdown with GlDropdown on dependencies page

Closes #233592

See merge request gitlab-org/gitlab!42538

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import {
-  GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlIcon,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
 import { SORT_FIELDS, SORT_ORDER } from '../store/modules/list/constants';
 
@@ -14,8 +8,8 @@ export default {
   name: 'DependenciesActions',
   components: {
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
   },
   directives: {
@@ -72,12 +66,8 @@ export default {
 <template>
   <div class="btn-toolbar">
     <div class="btn-group flex-grow-1 mr-2">
-      <gl-deprecated-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
-        <gl-deprecated-dropdown-item
-          v-for="(name, id) in sortFields"
-          :key="id"
-          @click="setSortField(id)"
-        >
+      <gl-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
+        <gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)">
           <span class="d-flex">
             <gl-icon
               class="flex-shrink-0 gl-mr-2"
@@ -86,8 +76,8 @@ export default {
             />
             {{ name }}
           </span>
-        </gl-deprecated-dropdown-item>
-      </gl-deprecated-dropdown>
+        </gl-dropdown-item>
+      </gl-dropdown>
       <gl-button
         v-gl-tooltip
         :title="__('Sort direction')"

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -7,12 +7,22 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
   <div
     class="btn-group flex-grow-1 mr-2"
   >
-    <gl-deprecated-dropdown-stub
+    <gl-dropdown-stub
+      category="tertiary"
       class="flex-grow-1 text-center"
+      headertext=""
       right=""
+      size="medium"
       text="Severity"
+      variant="default"
     >
-      <gl-deprecated-dropdown-item-stub>
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        secondarytext=""
+      >
         <span
           class="d-flex"
         >
@@ -25,8 +35,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Component name
         
         </span>
-      </gl-deprecated-dropdown-item-stub>
-      <gl-deprecated-dropdown-item-stub>
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        secondarytext=""
+      >
         <span
           class="d-flex"
         >
@@ -39,8 +55,14 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Packager
         
         </span>
-      </gl-deprecated-dropdown-item-stub>
-      <gl-deprecated-dropdown-item-stub>
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub
+        avatarurl=""
+        iconcolor=""
+        iconname=""
+        iconrightname=""
+        secondarytext=""
+      >
         <span
           class="d-flex"
         >
@@ -53,8 +75,8 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Severity
         
         </span>
-      </gl-deprecated-dropdown-item-stub>
-    </gl-deprecated-dropdown-stub>
+      </gl-dropdown-item-stub>
+    </gl-dropdown-stub>
      
     <gl-button-stub
       category="primary"

ee/spec/frontend/dependencies/components/dependencies_actions_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import createStore from 'ee/dependencies/store';
 import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants';
@@ -39,7 +39,7 @@ describe('DependenciesActions component', () => {
   });
 
   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 => {
       // trigger() does not work on stubbed/shallow mounted components