chore(explore): added tooltips to timepicker

[zhaoyongjie]

SUMMARY

The new timepicker introduce date expression function, so need some online help.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

Tested on latest Firefox

ADDITIONAL INFORMATION

• Has associated issue: [Explore] Time picker custom setting for timezone  #12302
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[junlincc]

@mihir174 we will need a better UI for timepicker advanced tooltip. can you provide design support in 2 steps, 1. giving some lightweight suggestions to ship this asap 2. incorporate design system guidelines for long term
thanks! 🙏

[codecov-io]

Codecov Report

Merging #12580 (822ea5c) into master (9e58eb8) will decrease coverage by 0.37%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #12580      +/-   ##
==========================================
- Coverage   66.73%   66.36%   -0.38%     
==========================================
  Files        1021     1022       +1     
  Lines       49967    49978      +11     
  Branches     4890     4891       +1     
==========================================
- Hits        33347    33168     -179     
- Misses      16491    16685     +194     
+ Partials      129      125       -4     

Flag	Coverage Δ
cypress	50.92% <100.00%> (+0.40%)	⬆️
javascript	60.91% <61.53%> (+<0.01%)	⬆️
python	63.21% <ø> (-0.79%)	⬇️

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

Impacted Files	Coverage Δ
...s/controls/DateFilterControl/DateFilterControl.tsx	85.32% <ø> (ø)
...controls/DateFilterControl/frame/AdvancedFrame.tsx	52.00% <100.00%> (+2.00%)	⬆️
...ls/DateFilterControl/frame/DateFunctionTooltip.tsx	100.00% <100.00%> (ø)
superset/db_engines/hive.py	0.00% <0.00%> (-85.72%)	⬇️
superset/sql_validators/postgres.py	50.00% <0.00%> (-50.00%)	⬇️
superset/db_engine_specs/hive.py	54.61% <0.00%> (-29.24%)	⬇️
superset/databases/commands/create.py	83.67% <0.00%> (-8.17%)	⬇️
superset/databases/commands/update.py	85.71% <0.00%> (-8.17%)	⬇️
superset/connectors/sqla/models.py	84.31% <0.00%> (-6.28%)	⬇️
superset/db_engine_specs/sqlite.py	90.62% <0.00%> (-6.25%)	⬇️
... and 22 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 9e58eb8...a10ec06. Read the comment docs.

[junlincc]

can we keep the tooltip open, click outside to close so that user can refer to the content. later when we have the documentation ready, we should add link to the icon. lastly, can we use the same info icon with grey background?
(that whole thing just looks so ugly i can't stand it. 🤦🏾‍♀️) @mihir174

[mistercrunch]

i18n! Let's wrap everything we can in {t('i18n')}

[mistercrunch]

That's a huge tooltip! I'm wondering if we should link out to a new documentation page. Tooltip could say something like Superset supports powerful date/time expressions. For example [show a few examples], click to see learn more in the Superset documentation.

[mihir174]

@zhaoyongjie
If there's a page with the syntax info in Superset docs, we should link to that. If that doesn't exist yet, I think staying in context and having the huge modal makes sense for now.

For the tooltip:

1. i think it would be better if the tooltip didn't cover the inputs - then the user could type while keeping the mouse hovered on the tooltip icon to refer to the syntax
2. @junlincc a persistent tooltip breaks a lot of UI patterns and will be inconsistent. i think if the tooltip doesn't obscure the inputs, users should be able to refer to the content easily
3. here's the correct tooltip icon - https://www.figma.com/file/ToYikUoHLg7fhIBUPZtZb0/Superset-Design-System?node-id=968%3A125277
4. tooltip icon color should be Grey-4 (B2B2B2)

[junlincc]

@srinify Srini, can either Robert or Daniel expedite getting documentation ready for this new feature? all description is written in feat(explore): time picker enhancement 🙏

[zhaoyongjie]

@mihir174
Thank you for pointing these out. I changed the tooltip style again. please check the tooltip screenshot.

cc @junlincc

[junlincc]

tested again, good enough for now. ✅
one suggestion: Reset scroll position on popover reopen.
This is a nice to have, probably not worth too much time doing at this moment.

@graceguo-supercat @villebro can you both take a look and approve this change? we would like to get it in ASAP. 🙏

[graceguo-supercat]

LGTM. Thanks for the extra work, to make a perfect time picker!

[graceguo-supercat]

FYI, I saw Superset had many docs here:
https://superset.apache.org/docs/miscellaneous/issue-codes#issue-1001
we can also share time picker cheatsheet there.

[zhaoyongjie]

make time picker syntax to the miscellaneous section

cc: @junlincc