Dashboard: Migration - EditVariable Settings: Implement DataSource Variable (#80885)

* Extract DatasourceVariableForm logic and use it in core grafana

* Implement DataSourceVariable editor in scenes

* Refactor VariableSelect and add unit test for DataSourceVariableEditor

* Refactor old unit test to use userEvent and mock getDataSourceSrv

public/app/features/variables/datasource/DataSourceVariableEditor.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { selectOptionInTest, getSelectParent } from 'test/helpers/selectOptionInTest';
 
@@ -45,10 +46,21 @@ describe('DataSourceVariableEditor', () => {
     expect(field).toBeInTheDocument();
   });
 
-  it('calls the handler when the regex filter is changed', () => {
-    render(<DataSourceVariableEditor {...props} />);
+  it('calls the handler when the regex filter is changed in onBlur', async () => {
+    const { user } = setup(<DataSourceVariableEditor {...props} />);
     const field = screen.getByLabelText(/Instance name filter/);
-    fireEvent.change(field, { target: { value: '/prod/' } });
-    expect(props.onPropChange).toBeCalledWith({ propName: 'regex', propValue: '/prod/' });
+    await user.click(field);
+    await user.type(field, '/prod/');
+    expect(field).toHaveValue('/prod/');
+    await user.tab();
+    expect(props.onPropChange).toHaveBeenCalledWith({ propName: 'regex', propValue: '/prod/', updateOptions: true });
   });
 });
+
+// based on styleguide recomendation
+function setup(jsx: JSX.Element) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}

public/app/features/variables/datasource/DataSourceVariableEditor.tsx

@@ -2,19 +2,16 @@ import React, { FormEvent, PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { SelectableValue } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
+import { DataSourceVariableForm } from 'app/features/dashboard-scene/settings/variables/components/DataSourceVariableForm';
 
 import { StoreState } from '../../../types';
-import { VariableLegend } from '../../dashboard-scene/settings/variables/components/VariableLegend';
-import { VariableSelectField } from '../../dashboard-scene/settings/variables/components/VariableSelectField';
-import { VariableTextField } from '../../dashboard-scene/settings/variables/components/VariableTextField';
-import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
 import { initialVariableEditorState } from '../editor/reducer';
 import { getDatasourceVariableEditorState } from '../editor/selectors';
 import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
 import { changeVariableMultiValue } from '../state/actions';
 import { getVariablesState } from '../state/selectors';
 import { DataSourceVariableModel, VariableWithMultiSupport } from '../types';
+import { toKeyedVariableIdentifier } from '../utils';
 
 import { initDataSourceVariableEditor } from './actions';
 
@@ -57,13 +54,6 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
     this.props.initDataSourceVariableEditor(rootStateKey);
   }
 
-  onRegExChange = (event: FormEvent<HTMLInputElement>) => {
-    this.props.onPropChange({
-      propName: 'regex',
-      propValue: event.currentTarget.value,
-    });
-  };
-
   onRegExBlur = (event: FormEvent<HTMLInputElement>) => {
     this.props.onPropChange({
       propName: 'regex',
@@ -76,6 +66,18 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
     this.props.onPropChange({ propName, propValue, updateOptions: true });
   };
 
+  onMultiChanged = (event: FormEvent<HTMLInputElement>) => {
+    this.props.changeVariableMultiValue(toKeyedVariableIdentifier(this.props.variable), event.currentTarget.checked);
+  };
+
+  onIncludeAllChanged = (event: FormEvent<HTMLInputElement>) => {
+    this.onSelectionOptionsChange({ propName: 'includeAll', propValue: event.currentTarget.checked });
+  };
+
+  onAllValueChanged = (event: FormEvent<HTMLInputElement>) => {
+    this.onSelectionOptionsChange({ propName: 'allValue', propValue: event.currentTarget.value });
+  };
+
   getSelectedDataSourceTypeValue = (): string => {
     const { extended } = this.props;
 
@@ -93,49 +95,25 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
   };
 
   render() {
-    const { variable, extended, changeVariableMultiValue } = this.props;
+    const { variable, extended } = this.props;
 
     const typeOptions = extended?.dataSourceTypes?.length
       ? extended.dataSourceTypes?.map((ds) => ({ value: ds.value ?? '', label: ds.text }))
       : [];
 
-    const typeValue = typeOptions.find((o) => o.value === variable.query) ?? typeOptions[0];
-
     return (
-      <>
-        <VariableLegend>Data source options</VariableLegend>
-        <VariableSelectField
-          name="Type"
-          value={typeValue}
-          options={typeOptions}
-          onChange={this.onDataSourceTypeChanged}
-          testId={selectors.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.datasourceSelect}
-        />
-
-        <VariableTextField
-          value={this.props.variable.regex}
-          name="Instance name filter"
-          placeholder="/.*-(.*)-.*/"
-          onChange={this.onRegExChange}
-          onBlur={this.onRegExBlur}
-          description={
-            <div>
-              Regex filter for which data source instances to choose from in the variable value list. Leave empty for
-              all.
-              <br />
-              <br />
-              Example: <code>/^prod/</code>
-            </div>
-          }
-        />
-
-        <VariableLegend>Selection options</VariableLegend>
-        <SelectionOptionsEditor
-          variable={variable}
-          onPropChange={this.onSelectionOptionsChange}
-          onMultiChanged={changeVariableMultiValue}
-        />
-      </>
+      <DataSourceVariableForm
+        query={variable.query}
+        regex={variable.regex}
+        multi={variable.multi}
+        includeAll={variable.includeAll}
+        optionTypes={typeOptions}
+        onChange={this.onDataSourceTypeChanged}
+        onRegExBlur={this.onRegExBlur}
+        onMultiChange={this.onMultiChanged}
+        onIncludeAllChange={this.onIncludeAllChanged}
+        onAllValueChange={this.onAllValueChanged}
+      />
     );
   }
 }