Test plugins: Add datasource test plugin with field tests (#95472)

* add new test plugin * add some field validation tests * update lockfile * fix bad test file name
2024-11-01 08:25:27 +01:00
parent f3bdf4455c
commit c29ed503db
19 changed files with 500 additions and 1 deletions
@@ -0,0 +1,96 @@
+import { ChangeEvent } from 'react';
+import { Checkbox, InlineField, InlineSwitch, Input, SecretInput, Select } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, SelectableValue, toOption } from '@grafana/data';
+import { MyDataSourceOptions, MySecureJsonData } from '../types';
+
+interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions, MySecureJsonData> {}
+
+export function ConfigEditor(props: Props) {
+  const { onOptionsChange, options } = props;
+  const { jsonData, secureJsonFields, secureJsonData } = options;
+
+  const onJsonDataChange = (key: string, value: string | number | boolean) => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        ...jsonData,
+        [key]: value,
+      },
+    });
+  };
+
+  // Secure field (only sent to the backend)
+  const onSecureJsonDataChange = (key: string, value: string | number) => {
+    onOptionsChange({
+      ...options,
+      secureJsonData: {
+        [key]: value,
+      },
+    });
+  };
+
+  const onResetAPIKey = () => {
+    onOptionsChange({
+      ...options,
+      secureJsonFields: {
+        ...options.secureJsonFields,
+        apiKey: false,
+      },
+      secureJsonData: {
+        ...options.secureJsonData,
+        apiKey: '',
+      },
+    });
+  };
+
+  return (
+    <>
+      <InlineField label="Path" labelWidth={14} interactive tooltip={'Json field returned to frontend'}>
+        <Input
+          id="config-editor-path"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('path', e.target.value)}
+          value={jsonData.path}
+          placeholder="Enter the path, e.g. /api/v1"
+          width={40}
+        />
+      </InlineField>
+      <InlineField label="API Key" labelWidth={14} interactive tooltip={'Secure json field (backend only)'}>
+        <SecretInput
+          required
+          id="config-editor-api-key"
+          isConfigured={secureJsonFields.apiKey}
+          value={secureJsonData?.apiKey}
+          placeholder="Enter your API key"
+          width={40}
+          onReset={onResetAPIKey}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onSecureJsonDataChange('path', e.target.value)}
+        />
+      </InlineField>
+      <InlineField label="Switch Enabled">
+        <InlineSwitch
+          width={40}
+          label="Switch Enabled"
+          value={jsonData.switchEnabled ?? false}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('switchEnabled', e.target.checked)}
+        />
+      </InlineField>
+      <InlineField label="Checkbox Enabled">
+        <Checkbox
+          width={40}
+          id="config-checkbox-enabled"
+          value={jsonData.checkboxEnabled}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('checkboxEnabled', e.target.checked)}
+        />
+      </InlineField>
+      <InlineField label="Auth type">
+        <Select
+          width={40}
+          inputId="config-auth-type"
+          value={jsonData.authType ?? 'keys'}
+          options={['keys', 'credentials'].map(toOption)}
+          onChange={(e: SelectableValue<string>) => onJsonDataChange('authType', e.value!)}
+        />
+      </InlineField>
+    </>
+  );
+}
@@ -0,0 +1,45 @@
+import { ChangeEvent } from 'react';
+import { InlineField, Input, Stack } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
+import { DataSource } from '../datasource';
+import { MyDataSourceOptions, MyQuery } from '../types';
+
+type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
+
+export function QueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, queryText: event.target.value });
+  };
+
+  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, constant: parseFloat(event.target.value) });
+    // executes the query
+    onRunQuery();
+  };
+
+  const { queryText, constant } = query;
+
+  return (
+    <Stack gap={0}>
+      <InlineField label="Constant">
+        <Input
+          id="query-editor-constant"
+          onChange={onConstantChange}
+          value={constant}
+          width={8}
+          type="number"
+          step="0.1"
+        />
+      </InlineField>
+      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+        <Input
+          id="query-editor-query-text"
+          onChange={onQueryTextChange}
+          value={queryText || ''}
+          required
+          placeholder="Enter a query"
+        />
+      </InlineField>
+    </Stack>
+  );
+}