Favorite a dashboard from within#201596
Conversation
…vorite-dash-from-within # Conflicts: # src/platform/plugins/shared/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx
…vorite-dash-from-within
…vorite-dash-from-within
…vorite-dash-from-within # Conflicts: # src/platform/packages/shared/kbn-typed-react-router-config/src/breadcrumbs/use_breadcrumbs.ts # x-pack/solutions/observability/plugins/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx # x-pack/solutions/observability/plugins/observability_shared/public/hooks/use_breadcrumbs.ts
…vorite-dash-from-within
| * Attempts to reuse existing query client otherwise fallbacks to a default one. | ||
| */ | ||
| export function MaybeQueryClientProvider({ children }: React.PropsWithChildren) { | ||
| const client = React.useContext(defaultContext); |
There was a problem hiding this comment.
I reworked a bit query client provider in table list view to allow re-using existing QueryClientProvider. This allowed to share cache for favorites between table list view and dashboard page
| el.current = undefined; | ||
| }); | ||
| if (unsetMountPoint) { | ||
| unsetMountPoint(); |
There was a problem hiding this comment.
Small improvement to allow to use this component nicer with pattern like chrome.setAppendBreadcrumbExtension
| .kbnBody { | ||
| .dshTitleBreadcrumbs__updateIcon { | ||
| margin-left: $euiSizeXS; | ||
| margin-top: calc(-1 * $euiSizeXS / 2); |
There was a problem hiding this comment.
The edit button inside dashboard breadcrumb looked miss-placed vertically when using new solution nav. This makes it placed nicer and work well for both old and new nav.
Before:
After:
I wonder if we should improve it further and use the same placement pattern and a real button (EuiButtonIcon instead of EuiIcon) for it
| <> | ||
| {dashboardTitle} | ||
| <EuiIcon | ||
| tabIndex={0} |
There was a problem hiding this comment.
slightly fixing a11y for this edit button, but I wonder if we should improve it further and use the same placement pattern and a real button (EuiButtonIcon instead of EuiIcon) for it
|
|
||
| import { QueryClient } from '@tanstack/react-query'; | ||
|
|
||
| export const dashboardQueryClient = new QueryClient({ |
There was a problem hiding this comment.
Creating this client allows to re-use favorites cache between landing and dashboard pages
Dosant
added
release_note:enhancement
backport:skip
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
nreese
left a comment
nreese
left a comment
There was a problem hiding this comment.
kibana-presentation changes LGTM
code review, tested in chrome
stratoula
left a comment
stratoula
left a comment
There was a problem hiding this comment.
This is cute! LGTM! I only tested the ES|QL starred queries
|
@elasticmachine merge upstream |
There was a problem hiding this comment.
Hi Anton! Thanks for working on this. Please see the comments below:
- I'm noticing some styles/animations that come built in with EUI are overcrowding this microinteraction we're adding. I would like it if we could disable some of this EUI styles, something like this:
.euiButtonIcon:hover {
transform: none !important;
background: none;
}
We should leave a comment explaining why we're disabling this behavior. Something like to avoid conflict with star dust animation.
- For the Dashboards case I don't think you need
margin-top: -2pxonStardustWrapper. It's causing the star to look misaligned with the context on its left.
- We need to account for when the user has chosen prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.star.active svg {
animation: none;
}
.star.active .stardust {
animation: none;
}
.star.active .stardust circle {
animation: none;
}
}
…vorite-dash-from-within
…vorite-dash-from-within
andreadelrio
left a comment
andreadelrio
left a comment
There was a problem hiding this comment.
@Dosant Left a comment about simplifying some style code. Approving now assuming you can take care of it. Thanks for bringing some delight to Kibana's UI!
...ges/shared/content-management/favorites/favorites_public/src/components/stardust_wrapper.tsx
Show resolved
Hide resolved
…vorite-dash-from-within
eokoneyo
left a comment
eokoneyo
left a comment
There was a problem hiding this comment.
Tested locally... changes look good! ❇️
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
History
cc @Dosant |
- Adds "stardust" effect suggested by @andreadelrio here elastic#200315 (comment) both to Dashboard And ESQL star https://github.com/user-attachments/assets/96babced-7ffd-446b-a94a-e9681c627e44 https://github.com/user-attachments/assets/44273f8b-6ff6-4753-9ccf-d62a0feca12d - Adds favorite button to dashboard page next to the breadcrumb (should look good for both old and new nav)    
|
Added |
8 participants
stardust1.mov
stardust2.mov