feat(entities-plugins,monaco-editor): schema-aware code editor for yaml & datakit by Justineo · Pull Request #2895 · Kong/public-ui-components

Justineo · 2026-01-29T17:33:05Z

Summary

Copilot

Pull request overview

This PR introduces a schema‑aware YAML and Datakit configuration editor, wiring Datakit’s Zod schemas into JSON Schema to power Monaco‑based YAML completions, validation, and smart editing, and unifying strict/compat Datakit config validation between the code editor and flow editor.

Changes:

Refactors Datakit schemas into a shared config-base plus strict/compat wrappers, adds graph‑level validation (graph-validation.ts), and derives JSON Schema (json-schema.ts) to describe plugin/config payloads.
Integrates a custom YAML stack into @kong-ui-public/monaco-editor (schema view, cursor context, completions, smart edits) and plugs it into the Datakit CodeEditor.vue for schema‑aware validation and completions (including reference and property completions).
Replaces js-yaml with yaml across Datakit components, adds plugin‑data and IO indexing utilities for completions, and wires form validation/flow‑editor availability to strict/compat Datakit schema results.

Reviewed changes

Copilot reviewed 43 out of 44 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds `yaml` package lock entries for entities-plugins and monaco-editor consumers.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/strict.ts	Simplifies strict Datakit config schema to reuse `config-base` and layer graph validation on top.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/shared.ts	Removes legacy name/connection validation in favor of new graph validator; keeps shared IO validation helpers.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/plugin-data.ts	Defines Zod schema for the Datakit plugin root payload (including config, scope, and metadata) used for editor JSON Schema generation.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/node-io.ts	Defines IO descriptors for implicit and config nodes, backed by a field index, to validate and suggest connection fields.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/node-field-index.ts	Builds a cached index of allowed input/output fields per node type by walking the generated Datakit JSON Schema.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/json-schema.ts	Converts Datakit Zod schemas (plugin and config) to JSON Schema with stable `$id`s for use by the YAML editor and IO index.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/io-index.ts	Extracts node names/types and dynamic outputs (static nodes and vault) from parsed configs for completion and validation.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/graph-validation.ts	Implements full graph validation (duplicates, unknown nodes/fields, self-loops, cycles, branch constraints, implicit edges).
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/config-base.ts	Centralizes Datakit config/node/resource Zod schemas and exports shared types used by strict/compat modes and UI.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/completion.ts	Defines relaxed config schema variant to drive editor completions while reusing base node schemas.
packages/entities/entities-plugins/src/components/free-form/Datakit/schema/compat.ts	Keeps compat Datakit schema but replaces legacy name/connection checks with the new graph validator in compat mode.
packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/validation.ts	Adds config-graph validation via `validateGraph` on a DatakitConfig built from editor state, integrating with existing error collection.
packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts	Passes a `getConfigNodes` callback into `useValidators` so graph validation can derive a DatakitConfig from state.
packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/CacheField.vue	Switches Redis cache YAML serialization from `js-yaml` to `yaml.stringify` with explicit options (no aliases, YAML 1.1).
packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/modal/EditorMain.vue	Replaces `js-yaml` parsing for examples with `yaml.parseDocument`, adding error checks before loading example configs.
packages/entities/entities-plugins/src/components/free-form/Datakit/config-extractors.ts	Replaces `js-yaml` with `yaml.parseDocument` for deck/KIC config extraction and adds basic error handling on parse failures.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/zod-issue-markers.ts	Maps Zod issues to Monaco marker ranges by correlating Zod paths with YAML AST nodes and fallback heuristics.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/yaml-schema.ts	Exposes Datakit plugin JSON Schema for the Datakit YAML editor.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/yaml-path-index.ts	Builds and queries a YAML AST path index (value, key, parent-key) with utilities to compute Monaco ranges from nodes and offsets.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/yaml-cursor.ts	Locates YAML AST paths based on cursor offsets for simple cursor-aware features.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/schema-context.ts	Resolves JSON Schema context at a YAML path (including unions, allOf, discriminators) to drive higher-level completions.
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/datakit-ref-completions.ts	Provides Datakit-specific completion items for connection references and branch node lists based on IO index (contains a regex bug in the connection-path branch).
packages/entities/entities-plugins/src/components/free-form/Datakit/code-editor/datakit-property-completions.ts	Adds completion for Datakit `property` node values using supported Kong client properties, including `{key}` snippets.
packages/entities/entities-plugins/src/components/free-form/Datakit/DatakitForm.vue	Wires strict/compat Zod validation into form validity, controls flow-editor availability, and routes layout changes/code-editor validation into `onValidityChange`.
packages/entities/entities-plugins/src/components/free-form/Datakit/CodeEditor.vue	Swaps `js-yaml` for `yaml`, adds YAML schema attachment, smart validation with markers (YAML + compat + strict), and emits granular validation events.
packages/entities/entities-plugins/package.json	Adds `yaml` as a dependency for entities-plugins.
packages/core/monaco-editor/vite-plugin/index.ts	Adjusts handling of `customLanguages` to work with copied arrays and updates documentation comments in generated worker code.
packages/core/monaco-editor/vite-plugin/README.md	Updates `customLanguages` docs to describe generic custom languages instead of specifically `monaco-yaml`.
packages/core/monaco-editor/src/yaml/types.ts	Defines shared YAML types: schema, style, completion options, cursor context, and extension interfaces for YAML completions.
packages/core/monaco-editor/src/yaml/suggest.ts	Adds a suggestion trigger helper and global command for YAML smart completions, consulting model-specific config.
packages/core/monaco-editor/src/yaml/smart-edits.ts	Implements schema-aware smart edits for YAML (colon/enter/dash behavior, indentation, and auto-triggered completions).
packages/core/monaco-editor/src/yaml/schema.ts	Implements JSON Schema traversal utilities for determining kind, resolving unions/allOf, discriminators, and object property views.
packages/core/monaco-editor/src/yaml/registry.ts	Maintains per-model YAML config (schema, completion, style, extensions) and tracks model-to-editor mapping.
packages/core/monaco-editor/src/yaml/index.ts	Public entry for YAML support: registers completion provider, attaches schema/config per model, and wires smart edits + command.
packages/core/monaco-editor/src/yaml/doc-cache.ts	Caches parsed YAML documents per Monaco model/version to avoid redundant parses.
packages/core/monaco-editor/src/yaml/context.ts	Derives a rich cursor context (paths, slot, prefix, indentation) from the YAML AST and document text.
packages/core/monaco-editor/src/yaml/constants.ts	Defines the command ID used to trigger YAML suggestions.
packages/core/monaco-editor/src/yaml/completion.ts	Core YAML completion provider that combines schema-derived key/value completions with extension results and de-duplicates suggestions.
packages/core/monaco-editor/src/types/index.ts	Extends `UseMonacoEditorOptions` with an optional `modelUri` used to bind models to schemas.
packages/core/monaco-editor/src/index.ts	Re-exports YAML helper APIs alongside the core Monaco editor exports.
packages/core/monaco-editor/src/composables/useMonacoEditor.ts	Allows callers to specify a `modelUri` when creating the model, enabling stable URIs for schema attachment.
packages/core/monaco-editor/src/components/MonacoEditor.vue	Accepts and forwards a `modelUri` prop to `useMonacoEditor` so callers can control model URIs from Vue.
packages/core/monaco-editor/package.json	Adds `yaml` as a dependency for the monaco-editor package.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-29T17:39:31Z

...ies/entities-plugins/src/components/free-form/Datakit/code-editor/datakit-ref-completions.ts

+    const wantsSource = slot === 'input' || slot === 'inputs'
+
+    const linePrefix = model.getLineContent(position.lineNumber).slice(0, position.column - 1)
+    if (/\\.[A-Za-z0-9_-]*$/.test(linePrefix)) {


The regex here is written as /\\.[A-Za-z0-9_-]*$/, which matches a literal backslash followed by any character, not a dot-prefixed field name as intended. This means we may incorrectly fall back to node-name suggestions even when the user has typed nodeName.<field>, instead of suppressing them. Updating the pattern to /\.[A-Za-z0-9_-]*$/ will correctly detect a trailing . and field fragment.

Suggested change

if (/\\.[A-Za-z0-9_-]*$/.test(linePrefix)) {

if (/\.[A-Za-z0-9_-]*$/.test(linePrefix)) {

Copilot · 2026-01-29T17:39:31Z

packages/core/monaco-editor/src/yaml/context.ts

+      const keyPathAtPrev = indexes.keyLineIndex.get(prevLine)
+      const seqPathAtPrev = indexes.seqLineIndex.get(prevLine)
+
+      if (!keyPath && !valuePath && prevIndent > lineIndent.length) {


This negation always evaluates to true.

Suggested change

if (!keyPath && !valuePath && prevIndent > lineIndent.length) {

if (!valuePath && prevIndent > lineIndent.length) {

kongponents-bot · 2026-01-30T05:36:55Z

🔴 PR audit failed. 🔴

🔥 No test coverage detected.

This PR does not include any test coverage changes, but it modifies source code. Please add appropriate tests to cover the changes made in this PR.

If you believe this is a false positive or if there are valid reasons for not including test coverage changes, please request an exemption by adding the test-coverage-exempt label to the PR and ensure it is approved by one of those managers jillztom, nateslo, erichsend, lahabana, hangrao, ryanmoore, elen4, DaniellaFreese, mfollett, ValeryG.

kongponents-bot · 2026-01-30T05:42:35Z

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/monaco-editor@pr-2895
@kong-ui-public/entities-shared@pr-2895
@kong-ui-public/dashboard-renderer@pr-2895
@kong-ui-public/documentation@pr-2895
@kong-ui-public/forms@pr-2895
@kong-ui-public/entities-certificates@pr-2895
@kong-ui-public/entities-consumer-credentials@pr-2895
@kong-ui-public/entities-consumer-groups@pr-2895
@kong-ui-public/entities-consumers@pr-2895
@kong-ui-public/entities-data-plane-nodes@pr-2895
@kong-ui-public/entities-gateway-services@pr-2895
@kong-ui-public/entities-key-sets@pr-2895
@kong-ui-public/entities-keys@pr-2895
@kong-ui-public/entities-snis@pr-2895
@kong-ui-public/entities-upstreams-targets@pr-2895
@kong-ui-public/entities-vaults@pr-2895
@kong-ui-public/expressions@pr-2895
@kong-ui-public/entities-redis-configurations@pr-2895
@kong-ui-public/entities-routes@pr-2895
@kong-ui-public/entities-plugins@pr-2895

Copilot AI review requested due to automatic review settings January 29, 2026 17:33

Justineo requested review from a team and kongponents-bot as code owners January 29, 2026 17:33

github-actions bot assigned Justineo Jan 29, 2026

Copilot started reviewing on behalf of Justineo January 29, 2026 17:33 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

Justineo added 10 commits January 30, 2026 10:24

feat(entities-plugins): zod validation for Datakit code editor

4c33ba6

feat: improve datakit yaml completion

8341872

chore: backup yaml completion state

7088684

feat: improve yaml completions and datakit property hints

7ea38ba

fix: improve yaml completion context and schema handling

7044d3f

fix: resolve yaml editor lint issues

492bbe1

fix: improve yaml completion and datakit schema

2f37b3f

fix: trim datakit plugin completion scopes

b1d5c1b

fix: fix lint in yaml completion

9841d91

fix(monaco-editor): increase error limit

03b9a4a

Justineo force-pushed the feat/datakit-code-zod branch from 95d1626 to 03b9a4a Compare January 30, 2026 02:26

fix: enhance plugin form styling and add raw_body to CallNodeSchema

e048db9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(entities-plugins,monaco-editor): schema-aware code editor for yaml & datakit#2895

feat(entities-plugins,monaco-editor): schema-aware code editor for yaml & datakit#2895
Justineo wants to merge 11 commits intomainfrom
feat/datakit-code-zod

Justineo commented Jan 29, 2026 •

edited by atlassian bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

kongponents-bot commented Jan 30, 2026

Uh oh!

kongponents-bot commented Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	if (/\\.[A-Za-z0-9_-]*$/.test(linePrefix)) {
	if (/\.[A-Za-z0-9_-]*$/.test(linePrefix)) {

	if (!keyPath && !valuePath && prevIndent > lineIndent.length) {
	if (!valuePath && prevIndent > lineIndent.length) {

Conversation

Justineo commented Jan 29, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

kongponents-bot commented Jan 30, 2026

🔴 PR audit failed. 🔴

🔥 No test coverage detected.

Uh oh!

kongponents-bot commented Jan 30, 2026

Preview components from this PR in consuming application

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Justineo commented Jan 29, 2026 •

edited by atlassian bot

Loading