@grafana/ui
Version:
Grafana Components Library
173 lines (170 loc) • 6.2 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { memo, useState } from 'react';
import { t, Trans } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { uniqueId } from '../../utils/uniqueId.mjs';
import { Button } from '../Button/Button.mjs';
import { FormField } from '../FormField/FormField.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { Box } from '../Layout/Box/Box.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
import { SecretFormField } from '../SecretFormField/SecretFormField.mjs';
;
const getCustomHeaderRowStyles = () => ({
layout: 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 = useStyles2(getCustomHeaderRowStyles);
return /* @__PURE__ */ jsxs("div", { className: styles.layout, children: [
/* @__PURE__ */ jsx(
FormField,
{
label: 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__ */ jsx(
SecretFormField,
{
label: t("grafana-ui.data-source-settings.custom-headers-header-value", "Value"),
"aria-label": 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: 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__ */ jsx(
Button,
{
type: "button",
"aria-label": t("grafana-ui.data-source-settings.custom-headers-header-remove", "Remove header"),
variant: "secondary",
size: "xs",
onClick: (_e) => onRemove(header.id),
children: /* @__PURE__ */ jsx(Icon, { name: "trash-alt" })
}
)
] });
};
CustomHeaderRow.displayName = "CustomHeaderRow";
const CustomHeadersSettings = memo(({ dataSourceConfig, onChange }) => {
const [headers, setHeaders] = useState(() => {
const { jsonData, secureJsonData, secureJsonFields } = dataSourceConfig;
return Object.keys(jsonData).sort().filter((key) => key.startsWith("httpHeaderName")).map((key, index) => {
return {
id: 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(), 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__ */ jsxs(Box, { marginBottom: 5, children: [
/* @__PURE__ */ jsx(Box, { marginBottom: 0.5, position: "relative", children: /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "baseline", children: /* @__PURE__ */ jsx("h6", { children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.data-source-settings.custom-headers-title", children: "Custom HTTP Headers" }) }) }) }),
/* @__PURE__ */ jsx("div", { children: headers.map((header, i) => /* @__PURE__ */ jsx(
CustomHeaderRow,
{
header,
onChange: (h) => {
onHeaderChange(i, h);
},
onBlur: () => updateSettings(headers),
onRemove: onHeaderRemove,
onReset: onHeaderReset
},
header.id
)) }),
!dataSourceConfig.readOnly && /* @__PURE__ */ jsx(Box, { marginBottom: 0.5, position: "relative", children: /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "baseline", children: /* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
icon: "plus",
type: "button",
onClick: (e) => {
onHeaderAdd();
},
children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.data-source-settings.custom-headers-add", children: "Add header" })
}
) }) })
] });
});
CustomHeadersSettings.displayName = "CustomHeadersSettings";
export { CustomHeadersSettings };
//# sourceMappingURL=CustomHeadersSettings.mjs.map