Datasources: Propagate TestDataDB default selection to PanelModel

e2e/various-suite/explore.spec.ts

@@ -46,6 +46,20 @@ e2e.scenario({
 
     // Both queries above should have been run and be shown in the query history
     e2e.components.QueryTab.queryHistoryButton().should('be.visible').click();
-    e2e.components.QueryHistory.queryText().should('have.length', 2).should('contain', 'csv_metric_values');
+    e2e.components.QueryHistory.queryText()
+      .should('have.length.gte', 3)
+      .should('contain', 'csv_metric_values')
+      .should('contain', 'random_walk');
+    // Latest three queries should be [csv_metric_values, csv_metric_values, random_walk]
+    e2e.components.QueryHistory.queryText().each(($el, i) => {
+      if (i === 0 || i === 1) {
+        expect($el.text()).to.equal('csv_metric_values');
+      } else if (i === 2) {
+        expect($el.text()).to.equal('random_walk');
+      } else {
+        return false;
+      }
+      return true;
+    });
   },
 });

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FormEvent, useMemo } from 'react';
+import React, { ChangeEvent, FormEvent, useMemo, useEffect } from 'react';
 import { useAsync } from 'react-use';
 
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
@@ -39,6 +39,7 @@ export interface EditorProps {
 export type Props = QueryEditorProps<TestDataDataSource, TestDataQuery>;
 
 export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props) => {
+  const origQuery = query;
   query = { ...defaultQuery, ...query };
 
   const { loading, value: scenarioList } = useAsync(async () => {
@@ -75,11 +76,11 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
   );
   const scenarioId = currentScenario?.id;
   const description = currentScenario?.description;
-
   const onScenarioChange = (item: SelectableValue<string>) => {
     const scenario = scenarioList?.find((sc) => sc.id === item.value);
 
-    if (!scenario) {
+    // only fire this is the scenario has actually changed
+    if (!scenario || origQuery.scenarioId === scenario.id) {
       return;
     }
 
@@ -172,6 +173,16 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
   );
   const showLabels = useMemo(() => showLabelsFor.includes(query.scenarioId ?? ''), [query]);
 
+  const selectedValue = options.find((item) => item.value === query.scenarioId);
+  useEffect(() => {
+    if (selectedValue) {
+      // This updates the panel model with the default scenario
+      onScenarioChange(selectedValue);
+    }
+    // Adding a dependency on onScenarioChange causes an infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedValue]);
+
   if (loading) {
     return null;
   }
@@ -183,7 +194,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
           <Select
             inputId={`test-data-scenario-select-${query.refId}`}
             options={options}
-            value={options.find((item) => item.value === query.scenarioId)}
+            value={selectedValue}
             onChange={onScenarioChange}
             width={32}
           />