Fix item name and namespace text overflow in Projects dropdown

4 files changed, 40 insertions, 3 deletions

diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
index fe5179de206..d482a7025de 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
@@ -48,6 +48,27 @@ export default {
       }
       return this.projectName;
     },
+    /**
+     * Smartly truncates project namespace by doing two things;
+     * 1. Only include Group names in path by removing project name
+     * 2. Only include first and last group names in the path
+     *    when namespace has more than 2 groups present
+     *
+     * First part (removal of project name from namespace) can be
+     * done from backend but doing so involves migration of
+     * existing project namespaces which is not wise thing to do.
+     */
+    truncatedNamespace() {
+      const namespaceArr = this.namespace.split(' / ');
+      namespaceArr.splice(-1, 1);
+      let namespace = namespaceArr.join(' / ');
+
+      if (namespaceArr.length > 2) {
+        namespace = `${namespaceArr[0]} / ... / ${namespaceArr.pop()}`;
+      }
+
+      return namespace;
+    },
   },
 };
 </script>
@@ -87,9 +108,7 @@ export default {
         <div
           class="project-namespace"
           :title="namespace"
-        >
-          {{namespace}}
-        </div>
+        >{{truncatedNamespace}}</div>
       </div>
     </a>
   </li>
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 579bd48fac6..30d5d7a653b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -1002,6 +1002,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     max-width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &:hover {
diff --git a/changelogs/unreleased/39827-fix-projects-dropdown-overflow.yml b/changelogs/unreleased/39827-fix-projects-dropdown-overflow.yml
new file mode 100644
index 00000000000..ebd7b582e8a
--- /dev/null
+++ b/changelogs/unreleased/39827-fix-projects-dropdown-overflow.yml
@@ -0,0 +1,5 @@
+---
+title: Fix item name and namespace text overflow in Projects dropdown
+merge_request: 15451
+author:
+type: fixed
diff --git a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js b/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
index 171629fcd6b..edef150dd1e 100644
--- a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
+++ b/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
@@ -50,6 +50,18 @@ describe('ProjectsListItemComponent', () => {
         expect(vm.highlightedProjectName).toBe(mockProject.name);
       });
     });
+
+    describe('truncatedNamespace', () => {
+      it('should truncate project name from namespace string', () => {
+        vm.namespace = 'platform / nokia-3310';
+        expect(vm.truncatedNamespace).toBe('platform');
+      });
+
+      it('should truncate namespace string from the middle if it includes more than two groups in path', () => {
+        vm.namespace = 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310';
+        expect(vm.truncatedNamespace).toBe('platform / ... / Mobile Chipset');
+      });
+    });
   });
 
   describe('template', () => {