Project search should differentiate between projects with the same name

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -201,7 +201,10 @@ export default {
           :src="project.avatarUrl"
           shape="rect"
         />
-        {{ project.name }}
+        <div>
+          <div data-testid="project-name">{{ project.name }}</div>
+          <div class="gl-text-gray-500" data-testid="project-full-path">{{ project.fullPath }}</div>
+        </div>
       </div>
     </gl-dropdown-item>
     <gl-dropdown-item v-show="noResultsAvailable" class="gl-pointer-events-none text-secondary">{{

ee/changelogs/unreleased/249594-vsa-project-search-should-differentiate-between-projects-with-t.yml

+---
+title: Add project full path to analytics project dropdown filter
+merge_request: 45020
+author:
+type: changed

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -69,6 +69,11 @@ describe('ProjectsDropdownFilter component', () => {
   const findDropdownButtonIdentIconAtIndex = index =>
     findDropdownAtIndex(index).find('div.gl-avatar-identicon');
 
+  const findDropdownNameAtIndex = index =>
+    findDropdownAtIndex(index).find('[data-testid="project-name"');
+  const findDropdownFullPathAtIndex = index =>
+    findDropdownAtIndex(index).find('[data-testid="project-full-path"]');
+
   const selectDropdownItemAtIndex = index =>
     findDropdownAtIndex(index)
       .find('button')
@@ -137,10 +142,23 @@ describe('ProjectsDropdownFilter component', () => {
         expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
         expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
       });
+
       it("renders an identicon when the project doesn't have an avatarUrl", () => {
         expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
         expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
       });
+
+      it('renders the project name', () => {
+        projects.forEach((project, index) => {
+          expect(findDropdownNameAtIndex(index).text()).toBe(project.name);
+        });
+      });
+
+      it('renders the project fullPath', () => {
+        projects.forEach((project, index) => {
+          expect(findDropdownFullPathAtIndex(index).text()).toBe(project.fullPath);
+        });
+      });
     });
 
     describe('on project click', () => {
@@ -202,6 +220,18 @@ describe('ProjectsDropdownFilter component', () => {
         expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
         expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
       });
+
+      it('renders the project name', () => {
+        projects.forEach((project, index) => {
+          expect(findDropdownNameAtIndex(index).text()).toBe(project.name);
+        });
+      });
+
+      it('renders the project fullPath', () => {
+        projects.forEach((project, index) => {
+          expect(findDropdownFullPathAtIndex(index).text()).toBe(project.fullPath);
+        });
+      });
     });
 
     describe('on project click', () => {