Show the paths for groups in groups dropdown

- Add changelog entry
- Add specs for displaying the full group path
- Add selector to component

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

@@ -73,11 +73,31 @@ export default {
             <li>
               <a href='#' class='dropdown-menu-link'>
                 ${this.avatarTemplate(group)}
-                <div class="align-middle">${_.escape(group.name)}</div>
+                <div class="js-group-path align-middle">${this.formatGroupPath(
+                  group.full_name,
+                )}</div>
               </a>
             </li>
           `;
     },
+    /**
+     * Formats the group's full name.
+     * It renders the last part (the part after the last backslash) of a group's full name as bold text.
+     * @returns String
+     */
+    formatGroupPath(fullName) {
+      if (!fullName) {
+        return '';
+      }
+
+      const parts = fullName.split('/');
+      const lastPart = parts.length - 1;
+      return parts
+        .map((part, idx) =>
+          idx === lastPart ? `<strong>${_.escape(part.trim())}</strong>` : _.escape(part.trim()),
+        )
+        .join(' / ');
+    },
     avatarTemplate(group) {
       return group.avatar_url !== null
         ? renderAvatar(group, { sizeClass: 's16 rect-avatar' })

ee/changelogs/unreleased/13637-show-the-paths-for-groups-projects-in-productivity-analytics.yml

+---
+title: Show the paths for groups in groups dropdown
+merge_request: 15513
+author:
+type: other

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

@@ -14,11 +14,13 @@ const groups = [
   {
     id: 1,
     name: 'foo',
+    full_name: 'foo',
     avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
   },
   {
     id: 2,
-    name: 'foobar',
+    name: 'subgroup',
+    full_name: 'group / subgroup',
     avatar_url: null,
   },
 ];
@@ -87,6 +89,15 @@ describe('GroupsDropdownFilter component', () => {
           .contains('div.identicon'),
       ).toBe(true);
     });
+
+    it('renders the full group name and highlights the last part', () => {
+      expect(
+        findDropdownItems()
+          .at(1)
+          .find('.js-group-path')
+          .html(),
+      ).toContain('group / <strong>subgroup</strong>');
+    });
   });
 
   describe('on group click', () => {