Replace GlDeprecatedDropdown in app/assets/javascripts/monitoring

app/assets/javascripts/monitoring/components/variables/dropdown_field.vue

 <script>
-import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormGroup,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     name: {
@@ -41,16 +41,13 @@ export default {
 </script>
 <template>
   <gl-form-group :label="label">
-    <gl-deprecated-dropdown
-      toggle-class="dropdown-menu-toggle"
-      :text="text || s__('Metrics|Select a value')"
-    >
-      <gl-deprecated-dropdown-item
+    <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')">
+      <gl-dropdown-item
         v-for="val in options.values"
         :key="val.value"
         @click="onUpdate(val.value)"
-        >{{ val.text }}</gl-deprecated-dropdown-item
+        >{{ val.text }}</gl-dropdown-item
       >
-    </gl-deprecated-dropdown>
+    </gl-dropdown>
   </gl-form-group>
 </template>

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-mo.yml

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/monitoring
+merge_request: 41422
+author: nuwe1
+type: other

spec/frontend/monitoring/components/variables/dropdown_field_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
 
 describe('Custom variable component', () => {
@@ -23,8 +23,8 @@ describe('Custom variable component', () => {
     });
   };
 
-  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   it('renders dropdown element when all necessary props are passed', () => {
     createShallowWrapper();