Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dashboard Usability] Change color of Unsaved changes badge to warning #154253

Merged
merged 6 commits into from
Apr 4, 2023
Merged

[Dashboard Usability] Change color of Unsaved changes badge to warning #154253

merged 6 commits into from
Apr 4, 2023

Conversation

nickpeihl
Copy link
Member

Summary

Change the color of the Unsaved changes badge to warning instead of success.

This also adds the ability for badges in the TopNavBar to have tooltips.

Includes changes from #134696

Fixes #133857

@nickpeihl nickpeihl added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas release_note:skip Skip the PR/issue when compiling release notes v8.8.0 labels Apr 3, 2023
@nickpeihl nickpeihl mentioned this pull request Apr 3, 2023
Closed
9 tasks
@Heenawter Heenawter self-requested a review April 3, 2023 15:06
@nickpeihl nickpeihl marked this pull request as ready for review April 3, 2023 15:20
@nickpeihl nickpeihl requested review from a team as code owners April 3, 2023 15:20
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

Heenawter
Heenawter reviewed Apr 3, 2023
View reviewed changes
Copy link
Contributor

@Heenawter Heenawter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update the text to match @KOTungseth's suggestion from the previous community PR - plus left a few nits, but nothing major :) Tested locally + code review. Will approve once the text is changed.

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx Outdated
badges?: Array<
EuiBadgeProps & {
badgeText: string;
toolTipProps: EuiToolTipProps;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Might be nicer if this was of type Partial<EuiTooltipProps> - that way, we could remove the as EuiToolTipProps in dashboard_top_nav.tsx

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx Outdated
Comment on lines 98 to 102
<EuiToolTip {...toolTipProps}>
<EuiBadge key={`nav-menu-badge-${i}`} {...badgeProps}>
{badgeText}
</EuiBadge>
</EuiToolTip>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Makes me nervous to always wrap every badge with an EuiTooltip, since we're not the only consumer of the TopNavMenu component.... I don't think any other implementation uses badges (searched quickly and couldn't find any), but I wonder if we want to make the toolTipProps optional and conditionally wrap it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also checked for any other consumers that use badges, but didn't see any. But I agree that tooltips could be optional for future consumers. I'm a little surprised tooltip is not already an optional prop on EuiBadge 🤷 . Updated in fb3e1a0.

src/plugins/dashboard/public/dashboard_app/_dashboard_app_strings.ts Outdated
Comment on lines 50 to 53
i18n.translate('dashboard.unsavedChangesBadgeToolTipContent', {
defaultMessage:
'This dashboard has changed since the last time it was saved. To clear this message save the dashboard.',
}),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
i18n.translate('dashboard.unsavedChangesBadgeToolTipContent', {
defaultMessage:
'This dashboard has changed since the last time it was saved. To clear this message save the dashboard.',
}),
i18n.translate('dashboard.unsavedChangesBadgeToolTipContent', {
defaultMessage:
'You have unsaved changes in this dashboard. To remove this label, save the dashboard.',
}),

Source: #134696 (comment)

@nickpeihl nickpeihl requested a review from Heenawter April 3, 2023 18:35
Heenawter
Heenawter approved these changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@Heenawter Heenawter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM 🎉

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id before after diff
dashboard 455.4KB 455.7KB +303.0B

Page load bundle

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

id before after diff
navigation 9.6KB 9.7KB +57.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
securitySolution 432 435 +3

Total ESLint disabled count

id before after diff
securitySolution 512 515 +3

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

rshen91
rshen91 approved these changes Apr 4, 2023
View reviewed changes
Copy link
Contributor

@rshen91 rshen91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! LGTM

@nickpeihl nickpeihl merged commit e9bed32 into elastic:main Apr 4, 2023
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Apr 4, 2023
@Heenawter Heenawter mentioned this pull request Apr 10, 2023
Merged
5 tasks
Heenawter added a commit that referenced this pull request Apr 11, 2023
@Heenawter
[Dashboard] Fix unsaved changes badge React error (#154607)
ddd44b8 
## Summary

### Before

Since adding the tooltip to the unsaved changes badge in
#154253, React was throwing an
error to the console because the element in the top nav no longer had a
unique key:


https://user-images.githubusercontent.com/8698078/230927494-7cc931f8-68c6-4904-b99e-99b1b2872f94.mov

<br>


![image](https://user-images.githubusercontent.com/8698078/230925422-32f8ea9d-8c22-470e-a94e-0aa9eda0b4de.png)


### After

This PR fixes this by adding the key **to the tooltip** if the badge has
one; if it doesn't have a tooltip, then the key is added directly to the
`EuiBadge` as expected. It also ensures that the tooltip has the proper
a11y support (cc @elastic/kibana-accessibility) by adding the badge to
the tab order and using the <a
href="https://github.com/elastic/eui/blob/main/wiki/component-design.md#pass-through-props">pass-through-props</a>
to ensure that the tooltip shows up on focus:



https://user-images.githubusercontent.com/8698078/230929396-5a423c18-4a5f-410c-a3d3-9005022f8060.mov



### Checklist

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Heenawter Heenawter Heenawter approved these changes

@rshen91 rshen91 rshen91 approved these changes

Assignees
No one assigned
Labels
backport:skip This commit does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas v8.8.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Dashboard] Warning Color & Tooltip for Unsaved Changes Badge
8 participants
@nickpeihl @elasticmachine @kibana-ci @Heenawter @rshen91 @kibanamachine @10xtechie @ThomThomson