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

public/app/features/variables/pickers/OptionsPicker/actions.ts

@@ -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', () => {
               { 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';
 
 
 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({
       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;