[Alerting v2] Compose Discover: stepped Edit Form flyout with RHF form state

[jasonrhodes]

Summary

Closes #268770

(May close PART of #268771 ??)

Adds ComposeDiscoverFlyout, the stepped Edit Form flyout for v2 rule authoring. This is PR B in a series; PR A (#268739) adds HorizontalMinimalStepper as a foundation.

What's in this PR:

• ComposeDiscoverFlyout component with a 3-step form: Alert Condition → Details & Artifacts → Notifications
• Complete RHF migration: all submitted values (name, tags, schedule, lookback, timeField, grouping, query, delays) live in useForm<FormValues>(); reducer owns only UI state (step, childOpen, yamlMode, queryCommitted, etc.)
• Create mode — wired to useCreateRule mutation; entry point is the new "Create in flyout" button on the rules list (alongside "Create rule" which still navigates to the full-page form)
• Edit mode — wired to useUpdateRule; entry point is the edit icon on any rule row (replaces QuickEditRuleFlyout)
• Discover Sandbox — child flyout with a single ES|QL editor, Lens histogram, and data grid; opens via "Open query editor" / "Edit query" in the Alert Condition step
• YAML preview — toggle in header shows read-only CodeEditor with rule YAML; editing round-trip is deferred
• Reuses RuleDetailsFieldGroup and RuleExecutionFieldGroup from PR [Alerting v2] Add quick edit rule flyout to the rules list #268164

What's NOT in this PR (deferred):

• No Recovery Condition step (PR E)
• No tracking toggle or split-query support
• Notifications step is a placeholder callout
• Runbook URL / Dashboard link are disabled stubs
• Sandbox UI unpolished (redesign in PR C)
• YAML round-trip editing deferred

State architecture

useForm<FormValues>()   ← submitted values: name, tags, schedule, query, timeField, grouping, delays
useReducer(uiReducer)   ← UI only: step, childOpen, fullQuery, yamlMode, queryCommitted, sandboxDateStart/End

One bridge: when the user clicks Apply changes in the Sandbox, a useEffect syncs uiState.fullQuery → setValue('evaluation.query.base', ...). Everything else writes directly to RHF via useFormContext().

---

Test plan

Prerequisites

Start Elasticsearch:

cd ~/__projects__/kibana-dev/pr-b-rhf-form
node scripts/es snapshot --license=trial

Start Kibana (Node 24 required):

export NVM_DIR="$HOME/.nvm" && source "$NVM_DIR/nvm.sh" && nvm use 24
KBN_USE_RSPACK=true yarn start \
  --server.port=5603 \
  --server.basePath=/ifh \
  --server.rewriteBasePath=true

config/kibana.dev.yml:

xpack.alerting_v2.enabled: true
dev.basePathProxyTarget: 5604
mockIdpPlugin.enabled: false

Navigate to: http://localhost:5603/ifh/app/management/alertingV2/rules

---

Create flow

• Click Create in flyout (next to the primary "Create rule" button) — flyout opens in create mode; Discover Sandbox opens alongside it automatically
• Verify 3 steps in the header stepper: Alert Condition, Details & Artifacts, Notifications
• In the Sandbox: type a query (e.g. FROM logs-* | STATS count = COUNT(*) BY host.name | WHERE count > 0), click Search — verify histogram and results grid appear
• Click Apply changes — Sandbox closes; Alert Condition step shows the committed query summary
• Change the Time field dropdown — verify it reflects in the form
• Adjust schedule and lookback via the schedule fields
• Click Next → Details & Artifacts: fill in rule name and tags via the standard field group
• Click Next → Notifications: verify placeholder callout appears (not wired yet — expected)
• Click Create rule — verify rule appears in the list with correct name, tags, and schedule
• Verify the primary Create rule button (filled, left of "Create in flyout") still navigates to the full-page form

Edit flow

• Click the edit (pencil) icon on an existing rule — flyout opens in edit mode, pre-populated with that rule's values
• Modify the rule name in Details & Artifacts
• Click Save rule — verify the rule updates and the change appears in the list

YAML preview

• Toggle YAML mode in the flyout header — stepper collapses; CodeEditor shows read-only rule YAML
• Fill in form fields, toggle YAML mode — verify YAML reflects the current values

Edge cases

• Open the Sandbox, edit the query, close without clicking Apply changes — verify the Alert Condition step still shows the previously committed query
• Verify Next is disabled while the Sandbox is open

[jasonrhodes]

Re UX #7 and #8 (sandbox close + Next while open):

Intentional for now — 'Apply changes' is meant to signal 'I'm done with the Sandbox for this step', so closing it is by design. The Next-while-open restriction flows from the same assumption: if the Sandbox is open, the user is still mid-edit.

The tension Yiannis is pointing out is real. We're tracking a broader question with Joana about whether to move toward a persistent side-by-side layout where the Sandbox content changes per step instead of opening and closing. That would resolve both issues cleanly but needs design sign-off before we commit to it.

One exception already locked in: YAML mode (follow-up in #268772) will NOT close the Sandbox on Apply — noted in the issue AC — because users need to iterate between the query editor and the YAML view.

Leaving current behavior unchanged for this PR.

[jasonrhodes]

Addressing all items from your manual testing review:

Bugs fixed:

1. Edit mode blank query → 9d50ab4: sandbox.query is now seeded from the rule's evaluation.query.base on mount in edit mode. Also renamed fullQuery → sandbox.query across the state to make it clear these are pending/draft values, not committed to RHF until "Apply changes".
2. metadata.tags undefined → 6ea8457: added ?? [] guard in mapMetadata.
3. Group fields no options + no auto-populate → 68c6a0d: options now come from getEsqlColumns (| LIMIT 0 schema fetch) on the committed query — returns the pipeline's output columns, not source index fields. Works in edit mode without opening the sandbox. On first commit, auto-populates from the STATS BY clause using Parser from @elastic/esql.
4. Group fields options prop → same commit.
5. Duplicate result count → d0e117f: removed the redundant count above the grid.
6. injectTimeFilter single-line → e0470e7: see inline comment reply.

UX:
7. Sandbox closes on Apply → intentional for now; see PR comment above for rationale and the YAML mode exception.
8. Next while sandbox open → same.
9. Missing spacer above execution fields → a9c701e: dropped the RuleExecutionFieldGroup wrapper entirely, inlined Schedule and Lookback alongside Time field and Group fields with consistent spacing.

Testing gap (#10): tracked in #268958.

[baileycash-elastic]

Overall the architecture is solid — the RHF + reducer split is well-motivated, the autocomplete provider hoisting is a thoughtful detail, and the paramsRef/execRef pattern in useQueryExecution correctly avoids stale closures. A few things to address:

---

1. Duplicate imports from @kbn/code-editor (nit)

Both compose_discover_child.tsx and query_summary.tsx have:

import { CodeEditor } from '@kbn/code-editor';
import { ESQL_LANG_ID } from '@kbn/code-editor';

These should be one import statement. ESLint's no-duplicate-imports rule normally catches this.

---

2. paths.ruleCreate inlined — minor inconsistency

The "Create rule" button in rules_list_page.tsx now uses:

application.navigateToUrl(http.basePath.prepend('/app/management/alertingV2/rules/create'))

basePath.prepend is correct, but the path string was previously centralised in paths.ruleCreate (still used in rules_list_table_container.tsx for clone and rule_details_actions_menu.tsx). Two places now own the same URL literal. Prefer paths.ruleCreate to keep it consistent with the rest of the file.

---

3. Deleted Scout tests with no replacement or tracking issue — important

quick_edit_rule.spec.ts (136 lines) is deleted. The pencil-icon edit flow now routes through ComposeDiscoverFlyout, which has zero Scout UI coverage. The PR description says "rewriting them is deferred" but there is no linked issue and no placeholder spec file. The old tests were catching real regressions (the existing CI failure on this PR demonstrates that).

Please create a follow-up tracking issue for ComposeDiscoverFlyout Scout test coverage before or alongside merge, and link it in the PR description.

---

4. Inline AstNode type alias inside useEffect — minor

In compose_discover_form.tsx, the auto-populate effect has:

type AstNode = { type: string; name: string; args?: unknown[] };
const byOption = (statsCmd?.args as AstNode[] | undefined)?.find(...)

@elastic/esql likely exports proper AST node types — using those would be safer if the AST shape changes. At minimum the as AstNode[] cast is hiding a type error from the compiler.

---

use_heuristic_split.ts is understood to be a placeholder pending the AST rewrite in #268776 — no issue there.

[yiannisnikolopoulos]

Approving to unblock merge

It turns out that the metadata.tags bug was pre-existing:

tags: metadata.tags ?? [] breaks rule creation when the user doesn't add tags. The API schema makes tags optional but requires .min(1) if present, so sending [] is rejected. Omit the key instead:

...(metadata.tags?.length ? { tags: metadata.tags } : {})

[jasonrhodes]

Approving to unblock merge

It turns out that the metadata.tags bug was pre-existing:

tags: metadata.tags ?? [] breaks rule creation when the user doesn't add tags. The API schema makes tags optional but requires .min(1) if present, so sending [] is rejected. Omit the key instead:

...(metadata.tags?.length ? { tags: metadata.tags } : {})

Oof, I’ll check with core engine team on this but it seems like a strange API design. For now I’ll revert.

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 022356d

Failed CI Steps

• Scout Lane #8 - stateful-classic / default
• Serverless Investigations - Security Solution Cypress Tests #10

Test Failures

• [job] [logs] Scout Lane #8 - stateful-classic / default / local-stateful-classic - Profiling is setup and data is loaded - Admin user

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
alertingVTwo	1006	1016	+10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
alertingVTwo	748.7KB	771.0KB	+22.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
alertingVTwo	44.8KB	44.9KB	+69.0B

History

• 💔 Build #441680 failed 5bd7f2a
• 💛 Build #441611 was flaky 5c62ca1
• 💔 Build #441576 failed d4e4c1d
• 💔 Build #441530 failed 30c743a
• 💔 Build #441074 failed b35db53
• 💔 Build #441060 failed 8d102a1