From 6bfe5ccf3e1d69dbad41f07e8d5732985cdefdb5 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 19 Mar 2021 06:03:36 +0000
Subject: [PATCH] MixedDataSource: Name is updated when data source variable
 changes (#32090) (#32144)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit f8d53887585a4ef9f7774319621aac5f4e546026)

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
---
 .../features/query/components/QueryEditorRow.tsx  | 15 ++++++++-------
 .../query/components/QueryEditorRowTitle.test.tsx |  3 +--
 .../query/components/QueryEditorRowTitle.tsx      |  8 +++-----
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 3fe2fedced3..285d5d249de 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -4,20 +4,20 @@ import classNames from 'classnames';
 import _ from 'lodash';
 // Utils & Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { AngularComponent, getAngularLoader } from '@grafana/runtime';
+import { AngularComponent, getAngularLoader, getTemplateSrv } from '@grafana/runtime';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { ErrorBoundaryAlert, HorizontalGroup, InfoBox } from '@grafana/ui';
 import {
   DataQuery,
   DataSourceApi,
+  DataSourceInstanceSettings,
+  EventBusExtended,
+  EventBusSrv,
   LoadingState,
   PanelData,
   PanelEvents,
   TimeRange,
   toLegacyResponseData,
-  EventBusExtended,
-  DataSourceInstanceSettings,
-  EventBusSrv,
 } from '@grafana/data';
 import { QueryEditorRowTitle } from './QueryEditorRowTitle';
 import {
@@ -302,15 +302,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   renderTitle = (props: QueryOperationRowRenderProps) => {
     const { query, dsSettings, onChange, queries } = this.props;
-    const { datasource } = this.state;
+    const dataSourceName = dsSettings.meta.mixed
+      ? getTemplateSrv().replace(this.getQueryDataSourceIdentifier() ?? '')
+      : undefined;
     const isDisabled = query.hide;
 
     return (
       <QueryEditorRowTitle
         query={query}
         queries={queries}
-        inMixedMode={dsSettings.meta.mixed}
-        dataSourceName={datasource!.name}
+        dataSourceName={dataSourceName}
         disabled={isDisabled}
         onClick={(e) => this.onToggleEditMode(e, props)}
         onChange={onChange}
diff --git a/public/app/features/query/components/QueryEditorRowTitle.test.tsx b/public/app/features/query/components/QueryEditorRowTitle.test.tsx
index 59c6bbc4266..e5d61830df8 100644
--- a/public/app/features/query/components/QueryEditorRowTitle.test.tsx
+++ b/public/app/features/query/components/QueryEditorRowTitle.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { QueryEditorRowTitle, Props } from './QueryEditorRowTitle';
+import { Props, QueryEditorRowTitle } from './QueryEditorRowTitle';
 
 function renderScenario(overrides: Partial<Props>) {
   const props: Props = {
@@ -16,7 +16,6 @@ function renderScenario(overrides: Partial<Props>) {
       },
     ],
     dataSourceName: 'hello',
-    inMixedMode: false,
     disabled: false,
     onChange: jest.fn(),
     onClick: jest.fn(),
diff --git a/public/app/features/query/components/QueryEditorRowTitle.tsx b/public/app/features/query/components/QueryEditorRowTitle.tsx
index a1b5cf52c85..4776c380c01 100644
--- a/public/app/features/query/components/QueryEditorRowTitle.tsx
+++ b/public/app/features/query/components/QueryEditorRowTitle.tsx
@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { css, cx } from 'emotion';
 import { DataQuery, GrafanaTheme } from '@grafana/data';
-import { Icon, Input, stylesFactory, useTheme, FieldValidationMessage } from '@grafana/ui';
+import { FieldValidationMessage, Icon, Input, stylesFactory, useTheme } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 export interface Props {
   query: DataQuery;
   queries: DataQuery[];
-  dataSourceName: string;
-  inMixedMode?: boolean;
+  dataSourceName?: string;
   disabled?: boolean;
   onChange: (query: DataQuery) => void;
   onClick: (e: React.MouseEvent) => void;
@@ -17,7 +16,6 @@ export interface Props {
 
 export const QueryEditorRowTitle: React.FC<Props> = ({
   dataSourceName,
-  inMixedMode,
   disabled,
   query,
   queries,
@@ -116,7 +114,7 @@ export const QueryEditorRowTitle: React.FC<Props> = ({
           {validationError && <FieldValidationMessage horizontal>{validationError}</FieldValidationMessage>}
         </>
       )}
-      {inMixedMode && <em className={styles.contextInfo}> ({dataSourceName})</em>}
+      {dataSourceName && <em className={styles.contextInfo}> ({dataSourceName})</em>}
       {disabled && <em className={styles.contextInfo}> Disabled</em>}
 
       {collapsedText && (