Skip to content

G
gitlab-ce
Commit 45dcd491 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo
Browse files
Options

Merge branch '246544-vsa-use-similarity-search-option-for-graphql-projects-queries' into 'master' 

VSA: Use similarity search option for GraphQL projects queries

See merge request gitlab-org/gitlab!43974
parents c70d2901 a65be6a1
Show whitespace changes
Inline Side-by-side
Showing with 121 additions and 368 deletions
ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
View file @ 45dcd491
......@@ -3,7 +3,7 @@ import { GlEmptyState } from '@gitlab/ui';
import { mapActions, mapState, mapGetters } from 'vuex';
import { PROJECTS_PER_PAGE } from '../constants';
import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
import { SIMILARITY_ORDER, LAST_ACTIVITY_AT, DATE_RANGE_LIMIT } from '../../shared/constants';
import { DATE_RANGE_LIMIT } from '../../shared/constants';
import DateRange from '../../shared/components/daterange.vue';
import StageTable from './stage_table.vue';
import DurationChart from './duration_chart.vue';
......@@ -118,12 +118,8 @@ export default {
},
projectsQueryParams() {
return {
per_page: PROJECTS_PER_PAGE,
with_shared: false,
order_by: this.featureFlags.hasAnalyticsSimilaritySearch
? SIMILARITY_ORDER
: LAST_ACTIVITY_AT,
include_subgroups: true,
first: PROJECTS_PER_PAGE,
includeSubgroups: true,
};
},
},
......
ee/app/assets/javascripts/analytics/cycle_analytics/index.js
View file @ 45dcd491
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { GlToast } from '@gitlab/ui';
import CycleAnalytics from './components/base.vue';
import createStore from './store';
import { buildCycleAnalyticsInitialData } from '../shared/utils';
import createDefaultClient from '~/lib/graphql';
import { urlQueryToFilter } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
Vue.use(GlToast);
Vue.use(VueApollo);
const apolloProvider = new VueApollo({
defaultClient: createDefaultClient(),
});
export default () => {
const el = document.querySelector('#js-cycle-analytics-app');
......@@ -43,6 +50,7 @@ export default () => {
return new Vue({
el,
name: 'CycleAnalyticsApp',
apolloProvider,
store,
render: createElement =>
createElement(CycleAnalytics, {
......
ee/app/assets/javascripts/analytics/cycle_analytics/store/getters.js
View file @ 45dcd491
import dateFormat from 'dateformat';
import { isNumber } from 'lodash';
import httpStatus from '~/lib/utils/http_status';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
import { dateFormats } from '../../shared/constants';
import { transformStagesForPathNavigation } from '../utils';
......@@ -14,7 +15,7 @@ export const currentValueStreamId = ({ selectedValueStream }) =>
export const currentGroupPath = ({ currentGroup }) => currentGroup?.fullPath || null;
export const selectedProjectIds = ({ selectedProjects }) =>
selectedProjects?.map(({ id }) => id) || [];
selectedProjects?.map(({ id }) => getIdFromGraphQLId(id)) || [];
export const cycleAnalyticsRequestParams = (state, getters) => {
const {
......
ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
View file @ 45dcd491
......@@ -10,7 +10,6 @@ import {
GlSearchBoxByType,
} from '@gitlab/ui';
import { n__, s__, __ } from '~/locale';
import Api from '~/api';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { DATA_REFETCH_DELAY } from '../constants';
import { filterBySearchTerm } from '../utils';
......@@ -56,11 +55,6 @@ export default {
required: false,
default: () => [],
},
useGraphql: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -133,7 +127,6 @@ export default {
fetchData() {
this.loading = true;
if (this.useGraphql) {
return this.$apollo
.query({
query: getProjects,
......@@ -155,20 +148,12 @@ export default {
this.loading = false;
this.projects = nodes;
});
}
return Api.groupProjects(this.groupId, this.searchTerm, this.queryParams, projects => {
this.projects = projects;
this.loading = false;
});
},
isProjectSelected(id) {
return this.selectedProjects ? this.selectedProjectIds.includes(id) : false;
},
getEntityId(project) {
if (this.useGraphql) return getIdFromGraphQLId(project.id);
return project?.id || null;
return getIdFromGraphQLId(project.id);
},
},
};
......@@ -184,7 +169,7 @@ export default {
<div class="gl-display-flex gl-flex-fill-1">
<gl-avatar
v-if="isOnlyOneProjectSelected"
:src="useGraphql ? selectedProjects[0].avatarUrl : selectedProjects[0].avatar_url"
:src="selectedProjects[0].avatarUrl"
:entity-id="getEntityId(selectedProjects[0])"
:entity-name="selectedProjects[0].name"
:size="16"
......@@ -213,7 +198,7 @@ export default {
:size="16"
:entity-id="getEntityId(project)"
:entity-name="project.name"
:src="useGraphql ? project.avatarUrl : project.avatar_url"
:src="project.avatarUrl"
shape="rect"
/>
{{ project.name }}
......
ee/app/assets/javascripts/analytics/shared/constants.js
View file @ 45dcd491
......@@ -14,10 +14,6 @@ export const scatterChartLineProps = {
},
};
export const LAST_ACTIVITY_AT = 'last_activity_at';
export const SIMILARITY_ORDER = 'similarity';
export const DATE_RANGE_LIMIT = 180;
export const OFFSET_DATE_BY_ONE = 1;
......
ee/lib/gitlab/analytics/cycle_analytics/request_params.rb
View file @ 45dcd491
......@@ -115,7 +115,7 @@ module Gitlab
def project_data_attributes(project)
{
id: project.id,
id: project.to_gid.to_s,
name: project.name,
path_with_namespace: project.path_with_namespace,
avatar_url: project.avatar_url
......
ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js
View file @ 45dcd491
......@@ -24,6 +24,7 @@ import httpStatusCodes from '~/lib/utils/http_status';
import UrlSync from '~/vue_shared/components/url_sync.vue';
import * as commonUtils from '~/lib/utils/common_utils';
import * as urlUtils from '~/lib/utils/url_utility';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import * as mockData from '../mock_data';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
......@@ -65,6 +66,11 @@ const mocks = {
$toast: {
show: jest.fn(),
},
$apollo: {
query: jest.fn().mockResolvedValue({
data: { group: { projects: { nodes: [] } } },
}),
},
};
function mockRequiredRoutes(mockAdapter) {
......@@ -390,25 +396,6 @@ describe('Cycle Analytics component', () => {
});
});
describe('when analyticsSimilaritySearch feature flag is on', () => {
beforeEach(async () => {
wrapper = await createComponent({
withStageSelected: true,
featureFlags: {
hasAnalyticsSimilaritySearch: true,
},
});
});
it('uses similarity as the order param', () => {
displaysProjectsDropdownFilter(true);
expect(wrapper.find(ProjectsDropdownFilter).props().queryParams.order_by).toEqual(
'similarity',
);
});
});
it('displays the date range picker', () => {
displaysDateRangePicker(true);
});
......@@ -636,7 +623,7 @@ describe('Cycle Analytics component', () => {
project_ids: null,
};
const selectedProjectIds = mockData.selectedProjects.map(({ id }) => id);
const selectedProjectIds = mockData.selectedProjects.map(({ id }) => getIdFromGraphQLId(id));
beforeEach(async () => {
commonUtils.historyPushState = jest.fn();
......
ee/spec/frontend/analytics/cycle_analytics/mock_data.js
View file @ 45dcd491
......@@ -251,13 +251,13 @@ export const rawDurationMedianData = [
export const selectedProjects = [
{
id: 1,
id: 'gid://gitlab/Project/1',
name: 'cool project',
pathWithNamespace: 'group/cool-project',
avatarUrl: null,
},
{
id: 2,
id: 'gid://gitlab/Project/2',
name: 'another cool project',
pathWithNamespace: 'group/another-cool-project',
avatarUrl: null,
......
ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
View file @ 45dcd491
......@@ -2,15 +2,9 @@ import { mount } from '@vue/test-utils';
import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
import getProjects from 'ee/analytics/shared/graphql/projects.query.graphql';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { LAST_ACTIVITY_AT } from 'ee/analytics/shared/constants';
import { TEST_HOST } from 'helpers/test_constants';
import Api from '~/api';
jest.mock('~/api', () => ({
groupProjects: jest.fn(),
}));
const mockGraphqlProjects = [
const projects = [
{
id: 'gid://gitlab/Project/1',
name: 'Gitlab Test',
......@@ -31,28 +25,10 @@ const mockGraphqlProjects = [
},
];
const projects = [
{
id: 1,
name: 'foo',
avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
},
{
id: 2,
name: 'foobar',
avatar_url: null,
},
{
id: 3,
name: 'foooooooo',
avatar_url: null,
},
];
const defaultMocks = {
$apollo: {
query: jest.fn().mockResolvedValue({
data: { group: { projects: { nodes: mockGraphqlProjects } } },
data: { group: { projects: { nodes: projects } } },
}),
},
};
......@@ -98,37 +74,9 @@ describe('ProjectsDropdownFilter component', () => {
.find('button')
.trigger('click');
describe('when using the REST API', () => {
describe('queryParams are applied when fetching data', () => {
beforeEach(() => {
Api.groupProjects.mockImplementation((groupId, term, options, callback) => {
callback(projects);
});
createComponent({
queryParams: {
per_page: 50,
with_shared: false,
order_by: LAST_ACTIVITY_AT,
},
});
});
it('applies the correct queryParams when making an api call', () => {
expect(Api.groupProjects).toHaveBeenCalledWith(
expect.any(Number),
expect.any(String),
expect.objectContaining({ per_page: 50, with_shared: false, order_by: LAST_ACTIVITY_AT }),
expect.any(Function),
);
});
});
});
describe('when using the GraphQL API', () => {
beforeEach(() => {
createComponent({
useGraphql: true,
queryParams: {
first: 50,
includeSubgroups: true,
......@@ -156,12 +104,7 @@ describe('ProjectsDropdownFilter component', () => {
});
describe('when passed a an array of defaultProject as prop', () => {
describe('when using the RESTP API', () => {
beforeEach(() => {
Api.groupProjects.mockImplementation((groupId, term, options, callback) => {
callback(projects);
});
createComponent({
defaultProjects: [projects[0]],
});
......@@ -180,35 +123,8 @@ describe('ProjectsDropdownFilter component', () => {
});
});
describe('when using the GraphQL API', () => {
beforeEach(() => {
createComponent({
useGraphql: true,
defaultProjects: [mockGraphqlProjects[0]],
});
});
it("displays the defaultProject's name", () => {
expect(findDropdownButton().text()).toContain(mockGraphqlProjects[0].name);
});
it("renders the defaultProject's avatar", () => {
expect(findDropdownButtonAvatar().exists()).toBe(true);
});
it('marks the defaultProject as selected', () => {
expect(findDropdownAtIndex(0).props('isChecked')).toBe(true);
});
});
});
describe('when multiSelect is false', () => {
describe('when using the RESTP API', () => {
beforeEach(() => {
Api.groupProjects.mockImplementation((groupId, term, options, callback) => {
callback(projects);
});
createComponent({ multiSelect: false });
});
......@@ -217,11 +133,11 @@ describe('ProjectsDropdownFilter component', () => {
expect(findDropdownItems()).toHaveLength(3);
});
it('renders an avatar when the project has an avatar_url', () => {
it('renders an avatar when the project has an avatarUrl', () => {
expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
});
it("renders an identicon when the project doesn't have an avatar_url", () => {
it("renders an identicon when the project doesn't have an avatarUrl", () => {
expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
});
......@@ -247,83 +163,11 @@ describe('ProjectsDropdownFilter component', () => {
expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[]]]);
});
it('renders an avatar in the dropdown button when the project has an avatar_url', async () => {
selectDropdownItemAtIndex(0);
await wrapper.vm.$nextTick().then(() => {
expect(
findDropdownButton()
.find('img.gl-avatar')
.exists(),
).toBe(true);
expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
});
});
it("renders an identicon in the dropdown button when the project doesn't have an avatar_url", async () => {
selectDropdownItemAtIndex(1);
await wrapper.vm.$nextTick().then(() => {
expect(
findDropdownButton()
.find('img.gl-avatar')
.exists(),
).toBe(false);
expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
});
});
});
});
describe('when using the GraphQl API', () => {
beforeEach(() => {
createComponent({ multiSelect: false, useGraphql: true });
});
describe('displays the correct information', () => {
it('contains 3 items', () => {
expect(findDropdownItems()).toHaveLength(3);
});
it('renders an avatar when the project has an avatarUrl', () => {
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);
});
});
describe('on project click', () => {
it('should emit the "selected" event with the selected project', () => {
selectDropdownItemAtIndex(0);
expect(wrapper.emitted().selected).toEqual([[[mockGraphqlProjects[0]]]]);
});
it('should change selection when new project is clicked', () => {
selectDropdownItemAtIndex(1);
expect(wrapper.emitted().selected).toEqual([[[mockGraphqlProjects[1]]]]);
});
it('selection should be emptied when a project is deselected', () => {
selectDropdownItemAtIndex(0); // Select the item
selectDropdownItemAtIndex(0); // deselect it
expect(wrapper.emitted().selected).toEqual([[[mockGraphqlProjects[0]]], [[]]]);
});
it('renders an avatar in the dropdown button when the project has an avatarUrl', async () => {
selectDropdownItemAtIndex(0);
await wrapper.vm.$nextTick().then(() => {
expect(
findDropdownButton()
.find('img.gl-avatar')
.exists(),
).toBe(true);
expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
});
});
......@@ -332,78 +176,18 @@ describe('ProjectsDropdownFilter component', () => {
selectDropdownItemAtIndex(1);
await wrapper.vm.$nextTick().then(() => {
expect(
findDropdownButton()
.find('img.gl-avatar')
.exists(),
).toBe(false);
expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
});
});
});
});
});
describe('when multiSelect is true', () => {
describe('when using the RESTP API', () => {
beforeEach(() => {
Api.groupProjects.mockImplementation((groupId, term, options, callback) => {
callback(projects);
});
createComponent({ multiSelect: true });
});
describe('displays the correct information', () => {
it('contains 3 items', () => {
expect(findDropdownItems()).toHaveLength(3);
});
it('renders an avatar when the project has an avatar_url', () => {
expect(findDropdownButtonAvatarAtIndex(0).exists()).toBe(true);
expect(findDropdownButtonIdentIconAtIndex(0).exists()).toBe(false);
});
it("renders an identicon when the project doesn't have an avatar_url", () => {
expect(findDropdownButtonAvatarAtIndex(1).exists()).toBe(false);
expect(findDropdownButtonIdentIconAtIndex(1).exists()).toBe(true);
});
});
describe('on project click', () => {
it('should add to selection when new project is clicked', () => {
selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(1);
expect(wrapper.emitted().selected).toEqual([
[[projects[0]]],
[[projects[0], projects[1]]],
]);
});
it('should remove from selection when clicked again', () => {
selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(0);
expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[]]]);
});
it('renders the correct placeholder text when multiple projects are selected', async () => {
selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(1);
await wrapper.vm.$nextTick().then(() => {
expect(findDropdownButton().text()).toBe('2 projects selected');
});
});
});
});
describe('when using the GraphQl API', () => {
beforeEach(() => {
createComponent({ multiSelect: true, useGraphql: true });
});
describe('displays the correct information', () => {
it('contains 3 items', () => {
expect(findDropdownItems()).toHaveLength(3);
......@@ -425,17 +209,14 @@ describe('ProjectsDropdownFilter component', () => {
selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(1);
expect(wrapper.emitted().selected).toEqual([
[[mockGraphqlProjects[0]]],
[[mockGraphqlProjects[0], mockGraphqlProjects[1]]],
]);
expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[projects[0], projects[1]]]]);
});
it('should remove from selection when clicked again', () => {
selectDropdownItemAtIndex(0);
selectDropdownItemAtIndex(0);
expect(wrapper.emitted().selected).toEqual([[[mockGraphqlProjects[0]]], [[]]]);
expect(wrapper.emitted().selected).toEqual([[[projects[0]]], [[]]]);
});
it('renders the correct placeholder text when multiple projects are selected', async () => {
......@@ -448,5 +229,4 @@ describe('ProjectsDropdownFilter component', () => {
});
});
});
});
});
ee/spec/lib/gitlab/analytics/cycle_analytics/request_params_spec.rb
View file @ 45dcd491
......@@ -82,7 +82,7 @@ RSpec.describe Gitlab::Analytics::CycleAnalytics::RequestParams do
describe 'optional `project_ids`' do
context 'when `project_ids` is not empty' do
def json_project(project)
{ id: project.id,
{ id: project.to_gid.to_s,
name: project.name,
path_with_namespace: project.path_with_namespace,
avatar_url: project.avatar_url }.to_json
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7