Gldeprecateddropdown to Gldropdown in breadcrumbs.vue

app/assets/javascripts/repository/components/breadcrumbs.vue

 <script>
 import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
   GlIcon,
 } from '@gitlab/ui';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
@@ -20,10 +20,10 @@ const ROW_TYPES = {
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
     GlIcon,
   },
   apollo: {
@@ -226,11 +226,11 @@ export default {
     getComponent(type) {
       switch (type) {
         case ROW_TYPES.divider:
-          return 'gl-deprecated-dropdown-divider';
+          return 'gl-dropdown-divider';
         case ROW_TYPES.header:
-          return 'gl-deprecated-dropdown-header';
+          return 'gl-dropdown-section-header';
         default:
-          return 'gl-deprecated-dropdown-item';
+          return 'gl-dropdown-item';
       }
     },
   },
@@ -246,7 +246,7 @@ export default {
         </router-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
-        <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1">
+        <gl-dropdown toggle-class="add-to-tree qa-add-to-tree gl-ml-2">
           <template #button-content>
             <span class="sr-only">{{ __('Add to tree') }}</span>
             <gl-icon name="plus" :size="16" class="float-left" />
@@ -257,7 +257,7 @@ export default {
               {{ item.text }}
             </component>
           </template>
-        </gl-deprecated-dropdown>
+        </gl-dropdown>
       </li>
     </ol>
   </nav>

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

+---
+title: Replace `GlDeprecatedDropdown` with `GlDropdown` in `app/assets/javascripts/repository/components/breadcrumbs.vue`
+merge_request: 41427
+author: nuwe1
+type: other

spec/frontend/repository/components/breadcrumbs_spec.js

 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlDeprecatedDropdown } from '@gitlab/ui';
+import { GlDropdown } from '@gitlab/ui';
 import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
 
 let vm;
@@ -61,7 +61,7 @@ describe('Repository breadcrumbs component', () => {
     vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
     return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDeprecatedDropdown).exists()).toBe(false);
+      expect(vm.find(GlDropdown).exists()).toBe(false);
     });
   });
 
@@ -71,7 +71,7 @@ describe('Repository breadcrumbs component', () => {
     vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
 
     return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDeprecatedDropdown).exists()).toBe(true);
+      expect(vm.find(GlDropdown).exists()).toBe(true);
     });
   });
 });