From a1347f7382b072037ffd6a07e3f9730149b4ea8e Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres.mgotor@gmail.com>
Date: Wed, 10 Nov 2021 10:09:15 +0100
Subject: [PATCH 1/5] Add ConfigEditor Component

---
 package.json                                 |  1 +
 rollup.config.ts                             |  2 +-
 src/index.ts                                 |  1 +
 src/sql/ConfigEditor/ConfigEditor.test.tsx   | 48 +++++++++++++
 src/sql/ConfigEditor/ConfigEditor.tsx        | 63 +++++++++++++++++
 src/sql/ConfigEditor/InlineText.test.tsx     | 56 +++++++++++++++
 src/sql/ConfigEditor/InlineText.tsx          | 63 +++++++++++++++++
 src/sql/ConfigEditor/Selector.test.tsx       | 69 +++++++++++++++++++
 src/sql/ConfigEditor/Selector.tsx            | 71 ++++++++++++++++++++
 src/sql/ConfigEditor/__mocks__/datasource.ts | 33 +++++++++
 src/sql/ConfigEditor/index.ts                |  3 +
 src/sql/ResourceSelector.tsx                 |  3 +-
 src/types.ts                                 |  4 +-
 yarn.lock                                    | 37 +++++++---
 14 files changed, 441 insertions(+), 13 deletions(-)
 create mode 100644 src/sql/ConfigEditor/ConfigEditor.test.tsx
 create mode 100644 src/sql/ConfigEditor/ConfigEditor.tsx
 create mode 100644 src/sql/ConfigEditor/InlineText.test.tsx
 create mode 100644 src/sql/ConfigEditor/InlineText.tsx
 create mode 100644 src/sql/ConfigEditor/Selector.test.tsx
 create mode 100644 src/sql/ConfigEditor/Selector.tsx
 create mode 100644 src/sql/ConfigEditor/__mocks__/datasource.ts
 create mode 100644 src/sql/ConfigEditor/index.ts

diff --git a/package.json b/package.json
index 5c569bc..0821e7a 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@grafana/data": "^8.2.1",
+    "@grafana/runtime": "^8.2.1",
     "@grafana/toolkit": "^8.2.1",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "^8.2.1",
diff --git a/rollup.config.ts b/rollup.config.ts
index d798fc9..5252067 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -26,7 +26,7 @@ const buildCjsPackage = ({ env }) => {
         },
       },
     ],
-    external: ['react', '@grafana/data', '@grafana/ui', 'lodash'],
+    external: ['react', '@grafana/data', '@grafana/ui', 'lodash', '@grafana/runtime'],
     plugins: [
       typescript({
         rollupCommonJSResolveHack: false,
diff --git a/src/index.ts b/src/index.ts
index 6b6f2a1..1096fd5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export { ConnectionConfig, ConnectionConfigProps } from './ConnectionConfig';
+export { SQLConfigEditor, SQLConfigEditorProps, SelectorInput, TextInput } from './sql/ConfigEditor';
 export { ResourceSelector, ResourceSelectorProps } from './sql/ResourceSelector';
 export * from './types';
 export * from './regions';
diff --git a/src/sql/ConfigEditor/ConfigEditor.test.tsx b/src/sql/ConfigEditor/ConfigEditor.test.tsx
new file mode 100644
index 0000000..7fc8195
--- /dev/null
+++ b/src/sql/ConfigEditor/ConfigEditor.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SQLConfigEditor } from './ConfigEditor';
+import { mockDatasourceOptions } from './__mocks__/datasource';
+import { SelectorInput } from './Selector';
+import { TextInput } from './InlineText';
+import { AwsAuthType } from '../../types';
+
+const props = {
+  ...mockDatasourceOptions,
+  inputs: [] as Array<SelectorInput | TextInput | JSX.Element>,
+};
+
+const resetWindow = () => {
+  (window as any).grafanaBootData = {
+    settings: {
+      awsAllowedAuthProviders: [AwsAuthType.EC2IAMRole, AwsAuthType.Keys],
+      awsAssumeRoleEnabled: false,
+    },
+  };
+};
+
+describe('SQLConfigEditor', () => {
+  beforeEach(() => resetWindow());
+  afterEach(() => resetWindow());
+
+  it('should render a custom component', () => {
+    render(<SQLConfigEditor {...props} inputs={[<div key="hello">hello!</div>]} />);
+    expect(screen.queryByText('hello!')).toBeInTheDocument();
+  });
+
+  it('should render a selector', () => {
+    const input: SelectorInput = {
+      id: 'foo',
+      fetch: jest.fn(),
+    };
+    render(<SQLConfigEditor {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} inputs={[input]} />);
+    expect(screen.queryByText('bar')).toBeInTheDocument();
+  });
+
+  it('should render a text input', () => {
+    const input: TextInput = {
+      id: 'foo',
+    };
+    render(<SQLConfigEditor {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} inputs={[input]} />);
+    expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();
+  });
+});
diff --git a/src/sql/ConfigEditor/ConfigEditor.tsx b/src/sql/ConfigEditor/ConfigEditor.tsx
new file mode 100644
index 0000000..ec744a1
--- /dev/null
+++ b/src/sql/ConfigEditor/ConfigEditor.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
+import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceSettings } from '../../types';
+import { getBackendSrv } from '@grafana/runtime';
+import { Selector, SelectorInput } from './Selector';
+import { InlineText, TextInput } from './InlineText';
+import { ConnectionConfig } from 'ConnectionConfig';
+
+type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
+  [n: string]: any;
+};
+
+export interface SQLConfigEditorProps
+  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
+  inputs: Array<SelectorInput | TextInput | JSX.Element>;
+}
+
+export function SQLConfigEditor(props: SQLConfigEditorProps) {
+  const baseURL = `/api/datasources/${props.options.id}`;
+  const [saved, setSaved] = useState(!!props.options.jsonData.defaultRegion);
+  const saveOptions = async () => {
+    if (saved) {
+      return;
+    }
+    await getBackendSrv()
+      .put(baseURL, props.options)
+      .then((result: { datasource: AwsAuthDataSourceSettings }) => {
+        props.onOptionsChange({
+          ...props.options,
+          version: result.datasource.version,
+        });
+      });
+    setSaved(true);
+  };
+
+  const inputElements = props.inputs.map((i) => {
+    const elem = i as JSX.Element;
+    if (elem.type) {
+      return elem;
+    }
+    if ('fetch' in i) {
+      // The input is a selector
+      return <Selector key={i.id} {...props} input={i as SelectorInput} saveOptions={saveOptions} />;
+    } else {
+      // The input is a text field
+      const input = i as TextInput;
+      return <InlineText key={input.id} {...props} input={input} />;
+    }
+  });
+
+  const onOptionsChange = (options: DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>) => {
+    setSaved(false);
+    props.onOptionsChange(options);
+  };
+
+  return (
+    <div className="gf-form-group">
+      <ConnectionConfig {...props} onOptionsChange={onOptionsChange} />
+      <h3>Data Source Details</h3>
+      {inputElements}
+    </div>
+  );
+}
diff --git a/src/sql/ConfigEditor/InlineText.test.tsx b/src/sql/ConfigEditor/InlineText.test.tsx
new file mode 100644
index 0000000..10b22b0
--- /dev/null
+++ b/src/sql/ConfigEditor/InlineText.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InlineText, TextInput } from './InlineText';
+import { mockDatasourceOptions } from './__mocks__/datasource';
+
+const props = {
+  ...mockDatasourceOptions,
+};
+
+describe('SQLTextInput', () => {
+  it('should show jsonData value', () => {
+    const input: TextInput = {
+      id: 'foo',
+    };
+    render(<InlineText {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} input={input} />);
+    expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();
+  });
+
+  it('should show a custom value', () => {
+    const input: TextInput = {
+      id: 'foo',
+      value: 'foobar',
+    };
+    render(<InlineText {...props} input={input} />);
+    expect(screen.queryByDisplayValue('foobar')).toBeInTheDocument();
+  });
+
+  it('should update jsonData', () => {
+    const input: TextInput = {
+      id: 'foo',
+      'data-testid': 'foo-id',
+    };
+    const onOptionsChange = jest.fn();
+    render(<InlineText {...props} input={input} onOptionsChange={onOptionsChange} />);
+    fireEvent.change(screen.getByTestId('foo-id'), { target: { value: 'bar' } });
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: 'bar',
+      },
+    });
+  });
+
+  it('should call custom onChange', () => {
+    const onChange = jest.fn();
+    const input: TextInput = {
+      id: 'foo',
+      'data-testid': 'foo-id',
+      onChange,
+    };
+    render(<InlineText {...props} input={input} />);
+    fireEvent.change(screen.getByTestId('foo-id'), { target: { value: 'bar' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+});
diff --git a/src/sql/ConfigEditor/InlineText.tsx b/src/sql/ConfigEditor/InlineText.tsx
new file mode 100644
index 0000000..bbbe966
--- /dev/null
+++ b/src/sql/ConfigEditor/InlineText.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
+import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from '../../types';
+import { InlineField, Input } from '@grafana/ui';
+import { FormEvent } from 'react-dom/node_modules/@types/react';
+
+export type TextInput = {
+  id: string;
+  label?: string;
+  tooltip?: string;
+  placeholder?: string;
+  'data-testid'?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  value?: string;
+  onChange?: (e: SelectableValue<string>) => void;
+};
+
+type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
+  [n: string]: any;
+};
+
+export interface TextProps
+  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
+  input: TextInput;
+}
+
+export function InlineText(props: TextProps) {
+  const { input } = props;
+
+  const onChange = (e: FormEvent<HTMLInputElement>) => {
+    if (input.onChange) {
+      input.onChange(e);
+    } else {
+      props.onOptionsChange({
+        ...props.options,
+        jsonData: {
+          ...props.options.jsonData,
+          [input.id]: e.currentTarget.value || '',
+        },
+      });
+    }
+  };
+  return (
+    <InlineField
+      label={input.label}
+      labelWidth={28}
+      tooltip={input.tooltip}
+      key={input.id}
+      hidden={input.hidden}
+      disabled={input.disabled}
+    >
+      <Input
+        data-testid={input['data-testid']}
+        className="width-30"
+        value={input.value || props.options.jsonData[input.id] || ''}
+        onChange={onChange}
+        placeholder={input.placeholder}
+        disabled={input.disabled}
+      />
+    </InlineField>
+  );
+}
diff --git a/src/sql/ConfigEditor/Selector.test.tsx b/src/sql/ConfigEditor/Selector.test.tsx
new file mode 100644
index 0000000..22aaa95
--- /dev/null
+++ b/src/sql/ConfigEditor/Selector.test.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Selector, SelectorInput } from './Selector';
+import { mockDatasourceOptions } from './__mocks__/datasource';
+import { select } from 'react-select-event';
+
+const props = {
+  ...mockDatasourceOptions,
+  saveOptions: jest.fn(),
+};
+
+describe('SQLTextInput', () => {
+  it('should show jsonData value', () => {
+    const input: SelectorInput = {
+      id: 'foo',
+      fetch: jest.fn(),
+    };
+    render(<Selector {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} input={input} />);
+    expect(screen.queryByText('bar')).toBeInTheDocument();
+  });
+
+  it('should show a custom value', () => {
+    const input: SelectorInput = {
+      id: 'foo',
+      value: 'foobar',
+      fetch: jest.fn(),
+    };
+    render(<Selector {...props} input={input} />);
+    expect(screen.queryByText('foobar')).toBeInTheDocument();
+  });
+
+  it('should update jsonData', async () => {
+    const input: SelectorInput = {
+      id: 'foo',
+      label: 'foo-id',
+      fetch: jest.fn().mockResolvedValue(['bar']),
+    };
+    const onOptionsChange = jest.fn();
+    render(<Selector {...props} input={input} onOptionsChange={onOptionsChange} />);
+
+    const selectEl = screen.getByLabelText(input.label);
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'bar', { container: document.body });
+    expect(input.fetch).toHaveBeenCalled();
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: 'bar',
+      },
+    });
+  });
+
+  it('should call custom onChange', async () => {
+    const onChange = jest.fn();
+    const input: SelectorInput = {
+      id: 'foo',
+      label: 'foo-id',
+      fetch: jest.fn().mockResolvedValue(['bar']),
+      onChange,
+    };
+    render(<Selector {...props} input={input} />);
+    const selectEl = screen.getByLabelText(input.label);
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'bar', { container: document.body });
+    expect(input.fetch).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalled();
+  });
+});
diff --git a/src/sql/ConfigEditor/Selector.tsx b/src/sql/ConfigEditor/Selector.tsx
new file mode 100644
index 0000000..51b6574
--- /dev/null
+++ b/src/sql/ConfigEditor/Selector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
+import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from '../../types';
+import { ResourceSelector } from '../ResourceSelector';
+
+export type SelectorInput = {
+  id: string;
+  fetch: () => Promise<Array<string | SelectableValue<string>>>;
+  dependencies?: string[];
+  label?: string;
+  'data-testid'?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  onChange?: (e: SelectableValue<string>) => void;
+  value?: string;
+};
+
+type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
+  [n: string]: any;
+};
+
+export interface SelectorProps
+  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
+  input: SelectorInput;
+  saveOptions: () => Promise<void>;
+}
+
+export function Selector(props: SelectorProps) {
+  const { jsonData } = props.options;
+  const commonProps = {
+    title: jsonData.defaultRegion ? '' : 'select a default region',
+    disabled: !jsonData.defaultRegion,
+    labelWidth: 28,
+    className: 'width-30',
+  };
+
+  // The input is a selector
+  const { input } = props;
+  const onChange = (e: SelectableValue<string> | null) => {
+    if (input.onChange) {
+      input.onChange(e);
+    } else {
+      props.onOptionsChange({
+        ...props.options,
+        jsonData: {
+          ...props.options.jsonData,
+          [input.id]: e ? e.value || '' : e,
+        },
+      });
+    }
+  };
+  const dependencies: string[] = [];
+  if (input.dependencies) {
+    input.dependencies.forEach((dep) => dependencies.push(props.options.jsonData[dep]));
+  }
+  return (
+    <ResourceSelector
+      key={input.id}
+      label={input.label}
+      data-testid={input['data-testid']}
+      onChange={onChange}
+      fetch={input.fetch}
+      value={input.value || props.options.jsonData[input.id]}
+      saveOptions={props.saveOptions}
+      dependencies={dependencies}
+      hidden={input.hidden}
+      disabled={input.disabled}
+      {...commonProps}
+    />
+  );
+}
diff --git a/src/sql/ConfigEditor/__mocks__/datasource.ts b/src/sql/ConfigEditor/__mocks__/datasource.ts
new file mode 100644
index 0000000..c1e1574
--- /dev/null
+++ b/src/sql/ConfigEditor/__mocks__/datasource.ts
@@ -0,0 +1,33 @@
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from 'types';
+
+export const mockDatasourceOptions: DataSourcePluginOptionsEditorProps<
+  AwsAuthDataSourceJsonData,
+  AwsAuthDataSourceSecureJsonData
+> = {
+  options: {
+    id: 1,
+    uid: 'redshift-id',
+    orgId: 1,
+    name: 'Redshift',
+    typeLogoUrl: '',
+    type: '',
+    typeName: '',
+    access: '',
+    url: '',
+    password: '',
+    user: '',
+    basicAuth: false,
+    basicAuthPassword: '',
+    basicAuthUser: '',
+    database: '',
+    isDefault: false,
+    jsonData: {
+      defaultRegion: 'us-east-2',
+    },
+    secureJsonFields: {},
+    readOnly: false,
+    withCredentials: false,
+  },
+  onOptionsChange: jest.fn(),
+};
diff --git a/src/sql/ConfigEditor/index.ts b/src/sql/ConfigEditor/index.ts
new file mode 100644
index 0000000..661e108
--- /dev/null
+++ b/src/sql/ConfigEditor/index.ts
@@ -0,0 +1,3 @@
+export { SQLConfigEditor, SQLConfigEditorProps } from './ConfigEditor';
+export { SelectorInput } from './Selector';
+export { TextInput } from './InlineText';
diff --git a/src/sql/ResourceSelector.tsx b/src/sql/ResourceSelector.tsx
index 05218ec..cd093f6 100644
--- a/src/sql/ResourceSelector.tsx
+++ b/src/sql/ResourceSelector.tsx
@@ -12,6 +12,7 @@ export type ResourceSelectorProps = {
   tooltip?: string;
   label?: string;
   'data-testid'?: string;
+  hidden?: boolean;
   // Options only needed for QueryEditor
   default?: string;
   // Options only needed for the ConfigEditor
@@ -99,7 +100,7 @@ export function ResourceSelector(props: ResourceSelectorProps) {
   };
 
   return (
-    <InlineField label={props.label} labelWidth={props.labelWidth} tooltip={props.tooltip}>
+    <InlineField label={props.label} labelWidth={props.labelWidth} tooltip={props.tooltip} hidden={props.hidden}>
       <div data-testid={props['data-testid']} title={props.title}>
         <Select
           aria-label={props.label}
diff --git a/src/types.ts b/src/types.ts
index 029e55e..202c44a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import { DataSourceJsonData } from '@grafana/data';
+import { DataSourceJsonData, DataSourceSettings } from '@grafana/data';
 
 export enum AwsAuthType {
   Keys = 'keys',
@@ -25,3 +25,5 @@ export interface AwsAuthDataSourceSecureJsonData {
   secretKey?: string;
   sessionToken?: string;
 }
+
+export type AwsAuthDataSourceSettings = DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>;
diff --git a/yarn.lock b/yarn.lock
index dbace5e..e0210c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1323,6 +1323,18 @@
     prettier "2.2.1"
     typescript "4.3.4"
 
+"@grafana/runtime@^8.2.1":
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/@grafana/runtime/-/runtime-8.2.3.tgz#4acb749643f02bfc8beeab0747ec8c2b1837276d"
+  integrity sha512-/Pi2IJEn7TyopbMrjw6YyZaAQMtPie1NmRx3FcWuD3EXyeepyrmDrCCP/njsYbre+sQA+M6B7BIsDVtzffTutw==
+  dependencies:
+    "@grafana/data" "8.2.3"
+    "@grafana/e2e-selectors" "8.2.3"
+    "@grafana/ui" "8.2.3"
+    history "4.10.1"
+    systemjs "0.20.19"
+    systemjs-plugin-css "0.1.37"
+
 "@grafana/schema@8.2.3":
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/@grafana/schema/-/schema-8.2.3.tgz#77b4f289ae10b60ab52593a6c373c988ec2aa48d"
@@ -3753,15 +3765,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
-  version "1.0.30001204"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
-  integrity sha512-JUdjWpcxfJ9IPamy2f5JaRDCaqJOxDzOSKtbdx4rH9VivMd1vIzoPumsJa9LoMIi4Fx2BV2KZOxWhNkBjaYivQ==
-
-caniuse-lite@^1.0.30001125:
-  version "1.0.30001276"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001276.tgz#7049685eb972eb09c0ecbb57227b489d76244fb1"
-  integrity sha512-psUNoaG1ilknZPxi8HuhQWobuhLqtYSRUxplfVkEJdgZNB9TETVYGSBtv4YyfAdGvE6gn2eb0ztiXqHoWJcGnw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001181:
+  version "1.0.30001279"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz"
+  integrity sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -6332,7 +6339,7 @@ highlight-words-core@^1.2.0:
   resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
   integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
 
-history@^4.9.0:
+history@4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -11842,6 +11849,16 @@ symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+systemjs-plugin-css@0.1.37:
+  version "0.1.37"
+  resolved "https://registry.yarnpkg.com/systemjs-plugin-css/-/systemjs-plugin-css-0.1.37.tgz#684847252ca69b7da24a1201094c86274324e82f"
+  integrity sha512-wCGG62zYXuOlNji5FlBjeMFAnLeAO/HQmFg+8UBX/mlHoAKLHlGFYRstlhGKibRU2oxk/BH9DaihOuhhNLi7Kg==
+
+systemjs@0.20.19:
+  version "0.20.19"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.20.19.tgz#c2b9e79c19f4bea53a19b1ed3f974ffb463be949"
+  integrity sha512-H/rKwNEEyej/+IhkmFNmKFyJul8tbH/muiPq5TyNoVTwsGhUjRsN3NlFnFQUvFXA3+GQmsXkCNXU6QKPl779aw==
+
 table@^6.0.4:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/table/-/table-6.0.7.tgz#e45897ffbcc1bcf9e8a87bf420f2c9e5a7a52a34"

From 88e8ddfc497d1c048d4fe1a639154ae07983d4a4 Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres.mgotor@gmail.com>
Date: Thu, 11 Nov 2021 16:17:11 +0100
Subject: [PATCH 2/5] Apply feedback

---
 package.json                               |  1 -
 rollup.config.ts                           |  2 +-
 src/index.ts                               |  2 +-
 src/sql/ConfigEditor/ConfigEditor.test.tsx | 48 ---------------
 src/sql/ConfigEditor/ConfigEditor.tsx      | 63 -------------------
 src/sql/ConfigEditor/ConfigSelect.test.tsx | 55 +++++++++++++++++
 src/sql/ConfigEditor/ConfigSelect.tsx      | 64 +++++++++++++++++++
 src/sql/ConfigEditor/InlineInput.test.tsx  | 46 ++++++++++++++
 src/sql/ConfigEditor/InlineInput.tsx       | 45 ++++++++++++++
 src/sql/ConfigEditor/InlineText.test.tsx   | 56 -----------------
 src/sql/ConfigEditor/InlineText.tsx        | 63 -------------------
 src/sql/ConfigEditor/Selector.test.tsx     | 69 ---------------------
 src/sql/ConfigEditor/Selector.tsx          | 71 ----------------------
 src/sql/ConfigEditor/index.ts              |  5 +-
 yarn.lock                                  | 24 +-------
 15 files changed, 215 insertions(+), 399 deletions(-)
 delete mode 100644 src/sql/ConfigEditor/ConfigEditor.test.tsx
 delete mode 100644 src/sql/ConfigEditor/ConfigEditor.tsx
 create mode 100644 src/sql/ConfigEditor/ConfigSelect.test.tsx
 create mode 100644 src/sql/ConfigEditor/ConfigSelect.tsx
 create mode 100644 src/sql/ConfigEditor/InlineInput.test.tsx
 create mode 100644 src/sql/ConfigEditor/InlineInput.tsx
 delete mode 100644 src/sql/ConfigEditor/InlineText.test.tsx
 delete mode 100644 src/sql/ConfigEditor/InlineText.tsx
 delete mode 100644 src/sql/ConfigEditor/Selector.test.tsx
 delete mode 100644 src/sql/ConfigEditor/Selector.tsx

diff --git a/package.json b/package.json
index 0821e7a..5c569bc 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@grafana/data": "^8.2.1",
-    "@grafana/runtime": "^8.2.1",
     "@grafana/toolkit": "^8.2.1",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "^8.2.1",
diff --git a/rollup.config.ts b/rollup.config.ts
index 5252067..d798fc9 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -26,7 +26,7 @@ const buildCjsPackage = ({ env }) => {
         },
       },
     ],
-    external: ['react', '@grafana/data', '@grafana/ui', 'lodash', '@grafana/runtime'],
+    external: ['react', '@grafana/data', '@grafana/ui', 'lodash'],
     plugins: [
       typescript({
         rollupCommonJSResolveHack: false,
diff --git a/src/index.ts b/src/index.ts
index 1096fd5..00b19ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 export { ConnectionConfig, ConnectionConfigProps } from './ConnectionConfig';
-export { SQLConfigEditor, SQLConfigEditorProps, SelectorInput, TextInput } from './sql/ConfigEditor';
+export { ConfigSelect, InlineInput } from './sql/ConfigEditor';
 export { ResourceSelector, ResourceSelectorProps } from './sql/ResourceSelector';
 export * from './types';
 export * from './regions';
diff --git a/src/sql/ConfigEditor/ConfigEditor.test.tsx b/src/sql/ConfigEditor/ConfigEditor.test.tsx
deleted file mode 100644
index 7fc8195..0000000
--- a/src/sql/ConfigEditor/ConfigEditor.test.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { SQLConfigEditor } from './ConfigEditor';
-import { mockDatasourceOptions } from './__mocks__/datasource';
-import { SelectorInput } from './Selector';
-import { TextInput } from './InlineText';
-import { AwsAuthType } from '../../types';
-
-const props = {
-  ...mockDatasourceOptions,
-  inputs: [] as Array<SelectorInput | TextInput | JSX.Element>,
-};
-
-const resetWindow = () => {
-  (window as any).grafanaBootData = {
-    settings: {
-      awsAllowedAuthProviders: [AwsAuthType.EC2IAMRole, AwsAuthType.Keys],
-      awsAssumeRoleEnabled: false,
-    },
-  };
-};
-
-describe('SQLConfigEditor', () => {
-  beforeEach(() => resetWindow());
-  afterEach(() => resetWindow());
-
-  it('should render a custom component', () => {
-    render(<SQLConfigEditor {...props} inputs={[<div key="hello">hello!</div>]} />);
-    expect(screen.queryByText('hello!')).toBeInTheDocument();
-  });
-
-  it('should render a selector', () => {
-    const input: SelectorInput = {
-      id: 'foo',
-      fetch: jest.fn(),
-    };
-    render(<SQLConfigEditor {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} inputs={[input]} />);
-    expect(screen.queryByText('bar')).toBeInTheDocument();
-  });
-
-  it('should render a text input', () => {
-    const input: TextInput = {
-      id: 'foo',
-    };
-    render(<SQLConfigEditor {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} inputs={[input]} />);
-    expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();
-  });
-});
diff --git a/src/sql/ConfigEditor/ConfigEditor.tsx b/src/sql/ConfigEditor/ConfigEditor.tsx
deleted file mode 100644
index ec744a1..0000000
--- a/src/sql/ConfigEditor/ConfigEditor.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useState } from 'react';
-import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceSettings } from '../../types';
-import { getBackendSrv } from '@grafana/runtime';
-import { Selector, SelectorInput } from './Selector';
-import { InlineText, TextInput } from './InlineText';
-import { ConnectionConfig } from 'ConnectionConfig';
-
-type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
-  [n: string]: any;
-};
-
-export interface SQLConfigEditorProps
-  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
-  inputs: Array<SelectorInput | TextInput | JSX.Element>;
-}
-
-export function SQLConfigEditor(props: SQLConfigEditorProps) {
-  const baseURL = `/api/datasources/${props.options.id}`;
-  const [saved, setSaved] = useState(!!props.options.jsonData.defaultRegion);
-  const saveOptions = async () => {
-    if (saved) {
-      return;
-    }
-    await getBackendSrv()
-      .put(baseURL, props.options)
-      .then((result: { datasource: AwsAuthDataSourceSettings }) => {
-        props.onOptionsChange({
-          ...props.options,
-          version: result.datasource.version,
-        });
-      });
-    setSaved(true);
-  };
-
-  const inputElements = props.inputs.map((i) => {
-    const elem = i as JSX.Element;
-    if (elem.type) {
-      return elem;
-    }
-    if ('fetch' in i) {
-      // The input is a selector
-      return <Selector key={i.id} {...props} input={i as SelectorInput} saveOptions={saveOptions} />;
-    } else {
-      // The input is a text field
-      const input = i as TextInput;
-      return <InlineText key={input.id} {...props} input={input} />;
-    }
-  });
-
-  const onOptionsChange = (options: DataSourceSettings<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData>) => {
-    setSaved(false);
-    props.onOptionsChange(options);
-  };
-
-  return (
-    <div className="gf-form-group">
-      <ConnectionConfig {...props} onOptionsChange={onOptionsChange} />
-      <h3>Data Source Details</h3>
-      {inputElements}
-    </div>
-  );
-}
diff --git a/src/sql/ConfigEditor/ConfigSelect.test.tsx b/src/sql/ConfigEditor/ConfigSelect.test.tsx
new file mode 100644
index 0000000..697590c
--- /dev/null
+++ b/src/sql/ConfigEditor/ConfigSelect.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ConfigSelect, ConfigSelectProps } from './ConfigSelect';
+import { mockDatasourceOptions } from './__mocks__/datasource';
+import { select } from 'react-select-event';
+
+const props: ConfigSelectProps = {
+  ...mockDatasourceOptions,
+  jsonDataPath: 'foo',
+  fetch: jest.fn(),
+  saveOptions: jest.fn(),
+};
+
+describe('SQLTextInput', () => {
+  it('should update jsonData', async () => {
+    const fetch = jest.fn().mockResolvedValue(['bar']);
+    const onOptionsChange = jest.fn();
+    const label = 'foo-id';
+    render(<ConfigSelect {...props} label={label} fetch={fetch} onOptionsChange={onOptionsChange} />);
+
+    const selectEl = screen.getByLabelText(label);
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'bar', { container: document.body });
+    expect(fetch).toHaveBeenCalled();
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: 'bar',
+      },
+    });
+  });
+
+  it('should call deep nested jsonData value', async () => {
+    const onOptionsChange = jest.fn();
+    const fetch = jest.fn().mockResolvedValue(['foobar']);
+    const label = 'foo-id';
+    render(
+      <ConfigSelect {...props} label={label} jsonDataPath="foo.bar" fetch={fetch} onOptionsChange={onOptionsChange} />
+    );
+    const selectEl = screen.getByLabelText(label);
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'foobar', { container: document.body });
+    expect(fetch).toHaveBeenCalled();
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: {
+          bar: 'foobar',
+        },
+      },
+    });
+  });
+});
diff --git a/src/sql/ConfigEditor/ConfigSelect.tsx b/src/sql/ConfigEditor/ConfigSelect.tsx
new file mode 100644
index 0000000..7a0cff8
--- /dev/null
+++ b/src/sql/ConfigEditor/ConfigSelect.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
+import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from '../../types';
+import { ResourceSelector } from '../ResourceSelector';
+import { set, get } from 'lodash';
+
+export interface ConfigSelectProps
+  extends DataSourcePluginOptionsEditorProps<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData> {
+  jsonDataPath: string;
+  fetch: () => Promise<Array<string | SelectableValue<string>>>;
+  dependencies?: string[];
+  label?: string;
+  'data-testid'?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  jsonDataPathLabel?: string;
+  saveOptions: () => Promise<void>;
+}
+
+export function ConfigSelect(props: ConfigSelectProps) {
+  const { jsonData } = props.options;
+  const commonProps = {
+    title: jsonData.defaultRegion ? '' : 'save connection details to proceed',
+    disabled: !jsonData.defaultRegion,
+    labelWidth: 28,
+    className: 'width-30',
+  };
+  const onChange = (e: SelectableValue<string> | null) => {
+    const newOptions = {
+      ...props.options,
+    };
+    set(newOptions.jsonData, props.jsonDataPath, e ? e.value || '' : e);
+    if (props.jsonDataPathLabel) {
+      set(newOptions.jsonData, props.jsonDataPathLabel, e ? e.label || '' : e);
+    }
+    props.onOptionsChange(newOptions);
+  };
+  // Any change in the AWS connection details will affect selectors
+  const dependencies: string[] = [
+    props.options.jsonData.assumeRoleArn,
+    props.options.jsonData.authType,
+    props.options.jsonData.defaultRegion,
+    props.options.jsonData.endpoint,
+    props.options.jsonData.externalId,
+    props.options.jsonData.profile,
+  ];
+  if (props.dependencies) {
+    props.dependencies.forEach((dep) => dependencies.push(get(props.options.jsonData, dep)));
+  }
+  return (
+    <ResourceSelector
+      label={props.label}
+      data-testid={props['data-testid']}
+      onChange={onChange}
+      fetch={props.fetch}
+      value={get(props.options.jsonData, props.jsonDataPath)}
+      saveOptions={props.saveOptions}
+      dependencies={dependencies}
+      hidden={props.hidden}
+      disabled={props.disabled}
+      {...commonProps}
+    />
+  );
+}
diff --git a/src/sql/ConfigEditor/InlineInput.test.tsx b/src/sql/ConfigEditor/InlineInput.test.tsx
new file mode 100644
index 0000000..b59266a
--- /dev/null
+++ b/src/sql/ConfigEditor/InlineInput.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InlineInputProps, InlineInput } from './InlineInput';
+import { mockDatasourceOptions } from './__mocks__/datasource';
+
+const props: InlineInputProps = {
+  ...mockDatasourceOptions,
+  jsonDataPath: 'foo',
+};
+
+describe('InlineText', () => {
+  it('should show jsonData value', () => {
+    render(<InlineInput {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} />);
+    expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();
+  });
+
+  it('should update jsonData', () => {
+    const testID = 'foo-id';
+    const onOptionsChange = jest.fn();
+    render(<InlineInput {...props} data-testid={testID} onOptionsChange={onOptionsChange} />);
+    fireEvent.change(screen.getByTestId(testID), { target: { value: 'bar' } });
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: 'bar',
+      },
+    });
+  });
+
+  it('should update deep nested jsonData value', () => {
+    const onOptionsChange = jest.fn();
+    const testID = 'foo-id';
+    render(<InlineInput {...props} data-testid={testID} onOptionsChange={onOptionsChange} jsonDataPath="foo.bar" />);
+    fireEvent.change(screen.getByTestId(testID), { target: { value: 'foobar' } });
+    expect(onOptionsChange).toHaveBeenCalledWith({
+      ...props.options,
+      jsonData: {
+        ...props.options.jsonData,
+        foo: {
+          bar: 'foobar',
+        },
+      },
+    });
+  });
+});
diff --git a/src/sql/ConfigEditor/InlineInput.tsx b/src/sql/ConfigEditor/InlineInput.tsx
new file mode 100644
index 0000000..89e18f3
--- /dev/null
+++ b/src/sql/ConfigEditor/InlineInput.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { AwsAuthDataSourceSecureJsonData } from '../../types';
+import { InlineField, Input } from '@grafana/ui';
+import { FormEvent } from 'react-dom/node_modules/@types/react';
+import { get, set } from 'lodash';
+
+export interface InlineInputProps extends DataSourcePluginOptionsEditorProps<{}, AwsAuthDataSourceSecureJsonData> {
+  jsonDataPath: string;
+  label?: string;
+  tooltip?: string;
+  placeholder?: string;
+  'data-testid'?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+export function InlineInput(props: InlineInputProps) {
+  const onChange = (e: FormEvent<HTMLInputElement>) => {
+    const newOptions = {
+      ...props.options,
+    };
+    set(newOptions.jsonData, props.jsonDataPath, e.currentTarget.value || '');
+    props.onOptionsChange(newOptions);
+  };
+
+  return (
+    <InlineField
+      label={props.label}
+      labelWidth={28}
+      tooltip={props.tooltip}
+      hidden={props.hidden}
+      disabled={props.disabled}
+    >
+      <Input
+        data-testid={props['data-testid']}
+        className="width-30"
+        value={get(props.options.jsonData, props.jsonDataPath, '')}
+        onChange={onChange}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+      />
+    </InlineField>
+  );
+}
diff --git a/src/sql/ConfigEditor/InlineText.test.tsx b/src/sql/ConfigEditor/InlineText.test.tsx
deleted file mode 100644
index 10b22b0..0000000
--- a/src/sql/ConfigEditor/InlineText.test.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { InlineText, TextInput } from './InlineText';
-import { mockDatasourceOptions } from './__mocks__/datasource';
-
-const props = {
-  ...mockDatasourceOptions,
-};
-
-describe('SQLTextInput', () => {
-  it('should show jsonData value', () => {
-    const input: TextInput = {
-      id: 'foo',
-    };
-    render(<InlineText {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} input={input} />);
-    expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();
-  });
-
-  it('should show a custom value', () => {
-    const input: TextInput = {
-      id: 'foo',
-      value: 'foobar',
-    };
-    render(<InlineText {...props} input={input} />);
-    expect(screen.queryByDisplayValue('foobar')).toBeInTheDocument();
-  });
-
-  it('should update jsonData', () => {
-    const input: TextInput = {
-      id: 'foo',
-      'data-testid': 'foo-id',
-    };
-    const onOptionsChange = jest.fn();
-    render(<InlineText {...props} input={input} onOptionsChange={onOptionsChange} />);
-    fireEvent.change(screen.getByTestId('foo-id'), { target: { value: 'bar' } });
-    expect(onOptionsChange).toHaveBeenCalledWith({
-      ...props.options,
-      jsonData: {
-        ...props.options.jsonData,
-        foo: 'bar',
-      },
-    });
-  });
-
-  it('should call custom onChange', () => {
-    const onChange = jest.fn();
-    const input: TextInput = {
-      id: 'foo',
-      'data-testid': 'foo-id',
-      onChange,
-    };
-    render(<InlineText {...props} input={input} />);
-    fireEvent.change(screen.getByTestId('foo-id'), { target: { value: 'bar' } });
-    expect(onChange).toHaveBeenCalled();
-  });
-});
diff --git a/src/sql/ConfigEditor/InlineText.tsx b/src/sql/ConfigEditor/InlineText.tsx
deleted file mode 100644
index bbbe966..0000000
--- a/src/sql/ConfigEditor/InlineText.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from '../../types';
-import { InlineField, Input } from '@grafana/ui';
-import { FormEvent } from 'react-dom/node_modules/@types/react';
-
-export type TextInput = {
-  id: string;
-  label?: string;
-  tooltip?: string;
-  placeholder?: string;
-  'data-testid'?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  value?: string;
-  onChange?: (e: SelectableValue<string>) => void;
-};
-
-type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
-  [n: string]: any;
-};
-
-export interface TextProps
-  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
-  input: TextInput;
-}
-
-export function InlineText(props: TextProps) {
-  const { input } = props;
-
-  const onChange = (e: FormEvent<HTMLInputElement>) => {
-    if (input.onChange) {
-      input.onChange(e);
-    } else {
-      props.onOptionsChange({
-        ...props.options,
-        jsonData: {
-          ...props.options.jsonData,
-          [input.id]: e.currentTarget.value || '',
-        },
-      });
-    }
-  };
-  return (
-    <InlineField
-      label={input.label}
-      labelWidth={28}
-      tooltip={input.tooltip}
-      key={input.id}
-      hidden={input.hidden}
-      disabled={input.disabled}
-    >
-      <Input
-        data-testid={input['data-testid']}
-        className="width-30"
-        value={input.value || props.options.jsonData[input.id] || ''}
-        onChange={onChange}
-        placeholder={input.placeholder}
-        disabled={input.disabled}
-      />
-    </InlineField>
-  );
-}
diff --git a/src/sql/ConfigEditor/Selector.test.tsx b/src/sql/ConfigEditor/Selector.test.tsx
deleted file mode 100644
index 22aaa95..0000000
--- a/src/sql/ConfigEditor/Selector.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Selector, SelectorInput } from './Selector';
-import { mockDatasourceOptions } from './__mocks__/datasource';
-import { select } from 'react-select-event';
-
-const props = {
-  ...mockDatasourceOptions,
-  saveOptions: jest.fn(),
-};
-
-describe('SQLTextInput', () => {
-  it('should show jsonData value', () => {
-    const input: SelectorInput = {
-      id: 'foo',
-      fetch: jest.fn(),
-    };
-    render(<Selector {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} input={input} />);
-    expect(screen.queryByText('bar')).toBeInTheDocument();
-  });
-
-  it('should show a custom value', () => {
-    const input: SelectorInput = {
-      id: 'foo',
-      value: 'foobar',
-      fetch: jest.fn(),
-    };
-    render(<Selector {...props} input={input} />);
-    expect(screen.queryByText('foobar')).toBeInTheDocument();
-  });
-
-  it('should update jsonData', async () => {
-    const input: SelectorInput = {
-      id: 'foo',
-      label: 'foo-id',
-      fetch: jest.fn().mockResolvedValue(['bar']),
-    };
-    const onOptionsChange = jest.fn();
-    render(<Selector {...props} input={input} onOptionsChange={onOptionsChange} />);
-
-    const selectEl = screen.getByLabelText(input.label);
-    expect(selectEl).toBeInTheDocument();
-    await select(selectEl, 'bar', { container: document.body });
-    expect(input.fetch).toHaveBeenCalled();
-    expect(onOptionsChange).toHaveBeenCalledWith({
-      ...props.options,
-      jsonData: {
-        ...props.options.jsonData,
-        foo: 'bar',
-      },
-    });
-  });
-
-  it('should call custom onChange', async () => {
-    const onChange = jest.fn();
-    const input: SelectorInput = {
-      id: 'foo',
-      label: 'foo-id',
-      fetch: jest.fn().mockResolvedValue(['bar']),
-      onChange,
-    };
-    render(<Selector {...props} input={input} />);
-    const selectEl = screen.getByLabelText(input.label);
-    expect(selectEl).toBeInTheDocument();
-    await select(selectEl, 'bar', { container: document.body });
-    expect(input.fetch).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalled();
-  });
-});
diff --git a/src/sql/ConfigEditor/Selector.tsx b/src/sql/ConfigEditor/Selector.tsx
deleted file mode 100644
index 51b6574..0000000
--- a/src/sql/ConfigEditor/Selector.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
-import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData } from '../../types';
-import { ResourceSelector } from '../ResourceSelector';
-
-export type SelectorInput = {
-  id: string;
-  fetch: () => Promise<Array<string | SelectableValue<string>>>;
-  dependencies?: string[];
-  label?: string;
-  'data-testid'?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  onChange?: (e: SelectableValue<string>) => void;
-  value?: string;
-};
-
-type SQLDataSourceJsonData<T extends AwsAuthDataSourceJsonData> = T & {
-  [n: string]: any;
-};
-
-export interface SelectorProps
-  extends DataSourcePluginOptionsEditorProps<SQLDataSourceJsonData<{}>, AwsAuthDataSourceSecureJsonData> {
-  input: SelectorInput;
-  saveOptions: () => Promise<void>;
-}
-
-export function Selector(props: SelectorProps) {
-  const { jsonData } = props.options;
-  const commonProps = {
-    title: jsonData.defaultRegion ? '' : 'select a default region',
-    disabled: !jsonData.defaultRegion,
-    labelWidth: 28,
-    className: 'width-30',
-  };
-
-  // The input is a selector
-  const { input } = props;
-  const onChange = (e: SelectableValue<string> | null) => {
-    if (input.onChange) {
-      input.onChange(e);
-    } else {
-      props.onOptionsChange({
-        ...props.options,
-        jsonData: {
-          ...props.options.jsonData,
-          [input.id]: e ? e.value || '' : e,
-        },
-      });
-    }
-  };
-  const dependencies: string[] = [];
-  if (input.dependencies) {
-    input.dependencies.forEach((dep) => dependencies.push(props.options.jsonData[dep]));
-  }
-  return (
-    <ResourceSelector
-      key={input.id}
-      label={input.label}
-      data-testid={input['data-testid']}
-      onChange={onChange}
-      fetch={input.fetch}
-      value={input.value || props.options.jsonData[input.id]}
-      saveOptions={props.saveOptions}
-      dependencies={dependencies}
-      hidden={input.hidden}
-      disabled={input.disabled}
-      {...commonProps}
-    />
-  );
-}
diff --git a/src/sql/ConfigEditor/index.ts b/src/sql/ConfigEditor/index.ts
index 661e108..f2fd85c 100644
--- a/src/sql/ConfigEditor/index.ts
+++ b/src/sql/ConfigEditor/index.ts
@@ -1,3 +1,2 @@
-export { SQLConfigEditor, SQLConfigEditorProps } from './ConfigEditor';
-export { SelectorInput } from './Selector';
-export { TextInput } from './InlineText';
+export { ConfigSelect, ConfigSelectProps } from './ConfigSelect';
+export { InlineInput, InlineInputProps } from './InlineInput';
diff --git a/yarn.lock b/yarn.lock
index e0210c0..b14d780 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1323,18 +1323,6 @@
     prettier "2.2.1"
     typescript "4.3.4"
 
-"@grafana/runtime@^8.2.1":
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/@grafana/runtime/-/runtime-8.2.3.tgz#4acb749643f02bfc8beeab0747ec8c2b1837276d"
-  integrity sha512-/Pi2IJEn7TyopbMrjw6YyZaAQMtPie1NmRx3FcWuD3EXyeepyrmDrCCP/njsYbre+sQA+M6B7BIsDVtzffTutw==
-  dependencies:
-    "@grafana/data" "8.2.3"
-    "@grafana/e2e-selectors" "8.2.3"
-    "@grafana/ui" "8.2.3"
-    history "4.10.1"
-    systemjs "0.20.19"
-    systemjs-plugin-css "0.1.37"
-
 "@grafana/schema@8.2.3":
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/@grafana/schema/-/schema-8.2.3.tgz#77b4f289ae10b60ab52593a6c373c988ec2aa48d"
@@ -6339,7 +6327,7 @@ highlight-words-core@^1.2.0:
   resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
   integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
 
-history@4.10.1, history@^4.9.0:
+history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -11849,16 +11837,6 @@ symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-systemjs-plugin-css@0.1.37:
-  version "0.1.37"
-  resolved "https://registry.yarnpkg.com/systemjs-plugin-css/-/systemjs-plugin-css-0.1.37.tgz#684847252ca69b7da24a1201094c86274324e82f"
-  integrity sha512-wCGG62zYXuOlNji5FlBjeMFAnLeAO/HQmFg+8UBX/mlHoAKLHlGFYRstlhGKibRU2oxk/BH9DaihOuhhNLi7Kg==
-
-systemjs@0.20.19:
-  version "0.20.19"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.20.19.tgz#c2b9e79c19f4bea53a19b1ed3f974ffb463be949"
-  integrity sha512-H/rKwNEEyej/+IhkmFNmKFyJul8tbH/muiPq5TyNoVTwsGhUjRsN3NlFnFQUvFXA3+GQmsXkCNXU6QKPl779aw==
-
 table@^6.0.4:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/table/-/table-6.0.7.tgz#e45897ffbcc1bcf9e8a87bf420f2c9e5a7a52a34"

From 4f71ded9ac7d34fca431c160ad9b6724b0025b8b Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres.mgotor@gmail.com>
Date: Thu, 11 Nov 2021 16:46:19 +0100
Subject: [PATCH 3/5] update title

---
 src/sql/ConfigEditor/ConfigSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sql/ConfigEditor/ConfigSelect.tsx b/src/sql/ConfigEditor/ConfigSelect.tsx
index 7a0cff8..514ec17 100644
--- a/src/sql/ConfigEditor/ConfigSelect.tsx
+++ b/src/sql/ConfigEditor/ConfigSelect.tsx
@@ -20,7 +20,7 @@ export interface ConfigSelectProps
 export function ConfigSelect(props: ConfigSelectProps) {
   const { jsonData } = props.options;
   const commonProps = {
-    title: jsonData.defaultRegion ? '' : 'save connection details to proceed',
+    title: jsonData.defaultRegion ? '' : 'select a default region',
     disabled: !jsonData.defaultRegion,
     labelWidth: 28,
     className: 'width-30',

From 58ca9f807d722773130e6ab1793dc62d019bbe7a Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres.mgotor@gmail.com>
Date: Fri, 12 Nov 2021 12:11:21 +0100
Subject: [PATCH 4/5] use dependencies directly

---
 src/sql/ConfigEditor/ConfigSelect.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/sql/ConfigEditor/ConfigSelect.tsx b/src/sql/ConfigEditor/ConfigSelect.tsx
index 514ec17..061699e 100644
--- a/src/sql/ConfigEditor/ConfigSelect.tsx
+++ b/src/sql/ConfigEditor/ConfigSelect.tsx
@@ -43,10 +43,7 @@ export function ConfigSelect(props: ConfigSelectProps) {
     props.options.jsonData.endpoint,
     props.options.jsonData.externalId,
     props.options.jsonData.profile,
-  ];
-  if (props.dependencies) {
-    props.dependencies.forEach((dep) => dependencies.push(get(props.options.jsonData, dep)));
-  }
+  ].concat(props.dependencies);
   return (
     <ResourceSelector
       label={props.label}

From 25c9c2ff94550764e52f46a5414964c414433cbf Mon Sep 17 00:00:00 2001
From: Andres Martinez Gotor <andres.mgotor@gmail.com>
Date: Mon, 15 Nov 2021 11:11:18 +0100
Subject: [PATCH 5/5] review

---
 src/sql/ConfigEditor/InlineInput.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sql/ConfigEditor/InlineInput.test.tsx b/src/sql/ConfigEditor/InlineInput.test.tsx
index b59266a..28976f5 100644
--- a/src/sql/ConfigEditor/InlineInput.test.tsx
+++ b/src/sql/ConfigEditor/InlineInput.test.tsx
@@ -8,7 +8,7 @@ const props: InlineInputProps = {
   jsonDataPath: 'foo',
 };
 
-describe('InlineText', () => {
+describe('InlineInput', () => {
   it('should show jsonData value', () => {
     render(<InlineInput {...props} options={{ ...props.options, jsonData: { foo: 'bar' } }} />);
     expect(screen.queryByDisplayValue('bar')).toBeInTheDocument();