@grafana/plugin-ui 0.15.0 → 0.16.0-dsconfig.a155abe

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

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { Alert } from '@grafana/ui';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+class DatasourceErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[DatasourceConfigWizard] Caught error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React.createElement(Alert, { severity: "warning", title: "Configuration wizard unavailable" }, "Could not load the configuration wizard", this.props.dsName ? ` for ${this.props.dsName}` : "", ". Use the Settings link to configure this datasource manually.");
+    }
+    return this.props.children;
+  }
+}
+
+export { DatasourceErrorBoundary };
+//# sourceMappingURL=DatasourceErrorBoundary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceErrorBoundary.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/DatasourceErrorBoundary.tsx"],"sourcesContent":["import React, { Component, type ReactNode, type ErrorInfo } from 'react';\nimport { Alert } from '@grafana/ui';\n\n/** Lightweight error boundary scoped to datasource config widgets — won't crash the host UI. */\nexport class DatasourceErrorBoundary extends Component<\n  { children: ReactNode; dsName?: string },\n  { error: Error | null }\n> {\n  state: { error: Error | null } = { error: null };\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    console.error('[DatasourceConfigWizard] Caught error:', error, info.componentStack);\n  }\n\n  render() {\n    if (this.state.error) {\n      return (\n        <Alert severity=\"warning\" title=\"Configuration wizard unavailable\">\n          Could not load the configuration wizard\n          {this.props.dsName ? ` for ${this.props.dsName}` : ''}. Use the Settings link to configure this datasource\n          manually.\n        </Alert>\n      );\n    }\n    return this.props.children;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAIO,MAAM,gCAAgC,SAG3C,CAAA;AAAA,EAHK,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAIL,IAAiC,aAAA,CAAA,IAAA,EAAA,OAAA,EAAA,EAAE,OAAO,IAAK,EAAA,CAAA;AAAA;AAAA,EAE/C,OAAO,yBAAyB,KAAc,EAAA;AAC5C,IAAA,OAAO,EAAE,KAAM,EAAA;AAAA;AACjB,EAEA,iBAAA,CAAkB,OAAc,IAAiB,EAAA;AAC/C,IAAA,OAAA,CAAQ,KAAM,CAAA,wCAAA,EAA0C,KAAO,EAAA,IAAA,CAAK,cAAc,CAAA;AAAA;AACpF,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,KAAO,EAAA;AACpB,MAAA,2CACG,KAAM,EAAA,EAAA,QAAA,EAAS,SAAU,EAAA,KAAA,EAAM,sCAAmC,yCAEhE,EAAA,IAAA,CAAK,KAAM,CAAA,MAAA,GAAS,QAAQ,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA,GAAK,IAAG,gEAExD,CAAA;AAAA;AAGJ,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEtB;;;;"}

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { SecureFieldInput } from './inputs/SecureFieldInput.js';
+import { StringArrayInput } from './inputs/StringArrayInput.js';
+import { IndexedPairEditor } from './inputs/IndexedPairEditor.js';
+import { FileUploadField } from './inputs/FileUploadField.js';
+import { ObjectArrayEditor } from './inputs/ObjectArrayEditor.js';
+import { ComplexFieldNote } from './inputs/ComplexFieldNote.js';
+import { RadioInput, SelectInput, BooleanInput, NumberInput, TextAreaInput, TextInput } from './inputs/PrimitiveInputs.js';
+
+function resolveFieldInputKind(field, hasSetValue) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  if (((_a = field.ui) == null ? undefined : _a.component) === "fileUpload" && field.ui.fileMapping && hasSetValue) {
+    return "fileUpload";
+  }
+  if (field.target === "secureJsonData") {
+    return "secure";
+  }
+  if (((_b = field.ui) == null ? undefined : _b.component) === "radio") {
+    return "radio";
+  }
+  if (((_c = field.ui) == null ? undefined : _c.component) === "select") {
+    return "select";
+  }
+  if (field.valueType === "boolean") {
+    return "boolean";
+  }
+  if (field.valueType === "number") {
+    return "number";
+  }
+  if (((_d = field.ui) == null ? undefined : _d.component) === "textarea") {
+    return "textarea";
+  }
+  if (((_e = field.storage) == null ? undefined : _e.type) === "indexedPair") {
+    return "indexedPair";
+  }
+  if (field.valueType === "array" && ((_f = field.item) == null ? undefined : _f.valueType) === "string") {
+    return "stringArray";
+  }
+  if (field.valueType === "array" && ((_g = field.item) == null ? undefined : _g.valueType) === "object" && ((_h = field.item.fields) == null ? undefined : _h.length)) {
+    return "objectArray";
+  }
+  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_i = field.item) == null ? undefined : _i.valueType) === "object" || ((_j = field.item) == null ? undefined : _j.valueType) === "map")) {
+    return "complex";
+  }
+  return "text";
+}
+function SecureInput({ field, formField, disabled }) {
+  var _a, _b, _c;
+  const label = (_a = field.label) != null ? _a : field.key;
+  return /* @__PURE__ */ React.createElement(
+    SecureFieldInput,
+    {
+      formField,
+      placeholder: (_c = (_b = field.ui) == null ? undefined : _b.placeholder) != null ? _c : label,
+      disabled,
+      label
+    }
+  );
+}
+function FileUploadInput({ field, formField, disabled, setValue }) {
+  if (!setValue) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(FileUploadField, { field, formField, disabled, setValue });
+}
+function IndexedPairInput({ field, formField, disabled }) {
+  var _a, _b, _c, _d, _e;
+  const items = Array.isArray(formField.value) ? formField.value : [];
+  const maxItems = (_c = (_b = (_a = field.validations) == null ? undefined : _a.find((v) => v.type === "itemCount")) == null ? undefined : _b.max) != null ? _c : 10;
+  const itemLabel = (_e = (_d = field.label) == null ? undefined : _d.toLowerCase().replace(/s$/, "")) != null ? _e : "header";
+  return /* @__PURE__ */ React.createElement(
+    IndexedPairEditor,
+    {
+      value: items,
+      onChange: formField.onChange,
+      maxItems,
+      disabled,
+      itemLabel
+    }
+  );
+}
+function StringArrayField({ field, formField, disabled }) {
+  var _a, _b;
+  const label = (_a = field.label) != null ? _a : field.key;
+  return /* @__PURE__ */ React.createElement(
+    StringArrayInput,
+    {
+      value: Array.isArray(formField.value) ? formField.value : [],
+      onChange: formField.onChange,
+      placeholder: (_b = field.ui) == null ? undefined : _b.placeholder,
+      disabled,
+      itemLabel: label.toLowerCase().replace(/s$/, "")
+    }
+  );
+}
+function ObjectArrayInput({ field, formField, disabled, errorMessage }) {
+  return /* @__PURE__ */ React.createElement(
+    ObjectArrayEditor,
+    {
+      field,
+      value: formField.value,
+      onChange: formField.onChange,
+      disabled,
+      errorMessage
+    }
+  );
+}
+function ComplexInput({ field, formField }) {
+  var _a;
+  const label = (_a = field.label) != null ? _a : field.key;
+  const count = Array.isArray(formField.value) ? formField.value.length : 0;
+  return /* @__PURE__ */ React.createElement(ComplexFieldNote, { count, label });
+}
+const FIELD_INPUTS = {
+  fileUpload: FileUploadInput,
+  secure: SecureInput,
+  radio: RadioInput,
+  select: SelectInput,
+  boolean: BooleanInput,
+  number: NumberInput,
+  textarea: TextAreaInput,
+  indexedPair: IndexedPairInput,
+  stringArray: StringArrayField,
+  objectArray: ObjectArrayInput,
+  complex: ComplexInput,
+  text: TextInput
+};
+function FieldInput(props) {
+  const kind = resolveFieldInputKind(props.field, props.setValue !== undefined);
+  const Component = FIELD_INPUTS[kind];
+  return /* @__PURE__ */ React.createElement(Component, { ...props });
+}
+
+export { FieldInput, resolveFieldInputKind };
+//# sourceMappingURL=FieldInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldInput.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/FieldInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { ConfigField } from '../../../schema/schema';\nimport type { IndexedPairItem } from './datasource';\nimport type { FieldInputProps } from './inputs/types';\nimport { SecureFieldInput } from './inputs/SecureFieldInput';\nimport { StringArrayInput } from './inputs/StringArrayInput';\nimport { IndexedPairEditor } from './inputs/IndexedPairEditor';\nimport { FileUploadField } from './inputs/FileUploadField';\nimport { ObjectArrayEditor } from './inputs/ObjectArrayEditor';\nimport { ComplexFieldNote } from './inputs/ComplexFieldNote';\nimport { TextInput, NumberInput, BooleanInput, TextAreaInput, SelectInput, RadioInput } from './inputs/PrimitiveInputs';\n\nexport type { FieldInputProps };\n\n/** Discriminant identifying which input component renders a field. */\nexport type FieldInputKind =\n  | 'fileUpload'\n  | 'secure'\n  | 'radio'\n  | 'select'\n  | 'boolean'\n  | 'number'\n  | 'textarea'\n  | 'indexedPair'\n  | 'stringArray'\n  | 'objectArray'\n  | 'complex'\n  | 'text';\n\n/**\n * Resolve a field to its input kind.\n *\n * Order matters: earlier rules win. Cross-cutting storage concerns (secure\n * storage, indexed-pair storage) intentionally take precedence over\n * `valueType`, and an explicit `ui.component` (radio/select/textarea) takes\n * precedence over the type-derived default. `fileUpload` requires `setValue`\n * because it distributes parsed values across sibling fields.\n */\nexport function resolveFieldInputKind(field: ConfigField, hasSetValue: boolean): FieldInputKind {\n  if (field.ui?.component === 'fileUpload' && field.ui.fileMapping && hasSetValue) {\n    return 'fileUpload';\n  }\n  if (field.target === 'secureJsonData') {\n    return 'secure';\n  }\n  if (field.ui?.component === 'radio') {\n    return 'radio';\n  }\n  if (field.ui?.component === 'select') {\n    return 'select';\n  }\n  if (field.valueType === 'boolean') {\n    return 'boolean';\n  }\n  if (field.valueType === 'number') {\n    return 'number';\n  }\n  if (field.ui?.component === 'textarea') {\n    return 'textarea';\n  }\n  if (field.storage?.type === 'indexedPair') {\n    return 'indexedPair';\n  }\n  if (field.valueType === 'array' && field.item?.valueType === 'string') {\n    return 'stringArray';\n  }\n  if (field.valueType === 'array' && field.item?.valueType === 'object' && field.item.fields?.length) {\n    return 'objectArray';\n  }\n  if (\n    field.valueType === 'object' ||\n    field.valueType === 'map' ||\n    (field.valueType === 'array' && (field.item?.valueType === 'object' || field.item?.valueType === 'map'))\n  ) {\n    return 'complex';\n  }\n  return 'text';\n}\n\n// ── Adapters: map the normalized FieldInputProps onto each leaf component's own API ──\n\n/** Password/token stored in secureJsonData. */\nfunction SecureInput({ field, formField, disabled }: FieldInputProps) {\n  const label = field.label ?? field.key;\n  return (\n    <SecureFieldInput\n      formField={formField}\n      placeholder={field.ui?.placeholder ?? label}\n      disabled={disabled}\n      label={label}\n    />\n  );\n}\n\n/** JSON file upload that distributes parsed keys across sibling fields. */\nfunction FileUploadInput({ field, formField, disabled, setValue }: FieldInputProps) {\n  // Only reachable when setValue exists (see resolveFieldInputKind), but guard anyway.\n  if (!setValue) {\n    return null;\n  }\n  return <FileUploadField field={field} formField={formField} disabled={disabled} setValue={setValue} />;\n}\n\n/** Editable key/value list backed by indexed storage (e.g. HTTP headers). */\nfunction IndexedPairInput({ field, formField, disabled }: FieldInputProps) {\n  const items = Array.isArray(formField.value) ? (formField.value as IndexedPairItem[]) : [];\n  const maxItems =\n    field.validations?.find((v): v is { type: 'itemCount'; max?: number } => v.type === 'itemCount')?.max ?? 10;\n  const itemLabel = field.label?.toLowerCase().replace(/s$/, '') ?? 'header';\n  return (\n    <IndexedPairEditor\n      value={items}\n      onChange={formField.onChange}\n      maxItems={maxItems}\n      disabled={disabled}\n      itemLabel={itemLabel}\n    />\n  );\n}\n\n/** Row-based editor for an array of strings. */\nfunction StringArrayField({ field, formField, disabled }: FieldInputProps) {\n  const label = field.label ?? field.key;\n  return (\n    <StringArrayInput\n      value={Array.isArray(formField.value) ? (formField.value as string[]) : []}\n      onChange={formField.onChange}\n      placeholder={field.ui?.placeholder}\n      disabled={disabled}\n      itemLabel={label.toLowerCase().replace(/s$/, '')}\n    />\n  );\n}\n\n/** Inline editor for an array of objects with defined item fields. */\nfunction ObjectArrayInput({ field, formField, disabled, errorMessage }: FieldInputProps) {\n  return (\n    <ObjectArrayEditor\n      field={field}\n      value={formField.value}\n      onChange={formField.onChange}\n      disabled={disabled}\n      errorMessage={errorMessage}\n    />\n  );\n}\n\n/** Read-only note for complex shapes not editable in the wizard. */\nfunction ComplexInput({ field, formField }: FieldInputProps) {\n  const label = field.label ?? field.key;\n  const count = Array.isArray(formField.value) ? formField.value.length : 0;\n  return <ComplexFieldNote count={count} label={label} />;\n}\n\n/** Registry mapping each resolved kind to its renderer. */\nconst FIELD_INPUTS: Record<FieldInputKind, React.ComponentType<FieldInputProps>> = {\n  fileUpload: FileUploadInput,\n  secure: SecureInput,\n  radio: RadioInput,\n  select: SelectInput,\n  boolean: BooleanInput,\n  number: NumberInput,\n  textarea: TextAreaInput,\n  indexedPair: IndexedPairInput,\n  stringArray: StringArrayField,\n  objectArray: ObjectArrayInput,\n  complex: ComplexInput,\n  text: TextInput,\n};\n\n/**\n * Render the appropriate input for a schema field.\n *\n * Replaces the former `renderFieldInput` switch with a resolver + component\n * registry: each input is an independently testable component, and adding a\n * new input means extending the registry rather than editing a growing\n * conditional.\n */\nexport function FieldInput(props: FieldInputProps) {\n  const kind = resolveFieldInputKind(props.field, props.setValue !== undefined);\n  const Component = FIELD_INPUTS[kind];\n  return <Component {...props} />;\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Controller } from '../../../node_modules/react-hook-form/dist/index.esm.js';
+import { useStyles2, Tooltip, Icon } from '@grafana/ui';
+import { resolveActiveOverride, formKey } from './config.js';
+import { isFieldRequired, buildValidationRules, parseItemErrors } from './fieldUtils.js';
+import { PdcFieldNote } from './inputs/PdcFieldNote.js';
+import { FieldInput } from './FieldInput.js';
+import { getFieldStyles } from './styles.js';
+
+function SchemaField({
+  field,
+  control,
+  errors,
+  disabled,
+  dsUid,
+  watchedValues,
+  fieldById,
+  celContext,
+  setValue
+}) {
+  const styles = useStyles2(getFieldStyles);
+  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, celContext);
+  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 ? undefined : _a.message;
+        const label = (_b = field.label) != null ? _b : field.key;
+        const description = (_c = activeOverride == null ? undefined : activeOverride.description) != null ? _c : field.description;
+        const effectiveField = activeOverride ? {
+          ...field,
+          description,
+          ui: {
+            ...field.ui,
+            placeholder: (_e = activeOverride.placeholder) != null ? _e : (_d = field.ui) == null ? undefined : _d.placeholder
+          }
+        } : field;
+        const isReadOnly = !!(activeOverride == null ? undefined : 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 }, /* @__PURE__ */ React.createElement(
+          FieldInput,
+          {
+            field: effectiveField,
+            formField,
+            disabled: disabled || isReadOnly,
+            errorMessage,
+            setValue
+          }
+        ), errorMessage && !parseItemErrors(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 } from '../../../schema/schema';\nimport { resolveActiveOverride, formKey } from './config';\nimport type { FormValues } from './datasource';\nimport { isFieldRequired, buildValidationRules, parseItemErrors } from './fieldUtils';\nimport { PdcFieldNote } from './inputs/PdcFieldNote';\nimport { FieldInput } from './FieldInput';\nimport { getFieldStyles } from './styles';\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  celContext?: Record<string, unknown>;\n  setValue?: (name: string, value: unknown) => void;\n};\n\nexport function SchemaField({\n  field,\n  control,\n  errors,\n  disabled,\n  dsUid,\n  watchedValues,\n  fieldById,\n  celContext,\n  setValue,\n}: SchemaFieldProps) {\n  const styles = useStyles2(getFieldStyles);\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, celContext);\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              <FieldInput\n                field={effectiveField}\n                formField={formField}\n                disabled={disabled || isReadOnly}\n                errorMessage={errorMessage}\n                setValue={setValue}\n              />\n              {/* Show global error only if it's NOT a per-item error (those render inline) */}\n              {errorMessage && !parseItemErrors(errorMessage) && (\n                <span className={styles.fieldError}>{errorMessage}</span>\n              )}\n            </div>\n          </div>\n        );\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

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 './styles.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 ? undefined : _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 './hooks/useDatasourceConfigForm';\nimport { getTabStyles } from './styles';\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/TabLayout.js

@@ -0,0 +1,155 @@
+import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { useStyles2, Spinner, Icon, Collapse } from '@grafana/ui';
+import { isAuthGroupId } from './config.js';
+import { FetchErrorState, GroupFields, FormFooter } from './layoutParts.js';
+import { SidebarNav } from './SidebarNav.js';
+import { getTabStyles } from './styles.js';
+
+function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  const styles = useStyles2(getTabStyles);
+  const sectionRefs = useRef(/* @__PURE__ */ new Map());
+  const {
+    resolvedGroups,
+    httpHeadersField,
+    handleSubmit,
+    initializing,
+    fetchError,
+    submitting,
+    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(FetchErrorState, { error: fetchError, dsUid, buttonClassName: styles.formButtons }));
+  }
+  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 = Boolean(
+      httpHeadersField && (isAuthGroupId(g.group.id) || 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), /* @__PURE__ */ React.createElement(GroupFields, { group: g, form, dsUid, showAuthHeaders: showHeaders }))
+      )
+    );
+  }), /* @__PURE__ */ React.createElement(
+    FormFooter,
+    {
+      form,
+      schema,
+      dsUid,
+      dsName,
+      onRetest,
+      healthError,
+      renderActions,
+      saveDisabled: submitting,
+      className: styles.formButtons
+    }
+  ))));
+}
+
+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, Icon, Spinner, Collapse } from '@grafana/ui';\nimport type { DatasourceConfigSchema } from '../../../schema/schema';\nimport { isAuthGroupId } from './config';\nimport type { useDatasourceConfigForm } from './hooks/useDatasourceConfigForm';\nimport { GroupFields, FormFooter, FetchErrorState } from './layoutParts';\nimport { SidebarNav, type SectionState } from './SidebarNav';\nimport { getTabStyles } from './styles';\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    httpHeadersField,\n    handleSubmit,\n    initializing,\n    fetchError,\n    submitting,\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        <FetchErrorState error={fetchError} dsUid={dsUid} buttonClassName={styles.formButtons} />\n      </div>\n    );\n  }\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 = Boolean(\n              httpHeadersField &&\n                (isAuthGroupId(g.group.id) ||\n                  g.group.id === 'url-and-auth' ||\n                  g.group.id === '_required' ||\n                  g.group.fieldRefs.includes('httpHeaders'))\n            );\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                    <GroupFields group={g} form={form} dsUid={dsUid} showAuthHeaders={showHeaders} />\n                  </div>\n                </Collapse>\n              </div>\n            );\n          })}\n\n          <FormFooter\n            form={form}\n            schema={schema}\n            dsUid={dsUid}\n            dsName={dsName}\n            onRetest={onRetest}\n            healthError={healthError}\n            renderActions={renderActions}\n            saveDisabled={submitting}\n            className={styles.formButtons}\n          />\n        </form>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAmBgB,SAAA,SAAA,CAAU,EAAE,IAAM,EAAA,MAAA,EAAQ,OAAO,MAAQ,EAAA,QAAA,EAAU,WAAa,EAAA,aAAA,EAAiC,EAAA;AAC/G,EAAM,MAAA,MAAA,GAAS,WAAW,YAAY,CAAA;AACtC,EAAA,MAAM,WAAc,GAAA,MAAA,iBAAwC,IAAA,GAAA,EAAK,CAAA;AAEjE,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACE,GAAA,IAAA;AAGJ,EAAA,MAAM,aAAgB,GAAA,OAAA,CAAQ,MAAM,cAAA,CAAe,OAAO,CAAC,CAAA,KAAM,CAAE,CAAA,KAAA,CAAM,EAAO,KAAA,WAAW,CAAG,EAAA,CAAC,cAAc,CAAC,CAAA;AAG9G,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAsB,MAAM;AAC1E,IAAM,MAAA,QAAA,uBAAe,GAAY,EAAA;AACjC,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,aAAA,CAAc,QAAQ,CAAK,EAAA,EAAA;AAC7C,MAAA,IAAI,CAAC,aAAA,CAAc,CAAC,CAAA,CAAE,MAAM,QAAU,EAAA;AACpC,QAAA,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA;AAChB;AAEF,IAAO,OAAA,QAAA;AAAA,GACR,CAAA;AAGD,EAAM,MAAA,kBAAA,GAAqB,OAAO,KAAK,CAAA;AACvC,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAI,IAAA,YAAA,IAAgB,mBAAmB,OAAS,EAAA;AAC9C,MAAA;AAAA;AAEF,IAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA;AAC7B,IAAA,mBAAA,CAAoB,CAAC,IAAS,KAAA;AAC5B,MAAM,MAAA,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,aAAA,CAAc,QAAQ,CAAK,EAAA,EAAA;AAC7C,QAAA,IAAI,YAAa,CAAA,aAAA,CAAc,CAAC,CAAC,CAAG,EAAA;AAClC,UAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAAA;AACZ;AAEF,MAAO,OAAA,IAAA;AAAA,KACR,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,aAAA,EAAe,YAAY,CAAC,CAAA;AAE9C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AAEpD,EAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,CAAC,KAAkB,KAAA;AACnD,IAAA,mBAAA,CAAoB,CAAC,IAAS,KAAA;AAC5B,MAAM,MAAA,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,MAAI,IAAA,IAAA,CAAK,GAAI,CAAA,KAAK,CAAG,EAAA;AACnB,QAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,OACZ,MAAA;AACL,QAAA,IAAA,CAAK,IAAI,KAAK,CAAA;AAAA;AAEhB,MAAO,OAAA,IAAA;AAAA,KACR,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAAkB,KAAA;AACjB,MAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,MAAA,IAAI,CAAC,gBAAA,CAAiB,GAAI,CAAA,KAAK,CAAG,EAAA;AAChC,QAAoB,mBAAA,CAAA,CAAC,SAAS,IAAI,GAAA,CAAI,IAAI,CAAE,CAAA,GAAA,CAAI,KAAK,CAAC,CAAA;AAAA;AAExD,MAAA,MAAM,EAAK,GAAA,WAAA,CAAY,OAAQ,CAAA,GAAA,CAAI,KAAK,CAAA;AACxC,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,EAAA,CAAG,eAAe,EAAE,QAAA,EAAU,QAAU,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA;AAC1D,KACF;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAGA,EAAM,MAAA,aAAA,GAAgC,QAAQ,MAAM;AAClD,IAAA,OAAO,aAAc,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACjC,MAAA,IAAI,MAAM,aAAe,EAAA;AACvB,QAAO,OAAA,QAAA;AAAA;AAET,MAAI,IAAA,CAAC,YAAa,CAAA,CAAC,CAAG,EAAA;AACpB,QAAO,OAAA,OAAA;AAAA;AAET,MAAI,IAAA,YAAA,CAAa,CAAC,CAAG,EAAA;AACnB,QAAO,OAAA,WAAA;AAAA;AAET,MAAO,OAAA,OAAA;AAAA,KACR,CAAA;AAAA,KACA,CAAC,aAAA,EAAe,aAAe,EAAA,YAAA,EAAc,YAAY,CAAC,CAAA;AAE7D,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,gBACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,MAAA,EAAM,IAAC,EAAA,CAAA,EAAE,8BAC9B,CAAA;AAAA;AAIJ,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,KAAA,EAAO,YAAY,KAAc,EAAA,eAAA,EAAiB,MAAO,CAAA,WAAA,EAAa,CACzF,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,QACpB,UACC,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,2BACpB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,MAAK,IAAK,EAAA,CAAA,sCAClB,MAAK,EAAA,IAAA,EAAA,wBAAiB,CACzB,CAGF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,aAAA;AAAA,MACR,WAAa,EAAA,aAAA;AAAA,MACb,aAAA;AAAA,MACA,QAAU,EAAA;AAAA;AAAA,GACZ,sCAEC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,IACpB,EAAA,EAAA,QAAA,wCACE,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,cACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAK,EAAA,MAAA,EAAO,MAAK,IAAK,EAAA,CAAA,sCAC3B,MAAK,EAAA,IAAA,EAAA,qCAA8B,CACtC,CAGF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,kBAAgB,mCAAiC,CAAA,sCAEvE,MAAK,EAAA,EAAA,QAAA,EAAU,aAAa,QAAQ,CAAA,EAAG,WAAW,MAAO,CAAA,IAAA,EAAA,EACvD,cAAc,GAAI,CAAA,CAAC,GAAG,CAAM,KAAA;AAC3B,IAAA,MAAM,aAAgB,GAAA,CAAA,CAAE,MAAO,CAAA,MAAA,CAAO,cAAc,CAAA;AACpD,IAAA,IAAI,aAAc,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,gBAAkB,EAAA;AACnD,MAAO,OAAA,IAAA;AAAA;AAGT,IAAA,MAAM,WAAc,GAAA,OAAA;AAAA,MAClB,qBACG,aAAc,CAAA,CAAA,CAAE,MAAM,EAAE,CAAA,IACvB,EAAE,KAAM,CAAA,EAAA,KAAO,cACf,IAAA,CAAA,CAAE,MAAM,EAAO,KAAA,WAAA,IACf,EAAE,KAAM,CAAA,SAAA,CAAU,SAAS,aAAa,CAAA;AAAA,KAC9C;AAEA,IAAM,MAAA,YAAA,mBACH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,gCACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,MAAA,CAAO,gBAAmB,EAAA,EAAA,CAAA,CAAE,MAAM,KAAM,CAAA,EACxD,CAAE,CAAA,KAAA,CAAM,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,YAAc,EAAA,EAAA,UAAQ,CACrE,CAAA;AAGF,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,EAAE,KAAM,CAAA,EAAA;AAAA,QACb,GAAA,EAAK,CAAC,EAAO,KAAA;AACX,UAAA,IAAI,EAAI,EAAA;AACN,YAAY,WAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,EAAG,EAAE,CAAA;AAAA;AAC/B,SACF;AAAA,QACA,WAAW,MAAO,CAAA;AAAA,OAAA;AAAA,sBAElB,KAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,MAAA,EAAQ,gBAAiB,CAAA,GAAA,CAAI,CAAC,CAAA;AAAA,UAC9B,WAAW,EAAA,IAAA;AAAA,UACX,UAAU,MAAM;AACd,YAAA,aAAA,CAAc,CAAC,CAAA;AACf,YAAA,gBAAA,CAAiB,CAAC,CAAA;AAAA,WACpB;AAAA,UACA,WAAW,MAAO,CAAA;AAAA,SAAA;AAAA,wBAElB,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,WAAA,EAAA,EACpB,EAAE,KAAM,CAAA,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,sBAAqB,CAAE,CAAA,KAAA,CAAM,WAAY,CAAA,kBACvF,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,CAAA,EAAG,IAAY,EAAA,KAAA,EAAc,eAAiB,EAAA,WAAA,EAAa,CACjF;AAAA;AACF,KACF;AAAA,GAEH,CAED,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAc,EAAA,UAAA;AAAA,MACd,WAAW,MAAO,CAAA;AAAA;AAAA,GAEtB,CACF,CACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,75 @@
+import { evaluate, parse } from '@marcbachmann/cel-js';
+
+const exprCache = /* @__PURE__ */ new Map();
+function getCompiled(expr) {
+  if (exprCache.has(expr)) {
+    return exprCache.get(expr);
+  }
+  try {
+    const compiled = parse(expr);
+    exprCache.set(expr, compiled);
+    return compiled;
+  } catch (e) {
+    exprCache.set(expr, null);
+    return null;
+  }
+}
+function buildCelContext(values) {
+  const ctx = {};
+  for (const [key, value] of Object.entries(values)) {
+    setNestedValue(ctx, key, value);
+  }
+  return ctx;
+}
+function setNestedValue(obj, path, value) {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    if (!(part in current) || typeof current[part] !== "object" || current[part] === null) {
+      current[part] = {};
+    }
+    current = current[part];
+  }
+  current[parts[parts.length - 1]] = value;
+}
+function evaluateCelExpression(expr, context, defaultValue = false) {
+  if (!expr || !expr.trim()) {
+    return defaultValue;
+  }
+  const compiled = getCompiled(expr);
+  if (!compiled) {
+    return defaultValue;
+  }
+  try {
+    const result = compiled(context);
+    return !!result;
+  } catch (e) {
+    return defaultValue;
+  }
+}
+function evaluateCelDirect(expr, context) {
+  return evaluate(expr, context);
+}
+function isValidCelExpression(expr) {
+  try {
+    parse(expr);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function extractFieldRefs(expr) {
+  const matches = expr.matchAll(/([\w.]+)\s*(?:==|!=)/g);
+  const refs = /* @__PURE__ */ new Set();
+  for (const m of matches) {
+    refs.add(m[1]);
+  }
+  return [...refs];
+}
+function clearExpressionCache() {
+  exprCache.clear();
+}
+
+export { buildCelContext, clearExpressionCache, evaluateCelDirect, evaluateCelExpression, extractFieldRefs, isValidCelExpression };
+//# sourceMappingURL=cel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cel.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/cel.ts"],"sourcesContent":["/**\n * CEL (Common Expression Language) expression evaluator for schema conditions.\n *\n * Used by `dependsOn`, `requiredWhen`, `disabledWhen`, and `overrides[].when`.\n * Wraps @marcbachmann/cel-js with field-ID-aware context building.\n *\n * Go equivalent: github.com/google/cel-go\n */\n\nimport { evaluate as celEvaluate, parse as celParse } from '@marcbachmann/cel-js';\n\n// ============================================================\n// Expression cache — parse once, evaluate many times\n// ============================================================\n\ntype CompiledExpr = (ctx: Record<string, unknown>) => unknown;\nconst exprCache = new Map<string, CompiledExpr | null>();\n\nfunction getCompiled(expr: string): CompiledExpr | null {\n  if (exprCache.has(expr)) {\n    return exprCache.get(expr)!;\n  }\n  try {\n    const compiled = celParse(expr);\n    exprCache.set(expr, compiled);\n    return compiled;\n  } catch {\n    exprCache.set(expr, null);\n    return null;\n  }\n}\n\n// ============================================================\n// Context builder — flat field values → nested object for CEL\n// ============================================================\n\n/**\n * Build a nested context object from flat form values keyed by field IDs.\n *\n * CEL interprets dots as property access, so `jsonData.auth_method == 'oauth2'`\n * requires `{ jsonData: { auth_method: 'oauth2' } }`.\n *\n * This function takes flat key-value pairs (from react-hook-form `watch()`)\n * and builds the nested structure CEL expects.\n *\n * @param values - Flat map of form keys to values (e.g. `{ \"auth_method\": \"oauth2\", \"oauth2.oauth2_type\": \"jwt\" }`)\n * @param fieldIdToFormKey - Optional map from field ID to form key for translation\n */\nexport function buildCelContext(values: Record<string, unknown>): Record<string, unknown> {\n  const ctx: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(values)) {\n    setNestedValue(ctx, key, value);\n  }\n\n  return ctx;\n}\n\nfunction setNestedValue(obj: Record<string, unknown>, path: string, value: unknown): void {\n  const parts = path.split('.');\n  let current = obj;\n  for (let i = 0; i < parts.length - 1; i++) {\n    const part = parts[i];\n    if (!(part in current) || typeof current[part] !== 'object' || current[part] === null) {\n      current[part] = {};\n    }\n    current = current[part] as Record<string, unknown>;\n  }\n  current[parts[parts.length - 1]] = value;\n}\n\n// ============================================================\n// Public API\n// ============================================================\n\n/**\n * Evaluate a CEL expression against a context of field values.\n * Returns the boolean result, or `defaultValue` if the expression is invalid.\n *\n * @example\n * ```ts\n * evaluateCelExpression(\"jsonData.auth_method == 'oauth2'\", { jsonData: { auth_method: 'oauth2' } })\n * // => true\n *\n * evaluateCelExpression(\"auth_method == 'oauth2' && oauth2_type == 'jwt'\", { auth_method: 'oauth2', oauth2_type: 'jwt' })\n * // => true\n * ```\n */\nexport function evaluateCelExpression(expr: string, context: Record<string, unknown>, defaultValue = false): boolean {\n  if (!expr || !expr.trim()) {\n    return defaultValue;\n  }\n\n  const compiled = getCompiled(expr);\n  if (!compiled) {\n    return defaultValue;\n  }\n\n  try {\n    const result = compiled(context);\n    return !!result;\n  } catch {\n    return defaultValue;\n  }\n}\n\n/**\n * Evaluate a CEL expression directly using `evaluate` (no caching).\n * Useful for one-off evaluations or testing.\n */\nexport function evaluateCelDirect(expr: string, context: Record<string, unknown>): unknown {\n  return celEvaluate(expr, context);\n}\n\n/**\n * Validate that a CEL expression can be parsed without errors.\n * Returns true if valid, false otherwise.\n */\nexport function isValidCelExpression(expr: string): boolean {\n  try {\n    celParse(expr);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Extract all field ID references from a simple expression.\n * Used by `resolveRequiredFieldsGroup` to find dependency relationships.\n *\n * For simple expressions like `fieldA == 'x'`, returns `['fieldA']`.\n * For compound expressions like `fieldA == 'x' && fieldB == 'y'`, returns `['fieldA', 'fieldB']`.\n *\n * This uses regex extraction (not AST walking) for simplicity and speed.\n */\nexport function extractFieldRefs(expr: string): string[] {\n  // Match identifiers (possibly dotted) that precede == or !=\n  const matches = expr.matchAll(/([\\w.]+)\\s*(?:==|!=)/g);\n  const refs = new Set<string>();\n  for (const m of matches) {\n    refs.add(m[1]);\n  }\n  return [...refs];\n}\n\n/**\n * Clear the expression cache. Useful for testing.\n */\nexport function clearExpressionCache(): void {\n  exprCache.clear();\n}\n"],"names":["celParse","celEvaluate"],"mappings":"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"}