Add ConfigEditor util components

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",

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,

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';

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();
+  });
+});

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>
+  );
+}

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();
+  });
+});

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>
+  );
+}

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();
+  });
+});

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}
+    />
+  );
+}