[Streams 🌊] Prevent stream partition names from messing up required hierarchy prefix (#241158)

Closes [#576](elastic/streams-program#576)

## Summary

When partitioning a wired stream, each partition has restrictions in
their name by which they must keep the name of their parent partition(s)
keeping the hierarchy separated by dots in each level.

While server-side the restriction is properly enforced, the input we're
rendering at UI level does not enforce this restriction. Instead it
allows users to alter and/or remove the required prefix. Even if an
error message will be presented should the name not meet the
requirements, it still isn't an ideal UX given the input does allow you
to alter the prefix without clearly stating it shouldn't be modified.

This PR introduces some fixes to address the issue

## UI
### Partition Creation
During creation, the stream name input has now been split into 2
sections. The fixed prefix part of the partition name is now rendered in
a prepend section for the input, making it non editable. The child part
of the name remains as a regular text input allowing users to name the
new partition however they wish to, but keeping the prefix restrictions.



https://github.com/user-attachments/assets/cbf6df0f-47ee-4959-ad6b-a77da78605a4


### Partition Update
During update, editing the name is not allowed. However, to keep visual
consistency, the prefix will still be separated and rendered as a
prepend. The input will not be editable, but it has been updated from
using `disabled` into using `readOnly`.

<img width="1000" height="411" alt="Screenshot 2025-10-29 at 16 20 31"
src="https://github.com/user-attachments/assets/660f22fd-550c-463c-b9a4-d5b219ce361c"
/>

## Gotchas
### Prefix Truncation
Given the nesting nature of partitions, the prefix can become too long
to be fully render while keeping enough space for the partition name
input. Generally, we try to render at most 25 prefix characters.
Anything above that will be truncated. In the case of narrow screens,
the prefix prepend will never be larger than half the total size of the
stream name input, regardless of characters, so anything that doesn't
fit in this limitation will also be truncated.

<img width="993" height="416" alt="Screenshot 2025-10-29 at 16 26 14"
src="https://github.com/user-attachments/assets/2a4d910a-7fd2-4614-ab40-b6ae2e05d56f"
/>

### Invalid partition names
As we've seen before, each partition is composed of a prefix with the
name of it's ancestor streams plus the partition name itself. The way we
handle nesting in the prefix is by separating each partition name from
it's predecessors with a dot. These dots are added automatically by the
system when creating partitions and the hierarchy *must* be kept in the
name, otherwise the backend will reject the partition creation.

At UI level, we didn't enforce this restriction before which could lead
users to attempt to create a partition with dots on the name, only to be
met with an error description that can be confusing.

<img width="333" height="208" alt="Screenshot 2025-10-30 at 17 02 05"
src="https://github.com/user-attachments/assets/8382b474-ed68-4ca0-b778-79799b2b55af"
/>

Notice how the error states that the parent stream and a dot must be
included, which the name `log.child.child` name does satisfy. At no
point is it explicit that partition names cannot contain dots

Instead on relaying on the server side error, this PR introduces
validation at UI level in order to display a user friendly error message
letting them know that dots cannot be used in partition names.

<img width="993" height="431" alt="Screenshot 2025-10-30 at 16 54 28"
src="https://github.com/user-attachments/assets/c9ba3144-fc9f-4b6c-b5f1-3ec1aa103b2a"
/>

Author: AlejandroFrndz

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

@@ -30,7 +30,7 @@ export function EditRoutingStreamEntry({
       data-test-subj={`routingRule-${routingRule.destination}`}
     >
       <EuiFlexGroup direction="column" gutterSize="m">
-        <StreamNameFormRow value={routingRule.destination} disabled />
+        <StreamNameFormRow value={routingRule.destination} readOnly />
         <RoutingConditionEditor
           condition={routingRule.where}
           status={routingRule.status}

x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/state_management/stream_routing_state_machine/stream_routing_state_machine.ts

@@ -8,7 +8,7 @@ import type { MachineImplementationsFrom, ActorRefFrom } from 'xstate5';
 import { assign, and, enqueueActions, setup, sendTo, assertEvent } from 'xstate5';
 import { getPlaceholderFor } from '@kbn/xstate-utils';
 import type { Streams } from '@kbn/streams-schema';
-import { isSchema, routingDefinitionListSchema } from '@kbn/streams-schema';
+import { isChildOf, isSchema, routingDefinitionListSchema } from '@kbn/streams-schema';
 import { ALWAYS_CONDITION } from '@kbn/streamlang';
 import type { RoutingDefinition } from '@kbn/streams-schema';
 import type {
@@ -107,7 +107,7 @@ export const streamRoutingMachine = setup({
     })),
   },
   guards: {
-    canForkStream: and(['hasManagePrivileges', 'isValidRouting']),
+    canForkStream: and(['hasManagePrivileges', 'isValidRouting', 'isValidChild']),
     canReorderRules: and(['hasManagePrivileges', 'hasMultipleRoutingRules']),
     canUpdateStream: and(['hasManagePrivileges', 'isValidRouting']),
     hasMultipleRoutingRules: ({ context }) => context.routing.length > 1,
@@ -116,6 +116,12 @@ export const streamRoutingMachine = setup({
     isAlreadyEditing: ({ context }, params: { id: string }) => context.currentRuleId === params.id,
     isValidRouting: ({ context }) =>
       isSchema(routingDefinitionListSchema, context.routing.map(routingConverter.toAPIDefinition)),
+    isValidChild: ({ context }) => {
+      const currentRule = selectCurrentRule(context);
+      const currentStream = context.definition.stream;
+
+      return isChildOf(currentStream.name, currentRule.destination);
+    },
   },
 }).createMachine({
   /** @xstate-layout N4IgpgJg5mDOIC5QCcD2BXALgSwHZQGVNkwBDAWwDo9sdSAbbALzygGIBtABgF1FQADqli1sqXPxAAPRACZZATkoA2AIwAWABwL1sgKybZG1bIA0IAJ6IAzKr2V1XLgs3WA7Jq7uFb5QF8-czQsViISCkpwiAs2WGIyKhIAYzBsADdIbj4kECERHHFJGQRVBS5ZSh9y8uU9PWtrPTdzKwRZdWVKTWVZQz0FOx7ZNz0AoIwcfDCEyLJo6gh6MDZgyagAJXQlyiTwzDAsyTzRQpzi9V1KPWUFAe1Pa2UevRbEVVLOrmv39W9DdTGIFWoXiESiFgWSxWE1Ym22kFohxyxwKEjONk09lkQ00vgMei4yk0rxKhK4lDcdzc1gGqlqdkBwKmoMScwh2EWyyZGy2YFmqGQEDAyCRgmEJzRoGKAFpVNYuuo3HYdKpCQplE5iZY3rIuOpKIpugomnpdN0AYEgTDmeFWaR5rsyGsAHJgADucL5SQAFqR8KxoSF8J6dn6UvRRblxaiim8vJouho9HLNJjk8p1CSbhUCXTGj51WprIzrYQWbN7RDHaQXe6Qz6-VAA9z6778AdeEdo2JJdI3o8lNZ1Ap3Lj2t0ta0iRVbCPDO9rJ4TCWg2XbRWHXtWK6Pbydm2m-hA2sQwjMJGUT3YyUMzm9L1hh03PpVCTKaoHNcDI0NNiRyu1mmME2R2Ld8B3VtG2bUsQwAMwFABrC9u1OKU41+FRHBpW5qWUIdM21Uk9QpDV500Ewbn-S1uSAu1Nydbc6z3eDkAQgMIHEPk8DSVAEL5FiENogBBJJMAFZD8ivdEEGpD8enKNxFMcZ8BjfYdKBpJpFEJG4mlUACQXXcFQIY8CmO2ASA2FNBkEoAR6BrFiqAE4TRPEztkRQ3tilVHwHGpLRVBGWx3jMQjtHsJofFqU03EVTQLXGVdaI3CEz1hPcG39I8W0yvYO2yMVJNQvsSkaTolQ8Wd3gSkcSVC-UPF1OpFRcPVi2o0sUuM9Lg0yg9oNXeswzACMPKKiVr0MeVXD1dV3D0lx6tNckOgUXUjC+dp5AMm0Zh6iBRD67YssPdhcpOg8Cq7YrvLeNxnEoPUCWxZQ4sVRd6rehMLmfDQuA8e9Rk65LywOo6eUuqCcpgvczwkybpLsIwHFUWbzX0Wd6pChwCwUh7XCaXa132kDeshr0Bphoa4cO89VEKqNbuvIKOieoldB6X5+n0erfiUfouA0dx3jnNxie6sm6YyqHsvO2HthIchUAyBGYyRoLOkcbp3Cedb1HqPn2hUP8Ae2g2EolsGpYhyC5ePGW+VgUhVfGpnEbQkoPgNXodF6AxdEeerfHJVVuiFgHbhMcWQcA63K0ocmQyVlXHbYDjcC43AeL4yghSWfZXLEkU3cvErikaNwunI-n4rUIKXkIkwLie75hcpf4raMm2Tz3FO0jT6yBTshzMCcvPRrAQuWRE4u1akz2TEUfy6gDnRasnN56i12bCXkWRGkMLvSYTpO93QAQIBrNOM6znO+Qv2BhUwIv3MZsu7oQSuDSCw+LnKRUFxg76EoHYU0Pg6RaHXsfYCp9pbHQfpfa+CC2BD1svZRyAoqCP2fq-Eu78vIs3kAmciGhfB-SGF9IcVxGh6QzN8PUMC6IQhIAKIUyBHawH5IKYUg1e6KzAGw4U89y79h6D7awAMCRaCHAoEkzVyRxV-v0OUdJ9Kx0MifeYrCeEcIQVwnR7C+GO1DLgcMIjP4Eh+joY0NIYqmkbq0XUQUnoAIaLoAGHQmGpW4UY-RvjeHU34U7F211PLMyRl8ckTxhw6BuAlRQyh5ENCrpRcoi40Z4UYRovasDtGCN0ZwygF8r5x1tOnTi1Bs68UQU-ZAL8Z5uXwTdD2pVA5XHXs+A+9Rky-HkUYTopR1ClEeIqL43jjKGMCRTLhJTkEkwoKg5ANkR6YOQNggQdSGm2lnm-Fp6tF6qnJLqDwHclRAMIvIR6AwMkJSVO4AIlpcCoCFPAHINEWT7IXqVWUj07nKmGWqDUr4m4t3oWUDwPhXDWHaN4mgdBGAsHwF80RbQ6RdCeEYIKQVPDDmsMkioSYyg3LRnmYGSUylaNaBNA5Py1AKiVP0QFNxgUkkXFXWcjgfAjHvOMnJCzmGQjACiz++glBqjuG1R4zwSQJQTD0P6DR1TkRjhSzReSqxgSgBBXkIrrxKnJF8LQwx9CeF6CSe8H5yIjluPoYZosJkgWrLWXcsszp6qRv7BwQxKTbVxORWVGgHANB+KmLa6i1W5MFc6xirr+KIVYB6z2IwExGsMM+Aw5RN4IG0PKOoeELiY2-AoR1cDba6vCa04oNwq4G3Ws+fM1I5FN01v5bmdqPH+H5ZLMtwT9zQygEm0qdJ5AaV9QYXwBtxzLRHBpGxdR1QE1VVaUG3de0mP7o7IdxQRgVCqvXOVcU9TY1VJUd6e94wDFLfMM+2w5nBO3YgOK9g60msbTSYOjwVBcExPofQ1JTSaGvSwgpfiZmPoQLpCkcVfC-qFsMfFTd5oGmGcaHl7hhyyGAwEvRMycOJsrbSnyki80UUUC4GkQ4kmXLId6-ouIyjOEkeSldlKNX4f8fe9V5AINxXlEpWDvLo6IacScroZR3AwphZSU0jy-BAA */

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

@@ -6,33 +6,64 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiFieldText,
+  EuiIcon,
+  EuiFormLabel,
+  EuiScreenReaderOnly,
+  EuiTextTruncate,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+import { useStreamsRoutingSelector } from './state_management/stream_routing_state_machine';
 
 interface StreamNameFormRowProps {
   value: string;
   onChange?: (value: string) => void;
-  disabled?: boolean;
+  readOnly?: boolean;
   autoFocus?: boolean;
 }
 
 const MAX_NAME_LENGTH = 200;
+const PREFIX_MAX_VISIBLE_CHARACTERS = 25;
 
 export function StreamNameFormRow({
   value,
   onChange = () => {},
-  disabled = false,
+  readOnly = false,
   autoFocus = false,
 }: StreamNameFormRowProps) {
+  const descriptionId = useGeneratedHtmlId();
+
+  const parentStreamName = useStreamsRoutingSelector((snapshot) => snapshot.context.definition)
+    .stream.name;
+
+  const prefix = parentStreamName + '.';
+  const partitionName = value.replace(prefix, '');
+
   const helpText =
-    value.length >= MAX_NAME_LENGTH && !disabled
+    value.length >= MAX_NAME_LENGTH && !readOnly
       ? i18n.translate('xpack.streams.streamDetailRouting.nameHelpText', {
           defaultMessage: `Stream name cannot be longer than {maxLength} characters.`,
           values: {
             maxLength: MAX_NAME_LENGTH,
           },
         })
       : undefined;
+  const isInvalid = !readOnly && partitionName.includes('.');
+  const errorMessage = isInvalid
+    ? i18n.translate('xpack.streams.streamDetailRouting.nameContainsDotErrorMessage', {
+        defaultMessage: `Stream name cannot contain the "." character.`,
+      })
+    : undefined;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newPartitionName = e.target.value;
+
+    onChange(`${prefix}${newPartitionName}`);
+  };
 
   return (
     <EuiFormRow
@@ -41,16 +72,38 @@ export function StreamNameFormRow({
         defaultMessage: 'Stream name',
       })}
       helpText={helpText}
+      describedByIds={[descriptionId]}
+      isInvalid={isInvalid}
+      error={errorMessage}
     >
       <EuiFieldText
+        isInvalid={isInvalid}
         data-test-subj="streamsAppRoutingStreamEntryNameField"
-        value={value}
+        value={partitionName}
         fullWidth
         compressed
-        disabled={disabled}
+        readOnly={readOnly}
         autoFocus={autoFocus}
-        onChange={(e) => onChange(e.target.value)}
-        maxLength={200}
+        onChange={handleChange}
+        maxLength={MAX_NAME_LENGTH - prefix.length}
+        prepend={[
+          <EuiIcon type="streamsWired" />,
+          <EuiFormLabel
+            css={css`
+              inline-size: min(${prefix.length}ch, ${PREFIX_MAX_VISIBLE_CHARACTERS}ch);
+            `}
+            id={descriptionId}
+          >
+            <EuiScreenReaderOnly>
+              <span>
+                {i18n.translate('xpack.streams.streamDetailRouting.screenReaderPrefixLabel', {
+                  defaultMessage: 'Stream prefix:',
+                })}
+              </span>
+            </EuiScreenReaderOnly>
+            <EuiTextTruncate text={prefix} truncation="start" />
+          </EuiFormLabel>,
+        ]}
       />
     </EuiFormRow>
   );

x-pack/platform/plugins/shared/streams_app/test/scout/ui/tests/data_management/data_routing/create_routing_rules.spec.ts

@@ -28,9 +28,10 @@ test.describe('Stream data routing - creating routing rules', { tag: ['@ess', '@
     // Verify we're in the creating new rule state
     await expect(page.getByTestId('streamsAppRoutingStreamEntryNameField')).toBeVisible();
     await expect(page.getByText('Stream name')).toBeVisible();
+    await expect(page.getByText('logs.')).toBeVisible();
 
     // Fill in the stream name
-    await page.getByTestId('streamsAppRoutingStreamEntryNameField').fill('logs.nginx');
+    await page.getByTestId('streamsAppRoutingStreamEntryNameField').fill('nginx');
 
     // Set up routing condition
     await pageObjects.streams.fillConditionEditor({
@@ -53,7 +54,7 @@ test.describe('Stream data routing - creating routing rules', { tag: ['@ess', '@
     await pageObjects.streams.clickCreateRoutingRule();
 
     // Fill in some data
-    await pageObjects.streams.fillRoutingRuleName('logs.test');
+    await pageObjects.streams.fillRoutingRuleName('test');
 
     // Cancel the operation
     await pageObjects.streams.cancelRoutingRule();
@@ -108,4 +109,17 @@ test.describe('Stream data routing - creating routing rules', { tag: ['@ess', '@
     const createButton = page.getByTestId('streamsAppStreamDetailRoutingAddRuleButton');
     await expect(createButton).toBeHidden();
   });
+
+  test('should not allow creating a routing rule that is not a child of the current stream', async ({
+    page,
+    pageObjects,
+  }) => {
+    await pageObjects.streams.clickCreateRoutingRule();
+
+    // Input invalid partition name that is not a direct child of the current stream
+    await pageObjects.streams.fillRoutingRuleName('nginx.access_logs');
+
+    const createButton = page.getByTestId('streamsAppStreamDetailRoutingAddRuleButton');
+    await expect(createButton).toBeDisabled();
+  });
 });

x-pack/platform/plugins/shared/streams_app/test/scout/ui/tests/data_management/data_routing/edit_routing_rules.spec.ts

@@ -64,7 +64,7 @@ test.describe('Stream data routing - editing routing rules', { tag: ['@ess', '@s
   test('should switch between editing different rules', async ({ page, pageObjects }) => {
     // Create another test rule
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.edit-test-2');
+    await pageObjects.streams.fillRoutingRuleName('edit-test-2');
     await pageObjects.streams.fillConditionEditor({
       field: 'log.level',
       value: 'info',

x-pack/platform/plugins/shared/streams_app/test/scout/ui/tests/data_management/data_routing/error_handling.spec.ts

@@ -33,7 +33,7 @@ test.describe(
       pageObjects,
     }) => {
       await pageObjects.streams.clickCreateRoutingRule();
-      await pageObjects.streams.fillRoutingRuleName('logs.network-test');
+      await pageObjects.streams.fillRoutingRuleName('network-test');
 
       // Simulate network failure
       await context.setOffline(true);
@@ -61,7 +61,7 @@ test.describe(
     }) => {
       // Create a rule first
       await pageObjects.streams.clickCreateRoutingRule();
-      await pageObjects.streams.fillRoutingRuleName('logs.error-test');
+      await pageObjects.streams.fillRoutingRuleName('error-test');
       await pageObjects.streams.saveRoutingRule();
       await pageObjects.toasts.closeAll();
 

x-pack/platform/plugins/shared/streams_app/test/scout/ui/tests/data_management/data_routing/routing_data_preview.spec.ts

@@ -34,7 +34,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should show preview during rule creation', async ({ pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.preview-test');
+    await pageObjects.streams.fillRoutingRuleName('preview-test');
 
     // Set condition that should match the test data
     await pageObjects.streams.fillConditionEditor({
@@ -57,7 +57,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should update preview when condition changes', async ({ pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.preview-test');
+    await pageObjects.streams.fillRoutingRuleName('preview-test');
 
     // Set condition that should match the test data
     await pageObjects.streams.fillConditionEditor({
@@ -98,7 +98,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should allow updating the condition manually by syntax editor', async ({ pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.preview-test');
+    await pageObjects.streams.fillRoutingRuleName('preview-test');
 
     // Enable syntax editor
     await pageObjects.streams.toggleConditionEditorWithSyntaxSwitch();
@@ -159,7 +159,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should show no matches when condition matches nothing', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.no-matches');
+    await pageObjects.streams.fillRoutingRuleName('no-matches');
 
     // Set condition that won't match anything
     await pageObjects.streams.fillConditionEditor({
@@ -187,7 +187,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
     pageObjects,
   }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.filter-controls-test');
+    await pageObjects.streams.fillRoutingRuleName('filter-controls-test');
 
     await pageObjects.streams.fillConditionEditor({
       field: 'severity_text',
@@ -215,7 +215,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should switch between matched and unmatched documents', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.filter-switch-test');
+    await pageObjects.streams.fillRoutingRuleName('filter-switch-test');
 
     await pageObjects.streams.fillConditionEditor({
       field: 'severity_text',
@@ -262,7 +262,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should maintain filter state when condition changes', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.filter-state-test');
+    await pageObjects.streams.fillRoutingRuleName('filter-state-test');
 
     // Set initial condition
     await pageObjects.streams.fillConditionEditor({
@@ -299,7 +299,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should handle filter controls with complex conditions', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.complex-filter-test');
+    await pageObjects.streams.fillRoutingRuleName('complex-filter-test');
 
     // Enable syntax editor and set complex condition
     await pageObjects.streams.toggleConditionEditorWithSyntaxSwitch();
@@ -328,7 +328,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should disable filter controls when no condition is set', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.no-condition-test');
+    await pageObjects.streams.fillRoutingRuleName('no-condition-test');
 
     await expect(page.getByTestId('routingPreviewMatchedFilterButton')).toBeDisabled();
     await expect(page.getByTestId('routingPreviewUnmatchedFilterButton')).toBeDisabled();
@@ -343,7 +343,7 @@ test.describe('Stream data routing - previewing data', { tag: ['@ess', '@svlOblt
 
   test('should handle error states', async ({ page, pageObjects }) => {
     await pageObjects.streams.clickCreateRoutingRule();
-    await pageObjects.streams.fillRoutingRuleName('logs.error-test');
+    await pageObjects.streams.fillRoutingRuleName('error-test');
 
     // Set a condition that might cause issues without field
     await pageObjects.streams.fillConditionEditor({