Skip to content

N
nexpie-grafana-theme
Commit bd75adf5 by Hugo Häggmark Committed by GitHub
Options

Templating: Fixes so texts show in picker not the values (#27002)

parent 50ebbb62
Showing with 95 additions and 175 deletions
public/app/features/variables/pickers/OptionsPicker/actions.test.ts
...@@ -4,12 +4,12 @@ import { TemplatingState } from '../../state/reducers'; ...@@ -4,12 +4,12 @@ import { TemplatingState } from '../../state/reducers';
import { QueryVariableModel, VariableHide, VariableRefresh, VariableSort } from '../../types'; import { QueryVariableModel, VariableHide, VariableRefresh, VariableSort } from '../../types';
import { import {
hideOptions, hideOptions,
moveOptionsHighlight,
showOptions, showOptions,
toggleOption, toggleOption,
toggleTag, toggleTag,
updateOptionsAndFilter, updateOptionsAndFilter,
updateSearchQuery, updateSearchQuery,
moveOptionsHighlight,
} from './reducer'; } from './reducer';
import { import {
commitChangesToVariable, commitChangesToVariable,
...@@ -45,7 +45,10 @@ describe('options picker actions', () => { ...@@ -45,7 +45,10 @@ describe('options picker actions', () => {
describe('when navigateOptions is dispatched with navigation key cancel', () => { describe('when navigateOptions is dispatched with navigation key cancel', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const variable = createVariable({ options: [createOption('A', 'A', true)] }); const variable = createMultiVariable({
options: [createOption('A', 'A', true)],
current: createOption(['A'], ['A'], true),
});
const clearOthers = false; const clearOthers = false;
const key = NavigationKey.cancel; const key = NavigationKey.cancel;
...@@ -57,33 +60,30 @@ describe('options picker actions', () => { ...@@ -57,33 +60,30 @@ describe('options picker actions', () => {
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
const option = { const option = {
...createOption('A'), ...createOption(['A']),
selected: true, selected: true,
value: ['A'], value: ['A'],
tags: [] as any[], tags: [] as any[],
}; };
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [setCurrentValue, changeQueryValue, updateOption, locationAction, hideAction] = actions; setCurrentVariableValue(toVariablePayload(variable, { option })),
const expectedNumberOfActions = 5; changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
setCurrentVariableValue(toVariablePayload(variable, { option })),
expect(setCurrentValue).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option }))); updateLocation({ query: { 'var-Constant': ['A'] } }),
expect(changeQueryValue).toEqual( hideOptions()
changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' }))
); );
expect(updateOption).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option })));
expect(locationAction).toEqual(updateLocation({ query: { 'var-Constant': ['A'] } }));
expect(hideAction).toEqual(hideOptions());
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when navigateOptions is dispatched with navigation key select without clearOthers', () => { describe('when navigateOptions is dispatched with navigation key select without clearOthers', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const option = createOption('A', 'A', true); const option = createOption('A', 'A', true);
const variable = createVariable({ options: [option], includeAll: false }); const variable = createMultiVariable({
options: [option],
current: createOption(['A'], ['A'], true),
includeAll: false,
});
const clearOthers = false; const clearOthers = false;
const key = NavigationKey.select; const key = NavigationKey.select;
...@@ -95,20 +95,18 @@ describe('options picker actions', () => { ...@@ -95,20 +95,18 @@ describe('options picker actions', () => {
.whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, false)) .whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, false))
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleOption({ option, forceSelect: false, clearOthers }));
const [toggleOptionAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleOptionAction).toEqual(toggleOption({ option, forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when navigateOptions is dispatched with navigation key select with clearOthers', () => { describe('when navigateOptions is dispatched with navigation key select with clearOthers', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const option = createOption('A', 'A', true); const option = createOption('A', 'A', true);
const variable = createVariable({ options: [option], includeAll: false }); const variable = createMultiVariable({
options: [option],
current: createOption(['A'], ['A'], true),
includeAll: false,
});
const clearOthers = true; const clearOthers = true;
const key = NavigationKey.select; const key = NavigationKey.select;
...@@ -120,20 +118,14 @@ describe('options picker actions', () => { ...@@ -120,20 +118,14 @@ describe('options picker actions', () => {
.whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, clearOthers)) .whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, clearOthers))
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleOption({ option, forceSelect: false, clearOthers }));
const [toggleOptionAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleOptionAction).toEqual(toggleOption({ option, forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when navigateOptions is dispatched with navigation key select after highlighting the third option', () => { describe('when navigateOptions is dispatched with navigation key select after highlighting the third option', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = true; const clearOthers = true;
const key = NavigationKey.select; const key = NavigationKey.select;
...@@ -147,20 +139,14 @@ describe('options picker actions', () => { ...@@ -147,20 +139,14 @@ describe('options picker actions', () => {
.whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, clearOthers)) .whenActionIsDispatched(navigateOptions(NavigationKey.moveDown, clearOthers))
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleOption({ option: options[2], forceSelect: false, clearOthers }));
const [toggleOptionAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleOptionAction).toEqual(toggleOption({ option: options[2], forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when navigateOptions is dispatched with navigation key select after highlighting the second option', () => { describe('when navigateOptions is dispatched with navigation key select after highlighting the second option', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = true; const clearOthers = true;
const key = NavigationKey.select; const key = NavigationKey.select;
...@@ -175,20 +161,14 @@ describe('options picker actions', () => { ...@@ -175,20 +161,14 @@ describe('options picker actions', () => {
.whenActionIsDispatched(navigateOptions(NavigationKey.moveUp, clearOthers)) .whenActionIsDispatched(navigateOptions(NavigationKey.moveUp, clearOthers))
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleOption({ option: options[1], forceSelect: false, clearOthers }));
const [toggleOptionAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleOptionAction).toEqual(toggleOption({ option: options[1], forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when navigateOptions is dispatched with navigation key selectAndClose after highlighting the second option', () => { describe('when navigateOptions is dispatched with navigation key selectAndClose after highlighting the second option', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = false; const clearOthers = false;
const key = NavigationKey.selectAndClose; const key = NavigationKey.selectAndClose;
...@@ -204,41 +184,27 @@ describe('options picker actions', () => { ...@@ -204,41 +184,27 @@ describe('options picker actions', () => {
.whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true); .whenAsyncActionIsDispatched(navigateOptions(key, clearOthers), true);
const option = { const option = {
...createOption('B'), ...createOption(['B']),
selected: true, selected: true,
value: ['B'], value: ['B'],
tags: [] as any[], tags: [] as any[],
}; };
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [ toggleOption({ option: options[1], forceSelect: true, clearOthers }),
toggleOptionAction, setCurrentVariableValue(toVariablePayload(variable, { option })),
setCurrentValue, changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
changeQueryValue, setCurrentVariableValue(toVariablePayload(variable, { option })),
updateOption, updateLocation({ query: { 'var-Constant': ['B'] } }),
locationAction, hideOptions()
hideAction,
] = actions;
const expectedNumberOfActions = 6;
expect(toggleOptionAction).toEqual(toggleOption({ option: options[1], forceSelect: true, clearOthers }));
expect(setCurrentValue).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option })));
expect(changeQueryValue).toEqual(
changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' }))
); );
expect(updateOption).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option })));
expect(locationAction).toEqual(updateLocation({ query: { 'var-Constant': ['B'] } }));
expect(hideAction).toEqual(hideOptions());
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when filterOrSearchOptions is dispatched with simple filter', () => { describe('when filterOrSearchOptions is dispatched with simple filter', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const filter = 'A'; const filter = 'A';
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
...@@ -247,22 +213,14 @@ describe('options picker actions', () => { ...@@ -247,22 +213,14 @@ describe('options picker actions', () => {
.whenActionIsDispatched(showOptions(variable)) .whenActionIsDispatched(showOptions(variable))
.whenAsyncActionIsDispatched(filterOrSearchOptions(filter), true); .whenAsyncActionIsDispatched(filterOrSearchOptions(filter), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(updateSearchQuery(filter), updateOptionsAndFilter(variable.options));
const [updateQueryValue, updateAndFilter] = actions;
const expectedNumberOfActions = 2;
expect(updateQueryValue).toEqual(updateSearchQuery(filter));
expect(updateAndFilter).toEqual(updateOptionsAndFilter(variable.options));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when commitChangesToVariable is dispatched with no changes', () => { describe('when commitChangesToVariable is dispatched with no changes', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
.givenRootReducer(getRootReducer()) .givenRootReducer(getRootReducer())
...@@ -271,31 +229,26 @@ describe('options picker actions', () => { ...@@ -271,31 +229,26 @@ describe('options picker actions', () => {
.whenAsyncActionIsDispatched(commitChangesToVariable(), true); .whenAsyncActionIsDispatched(commitChangesToVariable(), true);
const option = { const option = {
...createOption(''), ...createOption([]),
selected: true, selected: true,
value: [] as any[], value: [] as any[],
tags: [] as any[], tags: [] as any[],
}; };
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [setCurrentValue, changeQueryValue, hideAction] = actions; setCurrentVariableValue(toVariablePayload(variable, { option })),
const expectedNumberOfActions = 3; changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
setCurrentVariableValue(toVariablePayload(variable, { option })),
expect(setCurrentValue).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option }))); updateLocation({ query: { 'var-Constant': [] } }),
expect(changeQueryValue).toEqual( hideOptions()
changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' }))
); );
expect(hideAction).toEqual(hideOptions());
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when commitChangesToVariable is dispatched with changes', () => { describe('when commitChangesToVariable is dispatched with changes', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = false; const clearOthers = false;
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
...@@ -307,33 +260,26 @@ describe('options picker actions', () => { ...@@ -307,33 +260,26 @@ describe('options picker actions', () => {
.whenAsyncActionIsDispatched(commitChangesToVariable(), true); .whenAsyncActionIsDispatched(commitChangesToVariable(), true);
const option = { const option = {
...createOption('A'), ...createOption(['A']),
selected: true, selected: true,
value: ['A'], value: ['A'],
tags: [] as any[], tags: [] as any[],
}; };
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [setCurrentValue, changeQueryValue, updateOption, locationAction, hideAction] = actions; setCurrentVariableValue(toVariablePayload(variable, { option })),
const expectedNumberOfActions = 5; changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' })),
setCurrentVariableValue(toVariablePayload(variable, { option })),
expect(setCurrentValue).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option }))); updateLocation({ query: { 'var-Constant': ['A'] } }),
expect(changeQueryValue).toEqual( hideOptions()
changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: '' }))
); );
expect(updateOption).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option })));
expect(locationAction).toEqual(updateLocation({ query: { 'var-Constant': ['A'] } }));
expect(hideAction).toEqual(hideOptions());
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when commitChangesToVariable is dispatched with changes and list of options is filtered', () => { describe('when commitChangesToVariable is dispatched with changes and list of options is filtered', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = false; const clearOthers = false;
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
...@@ -346,33 +292,26 @@ describe('options picker actions', () => { ...@@ -346,33 +292,26 @@ describe('options picker actions', () => {
.whenAsyncActionIsDispatched(commitChangesToVariable(), true); .whenAsyncActionIsDispatched(commitChangesToVariable(), true);
const option = { const option = {
...createOption('A'), ...createOption(['A']),
selected: true, selected: true,
value: ['A'], value: ['A'],
tags: [] as any[], tags: [] as any[],
}; };
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [setCurrentValue, changeQueryValue, updateOption, locationAction, hideAction] = actions; setCurrentVariableValue(toVariablePayload(variable, { option })),
const expectedNumberOfActions = 5; changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: 'C' })),
setCurrentVariableValue(toVariablePayload(variable, { option })),
expect(setCurrentValue).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option }))); updateLocation({ query: { 'var-Constant': ['A'] } }),
expect(changeQueryValue).toEqual( hideOptions()
changeVariableProp(toVariablePayload(variable, { propName: 'queryValue', propValue: 'C' }))
); );
expect(updateOption).toEqual(setCurrentVariableValue(toVariablePayload(variable, { option })));
expect(locationAction).toEqual(updateLocation({ query: { 'var-Constant': ['A'] } }));
expect(hideAction).toEqual(hideOptions());
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when toggleOptionByHighlight is dispatched with changes', () => { describe('when toggleOptionByHighlight is dispatched with changes', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = false; const clearOthers = false;
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
...@@ -384,20 +323,14 @@ describe('options picker actions', () => { ...@@ -384,20 +323,14 @@ describe('options picker actions', () => {
const option = createOption('A'); const option = createOption('A');
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleOption({ option, forceSelect: false, clearOthers }));
const [toggleOptionAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleOptionAction).toEqual(toggleOption({ option, forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
describe('when toggleOptionByHighlight is dispatched with changes selected from a filtered options list', () => { describe('when toggleOptionByHighlight is dispatched with changes selected from a filtered options list', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('BC'), createOption('BD')]; const options = [createOption('A'), createOption('B'), createOption('BC'), createOption('BD')];
const variable = createVariable({ options, includeAll: false }); const variable = createMultiVariable({ options, current: createOption(['A'], ['A'], true), includeAll: false });
const clearOthers = false; const clearOthers = false;
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
...@@ -414,19 +347,14 @@ describe('options picker actions', () => { ...@@ -414,19 +347,14 @@ describe('options picker actions', () => {
const optionA = createOption('A'); const optionA = createOption('A');
const optionBC = createOption('BD'); const optionBC = createOption('BD');
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(
const [toggleOptionA, filterOnB, updateAndFilter, firstMoveDown, secondMoveDown, toggleOptionBC] = actions; toggleOption({ option: optionA, forceSelect: false, clearOthers }),
const expectedNumberOfActions = 6; updateSearchQuery('B'),
updateOptionsAndFilter(variable.options),
expect(toggleOptionA).toEqual(toggleOption({ option: optionA, forceSelect: false, clearOthers })); moveOptionsHighlight(1),
expect(filterOnB).toEqual(updateSearchQuery('B')); moveOptionsHighlight(1),
expect(updateAndFilter).toEqual(updateOptionsAndFilter(variable.options)); toggleOption({ option: optionBC, forceSelect: false, clearOthers })
expect(firstMoveDown).toEqual(moveOptionsHighlight(1)); );
expect(secondMoveDown).toEqual(moveOptionsHighlight(1));
expect(toggleOptionBC).toEqual(toggleOption({ option: optionBC, forceSelect: false, clearOthers }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
...@@ -434,7 +362,12 @@ describe('options picker actions', () => { ...@@ -434,7 +362,12 @@ describe('options picker actions', () => {
it('then correct actions are dispatched', async () => { it('then correct actions are dispatched', async () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const tag = createTag('tag', []); const tag = createTag('tag', []);
const variable = createVariable({ options, includeAll: false, tags: [tag] }); const variable = createMultiVariable({
options,
current: createOption(['A'], ['A'], true),
includeAll: false,
tags: [tag],
});
const tester = await reduxTester<{ templating: TemplatingState }>() const tester = await reduxTester<{ templating: TemplatingState }>()
.givenRootReducer(getRootReducer()) .givenRootReducer(getRootReducer())
...@@ -442,13 +375,7 @@ describe('options picker actions', () => { ...@@ -442,13 +375,7 @@ describe('options picker actions', () => {
.whenActionIsDispatched(showOptions(variable)) .whenActionIsDispatched(showOptions(variable))
.whenAsyncActionIsDispatched(toggleAndFetchTag(tag), true); .whenAsyncActionIsDispatched(toggleAndFetchTag(tag), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleTag(tag));
const [toggleTagAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleTagAction).toEqual(toggleTag(tag));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
...@@ -457,7 +384,12 @@ describe('options picker actions', () => { ...@@ -457,7 +384,12 @@ describe('options picker actions', () => {
const options = [createOption('A'), createOption('B'), createOption('C')]; const options = [createOption('A'), createOption('B'), createOption('C')];
const tag = createTag('tag'); const tag = createTag('tag');
const values = [createMetric('b')]; const values = [createMetric('b')];
const variable = createVariable({ options, includeAll: false, tags: [tag] }); const variable = createMultiVariable({
options,
current: createOption(['A'], ['A'], true),
includeAll: false,
tags: [tag],
});
datasource.metricFindQuery.mockReset(); datasource.metricFindQuery.mockReset();
// @ts-ignore strict null error TS2345: Argument of type '() => Promise<{ value: string; text: string; }[]>' is not assignable to parameter of type '() => Promise<never[]>' // @ts-ignore strict null error TS2345: Argument of type '() => Promise<{ value: string; text: string; }[]>' is not assignable to parameter of type '() => Promise<never[]>'
...@@ -469,23 +401,17 @@ describe('options picker actions', () => { ...@@ -469,23 +401,17 @@ describe('options picker actions', () => {
.whenActionIsDispatched(showOptions(variable)) .whenActionIsDispatched(showOptions(variable))
.whenAsyncActionIsDispatched(toggleAndFetchTag(tag), true); .whenAsyncActionIsDispatched(toggleAndFetchTag(tag), true);
tester.thenDispatchedActionsPredicateShouldEqual(actions => { tester.thenDispatchedActionsShouldEqual(toggleTag({ ...tag, values: ['b'] }));
const [toggleTagAction] = actions;
const expectedNumberOfActions = 1;
expect(toggleTagAction).toEqual(toggleTag({ ...tag, values: ['b'] }));
return actions.length === expectedNumberOfActions;
});
}); });
}); });
}); });
function createVariable(extend?: Partial<QueryVariableModel>): QueryVariableModel { function createMultiVariable(extend?: Partial<QueryVariableModel>): QueryVariableModel {
return { return {
type: 'query', type: 'query',
id: '0', id: '0',
global: false, global: false,
current: createOption(''), current: createOption([]),
options: [], options: [],
query: 'options-query', query: 'options-query',
name: 'Constant', name: 'Constant',
...@@ -508,7 +434,7 @@ function createVariable(extend?: Partial<QueryVariableModel>): QueryVariableMode ...@@ -508,7 +434,7 @@ function createVariable(extend?: Partial<QueryVariableModel>): QueryVariableMode
}; };
} }
function createOption(text: string, value?: string, selected?: boolean) { function createOption(text: string | string[], value?: string | string[], selected?: boolean) {
const metric = createMetric(text); const metric = createMetric(text);
return { return {
...metric, ...metric,
...@@ -517,7 +443,7 @@ function createOption(text: string, value?: string, selected?: boolean) { ...@@ -517,7 +443,7 @@ function createOption(text: string, value?: string, selected?: boolean) {
}; };
} }
function createMetric(value: string) { function createMetric(value: string | string[]) {
return { return {
value: value, value: value,
text: value, text: value,
......
public/app/features/variables/pickers/OptionsPicker/actions.ts
...@@ -183,7 +183,7 @@ function mapToCurrent(picker: OptionsPickerState): VariableOption | undefined { ...@@ -183,7 +183,7 @@ function mapToCurrent(picker: OptionsPickerState): VariableOption | undefined {
return { return {
value: values, value: values,
text: texts.join(' + '), text: texts,
tags: picker.tags.filter(t => t.selected), tags: picker.tags.filter(t => t.selected),
selected: true, selected: true,
}; };
......
public/app/features/variables/state/sharedReducer.test.ts
...@@ -290,7 +290,7 @@ describe('sharedReducer', () => { ...@@ -290,7 +290,7 @@ describe('sharedReducer', () => {
{ selected: true, text: 'A', value: 'A' }, { selected: true, text: 'A', value: 'A' },
{ selected: true, text: 'B', value: 'B' }, { selected: true, text: 'B', value: 'B' },
], ],
current: { selected: true, text: 'A + B', value: ['A', 'B'] }, current: { selected: true, text: ['A', 'B'], value: ['A', 'B'] },
} as unknown) as QueryVariableModel, } as unknown) as QueryVariableModel,
}); });
}); });
......
public/app/features/variables/state/sharedReducer.ts
...@@ -4,7 +4,7 @@ import { default as lodashDefaults } from 'lodash/defaults'; ...@@ -4,7 +4,7 @@ import { default as lodashDefaults } from 'lodash/defaults';
import { VariableType } from '@grafana/data'; import { VariableType } from '@grafana/data';
import { VariableModel, VariableOption, VariableWithOptions } from '../types'; import { VariableModel, VariableOption, VariableWithOptions } from '../types';
import { AddVariable, ALL_VARIABLE_VALUE, getInstanceState, NEW_VARIABLE_ID, VariablePayload } from './types'; import { AddVariable, getInstanceState, NEW_VARIABLE_ID, VariablePayload } from './types';
import { variableAdapters } from '../adapters'; import { variableAdapters } from '../adapters';
import { changeVariableNameSucceeded } from '../editor/reducer'; import { changeVariableNameSucceeded } from '../editor/reducer';
import { Deferred } from '../../../core/utils/deferred'; import { Deferred } from '../../../core/utils/deferred';
...@@ -124,12 +124,6 @@ const sharedReducerSlice = createSlice({ ...@@ -124,12 +124,6 @@ const sharedReducerSlice = createSlice({
const instanceState = getInstanceState<VariableWithOptions>(state, action.payload.id); const instanceState = getInstanceState<VariableWithOptions>(state, action.payload.id);
const current = { ...action.payload.data.option }; const current = { ...action.payload.data.option };
if (Array.isArray(current.text) && current.text.length > 0) {
current.text = current.text.join(' + ');
} else if (Array.isArray(current.value) && current.value[0] !== ALL_VARIABLE_VALUE) {
current.text = current.value.join(' + ');
}
instanceState.current = current; instanceState.current = current;
instanceState.options = instanceState.options.map(option => { instanceState.options = instanceState.options.map(option => {
let selected = false; let selected = false;
......
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