TestData: Remove useEffect that triggeres query on component load (#28321)

* TestData: Remove useEffect that triggeres query on component load

* Updated

* Update e2e spec

e2e/suite1/specs/explore.spec.ts

@@ -11,9 +11,20 @@ e2e.scenario({
     e2e.pages.Explore.General.container().should('have.length', 1);
     e2e.pages.Explore.General.container().should('have.length', 1);
     e2e.pages.Explore.General.runButton().should('have.length', 1);
     e2e.pages.Explore.General.runButton().should('have.length', 1);
 
 
+    e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .click();
+
+        cy.contains('CSV Metric Values')
+          .scrollIntoView()
+          .should('be.visible')
+          .click();
+      });
+
     const canvases = e2e().get('canvas');
     const canvases = e2e().get('canvas');
     canvases.should('have.length', 2);
     canvases.should('have.length', 2);
-
-    e2e.components.DataSource.TestData.QueryTab.noise().should('have.length', 1);
   },
   },
 });
 });

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

 // Libraries
 // Libraries
-import React, { ChangeEvent, FormEvent, useMemo, useEffect } from 'react';
+import React, { ChangeEvent, FormEvent, useMemo } from 'react';
 import { useAsync } from 'react-use';
 import { useAsync } from 'react-use';
 
 
 // Components
 // Components
@@ -46,10 +46,6 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
     onRunQuery();
     onRunQuery();
   };
   };
 
 
-  useEffect(() => {
-    onUpdate(query);
-  }, []);
-
   const currentScenario = useMemo(() => scenarioList?.find(scenario => scenario.id === query.scenarioId), [
   const currentScenario = useMemo(() => scenarioList?.find(scenario => scenario.id === query.scenarioId), [
     scenarioList,
     scenarioList,
     query,
     query,

public/app/plugins/datasource/testdata/datasource.ts

@@ -29,6 +29,8 @@ import { getSearchFilterScopedVar } from 'app/features/variables/utils';
 type TestData = TimeSeries | TableData;
 type TestData = TimeSeries | TableData;
 
 
 export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
 export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
+  scenariosCache?: Promise<Scenario[]>;
+
   constructor(
   constructor(
     instanceSettings: DataSourceInstanceSettings,
     instanceSettings: DataSourceInstanceSettings,
     private readonly templateSrv: TemplateSrv = getTemplateSrv()
     private readonly templateSrv: TemplateSrv = getTemplateSrv()
@@ -169,7 +171,11 @@ export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
   }
   }
 
 
   getScenarios(): Promise<Scenario[]> {
   getScenarios(): Promise<Scenario[]> {
-    return getBackendSrv().get('/api/tsdb/testdata/scenarios');
+    if (!this.scenariosCache) {
+      this.scenariosCache = getBackendSrv().get('/api/tsdb/testdata/scenarios');
+    }
+
+    return this.scenariosCache;
   }
   }
 
 
   metricFindQuery(query: string, options: any) {
   metricFindQuery(query: string, options: any) {

public/app/plugins/panel/graph2/getGraphSeriesModel.ts

@@ -19,6 +19,7 @@ import {
   getFieldDisplayName,
   getFieldDisplayName,
 } from '@grafana/data';
 } from '@grafana/data';
 
 
+import { config } from 'app/core/config';
 import { SeriesOptions, GraphOptions, GraphLegendEditorLegendOptions } from './types';
 import { SeriesOptions, GraphOptions, GraphLegendEditorLegendOptions } from './types';
 
 
 export const getGraphSeriesModel = (
 export const getGraphSeriesModel = (
@@ -38,6 +39,7 @@ export const getGraphSeriesModel = (
         decimals: legendOptions.decimals,
         decimals: legendOptions.decimals,
       },
       },
     },
     },
+    theme: config.theme,
     timeZone,
     timeZone,
   });
   });
 
 
@@ -104,7 +106,7 @@ export const getGraphSeriesModel = (
             }
             }
           : { ...field.config, color };
           : { ...field.config, color };
 
 
-        field.display = getDisplayProcessor({ field, timeZone });
+        field.display = getDisplayProcessor({ field, timeZone, theme: config.theme });
 
 
         // Time step is used to determine bars width when graph is rendered as bar chart
         // Time step is used to determine bars width when graph is rendered as bar chart
         const timeStep = getSeriesTimeStep(timeField);
         const timeStep = getSeriesTimeStep(timeField);
@@ -119,6 +121,7 @@ export const getGraphSeriesModel = (
               unit: systemDateFormats.getTimeFieldUnit(useMsDateFormat),
               unit: systemDateFormats.getTimeFieldUnit(useMsDateFormat),
             },
             },
           },
           },
+          theme: config.theme,
         });
         });
 
 
         graphs.push({
         graphs.push({