Skip to content

Add managed previews for Links and Markdown library editors - #288213

Draft
nickpeihl wants to merge 1 commit into
elastic:mainfrom
nickpeihl:feature/managed-embeddable-preview
Draft

Add managed previews for Links and Markdown library editors#288213
nickpeihl wants to merge 1 commit into
elastic:mainfrom
nickpeihl:feature/managed-embeddable-preview

Conversation

@nickpeihl

@nickpeihl nickpeihl commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Summary

This adds managed flyout editors with attached embeddable previews for Links and Markdown library items.

  • adds openLazySystemFlyout while sharing lazy loading, overlay tracking, error handling, and focus restoration with the traditional flyout helper
  • adds a reusable managed child flyout that renders an embeddable preview without breaking the EUI Flyout Manager context
  • exposes Markdown saved objects in the Visualize Library and adds library editors for both Markdown and Links
  • aligns editor actions around Cancel, Run preview, and Save/Apply, including a split-button action for saving by-value Links panels to the library
  • preserves the editor when managed flyouts stack at narrow breakpoints, while allowing users to open the preview explicitly
  • keeps Links previews content-sized and aligned to the top

Screenshots

Visualize Library

Links

Editor with attached preview Preview closed
Links library editor with attached preview Links library editor with preview closed

Narrow viewport, with the editor taking precedence:

Links library editor at a narrow viewport

Markdown

Editor with attached preview Preview closed
Markdown library editor with attached preview Markdown library editor with preview closed

Narrow viewport, with the editor taking precedence:

Markdown library editor at a narrow viewport
Dashboard editors

Links

By-value Save-to-library action By-reference
By-value Links dashboard editor By-value Links dashboard editor save-to-library menu By-reference Links dashboard editor

Markdown

By-value By-reference
By-value Markdown dashboard editor By-reference Markdown dashboard editor

Testing

node scripts/check.js --scope=staged

  • 165 Jest tests across 3 configurations
  • 5 TypeScript projects
  • ESLint and project configuration checks

Release note

Links and Markdown library items can now be edited from the Visualize Library with an attached live preview.

Checklist

  • New UI text uses i18n and sentence case
  • Unit tests were updated for the editor behavior
  • No plugin configuration keys were changed
  • No breaking HTTP API changes were introduced

Identify risks

The main risk is interaction between independently mounted system flyouts and the EUI Flyout Manager, especially during responsive layout changes. The implementation keeps React context intact, closes previews when the viewport narrows, guards async updates after unmount, and includes focused tests for the shared flyout and editor state behavior.

@infra-vault-gh-plugin-prod

Copy link
Copy Markdown
🤖 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!
  • Click to trigger kibana-entity-store-performance-from-pr for this PR!
  • Click to trigger kibana-storybooks-from-pr for this PR!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant