Fix item name and namespace overflow

3 files changed, 42 insertions, 6 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..1acc1373451 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
@@ -1,5 +1,8 @@
 <script>
 import identicon from '../../vue_shared/components/identicon.vue';
+import { truncate } from '../../lib/utils/text_utility';
+
+import { MAX_LENGTH } from '../constants';
 
 export default {
   components: {
@@ -38,15 +41,27 @@ export default {
       return this.avatarUrl !== null;
     },
     highlightedProjectName() {
+      let projectName = this.projectName;
+      if (projectName.length > MAX_LENGTH.ITEM_NAME) {
+        projectName = truncate(projectName, MAX_LENGTH.ITEM_NAME);
+      }
+
       if (this.matcher) {
         const matcherRegEx = new RegExp(this.matcher, 'gi');
-        const matches = this.projectName.match(matcherRegEx);
+        const matches = projectName.match(matcherRegEx);
 
         if (matches && matches.length > 0) {
-          return this.projectName.replace(matches[0], `<b>${matches[0]}</b>`);
+          return projectName.replace(matches[0], `<b>${matches[0]}</b>`);
         }
       }
-      return this.projectName;
+      return projectName;
+    },
+    truncatedNamespace() {
+      if (this.namespace.length > MAX_LENGTH.ITEM_NAMESPACE) {
+        return truncate(this.namespace, MAX_LENGTH.ITEM_NAMESPACE);
+      }
+
+      return this.namespace;
     },
   },
 };
@@ -87,9 +102,7 @@ export default {
         <div
           class="project-namespace"
           :title="namespace"
-        >
-          {{namespace}}
-        </div>
+        >{{truncatedNamespace}}</div>
       </div>
     </a>
   </li>
diff --git a/app/assets/javascripts/projects_dropdown/constants.js b/app/assets/javascripts/projects_dropdown/constants.js
index 8937097184c..ddfc2a27fe4 100644
--- a/app/assets/javascripts/projects_dropdown/constants.js
+++ b/app/assets/javascripts/projects_dropdown/constants.js
@@ -7,4 +7,9 @@ export const FREQUENT_PROJECTS = {
 
 export const HOUR_IN_MS = 3600000;
 
+export const MAX_LENGTH = {
+  ITEM_NAME: 40,
+  ITEM_NAMESPACE: 45,
+};
+
 export const STORAGE_KEY = 'frequent-projects';
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..2e27a609d71 100644
--- a/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
+++ b/spec/javascripts/projects_dropdown/components/projects_list_item_spec.js
@@ -49,6 +49,24 @@ describe('ProjectsListItemComponent', () => {
         vm.matcher = null;
         expect(vm.highlightedProjectName).toBe(mockProject.name);
       });
+
+      it('should truncate project name if it exceeds 40 characters', () => {
+        vm.projectName = 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310';
+        expect(vm.highlightedProjectName).not.toBe(vm.projectName);
+
+        vm.projectName = 'platform / hardware';
+        expect(vm.highlightedProjectName).toBe(vm.projectName);
+      });
+    });
+
+    describe('truncatedNamespace', () => {
+      it('should truncate namespace string if it exceeds 45 characters', () => {
+        vm.namespace = 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310';
+        expect(vm.truncatedNamespace).not.toBe(vm.namespace);
+
+        vm.namespace = 'platform / hardware';
+        expect(vm.truncatedNamespace).toBe(vm.namespace);
+      });
     });
   });