From 665da5d063d0880db660fb8d4bcd179c2553195a Mon Sep 17 00:00:00 2001
From: polibb <13227501+polibb@users.noreply.github.com>
Date: Tue, 21 Jun 2022 17:46:52 +0300
Subject: [PATCH] Template Variable: Datasource variable can be used when MIXED
 option is selected in panel query  (#51170)

* user essentials mob! :trident:

* user essentials mob! :trident:

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

* user essentials mob! :trident:

* 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>
---
 .../components/QueryEditorRowHeader.test.tsx     | 16 +++++++++++++++-
 .../query/components/QueryEditorRowHeader.tsx    |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/app/features/query/components/QueryEditorRowHeader.test.tsx b/public/app/features/query/components/QueryEditorRowHeader.test.tsx
index 3b3a7367867..4a876b4b4cc 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.test.tsx
+++ b/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>) {
diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index 20c8d86e900..144401ccf0d 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/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>
   );
 };