Merge branch 'mw-pa-group-projects-dropdown-enhancements' into 'master'

Analytics: Group and project dropdown enhancements

See merge request gitlab-org/gitlab!21302

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

@@ -26,11 +26,16 @@ export default {
       required: false,
       default: () => ({}),
     },
+    defaultGroup: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       loading: true,
-      selectedGroup: {},
+      selectedGroup: this.defaultGroup || {},
     };
   },
   computed: {

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

@@ -35,11 +35,16 @@ export default {
       required: false,
       default: () => ({}),
     },
+    defaultProjects: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
       loading: true,
-      selectedProjects: [],
+      selectedProjects: this.defaultProjects || [],
     };
   },
   computed: {
@@ -74,7 +79,7 @@ export default {
       },
       clicked: this.onClick.bind(this),
       data: this.fetchData.bind(this),
-      renderRow: group => this.rowTemplate(group),
+      renderRow: project => this.rowTemplate(project),
       text: project => project.name,
       opened: e => e.target.querySelector('.dropdown-input-field').focus(),
     });
@@ -106,9 +111,13 @@ export default {
       });
     },
     rowTemplate(project) {
+      const selected = this.defaultProjects.length
+        ? this.defaultProjects.find(p => p.id === project.id)
+        : false;
+      const isActiveClass = selected ? 'is-active' : '';
       return `
           <li>
-            <a href='#' class='dropdown-menu-link'>
+            <a href='#' class='dropdown-menu-link ${isActiveClass}'>
               ${this.avatarTemplate(project)}
               <div class="align-middle">${_.escape(project.name)}</div>
             </a>

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

@@ -28,6 +28,15 @@ const groups = [
 describe('GroupsDropdownFilter component', () => {
   let wrapper;
 
+  const createComponent = (props = {}) => {
+    wrapper = mount(GroupsDropdownFilter, {
+      sync: false,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -37,10 +46,9 @@ describe('GroupsDropdownFilter component', () => {
     Api.groups.mockImplementation((term, options, callback) => {
       callback(groups);
     });
-    wrapper = mount(GroupsDropdownFilter);
   });
 
-  const findDropdown = () => wrapper.find('.dropdown');
+  const findDropdown = () => wrapper.find({ ref: 'groupsDropdown' });
   const openDropdown = () => {
     $(findDropdown().element)
       .parent()
@@ -48,13 +56,33 @@ describe('GroupsDropdownFilter component', () => {
   };
   const findDropdownItems = () => findDropdown().findAll('a');
   const findDropdownButton = () => findDropdown().find('button');
+  const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
 
   it('should call glDropdown', () => {
+    createComponent();
     expect($.fn.glDropdown).toHaveBeenCalled();
   });
 
+  describe('when passed a defaultGroup as prop', () => {
+    beforeEach(() => {
+      createComponent({
+        defaultGroup: groups[0],
+      });
+    });
+
+    it("displays the defaultGroup's name", () => {
+      expect(findDropdownButton().text()).toContain(groups[0].name);
+    });
+
+    it("renders the defaultGroup's avatar", () => {
+      expect(findDropdownButtonAvatar().exists()).toBe(true);
+    });
+  });
+
   describe('it renders the items correctly', () => {
     beforeEach(() => {
+      createComponent();
+
       openDropdown();
 
       return wrapper.vm.$nextTick();
@@ -102,6 +130,8 @@ describe('GroupsDropdownFilter component', () => {
 
   describe('on group click', () => {
     beforeEach(() => {
+      createComponent();
+
       openDropdown();
 
       return wrapper.vm.$nextTick();

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

@@ -53,7 +53,7 @@ describe('ProjectsDropdownFilter component', () => {
     });
   });
 
-  const findDropdown = () => wrapper.find('.dropdown');
+  const findDropdown = () => wrapper.find({ ref: 'projectsDropdown' });
   const openDropdown = () => {
     $(findDropdown().element)
       .parent()
@@ -61,6 +61,7 @@ describe('ProjectsDropdownFilter component', () => {
   };
   const findDropdownItems = () => findDropdown().findAll('a');
   const findDropdownButton = () => findDropdown().find('button');
+  const findDropdownButtonAvatar = () => findDropdown().find('.gl-avatar');
 
   describe('queryParams are applied when fetching data', () => {
     beforeEach(() => {
@@ -87,6 +88,34 @@ describe('ProjectsDropdownFilter component', () => {
     });
   });
 
+  describe('when passed a an array of defaultProject as prop', () => {
+    beforeEach(() => {
+      createComponent({
+        defaultProjects: [projects[0]],
+      });
+    });
+
+    it("displays the defaultProject's name", () => {
+      expect(findDropdownButton().text()).toContain(projects[0].name);
+    });
+
+    it("renders the defaultProject's avatar", () => {
+      expect(findDropdownButtonAvatar().exists()).toBe(true);
+    });
+
+    it('marks the defaultProject as selected', () => {
+      openDropdown();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(
+          findDropdownItems()
+            .at(0)
+            .classes('is-active'),
+        ).toBe(true);
+      });
+    });
+  });
+
   describe('when multiSelect is false', () => {
     beforeEach(() => {
       createComponent({ multiSelect: false });