@grafana/plugin-ui 0.14.0-dev.1 → 0.14.1-dsconfig.bccd84e

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

@@ -0,0 +1,229 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { useStyles2, Spinner, Alert, LinkButton, Icon, Tooltip, Button, Select } from '@grafana/ui';
+import { formKey } from '../../../datasource/schema/config.js';
+import { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource.js';
+import { isFieldRequired } from './fieldUtils.js';
+import { SchemaField } from './SchemaField.js';
+import { AuthorizationHeaderField } from './AuthorizationHeaderField.js';
+import { TabLayout } from './TabLayout.js';
+import { getWizardStyles } from './wizardStyles.js';
+import { useDatasourceConfigForm } from './useDatasourceConfigForm.js';
+
+function DatasourceConfigWizard(props) {
+  const { schema, dsUid, dsName, onSuccess, onSaving, onRetest, healthError, renderActions, mode = "tab" } = props;
+  const form = useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving });
+  if (mode === "tab") {
+    return /* @__PURE__ */ React.createElement(
+      TabLayout,
+      {
+        form,
+        schema,
+        dsUid,
+        dsName,
+        onRetest,
+        healthError,
+        renderActions
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    WizardLayout,
+    {
+      form,
+      schema,
+      dsUid,
+      dsName,
+      onRetest,
+      healthError,
+      renderActions
+    }
+  );
+}
+function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  var _a, _b, _c;
+  const styles = useStyles2(getWizardStyles);
+  const [currentStep, setCurrentStep] = useState(0);
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    onSubmit
+  } = form;
+  const arrowSteps = useMemo(() => {
+    const requiredGroup = resolvedGroups.find((g) => g.group.id === "_required");
+    if (!requiredGroup) {
+      return new Set(resolvedGroups.map((_, i) => i));
+    }
+    const requiredFieldIds = new Set(requiredGroup.fields.map((f) => f.id));
+    const steps = /* @__PURE__ */ new Set();
+    for (let i = 0; i < resolvedGroups.length; i++) {
+      const g = resolvedGroups[i];
+      if (g.group.id === "_required" || g.fields.some((f) => !requiredFieldIds.has(f.id))) {
+        steps.add(i);
+      }
+    }
+    return steps;
+  }, [resolvedGroups]);
+  const currentResolved = resolvedGroups[currentStep];
+  const isFirstStep = useMemo(() => {
+    for (let i = 0; i < currentStep; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps]);
+  const isLastStep = useMemo(() => {
+    for (let i = currentStep + 1; i < resolvedGroups.length; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps, resolvedGroups.length]);
+  const visibleFieldsForStep = useMemo(
+    () => currentResolved ? currentResolved.fields.filter(isFieldVisible) : [],
+    [currentResolved, isFieldVisible]
+  );
+  const currentGroupValid = useMemo(() => {
+    if (!currentResolved) {
+      return true;
+    }
+    for (const field of visibleFieldsForStep) {
+      if (errors[formKey(field)]) {
+        return false;
+      }
+      if (isFieldRequired(field, watchedValues, fieldById)) {
+        const val = watchedValues[formKey(field)];
+        if (val === SECURE_FIELD_CONFIGURED) {
+          continue;
+        }
+        if (val === void 0 || val === null || val === "") {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById]);
+  const goNext = useCallback(async () => {
+    if (!currentResolved) {
+      return;
+    }
+    if (!readOnly) {
+      const visibleKeys = visibleFieldsForStep.map((f) => formKey(f));
+      const valid = await trigger(visibleKeys);
+      if (!valid) {
+        return;
+      }
+    }
+    setCurrentStep((s) => {
+      for (let i = s + 1; i < resolvedGroups.length; i++) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [currentResolved, visibleFieldsForStep, trigger, resolvedGroups.length, arrowSteps, readOnly]);
+  const goPrev = useCallback(() => {
+    setCurrentStep((s) => {
+      for (let i = s - 1; i >= 0; i--) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [arrowSteps]);
+  if (initializing) {
+    return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(Spinner, { size: "sm", inline: true }), " Loading configuration...");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React.createElement("div", { className: styles.buttons }, /* @__PURE__ */ React.createElement(
+      LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  if (resolvedGroups.length === 0) {
+    return null;
+  }
+  const currentGroup = currentResolved == null ? void 0 : currentResolved.group;
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, submitting && /* @__PURE__ */ React.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React.createElement(Spinner, { size: "sm" }), /* @__PURE__ */ React.createElement("span", null, "Saving & testing\u2026")), readOnly && /* @__PURE__ */ React.createElement("div", { className: styles.readOnlyBanner }, /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "xs" }), /* @__PURE__ */ React.createElement("span", null, "Read-only \u2014 managed externally")), /* @__PURE__ */ React.createElement("div", { className: styles.navBar }, currentGroup && /* @__PURE__ */ React.createElement(Tooltip, { content: (_a = currentGroup.description) != null ? _a : currentGroup.title }, /* @__PURE__ */ React.createElement("span", { className: styles.navTitle }, currentGroup.title, /* @__PURE__ */ React.createElement("span", { className: styles.stepCount }, currentStep + 1, "/", resolvedGroups.length))), /* @__PURE__ */ React.createElement("div", { className: styles.navActions }, /* @__PURE__ */ React.createElement(Tooltip, { content: isFirstStep ? "First step" : `Previous: ${(_b = resolvedGroups[currentStep - 1]) == null ? void 0 : _b.group.title}` }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "angle-left",
+      "aria-label": "Previous",
+      onClick: goPrev,
+      disabled: isFirstStep || submitting,
+      type: "button"
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      options: resolvedGroups.map((g, i) => ({ label: g.group.title, value: i })),
+      value: currentStep,
+      onChange: (v) => {
+        if (v) {
+          setCurrentStep(v.value);
+        }
+      },
+      disabled: submitting,
+      width: 18
+    }
+  ), /* @__PURE__ */ React.createElement(Tooltip, { content: isLastStep ? "Last step" : `Next: ${(_c = resolvedGroups[currentStep + 1]) == null ? void 0 : _c.group.title}` }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: isLastStep || !readOnly && !currentGroupValid ? "secondary" : "primary",
+      size: "sm",
+      icon: "angle-right",
+      "aria-label": "Next",
+      onClick: goNext,
+      disabled: isLastStep || submitting,
+      type: "button"
+    }
+  )))), currentResolved && /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, visibleFieldsForStep.map((field) => /* @__PURE__ */ React.createElement(
+    SchemaField,
+    {
+      key: formKey(field),
+      field,
+      control,
+      errors,
+      disabled: allDisabled,
+      dsUid,
+      watchedValues,
+      fieldById
+    }
+  )), (currentResolved.group.id === "_required" || currentResolved.group.id === "auth") && httpHeadersField && /* @__PURE__ */ React.createElement(
+    AuthorizationHeaderField,
+    {
+      headersFieldKey: formKey(httpHeadersField),
+      control,
+      disabled: allDisabled,
+      watchedValues
+    }
+  ), submitError && /* @__PURE__ */ React.createElement(Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React.createElement("div", { className: styles.buttons }, readOnly ? /* @__PURE__ */ React.createElement(Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React.createElement(Button, { variant: "primary", size: "sm", disabled: submitting || !currentGroupValid, type: "submit" }, submitting ? "Saving..." : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError })))));
+}
+
+export { DatasourceConfigWizard };
+//# sourceMappingURL=DatasourceConfigWizard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceConfigWizard.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/DatasourceConfigWizard.tsx"],"sourcesContent":["import React, { type ReactNode, useCallback, useMemo, useState } from 'react';\nimport { useStyles2, Button, LinkButton, Select, Icon, Alert, Tooltip, Spinner } from '@grafana/ui';\nimport { formKey, type DatasourceConfigSchema } from '../../../datasource/schema/config';\nimport { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource';\nimport { isFieldRequired } from './fieldUtils';\nimport { SchemaField } from './SchemaField';\nimport { AuthorizationHeaderField } from './AuthorizationHeaderField';\nimport { TabLayout } from './TabLayout';\nimport { getWizardStyles } from './wizardStyles';\nimport { useDatasourceConfigForm } from './useDatasourceConfigForm';\n\nexport type DatasourceConfigWizardProps = {\n  schema: DatasourceConfigSchema;\n  dsUid: string;\n  dsName: string;\n  onSuccess: (status: string, message?: string) => void;\n  onSaving?: (saving: boolean) => void;\n  onRetest?: () => void;\n  onFollowup?: (intent: string) => void;\n  healthError?: string;\n  mode?: 'tab' | 'wizard';\n  /** Optional render prop for custom action buttons (e.g. analyze/troubleshoot). */\n  renderActions?: (props: { dsUid: string; dsName: string; dsType: string; healthError?: string }) => ReactNode;\n};\n\nexport function DatasourceConfigWizard(props: DatasourceConfigWizardProps) {\n  const { schema, dsUid, dsName, onSuccess, onSaving, onRetest, healthError, renderActions, mode = 'tab' } = props;\n\n  const form = useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving });\n\n  if (mode === 'tab') {\n    return (\n      <TabLayout\n        form={form}\n        schema={schema}\n        dsUid={dsUid}\n        dsName={dsName}\n        onRetest={onRetest}\n        healthError={healthError}\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  return (\n    <WizardLayout\n      form={form}\n      schema={schema}\n      dsUid={dsUid}\n      dsName={dsName}\n      onRetest={onRetest}\n      healthError={healthError}\n      renderActions={renderActions}\n    />\n  );\n}\n\ntype LayoutProps = {\n  form: ReturnType<typeof useDatasourceConfigForm>;\n  schema: DatasourceConfigSchema;\n  dsUid: string;\n  dsName: string;\n  onRetest?: () => void;\n  healthError?: string;\n  renderActions?: (props: { dsUid: string; dsName: string; dsType: string; healthError?: string }) => ReactNode;\n};\n\nfunction WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }: LayoutProps) {\n  const styles = useStyles2(getWizardStyles);\n  const [currentStep, setCurrentStep] = useState(0);\n\n  const {\n    resolvedGroups,\n    fieldById,\n    httpHeadersField,\n    control,\n    handleSubmit,\n    trigger,\n    errors,\n    watchedValues,\n    initializing,\n    fetchError,\n    submitting,\n    submitError,\n    readOnly,\n    isFieldVisible,\n    onSubmit,\n  } = form;\n\n  const arrowSteps = useMemo(() => {\n    const requiredGroup = resolvedGroups.find((g) => g.group.id === '_required');\n    if (!requiredGroup) {\n      return new Set(resolvedGroups.map((_, i) => i));\n    }\n    const requiredFieldIds = new Set(requiredGroup.fields.map((f) => f.id));\n    const steps = new Set<number>();\n    for (let i = 0; i < resolvedGroups.length; i++) {\n      const g = resolvedGroups[i];\n      if (g.group.id === '_required' || g.fields.some((f) => !requiredFieldIds.has(f.id))) {\n        steps.add(i);\n      }\n    }\n    return steps;\n  }, [resolvedGroups]);\n\n  const currentResolved = resolvedGroups[currentStep];\n\n  const isFirstStep = useMemo(() => {\n    for (let i = 0; i < currentStep; i++) {\n      if (arrowSteps.has(i)) {\n        return false;\n      }\n    }\n    return true;\n  }, [currentStep, arrowSteps]);\n\n  const isLastStep = useMemo(() => {\n    for (let i = currentStep + 1; i < resolvedGroups.length; i++) {\n      if (arrowSteps.has(i)) {\n        return false;\n      }\n    }\n    return true;\n  }, [currentStep, arrowSteps, resolvedGroups.length]);\n\n  const visibleFieldsForStep = useMemo(\n    () => (currentResolved ? currentResolved.fields.filter(isFieldVisible) : []),\n    [currentResolved, isFieldVisible]\n  );\n\n  const currentGroupValid = useMemo(() => {\n    if (!currentResolved) {\n      return true;\n    }\n    for (const field of visibleFieldsForStep) {\n      if (errors[formKey(field)]) {\n        return false;\n      }\n      if (isFieldRequired(field, watchedValues, fieldById)) {\n        const val = watchedValues[formKey(field)];\n        if (val === SECURE_FIELD_CONFIGURED) {\n          continue;\n        }\n        if (val === undefined || val === null || val === '') {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById]);\n\n  const goNext = useCallback(async () => {\n    if (!currentResolved) {\n      return;\n    }\n    if (!readOnly) {\n      const visibleKeys = visibleFieldsForStep.map((f) => formKey(f));\n      const valid = await trigger(visibleKeys);\n      if (!valid) {\n        return;\n      }\n    }\n    setCurrentStep((s) => {\n      for (let i = s + 1; i < resolvedGroups.length; i++) {\n        if (arrowSteps.has(i)) {\n          return i;\n        }\n      }\n      return s;\n    });\n  }, [currentResolved, visibleFieldsForStep, trigger, resolvedGroups.length, arrowSteps, readOnly]);\n\n  const goPrev = useCallback(() => {\n    setCurrentStep((s) => {\n      for (let i = s - 1; i >= 0; i--) {\n        if (arrowSteps.has(i)) {\n          return i;\n        }\n      }\n      return s;\n    });\n  }, [arrowSteps]);\n\n  if (initializing) {\n    return (\n      <div className={styles.container}>\n        <Spinner size=\"sm\" inline /> Loading configuration...\n      </div>\n    );\n  }\n\n  if (fetchError) {\n    return (\n      <div className={styles.container}>\n        <Alert severity=\"error\" title=\"Failed to load configuration\">\n          {fetchError}\n        </Alert>\n        <div className={styles.buttons}>\n          <LinkButton\n            variant=\"secondary\"\n            size=\"sm\"\n            icon=\"external-link-alt\"\n            href={`/connections/datasources/edit/${dsUid}`}\n          >\n            Open datasource settings\n          </LinkButton>\n        </div>\n      </div>\n    );\n  }\n\n  const allDisabled = submitting || readOnly;\n\n  if (resolvedGroups.length === 0) {\n    return null;\n  }\n\n  const currentGroup = currentResolved?.group;\n\n  return (\n    <div className={styles.container}>\n      {submitting && (\n        <div className={styles.overlay}>\n          <Spinner size=\"sm\" />\n          <span>Saving & testing…</span>\n        </div>\n      )}\n      {readOnly && (\n        <div className={styles.readOnlyBanner}>\n          <Icon name=\"lock\" size=\"xs\" />\n          <span>Read-only — managed externally</span>\n        </div>\n      )}\n      <div className={styles.navBar}>\n        {currentGroup && (\n          <Tooltip content={currentGroup.description ?? currentGroup.title}>\n            <span className={styles.navTitle}>\n              {currentGroup.title}\n              <span className={styles.stepCount}>\n                {currentStep + 1}/{resolvedGroups.length}\n              </span>\n            </span>\n          </Tooltip>\n        )}\n        <div className={styles.navActions}>\n          <Tooltip content={isFirstStep ? 'First step' : `Previous: ${resolvedGroups[currentStep - 1]?.group.title}`}>\n            <Button\n              variant=\"secondary\"\n              fill=\"text\"\n              size=\"sm\"\n              icon=\"angle-left\"\n              aria-label=\"Previous\"\n              onClick={goPrev}\n              disabled={isFirstStep || submitting}\n              type=\"button\"\n            />\n          </Tooltip>\n          <Select\n            options={resolvedGroups.map((g, i) => ({ label: g.group.title, value: i }))}\n            value={currentStep}\n            onChange={(v) => {\n              if (v) {\n                setCurrentStep(v.value!);\n              }\n            }}\n            disabled={submitting}\n            width={18}\n          />\n          <Tooltip content={isLastStep ? 'Last step' : `Next: ${resolvedGroups[currentStep + 1]?.group.title}`}>\n            <Button\n              variant={isLastStep || (!readOnly && !currentGroupValid) ? 'secondary' : 'primary'}\n              size=\"sm\"\n              icon=\"angle-right\"\n              aria-label=\"Next\"\n              onClick={goNext}\n              disabled={isLastStep || submitting}\n              type=\"button\"\n            />\n          </Tooltip>\n        </div>\n      </div>\n\n      {currentResolved && (\n        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>\n          {visibleFieldsForStep.map((field) => (\n            <SchemaField\n              key={formKey(field)}\n              field={field}\n              control={control}\n              errors={errors}\n              disabled={allDisabled}\n              dsUid={dsUid}\n              watchedValues={watchedValues}\n              fieldById={fieldById}\n            />\n          ))}\n\n          {(currentResolved.group.id === '_required' || currentResolved.group.id === 'auth') && httpHeadersField && (\n            <AuthorizationHeaderField\n              headersFieldKey={formKey(httpHeadersField)}\n              control={control}\n              disabled={allDisabled}\n              watchedValues={watchedValues}\n            />\n          )}\n\n          {submitError && (\n            <Alert severity=\"error\" title=\"Error\">\n              {submitError}\n            </Alert>\n          )}\n\n          <div className={styles.buttons}>\n            {readOnly ? (\n              <Button variant=\"primary\" size=\"sm\" icon=\"sync\" onClick={onRetest} type=\"button\">\n                Test\n              </Button>\n            ) : (\n              <Button variant=\"primary\" size=\"sm\" disabled={submitting || !currentGroupValid} type=\"submit\">\n                {submitting ? 'Saving...' : 'Save & Test'}\n              </Button>\n            )}\n            {healthError && renderActions?.({ dsUid, dsName, dsType: schema.pluginType, healthError })}\n          </div>\n        </form>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/IndexedPairEditor.js

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+import { useStyles2, Stack, Button, Input, Icon, Tooltip } from '@grafana/ui';
+import { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource.js';
+import { getSecureFieldStyles } from './SecureFieldInput.js';
+
+function IndexedPairRow({
+  item,
+  index,
+  disabled,
+  onUpdate,
+  onRemove,
+  hideControls
+}) {
+  const styles = useStyles2(getStyles$d);
+  const secureStyles = useStyles2(getSecureFieldStyles);
+  const isConfigured = item.value === SECURE_FIELD_CONFIGURED;
+  const [editing, setEditing] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  return /* @__PURE__ */ React.createElement(Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: item.name,
+      placeholder: "Header name",
+      disabled: disabled || hideControls,
+      onChange: (e) => onUpdate(index, "name", e.currentTarget.value)
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: styles.inputCell }, isConfigured && !editing ? /* @__PURE__ */ React.createElement(Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React.createElement("span", { className: secureStyles.configuredBadge }, /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      onClick: () => {
+        setEditing(true);
+        onUpdate(index, "value", "");
+      },
+      type: "button"
+    },
+    "Reset"
+  )) : /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: item.value === SECURE_FIELD_CONFIGURED ? "" : item.value,
+      placeholder: "Header value",
+      disabled,
+      type: revealed ? "text" : "password",
+      onChange: (e) => onUpdate(index, "value", e.currentTarget.value),
+      suffix: /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  )), !hideControls && /* @__PURE__ */ React.createElement(Tooltip, { content: "Remove header" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": "Remove header",
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  )));
+}
+function IndexedPairEditor({
+  value,
+  onChange,
+  maxItems = 10,
+  disabled,
+  hideControls
+}) {
+  const styles = useStyles2(getStyles$d);
+  const items = Array.isArray(value) ? value : [];
+  const addItem = () => {
+    if (items.length >= maxItems) {
+      return;
+    }
+    onChange([...items, { index: 0, name: "", value: "" }]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, key, val) => {
+    const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ React.createElement(Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React.createElement(
+    IndexedPairRow,
+    {
+      key: item.index || `new-${i}`,
+      item,
+      index: i,
+      disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      hideControls
+    }
+  )), !hideControls && items.length < maxItems && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add header")), !hideControls && items.length >= maxItems && /* @__PURE__ */ React.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " headers reached"));
+}
+const getStyles$d = (theme) => ({
+  inputCell: css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  }),
+  limitNote: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+export { IndexedPairEditor };
+//# sourceMappingURL=IndexedPairEditor.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/IndexedPairEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndexedPairEditor.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/IndexedPairEditor.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, Button, Input, Icon, Tooltip, Stack } from '@grafana/ui';\nimport { SECURE_FIELD_CONFIGURED, type IndexedPairItem } from '../../../datasource/schema/datasource';\nimport { getSecureFieldStyles } from './SecureFieldInput';\n\nfunction IndexedPairRow({\n  item,\n  index,\n  disabled,\n  onUpdate,\n  onRemove,\n  hideControls,\n}: {\n  item: IndexedPairItem;\n  index: number;\n  disabled?: boolean;\n  onUpdate: (index: number, key: 'name' | 'value', val: string) => void;\n  onRemove: (index: number) => void;\n  hideControls?: boolean;\n}) {\n  const styles = useStyles2(getStyles);\n  const secureStyles = useStyles2(getSecureFieldStyles);\n  const isConfigured = item.value === SECURE_FIELD_CONFIGURED;\n  const [editing, setEditing] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n\n  return (\n    <Stack direction=\"row\" gap={1}>\n      <div className={styles.inputCell}>\n        <Input\n          value={item.name}\n          placeholder=\"Header name\"\n          disabled={disabled || hideControls}\n          onChange={(e) => onUpdate(index, 'name', e.currentTarget.value)}\n        />\n      </div>\n      <div className={styles.inputCell}>\n        {isConfigured && !editing ? (\n          <Stack direction=\"row\" gap={1} alignItems=\"center\">\n            <span className={secureStyles.configuredBadge}>\n              <Icon name=\"lock\" size=\"xs\" />\n              Configured\n            </span>\n            {!disabled && (\n              <Button\n                variant=\"secondary\"\n                fill=\"text\"\n                size=\"sm\"\n                onClick={() => {\n                  setEditing(true);\n                  onUpdate(index, 'value', '');\n                }}\n                type=\"button\"\n              >\n                Reset\n              </Button>\n            )}\n          </Stack>\n        ) : (\n          <Input\n            value={item.value === SECURE_FIELD_CONFIGURED ? '' : item.value}\n            placeholder=\"Header value\"\n            disabled={disabled}\n            type={revealed ? 'text' : 'password'}\n            onChange={(e) => onUpdate(index, 'value', e.currentTarget.value)}\n            suffix={\n              <Button\n                variant=\"secondary\"\n                fill=\"text\"\n                size=\"sm\"\n                icon={revealed ? 'eye-slash' : 'eye'}\n                aria-label={revealed ? 'Hide' : 'Reveal'}\n                onClick={() => setRevealed((r) => !r)}\n                type=\"button\"\n              />\n            }\n          />\n        )}\n      </div>\n      {!hideControls && (\n        <Tooltip content=\"Remove header\">\n          <Button\n            variant=\"secondary\"\n            fill=\"text\"\n            size=\"sm\"\n            icon=\"trash-alt\"\n            aria-label=\"Remove header\"\n            disabled={disabled}\n            onClick={() => onRemove(index)}\n            type=\"button\"\n          />\n        </Tooltip>\n      )}\n    </Stack>\n  );\n}\n\nexport function IndexedPairEditor({\n  value,\n  onChange,\n  maxItems = 10,\n  disabled,\n  hideControls,\n}: {\n  value: IndexedPairItem[];\n  onChange: (items: IndexedPairItem[]) => void;\n  maxItems?: number;\n  disabled?: boolean;\n  hideControls?: boolean;\n}) {\n  const styles = useStyles2(getStyles);\n  const items = Array.isArray(value) ? value : [];\n\n  const addItem = () => {\n    if (items.length >= maxItems) {\n      return;\n    }\n    onChange([...items, { index: 0, name: '', value: '' }]);\n  };\n\n  const removeItem = (index: number) => {\n    onChange(items.filter((_, i) => i !== index));\n  };\n\n  const updateItem = (index: number, key: 'name' | 'value', val: string) => {\n    const updated = items.map((item, i) => (i === index ? { ...item, [key]: val } : item));\n    onChange(updated);\n  };\n\n  return (\n    <Stack direction=\"column\" gap={0.5}>\n      {items.map((item, i) => (\n        <IndexedPairRow\n          key={item.index || `new-${i}`}\n          item={item}\n          index={i}\n          disabled={disabled}\n          onUpdate={updateItem}\n          onRemove={removeItem}\n          hideControls={hideControls}\n        />\n      ))}\n      {!hideControls && items.length < maxItems && (\n        <div>\n          <Button variant=\"secondary\" size=\"sm\" icon=\"plus\" disabled={disabled} onClick={addItem} type=\"button\">\n            Add header\n          </Button>\n        </div>\n      )}\n      {!hideControls && items.length >= maxItems && (\n        <span className={styles.limitNote}>Maximum {maxItems} headers reached</span>\n      )}\n    </Stack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  inputCell: css({\n    flex: '1 1 0',\n    minWidth: 0,\n    overflow: 'hidden',\n  }),\n  limitNote: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.secondary,\n  }),\n});\n"],"names":["getStyles"],"mappings":"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"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/PdcFieldNote.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useStyles2, Icon, Tooltip, LinkButton } from '@grafana/ui';
+
+function PdcFieldNote({
+  enabled,
+  description,
+  configUrl
+}) {
+  const styles = useStyles2(getStyles$f);
+  return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React.createElement("div", { className: styles.note }, /* @__PURE__ */ React.createElement(Icon, { name: "shield", size: "xs" }), /* @__PURE__ */ React.createElement("span", null, "Private data source connect: ", /* @__PURE__ */ React.createElement("strong", null, enabled ? "Enabled" : "Disabled")), description && /* @__PURE__ */ React.createElement(Tooltip, { content: description }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "xs" }))), /* @__PURE__ */ React.createElement(LinkButton, { variant: "secondary", size: "sm", icon: "external-link-alt", href: configUrl }, "Configure in settings"));
+}
+const getStyles$f = (theme) => ({
+  wrapper: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
+  note: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  })
+});
+
+export { PdcFieldNote };
+//# sourceMappingURL=PdcFieldNote.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/PdcFieldNote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdcFieldNote.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/PdcFieldNote.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, Icon, Tooltip, LinkButton } from '@grafana/ui';\n\nexport function PdcFieldNote({\n  enabled,\n  description,\n  configUrl,\n}: {\n  enabled: boolean;\n  description?: string;\n  configUrl: string;\n}) {\n  const styles = useStyles2(getStyles);\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.note}>\n        <Icon name=\"shield\" size=\"xs\" />\n        <span>\n          Private data source connect: <strong>{enabled ? 'Enabled' : 'Disabled'}</strong>\n        </span>\n        {description && (\n          <Tooltip content={description}>\n            <Icon name=\"info-circle\" size=\"xs\" />\n          </Tooltip>\n        )}\n      </div>\n      <LinkButton variant=\"secondary\" size=\"sm\" icon=\"external-link-alt\" href={configUrl}>\n        Configure in settings\n      </LinkButton>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.secondary,\n    backgroundColor: theme.colors.background.secondary,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n  }),\n  note: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }),\n});\n"],"names":["getStyles"],"mappings":";;;;AAKO,SAAS,YAAA,CAAa;AAAA,EAC3B,OAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AACnC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EAAA,sCACpB,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,MAAK,QAAA,EAAS,IAAA,EAAK,IAAA,EAAK,CAAA,kBAC9B,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,IAAA,EAAK,iDACyB,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,IAAA,EAAQ,OAAA,GAAU,SAAA,GAAY,UAAW,CACzE,GACC,WAAA,oBACC,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAS,WAAA,EAAA,kBAChB,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAK,aAAA,EAAc,IAAA,EAAK,IAAA,EAAK,CACrC,CAEJ,mBACA,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,IAAA,EAAK,MAAK,mBAAA,EAAoB,IAAA,EAAM,SAAA,EAAA,EAAW,uBAEpF,CACF,CAAA;AAEJ;AAEA,MAAMA,WAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,SAAS,GAAA,CAAI;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,eAAA;AAAA,IAChB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,OAAA,EAAS,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA,CAAA,EAAI,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA;AAAA,IACrD,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAA;AAAA,IACrC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,IACzB,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,IACzC,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,IACjC,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,IAAI,CAAA;AAAA,GAC9C,CAAA;AAAA,EACD,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,GACvB;AACH,CAAA,CAAA;;;;"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/SchemaField.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Controller } from 'react-hook-form';
+import { useStyles2, Tooltip, Icon } from '@grafana/ui';
+import { resolveActiveOverride, formKey } from '../../../datasource/schema/config.js';
+import { isFieldRequired, buildValidationRules } from './fieldUtils.js';
+import { PdcFieldNote } from './PdcFieldNote.js';
+import { renderFieldInput } from './renderFieldInput.js';
+import { getWizardStyles } from './wizardStyles.js';
+
+function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, fieldById }) {
+  const styles = useStyles2(getWizardStyles);
+  const activeOverride = resolveActiveOverride(field, watchedValues, fieldById);
+  const fk = formKey(field);
+  if (field.key === "pdcInjected" && field.target === "jsonData") {
+    return /* @__PURE__ */ React.createElement(
+      Controller,
+      {
+        name: fk,
+        control,
+        render: ({ field: formField }) => /* @__PURE__ */ React.createElement(
+          PdcFieldNote,
+          {
+            enabled: !!formField.value,
+            description: field.description,
+            configUrl: `/connections/datasources/edit/${dsUid}`
+          }
+        )
+      }
+    );
+  }
+  const required = isFieldRequired(field, watchedValues, fieldById);
+  const validationRules = buildValidationRules(field, required);
+  return /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name: fk,
+      control,
+      rules: validationRules,
+      render: ({ field: formField }) => {
+        var _a, _b, _c, _d, _e;
+        const errorMessage = (_a = errors[fk]) == null ? void 0 : _a.message;
+        const label = (_b = field.label) != null ? _b : field.key;
+        const description = (_c = activeOverride == null ? void 0 : activeOverride.description) != null ? _c : field.description;
+        const effectiveField = activeOverride ? {
+          ...field,
+          ui: {
+            ...field.ui,
+            placeholder: (_e = activeOverride.placeholder) != null ? _e : (_d = field.ui) == null ? void 0 : _d.placeholder
+          }
+        } : field;
+        const isReadOnly = !!(activeOverride == null ? void 0 : activeOverride.readOnly);
+        const isBool = field.valueType === "boolean";
+        return /* @__PURE__ */ React.createElement("div", { className: isBool ? styles.fieldRowCenter : styles.fieldRow }, /* @__PURE__ */ React.createElement("div", { className: isBool ? styles.fieldLabelRowCompact : styles.fieldLabelRow }, /* @__PURE__ */ React.createElement("span", { className: styles.fieldLabel }, label, required && /* @__PURE__ */ React.createElement("span", { className: styles.fieldRequired }, "*")), description && /* @__PURE__ */ React.createElement(Tooltip, { content: description }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React.createElement("div", { className: styles.fieldInputCol }, renderFieldInput(effectiveField, formField, disabled || isReadOnly), errorMessage && /* @__PURE__ */ React.createElement("span", { className: styles.fieldError }, errorMessage)));
+      }
+    }
+  );
+}
+
+export { SchemaField };
+//# sourceMappingURL=SchemaField.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/SchemaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaField.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/SchemaField.tsx"],"sourcesContent":["import React from 'react';\nimport { type useForm, Controller } from 'react-hook-form';\nimport { useStyles2, Icon, Tooltip } from '@grafana/ui';\nimport { type ConfigField, resolveActiveOverride, formKey } from '../../../datasource/schema/config';\nimport type { FormValues } from '../../../datasource/schema/types';\nimport { isFieldRequired, buildValidationRules } from './fieldUtils';\nimport { PdcFieldNote } from './PdcFieldNote';\nimport { renderFieldInput } from './renderFieldInput';\nimport { getWizardStyles } from './wizardStyles';\n\nexport type SchemaFieldProps = {\n  field: ConfigField;\n  control: ReturnType<typeof useForm<FormValues>>['control'];\n  errors: ReturnType<typeof useForm<FormValues>>['formState']['errors'];\n  disabled?: boolean;\n  dsUid: string;\n  watchedValues: Record<string, unknown>;\n  fieldById: Map<string, ConfigField>;\n};\n\nexport function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, fieldById }: SchemaFieldProps) {\n  const styles = useStyles2(getWizardStyles);\n\n  const activeOverride = resolveActiveOverride(field, watchedValues, fieldById);\n  const fk = formKey(field);\n\n  if (field.key === 'pdcInjected' && field.target === 'jsonData') {\n    return (\n      <Controller\n        name={fk}\n        control={control}\n        render={({ field: formField }) => (\n          <PdcFieldNote\n            enabled={!!formField.value}\n            description={field.description}\n            configUrl={`/connections/datasources/edit/${dsUid}`}\n          />\n        )}\n      />\n    );\n  }\n\n  const required = isFieldRequired(field, watchedValues, fieldById);\n  const validationRules = buildValidationRules(field, required);\n\n  return (\n    <Controller\n      name={fk}\n      control={control}\n      rules={validationRules}\n      render={({ field: formField }) => {\n        const errorMessage = errors[fk]?.message as string | undefined;\n        const label = field.label ?? field.key;\n        const description = activeOverride?.description ?? field.description;\n        const effectiveField = activeOverride\n          ? {\n              ...field,\n              description,\n              ui: {\n                ...field.ui,\n                placeholder: activeOverride.placeholder ?? field.ui?.placeholder,\n              } as ConfigField['ui'],\n            }\n          : field;\n        const isReadOnly = !!activeOverride?.readOnly;\n        const isBool = field.valueType === 'boolean';\n\n        return (\n          <div className={isBool ? styles.fieldRowCenter : styles.fieldRow}>\n            <div className={isBool ? styles.fieldLabelRowCompact : styles.fieldLabelRow}>\n              <span className={styles.fieldLabel}>\n                {label}\n                {required && <span className={styles.fieldRequired}>*</span>}\n              </span>\n              {description && (\n                <Tooltip content={description}>\n                  <Icon name=\"info-circle\" size=\"xs\" className={styles.fieldInfoIcon} />\n                </Tooltip>\n              )}\n            </div>\n            <div className={styles.fieldInputCol}>\n              {renderFieldInput(effectiveField, formField, disabled || isReadOnly)}\n              {errorMessage && <span className={styles.fieldError}>{errorMessage}</span>}\n            </div>\n          </div>\n        );\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/SecureFieldInput.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+import { useStyles2, Icon, Button, Input } from '@grafana/ui';
+import { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource.js';
+
+function SecureFieldInput({
+  formField,
+  placeholder,
+  disabled,
+  label
+}) {
+  var _a;
+  const isConfigured = formField.value === SECURE_FIELD_CONFIGURED;
+  const [revealed, setRevealed] = useState(false);
+  const styles = useStyles2(getSecureFieldStyles);
+  if (isConfigured) {
+    return /* @__PURE__ */ React.createElement("div", { className: styles.configuredRow }, /* @__PURE__ */ React.createElement("span", { className: styles.configuredBadge }, /* @__PURE__ */ React.createElement(Icon, { name: "lock", size: "xs" }), label, " configured"), !disabled && /* @__PURE__ */ React.createElement(Button, { variant: "secondary", fill: "text", size: "sm", onClick: () => formField.onChange(""), type: "button" }, "Reset"));
+  }
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...formField,
+      value: String((_a = formField.value) != null ? _a : ""),
+      type: revealed ? "text" : "password",
+      placeholder,
+      disabled,
+      suffix: /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  );
+}
+const getSecureFieldStyles = (theme) => ({
+  configuredRow: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }),
+  configuredBadge: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    borderRadius: theme.shape.radius.pill,
+    backgroundColor: theme.colors.success.transparent,
+    color: theme.colors.success.text,
+    fontSize: theme.typography.bodySmall.fontSize
+  })
+});
+
+export { SecureFieldInput, getSecureFieldStyles };
+//# sourceMappingURL=SecureFieldInput.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/SecureFieldInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecureFieldInput.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/SecureFieldInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, Button, Input, Icon } from '@grafana/ui';\nimport { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource';\n\nexport type FormFieldRef = {\n  onChange: (v: unknown) => void;\n  onBlur: () => void;\n  value: unknown;\n  name: string;\n};\n\nexport function SecureFieldInput({\n  formField,\n  placeholder,\n  disabled,\n  label,\n}: {\n  formField: FormFieldRef;\n  placeholder?: string;\n  disabled?: boolean;\n  label: string;\n}) {\n  const isConfigured = formField.value === SECURE_FIELD_CONFIGURED;\n  const [revealed, setRevealed] = useState(false);\n  const styles = useStyles2(getSecureFieldStyles);\n\n  if (isConfigured) {\n    return (\n      <div className={styles.configuredRow}>\n        <span className={styles.configuredBadge}>\n          <Icon name=\"lock\" size=\"xs\" />\n          {label} configured\n        </span>\n        {!disabled && (\n          <Button variant=\"secondary\" fill=\"text\" size=\"sm\" onClick={() => formField.onChange('')} type=\"button\">\n            Reset\n          </Button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <Input\n      {...formField}\n      value={String(formField.value ?? '')}\n      type={revealed ? 'text' : 'password'}\n      placeholder={placeholder}\n      disabled={disabled}\n      suffix={\n        <Button\n          variant=\"secondary\"\n          fill=\"text\"\n          size=\"sm\"\n          icon={revealed ? 'eye-slash' : 'eye'}\n          aria-label={revealed ? 'Hide' : 'Reveal'}\n          onClick={() => setRevealed((r) => !r)}\n          type=\"button\"\n        />\n      }\n    />\n  );\n}\n\nexport const getSecureFieldStyles = (theme: GrafanaTheme2) => ({\n  configuredRow: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  }),\n  configuredBadge: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,\n    borderRadius: theme.shape.radius.pill,\n    backgroundColor: theme.colors.success.transparent,\n    color: theme.colors.success.text,\n    fontSize: theme.typography.bodySmall.fontSize,\n  }),\n});\n"],"names":[],"mappings":";;;;;AAaO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAKG;AAvBH,EAAA,IAAA,EAAA;AAwBE,EAAA,MAAM,YAAA,GAAe,UAAU,KAAA,KAAU,uBAAA;AACzC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,WAAW,oBAAoB,CAAA;AAE9C,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,2CACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,aAAA,EAAA,sCACpB,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,eAAA,EAAA,sCACrB,IAAA,EAAA,EAAK,IAAA,EAAK,QAAO,IAAA,EAAK,IAAA,EAAK,GAC3B,KAAA,EAAM,aACT,CAAA,EACC,CAAC,4BACA,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAO,SAAQ,WAAA,EAAY,IAAA,EAAK,QAAO,IAAA,EAAK,IAAA,EAAK,OAAA,EAAS,MAAM,UAAU,QAAA,CAAS,EAAE,GAAG,IAAA,EAAK,QAAA,EAAA,EAAS,OAEvG,CAEJ,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,KAAA,EAAO,MAAA,CAAA,CAAO,EAAA,GAAA,SAAA,CAAU,KAAA,KAAV,YAAmB,EAAE,CAAA;AAAA,MACnC,IAAA,EAAM,WAAW,MAAA,GAAS,UAAA;AAAA,MAC1B,WAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,kBACE,KAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,IAAA,EAAK,IAAA;AAAA,UACL,IAAA,EAAM,WAAW,WAAA,GAAc,KAAA;AAAA,UAC/B,YAAA,EAAY,WAAW,MAAA,GAAS,QAAA;AAAA,UAChC,SAAS,MAAM,WAAA,CAAY,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,UACpC,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,GAEJ;AAEJ;AAEO,MAAM,oBAAA,GAAuB,CAAC,KAAA,MAA0B;AAAA,EAC7D,eAAe,GAAA,CAAI;AAAA,IACjB,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GACrB,CAAA;AAAA,EACD,iBAAiB,GAAA,CAAI;AAAA,IACnB,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IACtB,OAAA,EAAS,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA,EAAI,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA;AAAA,IACtD,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,IAAA;AAAA,IACjC,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,OAAA,CAAQ,WAAA;AAAA,IACtC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,OAAA,CAAQ,IAAA;AAAA,IAC5B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU;AAAA,GACtC;AACH,CAAA;;;;"}