TemplateVariables: make sure we handle multi/single value with correct data type (#23208)

* Fixed issue with multi value.

* Made some refactorings after feedback from Torkel and Hugo.

* minor refactorings.

* changed so we don't make the current value to array if multi is false.

* added snapshot to contain v23.

* Fixed so we always use the correct type when setting value for multi/non-multi.

* added some more tests.

* added tests.

* some small adjustments after feedback

public/app/features/variables/query/QueryVariableEditor.tsx

@@ -13,6 +13,7 @@ import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { StoreState } from '../../../types';
 import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
 import { toVariableIdentifier } from '../state/types';
+import { changeVariableMultiValue } from '../state/actions';
 
 export interface OwnProps extends VariableEditorProps<QueryVariableModel> {}
 
@@ -24,6 +25,7 @@ interface DispatchProps {
   initQueryVariableEditor: typeof initQueryVariableEditor;
   changeQueryVariableDataSource: typeof changeQueryVariableDataSource;
   changeQueryVariableQuery: typeof changeQueryVariableQuery;
+  changeVariableMultiValue: typeof changeVariableMultiValue;
 }
 
 type Props = OwnProps & ConnectedProps & DispatchProps;
@@ -237,7 +239,11 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
           </div>
         </div>
 
-        <SelectionOptionsEditor variable={this.props.variable} onPropChange={this.onSelectionOptionsChange} />
+        <SelectionOptionsEditor
+          variable={this.props.variable}
+          onPropChange={this.onSelectionOptionsChange}
+          onMultiChanged={this.props.changeVariableMultiValue}
+        />
 
         <div className="gf-form-group">
           <h5>Value groups/tags (Experimental feature)</h5>
@@ -300,6 +306,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
   initQueryVariableEditor,
   changeQueryVariableDataSource,
   changeQueryVariableQuery,
+  changeVariableMultiValue,
 };
 
 export const QueryVariableEditor = connectWithStore(