Skip to content

[Flyouts Example Plugin] Use historyKey for flyout demos#260557

Closed
tsullivan wants to merge 19 commits intoelastic:mainfrom
tsullivan:flyouts/example-plugin-history-fixes
Closed

[Flyouts Example Plugin] Use historyKey for flyout demos#260557
tsullivan wants to merge 19 commits intoelastic:mainfrom
tsullivan:flyouts/example-plugin-history-fixes

Conversation

@tsullivan
Copy link
Copy Markdown
Member

@tsullivan tsullivan commented Mar 31, 2026

Summary

EUI v114 brought changes to the way that flyouts can have a shared history: each flyout needs to share a historyKey object with the flyouts that it wants to share history with.

This PR follows that concept for the flyouts in the example plugin.

Screenshots

This PR also cleans up the example page code by putting the "Non-Session" flyouts in their own section, and removing the unnecessary filler text at the bottom.

Before

flyout example update - 01 before

After

flyout example update - 02 after

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.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

@elasticmachine
Copy link
Copy Markdown
Contributor

🤖 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!

@tsullivan tsullivan changed the title Flyouts/example plugin history fixes [Flyouts Example Plugin] Use historyKey for flyout demos Mar 31, 2026
@tsullivan
Copy link
Copy Markdown
Member Author

Making this part of #252171

@tsullivan tsullivan closed this Apr 1, 2026
tsullivan added a commit that referenced this pull request Apr 2, 2026
…2171)

## Summary

- Closes elastic/kibana-team#2566
- Includes #260557 (for history
group support in the example plugin app)
- [x] Hold until after #259497

### Changes

**`data-test-subj` attributes** — Added to flyout buttons, switches, and
close controls in both the EuiFlyout component and Overlays API
implementations to enable reliable test selectors.

**Scout UI tests** — Two tests covering:
- Open a main flyout and a child flyout, verify cascade close behavior
- Open a push flyout, open a second overlay flyout, verify Back button
navigation

**Minor Flyout System Examples plugin app refactoring**
- See
#252171 (comment)

### To run locally

```bash
node scripts/scout.js start-server \
  --arch stateful \
  --domain classic \
  --serverConfigSet examples

# terminal two: run the tests
npx playwright test --config examples/flyout_system/test/scout_examples/ui/playwright.config.ts \
  --project local \
  --grep @local-stateful-classic \
  --headed
```

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
paulinashakirova pushed a commit to paulinashakirova/kibana that referenced this pull request Apr 2, 2026
…stic#252171)

## Summary

- Closes elastic/kibana-team#2566
- Includes elastic#260557 (for history
group support in the example plugin app)
- [x] Hold until after elastic#259497

### Changes

**`data-test-subj` attributes** — Added to flyout buttons, switches, and
close controls in both the EuiFlyout component and Overlays API
implementations to enable reliable test selectors.

**Scout UI tests** — Two tests covering:
- Open a main flyout and a child flyout, verify cascade close behavior
- Open a push flyout, open a second overlay flyout, verify Back button
navigation

**Minor Flyout System Examples plugin app refactoring**
- See
elastic#252171 (comment)

### To run locally

```bash
node scripts/scout.js start-server \
  --arch stateful \
  --domain classic \
  --serverConfigSet examples

# terminal two: run the tests
npx playwright test --config examples/flyout_system/test/scout_examples/ui/playwright.config.ts \
  --project local \
  --grep @local-stateful-classic \
  --headed
```

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
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.

5 participants