Skip to content
Snippets Groups Projects
Commit 0a81c403 authored by Tomas Bulva's avatar Tomas Bulva Committed by Frédéric Caplette
Browse files

Add state data suport for the new component

Changelog: added
parent 613e5c73
No related branches found
No related tags found
2 merge requests!121060Labels as a facet - state update - part 3,!119439Draft: Prevent file variable content expansion in downstream pipeline
import { __ } from '~/locale';
export const FIRST_DROPDOWN_INDEX = 0;
export const SEARCH_BOX_INDEX = 0;
export const SEARCH_INPUT_DESCRIPTION = 'label-search-input-description';
export const SEARCH_RESULTS_DESCRIPTION = 'label-search-results-description';
const header = __('Labels');
const scopes = {
ISSUES: 'issues',
};
const filterParam = 'labels';
export const labelFilterData = {
header,
scopes,
filterParam,
};
......@@ -5,6 +5,7 @@ import { visitUrl, setUrlParams } from '~/lib/utils/url_utility';
import { logError } from '~/lib/logger';
import { __ } from '~/locale';
import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
import { labelFilterData } from '~/search/sidebar/components/label_filter/data';
import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY, SIDEBAR_PARAMS } from './constants';
import * as types from './mutation_types';
import {
......@@ -108,10 +109,24 @@ export const applyQuery = ({ state }) => {
export const resetQuery = ({ state }) => {
visitUrl(
setUrlParams({ ...state.query, page: null, state: null, confidential: null }, undefined, true),
setUrlParams(
{ ...state.query, page: null, state: null, confidential: null, labels: null },
undefined,
true,
),
);
};
export const closeLabel = ({ state, commit }, { key }) => {
const labels = state?.query?.labels.filter((labelKey) => labelKey !== key);
setQuery({ state, commit }, { key: labelFilterData.filterParam, value: labels });
};
export const setLabelFilterSearch = ({ commit }, { value }) => {
commit(types.SET_LABEL_SEARCH_STRING, value);
};
export const resetLanguageQueryWithRedirect = ({ state }) => {
visitUrl(setUrlParams({ ...state.query, language: null }, undefined, true));
};
......
import { stateFilterData } from '~/search/sidebar/constants/state_filter_data';
import { confidentialFilterData } from '~/search/sidebar/constants/confidential_filter_data';
import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
import { labelFilterData } from '~/search/sidebar/components/label_filter/data';
export const MAX_FREQUENT_ITEMS = 5;
......@@ -14,6 +15,7 @@ export const SIDEBAR_PARAMS = [
stateFilterData.filterParam,
confidentialFilterData.filterParam,
languageFilterData.filterParam,
labelFilterData.filterParam,
];
export const NUMBER_FORMATING_OPTIONS = { notation: 'compact', compactDisplay: 'short' };
......
import { findKey, has } from 'lodash';
import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
import { labelFilterData } from '~/search/sidebar/components/label_filter/data';
import { formatSearchResultCount, addCountOverLimit } from '~/search/store/utils';
import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY, ICON_MAP } from './constants';
......@@ -20,6 +21,40 @@ export const languageAggregationBuckets = (state) => {
);
};
export const labelAggregationBuckets = (state) => {
return (
state?.aggregations?.data?.find(
(aggregation) => aggregation.name === labelFilterData.filterParam,
)?.buckets || []
);
};
export const filteredLabels = (state) => {
if (state.searchLabelString === '') {
return labelAggregationBuckets(state);
}
return labelAggregationBuckets(state).filter((label) => {
return label.title.toLowerCase().includes(state.searchLabelString.toLowerCase());
});
};
export const filteredAppliedSelectedLabels = (state) =>
filteredLabels(state)?.filter((label) => state?.urlQuery?.labels?.includes(label.key));
export const appliedSelectedLabels = (state) =>
labelAggregationBuckets(state)?.filter((label) => state?.urlQuery?.labels?.includes(label.key));
export const filteredUnappliedSelectedLabels = (state) =>
filteredLabels(state)?.filter((label) => state?.query?.labels?.includes(label.key));
export const filteredUnselectedLabels = (state) => {
if (!state?.urlQuery?.labels) {
return filteredLabels(state);
}
return filteredLabels(state)?.filter((label) => !state?.urlQuery?.labels?.includes(label.key));
};
export const currentScope = (state) => findKey(state.navigation, { active: true });
export const queryLanguageFilters = (state) => state.query[languageFilterData.filterParam] || [];
......
......@@ -15,3 +15,5 @@ export const RECEIVE_NAVIGATION_COUNT = 'RECEIVE_NAVIGATION_COUNT';
export const REQUEST_AGGREGATIONS = 'REQUEST_AGGREGATIONS';
export const RECEIVE_AGGREGATIONS_SUCCESS = 'RECEIVE_AGGREGATIONS_SUCCESS';
export const RECEIVE_AGGREGATIONS_ERROR = 'RECEIVE_AGGREGATIONS_ERROR';
export const SET_LABEL_SEARCH_STRING = 'SET_LABEL_SEARCH_STRING';
......@@ -45,4 +45,7 @@ export default {
[types.RECEIVE_AGGREGATIONS_ERROR](state) {
state.aggregations = { fetching: false, error: true, data: [] };
},
[types.SET_LABEL_SEARCH_STRING](state, value) {
state.searchLabelString = value;
},
};
......@@ -20,6 +20,7 @@ const createState = ({ query, navigation, useSidebarNavigation }) => ({
fetching: false,
data: [],
},
searchLabelString: '',
});
export default createState;
......@@ -7,6 +7,7 @@ export const MOCK_QUERY = {
confidential: null,
group_id: 1,
language: ['C', 'JavaScript'],
labels: ['60', '37'],
};
export const MOCK_GROUP = {
......@@ -542,3 +543,346 @@ export const MOCK_NAVIGATION_ITEMS = [
items: [],
},
];
export const PROCESS_LABELS_DATA = [
{
key: '60',
count: 14,
title: 'Brist',
color: 'rgb(170, 174, 187)',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '69',
count: 13,
title: 'Brouneforge',
color: 'rgb(170, 174, 187)',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '33',
count: 12,
title: 'Brifunc',
color: 'rgb(170, 174, 187)',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
{
key: '37',
count: 12,
title: 'Aftersync',
color: 'rgb(170, 174, 187)',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
];
export const APPLIED_SELECTED_LABELS = [
{
key: '60',
count: 14,
title: 'Brist',
color: '#aaaebb',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '37',
count: 12,
title: 'Aftersync',
color: '#79fdbf',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
];
export const MOCK_LABEL_AGGREGATIONS = {
fetching: false,
error: false,
data: [
{
name: 'labels',
buckets: [
{
key: '60',
count: 14,
title: 'Brist',
color: '#aaaebb',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '37',
count: 12,
title: 'Aftersync',
color: '#79fdbf',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
{
key: '6',
count: 12,
title: 'Cosche',
color: '#cea786',
type: 'GroupLabel',
parent_full_name: 'Toolbox',
},
{
key: '73',
count: 12,
title: 'Accent',
color: '#a5c6fb',
type: 'ProjectLabel',
parent_full_name: 'Toolbox / Gitlab Smoke Tests',
},
],
},
],
};
export const MOCK_LABEL_SEARCH_RESULT = {
key: '37',
count: 12,
title: 'Aftersync',
color: '#79fdbf',
type: 'GroupLabel',
parent_full_name: 'Commit451',
};
export const MOCK_FILTERED_UNSELECTED_LABELS = [
{
key: '6',
count: 12,
title: 'Cosche',
color: '#cea786',
type: 'GroupLabel',
parent_full_name: 'Toolbox',
},
{
key: '73',
count: 12,
title: 'Accent',
color: '#a5c6fb',
type: 'ProjectLabel',
parent_full_name: 'Toolbox / Gitlab Smoke Tests',
},
];
export const MOCK_FILTERED_APPLIED_SELECTED_LABELS = [
{
key: '60',
count: 14,
title: 'Brist',
color: '#aaaebb',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '37',
count: 12,
title: 'Aftersync',
color: '#79fdbf',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
];
export const MOCK_FILTERED_LABELS = [
{
key: '60',
count: 14,
title: 'Brist',
color: '#aaaebb',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '69',
count: 13,
title: 'Brouneforge',
color: '#8a13d3',
type: 'GroupLabel',
parent_full_name: 'Twitter',
},
{
key: '33',
count: 12,
title: 'Brifunc',
color: '#b76463',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
{
key: '37',
count: 12,
title: 'Aftersync',
color: '#79fdbf',
type: 'GroupLabel',
parent_full_name: 'Commit451',
},
{
key: '6',
count: 12,
title: 'Cosche',
color: '#cea786',
type: 'GroupLabel',
parent_full_name: 'Toolbox',
},
{
key: '73',
count: 12,
title: 'Accent',
color: '#a5c6fb',
type: 'ProjectLabel',
parent_full_name: 'Toolbox / Gitlab Smoke Tests',
},
{
key: '9',
count: 12,
title: 'Briph',
color: '#e69182',
type: 'GroupLabel',
parent_full_name: 'Toolbox',
},
{
key: '91',
count: 12,
title: 'Cobalt',
color: '#9eae75',
type: 'ProjectLabel',
parent_full_name: 'Commit451 / Lab Coat',
},
{
key: '94',
count: 12,
title: 'Protege',
color: '#777b83',
type: 'ProjectLabel',
parent_full_name: 'Commit451 / Lab Coat',
},
{
key: '84',
count: 11,
title: 'Avenger',
color: '#5c5161',
type: 'ProjectLabel',
parent_full_name: 'Gitlab Org / Gitlab Shell',
},
{
key: '99',
count: 11,
title: 'Cobalt',
color: '#9eae75',
type: 'ProjectLabel',
parent_full_name: 'Jashkenas / Underscore',
},
{
key: '77',
count: 10,
title: 'Avenger',
color: '#5c5161',
type: 'ProjectLabel',
parent_full_name: 'Gitlab Org / Gitlab Test',
},
{
key: '79',
count: 10,
title: 'Fiero',
color: '#681cd0',
type: 'ProjectLabel',
parent_full_name: 'Gitlab Org / Gitlab Test',
},
{
key: '98',
count: 9,
title: 'Golf',
color: '#007aaf',
type: 'ProjectLabel',
parent_full_name: 'Jashkenas / Underscore',
},
{
key: '101',
count: 7,
title: 'Accord',
color: '#a72b3b',
type: 'ProjectLabel',
parent_full_name: 'Flightjs / Flight',
},
{
key: '53',
count: 7,
title: 'Amsche',
color: '#9964cf',
type: 'GroupLabel',
parent_full_name: 'Flightjs',
},
{
key: '11',
count: 3,
title: 'Aquasync',
color: '#347e7f',
type: 'GroupLabel',
parent_full_name: 'Gitlab Org',
},
{
key: '15',
count: 3,
title: 'Lunix',
color: '#aad577',
type: 'GroupLabel',
parent_full_name: 'Gitlab Org',
},
{
key: '88',
count: 3,
title: 'Aztek',
color: '#59160a',
type: 'ProjectLabel',
parent_full_name: 'Gnuwget / Wget2',
},
{
key: '89',
count: 3,
title: 'Intrigue',
color: '#5039bd',
type: 'ProjectLabel',
parent_full_name: 'Gnuwget / Wget2',
},
{
key: '96',
count: 2,
title: 'Trailblazer',
color: '#5a3e93',
type: 'ProjectLabel',
parent_full_name: 'Jashkenas / Underscore',
},
{
key: '54',
count: 1,
title: 'NB',
color: '#a4a53a',
type: 'GroupLabel',
parent_full_name: 'Flightjs',
},
];
export const MOCK_FILTERED_UNAPPLIED_SELECTED_LABELS = [
{
key: '6',
count: 12,
title: 'Cosche',
color: '#cea786',
type: 'GroupLabel',
parent_full_name: 'Toolbox',
},
{
key: '73',
count: 12,
title: 'Accent',
color: '#a5c6fb',
type: 'ProjectLabel',
parent_full_name: 'Toolbox / Gitlab Smoke Tests',
},
];
......@@ -31,6 +31,7 @@ import {
MOCK_RECEIVE_AGGREGATIONS_SUCCESS_MUTATION,
MOCK_RECEIVE_AGGREGATIONS_ERROR_MUTATION,
MOCK_AGGREGATIONS,
MOCK_LABEL_AGGREGATIONS,
} from '../mock_data';
jest.mock('~/alert');
......@@ -347,4 +348,49 @@ describe('Global Search Store Actions', () => {
);
});
});
describe('closeLabel', () => {
beforeEach(() => {
state = createState({
query: MOCK_QUERY,
aggregations: MOCK_LABEL_AGGREGATIONS,
});
});
it('removes correct labels from query and sets sidebar dirty', () => {
const expectedResult = [
{
payload: {
key: 'labels',
value: ['37'],
},
type: 'SET_QUERY',
},
{
payload: true,
type: 'SET_SIDEBAR_DIRTY',
},
];
return testAction(actions.closeLabel, { key: '60' }, state, expectedResult, []);
});
});
describe('setLabelFilterSearch', () => {
beforeEach(() => {
state = createState({
query: MOCK_QUERY,
aggregations: MOCK_LABEL_AGGREGATIONS,
});
});
it('sets search string', () => {
const expectedResult = [
{
payload: 'test',
type: 'SET_LABEL_SEARCH_STRING',
},
];
return testAction(actions.setLabelFilterSearch, { value: 'test' }, state, expectedResult, []);
});
});
});
import { cloneDeep } from 'lodash';
import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from '~/search/store/constants';
import * as getters from '~/search/store/getters';
import createState from '~/search/store/state';
......@@ -11,16 +12,31 @@ import {
TEST_FILTER_DATA,
MOCK_NAVIGATION,
MOCK_NAVIGATION_ITEMS,
MOCK_LABEL_AGGREGATIONS,
SMALL_MOCK_AGGREGATIONS,
MOCK_LABEL_SEARCH_RESULT,
MOCK_FILTERED_APPLIED_SELECTED_LABELS,
MOCK_FILTERED_UNSELECTED_LABELS,
MOCK_FILTERED_UNAPPLIED_SELECTED_LABELS,
} from '../mock_data';
describe('Global Search Store Getters', () => {
let state;
const defaultState = createState({ query: MOCK_QUERY });
defaultState.aggregations = MOCK_LABEL_AGGREGATIONS;
defaultState.aggregations.data.push(SMALL_MOCK_AGGREGATIONS[0]);
beforeEach(() => {
state = createState({ query: MOCK_QUERY });
state = cloneDeep(defaultState);
useMockLocationHelper();
});
afterEach(() => {
state = cloneDeep(defaultState);
});
describe('frequentGroups', () => {
it('returns the correct data', () => {
state.frequentItems[GROUPS_LOCAL_STORAGE_KEY] = MOCK_GROUPS;
......@@ -76,4 +92,82 @@ describe('Global Search Store Getters', () => {
expect(getters.navigationItems(state)).toStrictEqual(MOCK_NAVIGATION_ITEMS);
});
});
describe('labelAggregationBuckets', () => {
it('strips labels buckets from all aggregations', () => {
expect(getters.labelAggregationBuckets(state)).toStrictEqual(
MOCK_LABEL_AGGREGATIONS.data[0].buckets,
);
});
});
describe('filteredLabels', () => {
it('gets all labels if no string is set', () => {
state.searchLabelString = '';
expect(getters.filteredLabels(state)).toStrictEqual(MOCK_LABEL_AGGREGATIONS.data[0].buckets);
});
it('get correct labels if string is set', () => {
state.searchLabelString = 'SYNC';
expect(getters.filteredLabels(state)).toStrictEqual([MOCK_LABEL_SEARCH_RESULT]);
});
});
describe('filteredAppliedSelectedLabels', () => {
it('returns all labels that are selected (part of URL)', () => {
expect(getters.filteredAppliedSelectedLabels(state)).toStrictEqual(
MOCK_FILTERED_APPLIED_SELECTED_LABELS,
);
});
it('returns labels that are selected (part of URL) and result of search', () => {
state.searchLabelString = 'SYNC';
expect(getters.filteredAppliedSelectedLabels(state)).toStrictEqual([
MOCK_FILTERED_APPLIED_SELECTED_LABELS[1],
]);
});
});
describe('appliedSelectedLabels', () => {
it('returns all labels that are selected (part of URL) no search', () => {
state.searchLabelString = 'SYNC';
expect(getters.appliedSelectedLabels(state)).toStrictEqual(
MOCK_FILTERED_APPLIED_SELECTED_LABELS,
);
});
});
describe('filteredUnappliedSelectedLabels', () => {
beforeEach(() => {
state.query.labels = ['6', '73'];
});
it('returns all labels that are selected (part of URL) no search', () => {
expect(getters.filteredUnappliedSelectedLabels(state)).toStrictEqual(
MOCK_FILTERED_UNAPPLIED_SELECTED_LABELS,
);
});
it('returns labels that are selected (part of URL) and result of search', () => {
state.searchLabelString = 'ACC';
expect(getters.filteredUnappliedSelectedLabels(state)).toStrictEqual([
MOCK_FILTERED_UNAPPLIED_SELECTED_LABELS[1],
]);
});
});
describe('filteredUnselectedLabels', () => {
it('returns all labels that are selected (part of URL) no search', () => {
expect(getters.filteredUnselectedLabels(state)).toStrictEqual(
MOCK_FILTERED_UNSELECTED_LABELS,
);
});
it('returns labels that are selected (part of URL) and result of search', () => {
state.searchLabelString = 'ACC';
expect(getters.filteredUnselectedLabels(state)).toStrictEqual([
MOCK_FILTERED_UNSELECTED_LABELS[1],
]);
});
});
});
......@@ -122,4 +122,12 @@ describe('Global Search Store Mutations', () => {
expect(state.aggregations).toStrictEqual(result);
});
});
describe('SET_LABEL_SEARCH_STRING', () => {
it('sets the search string to the given data', () => {
mutations[types.SET_LABEL_SEARCH_STRING](state, 'test');
expect(state.searchLabelString).toBe('test');
});
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment