[Observability:Streams] Child stream input validation

[couvq]

Closes #242254
Closes #243566
Closes https://github.com/elastic/streams-program/issues/623
Closes https://github.com/elastic/observability-error-backlog/issues/318
Closes https://github.com/elastic/observability-error-backlog/issues/319

Description

This PR addresses missing input validation and error handling for the child/fork stream UIs and APIs, as well as a performance bug associated with the child stream input. Below is a summary of the cases this PR handles:

Test case	Result
User tries creating empty child stream	Help text is displayed letting the user know they can't create empty child streams, button is disabled
User tries creating child stream that is longer than 200 characters	Help text is displayed letting the user know they can't create child streams that are longer than 200 characters, button is disabled
User tries creating child stream that contains uppercase characters	An error is displayed letting the user know stream names cannot contain uppercase characters, button is disabled
User tries creating child stream that already exists	An error is displayed letting the user know stream already exists, button is disabled
User tries creating child stream with a dot and the root child does not exist	An error is displayed letting the user know they must create the root child first, button is disabled
User tries creating child stream with a dot and the root child exists	An error is displayed letting the user know they must create the new stream from the root child with a link to the root child stream, button is disabled
User types in a valid stream name	Button is enabled and the user is able to create the stream
(Performance) User types quickly in the input with data present in the data preview	The input should be responsive with no lag

Note about what was causing the performance issue and the fix for it:

• The onChange function passed to the <StreamNameFormRow /> component was being triggered on every key press. The onChange functions passed to the component updated contexts within the routing state machine and since the PreviewPanel component read the entire snapshot of state from the routing state machine, it caused the PreviewTable component to rerender along with all of its preview data, this caused the input to lag as React has to rerender the preview table along with the input and anything else that reads the routing state. I resolved this by having the component hook manage a local state, and debouncing what was passed to the onChange so that it would only get called after 300ms of inactivity. This way only the input is rerendered on key press, with the onChange causing downstream rerendering only after a period of inactivity. Now the input is snappy when typing and the client side validation happens quickly, even when data is rendered in the preview table.

Screen recording (works the same on manual and AI suggestion inputs)

Screen.Recording.2025-12-01.at.2.28.01.PM.mov

[couvq]

/ci

[couvq]

/ci

[couvq]

/ci

[elasticmachine]

Pinging @elastic/obs-onboarding-team (Team:obs-onboarding)

[gbamparop]

Should the Save button on the processor be disabled when the form state is invalid?

[couvq]

Should the Save button on the processor be disabled when the form state is invalid?

@gbamparop I Asked the EUI team about this off thread (slack), I think it would make sense to disable the button here but want to make sure it aligns with any UX patterns they have. I couldn't find anything specific to this use case on the EUI doc site.

[mohamedhamed-ahmed]

Should the Save button on the processor be disabled when the form state is invalid?

I think it makes sense to disable any save or update button when there is a validation error, otherwise we are making a backend call and relying on the backend validation to reject the request. Since we also disable it when there is a . in the name.

[mohamedhamed-ahmed]

I remember we used to display an error message when it exceeds 200 chars, this no longer happens.

[couvq]

I remember we used to display an error message when it exceeds 200 chars, this no longer happens.

I think that is from the maxLength property that was set on the input

kibana/x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/stream_name_form_row.tsx

Line 99 in d2e01dc

maxLength={MAX_NAME_LENGTH - prefix.length}

[mohamedhamed-ahmed]

@couvq Sorry edited your comment instead of quoting it 😅.

I think that is from the maxLength property that was set on the input

We can probably rely on the custom validation we have to show the error message, otherwise the user won't know why no more typing is allowed.

[couvq]

@couvq Sorry edited your comment instead of quoting it 😅.

I think that is from the maxLength property that was set on the input

We can probably rely on the custom validation we have to show the error message, otherwise the user won't know why no more typing is allowed.

Cool that makes sense, I can remove that as part of this change as well 👍. Also the messages are shown as help messages in the current state. Should these be error messages instead?

[mohamedhamed-ahmed]

Also the messages are shown as help messages in the current state. Should these be error messages instead?

I remember I had this discussion with Marco before and we decided on keeping the length messages as help ones not error. Lets keep it this way for now unless the Design team says otherwise

[couvq]

@elasticmachine merge upstream

[rStelmach]

LGTM!
Tested locally and everything works as expected ✨
Left two small nits

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f4fdfe4

Metrics [docs]

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
streams	67	68	+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	1.1MB	1.1MB	+1.7KB

Page load bundle

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

id	before	after	diff
streams	9.2KB	9.3KB	+47.0B

Unknown metric groups

API count

id	before	after	diff
streams	70	71	+1

ESLint disabled line counts

id	before	after	diff
streamsApp	19	20	+1

Total ESLint disabled count

id	before	after	diff
streamsApp	29	30	+1

History

• 💚 Build #370205 succeeded 474d1ef
• 💚 Build #370136 succeeded 8c31752
• 💚 Build #368489 succeeded 1db4d2b
• 💔 Build #367399 failed f5cd49a
• 💔 Build #367357 failed 899da08
• 💔 Build #367205 failed 6615613

[mohamedhamed-ahmed]

@couvq sorry for commenting here after the PR is merged, just came across an issue that seems somehow related. Where empty space child names are allowed, and invalid state for the name is maintained after cancellation. Might be worth checking and opening a separate bug ticket if you managed to reproduce it as well.

Screen.Recording.2025-12-29.at.13.14.47.mov

[couvq]

@couvq sorry for commenting here after the PR is merged, just came across an issue that seems somehow related. Where empty space child names are allowed, and invalid state for the name is maintained after cancellation. Might be worth checking and opening a separate bug ticket if you managed to reproduce it as well.

Screen.Recording.2025-12-29.at.13.14.47.mov

I was able to reproduce as well, I think we need to trim the input value and do an empty check on that. I'll create a bug ticket for it 👍

[couvq]

Looks like there cannot be any spaces, so we could do a check for that as well

Screen.Recording.2026-01-05.at.9.13.36.AM.mov

[couvq]

Follow up issue created here for space issue #247825