Skip to content

[8.x] [Dashboard] Presentation panel refactor (#207275)#210030

Merged
Heenawter merged 2 commits intoelastic:8.xfrom
Heenawter:backport/8.x/pr-207275
Feb 6, 2025
Merged

[8.x] [Dashboard] Presentation panel refactor (#207275)#210030
Heenawter merged 2 commits intoelastic:8.xfrom
Heenawter:backport/8.x/pr-207275

Conversation

@Heenawter
Copy link
Copy Markdown
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

Closes elastic#206686
Closes elastic#197897
Part of elastic#207852

## Summary

This PR is a major refactor of the `PresentationPanel` component,
including an overhaul of the hover action and panel title components.
Some notable highlights include:
- All styles in the `PresentationPanel` component were moved from SASS
to Emotion
- The over-complicated logic to combine hover actions when the panel
shrinks was removed in favour of CSS, driven by a [container
query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
Removing the `updateCombineHoverActions` function (which was defined in
a React component and not memoized) also made a difference in
performance when dragging:

   | Before | After |
   |--------|--------|
|
![image](https://github.com/user-attachments/assets/e66898d6-a6fc-42c7-9e24-f116d3bd85a6)
|
![image](https://github.com/user-attachments/assets/1f1d75ba-2ebc-4def-9d2e-14dfd5e1a585)
|

- The over-complicated logic defined in
`usePresentationPanelTitleClickHandle`, which was meant to ignore the
`onClick` that would trigger after a panel was dragged, was converted to
2 lines of CSS

### Small usability improvements

This PR also includes a few small usability improvements, such as:

- Ensuring that only the **first** row of hover actions overlaps with
the Dashboard's sticky top navigation bar, and this only happens when
the dashboard has no controls. This results in much better behaviour in
most scenarios:

  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-14-26](https://github.com/user-attachments/assets/2bf5eaa0-06ab-4d87-897f-d217f189daf7)
| ![Jan-27-2025
16-13-41](https://github.com/user-attachments/assets/61b0f06a-1363-4bfc-8a2b-c57a3e736552)
|

- Adding a small delay for hiding the hover actions on mouse leave,
which makes it a lot easier to grab the drag handle:

  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-21-11](https://github.com/user-attachments/assets/65138e53-1856-44f0-913f-01383b8aa6c2)
| ![Jan-27-2025
16-20-17](https://github.com/user-attachments/assets/7c8ba4d8-8b77-4bc5-85af-a082cace1f96)
|

- Preventing the resize handle from overlapping Dashboard's stick top
navigation:

  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-24-31](https://github.com/user-attachments/assets/5363a302-5f6a-4483-9782-516023567d87)
| ![Jan-27-2025
16-25-04](https://github.com/user-attachments/assets/8614d025-b45b-4af2-81d6-c62a086ca427)
|

### 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)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit c35698b)

# Conflicts:
#	src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss
#	src/platform/plugins/shared/dashboard/public/dashboard_container/component/grid/use_layout_styles.tsx
@Heenawter Heenawter added the backport This PR is a backport of another PR label Feb 6, 2025
@Heenawter Heenawter enabled auto-merge (squash) February 6, 2025 15:08
@elasticmachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #20 / FileAttachmentEvent renders clickable name

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
presentationPanel 113 107 -6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
canvas 1.0MB 1.0MB -366.0B
dashboard 596.9KB 596.7KB -233.0B
presentationPanel 44.2KB 36.4KB -7.8KB
total -8.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
presentationPanel 11.0KB 10.9KB -50.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
presentationPanel 7 6 -1

Total ESLint disabled count

id before after diff
presentationPanel 7 6 -1

History

@Heenawter Heenawter merged commit 336b2fe into elastic:8.x Feb 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants