@grafana/plugin-ui 0.12.0 → 0.13.0

package/dist/cjs/test-utils.cjs

@@ -0,0 +1,269 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var data = require('@grafana/data');
+var runtime = require('@grafana/runtime');
+var chance = require('chance');
+var react = require('@testing-library/react');
+var userEvent = require('@testing-library/user-event');
+var lodash = require('lodash');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var userEvent__default = /*#__PURE__*/_interopDefaultCompat(userEvent);
+
+const generateBoolean = () => chance.Chance().pickone([true, false]);
+const undefinedOr = (fn) => chance.Chance().pickone([undefined, fn()]);
+const generateArrayOf = (fn, numberOf = 3) => Array.from(new Array(numberOf), () => fn());
+const openSelect = (container, optionLabel) => {
+  const selectInput = react.within(container).getByRole("textbox");
+  react.fireEvent.blur(selectInput);
+  userEvent__default.default.type(selectInput, optionLabel != null ? optionLabel : "{arrowdown}");
+};
+const selectOption = async (container, optionLabel, typeOptionLabel) => {
+  openSelect(container, typeOptionLabel ? optionLabel : undefined);
+  const option = await react.waitFor(() => react.within(container).getByText(optionLabel));
+  userEvent__default.default.click(option);
+};
+const generateOptions = () => {
+  const numberOfOptions = 5;
+  return Array.from(new Array(numberOfOptions), () => {
+    const name = chance.Chance().name();
+    return {
+      label: name,
+      value: lodash.kebabCase(name)
+    };
+  });
+};
+
+const mockDataSourcePluginMeta = () => ({
+  builtIn: generateBoolean(),
+  metrics: generateBoolean(),
+  logs: generateBoolean(),
+  annotations: generateBoolean(),
+  alerting: generateBoolean(),
+  tracing: generateBoolean(),
+  mixed: generateBoolean(),
+  hasQueryHelp: generateBoolean(),
+  category: chance.Chance().word(),
+  queryOptions: {
+    cacheTimeout: generateBoolean(),
+    maxDataPoints: generateBoolean(),
+    minInterval: generateBoolean()
+  },
+  sort: 1,
+  streaming: generateBoolean(),
+  unlicensed: generateBoolean(),
+  id: chance.Chance().word(),
+  name: chance.Chance().word(),
+  type: mockPluginType(),
+  info: mockPluginMetaInfo(),
+  module: chance.Chance().word(),
+  baseUrl: chance.Chance().word()
+});
+const mockPluginMetaInfo = () => ({
+  author: {
+    name: chance.Chance().word(),
+    url: chance.Chance().word()
+  },
+  description: chance.Chance().word(),
+  links: [],
+  logos: {
+    large: chance.Chance().word(),
+    small: chance.Chance().word()
+  },
+  screenshots: [],
+  updated: chance.Chance().word(),
+  version: chance.Chance().word()
+});
+const mockPluginMeta = () => ({
+  id: chance.Chance().word(),
+  name: chance.Chance().word(),
+  type: mockPluginType(),
+  info: mockPluginMetaInfo(),
+  includes: [mockPluginInclude()],
+  state: mockPluginState(),
+  module: chance.Chance().word(),
+  baseUrl: chance.Chance().word(),
+  dependencies: mockPluginDependencies(),
+  jsonData: {},
+  secureJsonData: {},
+  enabled: generateBoolean(),
+  defaultNavUrl: chance.Chance().word(),
+  hasUpdate: generateBoolean(),
+  enterprise: generateBoolean(),
+  latestVersion: chance.Chance().word(),
+  pinned: generateBoolean(),
+  signature: mockPluginSignatureStatus(),
+  live: generateBoolean()
+});
+const mockPluginInclude = () => ({
+  type: mockPluginIncludeType(),
+  name: chance.Chance().word(),
+  path: chance.Chance().word(),
+  icon: chance.Chance().word(),
+  role: chance.Chance().word(),
+  addToNav: generateBoolean(),
+  component: chance.Chance().word()
+});
+const mockPluginType = () => chance.Chance().pickone([data.PluginType.panel, data.PluginType.datasource, data.PluginType.app, data.PluginType.renderer]);
+const mockPluginIncludeType = () => chance.Chance().pickone([
+  data.PluginIncludeType.dashboard,
+  data.PluginIncludeType.page,
+  data.PluginIncludeType.panel,
+  data.PluginIncludeType.datasource
+]);
+const mockPluginState = () => chance.Chance().pickone([data.PluginState.alpha, data.PluginState.beta, data.PluginState.deprecated]);
+const mockPluginDependencies = () => ({
+  grafanaVersion: chance.Chance().word(),
+  plugins: []
+});
+const mockPluginSignatureStatus = () => chance.Chance().pickone([
+  data.PluginSignatureStatus.internal,
+  data.PluginSignatureStatus.valid,
+  data.PluginSignatureStatus.invalid,
+  data.PluginSignatureStatus.modified,
+  data.PluginSignatureStatus.missing
+]);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DatasourceMock extends runtime.DataSourceWithBackend {
+  constructor() {
+    super(...arguments);
+    // DataSourceWithBackend
+    __publicField(this, "query", jest.fn());
+    __publicField(this, "filterQuery", undefinedOr(generateBoolean));
+    __publicField(this, "applyTemplateVariables", jest.fn());
+    __publicField(this, "getResource", jest.fn());
+    __publicField(this, "postResource", jest.fn());
+    __publicField(this, "callHealthCheck", jest.fn());
+    __publicField(this, "testDatasource", jest.fn());
+    // DataSourceApi
+    __publicField(this, "uid", chance.Chance().guid());
+    __publicField(this, "name", chance.Chance().word());
+    __publicField(this, "id", 1);
+    __publicField(this, "type", chance.Chance().word());
+    __publicField(this, "interval", chance.Chance().word());
+    __publicField(this, "importQueries", jest.fn());
+    __publicField(this, "init", jest.fn());
+    __publicField(this, "getQueryHints", jest.fn().mockReturnValue([mockQueryHint()]));
+    __publicField(this, "getQueryDisplayText", jest.fn().mockReturnValue(chance.Chance().word()));
+    __publicField(this, "metricFindQuery", jest.fn());
+    __publicField(this, "getTagKeys", jest.fn());
+    __publicField(this, "getTagValues", jest.fn());
+    __publicField(this, "components", {});
+    __publicField(this, "meta", mockDataSourcePluginMeta());
+    __publicField(this, "targetContainsTemplate", jest.fn());
+    __publicField(this, "modifyQuery", jest.fn());
+    __publicField(this, "getHighlighterExpression", jest.fn());
+    __publicField(this, "languageProvider", jest.fn());
+    __publicField(this, "getVersion", jest.fn());
+    __publicField(this, "interpolateVariablesInQueries", jest.fn());
+    __publicField(this, "annotations", {});
+    __publicField(this, "annotationQuery", jest.fn());
+    __publicField(this, "streamOptionsProvider", jest.fn());
+    __publicField(this, "getRef", jest.fn());
+    __publicField(this, "getRequestHeaders", jest.fn());
+  }
+}
+const mockDatasource = () => new DatasourceMock(mockDatasourceInstanceSettings());
+const mockQueryHint = () => ({
+  type: chance.Chance().word(),
+  label: chance.Chance().word(),
+  fix: {
+    label: chance.Chance().word(),
+    action: {
+      type: chance.Chance().word(),
+      query: chance.Chance().word(),
+      preventSubmit: generateBoolean()
+    }
+  }
+});
+const mockDatasourceInstanceSettings = () => ({
+  id: chance.Chance().integer(),
+  uid: chance.Chance().word(),
+  type: chance.Chance().word(),
+  name: chance.Chance().word(),
+  meta: mockDataSourcePluginMeta(),
+  url: chance.Chance().word(),
+  jsonData: {},
+  username: chance.Chance().word(),
+  password: chance.Chance().word(),
+  database: chance.Chance().word(),
+  basicAuth: chance.Chance().word(),
+  withCredentials: generateBoolean(),
+  access: chance.Chance().pickone(["direct", "proxy"]),
+  readOnly: false
+});
+
+const mockDataQuery = () => ({
+  refId: chance.Chance().word(),
+  hide: false,
+  key: chance.Chance().guid(),
+  queryType: chance.Chance().word(),
+  datasource: undefinedOr(() => chance.Chance().word())
+});
+
+const mockQueryEditorProps = () => ({
+  datasource: {},
+  query: {
+    refId: chance.Chance().word(),
+    hide: false,
+    key: chance.Chance().word(),
+    queryType: chance.Chance().word(),
+    dataTopic: data.DataTopic.Annotations,
+    datasource: chance.Chance().pickone([chance.Chance().word(), null])
+  },
+  onRunQuery: jest.fn(),
+  onChange: jest.fn(),
+  onBlur: jest.fn(),
+  data: {
+    state: mockLoadingState(),
+    series: [],
+    annotations: [],
+    timeRange: mockTimeRange()
+  },
+  range: mockTimeRange(),
+  history: []
+});
+const mockLoadingState = () => chance.Chance().pickone([
+  data.LoadingState.NotStarted,
+  data.LoadingState.Loading,
+  data.LoadingState.Streaming,
+  data.LoadingState.Done,
+  data.LoadingState.Error
+]);
+const mockTimeRange = () => ({
+  from: data.dateTime(),
+  to: data.dateTime(),
+  raw: {
+    from: data.dateTime(),
+    to: data.dateTime()
+  }
+});
+
+exports.generateArrayOf = generateArrayOf;
+exports.generateBoolean = generateBoolean;
+exports.generateOptions = generateOptions;
+exports.mockDataQuery = mockDataQuery;
+exports.mockDataSourcePluginMeta = mockDataSourcePluginMeta;
+exports.mockDatasource = mockDatasource;
+exports.mockDatasourceInstanceSettings = mockDatasourceInstanceSettings;
+exports.mockLoadingState = mockLoadingState;
+exports.mockPluginDependencies = mockPluginDependencies;
+exports.mockPluginInclude = mockPluginInclude;
+exports.mockPluginIncludeType = mockPluginIncludeType;
+exports.mockPluginMeta = mockPluginMeta;
+exports.mockPluginMetaInfo = mockPluginMetaInfo;
+exports.mockPluginSignatureStatus = mockPluginSignatureStatus;
+exports.mockPluginState = mockPluginState;
+exports.mockPluginType = mockPluginType;
+exports.mockQueryEditorProps = mockQueryEditorProps;
+exports.mockTimeRange = mockTimeRange;
+exports.openSelect = openSelect;
+exports.selectOption = selectOption;
+exports.undefinedOr = undefinedOr;
+//# sourceMappingURL=test-utils.cjs.map

package/dist/cjs/test-utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.cjs","sources":["../../src/test/mocks/utils.ts","../../src/test/mocks/Plugin.ts","../../src/test/mocks/Datasource.ts","../../src/test/mocks/DataQuery.ts","../../src/test/mocks/QueryEditorProps.ts"],"sourcesContent":["import { type SelectableValue } from '@grafana/data';\nimport { Chance } from 'chance';\nimport { within, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { kebabCase } from 'lodash';\n\nexport const generateBoolean = () => Chance().pickone([true, false]);\n\nexport const undefinedOr = (fn: Function) => Chance().pickone([undefined, fn()]);\n\nexport const generateArrayOf = (fn: Function, numberOf = 3) => Array.from(new Array(numberOf), () => fn());\n\n// react-select (used by @grafana/ui) renders very differently from the native Select HTML element\n// and because they are not accessible and do not pass data-testid or aria-labels down,\n// it is difficult to grab the correct element and simulate selecting different options\n// the helper functions below can be used instead\n\n/**\n * Opens a Select or MultiSelect dropdown\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option text we want to type or search\n */\nexport const openSelect = (container: HTMLElement, optionLabel?: string) => {\n  const selectInput = within(container).getByRole('textbox');\n\n  // this needs to be here to support autoFocus=true prop\n  fireEvent.blur(selectInput);\n\n  // if we have an async Select, we want to type the option label to make the option available\n  // otherwise, just press down to open the dropdown\n  userEvent.type(selectInput, optionLabel ?? '{arrowdown}');\n};\n\n/**\n * Selects an option from the Select or MultiSelect component\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option we want to select\n * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect\n */\nexport const selectOption = async (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => {\n  openSelect(container, typeOptionLabel ? optionLabel : undefined);\n\n  // wait for the list to show\n  const option = await waitFor(() => within(container).getByText(optionLabel));\n\n  // select the option\n  userEvent.click(option);\n};\n\nexport const generateOptions = (): Array<SelectableValue<string>> => {\n  const numberOfOptions = 5;\n\n  return Array.from(new Array(numberOfOptions), () => {\n    const name = Chance().name();\n\n    return {\n      label: name,\n      value: kebabCase(name),\n    };\n  });\n};\n","import { Chance } from 'chance';\nimport {\n  type DataSourcePluginMeta,\n  type PluginMetaInfo,\n  type PluginMeta,\n  PluginState,\n  PluginSignatureStatus,\n  type PluginInclude,\n  PluginIncludeType,\n  type PluginDependencies,\n  PluginType,\n} from '@grafana/data';\nimport { generateBoolean } from './utils';\n\nexport const mockDataSourcePluginMeta = (): DataSourcePluginMeta => ({\n  builtIn: generateBoolean(),\n  metrics: generateBoolean(),\n  logs: generateBoolean(),\n  annotations: generateBoolean(),\n  alerting: generateBoolean(),\n  tracing: generateBoolean(),\n  mixed: generateBoolean(),\n  hasQueryHelp: generateBoolean(),\n  category: Chance().word(),\n  queryOptions: {\n    cacheTimeout: generateBoolean(),\n    maxDataPoints: generateBoolean(),\n    minInterval: generateBoolean(),\n  },\n  sort: 1,\n  streaming: generateBoolean(),\n  unlicensed: generateBoolean(),\n  id: Chance().word(),\n  name: Chance().word(),\n  type: mockPluginType(),\n  info: mockPluginMetaInfo(),\n  module: Chance().word(),\n  baseUrl: Chance().word(),\n});\n\nexport const mockPluginMetaInfo = (): PluginMetaInfo => ({\n  author: {\n    name: Chance().word(),\n    url: Chance().word(),\n  },\n  description: Chance().word(),\n  links: [],\n  logos: {\n    large: Chance().word(),\n    small: Chance().word(),\n  },\n  screenshots: [],\n  updated: Chance().word(),\n  version: Chance().word(),\n});\n\nexport const mockPluginMeta = (): PluginMeta => ({\n  id: Chance().word(),\n  name: Chance().word(),\n  type: mockPluginType(),\n  info: mockPluginMetaInfo(),\n  includes: [mockPluginInclude()],\n  state: mockPluginState(),\n  module: Chance().word(),\n  baseUrl: Chance().word(),\n  dependencies: mockPluginDependencies(),\n  jsonData: {},\n  secureJsonData: {},\n  enabled: generateBoolean(),\n  defaultNavUrl: Chance().word(),\n  hasUpdate: generateBoolean(),\n  enterprise: generateBoolean(),\n  latestVersion: Chance().word(),\n  pinned: generateBoolean(),\n  signature: mockPluginSignatureStatus(),\n  live: generateBoolean(),\n});\n\nexport const mockPluginInclude = (): PluginInclude => ({\n  type: mockPluginIncludeType(),\n  name: Chance().word(),\n  path: Chance().word(),\n  icon: Chance().word(),\n  role: Chance().word(),\n  addToNav: generateBoolean(),\n  component: Chance().word(),\n});\n\nexport const mockPluginType = (): PluginType =>\n  Chance().pickone([PluginType.panel, PluginType.datasource, PluginType.app, PluginType.renderer]);\n\nexport const mockPluginIncludeType = (): PluginIncludeType =>\n  Chance().pickone([\n    PluginIncludeType.dashboard,\n    PluginIncludeType.page,\n    PluginIncludeType.panel,\n    PluginIncludeType.datasource,\n  ]);\n\nexport const mockPluginState = (): PluginState =>\n  Chance().pickone([PluginState.alpha, PluginState.beta, PluginState.deprecated]);\n\nexport const mockPluginDependencies = (): PluginDependencies => ({\n  grafanaVersion: Chance().word(),\n  plugins: [],\n});\n\nexport const mockPluginSignatureStatus = (): PluginSignatureStatus =>\n  Chance().pickone([\n    PluginSignatureStatus.internal,\n    PluginSignatureStatus.valid,\n    PluginSignatureStatus.invalid,\n    PluginSignatureStatus.modified,\n    PluginSignatureStatus.missing,\n  ]);\n","import { type DataSourceInstanceSettings, type QueryHint } from '@grafana/data';\nimport { DataSourceWithBackend } from '@grafana/runtime';\nimport { Chance } from 'chance';\nimport { mockDataSourcePluginMeta } from './Plugin';\nimport { generateBoolean, undefinedOr } from './utils';\n\nclass DatasourceMock extends DataSourceWithBackend {\n  // DataSourceWithBackend\n  query = jest.fn();\n  filterQuery = undefinedOr(generateBoolean);\n  applyTemplateVariables = jest.fn();\n  getResource = jest.fn();\n  postResource = jest.fn();\n  callHealthCheck = jest.fn();\n  testDatasource = jest.fn();\n  // DataSourceApi\n  uid = Chance().guid();\n  name = Chance().word();\n  id = 1;\n  type = Chance().word();\n  interval = Chance().word();\n  importQueries = jest.fn();\n  init = jest.fn();\n  getQueryHints = jest.fn().mockReturnValue([mockQueryHint()]);\n  getQueryDisplayText = jest.fn().mockReturnValue(Chance().word());\n  metricFindQuery = jest.fn();\n  getTagKeys = jest.fn();\n  getTagValues = jest.fn();\n  components = {};\n  meta = mockDataSourcePluginMeta();\n  targetContainsTemplate = jest.fn();\n  modifyQuery = jest.fn();\n  getHighlighterExpression = jest.fn();\n  languageProvider = jest.fn();\n  getVersion = jest.fn();\n  interpolateVariablesInQueries = jest.fn();\n  annotations = {};\n  annotationQuery = jest.fn();\n  streamOptionsProvider = jest.fn();\n  getRef = jest.fn();\n  protected getRequestHeaders = jest.fn();\n}\n\nexport const mockDatasource = () => new DatasourceMock(mockDatasourceInstanceSettings());\n\nconst mockQueryHint = (): QueryHint => ({\n  type: Chance().word(),\n  label: Chance().word(),\n  fix: {\n    label: Chance().word(),\n    action: {\n      type: Chance().word(),\n      query: Chance().word(),\n      preventSubmit: generateBoolean(),\n    },\n  },\n});\n\nexport const mockDatasourceInstanceSettings = (): DataSourceInstanceSettings => ({\n  id: Chance().integer(),\n  uid: Chance().word(),\n  type: Chance().word(),\n  name: Chance().word(),\n  meta: mockDataSourcePluginMeta(),\n  url: Chance().word(),\n  jsonData: {},\n  username: Chance().word(),\n  password: Chance().word(),\n  database: Chance().word(),\n  basicAuth: Chance().word(),\n  withCredentials: generateBoolean(),\n  access: Chance().pickone(['direct', 'proxy']),\n  readOnly: false,\n});\n","import { type DataQuery } from '@grafana/data';\nimport { Chance } from 'chance';\nimport { undefinedOr } from './utils';\n\nexport const mockDataQuery = (): DataQuery => ({\n  refId: Chance().word(),\n  hide: false,\n  key: Chance().guid(),\n  queryType: Chance().word(),\n  datasource: undefinedOr(() => Chance().word()),\n});\n","import { type QueryEditorProps, DataTopic, dateTime, LoadingState, type TimeRange } from '@grafana/data';\nimport { Chance } from 'chance';\n\nexport const mockQueryEditorProps = (): QueryEditorProps<any, any, any> => ({\n  datasource: {},\n  query: {\n    refId: Chance().word(),\n    hide: false,\n    key: Chance().word(),\n    queryType: Chance().word(),\n    dataTopic: DataTopic.Annotations,\n    datasource: Chance().pickone([Chance().word(), null]),\n  },\n  onRunQuery: jest.fn(),\n  onChange: jest.fn(),\n  onBlur: jest.fn(),\n  data: {\n    state: mockLoadingState(),\n    series: [],\n    annotations: [],\n    timeRange: mockTimeRange(),\n  },\n  range: mockTimeRange(),\n  history: [],\n});\n\nexport const mockLoadingState = (): LoadingState =>\n  Chance().pickone([\n    LoadingState.NotStarted,\n    LoadingState.Loading,\n    LoadingState.Streaming,\n    LoadingState.Done,\n    LoadingState.Error,\n  ]);\n\nexport const mockTimeRange = (): TimeRange => ({\n  from: dateTime(),\n  to: dateTime(),\n  raw: {\n    from: dateTime(),\n    to: dateTime(),\n  },\n});\n"],"names":["Chance","within","fireEvent","userEvent","waitFor","kebabCase","PluginType","PluginIncludeType","PluginState","PluginSignatureStatus","DataSourceWithBackend","DataTopic","LoadingState","dateTime"],"mappings":"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"}

package/dist/cjs/test-utils.d.cts

@@ -0,0 +1,78 @@
+import * as _grafana_data from '@grafana/data';
+import { DataSourceInstanceSettings, DataQuery, DataSourcePluginMeta, PluginMetaInfo, PluginMeta, PluginInclude, PluginType, PluginIncludeType, PluginState, PluginDependencies, PluginSignatureStatus, QueryEditorProps, LoadingState, TimeRange, SelectableValue } from '@grafana/data';
+import { DataSourceWithBackend } from '@grafana/runtime';
+
+declare class DatasourceMock extends DataSourceWithBackend {
+    query: jest.Mock<any, any>;
+    filterQuery: any;
+    applyTemplateVariables: jest.Mock<any, any>;
+    getResource: jest.Mock<any, any>;
+    postResource: jest.Mock<any, any>;
+    callHealthCheck: jest.Mock<any, any>;
+    testDatasource: jest.Mock<any, any>;
+    uid: string;
+    name: string;
+    id: number;
+    type: string;
+    interval: string;
+    importQueries: jest.Mock<any, any>;
+    init: jest.Mock<any, any>;
+    getQueryHints: jest.Mock<any, any>;
+    getQueryDisplayText: jest.Mock<any, any>;
+    metricFindQuery: jest.Mock<any, any>;
+    getTagKeys: jest.Mock<any, any>;
+    getTagValues: jest.Mock<any, any>;
+    components: {};
+    meta: _grafana_data.DataSourcePluginMeta<{}>;
+    targetContainsTemplate: jest.Mock<any, any>;
+    modifyQuery: jest.Mock<any, any>;
+    getHighlighterExpression: jest.Mock<any, any>;
+    languageProvider: jest.Mock<any, any>;
+    getVersion: jest.Mock<any, any>;
+    interpolateVariablesInQueries: jest.Mock<any, any>;
+    annotations: {};
+    annotationQuery: jest.Mock<any, any>;
+    streamOptionsProvider: jest.Mock<any, any>;
+    getRef: jest.Mock<any, any>;
+    protected getRequestHeaders: jest.Mock<any, any>;
+}
+declare const mockDatasource: () => DatasourceMock;
+declare const mockDatasourceInstanceSettings: () => DataSourceInstanceSettings;
+
+declare const mockDataQuery: () => DataQuery;
+
+declare const mockDataSourcePluginMeta: () => DataSourcePluginMeta;
+declare const mockPluginMetaInfo: () => PluginMetaInfo;
+declare const mockPluginMeta: () => PluginMeta;
+declare const mockPluginInclude: () => PluginInclude;
+declare const mockPluginType: () => PluginType;
+declare const mockPluginIncludeType: () => PluginIncludeType;
+declare const mockPluginState: () => PluginState;
+declare const mockPluginDependencies: () => PluginDependencies;
+declare const mockPluginSignatureStatus: () => PluginSignatureStatus;
+
+declare const mockQueryEditorProps: () => QueryEditorProps<any, any, any>;
+declare const mockLoadingState: () => LoadingState;
+declare const mockTimeRange: () => TimeRange;
+
+declare const generateBoolean: () => boolean;
+declare const undefinedOr: (fn: Function) => any;
+declare const generateArrayOf: (fn: Function, numberOf?: number) => any[];
+/**
+ * Opens a Select or MultiSelect dropdown
+ *
+ * @param {HTMLElement} container The container wrapping the Select or MultiSelect component
+ * @param {string} optionLabel The option text we want to type or search
+ */
+declare const openSelect: (container: HTMLElement, optionLabel?: string) => void;
+/**
+ * Selects an option from the Select or MultiSelect component
+ *
+ * @param {HTMLElement} container The container wrapping the Select or MultiSelect component
+ * @param {string} optionLabel The option we want to select
+ * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect
+ */
+declare const selectOption: (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => Promise<void>;
+declare const generateOptions: () => Array<SelectableValue<string>>;
+
+export { generateArrayOf, generateBoolean, generateOptions, mockDataQuery, mockDataSourcePluginMeta, mockDatasource, mockDatasourceInstanceSettings, mockLoadingState, mockPluginDependencies, mockPluginInclude, mockPluginIncludeType, mockPluginMeta, mockPluginMetaInfo, mockPluginSignatureStatus, mockPluginState, mockPluginType, mockQueryEditorProps, mockTimeRange, openSelect, selectOption, undefinedOr };

package/dist/esm/components/ConfigEditor/AdvancedSettings/AdvancedHttpSettings.js

@@ -1,7 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css, cx } from '@emotion/css';
 import { InlineField, TagsInput, Input } from '@grafana/ui';
-import 'react';
 import { ConfigSubSection } from '../ConfigSection/ConfigSubSection.js';
 import '@grafana/data';
 
@@ -33,51 +32,48 @@ const AdvancedHttpSettings = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ jsxs(ConfigSubSection, { title: "Advanced HTTP settings", className: cx(styles.container, className), children: [
-    /* @__PURE__ */ jsx(
-      InlineField,
+  return /* @__PURE__ */ React.createElement(ConfigSubSection, { title: "Advanced HTTP settings", className: cx(styles.container, className) }, /* @__PURE__ */ React.createElement(
+    InlineField,
+    {
+      htmlFor: "advanced-http-cookies",
+      label: "Allowed cookies",
+      labelWidth: 24,
+      tooltip: "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
+      disabled: config.readOnly,
+      grow: true
+    },
+    /* @__PURE__ */ React.createElement(
+      TagsInput,
       {
-        htmlFor: "advanced-http-cookies",
-        label: "Allowed cookies",
-        labelWidth: 24,
-        tooltip: "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
-        disabled: config.readOnly,
-        grow: true,
-        children: /* @__PURE__ */ jsx(
-          TagsInput,
-          {
-            id: "advanced-http-cookies",
-            placeholder: "New cookie (hit enter to add)",
-            tags: config.jsonData.keepCookies,
-            onChange: onCookiesChange
-          }
-        )
+        id: "advanced-http-cookies",
+        placeholder: "New cookie (hit enter to add)",
+        tags: config.jsonData.keepCookies,
+        onChange: onCookiesChange
       }
-    ),
-    /* @__PURE__ */ jsx(
-      InlineField,
+    )
+  ), /* @__PURE__ */ React.createElement(
+    InlineField,
+    {
+      htmlFor: "advanced-http-timeout",
+      label: "Timeout",
+      labelWidth: 24,
+      tooltip: "HTTP request timeout in seconds",
+      disabled: config.readOnly,
+      grow: true
+    },
+    /* @__PURE__ */ React.createElement(
+      Input,
       {
-        htmlFor: "advanced-http-timeout",
-        label: "Timeout",
-        labelWidth: 24,
-        tooltip: "HTTP request timeout in seconds",
-        disabled: config.readOnly,
-        grow: true,
-        children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: "advanced-http-timeout",
-            type: "number",
-            min: 0,
-            placeholder: "Timeout in seconds",
-            "aria-label": "Timeout in seconds",
-            value: config.jsonData.timeout,
-            onChange: onTimeoutChange
-          }
-        )
+        id: "advanced-http-timeout",
+        type: "number",
+        min: 0,
+        placeholder: "Timeout in seconds",
+        "aria-label": "Timeout in seconds",
+        value: config.jsonData.timeout,
+        onChange: onTimeoutChange
       }
     )
-  ] });
+  ));
 };
 
 export { AdvancedHttpSettings };

package/dist/esm/components/ConfigEditor/AdvancedSettings/AdvancedHttpSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedHttpSettings.js","sources":["../../../../../src/components/ConfigEditor/AdvancedSettings/AdvancedHttpSettings.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { InlineField, Input, TagsInput } from '@grafana/ui';\nimport { ConfigSubSection } from '../ConfigSection';\nimport { type Config, type OnChangeHandler } from '../types';\n\nexport type Props<C extends Config = Config> = {\n  config: C;\n  onChange: OnChangeHandler<C>;\n  className?: string;\n};\n\nexport const AdvancedHttpSettings: <C extends Config = Config>(props: Props<C>) => JSX.Element = ({\n  config,\n  onChange,\n  className,\n}) => {\n  const onCookiesChange = (cookies: string[]) => {\n    onChange({\n      ...config,\n      jsonData: {\n        ...config.jsonData,\n        keepCookies: cookies,\n      },\n    });\n  };\n\n  const onTimeoutChange = (event: React.FormEvent<HTMLInputElement>) => {\n    onChange({\n      ...config,\n      jsonData: {\n        ...config.jsonData,\n        timeout: parseInt(event.currentTarget.value, 10),\n      },\n    });\n  };\n\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <ConfigSubSection title=\"Advanced HTTP settings\" className={cx(styles.container, className)}>\n      <InlineField\n        htmlFor=\"advanced-http-cookies\"\n        label=\"Allowed cookies\"\n        labelWidth={24}\n        tooltip=\"Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.\"\n        disabled={config.readOnly}\n        grow\n      >\n        <TagsInput\n          id=\"advanced-http-cookies\"\n          placeholder=\"New cookie (hit enter to add)\"\n          tags={config.jsonData.keepCookies}\n          onChange={onCookiesChange}\n        />\n      </InlineField>\n\n      <InlineField\n        htmlFor=\"advanced-http-timeout\"\n        label=\"Timeout\"\n        labelWidth={24}\n        tooltip=\"HTTP request timeout in seconds\"\n        disabled={config.readOnly}\n        grow\n      >\n        <Input\n          id=\"advanced-http-timeout\"\n          type=\"number\"\n          min={0}\n          placeholder=\"Timeout in seconds\"\n          aria-label=\"Timeout in seconds\"\n          value={config.jsonData.timeout}\n          onChange={onTimeoutChange}\n        />\n      </InlineField>\n    </ConfigSubSection>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,uBAAoF,CAAC;AAAA,EAChG,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,eAAA,GAAkB,CAAC,OAAsB,KAAA;AAC7C,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,MAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,MAAO,CAAA,QAAA;AAAA,QACV,WAAa,EAAA;AAAA;AACf,KACD,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA6C,KAAA;AACpE,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,MAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,MAAO,CAAA,QAAA;AAAA,QACV,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,aAAA,CAAc,OAAO,EAAE;AAAA;AACjD,KACD,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAA,IAAA,CAAC,oBAAiB,KAAM,EAAA,wBAAA,EAAyB,WAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,SAAS,CACxF,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,uBAAA;AAAA,QACR,KAAM,EAAA,iBAAA;AAAA,QACN,UAAY,EAAA,EAAA;AAAA,QACZ,OAAQ,EAAA,0HAAA;AAAA,QACR,UAAU,MAAO,CAAA,QAAA;AAAA,QACjB,IAAI,EAAA,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,uBAAA;AAAA,YACH,WAAY,EAAA,+BAAA;AAAA,YACZ,IAAA,EAAM,OAAO,QAAS,CAAA,WAAA;AAAA,YACtB,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA,KACF;AAAA,oBAEA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,uBAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,UAAY,EAAA,EAAA;AAAA,QACZ,OAAQ,EAAA,iCAAA;AAAA,QACR,UAAU,MAAO,CAAA,QAAA;AAAA,QACjB,IAAI,EAAA,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,uBAAA;AAAA,YACH,IAAK,EAAA,QAAA;AAAA,YACL,GAAK,EAAA,CAAA;AAAA,YACL,WAAY,EAAA,oBAAA;AAAA,YACZ,YAAW,EAAA,oBAAA;AAAA,YACX,KAAA,EAAO,OAAO,QAAS,CAAA,OAAA;AAAA,YACvB,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AdvancedHttpSettings.js","sources":["../../../../../src/components/ConfigEditor/AdvancedSettings/AdvancedHttpSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { InlineField, Input, TagsInput } from '@grafana/ui';\nimport { ConfigSubSection } from '../ConfigSection';\nimport { type Config, type OnChangeHandler } from '../types';\n\nexport type Props<C extends Config = Config> = {\n  config: C;\n  onChange: OnChangeHandler<C>;\n  className?: string;\n};\n\nexport const AdvancedHttpSettings: <C extends Config = Config>(props: Props<C>) => JSX.Element = ({\n  config,\n  onChange,\n  className,\n}) => {\n  const onCookiesChange = (cookies: string[]) => {\n    onChange({\n      ...config,\n      jsonData: {\n        ...config.jsonData,\n        keepCookies: cookies,\n      },\n    });\n  };\n\n  const onTimeoutChange = (event: React.FormEvent<HTMLInputElement>) => {\n    onChange({\n      ...config,\n      jsonData: {\n        ...config.jsonData,\n        timeout: parseInt(event.currentTarget.value, 10),\n      },\n    });\n  };\n\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <ConfigSubSection title=\"Advanced HTTP settings\" className={cx(styles.container, className)}>\n      <InlineField\n        htmlFor=\"advanced-http-cookies\"\n        label=\"Allowed cookies\"\n        labelWidth={24}\n        tooltip=\"Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.\"\n        disabled={config.readOnly}\n        grow\n      >\n        <TagsInput\n          id=\"advanced-http-cookies\"\n          placeholder=\"New cookie (hit enter to add)\"\n          tags={config.jsonData.keepCookies}\n          onChange={onCookiesChange}\n        />\n      </InlineField>\n\n      <InlineField\n        htmlFor=\"advanced-http-timeout\"\n        label=\"Timeout\"\n        labelWidth={24}\n        tooltip=\"HTTP request timeout in seconds\"\n        disabled={config.readOnly}\n        grow\n      >\n        <Input\n          id=\"advanced-http-timeout\"\n          type=\"number\"\n          min={0}\n          placeholder=\"Timeout in seconds\"\n          aria-label=\"Timeout in seconds\"\n          value={config.jsonData.timeout}\n          onChange={onTimeoutChange}\n        />\n      </InlineField>\n    </ConfigSubSection>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,uBAAoF,CAAC;AAAA,EAChG,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,eAAA,GAAkB,CAAC,OAAsB,KAAA;AAC7C,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,MAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,MAAO,CAAA,QAAA;AAAA,QACV,WAAa,EAAA;AAAA;AACf,KACD,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA6C,KAAA;AACpE,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,MAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,MAAO,CAAA,QAAA;AAAA,QACV,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,aAAA,CAAc,OAAO,EAAE;AAAA;AACjD,KACD,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,oBAAiB,KAAM,EAAA,wBAAA,EAAyB,WAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,SAAS,CACxF,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,uBAAA;AAAA,MACR,KAAM,EAAA,iBAAA;AAAA,MACN,UAAY,EAAA,EAAA;AAAA,MACZ,OAAQ,EAAA,0HAAA;AAAA,MACR,UAAU,MAAO,CAAA,QAAA;AAAA,MACjB,IAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,uBAAA;AAAA,QACH,WAAY,EAAA,+BAAA;AAAA,QACZ,IAAA,EAAM,OAAO,QAAS,CAAA,WAAA;AAAA,QACtB,QAAU,EAAA;AAAA;AAAA;AACZ,GAGF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,uBAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,UAAY,EAAA,EAAA;AAAA,MACZ,OAAQ,EAAA,iCAAA;AAAA,MACR,UAAU,MAAO,CAAA,QAAA;AAAA,MACjB,IAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,uBAAA;AAAA,QACH,IAAK,EAAA,QAAA;AAAA,QACL,GAAK,EAAA,CAAA;AAAA,QACL,WAAY,EAAA,oBAAA;AAAA,QACZ,YAAW,EAAA,oBAAA;AAAA,QACX,KAAA,EAAO,OAAO,QAAS,CAAA,OAAA;AAAA,QACvB,QAAU,EAAA;AAAA;AAAA;AACZ,GAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/components/ConfigEditor/Auth/Auth.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
-import 'react';
 import { AuthMethodSettings } from './auth-method/AuthMethodSettings.js';
 import { TLSSettings } from './tls/TLSSettings.js';
 import '@grafana/ui';
@@ -25,23 +24,19 @@ const Auth = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxs(ConfigSection, { title: "Authentication", children: [
-    /* @__PURE__ */ jsx(
-      AuthMethodSettings,
-      {
-        selectedMethod,
-        mostCommonMethod,
-        customMethods,
-        visibleMethods,
-        defaultOptionsOverrides,
-        onAuthMethodSelect,
-        basicAuth,
-        readOnly
-      }
-    ),
-    TLS && /* @__PURE__ */ jsx(TLSSettings, { ...TLS, readOnly }),
-    customHeaders && /* @__PURE__ */ jsx(CustomHeaders, { ...customHeaders, readOnly })
-  ] }) });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(ConfigSection, { title: "Authentication" }, /* @__PURE__ */ React.createElement(
+    AuthMethodSettings,
+    {
+      selectedMethod,
+      mostCommonMethod,
+      customMethods,
+      visibleMethods,
+      defaultOptionsOverrides,
+      onAuthMethodSelect,
+      basicAuth,
+      readOnly
+    }
+  ), TLS && /* @__PURE__ */ React.createElement(TLSSettings, { ...TLS, readOnly }), customHeaders && /* @__PURE__ */ React.createElement(CustomHeaders, { ...customHeaders, readOnly })));
 };
 
 export { Auth };

package/dist/esm/components/ConfigEditor/Auth/Auth.js.map

@@ -1 +1 @@
-{"version":3,"file":"Auth.js","sources":["../../../../../src/components/ConfigEditor/Auth/Auth.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type AuthMethod, type AuthMethodSelectOption, type CustomMethod, type CustomMethodId } from './types';\nimport { AuthMethodSettings } from './auth-method/AuthMethodSettings';\nimport { TLSSettings, type Props as TLSSettingsProps } from './tls/TLSSettings';\nimport { type Props as BasicAuthProps } from './auth-method/BasicAuth';\nimport { CustomHeaders, type Props as CustomHeadersProps } from './custom-headers/CustomHeaders';\nimport { ConfigSection } from '../ConfigSection';\n\nexport type Props = {\n  selectedMethod: AuthMethod | CustomMethodId;\n  mostCommonMethod?: AuthMethod | CustomMethodId;\n  visibleMethods?: Array<AuthMethod | CustomMethodId>;\n  defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;\n  customMethods?: CustomMethod[];\n  onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;\n  basicAuth?: Omit<BasicAuthProps, 'readOnly'>;\n  TLS?: Omit<TLSSettingsProps, 'readOnly'>;\n  customHeaders?: Omit<CustomHeadersProps, 'readOnly'>;\n  readOnly?: boolean;\n};\n\nexport const Auth = ({\n  selectedMethod,\n  mostCommonMethod,\n  visibleMethods,\n  defaultOptionsOverrides,\n  customMethods,\n  onAuthMethodSelect,\n  basicAuth,\n  TLS,\n  customHeaders,\n  readOnly = false,\n}: Props) => {\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <div className={styles.container}>\n      <ConfigSection title=\"Authentication\">\n        <AuthMethodSettings\n          selectedMethod={selectedMethod}\n          mostCommonMethod={mostCommonMethod}\n          customMethods={customMethods}\n          visibleMethods={visibleMethods}\n          defaultOptionsOverrides={defaultOptionsOverrides}\n          onAuthMethodSelect={onAuthMethodSelect}\n          basicAuth={basicAuth}\n          readOnly={readOnly}\n        />\n        {TLS && <TLSSettings {...TLS} readOnly={readOnly} />}\n        {customHeaders && <CustomHeaders {...customHeaders} readOnly={readOnly} />}\n      </ConfigSection>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBO,MAAM,OAAO,CAAC;AAAA,EACnB,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,uBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAa,KAAA;AACX,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,WACrB,QAAC,kBAAA,IAAA,CAAA,aAAA,EAAA,EAAc,OAAM,gBACnB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,cAAA;AAAA,QACA,gBAAA;AAAA,QACA,aAAA;AAAA,QACA,cAAA;AAAA,QACA,uBAAA;AAAA,QACA,kBAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,GAAO,oBAAA,GAAA,CAAC,WAAa,EAAA,EAAA,GAAG,KAAK,QAAoB,EAAA,CAAA;AAAA,IACjD,aAAiB,oBAAA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,eAAe,QAAoB,EAAA;AAAA,GAAA,EAC1E,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Auth.js","sources":["../../../../../src/components/ConfigEditor/Auth/Auth.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { type AuthMethod, type AuthMethodSelectOption, type CustomMethod, type CustomMethodId } from './types';\nimport { AuthMethodSettings } from './auth-method/AuthMethodSettings';\nimport { TLSSettings, type Props as TLSSettingsProps } from './tls/TLSSettings';\nimport { type Props as BasicAuthProps } from './auth-method/BasicAuth';\nimport { CustomHeaders, type Props as CustomHeadersProps } from './custom-headers/CustomHeaders';\nimport { ConfigSection } from '../ConfigSection';\n\nexport type Props = {\n  selectedMethod: AuthMethod | CustomMethodId;\n  mostCommonMethod?: AuthMethod | CustomMethodId;\n  visibleMethods?: Array<AuthMethod | CustomMethodId>;\n  defaultOptionsOverrides?: Partial<Record<AuthMethod, AuthMethodSelectOption>>;\n  customMethods?: CustomMethod[];\n  onAuthMethodSelect: (authType: AuthMethod | CustomMethodId) => void;\n  basicAuth?: Omit<BasicAuthProps, 'readOnly'>;\n  TLS?: Omit<TLSSettingsProps, 'readOnly'>;\n  customHeaders?: Omit<CustomHeadersProps, 'readOnly'>;\n  readOnly?: boolean;\n};\n\nexport const Auth = ({\n  selectedMethod,\n  mostCommonMethod,\n  visibleMethods,\n  defaultOptionsOverrides,\n  customMethods,\n  onAuthMethodSelect,\n  basicAuth,\n  TLS,\n  customHeaders,\n  readOnly = false,\n}: Props) => {\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <div className={styles.container}>\n      <ConfigSection title=\"Authentication\">\n        <AuthMethodSettings\n          selectedMethod={selectedMethod}\n          mostCommonMethod={mostCommonMethod}\n          customMethods={customMethods}\n          visibleMethods={visibleMethods}\n          defaultOptionsOverrides={defaultOptionsOverrides}\n          onAuthMethodSelect={onAuthMethodSelect}\n          basicAuth={basicAuth}\n          readOnly={readOnly}\n        />\n        {TLS && <TLSSettings {...TLS} readOnly={readOnly} />}\n        {customHeaders && <CustomHeaders {...customHeaders} readOnly={readOnly} />}\n      </ConfigSection>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAsBO,MAAM,OAAO,CAAC;AAAA,EACnB,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,uBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAa,KAAA;AACX,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,6BACpB,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,OAAM,gBACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,uBAAA;AAAA,MACA,kBAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AAAA,GAED,EAAA,GAAA,oBAAQ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAa,GAAG,GAAK,EAAA,QAAA,EAAoB,CACjD,EAAA,aAAA,wCAAkB,aAAe,EAAA,EAAA,GAAG,aAAe,EAAA,QAAA,EAAoB,CAC1E,CACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/ConfigEditor/Auth/auth-method/AuthMethodSettings.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { css } from '@emotion/css';
 import { useTheme2, Field, Select } from '@grafana/ui';
 import '@grafana/data';
@@ -96,7 +95,7 @@ const AuthMethodSettings = ({
   }
   let AuthFieldsComponent = null;
   if (selected === AuthMethod.BasicAuth && basicAuth) {
-    AuthFieldsComponent = /* @__PURE__ */ jsx(BasicAuth, { ...basicAuth, readOnly });
+    AuthFieldsComponent = /* @__PURE__ */ React.createElement(BasicAuth, { ...basicAuth, readOnly });
   } else if (selected.startsWith("custom-")) {
     AuthFieldsComponent = (_b = (_a = customMethods == null ? undefined : customMethods.find((m) => m.id === selected)) == null ? undefined : _a.component) != null ? _b : null;
   }
@@ -114,22 +113,19 @@ const AuthMethodSettings = ({
       marginTop: spacing(1.5)
     })
   };
-  return /* @__PURE__ */ jsx(ConfigSubSection, { title, description, children: /* @__PURE__ */ jsxs("div", { className: styles.authMethods, children: [
-    hasSelect && /* @__PURE__ */ jsx(Field, { label: "Authentication method", children: /* @__PURE__ */ jsx(
-      Select,
-      {
-        inputId: "auth-method-select",
-        options: preparedOptions,
-        value: selected,
-        onChange: (option) => {
-          setAuthMethodChanged(true);
-          onAuthMethodSelect(option.value);
-        },
-        disabled: readOnly
-      }
-    ) }),
-    AuthFieldsComponent && /* @__PURE__ */ jsx("div", { className: styles.selectedMethodFields, children: AuthFieldsComponent })
-  ] }) });
+  return /* @__PURE__ */ React.createElement(ConfigSubSection, { title, description }, /* @__PURE__ */ React.createElement("div", { className: styles.authMethods }, hasSelect && /* @__PURE__ */ React.createElement(Field, { label: "Authentication method" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      inputId: "auth-method-select",
+      options: preparedOptions,
+      value: selected,
+      onChange: (option) => {
+        setAuthMethodChanged(true);
+        onAuthMethodSelect(option.value);
+      },
+      disabled: readOnly
+    }
+  )), AuthFieldsComponent && /* @__PURE__ */ React.createElement("div", { className: styles.selectedMethodFields }, AuthFieldsComponent)));
 };
 
 export { AuthMethodSettings };