diff --git a/.prettierignore b/.prettierignore
index 336d03e2551..eb6e109a005 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,4 +6,4 @@ node_modules
 public/vendor/
 vendor/
 data/
-
+e2e/tmp
diff --git a/e2e/shared/smokeTestScenario.ts b/e2e/shared/smokeTestScenario.ts
index fdfbab68fa1..adaf2dde076 100644
--- a/e2e/shared/smokeTestScenario.ts
+++ b/e2e/shared/smokeTestScenario.ts
@@ -11,7 +11,18 @@ export const smokeTestScenario = {
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
     e2e.pages.AddDashboard.addNewPanel().click();
 
-    e2e.components.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values');
+    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();
+      });
 
     // Make sure the graph renders via checking legend
     e2e.components.Panels.Visualization.Graph.Legend.legendItemAlias('A-series').should('be.visible');
diff --git a/e2e/suite1/specs/panelEdit_queries.spec.ts b/e2e/suite1/specs/panelEdit_queries.spec.ts
index 486e486a232..43d77d9ba41 100644
--- a/e2e/suite1/specs/panelEdit_queries.spec.ts
+++ b/e2e/suite1/specs/panelEdit_queries.spec.ts
@@ -69,9 +69,20 @@ e2e.scenario({
     });
 
     // Change to CSV Metric Values scenario for A
-    e2e.components.DataSource.TestData.QueryTab.scenarioSelect()
-      .eq(1)
-      .select('CSV Metric Values');
+    e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .eq(0)
+          .should('be.visible')
+          .click();
+
+        cy.contains('CSV Metric Values')
+          .scrollIntoView()
+          .should('be.visible')
+          .eq(0)
+          .click();
+      });
 
     e2e().wait('@apiPostQuery');
 
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 61fa2922ecf..2e6973ac4b8 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -4,6 +4,7 @@ export const Components = {
   DataSource: {
     TestData: {
       QueryTab: {
+        scenarioSelectContainer: 'Test Data Query scenario select container',
         scenarioSelect: 'Test Data Query scenario select',
         max: 'TestData max',
         min: 'TestData min',
diff --git a/public/app/plugins/datasource/testdata/QueryEditor.test.tsx b/public/app/plugins/datasource/testdata/QueryEditor.test.tsx
new file mode 100644
index 00000000000..84e2dd4077c
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/QueryEditor.test.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { defaultQuery } from './constants';
+import { QueryEditor, Props } from './QueryEditor';
+import { scenarios } from './__mocks__/scenarios';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const mockOnChange = jest.fn();
+const props = {
+  onRunQuery: jest.fn(),
+  query: defaultQuery,
+  onChange: mockOnChange,
+  datasource: {
+    getScenarios: () => Promise.resolve(scenarios),
+  } as any,
+};
+
+const setup = (testProps?: Partial<Props>) => {
+  const editorProps = { ...props, ...testProps };
+  return render(<QueryEditor {...editorProps} />);
+};
+
+describe('Test Datasource Query Editor', () => {
+  it('should render with default scenario', async () => {
+    setup();
+
+    expect(await screen.findByText(/random walk/i)).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Alias' })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Labels' })).toBeInTheDocument();
+  });
+
+  it('should switch scenario and display its default values', async () => {
+    const { rerender } = setup();
+
+    let select = (await screen.findByText('Scenario')).nextSibling!;
+    await fireEvent.keyDown(select, { keyCode: 40 });
+    const scs = screen.getAllByLabelText('Select option');
+
+    expect(scs).toHaveLength(scenarios.length);
+
+    await userEvent.click(screen.getByText('CSV Metric Values'));
+    expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({ scenarioId: 'csv_metric_values' }));
+    await rerender(
+      <QueryEditor
+        {...props}
+        query={{ ...defaultQuery, scenarioId: 'csv_metric_values', stringInput: '1,20,90,30,5,0' }}
+      />
+    );
+    expect(await screen.findByRole('textbox', { name: /string input/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /string input/i })).toHaveValue('1,20,90,30,5,0');
+
+    await fireEvent.keyDown(select, { keyCode: 40 });
+    await userEvent.click(screen.getByText('Grafana API'));
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({ scenarioId: 'grafana_api', stringInput: 'datasources' })
+    );
+    rerender(
+      <QueryEditor {...props} query={{ ...defaultQuery, scenarioId: 'grafana_api', stringInput: 'datasources' }} />
+    );
+    expect(await screen.findByText('Grafana API')).toBeInTheDocument();
+    expect(screen.getByText('Data Sources')).toBeInTheDocument();
+
+    await fireEvent.keyDown(select, { keyCode: 40 });
+    await userEvent.click(screen.getByText('Streaming Client'));
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({ scenarioId: 'streaming_client', stringInput: '' })
+    );
+    rerender(<QueryEditor {...props} query={{ ...defaultQuery, scenarioId: 'streaming_client', stringInput: '' }} />);
+    expect(await screen.findByText('Streaming Client')).toBeInTheDocument();
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByLabelText('Noise')).toHaveValue(2.2);
+    expect(screen.getByLabelText('Speed (ms)')).toHaveValue(250);
+    expect(screen.getByLabelText('Spread')).toHaveValue(3.5);
+    expect(screen.getByLabelText('Bands')).toHaveValue(1);
+  });
+});
diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx
index 822a39c749b..f3cb7592522 100644
--- a/public/app/plugins/datasource/testdata/QueryEditor.tsx
+++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx
@@ -1,67 +1,231 @@
 // Libraries
-import React, { PureComponent } from 'react';
-import _ from 'lodash';
-
-// Services & Utils
-import { getBackendSrv } from '@grafana/runtime';
+import React, { ChangeEvent, FormEvent, useMemo, useEffect } from 'react';
+import { useAsync } from 'react-use';
 
 // Components
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+import { selectors as editorSelectors } from '@grafana/e2e-selectors';
+import { Input, InlineFieldRow, InlineField, Select, TextArea, Switch } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import { StreamingClientEditor, ManualEntryEditor, RandomWalkEditor } from './components';
 
 // Types
 import { TestDataDataSource } from './datasource';
 import { TestDataQuery, Scenario } from './types';
+import { PredictablePulseEditor } from './components/PredictablePulseEditor';
+import { CSVWaveEditor } from './components/CSVWaveEditor';
+import { defaultQuery } from './constants';
 
-interface State {
-  scenarioList: Scenario[];
-  current: Scenario | null;
+const showLabelsFor = ['random_walk', 'predictable_pulse', 'predictable_csv_wave'];
+const endpoints = [
+  { value: 'datasources', label: 'Data Sources' },
+  { value: 'search', label: 'Search' },
+  { value: 'annotations', label: 'Annotations' },
+];
+
+// Fields that need to be transformed to numbers
+const numberFields = ['lines', 'seriesCount', 'timeStep'];
+
+const selectors = editorSelectors.components.DataSource.TestData.QueryTab;
+
+export interface EditorProps {
+  onChange: (value: any) => void;
+  query: TestDataQuery;
 }
 
-type Props = QueryEditorProps<TestDataDataSource, TestDataQuery>;
+export type Props = QueryEditorProps<TestDataDataSource, TestDataQuery>;
 
-export class QueryEditor extends PureComponent<Props> {
-  backendSrv = getBackendSrv();
+export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props) => {
+  query = { ...defaultQuery, ...query };
 
-  state: State = {
-    scenarioList: [],
-    current: null,
+  const { loading, value: scenarioList } = useAsync<Scenario[]>(async () => {
+    return datasource.getScenarios();
+  }, []);
+
+  const onUpdate = (query: TestDataQuery) => {
+    onChange(query);
+    onRunQuery();
   };
 
-  async componentDidMount() {
-    const { query, datasource } = this.props;
+  useEffect(() => {
+    onUpdate(query);
+  }, []);
 
-    query.scenarioId = query.scenarioId || 'random_walk';
+  const currentScenario = useMemo(() => scenarioList?.find(scenario => scenario.id === query.scenarioId), [
+    scenarioList,
+    query,
+  ]);
+  const scenarioId = currentScenario?.id;
 
-    // const scenarioList = await backendSrv.get('/api/tsdb/testdata/scenarios');
-    const scenarioList = await datasource.getScenarios();
-    const current: any = _.find(scenarioList, { id: query.scenarioId });
+  const onScenarioChange = (item: SelectableValue<string>) => {
+    const scenario = scenarioList?.find(sc => sc.id === item.value);
 
-    this.setState({ scenarioList: scenarioList, current: current });
-  }
+    if (!scenario) {
+      return;
+    }
 
-  onScenarioChange = (item: SelectableValue<string>) => {
-    this.props.onChange({
-      ...this.props.query,
+    let stringInput = scenario.stringInput ?? '';
+
+    if (scenario.id === 'grafana_api') {
+      stringInput = 'datasources';
+    }
+
+    onUpdate({
+      ...query,
       scenarioId: item.value!,
+      stringInput,
     });
   };
 
-  render() {
-    const { query } = this.props;
-    const options = this.state.scenarioList.map(item => ({ label: item.name, value: item.id }));
-    const current = options.find(item => item.value === query.scenarioId);
+  const onInputChange = (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target as HTMLInputElement | HTMLTextAreaElement;
+    let newValue: Partial<TestDataQuery> = { [name]: value };
 
-    return (
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel className="query-keyword" width={7}>
-            Scenario
-          </InlineFormLabel>
-          <Select options={options} value={current} onChange={this.onScenarioChange} />
-        </div>
-      </div>
-    );
+    if (name === 'levelColumn') {
+      newValue = { levelColumn: (e.target as HTMLInputElement).checked };
+    } else if (numberFields.includes(name)) {
+      newValue = { [name]: Number(value) };
+    }
+
+    onUpdate({ ...query, ...newValue });
+  };
+
+  const onFieldChange = (field: string) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target as HTMLInputElement;
+    const formattedValue = numberFields.includes(name) ? Number(value) : value;
+    onUpdate({ ...query, [field]: { ...query[field as keyof TestDataQuery], [name]: formattedValue } });
+  };
+
+  const onEndPointChange = ({ value }: SelectableValue) => {
+    onUpdate({ ...query, stringInput: value });
+  };
+
+  const onStreamClientChange = onFieldChange('stream');
+  const onPulseWaveChange = onFieldChange('pulseWave');
+  const onCSVWaveChange = onFieldChange('csvWave');
+
+  const options = useMemo(
+    () =>
+      (scenarioList || [])
+        .map(item => ({ label: item.name, value: item.id }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [scenarioList]
+  );
+  const showLabels = useMemo(() => showLabelsFor.includes(query.scenarioId), [query]);
+
+  if (loading) {
+    return null;
   }
-}
+
+  return (
+    <>
+      <InlineFieldRow aria-label={selectors.scenarioSelectContainer}>
+        <InlineField labelWidth={14} label="Scenario">
+          <Select
+            options={options}
+            value={options.find(item => item.value === query.scenarioId)}
+            onChange={onScenarioChange}
+            width={32}
+          />
+        </InlineField>
+        {currentScenario?.stringInput && (
+          <InlineField label="String Input">
+            <Input
+              width={32}
+              id="stringInput"
+              name="stringInput"
+              placeholder={query.stringInput}
+              value={query.stringInput}
+              onChange={onInputChange}
+            />
+          </InlineField>
+        )}
+        <InlineField label="Alias" labelWidth={14}>
+          <Input
+            width={32}
+            id="alias"
+            type="text"
+            placeholder="optional"
+            pattern='[^<>&\\"]+'
+            name="alias"
+            value={query.alias}
+            onChange={onInputChange}
+          />
+        </InlineField>
+        {showLabels && (
+          <InlineField
+            label="Labels"
+            labelWidth={14}
+            tooltip={
+              <>
+                Set labels using a key=value syntax:
+                <br />
+                {`{ key = "value", key2 = "value" }`}
+                <br />
+                key="value", key2="value"
+                <br />
+                key=value, key2=value
+                <br />
+              </>
+            }
+          >
+            <Input
+              width={32}
+              id="labels"
+              name="labels"
+              onChange={onInputChange}
+              value={query?.labels}
+              placeholder="key=value, key2=value2"
+            />
+          </InlineField>
+        )}
+      </InlineFieldRow>
+
+      {scenarioId === 'manual_entry' && <ManualEntryEditor onChange={onUpdate} query={query} onRunQuery={onRunQuery} />}
+      {scenarioId === 'random_walk' && <RandomWalkEditor onChange={onInputChange} query={query} />}
+      {scenarioId === 'streaming_client' && <StreamingClientEditor onChange={onStreamClientChange} query={query} />}
+      {scenarioId === 'logs' && (
+        <InlineFieldRow>
+          <InlineField label="Lines" labelWidth={14}>
+            <Input
+              type="number"
+              name="lines"
+              value={query.lines}
+              width={32}
+              onChange={onInputChange}
+              placeholder="10"
+            />
+          </InlineField>
+          <InlineField label="Level" labelWidth={14}>
+            <Switch onChange={onInputChange} name="levelColumn" value={!!query.levelColumn} />
+          </InlineField>
+        </InlineFieldRow>
+      )}
+
+      {scenarioId === 'grafana_api' && (
+        <InlineField labelWidth={14} label="Endpoint">
+          <Select
+            options={endpoints}
+            onChange={onEndPointChange}
+            width={32}
+            value={endpoints.find(ep => ep.value === query.stringInput)}
+          />
+        </InlineField>
+      )}
+
+      {scenarioId === 'arrow' && (
+        <InlineField grow>
+          <TextArea
+            name="stringInput"
+            value={query.stringInput}
+            rows={10}
+            placeholder="Copy base64 text data from query result"
+            onChange={onInputChange}
+          />
+        </InlineField>
+      )}
+
+      {scenarioId === 'predictable_pulse' && <PredictablePulseEditor onChange={onPulseWaveChange} query={query} />}
+      {scenarioId === 'predictable_csv_wave' && <CSVWaveEditor onChange={onCSVWaveChange} query={query} />}
+    </>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/__mocks__/scenarios.ts b/public/app/plugins/datasource/testdata/__mocks__/scenarios.ts
new file mode 100644
index 00000000000..809809d3b4c
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/__mocks__/scenarios.ts
@@ -0,0 +1,117 @@
+export const scenarios = [
+  {
+    description: '',
+    id: 'annotations',
+    name: 'Annotations',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'arrow',
+    name: 'Load Apache Arrow Data',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'csv_metric_values',
+    name: 'CSV Metric Values',
+    stringInput: '1,20,90,30,5,0',
+  },
+  {
+    description: '',
+    id: 'datapoints_outside_range',
+    name: 'Datapoints Outside Range',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'exponential_heatmap_bucket_data',
+    name: 'Exponential heatmap bucket data',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'grafana_api',
+    name: 'Grafana API',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'linear_heatmap_bucket_data',
+    name: 'Linear heatmap bucket data',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'logs',
+    name: 'Logs',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'manual_entry',
+    name: 'Manual Entry',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'no_data_points',
+    name: 'No Data Points',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'predictable_csv_wave',
+    name: 'Predictable CSV Wave',
+    stringInput: '',
+  },
+  {
+    description:
+      'Predictable Pulse returns a pulse wave where there is a datapoint every timeStepSeconds.\nThe wave cycles at timeStepSeconds*(onCount+offCount).\nThe cycle of the wave is based off of absolute time (from the epoch) which makes it predictable.\nTimestamps will line up evenly on timeStepSeconds (For example, 60 seconds means times will all end in :00 seconds).',
+    id: 'predictable_pulse',
+    name: 'Predictable Pulse',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'random_walk',
+    name: 'Random Walk',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'random_walk_table',
+    name: 'Random Walk Table',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'random_walk_with_error',
+    name: 'Random Walk (with error)',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'server_error_500',
+    name: 'Server Error (500)',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'slow_query',
+    name: 'Slow Query',
+    stringInput: '5s',
+  },
+  {
+    description: '',
+    id: 'streaming_client',
+    name: 'Streaming Client',
+    stringInput: '',
+  },
+  {
+    description: '',
+    id: 'table_static',
+    name: 'Table Static',
+    stringInput: '',
+  },
+];
diff --git a/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx b/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx
new file mode 100644
index 00000000000..88ed5d53ea6
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/CSVWaveEditor.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { EditorProps } from '../QueryEditor';
+import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
+
+const fields = [
+  {
+    label: 'Step',
+    type: 'number',
+    id: 'timeStep',
+    placeholder: '60',
+    tooltip: 'The number of seconds between datapoints.',
+  },
+  {
+    label: 'CSV Values',
+    type: 'text',
+    id: 'valuesCSV',
+    placeholder: '1,2,3,4',
+    tooltip:
+      'Comma separated values. Each value may be an int, float, or null and must not be empty. Whitespace and trailing commas are removed.',
+  },
+];
+export const CSVWaveEditor = ({ onChange, query }: EditorProps) => {
+  return (
+    <InlineFieldRow>
+      {fields.map(({ label, id, type, placeholder, tooltip }, index) => {
+        const grow = index === fields.length - 1;
+        return (
+          <InlineField label={label} labelWidth={14} key={id} tooltip={tooltip} grow={grow}>
+            <Input
+              width={grow ? undefined : 32}
+              type={type}
+              name={id}
+              id={`csvWave.${id}`}
+              value={query.csvWave?.[id]}
+              placeholder={placeholder}
+              onChange={onChange}
+            />
+          </InlineField>
+        );
+      })}
+    </InlineFieldRow>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/components/ManualEntryEditor.test.tsx b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.test.tsx
new file mode 100644
index 00000000000..a4cd36e4ddb
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.test.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ManualEntryEditor, Props } from './ManualEntryEditor';
+import { defaultQuery } from '../constants';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const mockOnChange = jest.fn();
+const setup = (testProps?: Partial<Props>) => {
+  const props = {
+    onRunQuery: jest.fn(),
+    query: defaultQuery,
+    onChange: mockOnChange,
+    ...testProps,
+  };
+
+  return render(<ManualEntryEditor {...props} />);
+};
+
+describe('ManualEntryEditor', () => {
+  it('should render', () => {
+    setup();
+
+    expect(screen.getByLabelText(/New value/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Time/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Add/i })).toBeInTheDocument();
+    expect(screen.getByText(/select point/i)).toBeInTheDocument();
+  });
+
+  it('should add new point', async () => {
+    setup();
+
+    userEvent.type(screen.getByLabelText(/New value/i), '10');
+    userEvent.clear(screen.getByLabelText(/Time/i));
+    userEvent.type(screen.getByLabelText(/Time/i), '2020-11-01T14:19:30+00:00');
+    userEvent.click(screen.getByRole('button', { name: /Add/i }));
+
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({ points: [[10, 1604240370000]] }));
+    });
+  });
+
+  it('should list selected points and delete selected ones', async () => {
+    const editor = setup({
+      query: {
+        ...defaultQuery,
+        points: [
+          [10, 1604240370000],
+          [15, 1604340370000],
+        ],
+      },
+    });
+    let select = screen.getByText('All values').nextSibling!;
+    await fireEvent.keyDown(select, { keyCode: 40 });
+    const points = screen.getAllByLabelText('Select option');
+    expect(points).toHaveLength(2);
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
+
+    await userEvent.click(points[0]);
+
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({ points: [[15, 1604340370000]] }));
+    });
+
+    editor.rerender(
+      <ManualEntryEditor
+        query={{
+          ...defaultQuery,
+          points: [[15, 1604340370000]],
+        }}
+        onChange={jest.fn()}
+        onRunQuery={jest.fn()}
+      />
+    );
+
+    select = screen.getByText('All values').nextSibling!;
+    await fireEvent.keyDown(select, { keyCode: 40 });
+    expect(screen.getAllByLabelText('Select option')).toHaveLength(1);
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
+  });
+});
diff --git a/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx
new file mode 100644
index 00000000000..2e0c0c38276
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/ManualEntryEditor.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { dateMath, dateTime, SelectableValue } from '@grafana/data';
+import { Form, InlineField, InlineFieldRow, Input, InputControl, Select, Button } from '@grafana/ui';
+import { EditorProps } from '../QueryEditor';
+import { NewPoint } from '../types';
+
+export interface Props extends EditorProps {
+  onRunQuery: () => void;
+}
+
+export const ManualEntryEditor = ({ onChange, query, onRunQuery }: Props) => {
+  const addPoint = (point: NewPoint) => {
+    const newPointTime = dateMath.parse(point.newPointTime);
+    const points = [...query.points, [Number(point.newPointValue), newPointTime!.valueOf()]].sort(
+      (a, b) => a[1] - b[1]
+    );
+    onChange({ ...query, points });
+    onRunQuery();
+  };
+
+  const deletePoint = (point: SelectableValue) => {
+    const points = query.points.filter((_, index) => index !== point.value);
+    onChange({ ...query, points });
+    onRunQuery();
+  };
+
+  const points = query.points.map((point, index) => {
+    return {
+      label: dateTime(point[1]).format('MMMM Do YYYY, H:mm:ss') + ' : ' + point[0],
+      value: index,
+    };
+  });
+
+  return (
+    <Form onSubmit={addPoint} maxWidth="none">
+      {({ register, control, watch }) => {
+        const selectedPoint = watch('selectedPoint') as SelectableValue;
+        return (
+          <InlineFieldRow>
+            <InlineField label="New value" labelWidth={14}>
+              <Input
+                width={32}
+                type="number"
+                placeholder="value"
+                id="newPointValue"
+                name="newPointValue"
+                ref={register}
+              />
+            </InlineField>
+            <InlineField label="Time" labelWidth={14}>
+              <Input
+                width={32}
+                id="newPointTime"
+                placeholder="time"
+                name="newPointTime"
+                ref={register}
+                defaultValue={dateTime().format()}
+              />
+            </InlineField>
+            <InlineField>
+              <Button variant="secondary">Add</Button>
+            </InlineField>
+            <InlineField label="All values">
+              <InputControl
+                control={control}
+                as={Select}
+                options={points}
+                width={32}
+                name="selectedPoint"
+                onChange={value => value[0]}
+                placeholder="Select point"
+              />
+            </InlineField>
+
+            {selectedPoint?.value !== undefined && (
+              <InlineField>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => {
+                    control.setValue('selectedPoint', [{ value: undefined, label: 'Select value' }]);
+                    deletePoint(selectedPoint);
+                  }}
+                >
+                  Delete
+                </Button>
+              </InlineField>
+            )}
+          </InlineFieldRow>
+        );
+      }}
+    </Form>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx b/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx
new file mode 100644
index 00000000000..17e1538214e
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx
@@ -0,0 +1,56 @@
+import React, { ChangeEvent } from 'react';
+import { EditorProps } from '../QueryEditor';
+import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
+import { PulseWaveQuery } from '../types';
+
+const fields = [
+  { label: 'Step', id: 'timeStep', placeholder: '60', tooltip: 'The number of seconds between datapoints.' },
+  {
+    label: 'On Count',
+    id: 'onCount',
+    placeholder: '3',
+    tooltip: 'The number of values within a cycle, at the start of the cycle, that should have the onValue.',
+  },
+  { label: 'Off Count', id: 'offCount', placeholder: '6', tooltip: 'The number of offValues within the cycle.' },
+  {
+    label: 'On Value',
+    id: 'onValue',
+    placeholder: '1',
+    tooltip: 'The value for "on values", may be an int, float, or null.',
+  },
+  {
+    label: 'Off Value',
+    id: 'offValue',
+    placeholder: '1',
+    tooltip: 'The value for "off values", may be a int, float, or null.',
+  },
+];
+
+export const PredictablePulseEditor = ({ onChange, query }: EditorProps) => {
+  // Convert values to numbers before saving
+  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    onChange({ target: { name, value: Number(value) } });
+  };
+
+  return (
+    <InlineFieldRow>
+      {fields.map(({ label, id, placeholder, tooltip }) => {
+        return (
+          <InlineField label={label} labelWidth={14} key={id} tooltip={tooltip}>
+            <Input
+              width={32}
+              type="number"
+              name={id}
+              id={`pulseWave.${id}`}
+              value={query.pulseWave?.[id as keyof PulseWaveQuery]}
+              placeholder={placeholder}
+              onChange={onInputChange}
+            />
+          </InlineField>
+        );
+      })}
+    </InlineFieldRow>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx b/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx
new file mode 100644
index 00000000000..0ff6a881836
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/RandomWalkEditor.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+import { EditorProps } from '../QueryEditor';
+import { TestDataQuery } from '../types';
+
+const randomWalkFields = [
+  { label: 'Series count', id: 'seriesCount', placeholder: '1', min: 1, step: 1 },
+  { label: 'Start value', id: 'startValue', placeholder: 'auto', step: 1 },
+  { label: 'Spread', id: 'spread', placeholder: '1', min: 0.5, step: 0.1 },
+  { label: 'Noise', id: 'noise', placeholder: '0', min: 0, step: 0.1 },
+  { label: 'Min', id: 'min', placeholder: 'none', step: 0.1 },
+  { label: 'Max', id: 'max', placeholder: 'none', step: 0.1 },
+];
+
+const testSelectors = selectors.components.DataSource.TestData.QueryTab;
+type Selector = 'max' | 'min' | 'noise' | 'seriesCount' | 'spread' | 'startValue';
+
+export const RandomWalkEditor = ({ onChange, query }: EditorProps) => {
+  return (
+    <InlineFieldRow>
+      {randomWalkFields.map(({ label, id, min, step, placeholder }) => {
+        const selector = testSelectors?.[id as Selector];
+        return (
+          <InlineField label={label} labelWidth={14} key={id} aria-label={selector}>
+            <Input
+              width={32}
+              name={id}
+              type="number"
+              id={id}
+              min={min}
+              step={step}
+              value={query[id as keyof TestDataQuery] || placeholder}
+              placeholder={placeholder}
+              onChange={onChange}
+            />
+          </InlineField>
+        );
+      })}
+    </InlineFieldRow>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
new file mode 100644
index 00000000000..409de1c9ab2
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx
@@ -0,0 +1,69 @@
+import React, { ChangeEvent } from 'react';
+import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { EditorProps } from '../QueryEditor';
+import { StreamingQuery } from '../types';
+
+const streamingClientFields = [
+  { label: 'Speed (ms)', id: 'speed', placeholder: 'value', min: 10, step: 10 },
+  { label: 'Spread', id: 'spread', placeholder: 'value', min: 0.5, step: 0.1 },
+  { label: 'Noise', id: 'noise', placeholder: 'value', min: 0, step: 0.1 },
+  { label: 'Bands', id: 'bands', placeholder: 'bands', min: 0, step: 1 },
+];
+
+const types = [
+  { value: 'signal', label: 'Signal' },
+  { value: 'logs', label: 'Logs' },
+  { value: 'fetch', label: 'Fetch' },
+];
+
+export const StreamingClientEditor = ({ onChange, query }: EditorProps) => {
+  const onSelectChange = ({ value }: SelectableValue) => {
+    onChange({ target: { name: 'type', value } });
+  };
+
+  // Convert values to numbers before saving
+  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    onChange({ target: { name, value: Number(value) } });
+  };
+
+  return (
+    <InlineFieldRow>
+      <InlineField label="Type" labelWidth={14}>
+        <Select width={32} onChange={onSelectChange} defaultValue={types[0]} options={types} />
+      </InlineField>
+      {query?.stream?.type === 'signal' &&
+        streamingClientFields.map(({ label, id, min, step, placeholder }) => {
+          return (
+            <InlineField label={label} labelWidth={14} key={id}>
+              <Input
+                width={32}
+                type="number"
+                id={`stream.${id}`}
+                name={id}
+                min={min}
+                step={step}
+                value={query.stream?.[id as keyof StreamingQuery]}
+                placeholder={placeholder}
+                onChange={onInputChange}
+              />
+            </InlineField>
+          );
+        })}
+
+      {query?.stream?.type === 'fetch' && (
+        <InlineField label="URL" labelWidth={14} grow>
+          <Input
+            type="text"
+            name="url"
+            id="stream.url"
+            value={query?.stream?.url}
+            placeholder="Fetch URL"
+            onChange={onChange}
+          />
+        </InlineField>
+      )}
+    </InlineFieldRow>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/components/index.ts b/public/app/plugins/datasource/testdata/components/index.ts
new file mode 100644
index 00000000000..49ca56025fe
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/components/index.ts
@@ -0,0 +1,3 @@
+export { StreamingClientEditor } from './StreamingClientEditor';
+export { ManualEntryEditor } from './ManualEntryEditor';
+export { RandomWalkEditor } from './RandomWalkEditor';
diff --git a/public/app/plugins/datasource/testdata/constants.ts b/public/app/plugins/datasource/testdata/constants.ts
new file mode 100644
index 00000000000..e83d0db47be
--- /dev/null
+++ b/public/app/plugins/datasource/testdata/constants.ts
@@ -0,0 +1,27 @@
+import { defaultQuery as defaultStreamQuery } from './runStreams';
+import { TestDataQuery } from './types';
+
+export const defaultPulse: any = {
+  timeStep: 60,
+  onCount: 3,
+  onValue: 2,
+  offCount: 3,
+  offValue: 1,
+};
+
+export const defaultCSVWave: any = {
+  timeStep: 60,
+  valuesCSV: '0,0,2,2,1,1',
+};
+
+export const defaultQuery: TestDataQuery = {
+  points: [],
+  stream: defaultStreamQuery,
+  pulseWave: defaultPulse,
+  csvWave: defaultCSVWave,
+  stringInput: '',
+  scenarioId: 'random_walk',
+  lines: 10,
+  refId: '',
+  alias: '',
+};
diff --git a/public/app/plugins/datasource/testdata/module.tsx b/public/app/plugins/datasource/testdata/module.tsx
index 2e059a20249..060e1d08699 100644
--- a/public/app/plugins/datasource/testdata/module.tsx
+++ b/public/app/plugins/datasource/testdata/module.tsx
@@ -1,8 +1,8 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { TestDataDataSource } from './datasource';
-import { TestDataQueryCtrl } from './query_ctrl';
 import { TestInfoTab } from './TestInfoTab';
 import { ConfigEditor } from './ConfigEditor';
+import { QueryEditor } from './QueryEditor';
 
 class TestDataAnnotationsQueryCtrl {
   annotation: any;
@@ -12,7 +12,7 @@ class TestDataAnnotationsQueryCtrl {
 
 export const plugin = new DataSourcePlugin(TestDataDataSource)
   .setConfigEditor(ConfigEditor)
-  .setQueryCtrl(TestDataQueryCtrl)
+  .setQueryEditor(QueryEditor)
   .setAnnotationQueryCtrl(TestDataAnnotationsQueryCtrl)
   .addConfigPage({
     title: 'Setup',
diff --git a/public/app/plugins/datasource/testdata/partials/query.editor.html b/public/app/plugins/datasource/testdata/partials/query.editor.html
deleted file mode 100644
index c89b0a11799..00000000000
--- a/public/app/plugins/datasource/testdata/partials/query.editor.html
+++ /dev/null
@@ -1,324 +0,0 @@
-<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Scenario</label>
-			<div class="gf-form-select-wrapper width-15">
-				<select class="gf-form-input" ng-model="ctrl.target.scenarioId" ng-options="v.id as v.name for v in ctrl.scenarioList" ng-change="ctrl.scenarioChanged()" aria-label={{ctrl.selectors.scenarioSelect}}></select>
-			</div>
-		</div>
-		<div class="gf-form gf-form gf-form--grow" ng-if="ctrl.scenario.stringInput">
-			<label class="gf-form-label query-keyword">String Input</label>
-      <input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Alias</label>
-			<input type="text" class="gf-form-input width-14" placeholder="optional" ng-model="ctrl.target.alias" ng-model-onblur ng-change="ctrl.refresh()" pattern='[^<>&\\"]+'>
-		</div>
-		<div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
-			<label class="gf-form-label query-keyword width-7">
-				Labels
-				<info-popover mode="right-normal">
-					Set labels using a key=value syntax:<br/>
-					{key="value", key2="value"}<br/>
-					key="value", key2="value"<br/>
-					key=value, key2=value<br/>
-				</info-popover>
-			</label>
-			<input type="text" class="gf-form-input gf-form--grow" placeholder='key=value, key2=value2' ng-model="ctrl.target.labels" ng-change="ctrl.refresh()" ng-model-onblur>
-		</div>
-		<div ng-if="!ctrl.showLabels" class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'manual_entry'">
-		<div class="gf-form gf-form">
-			<label class="gf-form-label query-keyword width-7">New value</label>
-      <input type="number" class="gf-form-input width-15" placeholder="value" ng-model="ctrl.newPointValue">
-			<label class="gf-form-label query-keyword">Time</label>
-      <input type="string" class="gf-form-input width-12" placeholder="time" ng-model="ctrl.newPointTime">
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addPoint()">Add</button>
-			<label class="gf-form-label query-keyword">All values</label>
-			<gf-form-dropdown css-class="width-12" model="ctrl.selectedPoint" get-options="ctrl.getPoints()" on-change="ctrl.pointSelected($option)">
-			</gf-form-dropdown>
-		</div>
-		<div class="gf-form gf-form" ng-if="ctrl.selectedPoint.value !== null">
-			<button class="btn btn-danger gf-form-btn" ng-click="ctrl.deletePoint()">Delete</button>
-		</div>
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
-  <div class="gf-form-inline" ng-if="ctrl.scenario.id === 'random_walk'">
-    <div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Series count</label>
-			<input type="number"
-				class="gf-form-input width-15"
-				placeholder="1"
-				ng-model="ctrl.target.seriesCount"
-				min="1"
-				step="1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.seriesCount}}"
-			/>
-		</div>
-    <div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Start value</label>
-			<input type="number"
-				class="gf-form-input width-14"
-				placeholder="auto"
-				ng-model="ctrl.target.startValue"
-				step="1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.startValue}}"
-			/>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Spread</label>
-			<input type="number"
-				class="gf-form-input width-6"
-				placeholder="1"
-				ng-model="ctrl.target.spread"
-				min="0.5"
-				step="0.1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.spread}}"
-			/>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Noise</label>
-			<input type="number"
-				class="gf-form-input width-6"
-				placeholder="0"
-				ng-model="ctrl.target.noise"
-				min="0"
-				step="0.1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.noise}}"
-			/>
-		</div>
-    <div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Min</label>
-			<input type="number"
-				class="gf-form-input width-15"
-				placeholder="none"
-				ng-model="ctrl.target.min"
-				step="0.1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.min}}"
-			/>
-		</div>
-    <div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">Max</label>
-			<input type="number"
-				class="gf-form-input width-15"
-				placeholder="none"
-				ng-model="ctrl.target.max"
-				step="0.1"
-				ng-change="ctrl.refresh()"
-				aria-label="{{::ctrl.selectors.max}}"
-			/>
-		</div>
-  </div>
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'streaming_client'">
-		<div class="gf-form gf-form">
-			<label class="gf-form-label query-keyword width-7">Type</label>
-			<div class="gf-form-select-wrapper">
-				<select
-				  ng-model="ctrl.target.stream.type"
-				  class="gf-form-input"
-				  ng-options="type for type in ['signal','logs', 'fetch']"
-				  ng-change="ctrl.streamChanged()" ></select>
-			</div>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword">Speed (ms)</label>
-			<input type="number"
-				class="gf-form-input width-5"
-				placeholder="value"
-				ng-model="ctrl.target.stream.speed"
-				min="10"
-				step="10"
-				ng-change="ctrl.streamChanged()"
-				/>
-		</div>
-		<div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
-			<label class="gf-form-label query-keyword">Spread</label>
-			<input type="number"
-				class="gf-form-input width-5"
-				placeholder="value"
-				ng-model="ctrl.target.stream.spread"
-				min="0.5"
-				step="0.1"
-				ng-change="ctrl.streamChanged()" />
-		</div>
-		<div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
-			<label class="gf-form-label query-keyword">Noise</label>
-			<input type="number"
-				class="gf-form-input width-5"
-				placeholder="value"
-				ng-model="ctrl.target.stream.noise"
-				min="0"
-				step="0.1"
-				ng-change="ctrl.streamChanged()" />
-		</div>
-		<div class="gf-form" ng-if="ctrl.target.stream.type === 'signal'">
-			<label class="gf-form-label query-keyword">Bands</label>
-			<input type="number"
-				class="gf-form-input width-5"
-				placeholder="bands"
-				ng-model="ctrl.target.stream.bands"
-				min="0"
-				step="1"
-				ng-change="ctrl.streamChanged()" />
-		</div>
-		<div class="gf-form gf-form--grow" ng-if="ctrl.target.stream.type === 'fetch'">
-			<label class="gf-form-label query-keyword">URL</label>
-			<input type="string"
-				class="gf-form-input gf-form-label--grow"
-				placeholder="Fetch URL"
-				ng-model="ctrl.target.stream.url"
-				ng-change="ctrl.streamChanged()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
-
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'logs'">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword">Lines</label>
-			<input type="number"
-				class="gf-form-input width-5"
-				placeholder="10"
-				ng-model="ctrl.target.lines"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form">
-			<gf-form-switch class="gf-form" label="Level" label-class="query-keyword width-5" checked="ctrl.target.levelColumn" switch-class="max-width-6" on-change="ctrl.refresh()"></gf-form-switch>
-		</div>
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
-
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'grafana_api'">
-		<div class="gf-form gf-form">
-			<label class="gf-form-label query-keyword width-7">Endpoint</label>
-			<div class="gf-form-select-wrapper">
-				<select
-				  ng-model="ctrl.target.stringInput"
-				  class="gf-form-input"
-				  ng-options="type for type in ['datasources', 'search', 'annotations']"
-				  ng-change="ctrl.refresh()">
-				</select>
-			</div>
-		</div>
-	</div>
-
-
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'arrow'">
-		<div class="gf-form" style="width: 100%;">
-			<textarea type="string"
-				class="gf-form-input"
-				rows="10"
-				placeholder="copy base64 text data from query result"
-				ng-model="ctrl.target.stringInput"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur ></textarea>
-		</div>
-	</div>
-
-	<!-- Predictable Pulse Scenario Options Form -->
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_pulse'">
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				Step
-				<info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
-			</label>
-				<input type="number"
-				class="gf-form-input width-5"
-				placeholder="60"
-				ng-model="ctrl.target.pulseWave.timeStep"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				On Count
-				<info-popover mode="right-normal">The number of values within a cycle, at the start of the cycle, that should have the onValue.</info-popover>
-			</label>
-			<input type="number"
-				class="gf-form-input width-3"
-				placeholder="3"
-				ng-model="ctrl.target.pulseWave.onCount"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				Off Count
-				<info-popover mode="right-normal">The number of offValues within the cycle.</info-popover>
-			</label>
-			<input type="number"
-				class="gf-form-input width-3"
-				placeholder="6"
-				ng-model="ctrl.target.pulseWave.offCount"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				On Value
-				<info-popover mode="right-normal">The value for "on values", may be a int, float, or null.</info-popover>
-			</label>
-			<input type="string"
-				class="gf-form-input width-5"
-				placeholder="1"
-				ng-model="ctrl.target.pulseWave.onValue"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label query-keyword width-7">
-				Off Value
-				<info-popover mode="right-normal">The value for "off values", may be a int, float, or null.</info-popover>
-			</label>
-			<input type="string"
-				class="gf-form-input width-5"
-				placeholder="1"
-				ng-model="ctrl.target.pulseWave.offValue"
-				ng-change="ctrl.refresh()"
-				ng-model-onblur />
-		</div>
-	</div>
-
-	<!-- Predictable CSV Wave Scenario Options Form -->
-	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_csv_wave'">
-			<div class="gf-form">
-				<label class="gf-form-label query-keyword width-7">
-					Step
-					<info-popover mode="right-normal">The number of seconds between datapoints.</info-popover>
-				</label>
-					<input type="number"
-					class="gf-form-input width-5"
-					placeholder="60"
-					ng-model="ctrl.target.csvWave.timeStep"
-					ng-change="ctrl.refresh()"
-					ng-model-onblur />
-			</div>
-			<div class="gf-form gf-form--grow">
-					<label class="gf-form-label query-keyword width-10">
-							CSV Values
-							<info-popover mode="right-normal">Comma separated values. Each value may be an int, float, or null and must not be empty. Whitespace and trailing commas are removed.</info-popover>
-						</label>
-					<input type="string"
-						class="gf-form-input gf-form-label--grow"
-						placeholder="1,2,3,2"
-						ng-model="ctrl.target.csvWave.valuesCSV"
-						ng-change="ctrl.refresh()"
-						ng-model-onblur />
-				</div>
-		</div>
-</query-editor-row>
diff --git a/public/app/plugins/datasource/testdata/query_ctrl.ts b/public/app/plugins/datasource/testdata/query_ctrl.ts
deleted file mode 100644
index 2a2a6ea2467..00000000000
--- a/public/app/plugins/datasource/testdata/query_ctrl.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import _ from 'lodash';
-import { IScope } from 'angular';
-import { getBackendSrv } from '@grafana/runtime';
-import { dateMath, dateTime } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
-
-import { QueryCtrl } from 'app/plugins/sdk';
-import { defaultQuery } from './runStreams';
-import { promiseToDigest } from 'app/core/utils/promiseToDigest';
-
-export const defaultPulse: any = {
-  timeStep: 60,
-  onCount: 3,
-  onValue: 2,
-  offCount: 3,
-  offValue: 1,
-};
-
-export const defaultCSVWave: any = {
-  timeStep: 60,
-  valuesCSV: '0,0,2,2,1,1',
-};
-
-const showLabelsFor = ['random_walk', 'predictable_pulse', 'predictable_csv_wave'];
-
-export class TestDataQueryCtrl extends QueryCtrl {
-  static templateUrl = 'partials/query.editor.html';
-
-  scenarioList: any;
-  scenario: any;
-  newPointValue: number;
-  newPointTime: any;
-  selectedPoint: any;
-  digest: (promise: Promise<any>) => Promise<any>;
-
-  showLabels = false;
-  selectors: typeof selectors.components.DataSource.TestData.QueryTab;
-
-  /** @ngInject */
-  constructor($scope: IScope, $injector: any) {
-    super($scope, $injector);
-
-    this.target.scenarioId = this.target.scenarioId || 'random_walk';
-    this.scenarioList = [];
-    this.newPointTime = dateTime();
-    this.selectedPoint = { text: 'Select point', value: null };
-    this.showLabels = showLabelsFor.includes(this.target.scenarioId);
-    this.selectors = selectors.components.DataSource.TestData.QueryTab;
-  }
-
-  getPoints() {
-    return _.map(this.target.points, (point, index) => {
-      return {
-        text: dateTime(point[1]).format('MMMM Do YYYY, H:mm:ss') + ' : ' + point[0],
-        value: index,
-      };
-    });
-  }
-
-  pointSelected(option: any) {
-    this.selectedPoint = option;
-  }
-
-  deletePoint() {
-    this.target.points.splice(this.selectedPoint.value, 1);
-    this.selectedPoint = { text: 'Select point', value: null };
-    this.refresh();
-  }
-
-  addPoint() {
-    this.target.points = this.target.points || [];
-    this.newPointTime = dateMath.parse(this.newPointTime);
-    this.target.points.push([this.newPointValue, this.newPointTime.valueOf()]);
-    this.target.points = _.sortBy(this.target.points, p => p[1]);
-    this.refresh();
-  }
-
-  $onInit() {
-    return promiseToDigest(this.$scope)(
-      getBackendSrv()
-        .get('/api/tsdb/testdata/scenarios')
-        .then((res: any) => {
-          this.scenarioList = res;
-          this.scenario = _.find(this.scenarioList, { id: this.target.scenarioId });
-        })
-    );
-  }
-
-  scenarioChanged() {
-    this.scenario = _.find(this.scenarioList, { id: this.target.scenarioId });
-
-    if (this.target.scenarioId === 'manual_entry') {
-      this.target.points = this.target.points || [];
-    } else {
-      delete this.target.points;
-    }
-
-    if (this.target.scenarioId === 'streaming_client') {
-      this.target.stream = _.defaults(this.target.stream || {}, defaultQuery);
-    } else {
-      delete this.target.stream;
-    }
-
-    if (this.target.scenarioId === 'predictable_pulse') {
-      this.target.pulseWave = _.defaults(this.target.pulseWave || {}, defaultPulse);
-    } else {
-      delete this.target.pulseWave;
-    }
-
-    if (this.target.scenarioId === 'predictable_csv_wave') {
-      this.target.csvWave = _.defaults(this.target.csvWave || {}, defaultCSVWave);
-    } else {
-      delete this.target.csvWave;
-    }
-
-    if (this.target.scenarioId === 'grafana_api') {
-      this.target.stringInput = 'datasources';
-    } else {
-      delete this.target.stringInput;
-    }
-
-    this.target.stringInput = this.scenario.stringInput ?? undefined;
-    this.showLabels = showLabelsFor.includes(this.target.scenarioId);
-
-    this.refresh();
-  }
-
-  streamChanged() {
-    this.refresh();
-  }
-}
diff --git a/public/app/plugins/datasource/testdata/types.ts b/public/app/plugins/datasource/testdata/types.ts
index 27882719746..997b4ee4103 100644
--- a/public/app/plugins/datasource/testdata/types.ts
+++ b/public/app/plugins/datasource/testdata/types.ts
@@ -3,14 +3,28 @@ import { DataQuery } from '@grafana/data';
 export interface Scenario {
   id: string;
   name: string;
+  stringInput: string;
 }
 
+export type PointValue = number;
+
+export interface NewPoint {
+  newPointValue: string;
+  newPointTime: string;
+}
+export type Points = PointValue[][];
+
 export interface TestDataQuery extends DataQuery {
   alias?: string;
   scenarioId: string;
   stringInput: string;
-  points?: any[];
+  points: Points;
   stream?: StreamingQuery;
+  pulseWave?: PulseWaveQuery;
+  csvWave: any;
+  labels?: string;
+  lines?: number;
+  levelColumn?: boolean;
 }
 
 export interface StreamingQuery {
@@ -21,3 +35,11 @@ export interface StreamingQuery {
   bands?: number; // number of bands around the middle band
   url?: string; // the Fetch URL
 }
+
+export interface PulseWaveQuery {
+  timeStep?: number;
+  onCount?: number;
+  offCount?: number;
+  onValue?: number;
+  offValue?: number;
+}