1 files changed, 68 insertions, 109 deletions

diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index 46dee9db69a..d498be0b2bb 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -1,14 +1,8 @@
 <script>
-import {
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-  GlDropdownItem,
-  GlIcon,
-  GlModalDirective,
-} from '@gitlab/ui';
+import { GlDisclosureDropdown, GlModalDirective } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { __ } from '~/locale';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
@@ -16,21 +10,12 @@ import projectShortPathQuery from '../queries/project_short_path.query.graphql';
 import UploadBlobModal from './upload_blob_modal.vue';
 import NewDirectoryModal from './new_directory_modal.vue';
 
-const ROW_TYPES = {
-  header: 'header',
-  divider: 'divider',
-};
-
 const UPLOAD_BLOB_MODAL_ID = 'modal-upload-blob';
 const NEW_DIRECTORY_MODAL_ID = 'modal-new-directory';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
-    GlDropdownItem,
-    GlIcon,
+    GlDisclosureDropdown,
     UploadBlobModal,
     NewDirectoryModal,
   },
@@ -171,103 +156,99 @@ export default {
     canCreateMrFromFork() {
       return this.userPermissions?.forkProject && this.userPermissions?.createMergeRequestIn;
     },
+    hasPushCodePermission() {
+      return this.userPermissions?.pushCode;
+    },
     showUploadModal() {
       return this.canEditTree && !this.$apollo.queries.userPermissions.loading;
     },
     showNewDirectoryModal() {
       return this.canEditTree && !this.$apollo.queries.userPermissions.loading;
     },
-    dropdownItems() {
-      const items = [];
-
+    dropdownDirectoryItems() {
       if (this.canEditTree) {
-        items.push(
+        return [
           {
-            type: ROW_TYPES.header,
-            text: __('This directory'),
-          },
-          {
-            attrs: {
-              href: `${this.newBlobPath}/${
-                this.currentPath ? encodeURIComponent(this.currentPath) : ''
-              }`,
+            text: __('New file'),
+            href: joinPaths(
+              this.newBlobPath,
+              this.currentPath ? encodeURIComponent(this.currentPath) : '',
+            ),
+            extraAttrs: {
               'data-qa-selector': 'new_file_menu_item',
             },
-            text: __('New file'),
           },
           {
-            attrs: {
-              href: '#modal-upload-blob',
-            },
             text: __('Upload file'),
-            modalId: UPLOAD_BLOB_MODAL_ID,
-          },
-        );
-
-        items.push({
-          attrs: {
-            href: '#modal-create-new-dir',
-          },
-          text: __('New directory'),
-          modalId: NEW_DIRECTORY_MODAL_ID,
-        });
-      } else if (this.canCreateMrFromFork) {
-        items.push(
-          {
-            attrs: {
-              href: this.forkNewBlobPath,
-              'data-method': 'post',
-            },
-            text: __('New file'),
+            action: () => this.$root.$emit(BV_SHOW_MODAL, UPLOAD_BLOB_MODAL_ID),
           },
           {
-            attrs: {
-              href: this.forkUploadBlobPath,
-              'data-method': 'post',
-            },
-            text: __('Upload file'),
-          },
-          {
-            attrs: {
-              href: this.forkNewDirectoryPath,
-              'data-method': 'post',
-            },
             text: __('New directory'),
+            action: () => this.$root.$emit(BV_SHOW_MODAL, NEW_DIRECTORY_MODAL_ID),
           },
-        );
+        ];
       }
 
-      if (this.userPermissions?.pushCode) {
-        items.push(
+      if (this.canCreateMrFromFork) {
+        return [
           {
-            type: ROW_TYPES.divider,
-          },
-          {
-            type: ROW_TYPES.header,
-            text: __('This repository'),
+            text: __('New file'),
+            href: this.forkNewBlobPath,
+            extraAttrs: {
+              'data-method': 'post',
+            },
           },
           {
-            attrs: {
-              href: this.newBranchPath,
+            text: __('Upload file'),
+            href: this.forkUploadBlobPath,
+            extraAttrs: {
+              'data-method': 'post',
             },
-            text: __('New branch'),
           },
           {
-            attrs: {
-              href: this.newTagPath,
+            text: __('New directory'),
+            href: this.forkNewDirectoryPath,
+            extraAttrs: {
+              'data-method': 'post',
             },
-            text: __('New tag'),
           },
-        );
+        ];
       }
 
-      return items;
+      return [];
+    },
+    dropdownRepositoryItems() {
+      if (!this.hasPushCodePermission) return [];
+      return [
+        {
+          text: __('New branch'),
+          href: this.newBranchPath,
+        },
+        {
+          text: __('New tag'),
+          href: this.newTagPath,
+        },
+      ];
+    },
+    dropdownItems() {
+      if (this.isBlobPath) return [];
+      if (!this.canCollaborate && !this.canCreateMrFromFork) return [];
+      return [
+        this.dropdownDirectoryItems?.length && {
+          name: __('This directory'),
+          items: this.dropdownDirectoryItems,
+        },
+        this.dropdownRepositoryItems?.length && {
+          name: __('This repository'),
+          items: this.dropdownRepositoryItems,
+        },
+      ].filter(Boolean);
     },
     isBlobPath() {
       return this.$route.name === 'blobPath' || this.$route.name === 'blobPathDecoded';
     },
     renderAddToTreeDropdown() {
-      return !this.isBlobPath && (this.canCollaborate || this.canCreateMrFromFork);
+      return this.dropdownItems.length;
     },
     newDirectoryPath() {
       return joinPaths(this.newDirPath, this.currentPath);
@@ -277,16 +258,6 @@ export default {
     isLast(i) {
       return i === this.pathLinks.length - 1;
     },
-    getComponent(type) {
-      switch (type) {
-        case ROW_TYPES.divider:
-          return 'gl-dropdown-divider';
-        case ROW_TYPES.header:
-          return 'gl-dropdown-section-header';
-        default:
-          return 'gl-dropdown-item';
-      }
-    },
   },
 };
 </script>
@@ -300,27 +271,15 @@ export default {
         </router-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
-        <gl-dropdown
+        <gl-disclosure-dropdown
+          :toggle-text="__('Add to tree')"
           toggle-class="add-to-tree gl-ml-2"
           data-testid="add-to-tree"
           data-qa-selector="add_to_tree_dropdown"
-        >
-          <template #button-content>
-            <span class="sr-only">{{ __('Add to tree') }}</span>
-            <gl-icon name="plus" :size="16" class="float-left" />
-            <gl-icon name="chevron-down" :size="16" class="float-left" />
-          </template>
-          <template v-for="(item, i) in dropdownItems">
-            <component
-              :is="getComponent(item.type)"
-              :key="i"
-              v-bind="item.attrs"
-              v-gl-modal="item.modalId || null"
-            >
-              {{ item.text }}
-            </component>
-          </template>
-        </gl-dropdown>
+          text-sr-only
+          icon="plus"
+          :items="dropdownItems"
+        />
       </li>
     </ol>
     <upload-blob-modal