@grafana/ui/dist/cjs/components/DataSourceSettings/CustomHeadersSettings.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var uniqueId = require('../../utils/uniqueId.cjs');
var Button = require('../Button/Button.cjs');
var FormField = require('../FormField/FormField.cjs');
var Icon = require('../Icon/Icon.cjs');
var Box = require('../Layout/Box/Box.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var SecretFormField = require('../SecretFormField/SecretFormField.cjs');

"use strict";
const getCustomHeaderRowStyles = () => ({
  layout: css.css({
    display: "flex",
    alignItems: "center",
    marginBottom: "4px",
    "> *": {
      marginLeft: "4px",
      marginBottom: 0,
      height: "100%",
      "&:first-child, &:last-child": {
        marginLeft: 0
      }
    }
  })
});
const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
  const styles = ThemeContext.useStyles2(getCustomHeaderRowStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.layout, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      FormField.FormField,
      {
        label: i18n.t("grafana-ui.data-source-settings.custom-headers-header", "Header"),
        name: "name",
        placeholder: "X-Custom-Header",
        labelWidth: 5,
        value: header.name || "",
        onChange: (e) => onChange({ ...header, name: e.target.value }),
        onBlur
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      SecretFormField.SecretFormField,
      {
        label: i18n.t("grafana-ui.data-source-settings.custom-headers-header-value", "Value"),
        "aria-label": i18n.t("grafana-ui.data-source-settings.custom-headers-header-value", "Value"),
        name: "value",
        isConfigured: header.configured,
        value: header.value,
        labelWidth: 5,
        inputWidth: header.configured ? 11 : 12,
        placeholder: i18n.t("grafana-ui.data-source-settings.custom-headers-header-placeholder", "Header Value"),
        onReset: () => onReset(header.id),
        onChange: (e) => onChange({ ...header, value: e.target.value }),
        onBlur
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      Button.Button,
      {
        type: "button",
        "aria-label": i18n.t("grafana-ui.data-source-settings.custom-headers-header-remove", "Remove header"),
        variant: "secondary",
        size: "xs",
        onClick: (_e) => onRemove(header.id),
        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "trash-alt" })
      }
    )
  ] });
};
CustomHeaderRow.displayName = "CustomHeaderRow";
const CustomHeadersSettings = React.memo(({ dataSourceConfig, onChange }) => {
  const [headers, setHeaders] = React.useState(() => {
    const { jsonData, secureJsonData, secureJsonFields } = dataSourceConfig;
    return Object.keys(jsonData).sort().filter((key) => key.startsWith("httpHeaderName")).map((key, index) => {
      return {
        id: uniqueId.uniqueId(),
        name: jsonData[key],
        value: secureJsonData !== void 0 ? secureJsonData[key] : "",
        configured: secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`] || false
      };
    });
  });
  const updateSettings = (newHeaders) => {
    const newJsonData = Object.fromEntries(
      Object.entries(dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith("httpHeaderName"))
    );
    const newSecureJsonData = Object.fromEntries(
      Object.entries(dataSourceConfig.secureJsonData || {}).filter(([key, val]) => !key.startsWith("httpHeaderValue"))
    );
    for (const [index, header] of newHeaders.entries()) {
      newJsonData[`httpHeaderName${index + 1}`] = header.name;
      if (!header.configured) {
        newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;
      }
    }
    onChange({
      ...dataSourceConfig,
      jsonData: newJsonData,
      secureJsonData: newSecureJsonData
    });
  };
  const onHeaderAdd = () => {
    setHeaders((prevHeaders) => [...prevHeaders, { id: uniqueId.uniqueId(), name: "", value: "", configured: false }]);
  };
  const onHeaderChange = (headerIndex, value) => {
    setHeaders(
      (prevHeaders) => prevHeaders.map((item, index) => {
        if (headerIndex !== index) {
          return item;
        }
        return { ...value };
      })
    );
  };
  const onHeaderReset = (headerId) => {
    setHeaders(
      (prevHeaders) => prevHeaders.map((h) => {
        if (h.id !== headerId) {
          return h;
        }
        return {
          ...h,
          value: "",
          configured: false
        };
      })
    );
  };
  const onHeaderRemove = (headerId) => {
    setHeaders((prevHeaders) => {
      const newHeaders = prevHeaders.filter((h) => h.id !== headerId);
      updateSettings(newHeaders);
      return newHeaders;
    });
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { marginBottom: 5, children: [
    /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { marginBottom: 0.5, position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { direction: "row", alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx("h6", { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-settings.custom-headers-title", children: "Custom HTTP Headers" }) }) }) }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { children: headers.map((header, i) => /* @__PURE__ */ jsxRuntime.jsx(
      CustomHeaderRow,
      {
        header,
        onChange: (h) => {
          onHeaderChange(i, h);
        },
        onBlur: () => updateSettings(headers),
        onRemove: onHeaderRemove,
        onReset: onHeaderReset
      },
      header.id
    )) }),
    !dataSourceConfig.readOnly && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { marginBottom: 0.5, position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { direction: "row", alignItems: "baseline", children: /* @__PURE__ */ jsxRuntime.jsx(
      Button.Button,
      {
        variant: "secondary",
        icon: "plus",
        type: "button",
        onClick: (e) => {
          onHeaderAdd();
        },
        children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.data-source-settings.custom-headers-add", children: "Add header" })
      }
    ) }) })
  ] });
});
CustomHeadersSettings.displayName = "CustomHeadersSettings";

exports.CustomHeadersSettings = CustomHeadersSettings;
//# sourceMappingURL=CustomHeadersSettings.cjs.map