kibana/examples
Hannah Mudge 686571547f
[Dashboard][Collapsable Panels] Swap react-grid-layout for kbn-grid-layout (#205341)
Closes https://github.com/elastic/kibana/issues/190446

## Summary

This PR swaps out `react-grid-layout` for the new internal
`kbn-grid-layout` in the Dashboard plugin. This is the first major step
in making collapsible sections possible in Dashboard.

- **`react-grid-layout` (before)**:


https://github.com/user-attachments/assets/ca6ec059-7f4a-43fb-890e-7b72b781e50b

- **`kbn-grid-layout` (after)**:


https://github.com/user-attachments/assets/3d3de1f3-1afc-4e6b-93d6-9cc31a46e2cf

### Notable Improvements

- Better handling of resizing panels near the bottom of the screen
   
  | `react-grid-layout` | `kbn-grid-layout` |
  |--------|--------|
| ![Jan-09-2025
09-59-00](https://github.com/user-attachments/assets/75854b76-3ad7-4f06-9745-b03bde15f87a)
| ![Jan-09-2025
09-26-24](https://github.com/user-attachments/assets/f0fbc0bf-9208-4866-b7eb-988c7abc3e50)
|


- Auto-scroll when dragging / resizing panels near the top and bottom of
the screen, making it much easier to move panels around by larger
distances

  | `react-grid-layout` | `kbn-grid-layout` |
  |--------|--------|
| ![Jan-09-2025
10-01-30](https://github.com/user-attachments/assets/e3457e5e-3647-4024-b6e6-c594d6d3e1d7)
| ![Jan-09-2025
09-25-35](https://github.com/user-attachments/assets/3252bdec-2bbc-4793-b089-346866d4589b)
|

- More reliable panel positioning due to the use of CSS grid rather than
absolute positioning via pixels

  | `react-grid-layout` | `kbn-grid-layout` |
  |--------|--------|
| ![Screenshot 2025-01-09 at 9 32
52 AM](https://github.com/user-attachments/assets/06bd31a4-0a9f-4561-84c3-4cd96ba297b0)
| ![Screenshot 2025-01-09 at 9 35
14 AM](https://github.com/user-attachments/assets/573dab98-3fb9-4ef6-9f37-c4cf4d03ce52)
|

- Better performance when dragging and resizing (see
https://github.com/elastic/kibana/pull/204134 for a more thorough
explanation) and a smaller bundle size than `react-grid-layout`

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

This PR contains a significant change to the Dashboard layout engine,
which means that it carries a decent amount of risk for introducing new,
uncaught bugs with dragging / resizing panels and collision resolution.
That being said, `kbn-grid-layout` has been built **iteratively** with
plenty of testing along the way to reduce this risk.

## Release note
Improves Dashboard layout engine by switching to the internally
developed `kbn-grid-layout`.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
2025-01-14 14:51:14 -07:00
..
content_management_examples [Discover] Rename Saved Search to Discover Session (#202217) 2024-12-18 13:45:32 +01:00
controls_example [Embeddables Rebuild] Make Serialize Function Synchronous (#203662) 2024-12-12 21:25:03 -05:00
data_view_field_editor_example Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
developer_examples Preparation for High Contrast Mode, Core/SharedUX domains (#202606) 2024-12-05 08:26:41 -07:00
discover_customization_examples Preparation for High Contrast Mode, Analytics Experience domains (#202608) 2024-12-12 13:16:07 -06:00
embeddable_examples [uiActions] make trigger action registry async (#205512) 2025-01-13 09:57:34 -07:00
error_boundary Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
eso_model_version_example More strict plugin type definitions (#205232) 2025-01-07 16:41:15 +01:00
esql_ast_inspector [ES|QL] Improve the Builder class (#203558) 2024-12-13 16:19:10 +01:00
esql_validation_example Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-esql (#202722) 2024-12-09 11:33:55 +01:00
expressions_explorer Preparation for High Contrast Mode, Analytics Experience domains (#202608) 2024-12-12 13:16:07 -06:00
feature_control_examples Added scope field to features config. (#191634) 2024-09-12 19:22:20 -05:00
feature_flags_example [Feature Flags Example Plugin] Change ctx provider (#201097) 2024-11-21 06:01:02 -06:00
field_formats_example Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
files_example [Authz] Migrate outstanding SharedUX routes with access tags (#206260) 2025-01-13 14:52:06 +01:00
grid_example [Dashboard][Collapsable Panels] Swap react-grid-layout for kbn-grid-layout (#205341) 2025-01-14 14:51:14 -07:00
guided_onboarding_example Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
hello_world Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
locator_examples Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
locator_explorer Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
partial_results_example Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
portable_dashboards_example Preparation for High Contrast Mode, Analytics Experience domains (#202608) 2024-12-12 13:16:07 -06:00
preboot_example Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
resizable_layout_examples Preparation for High Contrast Mode, Analytics Experience domains (#202608) 2024-12-12 13:16:07 -06:00
response_stream [ML] AIOps: Log Rate Analysis embeddable (#197943) 2024-11-05 15:48:45 +01:00
routing_example Preparation for High Contrast Mode, Core/SharedUX domains (#202606) 2024-12-05 08:26:41 -07:00
screenshot_mode_example Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
search_examples Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-visualizations (#202754) 2025-01-08 12:19:24 +01:00
share_examples [Reporting] fix dashboard "Copy Post URL" action (#192530) 2024-10-08 01:54:21 +02:00
state_containers_examples Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
ui_action_examples Preparation for High Contrast Mode, Core/SharedUX domains (#202606) 2024-12-05 08:26:41 -07:00
ui_actions_explorer Preparation for High Contrast Mode, Core/SharedUX domains (#202606) 2024-12-05 08:26:41 -07:00
unified_doc_viewer Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-data-discovery (#203152) 2024-12-30 13:23:47 +01:00
unified_field_list_examples Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-data-discovery (#203152) 2024-12-30 13:23:47 +01:00
user_profile_examples [Security team] Update components for EUI visual refresh (#201795) 2024-12-13 00:22:18 +11:00
v8_profiler_examples Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.asciidoc Adds run without basepath configured to examples readme (#173086) 2023-12-12 11:22:02 -07:00

[[example-plugins]]
== Example plugins

This folder contains example plugins.  To run the plugins in this folder, use the `--run-examples` flag (without a basepath), via

[source,bash]
----
yarn start --run-examples
----