[Streams] [Streamlang] Enable nested conditionals in the UI

[Kerry350]

Summary

Closes https://github.com/elastic/streams-program/issues/445

This PR adds support for nested conditionals (nested where blocks in Streamlang DSL) to the processing UI. There have been architectural changes to the state machines, and UI changes to match the Figma designs.

States

There are quite a lot of states within the UI, I've tried to capture the majority of them here. Also be mindful of UX additions such as scrolling newly added steps into view.

Screenshots

On the way

• Existing Scout tests are still being updated (this doesn't need to block reviews)
• Update Scout tests to cover new features
• Copy needs review

[tonyghiani]

Made a first pass on the functionalities and still have to check the edge cases, but overall looks great!

I found some small things that need fixes/adjustments:

• When the user does not have enough privileges, "Create your first step" is correctly disabled, but no tooltip exists, as it used to be for the previous create button. Can we restore that tooltip on button hover in this scenario?
• Condition editor is already failing before being really touched, this should ideally trigger the error when clicking the “Create condition” button if the condition is invalid.

Screen.Recording.2025-09-16.at.11.16.50.mov

• The delete processor button should be less prominent by the linked design, it should be left-aligned and take only the minimum space.

• When deleting a staged processor, the simulation does not update anymore and keep the previous state with the parsed fields.

Screen.Recording.2025-09-16.at.11.26.16.mov

• In alignment with design, it would be great to add the thin border around step panels to make them more distinguished on bright screens.

Before	After

[flash1293]

If the condition preview is too long, it destroys the layout:

It seems like I can't reorder the blocks at all? That seems too much - I know we said reordering across layers is not important, but I don't think we can't take away reordering all together. Was this discussed?

Does not have to addressed on this PR

Some things that stood out to me - don't have to be addressed right now, but probably worth discussing / noting down for later.

When using conditionals, we still always calculate the grok preview clientside, even though it's not applied to all samples:

We should probably do something about it, but I'm not sure what. I don't like the idea of also simulating the conditional logic client side, that seems like a slippery slope. Maybe we can check whether the processor ran and use that to enable/disable the client side preview or something like that?

Delete button gets very big - does this make sense?

Every action (adding a processor/condition, editing a processor/condition, deleting a processor/condition) is two clicks away - this feels cumbersome, why don't we give the user these buttons directly? In practice this will speed up editing by a lot:

[Kerry350]

@tonyghiani Thanks for the review 👌

When the user does not have enough privileges, "Create your first step" is correctly disabled, but no tooltip exists, as it used to be for the previous create button. Can we restore that tooltip on button hover in this scenario?

Good catch, I'll bring back the tooltip.

Condition editor is already failing before being really touched, this should ideally trigger the error when clicking the “Create condition” button if the condition is invalid.

That's fair, I'll change the UX there.  ✅

The delete processor button should be less prominent by the linked design, it should be left-aligned and take only the minimum space.

Hmm, yeah, the processor one was full length at one point, it's predominantly condition edit states modelled in the designs. I'll change it. ✅

When deleting a staged processor, the simulation does not update anymore and keep the previous state with the parsed fields.

Will look into that one. ✅

In alignment with design, it would be great to add the thin border around step panels to make them more distinguished on bright screens.

Agreed, will change that 👍 ✅

@flash1293

If the condition preview is too long, it destroys the layout

Thought I'd added truncation everywhere it was needed, I'll fix it. ✅

Removed the text truncation component as it doesn't fulfill our needs. Used the suggestions here.

It seems like I can't reorder the blocks at all? That seems too much - I know we said reordering across layers is not important, but I don't think we can't take away reordering all together. Was this discussed?

Yeah, this was discussed in one of the sync meetings with Shay, Dima etc. The takeaway was that if we can't do it right (waiting for the new DnD from EUI) then just remove it.

When using conditionals, we still always calculate the grok preview clientside, even though it's not applied to all samples

Yeah, probably needs addressing in a followup. Will have a think through solutions.

Delete button gets very big - does this make sense?

Yeah, same as Marco's feedback, something that changed over time. ✅

Every action (adding a processor/condition, editing a processor/condition, deleting a processor/condition) is two clicks away - this feels cumbersome, why don't we give the user these buttons directly? In practice this will speed up editing by a lot

I think this was just a case of trying to provide maximum real estate to summaries etc. @boriskirov what do you think?

[tonyghiani]

Finished a first round on the code as well, it was a very nice read 👏
I left minor nits around, no major blockers, let me know if you have any question!

[Kerry350]

@tonyghiani Thanks for the thorough reviewing 🙏

I think everything is addressed now. I've updated #232322 (comment) with ✅ statuses and notes. And addressed the inline feedback. Just a couple of notes:

When the user does not have enough privileges, "Create your first step" is correctly disabled, but no tooltip exists, as it used to be for the previous create button. Can we restore that tooltip on button hover in this scenario?

Left this for now because, unless I'm missing something, this is no different to main. We show an insufficient privileges tooltip for the save button in the management bar, but the add processor button is just disabled.

It might make sense to make these functions (addCondition, addProcessor) take a single object with the params it takes, having it like this and having to pass undefined makes it a bit difficult to follow on.

I'll take a look in a followup. I really just wanted to keep the UI properties and the "pure" definition separate.

Copy amendments can come in a followup.

Scout test expansion can also come in a followup.

I'm very cognizant of the fact this is blocking several issues also targeted at 9.2, so let me know if there's anything left you see as a blocker 👌

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a3a488f

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
streamsApp	660	676	+16

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/streamlang	160	189	+29

Any counts in public APIs

Total count of every any typed public API. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats any for more detailed information.

id	before	after	diff
@kbn/streamlang	11	12	+1

Async chunks

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

id	before	after	diff
streamsApp	693.0KB	709.7KB	+16.7KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
@kbn/streamlang	2	3	+1

Unknown metric groups

API count

id	before	after	diff
@kbn/streamlang	173	202	+29

ESLint disabled in files

id	before	after	diff
streamsApp	12	11	-1

ESLint disabled line counts

id	before	after	diff
streamsApp	10	12	+2

Total ESLint disabled count

id	before	after	diff
streamsApp	22	23	+1

History

• 💚 Build #339670 succeeded cc9e397
• 💔 Build #339288 failed fb34199
• 💔 Build #339001 failed 788f107
• 💔 Build #338995 failed a287ae4
• 💔 Build #338953 failed 773a0f3
• 💔 Build #338561 failed daf1811

cc @Kerry350

[tonyghiani]

Thanks for addressing the changes! The only issue I still found was switching branches. I got the following issue:

Hopefully, is just a local error to me, but could you please double-check if we get any error on the following workflow:

• Start a fresh ES cluster from main branch and create a stream.
• Add some processing using the old UI.
• Switch to your PR branch
• Check everything is restored in the right state and there are no validation errors.

[Kerry350]

@tonyghiani I can't seem to replicate with a totally fresh setup going that way (main to my branch). It was possible to hit this state going from my branch -> main before this commit: a3a488f as I was accidentally persisting the custom identifiers and main doesn't have that in the Zod schema.

[tonyghiani]

It was possible to hit this state going from my branch -> main before this commit: a3a488f as I was accidentally persisting the custom identifiers and main doesn't have that in the Zod schema.

That's what happened then, cause I switched and didn't have the latest commits yet, thanks for validating!

[tonyghiani]

It looks good to me, thanks for this incredible piece of work! 👏
The follow-ups are defined, please double-check with @flash1293 if he has any other concern/comment before merging, as we reviewed this in parallel.

[florent-leborgne]

Copy/API docs LGTM!