Merge branch 'analytics-dropdown-filters' into 'master'

Add required dropdowns for Analytics

See merge request gitlab-org/gitlab-ee!14595

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

+<script>
+import { __ } from '~/locale';
+import $ from 'jquery';
+import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import Api from '~/api';
+
+export default {
+  name: 'GroupsDropdownFilter',
+  components: {
+    Icon,
+    GlLoadingIcon,
+    GlButton,
+  },
+  data() {
+    return {
+      loading: true,
+      selectedGroup: {},
+    };
+  },
+  computed: {
+    selectedGroupName() {
+      return this.selectedGroup.name || __('Choose a group');
+    },
+  },
+  mounted() {
+    $(this.$refs.groupsDropdown).glDropdown({
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      fieldName: 'group_id',
+      search: {
+        fields: ['full_name'],
+      },
+      clicked: this.onClick,
+      data: this.fetchData,
+      renderRow: group => this.rowTemplate(group),
+      text: group => group.name,
+    });
+  },
+  methods: {
+    onClick({ $el, e }) {
+      e.preventDefault();
+      this.selectedGroup = {
+        id: $el.data('id'),
+        name: $el.data('name'),
+        path: $el.data('path'),
+      };
+      this.$emit('selected', this.selectedGroup);
+    },
+    fetchData(term, callback) {
+      this.loading = true;
+      return Api.groups(term, {}, groups => {
+        this.loading = false;
+        callback(groups);
+      });
+    },
+    rowTemplate(group) {
+      return `
+            <li>
+              <a href='#' class='dropdown-menu-link' data-id="${group.id}" data-name="${
+        group.name
+      }" data-path="${group.path}">
+                ${_.escape(group.name)}
+              </a>
+            </li>
+          `;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div ref="groupsDropdown" class="dropdown dropdown-groups">
+      <gl-button
+        class="dropdown-menu-toggle wide shadow-none bg-white"
+        type="button"
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {{ selectedGroupName }} <icon name="chevron-down" />
+      </gl-button>
+      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
+        <div class="dropdown-title">{{ __('Groups') }}</div>
+        <div class="dropdown-input">
+          <input class="dropdown-input-field" type="search" :placeholder="__('Search groups')" />
+          <icon name="search" class="dropdown-input-search" data-hidden="true" />
+        </div>
+        <div class="dropdown-content"></div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
+      </div>
+    </div>
+  </div>
+</template>

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

+<script>
+import { __ } from '~/locale';
+import $ from 'jquery';
+import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import Api from '~/api';
+
+export default {
+  name: 'ProjectsDropdownFilter',
+  components: {
+    Icon,
+    GlLoadingIcon,
+    GlButton,
+  },
+  props: {
+    groupId: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      selectedProject: {},
+    };
+  },
+  computed: {
+    selectedProjectName() {
+      return this.selectedProject.name || __('Select a project');
+    },
+  },
+  mounted() {
+    $(this.$refs.projectsDropdown).glDropdown({
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      fieldName: 'project_id',
+      search: {
+        fields: ['name'],
+      },
+      clicked: this.onClick,
+      data: this.fetchData,
+      renderRow: group => this.rowTemplate(group),
+      text: project => project.name,
+    });
+  },
+  methods: {
+    onClick({ $el, e }) {
+      e.preventDefault();
+      this.selectedProject = {
+        id: $el.data('id'),
+        name: $el.data('name'),
+        path: $el.data('path'),
+      };
+      this.$emit('selected', this.selectedProject);
+    },
+    fetchData(term, callback) {
+      this.loading = true;
+      return Api.groupProjects(this.groupId, term, {}, projects => {
+        this.loading = false;
+        callback(projects);
+      });
+    },
+    rowTemplate(project) {
+      return `
+          <li>
+            <a href='#' class='dropdown-menu-link' data-id="${project.id}" data-name="${
+        project.name
+      }" data-path="${project.path_with_namespace}">
+              ${_.escape(project.name)}
+            </a>
+          </li>
+        `;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div ref="projectsDropdown" class="dropdown dropdown-projects">
+      <gl-button
+        class="dropdown-menu-toggle wide shadow-none bg-white"
+        type="button"
+        data-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {{ selectedProjectName }} <icon name="chevron-down" />
+      </gl-button>
+      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
+        <div class="dropdown-title">{{ __('Projects') }}</div>
+        <div class="dropdown-input">
+          <input class="dropdown-input-field" type="search" :placeholder="__('Search projects')" />
+          <icon name="search" class="dropdown-input-search" data-hidden="true" />
+        </div>
+        <div class="dropdown-content"></div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
+      </div>
+    </div>
+  </div>
+</template>

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

+import $ from 'jquery';
+import Vue from 'vue';
+import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars
+import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
+
+describe('GroupsDropdownFilter component', () => {
+  const Component = Vue.extend(GroupsDropdownFilter);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  beforeEach(() => {
+    jest.spyOn($.fn, 'glDropdown');
+    vm = mountComponent(Component);
+  });
+
+  it('should call glDropdown', () => {
+    expect($.fn.glDropdown).toHaveBeenCalled();
+  });
+
+  describe('onClick', () => {
+    const group = {
+      id: 1,
+      name: 'foo',
+      path: 'bar',
+    };
+    const $el = $('<a></a>').data(group);
+    const e = new Event('click');
+
+    it('should emit the "setSelectedGroup" event', () => {
+      jest.spyOn(vm, '$emit');
+
+      vm.onClick({ $el, e });
+
+      expect(vm.$emit).toHaveBeenCalledWith('selected', group);
+    });
+  });
+});

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

+import $ from 'jquery';
+import Vue from 'vue';
+import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars
+import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
+
+describe('ProjectsDropdownFilter component', () => {
+  const Component = Vue.extend(ProjectsDropdownFilter);
+  const props = {
+    groupId: 1,
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  beforeEach(() => {
+    jest.spyOn($.fn, 'glDropdown');
+    vm = mountComponent(Component, props);
+  });
+
+  it('should call glDropdown', () => {
+    expect($.fn.glDropdown).toHaveBeenCalled();
+  });
+
+  describe('onClick', () => {
+    const project = {
+      id: 1,
+      name: 'foo',
+      path: 'bar',
+    };
+    const $el = $('<a></a>').data(project);
+    const e = new Event('click');
+
+    it('should emit the "setSelectedGroup" event', () => {
+      jest.spyOn(vm, '$emit');
+
+      vm.onClick({ $el, e });
+
+      expect(vm.$emit).toHaveBeenCalledWith('selected', project);
+    });
+  });
+});

locale/gitlab.pot

@@ -2612,6 +2612,9 @@ msgstr ""
 msgid "Choose a file"
 msgstr ""
 
+msgid "Choose a group"
+msgstr ""
+
 msgid "Choose a role permission"
 msgstr ""