Template Variable: Datasource variable can be used when MIXED option is selected in panel query (#51170)

* user essentials mob! 🔱

* user essentials mob! 🔱

lastFile:public/app/features/query/components/QueryEditorRowHeader.test.tsx

* user essentials mob! 🔱

* test variables showing in data source picker dropdown on MIXED

* clean up unused imports

* remove comment

* remove unused mock

Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: joshhunt <josh@trtr.co>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/features/query/components/QueryEditorRowHeader.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { openMenu } from 'react-select-event';
 
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -13,11 +14,16 @@ const mockDS = mockDataSource({
   type: DataSourceType.Alertmanager,
 });
 
+const mockVariable = mockDataSource({
+  name: '${dsVariable}',
+  type: 'datasource',
+});
+
 jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
   return {
     getDataSourceSrv: () => ({
       get: () => Promise.resolve(mockDS),
-      getList: () => [mockDS],
+      getList: ({ variables }: { variables: boolean }) => (variables ? [mockDS, mockVariable] : [mockDS]),
       getInstanceSettings: () => mockDS,
     }),
   };
@@ -68,6 +74,14 @@ describe('QueryEditorRowHeader', () => {
 
     expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull();
   });
+
+  it('should render variables in the data source picker', async () => {
+    renderScenario({ onChangeDataSource: () => {} });
+
+    const dsSelect = screen.getByLabelText(selectors.components.DataSourcePicker.inputV2);
+    openMenu(dsSelect);
+    expect(await screen.findByText('${dsVariable}')).toBeInTheDocument();
+  });
 });
 
 function renderScenario(overrides: Partial<Props>) {

public/app/features/query/components/QueryEditorRowHeader.tsx

@@ -140,7 +140,7 @@ const renderDataSource = <TQuery extends DataQuery>(
 
   return (
     <div className={styles.itemWrapper}>
-      <DataSourcePicker alerting={alerting} current={dataSource.name} onChange={onChangeDataSource} />
+      <DataSourcePicker variables={true} alerting={alerting} current={dataSource.name} onChange={onChangeDataSource} />
     </div>
   );
 };