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

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/schema';\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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"}

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

@@ -0,0 +1,241 @@
+import { css } from '@emotion/css';
+
+const getTabStyles = (theme) => ({
+  root: css({
+    display: "flex",
+    gap: theme.spacing(3),
+    position: "relative",
+    background: theme.colors.background.canvas,
+    padding: theme.spacing(2)
+  }),
+  // Sidebar
+  sidebar: css({
+    width: 250,
+    flexShrink: 0,
+    position: "sticky",
+    top: theme.spacing(2),
+    alignSelf: "flex-start",
+    [theme.breakpoints.down("sm")]: { display: "none" }
+  }),
+  sidebarTitle: css({
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary,
+    padding: `${theme.spacing(1)} 0`,
+    marginBottom: theme.spacing(1)
+  }),
+  navList: css({
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    position: "relative"
+  }),
+  navItem: css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(1.5),
+    padding: `${theme.spacing(1)} 0`,
+    cursor: "pointer",
+    position: "relative"
+  }),
+  navItemActive: css({}),
+  // Dot container: positions the dot and the connector line
+  navDotWrap: css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 12,
+    flexShrink: 0,
+    alignSelf: "flex-start",
+    paddingTop: 4
+  }),
+  navDot: css({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    border: `2px solid ${theme.colors.text.disabled}`,
+    background: theme.colors.background.canvas,
+    position: "relative",
+    zIndex: 1
+  }),
+  navDotOptional: css({
+    borderStyle: "dashed"
+  }),
+  navDotActive: css({
+    background: theme.colors.primary.main,
+    borderColor: theme.colors.primary.main,
+    borderStyle: "solid"
+  }),
+  navDotValidated: css({
+    background: theme.colors.success.main,
+    borderColor: theme.colors.success.main,
+    borderStyle: "solid"
+  }),
+  navDotError: css({
+    background: theme.colors.error.main,
+    borderColor: theme.colors.error.main,
+    borderStyle: "solid"
+  }),
+  // Connector line running from dot center downward to next item
+  navConnector: css({
+    position: "absolute",
+    left: 5,
+    top: 16,
+    bottom: -16,
+    width: 2,
+    background: theme.colors.border.medium,
+    zIndex: 0
+  }),
+  navConnectorDashed: css({
+    background: "none",
+    borderLeft: `2px dashed ${theme.colors.border.weak}`,
+    width: 0
+  }),
+  navLabel: css({
+    fontSize: theme.typography.body.fontSize,
+    color: "rgba(204, 204, 220, 0.65)",
+    lineHeight: 1.4
+  }),
+  navLabelActive: css({
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  // Main content
+  main: css({
+    flex: 1,
+    minWidth: 0,
+    width: 0,
+    // forces flex child to respect flex-grow and fill remaining space
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  form: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  requiredNotice: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.5)
+  }),
+  // Section wrapper — card container around CollapsableSection
+  section: css({
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.default,
+    background: theme.colors.background.secondary,
+    overflow: "hidden"
+  }),
+  // Override Collapse component styling
+  collapseHeader: css({
+    borderRadius: theme.shape.radius.default,
+    background: "none",
+    border: "none",
+    marginBottom: 0,
+    // Collapse header button: make label fill remaining space
+    "& > button": {
+      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+      width: "100%",
+      justifyContent: "flex-start"
+    },
+    "& > button > div": {
+      flex: 1,
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      textAlign: "left"
+    }
+  }),
+  sectionLabel: css({
+    display: "flex",
+    alignItems: "center",
+    flex: 1
+  }),
+  sectionLabelText: css({
+    flex: 1
+  }),
+  sectionHeader: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+    cursor: "pointer",
+    userSelect: "none"
+  }),
+  sectionChevron: css({
+    transition: "transform 0.2s ease"
+  }),
+  sectionChevronOpen: css({
+    transform: "rotate(90deg)"
+  }),
+  sectionTitle: css({
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    flex: 1,
+    textAlign: "left"
+  }),
+  sectionBadge: css({
+    fontSize: "11px",
+    fontWeight: "normal",
+    color: theme.colors.text.disabled,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.pill,
+    padding: `1px ${theme.spacing(0.75)}`,
+    whiteSpace: "nowrap"
+  }),
+  sectionDescription: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(1.5)
+  }),
+  sectionBody: css({
+    padding: `0 ${theme.spacing(2)} ${theme.spacing(2)}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  // Form bottom
+  formButtons: css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.5)
+  }),
+  // Loading / error states
+  loadingContainer: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(3),
+    color: theme.colors.text.secondary
+  }),
+  overlay: css({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    background: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    zIndex: 1,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.primary,
+    opacity: 0.95
+  }),
+  readOnlyBanner: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${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}`,
+    marginBottom: theme.spacing(1)
+  })
+});
+
+export { getTabStyles };
+//# sourceMappingURL=tabStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabStyles.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/tabStyles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\n\nexport const getTabStyles = (theme: GrafanaTheme2) => ({\n  root: css({\n    display: 'flex',\n    gap: theme.spacing(3),\n    position: 'relative',\n    background: theme.colors.background.canvas,\n    padding: theme.spacing(2),\n  }),\n\n  // Sidebar\n  sidebar: css({\n    width: 250,\n    flexShrink: 0,\n    position: 'sticky',\n    top: theme.spacing(2),\n    alignSelf: 'flex-start',\n    [theme.breakpoints.down('sm')]: { display: 'none' },\n  }),\n  sidebarTitle: css({\n    fontSize: theme.typography.body.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.colors.text.primary,\n    padding: `${theme.spacing(1)} 0`,\n    marginBottom: theme.spacing(1),\n  }),\n  navList: css({\n    listStyle: 'none',\n    margin: 0,\n    padding: 0,\n    position: 'relative',\n  }),\n  navItem: css({\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1.5),\n    padding: `${theme.spacing(1)} 0`,\n    cursor: 'pointer',\n    position: 'relative',\n  }),\n  navItemActive: css({}),\n  // Dot container: positions the dot and the connector line\n  navDotWrap: css({\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 12,\n    flexShrink: 0,\n    alignSelf: 'flex-start',\n    paddingTop: 4,\n  }),\n  navDot: css({\n    width: 10,\n    height: 10,\n    borderRadius: '50%',\n    border: `2px solid ${theme.colors.text.disabled}`,\n    background: theme.colors.background.canvas,\n    position: 'relative',\n    zIndex: 1,\n  }),\n  navDotOptional: css({\n    borderStyle: 'dashed',\n  }),\n  navDotActive: css({\n    background: theme.colors.primary.main,\n    borderColor: theme.colors.primary.main,\n    borderStyle: 'solid',\n  }),\n  navDotValidated: css({\n    background: theme.colors.success.main,\n    borderColor: theme.colors.success.main,\n    borderStyle: 'solid',\n  }),\n  navDotError: css({\n    background: theme.colors.error.main,\n    borderColor: theme.colors.error.main,\n    borderStyle: 'solid',\n  }),\n  // Connector line running from dot center downward to next item\n  navConnector: css({\n    position: 'absolute',\n    left: 5,\n    top: 16,\n    bottom: -16,\n    width: 2,\n    background: theme.colors.border.medium,\n    zIndex: 0,\n  }),\n  navConnectorDashed: css({\n    background: 'none',\n    borderLeft: `2px dashed ${theme.colors.border.weak}`,\n    width: 0,\n  }),\n  navLabel: css({\n    fontSize: theme.typography.body.fontSize,\n    color: 'rgba(204, 204, 220, 0.65)',\n    lineHeight: 1.4,\n  }),\n  navLabelActive: css({\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.colors.text.primary,\n  }),\n\n  // Main content\n  main: css({\n    flex: 1,\n    minWidth: 0,\n    width: 0, // forces flex child to respect flex-grow and fill remaining space\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  }),\n  form: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  }),\n  requiredNotice: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.secondary,\n    marginBottom: theme.spacing(0.5),\n  }),\n\n  // Section wrapper — card container around CollapsableSection\n  section: css({\n    border: `1px solid ${theme.colors.border.weak}`,\n    borderRadius: theme.shape.radius.default,\n    background: theme.colors.background.secondary,\n    overflow: 'hidden',\n  }),\n  // Override Collapse component styling\n  collapseHeader: css({\n    borderRadius: theme.shape.radius.default,\n    background: 'none',\n    border: 'none',\n    marginBottom: 0,\n    // Collapse header button: make label fill remaining space\n    '& > button': {\n      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,\n      width: '100%',\n      justifyContent: 'flex-start',\n    },\n    '& > button > div': {\n      flex: 1,\n      fontSize: theme.typography.h4.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      textAlign: 'left',\n    },\n  }),\n  sectionLabel: css({\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n  }),\n  sectionLabelText: css({\n    flex: 1,\n  }),\n  sectionHeader: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,\n    cursor: 'pointer',\n    userSelect: 'none',\n  }),\n  sectionChevron: css({\n    transition: 'transform 0.2s ease',\n  }),\n  sectionChevronOpen: css({\n    transform: 'rotate(90deg)',\n  }),\n  sectionTitle: css({\n    fontSize: theme.typography.h4.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    flex: 1,\n    textAlign: 'left',\n  }),\n  sectionBadge: css({\n    fontSize: '11px',\n    fontWeight: 'normal',\n    color: theme.colors.text.disabled,\n    border: `1px solid ${theme.colors.border.weak}`,\n    borderRadius: theme.shape.radius.pill,\n    padding: `1px ${theme.spacing(0.75)}`,\n    whiteSpace: 'nowrap',\n  }),\n  sectionDescription: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.secondary,\n    marginBottom: theme.spacing(1.5),\n  }),\n  sectionBody: css({\n    padding: `0 ${theme.spacing(2)} ${theme.spacing(2)}`,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(0.75),\n  }),\n\n  // Form bottom\n  formButtons: css({\n    display: 'flex',\n    gap: theme.spacing(1),\n    paddingTop: theme.spacing(0.5),\n  }),\n\n  // Loading / error states\n  loadingContainer: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(3),\n    color: theme.colors.text.secondary,\n  }),\n  overlay: css({\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n    background: theme.colors.background.secondary,\n    borderRadius: theme.shape.radius.default,\n    zIndex: 1,\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.primary,\n    opacity: 0.95,\n  }),\n  readOnlyBanner: 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    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    marginBottom: theme.spacing(1),\n  }),\n});\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,284 @@
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { resolveGroups, resolveRequiredFieldsGroup, formKey, computeVirtualFieldValues, parseDependsOn } from '../../../datasource/schema/config.js';
+import { fetchExistingValues, submitDatasourceConfig, SECURE_FIELD_CONFIGURED } from '../../../datasource/schema/datasource.js';
+import { evaluateEffectCondition, isFieldRequired } from './fieldUtils.js';
+
+function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
+  const [initializing, setInitializing] = useState(true);
+  const [fetchError, setFetchError] = useState(null);
+  const [detectedReadOnly, setDetectedReadOnly] = useState(false);
+  const readOnly = detectedReadOnly;
+  const resolvedGroups = useMemo(() => {
+    const groups = resolveGroups(schema);
+    const requiredGroup = resolveRequiredFieldsGroup(schema);
+    if (!requiredGroup) {
+      return groups;
+    }
+    return [requiredGroup, ...groups];
+  }, [schema]);
+  const fieldById = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const f of schema.fields) {
+      m.set(f.id, f);
+    }
+    return m;
+  }, [schema.fields]);
+  const httpHeadersField = useMemo(
+    () => {
+      var _a;
+      return (_a = schema.fields.find((f) => {
+        var _a2;
+        return f.key === "httpHeaders" && ((_a2 = f.storage) == null ? void 0 : _a2.type) === "indexedPair";
+      })) != null ? _a : null;
+    },
+    [schema.fields]
+  );
+  const allStorageFields = useMemo(
+    () => schema.fields.filter((f) => f.kind !== "virtual" && !f.isItemField && f.target),
+    [schema.fields]
+  );
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    trigger,
+    setValue,
+    formState: { errors }
+  } = useForm({ mode: "onChange" });
+  const fieldsWithEffects = useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.effects || field.effects.length === 0) {
+        continue;
+      }
+      const mapped = field.effects.map((eff) => ({
+        when: eff.when,
+        targets: Object.entries(eff.set).map(([targetId, val]) => {
+          const targetField = fieldById.get(targetId);
+          return { key: targetField ? formKey(targetField) : targetId, value: val };
+        })
+      }));
+      result.push({ sourceKey: formKey(field), effects: mapped });
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  useEffect(() => {
+    let cancelled = false;
+    fetchExistingValues(dsUid, allStorageFields).then((result) => {
+      if (cancelled) {
+        return;
+      }
+      if (result.error) {
+        setFetchError(result.error);
+        setInitializing(false);
+        return;
+      }
+      if (result.readOnly) {
+        setDetectedReadOnly(true);
+      }
+      const defaults = {};
+      for (const field of allStorageFields) {
+        if (field.defaultValue !== void 0) {
+          defaults[formKey(field)] = field.defaultValue;
+        }
+      }
+      const merged = { ...defaults, ...result.values };
+      const virtualValues = computeVirtualFieldValues(schema, merged);
+      reset({ ...merged, ...virtualValues });
+      setInitializing(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dsUid, allStorageFields, schema, reset]);
+  const watchedValues = watch();
+  const prevEffectValuesRef = useRef({});
+  useEffect(() => {
+    if (initializing) {
+      return;
+    }
+    for (const { sourceKey, effects } of fieldsWithEffects) {
+      const currentVal = watchedValues[sourceKey];
+      const prevVal = prevEffectValuesRef.current[sourceKey];
+      if (currentVal === prevVal) {
+        continue;
+      }
+      prevEffectValuesRef.current[sourceKey] = currentVal;
+      for (const eff of effects) {
+        if (evaluateEffectCondition(eff.when, currentVal)) {
+          for (const { key, value } of eff.targets) {
+            setValue(key, value);
+          }
+          break;
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithEffects, initializing, setValue]);
+  const fieldsWithOverrideDefaults = useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.overrides || field.overrides.length === 0) {
+        continue;
+      }
+      const ovs = field.overrides.filter((ov) => ov.defaultValue !== void 0).map((ov) => {
+        const parsed = parseDependsOn(ov.when);
+        if (!parsed) {
+          return null;
+        }
+        const depField = fieldById.get(parsed.field);
+        return {
+          depKey: depField ? formKey(depField) : parsed.field,
+          depValue: parsed.value,
+          defaultValue: ov.defaultValue
+        };
+      }).filter(Boolean);
+      if (ovs.length > 0) {
+        result.push({ targetKey: formKey(field), fieldDefault: field.defaultValue, overrides: ovs });
+      }
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  const prevOverrideDepRef = useRef({});
+  useEffect(() => {
+    var _a;
+    if (initializing) {
+      return;
+    }
+    for (const { targetKey, fieldDefault, overrides } of fieldsWithOverrideDefaults) {
+      for (const ov of overrides) {
+        const currentDepVal = String((_a = watchedValues[ov.depKey]) != null ? _a : "");
+        const trackKey = `${targetKey}::${ov.depKey}`;
+        const prevDepVal = prevOverrideDepRef.current[trackKey];
+        if (currentDepVal === prevDepVal) {
+          continue;
+        }
+        prevOverrideDepRef.current[trackKey] = currentDepVal;
+        if (currentDepVal === ov.depValue) {
+          setValue(targetKey, ov.defaultValue);
+        } else if (prevDepVal === ov.depValue && fieldDefault !== void 0) {
+          setValue(targetKey, fieldDefault);
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithOverrideDefaults, initializing, setValue]);
+  const isFieldVisible = useCallback(
+    (field) => {
+      var _a, _b;
+      if (field.kind === "virtual" && !field.ui) {
+        return false;
+      }
+      if ((_a = field.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) {
+        return false;
+      }
+      if (!field.dependsOn) {
+        return true;
+      }
+      const parsed = parseDependsOn(field.dependsOn);
+      if (!parsed) {
+        return true;
+      }
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? formKey(depField) : parsed.field;
+      return String((_b = watchedValues[depKey]) != null ? _b : "") === parsed.value;
+    },
+    [watchedValues, fieldById]
+  );
+  const onSubmit = useCallback(
+    async (data) => {
+      setSubmitting(true);
+      setSubmitError(null);
+      onSaving == null ? void 0 : onSaving(true);
+      const minDelay = new Promise((r) => setTimeout(r, 2e3));
+      try {
+        await submitDatasourceConfig(dsUid, data, allStorageFields, isFieldVisible);
+        const [refreshed] = await Promise.all([fetchExistingValues(dsUid, allStorageFields), minDelay]);
+        const defaults = {};
+        for (const field of allStorageFields) {
+          if (field.defaultValue !== void 0) {
+            defaults[formKey(field)] = field.defaultValue;
+          }
+        }
+        const merged = { ...defaults, ...refreshed.values };
+        const virtualValues = computeVirtualFieldValues(schema, merged);
+        reset({ ...merged, ...virtualValues });
+        onSuccess("UPDATED", "Configuration saved.");
+      } catch (err) {
+        await minDelay;
+        setSubmitError(err instanceof Error ? err.message : "Failed to update datasource");
+      } finally {
+        setSubmitting(false);
+        onSaving == null ? void 0 : onSaving(false);
+      }
+    },
+    [dsUid, allStorageFields, isFieldVisible, schema, reset, onSuccess, onSaving]
+  );
+  const isGroupValid = useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        if (!isFieldVisible(field)) {
+          continue;
+        }
+        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;
+    },
+    [errors, watchedValues, fieldById, isFieldVisible]
+  );
+  const groupHasData = useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        const val = watchedValues[formKey(field)];
+        if (val === void 0 || val === null || val === "" || val === false) {
+          continue;
+        }
+        if (val === field.defaultValue) {
+          continue;
+        }
+        return true;
+      }
+      return false;
+    },
+    [watchedValues]
+  );
+  return {
+    // Schema
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    // Form
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    // State
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    // Callbacks
+    isFieldVisible,
+    isGroupValid,
+    groupHasData,
+    onSubmit
+  };
+}
+
+export { useDatasourceConfigForm };
+//# sourceMappingURL=useDatasourceConfigForm.js.map