[Streams] Implement Ingest Pipeline Structure Tree Design Review Feedback

[Copilot]

Summary

This PR implements design feedback from the Figma designs for the ingest sub-pipeline interface, bringing the implementation into closer alignment with the intended design specifications.

Closes #[ISSUE_NUMBER]

Changes

Flyout Layout Restructure

The flyout has been restructured from using EuiSplitPanel to a custom layout with EuiFlyout, EuiFlyoutBody, and EuiFlyoutFooter. This enables:

• Proper width distribution: Flyout is now 1000px wide with a 460px tree panel and 560px details panel
• Scoped footer: Footer now extends only the width of the details panel (not full flyout width), making it clear that actions apply only to the selected pipeline
• Consistent padding: All panels use 24px padding throughout
• Visual separation: Added 1px border between the tree and details panels (hidden on small viewports)

Tree Panel Improvements

All tree node styling has been updated to match the design specifications:

Sizing and spacing:

• Items are now 40px tall (was 36px)
• Padding is 8px on all sides (was 16px horizontal, 12px vertical)
• Border radius is 6px (was 4px)
• Gap between items is 8px (was 16px)
• Child indentation is 40px (was 24px)
• Items extend full width to the right edge of the panel

Typography:

• Font size is 14px (was 16px)
• Font weight is 500 medium (was 400 regular)
• Text color uses colors.link for a more interactive appearance

State colors:

• Non-selected: borderBasePlain border, backgroundBasePlain background, subdued icons
• Selected: borderStrongPrimary border (1px, not 2px), backgroundBasePrimary background, primary color icons
• Hover: backgroundBaseInteractiveHover background, underlined text

Content improvements:

• Wrapped subtitle in EuiText with color="subdued" for proper text styling
• Changed "pipeline processors" from an inline external link to "View documentation" appended at the end of the subtitle, improving readability

Details Panel Enhancements

Semantic HTML structure:
Replaced EuiDescriptionList with EuiTitle and EuiCodeBlock components. The previous implementation was not semantically correct usage of the <dl> HTML element, as we're displaying sections with titles and code blocks, not description lists.

Improved alignment:
Fixed vertical alignment of meta information (version, managed tag, deprecated badge) by using responsive={false} and tighter gutterSize.

Better loading experience:
Replaced SectionLoading spinner with structured skeleton loading using EuiSkeletonText and EuiSkeletonRectangle components that match the actual content layout.

Callout Improvements

Removed redundant warning message from "Custom pipeline does not exist" callouts. The message "The pipeline [name] does not exist" was duplicated in both the callout title and body, creating unnecessary repetition.

Technical Details

All styling now uses proper EUI theme tokens for maintainability:

• euiTheme.size.* for all spacing values
• euiTheme.border.* for borders and radii
• euiTheme.colors.* for all color values
• euiTheme.font.* for typography

The flyout layout uses Emotion CSS-in-JS for precise control over dimensions and responsive behavior while maintaining clean component structure.

Known Limitations

Expand/Collapse Action Separation

The design called for the expand/collapse button to operate independently from the pipeline selection action (clicking the pipeline name). This is fundamentally limited by the EuiTreeView component's architecture, which treats the entire node as a single clickable area with no API to intercept expand button clicks separately.

Potential solutions (not implemented):

• Build a custom tree component from scratch (significant effort)
• Modify EuiTreeView in the EUI library itself

This limitation was acknowledged in the original issue with "Or is this limited by our use of the EuiTreeView component?"

Panel Flashing on Selection

Suppressing the flashing when selecting a new pipeline would require implementing React optimization techniques (React.memo, Suspense, careful state management) that go beyond the scope of these styling updates.

Testing

Manual testing should verify:

• Flyout dimensions (1000px when tree present, 560px without)
• Panel padding (24px throughout)
• Border between panels (visible in large viewports, hidden in small)
• Footer scoped to details panel only
• Tree node styling (size, colors, spacing)
• All three states: normal, selected, and hover
• Skeleton loading appearance
• Responsive behavior on small screens

Screenshots

TODO: Add before/after screenshots

---

Related: Addresses feedback from @[DESIGN_REVIEWER] in the design review issue.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Streams] Ingest Pipeline Structure Tree Design Review</issue_title>
<issue_description>Thanks so much for implementing the designs for the ingest sub-pipeline interface in your recently merged PR, @ElenaStoeva. It looks great! I was out on PTO when this merged, but I did a quick review this week and had a few comments/suggestions that I wanted to share with you to see if we could bring the implementation into closer alignment with the designs. If you have any questions about any of these, feel free to comment here or we can schedule a Zoom call to chat about these.

General flyout

• The flyout's width is slightly larger than the design. Can we change it so that the flyout is 1000px wide (460px for left ingest pipeline hierarchy panel, 560px for pipeline details panel)?

• The padding for the flyout's two primary content panels is currently 16px. Can we change this to 24px?

• There is a 1px border missing between the flyout's two primary content panels. Can we add this in? Note that this border should also be omitted at small viewport sizes, when the panels are no longer side-by-side.

  

• The flyout's footer with "Edit pipeline", "Duplicate", and "Delete" actions was intended to only extend the width of the pipeline details panel. Currently it is extending across the full width of the flyout. This is problematic because it gives the impression that the actions are global across all pipelines, when it actually is only affecting the currently selected pipeline. Would it be possible to change this to match the designs?

  

• The footer appears to have an errant shadow appearing at the top, emenating from styles applied to the div element above. Can this shadow be removed?

  

Ingest pipeline hierarchy panel

• The "A tree visualization…" subtitle should likely be placed in an EuiText component in order to get the appropriate styles, such as line height. The subtitle text color should also be colors.textSubdued to better match the designs.

• The "pipeline processors" text wasn't an external link in the designs. The current implementation feels odd, as the external link icon is breaking a line. If this link is required, consider having it be an appended "View documentation" link that appears at the end of the subtitle.

  

• The designs show each ingest pipeline item in the tree extending the full width of it's row, up to the right edge of the panel. Can the implementation be updated to reflect this?

  

• Each child ingest pipeline item is intended to have a 40px left indent/margin from their parent. The current implementation uses 24px. Can we change to match the designs?

  

• The gap between each ingest pipeline item is intended to be 8px, not 16px.

• The original design intention was that the expand/collapse button action would operate independently from the pipeline selection action (triggered by interacting with the pipeline name). Would it be possible to modify your implementation to split those two actions as intended? Or is this limited by our use of the EuiTreeView component?

  Expand/Collapse Action	Pipeline Selection Action

• The selection of a new pipeline from the tree causes the right details panel to flash/disappear-and-reappear. Would it be possible to supress this flashing?

  

• There's a handful of small inconsistencies between the design and the implementation of the ingest pipeline items. These include the following:

  • Items should have border radius of 6px, not 4px.
  • Items should also be 40px tall, not 36px.
  • Item padding should be 8px on all sides, not 16px ho...

Fixes #231889

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[elasticmachine]

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!
• Click to trigger kibana-deploy-cloud-from-pr for this PR!