feat(dataframe): add V2 variable query editor under feature toggle

src/datasources/data-frame/components/DataFrameVariableQueryEditorWrapper.tsx

@@ -0,0 +1,17 @@
+import React, { useRef } from 'react';
+import { DataFrameFeatureToggles, DataFrameFeatureTogglesDefaults, Props } from '../types';
+import { DataFrameVariableQueryEditorV1 } from './v1/DataFrameVariableQueryEditorV1';
+import { DataFrameVariableQueryEditorV2 } from './v2/DataFrameVariableQueryEditorV2';
+
+export function DataFrameVariableQueryEditorWrapper(props: Props) {
+  const dataFrameFeatures = useRef<DataFrameFeatureToggles>({
+    queryByDataTableProperties: props.datasource.instanceSettings.jsonData?.featureToggles?.queryByDataTableProperties
+      ?? DataFrameFeatureTogglesDefaults.queryByDataTableProperties
+  });
+
+  return (
+    dataFrameFeatures.current.queryByDataTableProperties
+      ? <DataFrameVariableQueryEditorV2 />
+      : <DataFrameVariableQueryEditorV1 {...props} />
+  )
+}

src/datasources/data-frame/components/DataFrameVariableQueryEditor.test.tsx → src/datasources/data-frame/components/v1/DataFrameVariableQueryEditorV1.test.tsx

@@ -2,28 +2,28 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { select } from 'react-select-event';
 import { setupDataSource } from 'test/fixtures';
-import { DataFrameDataSource } from '../DataFrameDataSource';
-import { DataFrameVariableQueryEditor } from './DataFrameVariableQueryEditor';
-import { DataFrameQuery } from '../types';
+import { DataFrameDataSource } from '../../DataFrameDataSource';
+import { DataFrameQuery } from '../../types';
+import { DataFrameVariableQueryEditorV1 } from './DataFrameVariableQueryEditorV1';
 
 const onChange = jest.fn();
 const onRunQuery = jest.fn();
 const [datasource] = setupDataSource(DataFrameDataSource);
 
 test('renders with no data table selected', async () => {
-  render(<DataFrameVariableQueryEditor {...{ onChange, onRunQuery, datasource, query: '' as unknown as  DataFrameQuery }} />);
+  render(<DataFrameVariableQueryEditorV1 {...{ onChange, onRunQuery, datasource, query: '' as unknown as DataFrameQuery }} />);
 
   expect(screen.getByRole('combobox')).toHaveAccessibleDescription('Search by name or enter id');
 });
 
 test('populates data table drop-down with variables', async () => {
-  render(<DataFrameVariableQueryEditor {...{ onChange, onRunQuery, datasource, query: { tableId: '$test_var' } as DataFrameQuery }} />);
+  render(<DataFrameVariableQueryEditorV1 {...{ onChange, onRunQuery, datasource, query: { tableId: '$test_var' } as DataFrameQuery }} />);
 
   expect(screen.getByText('$test_var')).toBeInTheDocument();
 });
 
 test('user selects new data table', async () => {
-  render(<DataFrameVariableQueryEditor {...{ onChange, onRunQuery, datasource, query: '' as unknown as DataFrameQuery }} />);
+  render(<DataFrameVariableQueryEditorV1 {...{ onChange, onRunQuery, datasource, query: '' as unknown as DataFrameQuery }} />);
 
   await select(screen.getByRole('combobox'), '$test_var', { container: document.body });
   expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ tableId: '$test_var' }));

src/datasources/data-frame/components/v1/DataFrameVariableQueryEditorV1.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { AsyncSelect } from '@grafana/ui';
+import { InlineField } from 'core/components/InlineField';
+import { toOption } from '@grafana/data';
+import { FloatingError, parseErrorMessage } from 'core/errors';
+import { isValidId } from 'datasources/data-frame/utils';
+import { Props } from 'datasources/data-frame/types';
+import { DataFrameQueryEditorCommonV1 } from './DataFrameQueryEditorCommonV1';
+
+export function DataFrameVariableQueryEditorV1(props: Props) {
+    const [errorMsg, setErrorMsg] = useState<string | undefined>('');
+    const handleError = (error: Error) => setErrorMsg(parseErrorMessage(error));
+    const common = new DataFrameQueryEditorCommonV1(props, handleError);
+
+    return (
+        <div style={{ position: 'relative' }}>
+            <InlineField label="Id">
+                <AsyncSelect
+                    allowCreateWhileLoading
+                    allowCustomValue
+                    cacheOptions={false}
+                    defaultOptions
+                    isValidNewOption={isValidId}
+                    loadOptions={common.handleLoadOptions}
+                    onChange={common.handleIdChange}
+                    placeholder="Search by name or enter id"
+                    width={30}
+                    value={common.query.tableId ? toOption(common.query.tableId) : null}
+                />
+            </InlineField>
+            <FloatingError message={errorMsg} />
+        </div>
+    );
+}

src/datasources/data-frame/components/v2/DataFrameVariableQueryEditorV2.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const DataFrameVariableQueryEditorV2 = () => {
+    // TODO AB#3259790: Add `Data table properties` Query Builder
+
+    return (
+        <div>
+            <p>DataFrame Variable Query Editor V2 is under development.</p>
+        </div>
+    );
+}

src/datasources/data-frame/module.ts

@@ -1,10 +1,10 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { DataFrameDataSource } from './DataFrameDataSource';
 import { DataFrameQueryEditorWrapper } from './components/DataFrameQueryEditorWrapper';
-import { DataFrameVariableQueryEditor } from './components/DataFrameVariableQueryEditor';
+import { DataFrameVariableQueryEditorWrapper } from './components/DataFrameVariableQueryEditorWrapper';
 import { DataFrameConfigEditor } from './components/DataFrameConfigEditor';
 
 export const plugin = new DataSourcePlugin(DataFrameDataSource)
   .setConfigEditor(DataFrameConfigEditor)
   .setQueryEditor(DataFrameQueryEditorWrapper)
-  .setVariableQueryEditor(DataFrameVariableQueryEditor);
+  .setVariableQueryEditor(DataFrameVariableQueryEditorWrapper);