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.

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): Add empty state to annotations #20160

Merged
merged 3 commits into from
May 31, 2022

Conversation

kgabryje
Copy link
Member

@kgabryje kgabryje commented May 23, 2022

SUMMARY

When there's no annotation sources available, display an empty state with a link to annotation layers view.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

image

TESTING INSTRUCTIONS

  1. Make sure that you have no annotation sources available
  2. Try to add an annotation to a chart, make sure that an empty state with a link to annotation layers page appears when you try to select an annotation source

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CC @kasiazjc

@kgabryje kgabryje requested review from villebro and geido May 23, 2022 14:08
@kgabryje kgabryje changed the title Feat/annotations empty state feat(explore): Add empty state to annotations May 23, 2022
Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

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

Very nice, the previous behavior caused a lot of clicking back and forth, this greatly clarifies + simplifies the flow 👍 LGTM (the comment is more thinking about better ways of translating React components where the translation text needs to flow into its children)

Comment on lines +116 to +123
{t('Add an annotation layer')}{' '}
<a
href="/annotationlayermodelview/list"
target="_blank"
rel="noopener noreferrer"
>
{t('here')}
</a>
Copy link
Member

Choose a reason for hiding this comment

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

This isn't the only place where we have this type of translation logic, but splitting up a translation like this can be problematic for languages that have different sentence structure/order than English. But since I don't have a better proposal at this time we can surely live with this. But maybe there's a more modern translation library out there that more natively supports these types of Reacty-y use cases better.

Copy link
Member

Choose a reason for hiding this comment

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

..aaand some quick googling turned up this: https://react.i18next.com/

Copy link
Member Author

@kgabryje kgabryje May 31, 2022

Choose a reason for hiding this comment

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

Good point. I'm not very familiar with the translation logic. Do you think it'd be a big project to switch to using this library?

@codecov
Copy link

codecov bot commented May 23, 2022

Codecov Report

Merging #20160 (96eedb0) into master (c8fe518) will decrease coverage by 0.01%.
The diff coverage is 66.66%.

❗ Current head 96eedb0 differs from pull request most recent head 48b3e5e. Consider uploading reports for the commit 48b3e5e to get more accurate results

@@            Coverage Diff             @@
##           master   #20160      +/-   ##
==========================================
- Coverage   66.47%   66.46%   -0.02%     
==========================================
  Files        1727     1721       -6     
  Lines       64724    64524     -200     
  Branches     6822     6811      -11     
==========================================
- Hits        43024    42884     -140     
+ Misses      19969    19907      -62     
- Partials     1731     1733       +2     
Flag Coverage Δ
javascript 51.34% <66.66%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...erset-frontend/src/components/EmptyState/index.tsx 76.19% <ø> (ø)
.../src/explore/components/controls/SelectControl.jsx 60.71% <ø> (ø)
...ontrols/AnnotationLayerControl/AnnotationLayer.jsx 74.25% <66.66%> (-0.14%) ⬇️
...rset-frontend/src/components/CachedLabel/index.tsx 50.00% <0.00%> (-33.34%) ⬇️
...set-frontend/src/explore/components/ChartPills.tsx 88.88% <0.00%> (-11.12%) ⬇️
...eModal/DatabaseConnectionForm/CommonParameters.tsx 85.71% <0.00%> (-4.29%) ⬇️
...ntend/src/explore/components/ExploreChartPanel.jsx 70.49% <0.00%> (-3.71%) ⬇️
...frontend/src/dashboard/components/Header/index.jsx 56.80% <0.00%> (-2.60%) ⬇️
...erset-frontend/src/components/Chart/chartAction.js 53.79% <0.00%> (-1.48%) ⬇️
superset/utils/decorators.py 92.85% <0.00%> (-1.35%) ⬇️
... and 51 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c8fe518...48b3e5e. Read the comment docs.

Copy link
Member

@stephenLYZ stephenLYZ left a comment

Choose a reason for hiding this comment

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

LGTM!

@kgabryje kgabryje force-pushed the feat/annotations-empty-state branch from 253075f to 48b3e5e Compare May 31, 2022 11:51
@kgabryje kgabryje merged commit 0ee1f49 into apache:master May 31, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
* feat(explore): Add empty state to annotations

* Set line height for small empty state description

* Simplify code
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels preset-io size/M 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants