MixedDataSource: Name is updated when data source variable changes (#32090)

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}

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(),

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 && (