fix(explore): Datepicker glitch on hover outside the modal #15033

kgabryje · 2021-06-08T05:12:01Z

SUMMARY

When user selects a date in antd datepicker and hovers outside of Modal before saving the changes, the date gets reverted to it's initial value. I fixed it by passing initial date to datepicker with defaultValue prop instead of value.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: see linked issue
After:
https://user-images.githubusercontent.com/15073128/121126292-3ba75080-c828-11eb-9a7e-475012c4c6db.mov

TESTING INSTRUCTIONS

Open time selection modal in "Time range" section in Explore.
Select "Range type: Custom" and "Start/End: Specific Date/Time".
Open a datepicker and select some date.
Before you save, hover outside of time range modal and verify that the date didn't reset to the initial value.
Save and verify that the date has changed correctly

ADDITIONAL INFORMATION

Has associated issue: closes [Explore]timepicker calendar glitch on hover outside the modal #15028
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: @junlincc @zhaoyongjie @villebro

junlincc · 2021-06-08T05:15:58Z

/testenv up

github-actions · 2021-06-08T05:16:33Z

@junlincc Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2021-06-08T05:16:34Z

@junlincc Ephemeral environment creation failed. Please check the Actions logs for details.

kgabryje · 2021-06-08T05:28:19Z

/testenv up

junlincc · 2021-06-08T05:30:35Z

Thank you @kgabryje for the quick fix!!
Small issue. Expected initially the date was 7th, then i changed it to 11th, i clicked OK, 11th was saved as new initial date, which should has a blue frame around.
Current behavior, no matter how many times i change to a new date, it's always showing the first date 7th.

Screen.Recording.2021-06-07.at.10.27.27.PM.mov

github-actions · 2021-06-08T05:30:46Z

@kgabryje Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2021-06-08T05:30:47Z

@kgabryje Ephemeral environment creation failed. Please check the Actions logs for details.

codecov · 2021-06-08T05:34:31Z

Codecov Report

Merging #15033 (7a3f7ce) into master (61a438a) will increase coverage by 0.12%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #15033      +/-   ##
==========================================
+ Coverage   77.53%   77.66%   +0.12%     
==========================================
  Files         965      966       +1     
  Lines       49504    49613     +109     
  Branches     6259     6311      +52     
==========================================
+ Hits        38384    38532     +148     
+ Misses      10920    10880      -40     
- Partials      200      201       +1

Flag	Coverage Δ
javascript	`72.78% <ø> (+0.29%)`	⬆️

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

Impacted Files	Coverage Δ
...trols/DateFilterControl/components/CustomFrame.tsx	`92.15% <ø> (ø)`
...nfigModal/FiltersConfigForm/getControlItemsMap.tsx	`91.89% <0.00%> (-5.17%)`	⬇️
...hboard/components/nativeFilters/FilterBar/state.ts	`85.41% <0.00%> (-3.22%)`	⬇️
...c/filters/components/Select/SelectFilterPlugin.tsx	`78.64% <0.00%> (-3.08%)`	⬇️
...rontend/src/SqlLab/components/QueryTable/index.jsx	`61.64% <0.00%> (-2.65%)`	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	`70.03% <0.00%> (-0.55%)`	⬇️
...mponents/nativeFilters/FiltersConfigModal/utils.ts	`67.50% <0.00%> (-0.45%)`	⬇️
...-frontend/src/explore/components/ControlHeader.jsx	`85.71% <0.00%> (ø)`
...rontend/src/dashboard/containers/DashboardPage.tsx	`0.00% <0.00%> (ø)`
...ontend/src/filters/components/Select/buildQuery.ts	`100.00% <0.00%> (ø)`
... and 14 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 61a438a...7a3f7ce. Read the comment docs.

kgabryje · 2021-06-08T05:39:46Z

@junlincc I think it works as expected. The blue frame simply shows today's date, it's not related to past selections 🙂 Check out antd's examples
https://user-images.githubusercontent.com/15073128/121129058-a9ee1200-c82c-11eb-9f87-6f17c4f2d3f2.mov

https://ant.design/components/date-picker/

junlincc · 2021-06-08T05:42:08Z

😅 you are right, please disregard my silly comment. LGTM. @rusackas can you approve if code looks right?

rusackas

LGTM, thanks for the quick fix!

junlincc

product sign-off

* upstream/master: fix(explore): Datepicker glitch on hover outside the modal (apache#15033) Add ming-height to empty tab (apache#14878) Remove nowrap (apache#14954) display all metric results in editor (apache#15031) feat: Add "is_select_query" method to base engine spec to make it possible to override it (apache#15013) fix(dashboard): custom css should be removed on unmount (apache#15025) feat(filter-box): hide druid options if druid not enabled (apache#14921) fix: adding additional configs and colors for queryHistory (apache#14995) chore: rename 'Source' to 'Database' for consistency (apache#15021) chore(ci): fix ci conflict (apache#15016) fix(native-filters): avoid double load on initialization (apache#15012) feat(native-filters): Support default to first value in select filter (apache#14869) docs: required information for OAuth2 configuration (apache#15010) Update index.mdx (apache#14990)

)

fix(explore): Datepicker glitch on hover outside the modal

7a3f7ce

kgabryje requested review from zhaoyongjie and villebro June 8, 2021 05:12

pull-request-size bot added the size/XS label Jun 8, 2021

junlincc added bash! rush! Requires immediate attention #bug:blocking! Blocking issues with high priority labels Jun 8, 2021

apache deleted a comment from github-actions bot Jun 8, 2021

junlincc self-requested a review June 8, 2021 05:42

rusackas approved these changes Jun 8, 2021

View reviewed changes

junlincc approved these changes Jun 8, 2021

View reviewed changes

kgabryje merged commit 0e07a5c into apache:master Jun 8, 2021

cccs-RyanS pushed a commit to CybercentreCanada/superset that referenced this pull request Dec 17, 2021

fix(explore): Datepicker glitch on hover outside the modal (apache#15033

6500f51

)

QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 29, 2021

fix(explore): Datepicker glitch on hover outside the modal (apache#15033

a839473

)

cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024

fix(explore): Datepicker glitch on hover outside the modal (apache#15033

fddb8cd

)

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.3.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(explore): Datepicker glitch on hover outside the modal #15033

fix(explore): Datepicker glitch on hover outside the modal #15033

kgabryje commented Jun 8, 2021

junlincc commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

kgabryje commented Jun 8, 2021

junlincc commented Jun 8, 2021 •

edited

Loading

github-actions bot commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

codecov bot commented Jun 8, 2021

kgabryje commented Jun 8, 2021

junlincc commented Jun 8, 2021

rusackas left a comment

junlincc left a comment

fix(explore): Datepicker glitch on hover outside the modal #15033

fix(explore): Datepicker glitch on hover outside the modal #15033

Conversation

kgabryje commented Jun 8, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

junlincc commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

kgabryje commented Jun 8, 2021

junlincc commented Jun 8, 2021 • edited Loading

github-actions bot commented Jun 8, 2021

github-actions bot commented Jun 8, 2021

codecov bot commented Jun 8, 2021

Codecov Report

kgabryje commented Jun 8, 2021

junlincc commented Jun 8, 2021

rusackas left a comment

Choose a reason for hiding this comment

junlincc left a comment

Choose a reason for hiding this comment

junlincc commented Jun 8, 2021 •

edited

Loading