@grafana/plugin-ui 0.7.2 → 0.9.0

package/dist/components/ConfigEditor/Auth/tls/TLSSettingsSection.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TLSSettingsSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const TLSSettingsSection = ({ children, enabled, label, tooltipText, onToggle, readOnly, }) => {
+    const { colors, spacing } = (0, ui_1.useTheme2)();
+    const styles = {
+        container: (0, css_1.css)({
+            marginTop: 3,
+        }),
+        checkboxContainer: (0, css_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+        }),
+        infoIcon: (0, css_1.css)({
+            marginTop: -2,
+            marginLeft: 5,
+            color: colors.text.secondary,
+        }),
+        content: (0, css_1.css)({
+            margin: spacing(1, 0, 2, 3),
+        }),
+    };
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement("div", { className: styles.checkboxContainer },
+            react_1.default.createElement(ui_1.Checkbox, { value: enabled, label: label, onChange: () => onToggle(!enabled), disabled: readOnly }),
+            react_1.default.createElement(ui_1.Tooltip, { placement: "top", content: tooltipText, interactive: true },
+                react_1.default.createElement(ui_1.Icon, { name: "info-circle", className: styles.infoIcon, size: "sm" }))),
+        enabled && children && react_1.default.createElement("div", { className: styles.content }, children)));
+};
+exports.TLSSettingsSection = TLSSettingsSection;
+//# sourceMappingURL=TLSSettingsSection.js.map

package/dist/components/ConfigEditor/Auth/tls/TLSSettingsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TLSSettingsSection.js","sourceRoot":"","sources":["../../../../../src/components/ConfigEditor/Auth/tls/TLSSettingsSection.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,sCAAmC;AACnC,oCAAiE;AAU1D,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GACuB,EAAE,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,cAAS,GAAE,CAAC;IACxC,MAAM,MAAM,GAAG;QACb,SAAS,EAAE,IAAA,SAAG,EAAC;YACb,SAAS,EAAE,CAAC;SACb,CAAC;QACF,iBAAiB,EAAE,IAAA,SAAG,EAAC;YACrB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB,CAAC;QACF,QAAQ,EAAE,IAAA,SAAG,EAAC;YACZ,SAAS,EAAE,CAAC,CAAC;YACb,UAAU,EAAE,CAAC;YACb,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS;SAC7B,CAAC;QACF,OAAO,EAAE,IAAA,SAAG,EAAC;YACX,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SAC5B,CAAC;KACH,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC9B,uCAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;YACtC,8BAAC,aAAQ,IAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAI;YAClG,8BAAC,YAAO,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,WAAW,EAAE,WAAW;gBACxD,8BAAC,SAAI,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CACzD,CACN;QACL,OAAO,IAAI,QAAQ,IAAI,uCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACpE,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthMethod = void 0;
+var AuthMethod;
+(function (AuthMethod) {
+    AuthMethod["NoAuth"] = "NoAuth";
+    AuthMethod["BasicAuth"] = "BasicAuth";
+    AuthMethod["OAuthForward"] = "OAuthForward";
+    AuthMethod["CrossSiteCredentials"] = "CrossSiteCredentials";
+})(AuthMethod = exports.AuthMethod || (exports.AuthMethod = {}));
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/Auth/types.ts"],"names":[],"mappings":";;;AAEA,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,+BAAiB,CAAA;IACjB,qCAAuB,CAAA;IACvB,2CAA6B,CAAA;IAC7B,2DAA6C,CAAA;AAC/C,CAAC,EALW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAKrB"}

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

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCustomHeaders = exports.getTLSProps = exports.getBasicAuthProps = exports.getOnAuthMethodSelectHandler = exports.getSelectedMethod = exports.convertLegacyAuthProps = void 0;
+const types_1 = require("./types");
+const headerNamePrefix = 'httpHeaderName';
+const headerValuePrefix = 'httpHeaderValue';
+function convertLegacyAuthProps({ config, onChange, }) {
+    const props = {
+        selectedMethod: getSelectedMethod(config),
+        onAuthMethodSelect: getOnAuthMethodSelectHandler(config, onChange),
+        basicAuth: getBasicAuthProps(config, onChange),
+        TLS: getTLSProps(config, onChange),
+        customHeaders: getCustomHeaders(config, onChange),
+        readOnly: config.readOnly,
+    };
+    return props;
+}
+exports.convertLegacyAuthProps = convertLegacyAuthProps;
+function getSelectedMethod(config) {
+    if (config.basicAuth) {
+        return types_1.AuthMethod.BasicAuth;
+    }
+    if (config.withCredentials) {
+        return types_1.AuthMethod.CrossSiteCredentials;
+    }
+    if (config.jsonData.oauthPassThru) {
+        return types_1.AuthMethod.OAuthForward;
+    }
+    return types_1.AuthMethod.NoAuth;
+}
+exports.getSelectedMethod = getSelectedMethod;
+function getOnAuthMethodSelectHandler(config, onChange) {
+    return (method) => {
+        onChange(Object.assign(Object.assign({}, config), { basicAuth: method === types_1.AuthMethod.BasicAuth, withCredentials: method === types_1.AuthMethod.CrossSiteCredentials, jsonData: Object.assign(Object.assign({}, config.jsonData), { oauthPassThru: method === types_1.AuthMethod.OAuthForward }) }));
+    };
+}
+exports.getOnAuthMethodSelectHandler = getOnAuthMethodSelectHandler;
+function getBasicAuthProps(config, onChange) {
+    return {
+        user: config.basicAuthUser,
+        passwordConfigured: config.secureJsonFields.basicAuthPassword,
+        onUserChange: (user) => onChange(Object.assign(Object.assign({}, config), { basicAuthUser: user })),
+        onPasswordChange: (password) => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { basicAuthPassword: password }) })),
+        onPasswordReset: () => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { basicAuthPassword: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { basicAuthPassword: false }) })),
+    };
+}
+exports.getBasicAuthProps = getBasicAuthProps;
+function getTLSProps(config, onChange) {
+    return {
+        selfSignedCertificate: {
+            enabled: Boolean(config.jsonData.tlsAuthWithCACert),
+            certificateConfigured: config.secureJsonFields.tlsCACert,
+            onToggle: (enabled) => enabled
+                ? onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { tlsAuthWithCACert: enabled }) }))
+                : onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { tlsAuthWithCACert: enabled }), secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsCACert: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { tlsCACert: false }) })),
+            onCertificateChange: (certificate) => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsCACert: certificate }) })),
+            onCertificateReset: () => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsCACert: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { tlsCACert: false }) })),
+        },
+        TLSClientAuth: {
+            enabled: config.jsonData.tlsAuth,
+            serverName: config.jsonData.serverName,
+            clientCertificateConfigured: config.secureJsonFields.tlsClientCert,
+            clientKeyConfigured: config.secureJsonFields.tlsClientKey,
+            onToggle: (enabled) => enabled
+                ? onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { tlsAuth: enabled }) }))
+                : onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { tlsAuth: enabled, serverName: '' }), secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsClientCert: '', tlsClientKey: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { tlsClientCert: false, tlsClientKey: false }) })),
+            onServerNameChange: (serverName) => onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { serverName }) })),
+            onClientCertificateChange: (clientCertificate) => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsClientCert: clientCertificate }) })),
+            onClientCertificateReset: () => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsClientCert: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { tlsClientCert: false }) })),
+            onClientKeyChange: (clientKey) => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsClientKey: clientKey }) })),
+            onClientKeyReset: () => onChange(Object.assign(Object.assign({}, config), { secureJsonData: Object.assign(Object.assign({}, config.secureJsonData), { tlsClientKey: '' }), secureJsonFields: Object.assign(Object.assign({}, config.secureJsonFields), { tlsClientKey: false }) })),
+        },
+        skipTLSVerification: {
+            enabled: config.jsonData.tlsSkipVerify,
+            onToggle: (enabled) => onChange(Object.assign(Object.assign({}, config), { jsonData: Object.assign(Object.assign({}, config.jsonData), { tlsSkipVerify: enabled }) })),
+        },
+    };
+}
+exports.getTLSProps = getTLSProps;
+function getCustomHeaders(config, onChange) {
+    const headers = Object.keys(config.jsonData)
+        .filter((key) => key.startsWith(headerNamePrefix))
+        .sort()
+        .map((key) => {
+        var _a;
+        const index = key.slice(headerNamePrefix.length);
+        return {
+            name: config.jsonData[key],
+            configured: (_a = config.secureJsonFields[`${headerValuePrefix}${index}`]) !== null && _a !== void 0 ? _a : false,
+        };
+    });
+    return {
+        headers,
+        onChange: (headers) => {
+            const newJsonData = Object.fromEntries(Object.entries(config.jsonData).filter(([key]) => !key.startsWith(headerNamePrefix)));
+            const newSecureJsonData = Object.fromEntries(Object.entries(config.secureJsonData || {}).filter(([key]) => !key.startsWith(headerValuePrefix)));
+            const newSecureJsonFields = Object.fromEntries(Object.entries(config.secureJsonFields).filter(([key]) => !key.startsWith(headerValuePrefix)));
+            headers.forEach((header, index) => {
+                newJsonData[`${headerNamePrefix}${index + 1}`] = header.name;
+                if (header.configured) {
+                    newSecureJsonFields[`${headerValuePrefix}${index + 1}`] = true;
+                }
+                else {
+                    newSecureJsonData[`${headerValuePrefix}${index + 1}`] = header.value;
+                }
+            });
+            onChange(Object.assign(Object.assign({}, config), { jsonData: newJsonData, secureJsonData: newSecureJsonData, secureJsonFields: newSecureJsonFields }));
+        },
+    };
+}
+exports.getCustomHeaders = getCustomHeaders;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/Auth/utils.ts"],"names":[],"mappings":"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"}

package/dist/components/ConfigEditor/ConfigSection/ConfigDescriptionLink.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigDescriptionLink = void 0;
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_1 = require("@grafana/ui");
+function ConfigDescriptionLink(props) {
+    const { description, suffix, feature } = props;
+    const text = `Learn more about ${feature}`;
+    const styles = (0, ui_1.useStyles2)(getStyles);
+    return (react_1.default.createElement("span", { className: styles.container },
+        description,
+        react_1.default.createElement("a", { "aria-label": text, href: `https://grafana.com/docs/grafana/next/datasources/${suffix}`, rel: "noreferrer", target: "_blank" }, text)));
+}
+exports.ConfigDescriptionLink = ConfigDescriptionLink;
+const getStyles = (theme) => {
+    return {
+        container: (0, css_1.css)({
+            color: theme.colors.text.secondary,
+            a: (0, css_1.css)({
+                color: theme.colors.text.link,
+                textDecoration: 'underline',
+                marginLeft: '5px',
+                '&:hover': {
+                    textDecoration: 'none',
+                },
+            }),
+        }),
+    };
+};
+//# sourceMappingURL=ConfigDescriptionLink.js.map

package/dist/components/ConfigEditor/ConfigSection/ConfigDescriptionLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigDescriptionLink.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/ConfigSection/ConfigDescriptionLink.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,0DAA0B;AAG1B,oCAAyC;AAQzC,SAAgB,qBAAqB,CAAC,KAAY;IAChD,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,IAAI,GAAG,oBAAoB,OAAO,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,IAAA,eAAU,EAAC,SAAS,CAAC,CAAC;IAErC,OAAO,CACL,wCAAM,SAAS,EAAE,MAAM,CAAC,SAAS;QAC9B,WAAW;QACZ,mDACc,IAAI,EAChB,IAAI,EAAE,qDAAqD,MAAM,EAAE,EACnE,GAAG,EAAC,YAAY,EAChB,MAAM,EAAC,QAAQ,IAEd,IAAI,CACH,CACC,CACR,CAAC;AACJ,CAAC;AAlBD,sDAkBC;AAED,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;IACzC,OAAO;QACL,SAAS,EAAE,IAAA,SAAG,EAAC;YACb,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;YAClC,CAAC,EAAE,IAAA,SAAG,EAAC;gBACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;gBAC7B,cAAc,EAAE,WAAW;gBAC3B,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE;oBACT,cAAc,EAAE,MAAM;iBACvB;aACF,CAAC;SACH,CAAC;KACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/ConfigEditor/ConfigSection/ConfigSection.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const GenericConfigSection_1 = require("./GenericConfigSection");
+const ConfigSection = (_a) => {
+    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
+    return (react_1.default.createElement(GenericConfigSection_1.GenericConfigSection, Object.assign({}, props, { kind: "section" }), children));
+};
+exports.ConfigSection = ConfigSection;
+//# sourceMappingURL=ConfigSection.js.map

package/dist/components/ConfigEditor/ConfigSection/ConfigSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigSection.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/ConfigSection/ConfigSection.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,iEAAkG;AAI3F,MAAM,aAAa,GAAG,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAE,QAAQ,OAA4C,EAAvC,KAAK,sBAApB,YAAsB,CAAF;IAChD,OAAO,CACL,8BAAC,2CAAoB,oBAAK,KAAK,IAAE,IAAI,EAAC,SAAS,KAC5C,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,aAAa,iBAMxB"}

package/dist/components/ConfigEditor/ConfigSection/ConfigSubSection.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigSubSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const GenericConfigSection_1 = require("./GenericConfigSection");
+const ConfigSubSection = (_a) => {
+    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
+    return (react_1.default.createElement(GenericConfigSection_1.GenericConfigSection, Object.assign({}, props, { kind: "sub-section" }), children));
+};
+exports.ConfigSubSection = ConfigSubSection;
+//# sourceMappingURL=ConfigSubSection.js.map

package/dist/components/ConfigEditor/ConfigSection/ConfigSubSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigSubSection.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/ConfigSection/ConfigSubSection.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,iEAAkG;AAI3F,MAAM,gBAAgB,GAAG,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAE,QAAQ,OAA4C,EAAvC,KAAK,sBAApB,YAAsB,CAAF;IACnD,OAAO,CACL,8BAAC,2CAAoB,oBAAK,KAAK,IAAE,IAAI,EAAC,aAAa,KAChD,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,gBAAgB,oBAM3B"}

package/dist/components/ConfigEditor/ConfigSection/GenericConfigSection.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericConfigSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const GenericConfigSection = ({ children, title, description, isCollapsible = false, isInitiallyOpen = true, kind = 'section', className, }) => {
+    const { colors, typography, spacing } = (0, ui_1.useTheme2)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(isCollapsible ? isInitiallyOpen : true);
+    const iconName = isOpen ? 'angle-up' : 'angle-down';
+    const isSubSection = kind === 'sub-section';
+    const collapsibleButtonAriaLabel = `${isOpen ? 'Collapse' : 'Expand'} section ${title}`;
+    const styles = {
+        header: (0, css_1.css)({
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        }),
+        title: (0, css_1.css)({
+            margin: 0,
+        }),
+        subtitle: (0, css_1.css)({
+            margin: 0,
+            fontWeight: typography.fontWeightRegular,
+        }),
+        descriptionText: (0, css_1.css)(Object.assign(Object.assign({ marginTop: spacing(isSubSection ? 0.25 : 0.5), marginBottom: 0 }, typography.bodySmall), { color: colors.text.secondary })),
+        content: (0, css_1.css)({
+            marginTop: spacing(2),
+        }),
+    };
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement("div", { className: styles.header },
+            kind === 'section' ? react_1.default.createElement("h3", { className: styles.title }, title) : react_1.default.createElement("h6", { className: styles.subtitle }, title),
+            isCollapsible && (react_1.default.createElement(ui_1.IconButton, { name: iconName, onClick: () => setIsOpen(!isOpen), type: "button", size: "xl", "aria-label": collapsibleButtonAriaLabel }))),
+        description && react_1.default.createElement("p", { className: styles.descriptionText }, description),
+        isOpen && react_1.default.createElement("div", { className: styles.content }, children)));
+};
+exports.GenericConfigSection = GenericConfigSection;
+//# sourceMappingURL=GenericConfigSection.js.map

package/dist/components/ConfigEditor/ConfigSection/GenericConfigSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericConfigSection.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/ConfigSection/GenericConfigSection.tsx"],"names":[],"mappings":";;;;AAAA,uDAAmD;AACnD,sCAAmC;AACnC,oCAA8D;AAWvD,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,KAAK,EACL,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,eAAe,GAAG,IAAI,EACtB,IAAI,GAAG,SAAS,EAChB,SAAS,GACsB,EAAE,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAA,cAAS,GAAE,CAAC;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7E,MAAM,QAAQ,GAAa,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;IAC9D,MAAM,YAAY,GAAG,IAAI,KAAK,aAAa,CAAC;IAC5C,MAAM,0BAA0B,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAAY,KAAK,EAAE,CAAC;IAExF,MAAM,MAAM,GAAG;QACb,MAAM,EAAE,IAAA,SAAG,EAAC;YACV,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,QAAQ;SACrB,CAAC;QACF,KAAK,EAAE,IAAA,SAAG,EAAC;YACT,MAAM,EAAE,CAAC;SACV,CAAC;QACF,QAAQ,EAAE,IAAA,SAAG,EAAC;YACZ,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,UAAU,CAAC,iBAAiB;SACzC,CAAC;QACF,eAAe,EAAE,IAAA,SAAG,gCAClB,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAC7C,YAAY,EAAE,CAAC,IACZ,UAAU,CAAC,SAAS,KACvB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAC5B;QACF,OAAO,EAAE,IAAA,SAAG,EAAC;YACX,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;SACtB,CAAC;KACH,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS;QACvB,uCAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,KAAK,CAAM;YAC7G,aAAa,IAAI,CAChB,8BAAC,eAAU,IACT,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,gBACG,0BAA0B,GACtC,CACH,CACG;QACL,WAAW,IAAI,qCAAG,SAAS,EAAE,MAAM,CAAC,eAAe,IAAG,WAAW,CAAK;QACtE,MAAM,IAAI,uCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACvD,CACP,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,oBAAoB,wBAyD/B"}

package/dist/components/ConfigEditor/ConfigSection/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigDescriptionLink = exports.ConfigSubSection = exports.ConfigSection = void 0;
+var ConfigSection_1 = require("./ConfigSection");
+Object.defineProperty(exports, "ConfigSection", { enumerable: true, get: function () { return ConfigSection_1.ConfigSection; } });
+var ConfigSubSection_1 = require("./ConfigSubSection");
+Object.defineProperty(exports, "ConfigSubSection", { enumerable: true, get: function () { return ConfigSubSection_1.ConfigSubSection; } });
+var ConfigDescriptionLink_1 = require("./ConfigDescriptionLink");
+Object.defineProperty(exports, "ConfigDescriptionLink", { enumerable: true, get: function () { return ConfigDescriptionLink_1.ConfigDescriptionLink; } });
+//# sourceMappingURL=index.js.map

package/dist/components/ConfigEditor/ConfigSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/ConfigSection/index.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AACzB,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionSettings = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const ConfigSection_1 = require("../ConfigSection");
+const ConnectionSettings = ({ config, onChange, description, urlPlaceholder, urlTooltip, urlLabel, className, }) => {
+    const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(config.url);
+    const styles = {
+        container: (0, css_1.css)({
+            maxWidth: 578,
+        }),
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ConfigSection_1.ConfigSection, { title: "Connection", description: description, className: (0, css_1.cx)(styles.container, className) },
+            react_1.default.createElement(ui_1.InlineField, { htmlFor: "connection-url", label: urlLabel || 'URL', labelWidth: 24, tooltip: urlTooltip || (react_1.default.createElement(react_1.default.Fragment, null,
+                    "Specify a complete HTTP URL",
+                    react_1.default.createElement("br", null),
+                    "(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 },
+                react_1.default.createElement(ui_1.Input, { id: "connection-url", "aria-label": "Data source connection URL", onChange: (event) => onChange(Object.assign(Object.assign({}, config), { url: event.currentTarget.value })), value: config.url || '', placeholder: urlPlaceholder || 'URL' })))));
+};
+exports.ConnectionSettings = ConnectionSettings;
+//# sourceMappingURL=ConnectionSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionSettings.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/Connection/ConnectionSettings.tsx"],"names":[],"mappings":";;;;AAAA,0DAAyC;AACzC,sCAAuC;AACvC,oCAAiE;AACjE,oDAAiD;AAa1C,MAAM,kBAAkB,GAAgE,CAAC,EAC9F,MAAM,EACN,QAAQ,EACR,WAAW,EACX,cAAc,EACd,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,qFAAqF,CAAC,IAAI,CAC3G,MAAM,CAAC,GAAG,CACX,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,SAAS,EAAE,IAAA,SAAG,EAAC;YACb,QAAQ,EAAE,GAAG;SACd,CAAC;KACH,CAAC;IAEF,OAAO,CACL;QACE,8BAAC,6BAAa,IAAC,KAAK,EAAC,YAAY,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,IAAA,QAAE,EAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;YACpG,8BAAC,gBAAW,IACV,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAE,QAAQ,IAAI,KAAK,EACxB,UAAU,EAAE,EAAE,EACd,OAAO,EACL,UAAU,IAAI,CACZ;;oBAEE,yCAAM;6DAEL,CACJ,EAEH,IAAI,QACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,QAAQ,QACR,OAAO,EAAE,CAAC,UAAU,IAAI,CAAC,MAAM,CAAC,QAAQ,EACxC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAA0B,EACnD,WAAW;gBAEX,8BAAC,UAAK,IACJ,EAAE,EAAC,gBAAgB,gBACR,4BAA4B,EACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,QAAQ,iCACH,MAAM,KACT,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,IAC9B,EAEJ,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,EACvB,WAAW,EAAE,cAAc,IAAI,KAAK,GACpC,CACU,CACA,CACf,CACJ,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,kBAAkB,sBA0D7B"}

package/dist/components/ConfigEditor/Connection/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionSettings = void 0;
+var ConnectionSettings_1 = require("./ConnectionSettings");
+Object.defineProperty(exports, "ConnectionSettings", { enumerable: true, get: function () { return ConnectionSettings_1.ConnectionSettings; } });
+//# sourceMappingURL=index.js.map

package/dist/components/ConfigEditor/Connection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ConfigEditor/Connection/index.ts"],"names":[],"mappings":";;;AAAA,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA"}

package/dist/components/ConfigEditor/DataSourceDescription.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceDescription = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, className }) => {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = {
+        container: (0, css_1.css)({
+            p: {
+                margin: 0,
+            },
+            'p + p': {
+                marginTop: theme.spacing(2),
+            },
+        }),
+        text: (0, css_1.css)(Object.assign(Object.assign({}, theme.typography.body), { color: theme.colors.text.secondary, a: (0, css_1.css)({
+                color: theme.colors.text.link,
+                textDecoration: 'underline',
+                '&:hover': {
+                    textDecoration: 'none',
+                },
+            }) })),
+    };
+    return (react_1.default.createElement("div", { className: (0, css_1.cx)(styles.container, className) },
+        react_1.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,",
+            ' ',
+            react_1.default.createElement("a", { href: docsLink, target: "_blank", rel: "noreferrer" }, "view the documentation"),
+            "."),
+        hasRequiredFields && (react_1.default.createElement("p", { className: styles.text },
+            react_1.default.createElement("i", null, "Fields marked with * are required")))));
+};
+exports.DataSourceDescription = DataSourceDescription;
+//# sourceMappingURL=DataSourceDescription.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataSourceDescription.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/DataSourceDescription.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,sCAAuC;AACvC,oCAAwC;AASjC,MAAM,qBAAqB,GAAG,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,GAAG,IAAI,EAAE,SAAS,EAAS,EAAE,EAAE;IAChH,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAE1B,MAAM,MAAM,GAAG;QACb,SAAS,EAAE,IAAA,SAAG,EAAC;YACb,CAAC,EAAE;gBACD,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;aAC5B;SACF,CAAC;QACF,IAAI,EAAE,IAAA,SAAG,kCACJ,KAAK,CAAC,UAAU,CAAC,IAAI,KACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAClC,CAAC,EAAE,IAAA,SAAG,EAAC;gBACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;gBAC7B,cAAc,EAAE,WAAW;gBAC3B,SAAS,EAAE;oBACT,cAAc,EAAE,MAAM;iBACvB;aACF,CAAC,IACF;KACH,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,QAAE,EAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC;QAC7C,qCAAG,SAAS,EAAE,MAAM,CAAC,IAAI;;YACC,cAAc;;YACf,GAAG;YAC1B,qCAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,6BAE/C;gBAEF;QACH,iBAAiB,IAAI,CACpB,qCAAG,SAAS,EAAE,MAAM,CAAC,IAAI;YACvB,6EAAwC,CACtC,CACL,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,qBAAqB,yBA0ChC"}

package/dist/components/ConfigEditor/SecureSocksProxyToggle.js

@@ -5,25 +5,20 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const ui_1 = require("@grafana/ui");
 const runtime_1 = require("@grafana/runtime");
-const compatibility_1 = require("../../utils/compatibility");
 const SecureSocksProxyToggle = (_a) => {
     var { labelWidth = 10 } = _a, props = tslib_1.__rest(_a, ["labelWidth"]);
     const { dataSourceConfig, onChange } = props;
     const handleSwitchChange = (e) => {
         onChange(Object.assign(Object.assign({}, dataSourceConfig), { jsonData: Object.assign(Object.assign({}, dataSourceConfig.jsonData), { enableSecureSocksProxy: e.target.checked }) }));
     };
-    return (
-    /* if the compatibility check returns true, secureSocksDSProxyEnabled will be an option in the Grafana config */
-    (0, compatibility_1.hasCompatibility)(compatibility_1.CompatibilityFeature.SECURE_SOCKS_PROXY) && runtime_1.config.secureSocksDSProxyEnabled
-        &&
-            (react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: "gf-form" },
-                    react_1.default.createElement("div", { className: "gf-form gf-form-inline" },
-                        react_1.default.createElement(ui_1.InlineField, { label: "Secure Socks Proxy Enabled", labelWidth: labelWidth, tooltip: react_1.default.createElement(react_1.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, ",
-                                ' ',
-                                react_1.default.createElement("a", { href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/", target: "_blank", rel: "noopener noreferrer" }, "click here.")) },
-                            react_1.default.createElement(ui_1.InlineSwitch, { value: dataSourceConfig.jsonData.enableSecureSocksProxy, onChange: handleSwitchChange })))))));
+    return (runtime_1.config.secureSocksDSProxyEnabled && (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "gf-form" },
+            react_1.default.createElement("div", { className: "gf-form gf-form-inline" },
+                react_1.default.createElement(ui_1.InlineField, { htmlFor: "secureSocksProxyEnabled", label: "Secure Socks Proxy Enabled", labelWidth: labelWidth, tooltip: react_1.default.createElement(react_1.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,",
+                        ' ',
+                        react_1.default.createElement("a", { href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/", target: "_blank", rel: "noopener noreferrer" }, "click here.")) },
+                    react_1.default.createElement(ui_1.InlineSwitch, { id: "secureSocksProxyEnabled", value: dataSourceConfig.jsonData.enableSecureSocksProxy, onChange: handleSwitchChange })))))));
 };
 exports.SecureSocksProxyToggle = SecureSocksProxyToggle;
 //# sourceMappingURL=SecureSocksProxyToggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SecureSocksProxyToggle.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/SecureSocksProxyToggle.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,oCAA0F;AAC1F,8CAA0C;AAE1C,6DAAmF;AAQ5E,MAAM,sBAAsB,GAAoB,CAAC,EAGvD,EAAE,EAAE;QAHmD,EACtD,UAAU,GAAC,EAAE,OAEd,EADI,KAAK,sBAF8C,cAGvD,CADS;IAER,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,kBAAkB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,QAAQ,iCACH,gBAAgB,KACnB,QAAQ,kCACH,gBAAgB,CAAC,QAAQ,KAC5B,sBAAsB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,OAE1C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO;IACH,gHAAgH;IAChH,IAAA,gCAAgB,EAAC,oCAAoB,CAAC,kBAAkB,CAAC,IAAK,gBAAc,CAAC,yBAAyB;;YAEtG,CACA;gBACE,uCAAK,SAAS,EAAC,SAAS;oBACtB,uCAAK,SAAS,EAAC,wBAAwB;wBACrC,8BAAC,gBAAW,IACV,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAE,UAAU,EACtB,OAAO,EACL;;gCAC2J,GAAG;gCAC5J,qCACE,IAAI,EAAC,gFAAgF,EACrF,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACH;4BAGP,8BAAC,iBAAY,IACX,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,sBAAsB,EACvD,QAAQ,EAAE,kBAAkB,GAC5B,CACY,CACV,CACF,CACA,CACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,sBAAsB,0BAiDjC"}
+{"version":3,"file":"SecureSocksProxyToggle.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/SecureSocksProxyToggle.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,oCAA4F;AAC5F,8CAA0C;AASnC,MAAM,sBAAsB,GAAG,CAAC,EAAoC,EAAE,EAAE;QAAxC,EAAE,UAAU,GAAG,EAAE,OAAmB,EAAd,KAAK,sBAA3B,cAA6B,CAAF;IAChE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,kBAAkB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,QAAQ,iCACH,gBAAgB,KACnB,QAAQ,kCACH,gBAAgB,CAAC,QAAQ,KAC5B,sBAAsB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,OAE1C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACJ,gBAAc,CAAC,yBAAyB,IAAI,CAC3C;QACE,uCAAK,SAAS,EAAC,SAAS;YACtB,uCAAK,SAAS,EAAC,wBAAwB;gBACrC,8BAAC,gBAAW,IACV,OAAO,EAAC,yBAAyB,EACjC,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAE,UAAU,EACtB,OAAO,EACL;;wBAEqD,GAAG;wBACtD,qCACE,IAAI,EAAC,gFAAgF,EACrF,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACH;oBAGL,8BAAC,iBAAY,IACX,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,sBAAsB,EACvD,QAAQ,EAAE,kBAAkB,GAC5B,CACU,CACV,CACF,CACF,CACP,CACF,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,sBAAsB,0BA8CjC"}

package/dist/components/ConfigEditor/index.js

@@ -1,8 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SecureSocksProxyToggle = exports.InlineLabel = void 0;
-var InlineLabel_1 = require("./InlineLabel");
-Object.defineProperty(exports, "InlineLabel", { enumerable: true, get: function () { return InlineLabel_1.InlineLabel; } });
+exports.AdvancedHttpSettings = exports.ConnectionSettings = exports.convertLegacyAuthProps = exports.AuthMethod = exports.Auth = exports.ConfigDescriptionLink = exports.ConfigSubSection = exports.ConfigSection = exports.DataSourceDescription = exports.SecureSocksProxyToggle = void 0;
 var SecureSocksProxyToggle_1 = require("./SecureSocksProxyToggle");
 Object.defineProperty(exports, "SecureSocksProxyToggle", { enumerable: true, get: function () { return SecureSocksProxyToggle_1.SecureSocksProxyToggle; } });
+var DataSourceDescription_1 = require("./DataSourceDescription");
+Object.defineProperty(exports, "DataSourceDescription", { enumerable: true, get: function () { return DataSourceDescription_1.DataSourceDescription; } });
+var ConfigSection_1 = require("./ConfigSection");
+Object.defineProperty(exports, "ConfigSection", { enumerable: true, get: function () { return ConfigSection_1.ConfigSection; } });
+Object.defineProperty(exports, "ConfigSubSection", { enumerable: true, get: function () { return ConfigSection_1.ConfigSubSection; } });
+Object.defineProperty(exports, "ConfigDescriptionLink", { enumerable: true, get: function () { return ConfigSection_1.ConfigDescriptionLink; } });
+var Auth_1 = require("./Auth");
+Object.defineProperty(exports, "Auth", { enumerable: true, get: function () { return Auth_1.Auth; } });
+Object.defineProperty(exports, "AuthMethod", { enumerable: true, get: function () { return Auth_1.AuthMethod; } });
+Object.defineProperty(exports, "convertLegacyAuthProps", { enumerable: true, get: function () { return Auth_1.convertLegacyAuthProps; } });
+var Connection_1 = require("./Connection");
+Object.defineProperty(exports, "ConnectionSettings", { enumerable: true, get: function () { return Connection_1.ConnectionSettings; } });
+var AdvancedSettings_1 = require("./AdvancedSettings");
+Object.defineProperty(exports, "AdvancedHttpSettings", { enumerable: true, get: function () { return AdvancedSettings_1.AdvancedHttpSettings; } });
 //# sourceMappingURL=index.js.map

package/dist/components/ConfigEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,mEAAkE;AAAzD,gIAAA,sBAAsB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/index.ts"],"names":[],"mappings":";;;AAAA,mEAAkE;AAAzD,gIAAA,sBAAsB,OAAA;AAC/B,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA;AAC9B,iDAAyF;AAAhF,8GAAA,aAAa,OAAA;AAAE,iHAAA,gBAAgB,OAAA;AAAE,sHAAA,qBAAqB,OAAA;AAC/D,+BAAkE;AAAzD,4FAAA,IAAI,OAAA;AAAE,kGAAA,UAAU,OAAA;AAAE,8GAAA,sBAAsB,OAAA;AAEjD,2CAAkD;AAAzC,gHAAA,kBAAkB,OAAA;AAC3B,uDAA0D;AAAjD,wHAAA,oBAAoB,OAAA"}

package/dist/components/ConfigEditor/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/ConfigEditor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/types.ts"],"names":[],"mappings":""}

package/dist/components/CustomHeadersSettings/CustomHeadersSettings.js

@@ -24,15 +24,15 @@ const getCustomHeaderRowStyles = (0, ui_1.stylesFactory)(() => {
     `,
     };
 });
-const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset, }) => {
+const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
     const styles = getCustomHeaderRowStyles();
     return (react_1.default.createElement("div", { className: styles.layout },
-        react_1.default.createElement(ui_1.LegacyForms.FormField, { label: "Header", name: "name", placeholder: "X-Custom-Header", labelWidth: 5, value: header.name || "", onChange: (e) => onChange(Object.assign(Object.assign({}, header), { name: e.target.value })), onBlur: onBlur }),
+        react_1.default.createElement(ui_1.LegacyForms.FormField, { label: "Header", name: "name", placeholder: "X-Custom-Header", labelWidth: 5, value: header.name || '', onChange: (e) => onChange(Object.assign(Object.assign({}, header), { name: e.target.value })), onBlur: onBlur }),
         react_1.default.createElement(ui_1.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(Object.assign(Object.assign({}, header), { value: e.target.value })), onBlur: onBlur }),
         react_1.default.createElement(ui_1.Button, { type: "button", "aria-label": "Remove header", variant: "secondary", size: "xs", onClick: (_e) => onRemove(header.id) },
             react_1.default.createElement(ui_1.Icon, { name: "trash-alt" }))));
 };
-CustomHeaderRow.displayName = "CustomHeaderRow";
+CustomHeaderRow.displayName = 'CustomHeaderRow';
 class CustomHeadersSettings extends react_1.PureComponent {
     constructor(props) {
         super(props);
@@ -42,9 +42,9 @@ class CustomHeadersSettings extends react_1.PureComponent {
         this.updateSettings = () => {
             const { headers } = this.state;
             // we remove every httpHeaderName* field
-            const newJsonData = Object.fromEntries(Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith("httpHeaderName")));
+            const newJsonData = Object.fromEntries(Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith('httpHeaderName')));
             // we remove every httpHeaderValue* field
-            const newSecureJsonData = Object.fromEntries(Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(([key, val]) => !key.startsWith("httpHeaderValue")));
+            const newSecureJsonData = Object.fromEntries(Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(([key, val]) => !key.startsWith('httpHeaderValue')));
             // then we add the current httpHeader-fields
             for (const [index, header] of headers.entries()) {
                 newJsonData[`httpHeaderName${index + 1}`] = header.name;
@@ -57,10 +57,7 @@ class CustomHeadersSettings extends react_1.PureComponent {
         this.onHeaderAdd = () => {
             this.setState((prevState) => {
                 return {
-                    headers: [
-                        ...prevState.headers,
-                        { id: (0, lodash_1.uniqueId)(), name: "", value: "", configured: false },
-                    ],
+                    headers: [...prevState.headers, { id: (0, lodash_1.uniqueId)(), name: '', value: '', configured: false }],
                 };
             });
         };
@@ -83,7 +80,7 @@ class CustomHeadersSettings extends react_1.PureComponent {
                         if (h.id !== headerId) {
                             return h;
                         }
-                        return Object.assign(Object.assign({}, h), { value: "", configured: false });
+                        return Object.assign(Object.assign({}, h), { value: '', configured: false });
                     }),
                 };
             });
@@ -93,26 +90,24 @@ class CustomHeadersSettings extends react_1.PureComponent {
                 headers: headers.filter((h) => h.id !== headerId),
             }), this.updateSettings);
         };
-        const { jsonData, secureJsonData, secureJsonFields, } = this.props.dataSourceConfig;
+        const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;
         this.state = {
             headers: Object.keys(jsonData)
                 .sort()
-                .filter((key) => key.startsWith("httpHeaderName"))
+                .filter((key) => key.startsWith('httpHeaderName'))
                 .map((key, index) => {
                 return {
                     id: (0, lodash_1.uniqueId)(),
                     name: jsonData[key],
-                    value: secureJsonData !== undefined ? secureJsonData[key] : "",
-                    configured: (secureJsonFields &&
-                        secureJsonFields[`httpHeaderValue${index + 1}`]) ||
-                        false,
+                    value: secureJsonData !== undefined ? secureJsonData[key] : '',
+                    configured: (secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`]) || false,
                 };
             }),
         };
     }
     render() {
         const { headers } = this.state;
-        return (react_1.default.createElement("div", { className: "gf-form-group" },
+        return (react_1.default.createElement("div", { className: 'gf-form-group' },
             react_1.default.createElement("div", { className: "gf-form" },
                 react_1.default.createElement("h6", null, "Custom HTTP Headers")),
             react_1.default.createElement("div", null, headers.map((header, i) => (react_1.default.createElement(CustomHeaderRow, { key: header.id, header: header, onChange: (h) => {