Skip to content

Commit b05619d

Browse files
flash1293cursoragent
flash1293
and
cursoragent
authored
[Streams] Convert condition editor from JSON to YAML with schema validation (elastic#254445)
## Summary ![Kapture 2026-02-23 at 17 33 50](https://github.com/user-attachments/assets/cc35d0ea-2894-45a2-9dab-ea5e531d554d) Converts the condition editor component in the Streams app to use YAML format instead of JSON, providing inline validation, suggestions, and hover support via Monaco YAML with a schema derived from the condition Zod schema. **Key changes:** - Add `getConditionJsonSchema()` and `getConditionMonacoSchemaConfig()` functions to `@kbn/streamlang` for generating JSON Schema from the `conditionSchema` Zod schema - Create `conditionYamlService` singleton in streams_app for managing monaco-yaml instance with reference counting (supports multiple editors on the same page) - Update `condition_editor.tsx` to use YAML with schema-based validation instead of JSON - Update unit tests to use YAML format (20/20 passing) - Update Scout UI tests to use YAML syntax (12/12 passing) ## Test plan - [ ] Verify condition editor displays YAML format - [ ] Verify inline suggestions appear when typing in the condition editor - [ ] Verify validation errors show for invalid YAML syntax - [ ] Verify hover information appears for condition fields - [ ] Run unit tests: `yarn test:jest x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/condition_editor.test.tsx` - [ ] Run Scout UI tests: `node scripts/scout run-tests --arch stateful --domain classic --config x-pack/platform/plugins/shared/streams_app/test/scout/ui/configs/stateful/classic.config.ts --testFiles x-pack/platform/plugins/shared/streams_app/test/scout/ui/tests/data_management/` Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 806c977 commit b05619d

8 files changed

Lines changed: 330 additions & 130 deletions

File tree

‎x-pack/platform/packages/shared/kbn-streamlang/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@ export * from './src/conditions/condition_to_painless';
2727
export * from './src/transpilers/shared/convert_for_ui';
2828
export * from './src/utilities';
2929
export { ACTION_METADATA_MAP, type ActionMetadata } from './src/actions/action_metadata';
30-
export { getJsonSchemaFromStreamlangSchema } from './src/schema/get_json_schema_from_streamlang_schema';
30+
export {
31+
getJsonSchemaFromStreamlangSchema,
32+
getConditionMonacoSchemaConfig,
33+
} from './src/schema/get_json_schema_from_streamlang_schema';
3134
export * from './src/validation';
3235
export {
3336
validateMathExpression,

‎x-pack/platform/packages/shared/kbn-streamlang/src/schema/get_json_schema_from_streamlang_schema.ts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type { z } from '@kbn/zod';
1515
import { i18n } from '@kbn/i18n';
1616
import { ACTION_METADATA_MAP } from '../actions/action_metadata';
1717
import type { StreamType } from '../../types/streamlang';
18+
import { conditionSchema as conditionZodSchema } from '../../types/conditions';
1819

1920
/**
2021
* JSON Schema scaffold produced from the Streamlang Zod schema. The converter
@@ -998,3 +999,131 @@ function addStepsPropertyToObject(
998999
function deepClone<T = any>(value: T): T {
9991000
return value === undefined ? value : (JSON.parse(JSON.stringify(value)) as T);
10001001
}
1002+
1003+
// ---------------------------------------------------------------------------
1004+
// Standalone condition schema for the condition syntax editor
1005+
// ---------------------------------------------------------------------------
1006+
1007+
/**
1008+
* Get Monaco YAML schema configuration for the standalone condition editor.
1009+
*
1010+
* This generates a JSON Schema from the condition Zod schema and applies
1011+
* the same fixups used for the full Streamlang schema (enum dedup,
1012+
* additionalProperties enforcement) plus condition-specific transforms
1013+
* (anyOf flattening, operator snippets).
1014+
*
1015+
* @returns Schema configuration object for monaco-yaml, or null if generation fails
1016+
*/
1017+
export function getConditionMonacoSchemaConfig(): {
1018+
uri: string;
1019+
fileMatch: string[];
1020+
schema: object;
1021+
} | null {
1022+
try {
1023+
const jsonSchema = zodToJsonSchema(conditionZodSchema, {
1024+
name: 'ConditionSchema',
1025+
target: 'jsonSchema7',
1026+
});
1027+
1028+
const schema = fixConditionSchema(jsonSchema);
1029+
return {
1030+
uri: 'http://elastic.co/schemas/condition.json',
1031+
fileMatch: ['*'],
1032+
schema: schema as object,
1033+
};
1034+
} catch (error) {
1035+
// eslint-disable-next-line no-console
1036+
console.warn('Failed to generate condition JSON schema:', error);
1037+
return null;
1038+
}
1039+
}
1040+
1041+
function fixConditionSchema(schema: any): any {
1042+
let schemaString = JSON.stringify(schema);
1043+
1044+
// Dedup enum values (same fix as the Streamlang schema pipeline)
1045+
schemaString = schemaString.replace(/"enum":\s*\[([^\]]+)\]/g, (match, enumValues) => {
1046+
try {
1047+
const values = JSON.parse(`[${enumValues}]`);
1048+
const uniqueValues = [...new Set(values)];
1049+
return `"enum":${JSON.stringify(uniqueValues)}`;
1050+
} catch (e) {
1051+
return match;
1052+
}
1053+
});
1054+
1055+
// Rewrite internal $refs that point inside the anyOf structure.
1056+
// After flattening the anyOf, eq becomes a direct property so the path changes.
1057+
schemaString = schemaString.replace(
1058+
/#\/definitions\/ConditionSchema\/anyOf\/\d+\/anyOf\/\d+\/properties\/eq/g,
1059+
'#/definitions/ConditionSchema/properties/eq'
1060+
);
1061+
1062+
const fixedSchema = JSON.parse(schemaString);
1063+
fixAdditionalPropertiesInSchema(fixedSchema);
1064+
flattenConditionOneOf(fixedSchema);
1065+
return fixedSchema;
1066+
}
1067+
1068+
/**
1069+
* Flatten the ConditionSchema's anyOf union into a single object with all
1070+
* properties merged. This prevents monaco-yaml from showing redundant "object"
1071+
* entries in autocomplete — only individual property names appear.
1072+
*
1073+
* Snippets are populated by calling `addFilterConditionSnippets` on the
1074+
* variants before flattening, then collecting their `defaultSnippets`.
1075+
*/
1076+
function flattenConditionOneOf(schema: any): void {
1077+
const definitions = schema.definitions || schema.$defs;
1078+
if (!definitions?.ConditionSchema?.anyOf) {
1079+
return;
1080+
}
1081+
1082+
const conditionDef = definitions.ConditionSchema;
1083+
1084+
addFilterConditionSnippets(conditionDef);
1085+
1086+
const excludedProperties = new Set(['always', 'never']);
1087+
const mergedProperties: Record<string, any> = {};
1088+
const mergedSnippets: any[] = [];
1089+
1090+
function collect(node: any): void {
1091+
if (!node || typeof node !== 'object') return;
1092+
if (node.anyOf) {
1093+
node.anyOf.forEach((v: any) => collect(v));
1094+
return;
1095+
}
1096+
if (node.oneOf) {
1097+
node.oneOf.forEach((v: any) => collect(v));
1098+
return;
1099+
}
1100+
if (node.properties) {
1101+
const keys = Object.keys(node.properties);
1102+
if (keys.length === 1 && excludedProperties.has(keys[0])) {
1103+
return;
1104+
}
1105+
for (const [key, value] of Object.entries(node.properties)) {
1106+
if (!mergedProperties[key] && !excludedProperties.has(key)) {
1107+
mergedProperties[key] = value;
1108+
}
1109+
}
1110+
}
1111+
if (Array.isArray(node.defaultSnippets)) {
1112+
mergedSnippets.push(...node.defaultSnippets);
1113+
}
1114+
}
1115+
1116+
collect(conditionDef);
1117+
1118+
const { description } = conditionDef;
1119+
delete conditionDef.anyOf;
1120+
conditionDef.type = 'object';
1121+
conditionDef.properties = mergedProperties;
1122+
conditionDef.additionalProperties = false;
1123+
if (description) {
1124+
conditionDef.description = description;
1125+
}
1126+
if (mergedSnippets.length > 0) {
1127+
conditionDef.defaultSnippets = mergedSnippets;
1128+
}
1129+
}

‎x-pack/platform/plugins/shared/streams_app/public/components/data_management/shared/condition_editor.test.tsx‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
1010
import { I18nProvider } from '@kbn/i18n-react';
1111
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
1212
import userEvent from '@testing-library/user-event';
13+
import yaml from 'yaml';
1314
import type { Condition, FilterCondition } from '@kbn/streamlang';
1415

1516
import { ConditionEditor } from './condition_editor';
@@ -43,6 +44,14 @@ jest.mock('../../../hooks/use_kibana', () => ({
4344
}),
4445
}));
4546

47+
// Mock the condition YAML service
48+
jest.mock('./condition_yaml_service', () => ({
49+
conditionYamlService: {
50+
register: jest.fn().mockResolvedValue(undefined),
51+
release: jest.fn().mockResolvedValue(undefined),
52+
},
53+
}));
54+
4655
const renderWithProviders = (ui: React.ReactElement) => {
4756
return render(<I18nProvider>{ui}</I18nProvider>);
4857
};
@@ -116,7 +125,7 @@ describe('ConditionEditor', () => {
116125
expect(switchButton).toBeDisabled();
117126
});
118127

119-
it('does not call onConditionChange on every keystroke; emits on debounce when JSON is valid', async () => {
128+
it('does not call onConditionChange on every keystroke; emits on debounce when YAML is valid', async () => {
120129
jest.useFakeTimers();
121130
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
122131

@@ -135,7 +144,7 @@ describe('ConditionEditor', () => {
135144
const textarea = screen.getByTestId(
136145
'streamsAppConditionEditorCodeEditor'
137146
) as HTMLTextAreaElement;
138-
const nextValue = JSON.stringify({ field: 'severity_text', eq: 'error' }, null, 2);
147+
const nextValue = yaml.stringify({ field: 'severity_text', eq: 'error' });
139148

140149
fireEvent.change(textarea, { target: { value: nextValue } });
141150
expect(mockOnConditionChange).not.toHaveBeenCalled();
@@ -150,7 +159,7 @@ describe('ConditionEditor', () => {
150159
jest.useRealTimers();
151160
});
152161

153-
it('flushes the last valid JSON immediately on blur', async () => {
162+
it('flushes the last valid YAML immediately on blur', async () => {
154163
jest.useFakeTimers();
155164
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
156165

@@ -169,7 +178,7 @@ describe('ConditionEditor', () => {
169178
const textarea = screen.getByTestId(
170179
'streamsAppConditionEditorCodeEditor'
171180
) as HTMLTextAreaElement;
172-
const nextValue = JSON.stringify({ field: 'severity_text', eq: 'warn' }, null, 2);
181+
const nextValue = yaml.stringify({ field: 'severity_text', eq: 'warn' });
173182

174183
fireEvent.change(textarea, { target: { value: nextValue } });
175184
expect(mockOnConditionChange).not.toHaveBeenCalled();
@@ -227,7 +236,7 @@ describe('ConditionEditor', () => {
227236
const textarea = screen.getByTestId(
228237
'streamsAppConditionEditorCodeEditor'
229238
) as HTMLTextAreaElement;
230-
const nextValue = JSON.stringify({ field: 'severity_text', eq: 'debug' }, null, 2);
239+
const nextValue = yaml.stringify({ field: 'severity_text', eq: 'debug' });
231240

232241
fireEvent.change(textarea, { target: { value: nextValue } });
233242
expect(mockOnConditionChange).not.toHaveBeenCalled();
@@ -259,7 +268,7 @@ describe('ConditionEditor', () => {
259268
).toBeInTheDocument();
260269
});
261270

262-
it('should NOT call onConditionChange when JSON parsing fails in syntax editor', async () => {
271+
it('should NOT call onConditionChange when YAML parsing fails in syntax editor', async () => {
263272
const user = userEvent.setup();
264273
renderWithProviders(
265274
<ConditionEditor
@@ -279,15 +288,15 @@ describe('ConditionEditor', () => {
279288

280289
const codeEditor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
281290

282-
// Clear the editor to simulate empty/invalid JSON
291+
// Clear the editor to simulate empty/invalid YAML
283292
await user.clear(codeEditor);
284293

285-
// Verify onConditionChange was NOT called when JSON is invalid
294+
// Verify onConditionChange was NOT called when YAML is invalid
286295
// This prevents overriding user's partial input while typing
287296
expect(mockOnConditionChange).not.toHaveBeenCalled();
288297
});
289298

290-
it('should NOT call onConditionChange when syntax editor contains invalid JSON', async () => {
299+
it('should NOT call onConditionChange when syntax editor contains invalid YAML', async () => {
291300
const user = userEvent.setup();
292301
renderWithProviders(
293302
<ConditionEditor
@@ -307,16 +316,15 @@ describe('ConditionEditor', () => {
307316

308317
const codeEditor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
309318

310-
// Type invalid JSON
311-
await user.clear(codeEditor);
312-
await user.type(codeEditor, '{{invalid');
319+
// Set invalid YAML via fireEvent.change (userEvent.type has issues with special chars)
320+
fireEvent.change(codeEditor, { target: { value: 'field: [unclosed' } });
313321

314-
// Verify onConditionChange was NOT called when JSON is invalid
322+
// Verify onConditionChange was NOT called when YAML is invalid
315323
// This prevents overriding user's partial input while typing
316324
expect(mockOnConditionChange).not.toHaveBeenCalled();
317325
});
318326

319-
it('should call onConditionChange when syntax editor contains valid JSON', async () => {
327+
it('should call onConditionChange when syntax editor contains valid YAML', async () => {
320328
jest.useFakeTimers();
321329
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
322330
renderWithProviders(
@@ -337,16 +345,16 @@ describe('ConditionEditor', () => {
337345

338346
const codeEditor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
339347

340-
// Set valid JSON via fireEvent.change (userEvent.type types character by character which is problematic)
341-
const validJson = JSON.stringify({ field: 'test', eq: 'value' }, null, 2);
342-
fireEvent.change(codeEditor, { target: { value: validJson } });
348+
// Set valid YAML via fireEvent.change (userEvent.type types character by character which is problematic)
349+
const validYaml = yaml.stringify({ field: 'test', eq: 'value' });
350+
fireEvent.change(codeEditor, { target: { value: validYaml } });
343351

344352
// Wait for debounce to complete
345353
act(() => {
346354
jest.advanceTimersByTime(400);
347355
});
348356

349-
// Verify onConditionChange was called with the parsed JSON
357+
// Verify onConditionChange was called with the parsed YAML
350358
expect(mockOnConditionChange).toHaveBeenCalled();
351359
expect(mockOnConditionChange).toHaveBeenCalledWith({ field: 'test', eq: 'value' });
352360

@@ -481,7 +489,7 @@ describe('ConditionEditor', () => {
481489
});
482490

483491
describe('Validity plumbing', () => {
484-
it('should report invalid JSON without changing the condition', async () => {
492+
it('should report invalid YAML without changing the condition', async () => {
485493
const user = userEvent.setup();
486494
renderWithProviders(
487495
<ConditionEditor
@@ -496,13 +504,13 @@ describe('ConditionEditor', () => {
496504

497505
const editor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
498506
await user.clear(editor);
499-
await user.paste('{');
507+
await user.paste('field: [unclosed');
500508

501509
expect(mockOnConditionChange).not.toHaveBeenCalled();
502510
expect(mockOnValidityChange).toHaveBeenLastCalledWith(false);
503511
});
504512

505-
it('should not clobber local syntax text on rerender while JSON is invalid', async () => {
513+
it('should not clobber local syntax text on rerender while YAML is invalid', async () => {
506514
const user = userEvent.setup();
507515
const { rerender } = renderWithProviders(
508516
<ConditionEditor
@@ -517,7 +525,7 @@ describe('ConditionEditor', () => {
517525

518526
const editor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
519527
await user.clear(editor);
520-
await user.paste('{');
528+
await user.paste('field: [unclosed');
521529

522530
rerender(
523531
<I18nProvider>
@@ -530,10 +538,12 @@ describe('ConditionEditor', () => {
530538
</I18nProvider>
531539
);
532540

533-
expect(screen.getByTestId('streamsAppConditionEditorCodeEditor')).toHaveValue('{');
541+
expect(screen.getByTestId('streamsAppConditionEditorCodeEditor')).toHaveValue(
542+
'field: [unclosed'
543+
);
534544
});
535545

536-
it('should report valid JSON and update condition on parse', async () => {
546+
it('should report valid YAML and update condition on parse', async () => {
537547
jest.useFakeTimers();
538548
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
539549
renderWithProviders(
@@ -549,9 +559,9 @@ describe('ConditionEditor', () => {
549559

550560
const editor = screen.getByTestId('streamsAppConditionEditorCodeEditor');
551561

552-
// Use fireEvent.change to set valid JSON directly
553-
const validJson = '{"field":"severity_text","eq":"warn"}';
554-
fireEvent.change(editor, { target: { value: validJson } });
562+
// Use fireEvent.change to set valid YAML directly
563+
const validYaml = 'field: severity_text\neq: warn\n';
564+
fireEvent.change(editor, { target: { value: validYaml } });
555565

556566
// Wait for debounce to complete
557567
act(() => {

0 commit comments

Comments
 (0)