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

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { cx } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { getTabStyles } from './tabStyles.js';
+
+function SidebarNav({ groups, activeIndex, sectionStates, onSelect }) {
+  const styles = useStyles2(getTabStyles);
+  const visibleGroups = groups.filter((g) => g.group.id !== "_required");
+  return /* @__PURE__ */ React.createElement("nav", { className: styles.sidebar }, /* @__PURE__ */ React.createElement("div", { className: styles.sidebarTitle }, "Connect data source"), /* @__PURE__ */ React.createElement("ul", { className: styles.navList }, visibleGroups.map((g, vi) => {
+    var _a, _b;
+    const origIndex = groups.indexOf(g);
+    const state = (_a = sectionStates[origIndex]) != null ? _a : "draft";
+    const isActive = origIndex === activeIndex;
+    const isOptional = g.group.optional === true;
+    const isLast = vi === visibleGroups.length - 1;
+    const nextIsOptional = !isLast && ((_b = visibleGroups[vi + 1]) == null ? void 0 : _b.group.optional) === true;
+    return /* @__PURE__ */ React.createElement("li", { key: g.group.id }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(styles.navItem, isActive && styles.navItemActive),
+        onClick: () => onSelect(origIndex),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(origIndex);
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: styles.navDotWrap }, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: cx(
+            styles.navDot,
+            isOptional && styles.navDotOptional,
+            isActive && styles.navDotActive,
+            state === "validated" && !isActive && styles.navDotValidated,
+            state === "error" && !isActive && styles.navDotError
+          )
+        }
+      ), !isLast && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cx(styles.navConnector, (isOptional || nextIsOptional) && styles.navConnectorDashed)
+        }
+      )),
+      /* @__PURE__ */ React.createElement("span", { className: cx(styles.navLabel, isActive && styles.navLabelActive) }, g.group.title)
+    ));
+  })));
+}
+
+export { SidebarNav };
+//# sourceMappingURL=SidebarNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/SidebarNav.tsx"],"sourcesContent":["import React from 'react';\nimport { cx } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\nimport type { ResolvedGroup } from './useDatasourceConfigForm';\nimport { getTabStyles } from './tabStyles';\n\nexport type SectionState = 'active' | 'draft' | 'validated' | 'error';\n\ntype SidebarNavProps = {\n  groups: ResolvedGroup[];\n  activeIndex: number;\n  sectionStates: SectionState[];\n  onSelect: (index: number) => void;\n};\n\nexport function SidebarNav({ groups, activeIndex, sectionStates, onSelect }: SidebarNavProps) {\n  const styles = useStyles2(getTabStyles);\n\n  // Filter out _required synthetic group\n  const visibleGroups = groups.filter((g) => g.group.id !== '_required');\n\n  return (\n    <nav className={styles.sidebar}>\n      <div className={styles.sidebarTitle}>Connect data source</div>\n      <ul className={styles.navList}>\n        {visibleGroups.map((g, vi) => {\n          // Map back to original index for state/selection\n          const origIndex = groups.indexOf(g);\n          const state = sectionStates[origIndex] ?? 'draft';\n          const isActive = origIndex === activeIndex;\n          const isOptional = g.group.optional === true;\n          const isLast = vi === visibleGroups.length - 1;\n          // Next item determines connector style\n          const nextIsOptional = !isLast && visibleGroups[vi + 1]?.group.optional === true;\n\n          return (\n            <li key={g.group.id}>\n              <div\n                className={cx(styles.navItem, isActive && styles.navItemActive)}\n                onClick={() => onSelect(origIndex)}\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    onSelect(origIndex);\n                  }\n                }}\n              >\n                <div className={styles.navDotWrap}>\n                  <span\n                    className={cx(\n                      styles.navDot,\n                      isOptional && styles.navDotOptional,\n                      isActive && styles.navDotActive,\n                      state === 'validated' && !isActive && styles.navDotValidated,\n                      state === 'error' && !isActive && styles.navDotError\n                    )}\n                  />\n                  {!isLast && (\n                    <div\n                      className={cx(styles.navConnector, (isOptional || nextIsOptional) && styles.navConnectorDashed)}\n                    />\n                  )}\n                </div>\n                <span className={cx(styles.navLabel, isActive && styles.navLabelActive)}>{g.group.title}</span>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+import { useStyles2, Icon, Input } from '@grafana/ui';
+
+function StringArrayInput({
+  value,
+  onChange,
+  placeholder,
+  disabled
+}) {
+  const [draft, setDraft] = useState("");
+  const styles = useStyles2(getStyles$e);
+  const addTag = () => {
+    const trimmed = draft.trim();
+    if (trimmed && !value.includes(trimmed)) {
+      onChange([...value, trimmed]);
+    }
+    setDraft("");
+  };
+  const removeTag = (tag) => {
+    onChange(value.filter((v) => v !== tag));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, value.length > 0 && /* @__PURE__ */ React.createElement("div", { className: styles.tags }, value.map((tag) => /* @__PURE__ */ React.createElement("span", { key: tag, className: styles.tag }, tag, !disabled && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: styles.tagRemove,
+      onClick: () => removeTag(tag),
+      "aria-label": `Remove ${tag}`
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: "times", size: "xs" })
+  )))), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: draft,
+      onChange: (e) => setDraft(e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          addTag();
+        }
+      },
+      onBlur: addTag,
+      placeholder,
+      disabled
+    }
+  ));
+}
+const getStyles$e = (theme) => ({
+  container: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5)
+  }),
+  tags: css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(0.5)
+  }),
+  tag: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.25),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    borderRadius: theme.shape.radius.pill,
+    backgroundColor: theme.colors.background.secondary,
+    border: `1px solid ${theme.colors.border.weak}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.primary
+  }),
+  tagRemove: css({
+    display: "inline-flex",
+    alignItems: "center",
+    padding: 0,
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    color: theme.colors.text.secondary,
+    "&:hover": { color: theme.colors.text.primary }
+  })
+});
+
+export { StringArrayInput };
+//# sourceMappingURL=StringArrayInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StringArrayInput.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/StringArrayInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, Input, Icon } from '@grafana/ui';\n\nexport function StringArrayInput({\n  value,\n  onChange,\n  placeholder,\n  disabled,\n}: {\n  value: string[];\n  onChange: (v: string[]) => void;\n  placeholder?: string;\n  disabled?: boolean;\n}) {\n  const [draft, setDraft] = useState('');\n  const styles = useStyles2(getStyles);\n\n  const addTag = () => {\n    const trimmed = draft.trim();\n    if (trimmed && !value.includes(trimmed)) {\n      onChange([...value, trimmed]);\n    }\n    setDraft('');\n  };\n\n  const removeTag = (tag: string) => {\n    onChange(value.filter((v) => v !== tag));\n  };\n\n  return (\n    <div className={styles.container}>\n      {value.length > 0 && (\n        <div className={styles.tags}>\n          {value.map((tag) => (\n            <span key={tag} className={styles.tag}>\n              {tag}\n              {!disabled && (\n                <button\n                  type=\"button\"\n                  className={styles.tagRemove}\n                  onClick={() => removeTag(tag)}\n                  aria-label={`Remove ${tag}`}\n                >\n                  <Icon name=\"times\" size=\"xs\" />\n                </button>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n      <Input\n        value={draft}\n        onChange={(e) => setDraft(e.currentTarget.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            addTag();\n          }\n        }}\n        onBlur={addTag}\n        placeholder={placeholder}\n        disabled={disabled}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(0.5),\n  }),\n  tags: css({\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: theme.spacing(0.5),\n  }),\n  tag: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.25),\n    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,\n    borderRadius: theme.shape.radius.pill,\n    backgroundColor: theme.colors.background.secondary,\n    border: `1px solid ${theme.colors.border.weak}`,\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.primary,\n  }),\n  tagRemove: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    padding: 0,\n    border: 'none',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    color: theme.colors.text.secondary,\n    '&:hover': { color: theme.colors.text.primary },\n  }),\n});\n"],"names":["getStyles"],"mappings":"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"}

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

@@ -0,0 +1,176 @@
+import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { useStyles2, Spinner, Alert, LinkButton, Icon, Collapse, Button } from '@grafana/ui';
+import { formKey } from '../../../datasource/schema/config.js';
+import { SchemaField } from './SchemaField.js';
+import { AuthorizationHeaderField } from './AuthorizationHeaderField.js';
+import { SidebarNav } from './SidebarNav.js';
+import { getTabStyles } from './tabStyles.js';
+
+function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  const styles = useStyles2(getTabStyles);
+  const sectionRefs = useRef(/* @__PURE__ */ new Map());
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    errors,
+    watchedValues,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isGroupValid,
+    groupHasData,
+    onSubmit
+  } = form;
+  const displayGroups = useMemo(() => resolvedGroups.filter((g) => g.group.id !== "_required"), [resolvedGroups]);
+  const [expandedSections, setExpandedSections] = useState(() => {
+    const expanded = /* @__PURE__ */ new Set();
+    for (let i = 0; i < displayGroups.length; i++) {
+      if (!displayGroups[i].group.optional) {
+        expanded.add(i);
+      }
+    }
+    return expanded;
+  });
+  const hasExpandedForData = useRef(false);
+  useMemo(() => {
+    if (initializing || hasExpandedForData.current) {
+      return;
+    }
+    hasExpandedForData.current = true;
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      for (let i = 0; i < displayGroups.length; i++) {
+        if (groupHasData(displayGroups[i])) {
+          next.add(i);
+        }
+      }
+      return next;
+    });
+  }, [initializing, displayGroups, groupHasData]);
+  const [activeSection, setActiveSection] = useState(0);
+  const toggleSection = useCallback((index) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+  const scrollToSection = useCallback(
+    (index) => {
+      setActiveSection(index);
+      if (!expandedSections.has(index)) {
+        setExpandedSections((prev) => new Set(prev).add(index));
+      }
+      const el = sectionRefs.current.get(index);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
+    [expandedSections]
+  );
+  const sectionStates = useMemo(() => {
+    return displayGroups.map((g, i) => {
+      if (i === activeSection) {
+        return "active";
+      }
+      if (!isGroupValid(g)) {
+        return "error";
+      }
+      if (groupHasData(g)) {
+        return "validated";
+      }
+      return "draft";
+    });
+  }, [displayGroups, activeSection, isGroupValid, groupHasData]);
+  if (initializing) {
+    return /* @__PURE__ */ React.createElement("div", { className: styles.loadingContainer }, /* @__PURE__ */ React.createElement(Spinner, { size: "sm", inline: true }), " Loading configuration\u2026");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React.createElement("div", { className: styles.formButtons }, /* @__PURE__ */ React.createElement(
+      LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, submitting && /* @__PURE__ */ React.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React.createElement(Spinner, { size: "sm" }), /* @__PURE__ */ React.createElement("span", null, "Saving & testing\u2026")), /* @__PURE__ */ React.createElement(
+    SidebarNav,
+    {
+      groups: displayGroups,
+      activeIndex: activeSection,
+      sectionStates,
+      onSelect: scrollToSection
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: styles.main }, 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.requiredNotice }, "Fields marked with * are required"), /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, displayGroups.map((g, i) => {
+    const visibleFields = g.fields.filter(isFieldVisible);
+    if (visibleFields.length === 0 && !httpHeadersField) {
+      return null;
+    }
+    const showHeaders = httpHeadersField && (g.group.id === "auth" || g.group.id === "url-and-auth" || g.group.id === "_required" || g.group.fieldRefs.includes("httpHeaders"));
+    const sectionLabel = /* @__PURE__ */ React.createElement("span", { className: styles.sectionLabel }, /* @__PURE__ */ React.createElement("span", { className: styles.sectionLabelText }, g.group.title), g.group.optional && /* @__PURE__ */ React.createElement("span", { className: styles.sectionBadge }, "Optional"));
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: g.group.id,
+        ref: (el) => {
+          if (el) {
+            sectionRefs.current.set(i, el);
+          }
+        },
+        className: styles.section
+      },
+      /* @__PURE__ */ React.createElement(
+        Collapse,
+        {
+          label: sectionLabel,
+          isOpen: expandedSections.has(i),
+          collapsible: true,
+          onToggle: () => {
+            toggleSection(i);
+            setActiveSection(i);
+          },
+          className: styles.collapseHeader
+        },
+        /* @__PURE__ */ React.createElement("div", { className: styles.sectionBody }, g.group.description && /* @__PURE__ */ React.createElement("div", { className: styles.sectionDescription }, g.group.description), visibleFields.map((field) => /* @__PURE__ */ React.createElement(
+          SchemaField,
+          {
+            key: formKey(field),
+            field,
+            control,
+            errors,
+            disabled: allDisabled,
+            dsUid,
+            watchedValues,
+            fieldById
+          }
+        )), showHeaders && /* @__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.formButtons }, 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, type: "submit" }, submitting ? "Saving\u2026" : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError }))))));
+}
+
+export { TabLayout };
+//# sourceMappingURL=TabLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabLayout.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/TabLayout.tsx"],"sourcesContent":["import React, { type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { useStyles2, Button, Icon, Alert, Spinner, LinkButton, Collapse } from '@grafana/ui';\nimport { formKey, type DatasourceConfigSchema } from '../../../datasource/schema/config';\nimport type { useDatasourceConfigForm } from './useDatasourceConfigForm';\nimport { SchemaField } from './SchemaField';\nimport { AuthorizationHeaderField } from './AuthorizationHeaderField';\nimport { SidebarNav, type SectionState } from './SidebarNav';\nimport { getTabStyles } from './tabStyles';\n\ntype TabLayoutProps = {\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\nexport function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }: TabLayoutProps) {\n  const styles = useStyles2(getTabStyles);\n  const sectionRefs = useRef<Map<number, HTMLDivElement>>(new Map());\n\n  const {\n    resolvedGroups,\n    fieldById,\n    httpHeadersField,\n    control,\n    handleSubmit,\n    errors,\n    watchedValues,\n    initializing,\n    fetchError,\n    submitting,\n    submitError,\n    readOnly,\n    isFieldVisible,\n    isGroupValid,\n    groupHasData,\n    onSubmit,\n  } = form;\n\n  // Filter out _required synthetic group — in tab mode we show all groups from schema directly\n  const displayGroups = useMemo(() => resolvedGroups.filter((g) => g.group.id !== '_required'), [resolvedGroups]);\n\n  // Expand/collapse state: required or groups with data start expanded, optional start collapsed\n  const [expandedSections, setExpandedSections] = useState<Set<number>>(() => {\n    const expanded = new Set<number>();\n    for (let i = 0; i < displayGroups.length; i++) {\n      if (!displayGroups[i].group.optional) {\n        expanded.add(i);\n      }\n    }\n    return expanded;\n  });\n\n  // Re-evaluate on data load: expand sections that have saved data\n  const hasExpandedForData = useRef(false);\n  useMemo(() => {\n    if (initializing || hasExpandedForData.current) {\n      return;\n    }\n    hasExpandedForData.current = true;\n    setExpandedSections((prev) => {\n      const next = new Set(prev);\n      for (let i = 0; i < displayGroups.length; i++) {\n        if (groupHasData(displayGroups[i])) {\n          next.add(i);\n        }\n      }\n      return next;\n    });\n  }, [initializing, displayGroups, groupHasData]);\n\n  const [activeSection, setActiveSection] = useState(0);\n\n  const toggleSection = useCallback((index: number) => {\n    setExpandedSections((prev) => {\n      const next = new Set(prev);\n      if (next.has(index)) {\n        next.delete(index);\n      } else {\n        next.add(index);\n      }\n      return next;\n    });\n  }, []);\n\n  const scrollToSection = useCallback(\n    (index: number) => {\n      setActiveSection(index);\n      if (!expandedSections.has(index)) {\n        setExpandedSections((prev) => new Set(prev).add(index));\n      }\n      const el = sectionRefs.current.get(index);\n      if (el) {\n        el.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    },\n    [expandedSections]\n  );\n\n  // Compute sidebar states\n  const sectionStates: SectionState[] = useMemo(() => {\n    return displayGroups.map((g, i) => {\n      if (i === activeSection) {\n        return 'active';\n      }\n      if (!isGroupValid(g)) {\n        return 'error';\n      }\n      if (groupHasData(g)) {\n        return 'validated';\n      }\n      return 'draft';\n    });\n  }, [displayGroups, activeSection, isGroupValid, groupHasData]);\n\n  if (initializing) {\n    return (\n      <div className={styles.loadingContainer}>\n        <Spinner size=\"sm\" inline /> Loading configuration…\n      </div>\n    );\n  }\n\n  if (fetchError) {\n    return (\n      <div>\n        <Alert severity=\"error\" title=\"Failed to load configuration\">\n          {fetchError}\n        </Alert>\n        <div className={styles.formButtons}>\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  return (\n    <div className={styles.root}>\n      {submitting && (\n        <div className={styles.overlay}>\n          <Spinner size=\"sm\" />\n          <span>Saving & testing…</span>\n        </div>\n      )}\n\n      <SidebarNav\n        groups={displayGroups}\n        activeIndex={activeSection}\n        sectionStates={sectionStates}\n        onSelect={scrollToSection}\n      />\n\n      <div className={styles.main}>\n        {readOnly && (\n          <div className={styles.readOnlyBanner}>\n            <Icon name=\"lock\" size=\"xs\" />\n            <span>Read-only — managed externally</span>\n          </div>\n        )}\n\n        <div className={styles.requiredNotice}>Fields marked with * are required</div>\n\n        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>\n          {displayGroups.map((g, i) => {\n            const visibleFields = g.fields.filter(isFieldVisible);\n            if (visibleFields.length === 0 && !httpHeadersField) {\n              return null;\n            }\n\n            const showHeaders =\n              httpHeadersField &&\n              (g.group.id === 'auth' ||\n                g.group.id === 'url-and-auth' ||\n                g.group.id === '_required' ||\n                g.group.fieldRefs.includes('httpHeaders'));\n\n            const sectionLabel = (\n              <span className={styles.sectionLabel}>\n                <span className={styles.sectionLabelText}>{g.group.title}</span>\n                {g.group.optional && <span className={styles.sectionBadge}>Optional</span>}\n              </span>\n            );\n\n            return (\n              <div\n                key={g.group.id}\n                ref={(el) => {\n                  if (el) {\n                    sectionRefs.current.set(i, el);\n                  }\n                }}\n                className={styles.section}\n              >\n                <Collapse\n                  label={sectionLabel}\n                  isOpen={expandedSections.has(i)}\n                  collapsible\n                  onToggle={() => {\n                    toggleSection(i);\n                    setActiveSection(i);\n                  }}\n                  className={styles.collapseHeader}\n                >\n                  <div className={styles.sectionBody}>\n                    {g.group.description && <div className={styles.sectionDescription}>{g.group.description}</div>}\n                    {visibleFields.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                    {showHeaders && (\n                      <AuthorizationHeaderField\n                        headersFieldKey={formKey(httpHeadersField!)}\n                        control={control}\n                        disabled={allDisabled}\n                        watchedValues={watchedValues}\n                      />\n                    )}\n                  </div>\n                </Collapse>\n              </div>\n            );\n          })}\n\n          {submitError && (\n            <Alert severity=\"error\" title=\"Error\">\n              {submitError}\n            </Alert>\n          )}\n\n          <div className={styles.formButtons}>\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} type=\"submit\">\n                {submitting ? 'Saving…' : 'Save & Test'}\n              </Button>\n            )}\n            {healthError && renderActions?.({ dsUid, dsName, dsType: schema.pluginType, healthError })}\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,88 @@
+import { parseDependsOn, formKey } from '../../../datasource/schema/config.js';
+import { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource.js';
+
+function evaluateEffectCondition(when, fieldValue) {
+  var _a, _b;
+  const m = when.match(/^value\s*(==|!=)\s*(?:'([^']*)'|"([^"]*)"|(.+))$/);
+  if (!m) {
+    return false;
+  }
+  const op = m[1];
+  let target = (_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4];
+  if (target === "true") {
+    target = true;
+  } else if (target === "false") {
+    target = false;
+  } else if (typeof target === "string" && /^-?\d+(\.\d+)?$/.test(target)) {
+    target = Number(target);
+  }
+  const eq = String(fieldValue) === String(target);
+  return op === "==" ? eq : !eq;
+}
+function isFieldRequired(field, watchedValues, fieldById) {
+  var _a;
+  if (field.required) {
+    return true;
+  }
+  if (field.requiredWhen) {
+    const parsed = parseDependsOn(field.requiredWhen);
+    if (parsed) {
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? formKey(depField) : parsed.field;
+      return String((_a = watchedValues[depKey]) != null ? _a : "") === parsed.value;
+    }
+  }
+  return false;
+}
+function buildValidationRules(field, required) {
+  var _a, _b, _c, _d, _e, _f;
+  const rules = {};
+  const label = (_a = field.label) != null ? _a : field.key;
+  if (required) {
+    if (field.target === "secureJsonData") {
+      rules.validate = (value) => {
+        if (value === SECURE_FIELD_CONFIGURED) {
+          return true;
+        }
+        if (!value || value === "") {
+          return `${label} is required`;
+        }
+        return true;
+      };
+    } else {
+      rules.required = `${label} is required`;
+    }
+  }
+  if (field.validations) {
+    for (const v of field.validations) {
+      switch (v.type) {
+        case "pattern":
+          rules.pattern = {
+            value: new RegExp(v.pattern),
+            message: (_b = v.message) != null ? _b : `Invalid ${label}`
+          };
+          break;
+        case "range":
+          if (v.min !== void 0) {
+            rules.min = { value: v.min, message: (_c = v.message) != null ? _c : `Minimum value is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.max = { value: v.max, message: (_d = v.message) != null ? _d : `Maximum value is ${v.max}` };
+          }
+          break;
+        case "length":
+          if (v.min !== void 0) {
+            rules.minLength = { value: v.min, message: (_e = v.message) != null ? _e : `Minimum length is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.maxLength = { value: v.max, message: (_f = v.message) != null ? _f : `Maximum length is ${v.max}` };
+          }
+          break;
+      }
+    }
+  }
+  return rules;
+}
+
+export { buildValidationRules, evaluateEffectCondition, isFieldRequired };
+//# sourceMappingURL=fieldUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fieldUtils.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/fieldUtils.ts"],"sourcesContent":["import { type ConfigField, parseDependsOn, formKey } from '../../../datasource/schema/config';\nimport { SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource';\n\n/**\n * Evaluate an effect's `when` condition against a field value.\n * Supports: \"value == 'literal'\", \"value == true\", \"value != 'literal'\"\n * The keyword `value` refers to the current value of the source field.\n */\nexport function evaluateEffectCondition(when: string, fieldValue: unknown): boolean {\n  const m = when.match(/^value\\s*(==|!=)\\s*(?:'([^']*)'|\"([^\"]*)\"|(.+))$/);\n  if (!m) {\n    return false;\n  }\n  const op = m[1];\n  let target: unknown = m[2] ?? m[3] ?? m[4];\n  if (target === 'true') {\n    target = true;\n  } else if (target === 'false') {\n    target = false;\n  } else if (typeof target === 'string' && /^-?\\d+(\\.\\d+)?$/.test(target)) {\n    target = Number(target);\n  }\n\n  const eq = String(fieldValue) === String(target);\n  return op === '==' ? eq : !eq;\n}\n\n/**\n * Evaluate whether a field is currently required, considering both the static\n * `required` flag and the conditional `requiredWhen` expression.\n */\nexport function isFieldRequired(\n  field: ConfigField,\n  watchedValues: Record<string, unknown>,\n  fieldById: Map<string, ConfigField>\n): boolean {\n  if (field.required) {\n    return true;\n  }\n  if (field.requiredWhen) {\n    const parsed = parseDependsOn(field.requiredWhen);\n    if (parsed) {\n      const depField = fieldById.get(parsed.field);\n      const depKey = depField ? formKey(depField) : parsed.field;\n      return String(watchedValues[depKey] ?? '') === parsed.value;\n    }\n  }\n  return false;\n}\n\nexport function buildValidationRules(field: ConfigField, required: boolean) {\n  const rules: Record<string, unknown> = {};\n  const label = field.label ?? field.key;\n\n  if (required) {\n    if (field.target === 'secureJsonData') {\n      rules.validate = (value: unknown) => {\n        if (value === SECURE_FIELD_CONFIGURED) {\n          return true;\n        }\n        if (!value || value === '') {\n          return `${label} is required`;\n        }\n        return true;\n      };\n    } else {\n      rules.required = `${label} is required`;\n    }\n  }\n\n  if (field.validations) {\n    for (const v of field.validations) {\n      switch (v.type) {\n        case 'pattern':\n          rules.pattern = {\n            value: new RegExp(v.pattern),\n            message: v.message ?? `Invalid ${label}`,\n          };\n          break;\n        case 'range':\n          if (v.min !== undefined) {\n            rules.min = { value: v.min, message: v.message ?? `Minimum value is ${v.min}` };\n          }\n          if (v.max !== undefined) {\n            rules.max = { value: v.max, message: v.message ?? `Maximum value is ${v.max}` };\n          }\n          break;\n        case 'length':\n          if (v.min !== undefined) {\n            rules.minLength = { value: v.min, message: v.message ?? `Minimum length is ${v.min}` };\n          }\n          if (v.max !== undefined) {\n            rules.maxLength = { value: v.max, message: v.message ?? `Maximum length is ${v.max}` };\n          }\n          break;\n      }\n    }\n  }\n\n  return rules;\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Switch, Input, RadioButtonGroup, Select, TextArea } from '@grafana/ui';
+import { SecureFieldInput } from './SecureFieldInput.js';
+import { StringArrayInput } from './StringArrayInput.js';
+import { IndexedPairEditor } from './IndexedPairEditor.js';
+import { ComplexFieldNote } from './ComplexFieldNote.js';
+
+function renderFieldInput(field, formField, disabled) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const value = formField.value;
+  const placeholder = (_a = field.ui) == null ? void 0 : _a.placeholder;
+  const label = (_b = field.label) != null ? _b : field.key;
+  if (field.target === "secureJsonData" || field.semanticType === "password" || field.semanticType === "token") {
+    return /* @__PURE__ */ React.createElement(SecureFieldInput, { formField, placeholder: placeholder != null ? placeholder : label, disabled, label });
+  }
+  if (field.valueType === "boolean") {
+    return /* @__PURE__ */ React.createElement(Switch, { value: !!value, onChange: (e) => formField.onChange(e.currentTarget.checked), disabled });
+  }
+  if (field.valueType === "number") {
+    return /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        ...formField,
+        value: value !== void 0 && value !== null ? Number(value) : "",
+        type: "number",
+        placeholder,
+        disabled,
+        onChange: (e) => {
+          const n = e.currentTarget.valueAsNumber;
+          formField.onChange(Number.isNaN(n) ? void 0 : n);
+        }
+      }
+    );
+  }
+  if (((_c = field.ui) == null ? void 0 : _c.component) === "radio") {
+    const options = ((_e = (_d = field.ui) == null ? void 0 : _d.options) != null ? _e : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+      RadioButtonGroup,
+      {
+        options,
+        value: String(value != null ? value : ""),
+        onChange: (v) => formField.onChange(v),
+        disabled
+      }
+    ));
+  }
+  if (((_f = field.ui) == null ? void 0 : _f.component) === "select") {
+    const options = ((_h = (_g = field.ui) == null ? void 0 : _g.options) != null ? _h : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        options,
+        value: options.find((o) => o.value === String(value != null ? value : "")),
+        onChange: (v) => formField.onChange(v == null ? void 0 : v.value),
+        disabled
+      }
+    );
+  }
+  if (field.semanticType === "url") {
+    return /* @__PURE__ */ React.createElement(Input, { ...formField, value: String(value != null ? value : ""), type: "url", placeholder, disabled });
+  }
+  if (((_i = field.ui) == null ? void 0 : _i.component) === "textarea") {
+    return /* @__PURE__ */ React.createElement(
+      TextArea,
+      {
+        ...formField,
+        value: String(value != null ? value : ""),
+        placeholder,
+        disabled,
+        rows: (_k = (_j = field.ui) == null ? void 0 : _j.rows) != null ? _k : 3
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_l = field.item) == null ? void 0 : _l.valueType) === "string") {
+    return /* @__PURE__ */ React.createElement(
+      StringArrayInput,
+      {
+        value: Array.isArray(value) ? value : [],
+        onChange: formField.onChange,
+        placeholder: placeholder != null ? placeholder : `Add ${label.toLowerCase()}\u2026`,
+        disabled
+      }
+    );
+  }
+  if (((_m = field.storage) == null ? void 0 : _m.type) === "indexedPair") {
+    const items = Array.isArray(value) ? value : [];
+    const maxItems = (_p = (_o = (_n = field.validations) == null ? void 0 : _n.find((v) => v.type === "itemCount")) == null ? void 0 : _o.max) != null ? _p : 10;
+    return /* @__PURE__ */ React.createElement(IndexedPairEditor, { value: items, onChange: formField.onChange, maxItems, disabled });
+  }
+  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_q = field.item) == null ? void 0 : _q.valueType) === "object" || ((_r = field.item) == null ? void 0 : _r.valueType) === "map")) {
+    const count = Array.isArray(value) ? value.length : 0;
+    return /* @__PURE__ */ React.createElement(ComplexFieldNote, { count, label });
+  }
+  return /* @__PURE__ */ React.createElement(Input, { ...formField, value: String(value != null ? value : ""), placeholder, disabled });
+}
+
+export { renderFieldInput };
+//# sourceMappingURL=renderFieldInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderFieldInput.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/renderFieldInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Input, Select, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';\nimport type { ConfigField } from '../../../datasource/schema/config';\nimport type { IndexedPairItem } from '../../../datasource/schema/datasource';\nimport { SecureFieldInput, type FormFieldRef } from './SecureFieldInput';\nimport { StringArrayInput } from './StringArrayInput';\nimport { IndexedPairEditor } from './IndexedPairEditor';\nimport { ComplexFieldNote } from './ComplexFieldNote';\n\nexport function renderFieldInput(field: ConfigField, formField: FormFieldRef, disabled?: boolean) {\n  const value = formField.value;\n  const placeholder = field.ui?.placeholder;\n  const label = field.label ?? field.key;\n\n  // Secure fields (password/token in secureJsonData)\n  if (field.target === 'secureJsonData' || field.semanticType === 'password' || field.semanticType === 'token') {\n    return (\n      <SecureFieldInput formField={formField} placeholder={placeholder ?? label} disabled={disabled} label={label} />\n    );\n  }\n\n  // Boolean fields\n  if (field.valueType === 'boolean') {\n    return <Switch value={!!value} onChange={(e) => formField.onChange(e.currentTarget.checked)} disabled={disabled} />;\n  }\n\n  // Number fields\n  if (field.valueType === 'number') {\n    return (\n      <Input\n        {...formField}\n        value={value !== undefined && value !== null ? Number(value) : ''}\n        type=\"number\"\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={(e) => {\n          const n = e.currentTarget.valueAsNumber;\n          formField.onChange(Number.isNaN(n) ? undefined : n);\n        }}\n      />\n    );\n  }\n\n  // Radio button group\n  if (field.ui?.component === 'radio') {\n    const options = (field.ui?.options ?? []).map((opt) => ({\n      label: opt.label,\n      value: String(opt.value),\n      description: opt.description,\n    }));\n    return (\n      <div style={{ display: 'flex' }}>\n        <RadioButtonGroup\n          options={options}\n          value={String(value ?? '')}\n          onChange={(v) => formField.onChange(v)}\n          disabled={disabled}\n        />\n      </div>\n    );\n  }\n\n  // Select / dropdown fields\n  if (field.ui?.component === 'select') {\n    const options = (field.ui?.options ?? []).map((opt) => ({\n      label: opt.label,\n      value: String(opt.value),\n      description: opt.description,\n    }));\n    return (\n      <Select\n        options={options}\n        value={options.find((o) => o.value === String(value ?? ''))}\n        onChange={(v) => formField.onChange(v?.value)}\n        disabled={disabled}\n      />\n    );\n  }\n\n  // URL fields\n  if (field.semanticType === 'url') {\n    return (\n      <Input {...formField} value={String(value ?? '')} type=\"url\" placeholder={placeholder} disabled={disabled} />\n    );\n  }\n\n  // Textarea\n  if (field.ui?.component === 'textarea') {\n    return (\n      <TextArea\n        {...formField}\n        value={String(value ?? '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        rows={field.ui?.rows ?? 3}\n      />\n    );\n  }\n\n  // Array of strings — tag/chip input\n  if (field.valueType === 'array' && field.item?.valueType === 'string') {\n    return (\n      <StringArrayInput\n        value={Array.isArray(value) ? (value as string[]) : []}\n        onChange={formField.onChange}\n        placeholder={placeholder ?? `Add ${label.toLowerCase()}…`}\n        disabled={disabled}\n      />\n    );\n  }\n\n  // Indexed pair fields (e.g. custom HTTP headers) — editable key-value list\n  if (field.storage?.type === 'indexedPair') {\n    const items = Array.isArray(value) ? (value as IndexedPairItem[]) : [];\n    const maxItems =\n      field.validations?.find((v): v is { type: 'itemCount'; max?: number } => v.type === 'itemCount')?.max ?? 10;\n    return <IndexedPairEditor value={items} onChange={formField.onChange} maxItems={maxItems} disabled={disabled} />;\n  }\n\n  // Complex fields (array of objects/maps, object, map) — not editable in the wizard\n  if (\n    field.valueType === 'object' ||\n    field.valueType === 'map' ||\n    (field.valueType === 'array' && (field.item?.valueType === 'object' || field.item?.valueType === 'map'))\n  ) {\n    const count = Array.isArray(value) ? value.length : 0;\n    return <ComplexFieldNote count={count} label={label} />;\n  }\n\n  // Default: text input\n  return <Input {...formField} value={String(value ?? '')} placeholder={placeholder} disabled={disabled} />;\n}\n"],"names":[],"mappings":"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"}