@grafana/plugin-ui 0.10.9 → 0.11.0

package/dist/esm/components/ConfigEditor/Connection/ConnectionSettings.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react';
 import { css, cx } from '@emotion/css';
 import { InlineField, Input } from '@grafana/ui';
 import { ConfigSection } from '../ConfigSection/ConfigSection.js';
@@ -19,34 +20,38 @@ const ConnectionSettings = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ConfigSection, { title: "Connection", description, className: cx(styles.container, className) }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ConfigSection, { title: "Connection", description, className: cx(styles.container, className), children: /* @__PURE__ */ jsx(
     InlineField,
     {
       htmlFor: "connection-url",
       label: urlLabel || "URL",
       labelWidth: 24,
-      tooltip: urlTooltip || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Specify a complete HTTP URL", /* @__PURE__ */ React__default.createElement("br", null), "(for example https://example.com:8080)"),
+      tooltip: urlTooltip || /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Specify a complete HTTP URL",
+        /* @__PURE__ */ jsx("br", {}),
+        "(for example https://example.com:8080)"
+      ] }),
       grow: true,
       disabled: config.readOnly,
       required: true,
       invalid: !isValidUrl && !config.readOnly,
       error: isValidUrl ? "" : "Please enter a valid URL",
-      interactive: true
-    },
-    /* @__PURE__ */ React__default.createElement(
-      Input,
-      {
-        id: "connection-url",
-        "aria-label": "Data source connection URL",
-        onChange: (event) => onChange({
-          ...config,
-          url: event.currentTarget.value
-        }),
-        value: config.url || "",
-        placeholder: urlPlaceholder || "URL"
-      }
-    )
-  )));
+      interactive: true,
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "connection-url",
+          "aria-label": "Data source connection URL",
+          onChange: (event) => onChange({
+            ...config,
+            url: event.currentTarget.value
+          }),
+          value: config.url || "",
+          placeholder: urlPlaceholder || "URL"
+        }
+      )
+    }
+  ) }) });
 };
 
 export { ConnectionSettings };

package/dist/esm/components/ConfigEditor/Connection/ConnectionSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionSettings.js","sources":["../../../../../src/components/ConfigEditor/Connection/ConnectionSettings.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { css, cx } from '@emotion/css';\nimport { InlineField, Input, type PopoverContent } from '@grafana/ui';\nimport { ConfigSection } 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  description?: ReactNode;\n  urlPlaceholder?: string;\n  urlTooltip?: PopoverContent;\n  urlLabel?: string;\n  className?: string;\n};\n\nexport const ConnectionSettings: <C extends Config = Config>(props: Props<C>) => JSX.Element = ({\n  config,\n  onChange,\n  description,\n  urlPlaceholder,\n  urlTooltip,\n  urlLabel,\n  className,\n}) => {\n  const isValidUrl =\n    config.url !== undefined &&\n    /^(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?$/.test(config.url);\n\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <>\n      <ConfigSection title=\"Connection\" description={description} className={cx(styles.container, className)}>\n        <InlineField\n          htmlFor=\"connection-url\"\n          label={urlLabel || 'URL'}\n          labelWidth={24}\n          tooltip={\n            urlTooltip || (\n              <>\n                Specify a complete HTTP URL\n                <br />\n                (for example https://example.com:8080)\n              </>\n            )\n          }\n          grow\n          disabled={config.readOnly}\n          required\n          invalid={!isValidUrl && !config.readOnly}\n          error={isValidUrl ? '' : 'Please enter a valid URL'}\n          interactive\n        >\n          <Input\n            id=\"connection-url\"\n            aria-label=\"Data source connection URL\"\n            onChange={(event) =>\n              onChange({\n                ...config,\n                url: event.currentTarget.value,\n              })\n            }\n            value={config.url || ''}\n            placeholder={urlPlaceholder || 'URL'}\n          />\n        </InlineField>\n      </ConfigSection>\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAgBO,MAAM,qBAAkF,CAAC;AAAA,EAC9F,MAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,aACJ,MAAO,CAAA,GAAA,KAAQ,aACf,qFAAsF,CAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AAEvG,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBACGA,cAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,KAAM,EAAA,YAAA,EAAa,WAA0B,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,SAAS,CACnG,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,gBAAA;AAAA,MACR,OAAO,QAAY,IAAA,KAAA;AAAA,MACnB,UAAY,EAAA,EAAA;AAAA,MACZ,SACE,UACE,oBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAE,+CAECA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAER,CAAA;AAAA,MAGJ,IAAI,EAAA,IAAA;AAAA,MACJ,UAAU,MAAO,CAAA,QAAA;AAAA,MACjB,QAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,CAAC,UAAc,IAAA,CAAC,MAAO,CAAA,QAAA;AAAA,MAChC,KAAA,EAAO,aAAa,EAAK,GAAA,0BAAA;AAAA,MACzB,WAAW,EAAA;AAAA,KAAA;AAAA,oBAEXA,cAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,gBAAA;AAAA,QACH,YAAW,EAAA,4BAAA;AAAA,QACX,QAAA,EAAU,CAAC,KAAA,KACT,QAAS,CAAA;AAAA,UACP,GAAG,MAAA;AAAA,UACH,GAAA,EAAK,MAAM,aAAc,CAAA;AAAA,SAC1B,CAAA;AAAA,QAEH,KAAA,EAAO,OAAO,GAAO,IAAA,EAAA;AAAA,QACrB,aAAa,cAAkB,IAAA;AAAA;AAAA;AACjC,GAEJ,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConnectionSettings.js","sources":["../../../../../src/components/ConfigEditor/Connection/ConnectionSettings.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { css, cx } from '@emotion/css';\nimport { InlineField, Input, type PopoverContent } from '@grafana/ui';\nimport { ConfigSection } 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  description?: ReactNode;\n  urlPlaceholder?: string;\n  urlTooltip?: PopoverContent;\n  urlLabel?: string;\n  className?: string;\n};\n\nexport const ConnectionSettings: <C extends Config = Config>(props: Props<C>) => JSX.Element = ({\n  config,\n  onChange,\n  description,\n  urlPlaceholder,\n  urlTooltip,\n  urlLabel,\n  className,\n}) => {\n  const isValidUrl =\n    config.url !== undefined &&\n    /^(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?$/.test(config.url);\n\n  const styles = {\n    container: css({\n      maxWidth: 578,\n    }),\n  };\n\n  return (\n    <>\n      <ConfigSection title=\"Connection\" description={description} className={cx(styles.container, className)}>\n        <InlineField\n          htmlFor=\"connection-url\"\n          label={urlLabel || 'URL'}\n          labelWidth={24}\n          tooltip={\n            urlTooltip || (\n              <>\n                Specify a complete HTTP URL\n                <br />\n                (for example https://example.com:8080)\n              </>\n            )\n          }\n          grow\n          disabled={config.readOnly}\n          required\n          invalid={!isValidUrl && !config.readOnly}\n          error={isValidUrl ? '' : 'Please enter a valid URL'}\n          interactive\n        >\n          <Input\n            id=\"connection-url\"\n            aria-label=\"Data source connection URL\"\n            onChange={(event) =>\n              onChange({\n                ...config,\n                url: event.currentTarget.value,\n              })\n            }\n            value={config.url || ''}\n            placeholder={urlPlaceholder || 'URL'}\n          />\n        </InlineField>\n      </ConfigSection>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,qBAAkF,CAAC;AAAA,EAC9F,MAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,aACJ,MAAO,CAAA,GAAA,KAAQ,aACf,qFAAsF,CAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AAEvG,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACX;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACE,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,KAAM,EAAA,YAAA,EAAa,WAA0B,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,SAAW,EAAA,SAAS,CACnG,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,gBAAA;AAAA,MACR,OAAO,QAAY,IAAA,KAAA;AAAA,MACnB,UAAY,EAAA,EAAA;AAAA,MACZ,OAAA,EACE,8BACI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,6BAAA;AAAA,4BAEC,IAAG,EAAA,EAAA,CAAA;AAAA,QAAE;AAAA,OAER,EAAA,CAAA;AAAA,MAGJ,IAAI,EAAA,IAAA;AAAA,MACJ,UAAU,MAAO,CAAA,QAAA;AAAA,MACjB,QAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,CAAC,UAAc,IAAA,CAAC,MAAO,CAAA,QAAA;AAAA,MAChC,KAAA,EAAO,aAAa,EAAK,GAAA,0BAAA;AAAA,MACzB,WAAW,EAAA,IAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,gBAAA;AAAA,UACH,YAAW,EAAA,4BAAA;AAAA,UACX,QAAA,EAAU,CAAC,KAAA,KACT,QAAS,CAAA;AAAA,YACP,GAAG,MAAA;AAAA,YACH,GAAA,EAAK,MAAM,aAAc,CAAA;AAAA,WAC1B,CAAA;AAAA,UAEH,KAAA,EAAO,OAAO,GAAO,IAAA,EAAA;AAAA,UACrB,aAAa,cAAkB,IAAA;AAAA;AAAA;AACjC;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { css, cx } from '@emotion/css';
 import { useTheme2 } from '@grafana/ui';
 
@@ -25,7 +25,17 @@ const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = t
       })
     })
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: cx(styles.container, className) }, /* @__PURE__ */ React__default.createElement("p", { className: styles.text }, "Before you can use the ", dataSourceName, " data source, you must configure it below or in the config file. For detailed instructions,", " ", /* @__PURE__ */ React__default.createElement("a", { href: docsLink, target: "_blank", rel: "noreferrer" }, "view the documentation"), "."), hasRequiredFields && /* @__PURE__ */ React__default.createElement("p", { className: styles.text }, /* @__PURE__ */ React__default.createElement("i", null, "Fields marked with * are required")));
+  return /* @__PURE__ */ jsxs("div", { className: cx(styles.container, className), children: [
+    /* @__PURE__ */ jsxs("p", { className: styles.text, children: [
+      "Before you can use the ",
+      dataSourceName,
+      " data source, you must configure it below or in the config file. For detailed instructions,",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: docsLink, target: "_blank", rel: "noreferrer", children: "view the documentation" }),
+      "."
+    ] }),
+    hasRequiredFields && /* @__PURE__ */ jsx("p", { className: styles.text, children: /* @__PURE__ */ jsx("i", { children: "Fields marked with * are required" }) })
+  ] });
 };
 
 export { DataSourceDescription };

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

@@ -1 +1 @@
-{"version":3,"file":"DataSourceDescription.js","sources":["../../../../src/components/ConfigEditor/DataSourceDescription.tsx"],"sourcesContent":["import React from 'react';\nimport { cx, css } from '@emotion/css';\nimport { useTheme2 } from '@grafana/ui';\n\ntype Props = {\n  dataSourceName: string;\n  docsLink: string;\n  hasRequiredFields?: boolean;\n  className?: string;\n};\n\nexport const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, className }: Props) => {\n  const theme = useTheme2();\n\n  const styles = {\n    container: css({\n      p: {\n        margin: 0,\n      },\n      'p + p': {\n        marginTop: theme.spacing(2),\n      },\n    }),\n    text: css({\n      ...theme.typography.body,\n      color: theme.colors.text.secondary,\n      a: css({\n        color: theme.colors.text.link,\n        textDecoration: 'underline',\n        '&:hover': {\n          textDecoration: 'none',\n        },\n      }),\n    }),\n  };\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <p className={styles.text}>\n        Before you can use the {dataSourceName} data source, you must configure it below or in the config file. For\n        detailed instructions,{' '}\n        <a href={docsLink} target=\"_blank\" rel=\"noreferrer\">\n          view the documentation\n        </a>\n        .\n      </p>\n      {hasRequiredFields && (\n        <p className={styles.text}>\n          <i>Fields marked with * are required</i>\n        </p>\n      )}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAWa,MAAA,qBAAA,GAAwB,CAAC,EAAE,cAAA,EAAgB,UAAU,iBAAoB,GAAA,IAAA,EAAM,WAAuB,KAAA;AACjH,EAAA,MAAM,QAAQ,SAAU,EAAA;AAExB,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,CAAG,EAAA;AAAA,QACD,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,OAAS,EAAA;AAAA,QACP,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC5B,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,GAAG,MAAM,UAAW,CAAA,IAAA;AAAA,MACpB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,GAAG,GAAI,CAAA;AAAA,QACL,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,QACzB,cAAgB,EAAA,WAAA;AAAA,QAChB,SAAW,EAAA;AAAA,UACT,cAAgB,EAAA;AAAA;AAClB,OACD;AAAA,KACF;AAAA,GACH;AAEA,EAAA,oDACG,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,WAAW,SAAS,CAAA,EAAA,kBAC3CA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,WAAW,MAAO,CAAA,IAAA,EAAA,EAAM,2BACD,cAAe,EAAA,6FAAA,EAChB,qBACtBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,QAAO,QAAS,EAAA,GAAA,EAAI,gBAAa,wBAEpD,CAAA,EAAI,GAEN,CACC,EAAA,iBAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,WAAW,MAAO,CAAA,IAAA,EAAA,+CAClB,GAAE,EAAA,IAAA,EAAA,mCAAiC,CACtC,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DataSourceDescription.js","sources":["../../../../src/components/ConfigEditor/DataSourceDescription.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { useTheme2 } from '@grafana/ui';\n\ntype Props = {\n  dataSourceName: string;\n  docsLink: string;\n  hasRequiredFields?: boolean;\n  className?: string;\n};\n\nexport const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, className }: Props) => {\n  const theme = useTheme2();\n\n  const styles = {\n    container: css({\n      p: {\n        margin: 0,\n      },\n      'p + p': {\n        marginTop: theme.spacing(2),\n      },\n    }),\n    text: css({\n      ...theme.typography.body,\n      color: theme.colors.text.secondary,\n      a: css({\n        color: theme.colors.text.link,\n        textDecoration: 'underline',\n        '&:hover': {\n          textDecoration: 'none',\n        },\n      }),\n    }),\n  };\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <p className={styles.text}>\n        Before you can use the {dataSourceName} data source, you must configure it below or in the config file. For\n        detailed instructions,{' '}\n        <a href={docsLink} target=\"_blank\" rel=\"noreferrer\">\n          view the documentation\n        </a>\n        .\n      </p>\n      {hasRequiredFields && (\n        <p className={styles.text}>\n          <i>Fields marked with * are required</i>\n        </p>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAUa,MAAA,qBAAA,GAAwB,CAAC,EAAE,cAAA,EAAgB,UAAU,iBAAoB,GAAA,IAAA,EAAM,WAAuB,KAAA;AACjH,EAAA,MAAM,QAAQ,SAAU,EAAA;AAExB,EAAA,MAAM,MAAS,GAAA;AAAA,IACb,WAAW,GAAI,CAAA;AAAA,MACb,CAAG,EAAA;AAAA,QACD,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,OAAS,EAAA;AAAA,QACP,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC5B,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,GAAG,MAAM,UAAW,CAAA,IAAA;AAAA,MACpB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,GAAG,GAAI,CAAA;AAAA,QACL,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,QACzB,cAAgB,EAAA,WAAA;AAAA,QAChB,SAAW,EAAA;AAAA,UACT,cAAgB,EAAA;AAAA;AAClB,OACD;AAAA,KACF;AAAA,GACH;AAEA,EAAA,4BACG,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,MAAO,CAAA,SAAA,EAAW,SAAS,CAC5C,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,GAAA,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAM,EAAA,QAAA,EAAA;AAAA,MAAA,yBAAA;AAAA,MACD,cAAA;AAAA,MAAe,6FAAA;AAAA,MAChB,GAAA;AAAA,sBACvB,GAAA,CAAC,OAAE,IAAM,EAAA,QAAA,EAAU,QAAO,QAAS,EAAA,GAAA,EAAI,cAAa,QAEpD,EAAA,wBAAA,EAAA,CAAA;AAAA,MAAI;AAAA,KAEN,EAAA,CAAA;AAAA,IACC,iBAAA,wBACE,GAAE,EAAA,EAAA,SAAA,EAAW,OAAO,IACnB,EAAA,QAAA,kBAAA,GAAA,CAAC,GAAE,EAAA,EAAA,QAAA,EAAA,mCAAA,EAAiC,CACtC,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { InlineField, InlineSwitch } from '@grafana/ui';
 import { config } from '@grafana/runtime';
 import '@grafana/data';
@@ -14,31 +14,35 @@ const SecureSocksProxyToggle = ({ labelWidth = 10, ...props }) => {
       }
     });
   };
-  return config.secureSocksDSProxyEnabled && /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.createElement("div", { className: "gf-form gf-form-inline" }, /* @__PURE__ */ React__default.createElement(
+  return config.secureSocksDSProxyEnabled && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsx("div", { className: "gf-form gf-form-inline", children: /* @__PURE__ */ jsx(
     InlineField,
     {
       htmlFor: "secureSocksProxyEnabled",
       label: "Secure Socks Proxy Enabled",
       labelWidth,
-      tooltip: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Proxy the datasource connection through the secure socks proxy to a different network. To learn more about configuring the datasource connection proxy,", " ", /* @__PURE__ */ React__default.createElement(
-        "a",
+      tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Proxy the datasource connection through the secure socks proxy to a different network. To learn more about configuring the datasource connection proxy,",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "click here."
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        InlineSwitch,
         {
-          href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/",
-          target: "_blank",
-          rel: "noopener noreferrer"
-        },
-        "click here."
-      ))
-    },
-    /* @__PURE__ */ React__default.createElement(
-      InlineSwitch,
-      {
-        id: "secureSocksProxyEnabled",
-        value: dataSourceConfig.jsonData.enableSecureSocksProxy,
-        onChange: handleSwitchChange
-      }
-    )
-  ))));
+          id: "secureSocksProxyEnabled",
+          value: dataSourceConfig.jsonData.enableSecureSocksProxy,
+          onChange: handleSwitchChange
+        }
+      )
+    }
+  ) }) }) });
 };
 
 export { SecureSocksProxyToggle };

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

@@ -1 +1 @@
-{"version":3,"file":"SecureSocksProxyToggle.js","sources":["../../../../src/components/ConfigEditor/SecureSocksProxyToggle.tsx"],"sourcesContent":["import React from 'react';\nimport { type InlineLabel as OriginalInlineLabel, InlineField, InlineSwitch } from '@grafana/ui';\nimport { config } from '@grafana/runtime';\nimport { type DataSourceSettings } from '@grafana/data';\n\ntype Props = Omit<React.ComponentProps<typeof OriginalInlineLabel>, 'children' | 'onChange'> & {\n  dataSourceConfig: DataSourceSettings<any, any>;\n  onChange: (config: DataSourceSettings<any, any>) => void;\n  labelWidth: number;\n};\n\nexport const SecureSocksProxyToggle = ({ labelWidth = 10, ...props }: Props) => {\n  const { dataSourceConfig, onChange } = props;\n  const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange({\n      ...dataSourceConfig,\n      jsonData: {\n        ...dataSourceConfig.jsonData,\n        enableSecureSocksProxy: e.target.checked,\n      },\n    });\n  };\n\n  return (\n    (config as any).secureSocksDSProxyEnabled && (\n      <div>\n        <div className=\"gf-form\">\n          <div className=\"gf-form gf-form-inline\">\n            <InlineField\n              htmlFor=\"secureSocksProxyEnabled\"\n              label=\"Secure Socks Proxy Enabled\"\n              labelWidth={labelWidth}\n              tooltip={\n                <>\n                  Proxy the datasource connection through the secure socks proxy to a different network. To learn more\n                  about configuring the datasource connection proxy,{' '}\n                  <a\n                    href=\"https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    click here.\n                  </a>\n                </>\n              }\n            >\n              <InlineSwitch\n                id=\"secureSocksProxyEnabled\"\n                value={dataSourceConfig.jsonData.enableSecureSocksProxy}\n                onChange={handleSwitchChange}\n              />\n            </InlineField>\n          </div>\n        </div>\n      </div>\n    )\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAWO,MAAM,yBAAyB,CAAC,EAAE,aAAa,EAAI,EAAA,GAAG,OAAmB,KAAA;AAC9E,EAAM,MAAA,EAAE,gBAAkB,EAAA,QAAA,EAAa,GAAA,KAAA;AACvC,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAA2C,KAAA;AACrE,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,gBAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,gBAAiB,CAAA,QAAA;AAAA,QACpB,sBAAA,EAAwB,EAAE,MAAO,CAAA;AAAA;AACnC,KACD,CAAA;AAAA,GACH;AAEA,EACG,OAAA,MAAA,CAAe,yBACd,oBAAAA,cAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SACb,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,yBAAA;AAAA,MACR,KAAM,EAAA,4BAAA;AAAA,MACN,UAAA;AAAA,MACA,OAAA,kBACIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAA,yJAAA,EAEmD,GACnD,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,gFAAA;AAAA,UACL,MAAO,EAAA,QAAA;AAAA,UACP,GAAI,EAAA;AAAA,SAAA;AAAA,QACL;AAAA,OAGH;AAAA,KAAA;AAAA,oBAGFA,cAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,yBAAA;AAAA,QACH,KAAA,EAAO,iBAAiB,QAAS,CAAA,sBAAA;AAAA,QACjC,QAAU,EAAA;AAAA;AAAA;AACZ,GAEJ,CACF,CACF,CAAA;AAGN;;;;"}
+{"version":3,"file":"SecureSocksProxyToggle.js","sources":["../../../../src/components/ConfigEditor/SecureSocksProxyToggle.tsx"],"sourcesContent":["import { type InlineLabel as OriginalInlineLabel, InlineField, InlineSwitch } from '@grafana/ui';\nimport { config } from '@grafana/runtime';\nimport { type DataSourceSettings } from '@grafana/data';\n\ntype Props = Omit<React.ComponentProps<typeof OriginalInlineLabel>, 'children' | 'onChange'> & {\n  dataSourceConfig: DataSourceSettings<any, any>;\n  onChange: (config: DataSourceSettings<any, any>) => void;\n  labelWidth: number;\n};\n\nexport const SecureSocksProxyToggle = ({ labelWidth = 10, ...props }: Props) => {\n  const { dataSourceConfig, onChange } = props;\n  const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange({\n      ...dataSourceConfig,\n      jsonData: {\n        ...dataSourceConfig.jsonData,\n        enableSecureSocksProxy: e.target.checked,\n      },\n    });\n  };\n\n  return (\n    (config as any).secureSocksDSProxyEnabled && (\n      <div>\n        <div className=\"gf-form\">\n          <div className=\"gf-form gf-form-inline\">\n            <InlineField\n              htmlFor=\"secureSocksProxyEnabled\"\n              label=\"Secure Socks Proxy Enabled\"\n              labelWidth={labelWidth}\n              tooltip={\n                <>\n                  Proxy the datasource connection through the secure socks proxy to a different network. To learn more\n                  about configuring the datasource connection proxy,{' '}\n                  <a\n                    href=\"https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    click here.\n                  </a>\n                </>\n              }\n            >\n              <InlineSwitch\n                id=\"secureSocksProxyEnabled\"\n                value={dataSourceConfig.jsonData.enableSecureSocksProxy}\n                onChange={handleSwitchChange}\n              />\n            </InlineField>\n          </div>\n        </div>\n      </div>\n    )\n  );\n};\n"],"names":[],"mappings":";;;;;AAUO,MAAM,yBAAyB,CAAC,EAAE,aAAa,EAAI,EAAA,GAAG,OAAmB,KAAA;AAC9E,EAAM,MAAA,EAAE,gBAAkB,EAAA,QAAA,EAAa,GAAA,KAAA;AACvC,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAA2C,KAAA;AACrE,IAAS,QAAA,CAAA;AAAA,MACP,GAAG,gBAAA;AAAA,MACH,QAAU,EAAA;AAAA,QACR,GAAG,gBAAiB,CAAA,QAAA;AAAA,QACpB,sBAAA,EAAwB,EAAE,MAAO,CAAA;AAAA;AACnC,KACD,CAAA;AAAA,GACH;AAEA,EACG,OAAA,MAAA,CAAe,yBACd,oBAAA,GAAA,CAAC,KACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SACb,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,yBAAA;AAAA,MACR,KAAM,EAAA,4BAAA;AAAA,MACN,UAAA;AAAA,MACA,yBACI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,yJAAA;AAAA,QAEmD,GAAA;AAAA,wBACnD,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,gFAAA;AAAA,YACL,MAAO,EAAA,QAAA;AAAA,YACP,GAAI,EAAA,qBAAA;AAAA,YACL,QAAA,EAAA;AAAA;AAAA;AAED,OACF,EAAA,CAAA;AAAA,MAGF,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,yBAAA;AAAA,UACH,KAAA,EAAO,iBAAiB,QAAS,CAAA,sBAAA;AAAA,UACjC,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA,GACF,EACF,GACF,CACF,EAAA,CAAA;AAGN;;;;"}

package/dist/esm/components/CustomHeadersSettings/CustomHeadersSettings.js

@@ -1,4 +1,5 @@
-import React__default, { PureComponent } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PureComponent } from 'react';
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
 import '@grafana/data';
@@ -27,43 +28,47 @@ const getCustomHeaderRowStyles = stylesFactory(() => {
 });
 const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
   const styles = getCustomHeaderRowStyles();
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles.layout }, /* @__PURE__ */ React__default.createElement(
-    LegacyForms.FormField,
-    {
-      label: "Header",
-      name: "name",
-      placeholder: "X-Custom-Header",
-      labelWidth: 5,
-      value: header.name || "",
-      onChange: (e) => onChange({ ...header, name: e.target.value }),
-      onBlur
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    LegacyForms.SecretFormField,
-    {
-      label: "Value",
-      "aria-label": "Value",
-      name: "value",
-      isConfigured: header.configured,
-      value: header.value,
-      labelWidth: 5,
-      inputWidth: header.configured ? 11 : 12,
-      placeholder: "Header Value",
-      onReset: () => onReset(header.id),
-      onChange: (e) => onChange({ ...header, value: e.target.value }),
-      onBlur
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      type: "button",
-      "aria-label": "Remove header",
-      variant: "secondary",
-      size: "xs",
-      onClick: (_e) => onRemove(header.id)
-    },
-    /* @__PURE__ */ React__default.createElement(Icon, { name: "trash-alt" })
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: styles.layout, children: [
+    /* @__PURE__ */ jsx(
+      LegacyForms.FormField,
+      {
+        label: "Header",
+        name: "name",
+        placeholder: "X-Custom-Header",
+        labelWidth: 5,
+        value: header.name || "",
+        onChange: (e) => onChange({ ...header, name: e.target.value }),
+        onBlur
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LegacyForms.SecretFormField,
+      {
+        label: "Value",
+        "aria-label": "Value",
+        name: "value",
+        isConfigured: header.configured,
+        value: header.value,
+        labelWidth: 5,
+        inputWidth: header.configured ? 11 : 12,
+        placeholder: "Header Value",
+        onReset: () => onReset(header.id),
+        onChange: (e) => onChange({ ...header, value: e.target.value }),
+        onBlur
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        "aria-label": "Remove header",
+        variant: "secondary",
+        size: "xs",
+        onClick: (_e) => onRemove(header.id),
+        children: /* @__PURE__ */ jsx(Icon, { name: "trash-alt" })
+      }
+    )
+  ] });
 };
 CustomHeaderRow.displayName = "CustomHeaderRow";
 class CustomHeadersSettings extends PureComponent {
@@ -151,30 +156,34 @@ class CustomHeadersSettings extends PureComponent {
   }
   render() {
     const { headers } = this.state;
-    return /* @__PURE__ */ React__default.createElement("div", { className: "gf-form-group" }, /* @__PURE__ */ React__default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.createElement("h6", null, "Custom HTTP Headers")), /* @__PURE__ */ React__default.createElement("div", null, headers.map((header, i) => /* @__PURE__ */ React__default.createElement(
-      CustomHeaderRow,
-      {
-        key: header.id,
-        header,
-        onChange: (h) => {
-          this.onHeaderChange(i, h);
+    return /* @__PURE__ */ jsxs("div", { className: "gf-form-group", children: [
+      /* @__PURE__ */ jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsx("h6", { children: "Custom HTTP Headers" }) }),
+      /* @__PURE__ */ jsx("div", { children: headers.map((header, i) => /* @__PURE__ */ jsx(
+        CustomHeaderRow,
+        {
+          header,
+          onChange: (h) => {
+            this.onHeaderChange(i, h);
+          },
+          onBlur: this.updateSettings,
+          onRemove: this.onHeaderRemove,
+          onReset: this.onHeaderReset
         },
-        onBlur: this.updateSettings,
-        onRemove: this.onHeaderRemove,
-        onReset: this.onHeaderReset
-      }
-    ))), /* @__PURE__ */ React__default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        variant: "secondary",
-        icon: "plus",
-        type: "button",
-        onClick: (e) => {
-          this.onHeaderAdd();
+        header.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          icon: "plus",
+          type: "button",
+          onClick: (e) => {
+            this.onHeaderAdd();
+          },
+          children: "Add header"
         }
-      },
-      "Add header"
-    )));
+      ) })
+    ] });
   }
 }
 

package/dist/esm/components/CustomHeadersSettings/CustomHeadersSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomHeadersSettings.js","sources":["../../../../src/components/CustomHeadersSettings/CustomHeadersSettings.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { type DataSourceSettings } from '@grafana/data';\nimport { stylesFactory, LegacyForms, Button, Icon } from '@grafana/ui';\n\nexport interface CustomHeader {\n  id: string;\n  name: string;\n  value: string;\n  configured: boolean;\n}\n\nexport type CustomHeaders = CustomHeader[];\n\nexport interface Props {\n  dataSourceConfig: DataSourceSettings<any, any>;\n  onChange: (config: DataSourceSettings) => void;\n}\n\nexport interface State {\n  headers: CustomHeaders;\n}\n\ninterface CustomHeaderRowProps {\n  header: CustomHeader;\n  onReset: (id: string) => void;\n  onRemove: (id: string) => void;\n  onChange: (value: CustomHeader) => void;\n  onBlur: () => void;\n}\n\nconst getCustomHeaderRowStyles = stylesFactory(() => {\n  return {\n    layout: css`\n      display: flex;\n      align-items: center;\n      margin-bottom: 4px;\n      > * {\n        margin-left: 4px;\n        margin-bottom: 0;\n        height: 100%;\n        &:first-child,\n        &:last-child {\n          margin-left: 0;\n        }\n      }\n    `,\n  };\n});\n\nconst CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {\n  const styles = getCustomHeaderRowStyles();\n  return (\n    <div className={styles.layout}>\n      <LegacyForms.FormField\n        label=\"Header\"\n        name=\"name\"\n        placeholder=\"X-Custom-Header\"\n        labelWidth={5}\n        value={header.name || ''}\n        onChange={(e) => onChange({ ...header, name: e.target.value })}\n        onBlur={onBlur}\n      />\n      <LegacyForms.SecretFormField\n        label=\"Value\"\n        aria-label=\"Value\"\n        name=\"value\"\n        isConfigured={header.configured}\n        value={header.value}\n        labelWidth={5}\n        inputWidth={header.configured ? 11 : 12}\n        placeholder=\"Header Value\"\n        onReset={() => onReset(header.id)}\n        onChange={(e) => onChange({ ...header, value: e.target.value })}\n        onBlur={onBlur}\n      />\n      <Button\n        type=\"button\"\n        aria-label=\"Remove header\"\n        variant=\"secondary\"\n        size=\"xs\"\n        onClick={(_e) => onRemove(header.id)}\n      >\n        <Icon name=\"trash-alt\" />\n      </Button>\n    </div>\n  );\n};\n\nCustomHeaderRow.displayName = 'CustomHeaderRow';\n\nexport class CustomHeadersSettings extends PureComponent<Props, State> {\n  state: State = {\n    headers: [],\n  };\n\n  constructor(props: Props) {\n    super(props);\n    const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;\n    this.state = {\n      headers: Object.keys(jsonData)\n        .sort()\n        .filter((key) => key.startsWith('httpHeaderName'))\n        .map((key, index) => {\n          return {\n            id: uniqueId(),\n            name: jsonData[key],\n            value: secureJsonData !== undefined ? secureJsonData[key] : '',\n            configured: (secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`]) || false,\n          };\n        }),\n    };\n  }\n\n  updateSettings = () => {\n    const { headers } = this.state;\n\n    // we remove every httpHeaderName* field\n    const newJsonData = Object.fromEntries(\n      Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith('httpHeaderName'))\n    );\n\n    // we remove every httpHeaderValue* field\n    const newSecureJsonData = Object.fromEntries(\n      Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(\n        ([key, val]) => !key.startsWith('httpHeaderValue')\n      )\n    );\n\n    // then we add the current httpHeader-fields\n    for (const [index, header] of headers.entries()) {\n      newJsonData[`httpHeaderName${index + 1}`] = header.name;\n      if (!header.configured) {\n        newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;\n      }\n    }\n\n    this.props.onChange({\n      ...this.props.dataSourceConfig,\n      jsonData: newJsonData,\n      secureJsonData: newSecureJsonData,\n    });\n  };\n\n  onHeaderAdd = () => {\n    this.setState((prevState) => {\n      return {\n        headers: [...prevState.headers, { id: uniqueId(), name: '', value: '', configured: false }],\n      };\n    });\n  };\n\n  onHeaderChange = (headerIndex: number, value: CustomHeader) => {\n    this.setState(({ headers }) => {\n      return {\n        headers: headers.map((item, index) => {\n          if (headerIndex !== index) {\n            return item;\n          }\n          return { ...value };\n        }),\n      };\n    });\n  };\n\n  onHeaderReset = (headerId: string) => {\n    this.setState(({ headers }) => {\n      return {\n        headers: headers.map((h, i) => {\n          if (h.id !== headerId) {\n            return h;\n          }\n          return {\n            ...h,\n            value: '',\n            configured: false,\n          };\n        }),\n      };\n    });\n  };\n\n  onHeaderRemove = (headerId: string) => {\n    this.setState(\n      ({ headers }) => ({\n        headers: headers.filter((h) => h.id !== headerId),\n      }),\n      this.updateSettings\n    );\n  };\n\n  render() {\n    const { headers } = this.state;\n    return (\n      <div className={'gf-form-group'}>\n        <div className=\"gf-form\">\n          <h6>Custom HTTP Headers</h6>\n        </div>\n        <div>\n          {headers.map((header, i) => (\n            <CustomHeaderRow\n              key={header.id}\n              header={header}\n              onChange={(h) => {\n                this.onHeaderChange(i, h);\n              }}\n              onBlur={this.updateSettings}\n              onRemove={this.onHeaderRemove}\n              onReset={this.onHeaderReset}\n            />\n          ))}\n        </div>\n        <div className=\"gf-form\">\n          <Button\n            variant=\"secondary\"\n            icon=\"plus\"\n            type=\"button\"\n            onClick={(e) => {\n              this.onHeaderAdd();\n            }}\n          >\n            Add header\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomHeadersSettings;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"CustomHeadersSettings.js","sources":["../../../../src/components/CustomHeadersSettings/CustomHeadersSettings.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { type DataSourceSettings } from '@grafana/data';\nimport { stylesFactory, LegacyForms, Button, Icon } from '@grafana/ui';\n\nexport interface CustomHeader {\n  id: string;\n  name: string;\n  value: string;\n  configured: boolean;\n}\n\nexport type CustomHeaders = CustomHeader[];\n\nexport interface Props {\n  dataSourceConfig: DataSourceSettings<any, any>;\n  onChange: (config: DataSourceSettings) => void;\n}\n\nexport interface State {\n  headers: CustomHeaders;\n}\n\ninterface CustomHeaderRowProps {\n  header: CustomHeader;\n  onReset: (id: string) => void;\n  onRemove: (id: string) => void;\n  onChange: (value: CustomHeader) => void;\n  onBlur: () => void;\n}\n\nconst getCustomHeaderRowStyles = stylesFactory(() => {\n  return {\n    layout: css`\n      display: flex;\n      align-items: center;\n      margin-bottom: 4px;\n      > * {\n        margin-left: 4px;\n        margin-bottom: 0;\n        height: 100%;\n        &:first-child,\n        &:last-child {\n          margin-left: 0;\n        }\n      }\n    `,\n  };\n});\n\nconst CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }: CustomHeaderRowProps) => {\n  const styles = getCustomHeaderRowStyles();\n  return (\n    <div className={styles.layout}>\n      <LegacyForms.FormField\n        label=\"Header\"\n        name=\"name\"\n        placeholder=\"X-Custom-Header\"\n        labelWidth={5}\n        value={header.name || ''}\n        onChange={(e) => onChange({ ...header, name: e.target.value })}\n        onBlur={onBlur}\n      />\n      <LegacyForms.SecretFormField\n        label=\"Value\"\n        aria-label=\"Value\"\n        name=\"value\"\n        isConfigured={header.configured}\n        value={header.value}\n        labelWidth={5}\n        inputWidth={header.configured ? 11 : 12}\n        placeholder=\"Header Value\"\n        onReset={() => onReset(header.id)}\n        onChange={(e) => onChange({ ...header, value: e.target.value })}\n        onBlur={onBlur}\n      />\n      <Button\n        type=\"button\"\n        aria-label=\"Remove header\"\n        variant=\"secondary\"\n        size=\"xs\"\n        onClick={(_e) => onRemove(header.id)}\n      >\n        <Icon name=\"trash-alt\" />\n      </Button>\n    </div>\n  );\n};\n\nCustomHeaderRow.displayName = 'CustomHeaderRow';\n\nexport class CustomHeadersSettings extends PureComponent<Props, State> {\n  state: State = {\n    headers: [],\n  };\n\n  constructor(props: Props) {\n    super(props);\n    const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;\n    this.state = {\n      headers: Object.keys(jsonData)\n        .sort()\n        .filter((key) => key.startsWith('httpHeaderName'))\n        .map((key, index) => {\n          return {\n            id: uniqueId(),\n            name: jsonData[key],\n            value: secureJsonData !== undefined ? secureJsonData[key] : '',\n            configured: (secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`]) || false,\n          };\n        }),\n    };\n  }\n\n  updateSettings = () => {\n    const { headers } = this.state;\n\n    // we remove every httpHeaderName* field\n    const newJsonData = Object.fromEntries(\n      Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith('httpHeaderName'))\n    );\n\n    // we remove every httpHeaderValue* field\n    const newSecureJsonData = Object.fromEntries(\n      Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(\n        ([key, val]) => !key.startsWith('httpHeaderValue')\n      )\n    );\n\n    // then we add the current httpHeader-fields\n    for (const [index, header] of headers.entries()) {\n      newJsonData[`httpHeaderName${index + 1}`] = header.name;\n      if (!header.configured) {\n        newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;\n      }\n    }\n\n    this.props.onChange({\n      ...this.props.dataSourceConfig,\n      jsonData: newJsonData,\n      secureJsonData: newSecureJsonData,\n    });\n  };\n\n  onHeaderAdd = () => {\n    this.setState((prevState) => {\n      return {\n        headers: [...prevState.headers, { id: uniqueId(), name: '', value: '', configured: false }],\n      };\n    });\n  };\n\n  onHeaderChange = (headerIndex: number, value: CustomHeader) => {\n    this.setState(({ headers }) => {\n      return {\n        headers: headers.map((item, index) => {\n          if (headerIndex !== index) {\n            return item;\n          }\n          return { ...value };\n        }),\n      };\n    });\n  };\n\n  onHeaderReset = (headerId: string) => {\n    this.setState(({ headers }) => {\n      return {\n        headers: headers.map((h, i) => {\n          if (h.id !== headerId) {\n            return h;\n          }\n          return {\n            ...h,\n            value: '',\n            configured: false,\n          };\n        }),\n      };\n    });\n  };\n\n  onHeaderRemove = (headerId: string) => {\n    this.setState(\n      ({ headers }) => ({\n        headers: headers.filter((h) => h.id !== headerId),\n      }),\n      this.updateSettings\n    );\n  };\n\n  render() {\n    const { headers } = this.state;\n    return (\n      <div className={'gf-form-group'}>\n        <div className=\"gf-form\">\n          <h6>Custom HTTP Headers</h6>\n        </div>\n        <div>\n          {headers.map((header, i) => (\n            <CustomHeaderRow\n              key={header.id}\n              header={header}\n              onChange={(h) => {\n                this.onHeaderChange(i, h);\n              }}\n              onBlur={this.updateSettings}\n              onRemove={this.onHeaderRemove}\n              onReset={this.onHeaderReset}\n            />\n          ))}\n        </div>\n        <div className=\"gf-form\">\n          <Button\n            variant=\"secondary\"\n            icon=\"plus\"\n            type=\"button\"\n            onClick={(e) => {\n              this.onHeaderAdd();\n            }}\n          >\n            Add header\n          </Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomHeadersSettings;\n"],"names":[],"mappings":";;;;;;;;;;AAgCA,MAAM,wBAAA,GAA2B,cAAc,MAAM;AACnD,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAcV;AACF,CAAC,CAAA;AAED,MAAM,eAAA,GAAkB,CAAC,EAAE,MAAA,EAAQ,QAAQ,QAAU,EAAA,QAAA,EAAU,SAAoC,KAAA;AACjG,EAAA,MAAM,SAAS,wBAAyB,EAAA;AACxC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,WAAY,CAAA,SAAA;AAAA,MAAZ;AAAA,QACC,KAAM,EAAA,QAAA;AAAA,QACN,IAAK,EAAA,MAAA;AAAA,QACL,WAAY,EAAA,iBAAA;AAAA,QACZ,UAAY,EAAA,CAAA;AAAA,QACZ,KAAA,EAAO,OAAO,IAAQ,IAAA,EAAA;AAAA,QACtB,QAAA,EAAU,CAAC,CAAA,KAAM,QAAS,CAAA,EAAE,GAAG,MAAA,EAAQ,IAAM,EAAA,CAAA,CAAE,MAAO,CAAA,KAAA,EAAO,CAAA;AAAA,QAC7D;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,WAAY,CAAA,eAAA;AAAA,MAAZ;AAAA,QACC,KAAM,EAAA,OAAA;AAAA,QACN,YAAW,EAAA,OAAA;AAAA,QACX,IAAK,EAAA,OAAA;AAAA,QACL,cAAc,MAAO,CAAA,UAAA;AAAA,QACrB,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,UAAY,EAAA,CAAA;AAAA,QACZ,UAAA,EAAY,MAAO,CAAA,UAAA,GAAa,EAAK,GAAA,EAAA;AAAA,QACrC,WAAY,EAAA,cAAA;AAAA,QACZ,OAAS,EAAA,MAAM,OAAQ,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,QAChC,QAAA,EAAU,CAAC,CAAA,KAAM,QAAS,CAAA,EAAE,GAAG,MAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,MAAO,CAAA,KAAA,EAAO,CAAA;AAAA,QAC9D;AAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,YAAW,EAAA,eAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,IAAA;AAAA,QACL,OAAS,EAAA,CAAC,EAAO,KAAA,QAAA,CAAS,OAAO,EAAE,CAAA;AAAA,QAEnC,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,WAAY,EAAA;AAAA;AAAA;AACzB,GACF,EAAA,CAAA;AAEJ,CAAA;AAEA,eAAA,CAAgB,WAAc,GAAA,iBAAA;AAEvB,MAAM,8BAA8B,aAA4B,CAAA;AAAA,EAKrE,YAAY,KAAc,EAAA;AACxB,IAAA,KAAA,CAAM,KAAK,CAAA;AALb,IAAe,aAAA,CAAA,IAAA,EAAA,OAAA,EAAA;AAAA,MACb,SAAS;AAAC,KACZ,CAAA;AAoBA,IAAA,aAAA,CAAA,IAAA,EAAA,gBAAA,EAAiB,MAAM;AACrB,MAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,IAAK,CAAA,KAAA;AAGzB,MAAA,MAAM,cAAc,MAAO,CAAA,WAAA;AAAA,QACzB,OAAO,OAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,KAAK,GAAG,CAAA,KAAM,CAAC,GAAI,CAAA,UAAA,CAAW,gBAAgB,CAAC;AAAA,OAC/G;AAGA,MAAA,MAAM,oBAAoB,MAAO,CAAA,WAAA;AAAA,QAC/B,MAAA,CAAO,QAAQ,IAAK,CAAA,KAAA,CAAM,iBAAiB,cAAkB,IAAA,EAAE,CAAE,CAAA,MAAA;AAAA,UAC/D,CAAC,CAAC,GAAK,EAAA,GAAG,MAAM,CAAC,GAAA,CAAI,WAAW,iBAAiB;AAAA;AACnD,OACF;AAGA,MAAA,KAAA,MAAW,CAAC,KAAO,EAAA,MAAM,CAAK,IAAA,OAAA,CAAQ,SAAW,EAAA;AAC/C,QAAA,WAAA,CAAY,CAAiB,cAAA,EAAA,KAAA,GAAQ,CAAC,CAAA,CAAE,IAAI,MAAO,CAAA,IAAA;AACnD,QAAI,IAAA,CAAC,OAAO,UAAY,EAAA;AACtB,UAAA,iBAAA,CAAkB,CAAkB,eAAA,EAAA,KAAA,GAAQ,CAAC,CAAA,CAAE,IAAI,MAAO,CAAA,KAAA;AAAA;AAC5D;AAGF,MAAA,IAAA,CAAK,MAAM,QAAS,CAAA;AAAA,QAClB,GAAG,KAAK,KAAM,CAAA,gBAAA;AAAA,QACd,QAAU,EAAA,WAAA;AAAA,QACV,cAAgB,EAAA;AAAA,OACjB,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,aAAA,CAAA,IAAA,EAAA,aAAA,EAAc,MAAM;AAClB,MAAK,IAAA,CAAA,QAAA,CAAS,CAAC,SAAc,KAAA;AAC3B,QAAO,OAAA;AAAA,UACL,OAAS,EAAA,CAAC,GAAG,SAAA,CAAU,SAAS,EAAE,EAAA,EAAI,QAAS,EAAA,EAAG,MAAM,EAAI,EAAA,KAAA,EAAO,EAAI,EAAA,UAAA,EAAY,OAAO;AAAA,SAC5F;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAEA,IAAiB,aAAA,CAAA,IAAA,EAAA,gBAAA,EAAA,CAAC,aAAqB,KAAwB,KAAA;AAC7D,MAAA,IAAA,CAAK,QAAS,CAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AAC7B,QAAO,OAAA;AAAA,UACL,OAAS,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAM,KAAU,KAAA;AACpC,YAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,cAAO,OAAA,IAAA;AAAA;AAET,YAAO,OAAA,EAAE,GAAG,KAAM,EAAA;AAAA,WACnB;AAAA,SACH;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,aAAA,CAAA,IAAA,EAAA,eAAA,EAAgB,CAAC,QAAqB,KAAA;AACpC,MAAA,IAAA,CAAK,QAAS,CAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AAC7B,QAAO,OAAA;AAAA,UACL,OAAS,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAAG,CAAM,KAAA;AAC7B,YAAI,IAAA,CAAA,CAAE,OAAO,QAAU,EAAA;AACrB,cAAO,OAAA,CAAA;AAAA;AAET,YAAO,OAAA;AAAA,cACL,GAAG,CAAA;AAAA,cACH,KAAO,EAAA,EAAA;AAAA,cACP,UAAY,EAAA;AAAA,aACd;AAAA,WACD;AAAA,SACH;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,aAAA,CAAA,IAAA,EAAA,gBAAA,EAAiB,CAAC,QAAqB,KAAA;AACrC,MAAK,IAAA,CAAA,QAAA;AAAA,QACH,CAAC,EAAE,OAAA,EAAe,MAAA;AAAA,UAChB,SAAS,OAAQ,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAA,CAAE,OAAO,QAAQ;AAAA,SAClD,CAAA;AAAA,QACA,IAAK,CAAA;AAAA,OACP;AAAA,KACF,CAAA;AA3FE,IAAA,MAAM,EAAE,QAAU,EAAA,cAAA,EAAgB,gBAAiB,EAAA,GAAI,KAAK,KAAM,CAAA,gBAAA;AAClE,IAAA,IAAA,CAAK,KAAQ,GAAA;AAAA,MACX,SAAS,MAAO,CAAA,IAAA,CAAK,QAAQ,CAC1B,CAAA,IAAA,GACA,MAAO,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,WAAW,gBAAgB,CAAC,EAChD,GAAI,CAAA,CAAC,KAAK,KAAU,KAAA;AACnB,QAAO,OAAA;AAAA,UACL,IAAI,QAAS,EAAA;AAAA,UACb,IAAA,EAAM,SAAS,GAAG,CAAA;AAAA,UAClB,KAAO,EAAA,cAAA,KAAmB,SAAY,GAAA,cAAA,CAAe,GAAG,CAAI,GAAA,EAAA;AAAA,UAC5D,YAAa,gBAAoB,IAAA,gBAAA,CAAiB,kBAAkB,KAAQ,GAAA,CAAC,EAAE,CAAM,IAAA;AAAA,SACvF;AAAA,OACD;AAAA,KACL;AAAA;AACF,EA+EA,MAAS,GAAA;AACP,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,IAAK,CAAA,KAAA;AACzB,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,eACd,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,SAAA,EACb,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAG,iCAAmB,CACzB,EAAA,CAAA;AAAA,0BACC,KACE,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,QAAQ,CACpB,qBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UAEC,MAAA;AAAA,UACA,QAAA,EAAU,CAAC,CAAM,KAAA;AACf,YAAK,IAAA,CAAA,cAAA,CAAe,GAAG,CAAC,CAAA;AAAA,WAC1B;AAAA,UACA,QAAQ,IAAK,CAAA,cAAA;AAAA,UACb,UAAU,IAAK,CAAA,cAAA;AAAA,UACf,SAAS,IAAK,CAAA;AAAA,SAAA;AAAA,QAPT,MAAO,CAAA;AAAA,OASf,CACH,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SACb,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,IAAK,EAAA,MAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,YAAA,IAAA,CAAK,WAAY,EAAA;AAAA,WACnB;AAAA,UACD,QAAA,EAAA;AAAA;AAAA,OAGH,EAAA;AAAA,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist/esm/components/DataLinks/DataLink.js

@@ -1,4 +1,5 @@
-import React__default, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { stylesFactory, Button, DataLinkInput, LegacyForms } from '@grafana/ui';
@@ -31,100 +32,114 @@ const DataLink = (props) => {
       [field]: event.currentTarget.value
     });
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className }, /* @__PURE__ */ React__default.createElement("div", { className: styles.firstRow + " gf-form" }, /* @__PURE__ */ React__default.createElement(
-    FormField,
-    {
-      className: styles.nameField,
-      labelWidth: 6,
-      inputWidth: null,
-      label: "Field",
-      type: "text",
-      value: value.field,
-      tooltip: "Can be exact field name or a regex pattern that will match on the field name.",
-      onChange: handleChange("field")
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      variant: "destructive",
-      title: "Remove field",
-      icon: "times",
-      onClick: (event) => {
-        event.preventDefault();
-        onDelete();
-      }
-    }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.createElement(
-    FormField,
-    {
-      className: styles.nameField,
-      inputWidth: null,
-      label: "Label",
-      type: "text",
-      value: value.label,
-      onChange: handleChange("label"),
-      tooltip: "Use to provide a meaningful label to the data matched in the regex"
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    FormField,
-    {
-      className: styles.regexField,
-      inputWidth: null,
-      label: "Regex",
-      type: "text",
-      value: value.matcherRegex,
-      onChange: handleChange("matcherRegex"),
-      tooltip: "Use to parse and capture some part of the log message. You can use the captured groups in the template."
-    }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.createElement(
-    FormField,
-    {
-      label: showInternalLink ? "Query" : "URL",
-      labelWidth: 6,
-      inputEl: /* @__PURE__ */ React__default.createElement(
-        DataLinkInput,
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.firstRow + " gf-form", children: [
+      /* @__PURE__ */ jsx(
+        FormField,
         {
-          placeholder: showInternalLink ? "${__value.raw}" : "http://example.com/${__value.raw}",
-          value: value.url || "",
-          onChange: (newValue) => onChange({
-            ...value,
-            url: newValue
-          }),
-          suggestions
+          className: styles.nameField,
+          labelWidth: 6,
+          inputWidth: null,
+          label: "Field",
+          type: "text",
+          value: value.field,
+          tooltip: "Can be exact field name or a regex pattern that will match on the field name.",
+          onChange: handleChange("field")
         }
       ),
-      className: css`
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "destructive",
+          title: "Remove field",
+          icon: "times",
+          onClick: (event) => {
+            event.preventDefault();
+            onDelete();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "gf-form", children: [
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          className: styles.nameField,
+          inputWidth: null,
+          label: "Label",
+          type: "text",
+          value: value.label,
+          onChange: handleChange("label"),
+          tooltip: "Use to provide a meaningful label to the data matched in the regex"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          className: styles.regexField,
+          inputWidth: null,
+          label: "Regex",
+          type: "text",
+          value: value.matcherRegex,
+          onChange: handleChange("matcherRegex"),
+          tooltip: "Use to parse and capture some part of the log message. You can use the captured groups in the template."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: showInternalLink ? "Query" : "URL",
+        labelWidth: 6,
+        inputEl: /* @__PURE__ */ jsx(
+          DataLinkInput,
+          {
+            placeholder: showInternalLink ? "${__value.raw}" : "http://example.com/${__value.raw}",
+            value: value.url || "",
+            onChange: (newValue) => onChange({
+              ...value,
+              url: newValue
+            }),
+            suggestions
+          }
+        ),
+        className: css`
             width: 100%;
           `
-    }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: styles.row }, /* @__PURE__ */ React__default.createElement(
-    Switch,
-    {
-      labelClass: "width-6",
-      label: "Internal link",
-      checked: showInternalLink,
-      onChange: () => {
-        if (showInternalLink) {
-          onChange({
-            ...value,
-            datasourceUid: undefined
-          });
-        }
-        setShowInternalLink(!showInternalLink);
       }
-    }
-  ), showInternalLink && /* @__PURE__ */ React__default.createElement(
-    DataSourcePicker,
-    {
-      onChange: (ds) => {
-        onChange({
-          ...value,
-          datasourceUid: ds.uid
-        });
-      },
-      current: value.datasourceUid
-    }
-  )));
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          labelClass: "width-6",
+          label: "Internal link",
+          checked: showInternalLink,
+          onChange: () => {
+            if (showInternalLink) {
+              onChange({
+                ...value,
+                datasourceUid: undefined
+              });
+            }
+            setShowInternalLink(!showInternalLink);
+          }
+        }
+      ),
+      showInternalLink && /* @__PURE__ */ jsx(
+        DataSourcePicker,
+        {
+          onChange: (ds) => {
+            onChange({
+              ...value,
+              datasourceUid: ds.uid
+            });
+          },
+          current: value.datasourceUid
+        }
+      )
+    ] })
+  ] });
 };
 function useInternalLink(datasourceUid) {
   const [showInternalLink, setShowInternalLink] = useState(!!datasourceUid);