[Streams] Add name and confirm step to create classic stream flyout #244998

damian-polewski · 2025-12-02T23:41:43Z

Summary

Closes #241644

This PR adds the step to name and confirm step to the create classic stream flyout.

Changes

Creates NameAndConfirmStep and NameStreamSection components.
Removes selectedTemplate and onTemplateSelect and moves the state inside CreateClassicStreamFlyout.
Adds new state (for handling selected index pattern, new stream name and validation) and validation logic to CreateClassicStreamFlyout.
Creates StreamNameInput component

Important

The Confirm template details section will be added in a separate PR to make it easier for review.

How to test

View the component in Storybook:

yarn storybook classic_stream_flyout

Design	Implementation

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

…tead readonly inputs

elasticmachine · 2025-12-03T22:22:18Z

Pinging @elastic/kibana-management (Team:Kibana Management)

Copilot

Pull request overview

This PR implements the name and confirm step for the create classic stream flyout, allowing users to specify a stream name by filling in wildcards from selected index patterns.

Key changes:

Adds stream name validation (empty wildcards, duplicates, higher priority conflicts)
Implements dynamic input generation based on index pattern wildcards
Moves template selection state management into the flyout component

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`utils/utils.ts`	New utility functions for data retention formatting, wildcard validation, and stream name validation
`stream_name_input/stream_name_input.tsx`	Component that dynamically generates inputs for index pattern wildcards with validation state
`stream_name_input/stream_name_input.test.tsx`	Comprehensive tests for the StreamNameInput component
`stream_name_input/stream_name_input.stories.tsx`	Storybook stories demonstrating various input patterns and validation states
`name_and_confirm/name_stream_section.tsx`	Section component for naming streams with index pattern selection and validation messages
`name_and_confirm/name_and_confirm_step.tsx`	Step component that orchestrates the name and confirm UI
`create_classic_stream_flyout.tsx`	Updated flyout to manage template selection state, validation, and stream creation flow
`create_classic_stream_flyout.test.tsx`	Updated tests covering navigation, validation, and callback behavior
`create_classic_stream_flyout.stories.tsx`	Updated stories with validation scenarios and mock data
`select_template_step.tsx`	Updated to use extracted `formatDataRetention` utility

Copilot · 2025-12-03T23:09:28Z

x-pack/platform/packages/shared/kbn-classic-stream-flyout/src/utils/utils.ts

+export const validateStreamName = async (
+  streamName: string,
+  onValidate?: StreamNameValidator
+): Promise<StreamNameValidationResult> => {


The function lacks a JSDoc comment explaining its purpose, parameters, and return value. Add documentation describing the validation flow and how empty wildcards are checked before the external validator runs.

Copilot · 2025-12-03T23:09:29Z

...ages/shared/kbn-classic-stream-flyout/src/components/stream_name_input/stream_name_input.tsx

+const buildStreamName = (pattern: string, parts: string[]): string => {
+  let partIndex = 0;
+  return pattern.replace(/\*/g, () => {
+    // Keep * if the part is empty, so validation can detect unfilled wildcards
+    const part = parts[partIndex] || '*';
+    partIndex++;
+    return part;
+  });
+};


Add JSDoc documentation explaining the purpose of this function, its parameters (pattern and parts), and the return value. The comment on line 108 is helpful but insufficient for understanding the function's role in the component.

Copilot · 2025-12-03T23:09:29Z

...ages/shared/kbn-classic-stream-flyout/src/components/stream_name_input/stream_name_input.tsx

+  isFirst: boolean;
+  isLast: boolean;
+}
+


Add JSDoc documentation explaining that this function parses an index pattern string into segments of static text and wildcards, and describe the returned PatternSegment array structure.

Suggested change

/**

* Parses an index pattern string into an array of segments, where each segment is either

* a static text segment or a wildcard segment.

*

* A static segment represents a sequence of characters between wildcards.

* A wildcard segment represents a '*' character in the pattern.

*

* @param pattern - The index pattern string to parse (e.g., 'foo-*-bar-*').

* @returns {PatternSegment[]} An array of PatternSegment objects, where each object has:

* - type: 'static' | 'wildcard'

* - value: the string value of the segment (static text or '*')

* - index: the zero-based index of the wildcard (only present for wildcards)

*/

Copilot · 2025-12-03T23:09:29Z

...ages/shared/kbn-classic-stream-flyout/src/components/stream_name_input/stream_name_input.tsx

+
+  return segments;
+};
+


Add JSDoc documentation explaining how this function groups segments into input groups for rendering, including how prepend/append text is assigned to each group.

Suggested change

/**

* Groups pattern segments into input groups for rendering.

*

* Each input group corresponds to a wildcard segment in the pattern, and may have

* static text prepended or appended to it:

* - Static text immediately preceding a wildcard becomes the `prepend` for that group.

* - Static text immediately following the last wildcard becomes the `append` for the last group.

* - If there is no static text before a wildcard, `prepend` is undefined.

* - If there is no static text after the last wildcard, `append` is undefined.

* - The `isFirst` and `isLast` flags indicate whether the group is the first or last wildcard group.

*

* Example:

* For pattern "foo-*-bar-*", segments would be:

* [static "foo-", wildcard, static "bar-", wildcard]

* This produces two groups:

* 1. prepend: "foo-", wildcardIndex: 0, isFirst: true, isLast: false

* 2. prepend: "bar-", wildcardIndex: 1, isFirst: false, isLast: true

*

* @param segments Array of pattern segments (static and wildcard)

* @returns Array of input groups for rendering, with prepend/append text assigned

*/

Copilot · 2025-12-03T23:09:30Z

...ages/shared/kbn-classic-stream-flyout/src/components/stream_name_input/stream_name_input.tsx

+
+  return groups;
+};
+


Add JSDoc documentation explaining that this function counts the number of wildcard characters (*) in the pattern string.

Suggested change

/**

* Counts the number of wildcard characters (*) in the given pattern string.

*

* @param pattern - The pattern string to search for wildcards.

* @returns The number of wildcard (*) characters in the pattern.

*/

Copilot · 2025-12-03T23:09:30Z

...c-stream-flyout/src/components/create_classic_stream_flyout/create_classic_stream_flyout.tsx

+  const handleCreate = useCallback(async () => {
+    setHasAttemptedSubmit(true);
+    setIsValidating(true);
+
+    try {
+      const result = await validateStreamName(streamName, onValidate);
+      setValidationError(result.errorType);
+      setConflictingIndexPattern(result.conflictingIndexPattern);
+
+      if (result.errorType === null) {
+        onCreate(streamName);
+      }
+    } finally {
+      setIsValidating(false);
+    }
+  }, [streamName, onValidate, onCreate]);


Add JSDoc documentation explaining that this callback validates the stream name before creation, sets validation state, and only calls onCreate if validation passes.

Copilot · 2025-12-03T23:09:30Z

...c-stream-flyout/src/components/create_classic_stream_flyout/create_classic_stream_flyout.tsx

+  const runValidation = useCallback(
+    async (name: string): Promise<boolean> => {
+      setIsValidating(true);
+      try {
+        const result = await validateStreamName(name, onValidate);
+        setValidationError(result.errorType);
+        setConflictingIndexPattern(result.conflictingIndexPattern);
+        return result.errorType === null;
+      } finally {
+        setIsValidating(false);
+      }
+    },
+    [onValidate]
+  );


Add JSDoc documentation explaining that this function runs validation, updates state with the results, and returns true if validation passes.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Copilot · 2025-12-03T23:40:10Z

...ages/shared/kbn-classic-stream-flyout/src/components/stream_name_input/stream_name_input.tsx

+const parseIndexPattern = (pattern: string): PatternSegment[] => {
+  if (!pattern) return [];
+
+  const segments: PatternSegment[] = [];
+  let currentSegment = '';
+  let wildcardIndex = 0;
+
+  for (let i = 0; i < pattern.length; i++) {
+    const char = pattern[i];
+    if (char === '*') {
+      if (currentSegment) {
+        segments.push({ type: 'static', value: currentSegment });
+        currentSegment = '';
+      }
+      segments.push({ type: 'wildcard', value: '*', index: wildcardIndex });
+      wildcardIndex++;
+    } else {
+      currentSegment += char;
+    }
+  }
+
+  if (currentSegment) {
+    segments.push({ type: 'static', value: currentSegment });
+  }
+
+  return segments;
+};


Add JSDoc comment to parseIndexPattern explaining that it parses an index pattern into segments of static text and wildcards, with each wildcard receiving a sequential index starting from 0.

Copilot · 2025-12-03T23:40:10Z

...c-stream-flyout/src/components/create_classic_stream_flyout/create_classic_stream_flyout.tsx

+  // Run validation and update state, returns true if validation passes
+  const runValidation = useCallback(
+    async (name: string): Promise<boolean> => {
+      setIsValidating(true);
+      try {
+        const result = await validateStreamName(name, onValidate);
+        setValidationError(result.errorType);
+        setConflictingIndexPattern(result.conflictingIndexPattern);
+        return result.errorType === null;
+      } finally {
+        setIsValidating(false);
+      }
+    },
+    [onValidate]
+  );
+
+  // Debounced validation - only runs after first submit attempt with an error
+  // When validation passes, reset to "submit only" mode
+  useDebounce(
+    () => {
+      if (hasAttemptedSubmit && validationError !== null) {
+        runValidation(streamName).then((isValid) => {
+          if (isValid) {
+            // Validation passed, reset to "submit only" mode
+            setHasAttemptedSubmit(false);
+          }
+        });
+      }
+    },
+    VALIDATION_DEBOUNCE_MS,
+    [streamName, hasAttemptedSubmit, validationError, runValidation]


[nitpick] The runValidation function is included in the debounce dependencies array, which will cause the debounce effect to reset whenever onValidate changes. Since runValidation is a stable callback (only depends on onValidate), this is acceptable. However, to make the dependency array more explicit about what actually triggers re-execution, consider extracting the debounced validation logic to avoid including runValidation itself in the dependencies.

Suggested change

// Run validation and update state, returns true if validation passes

const runValidation = useCallback(

async (name: string): Promise<boolean> => {

setIsValidating(true);

try {

const result = await validateStreamName(name, onValidate);

setValidationError(result.errorType);

setConflictingIndexPattern(result.conflictingIndexPattern);

return result.errorType === null;

} finally {

setIsValidating(false);

}

},

[onValidate]

);

// Debounced validation - only runs after first submit attempt with an error

// When validation passes, reset to "submit only" mode

useDebounce(

() => {

if (hasAttemptedSubmit && validationError !== null) {

runValidation(streamName).then((isValid) => {

if (isValid) {

// Validation passed, reset to "submit only" mode

setHasAttemptedSubmit(false);

}

});

}

},

VALIDATION_DEBOUNCE_MS,

[streamName, hasAttemptedSubmit, validationError, runValidation]

// Debounced validation - only runs after first submit attempt with an error

// When validation passes, reset to "submit only" mode

useDebounce(

() => {

if (hasAttemptedSubmit && validationError !== null) {

(async () => {

setIsValidating(true);

try {

const result = await validateStreamName(streamName, onValidate);

setValidationError(result.errorType);

setConflictingIndexPattern(result.conflictingIndexPattern);

if (result.errorType === null) {

// Validation passed, reset to "submit only" mode

setHasAttemptedSubmit(false);

}

} finally {

setIsValidating(false);

}

})();

}

},

VALIDATION_DEBOUNCE_MS,

[streamName, hasAttemptedSubmit, validationError, onValidate]

elasticmachine · 2025-12-03T23:50:58Z

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #130 / Alerting bulkDisable should bulk disable and untrack
[job] [logs] FTR Configs #84 / Maps endpoints apis search ES|QL should return getValues response in expected shape
[job] [logs] FTR Configs #84 / Maps endpoints apis search ES|QL should return getValues response in expected shape

cc @damian-polewski

feat: add name and confirm step

d34e6dd

damian-polewski self-assigned this Dec 2, 2025

damian-polewski changed the title ~~[Streams] feat: add name and confirm step~~ [Streams] Add name and confirm step to create classic stream flyout Dec 2, 2025

damian-polewski added 9 commits December 3, 2025 14:47

feat: use prepend/append for static text in the stream name input ins…

e4a4b86

…tead readonly inputs

feat: move stream name input to separate folder with separate stories

6b155ef

fix: issue with building stream name

c2096ca

feat: extract stream name input tests into a separate test file

a00aea1

fix: folder name typo

985e30b

chore: remove template details section

fc70f4a

chore: reorganize tests

b4fdba6

fix: change title size

f6174c4

fix: only show empty inputs as invalid when validating

87e30f0

damian-polewski marked this pull request as ready for review December 3, 2025 22:22

damian-polewski requested a review from a team as a code owner December 3, 2025 22:22

damian-polewski requested review from a team and MichaelMarcialis December 3, 2025 22:23

kapral18 requested a review from Copilot December 3, 2025 23:07

Copilot AI reviewed Dec 3, 2025

View reviewed changes

kapral18 requested a review from Copilot December 3, 2025 23:38

Copilot AI reviewed Dec 3, 2025

View reviewed changes

+/**
+ * Parses an index pattern string into an array of segments, where each segment is either
+ * a static text segment or a wildcard segment.
+ *
+ * A static segment represents a sequence of characters between wildcards.
+ * A wildcard segment represents a '*' character in the pattern.
+ *
+ * @param pattern - The index pattern string to parse (e.g., 'foo-*-bar-*').
+ * @returns {PatternSegment[]} An array of PatternSegment objects, where each object has:
+ *   - type: 'static' | 'wildcard'
+ *   - value: the string value of the segment (static text or '*')
+ *   - index: the zero-based index of the wildcard (only present for wildcards)
+ */

+/**
+ * Groups pattern segments into input groups for rendering.
+ *
+ * Each input group corresponds to a wildcard segment in the pattern, and may have
+ * static text prepended or appended to it:
+ * - Static text immediately preceding a wildcard becomes the `prepend` for that group.
+ * - Static text immediately following the last wildcard becomes the `append` for the last group.
+ * - If there is no static text before a wildcard, `prepend` is undefined.
+ * - If there is no static text after the last wildcard, `append` is undefined.
+ * - The `isFirst` and `isLast` flags indicate whether the group is the first or last wildcard group.
+ *
+ * Example:
+ *   For pattern "foo-*-bar-*", segments would be:
+ *     [static "foo-", wildcard, static "bar-", wildcard]
+ *   This produces two groups:
+ *     1. prepend: "foo-", wildcardIndex: 0, isFirst: true, isLast: false
+ *     2. prepend: "bar-", wildcardIndex: 1, isFirst: false, isLast: true
+ *
+ * @param segments Array of pattern segments (static and wildcard)
+ * @returns Array of input groups for rendering, with prepend/append text assigned
+ */

+/**
+ * Counts the number of wildcard characters (*) in the given pattern string.
+ *
+ * @param pattern - The pattern string to search for wildcards.
+ * @returns The number of wildcard (*) characters in the pattern.
+ */

[Streams] Add name and confirm step to create classic stream flyout #244998

Are you sure you want to change the base?

[Streams] Add name and confirm step to create classic stream flyout #244998

Conversation

damian-polewski commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

How to test

Checklist

Uh oh!

elasticmachine commented Dec 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 3, 2025

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

damian-polewski commented Dec 2, 2025 •

edited

Loading