-
Notifications
You must be signed in to change notification settings - Fork 14k
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.
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
feat(explore): Implement data table empty states #18679
Conversation
Codecov Report
@@ Coverage Diff @@
## master #18679 +/- ##
==========================================
+ Coverage 66.25% 66.34% +0.08%
==========================================
Files 1604 1619 +15
Lines 62807 62941 +134
Branches 6333 6343 +10
==========================================
+ Hits 41613 41756 +143
+ Misses 19542 19533 -9
Partials 1652 1652
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
0ae40ec
to
480439c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two translation comments, other than that LGTM
return ( | ||
<EmptyStateMedium | ||
image="document.svg" | ||
title={t(`No ${type} were returned for this query`)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need to translate this like this:
title={t(`No ${type} were returned for this query`)} | |
title={t(`No %s were returned for this query`, type)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, we probably need to translate these like this to make sure the translators have the necessary context to fully translate the type strings:
if (type === 'sample') {
return t(`No samples were returned for this query`)
}
if (type === 'result') {
return t(`No results were returned for this query`)
}
I think this getting this right is pretty important, as these will be very visible fixtures in the application.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
return ( | ||
<EmptyStateMedium | ||
image="document.svg" | ||
title={t(`Run a query to display ${type}`)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
SUMMARY
This PR implements chart empty states for 3 scenarios:
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
CC @kasiazjc
https://app.shortcut.com/preset/story/36403/explore-empty-states