fix(Explore): "Customize" tab rendering behavior

[geido]

SUMMARY

The bug was the consequence of different issues.

Issue with getDerivedStateFromProps:

This PR removes the getDerivedStateFromProps introduced by PR #14493 that was causing the Collapse to not re-render when changing viz type as the new props were not propagated down to the render phase. The removal does not seem to affect the functionality for which that PR was made. @villebro your confirmation will be appreciated here.

Issue with the Antdesign Collapse:

This problem seems related to a bug with Antdesign when multiple re-renders happen while the Collapse is opening up, causing the Collapse to render invisible (0 height). By forcing the rendering of a Loading component after changing the viz type/datasource, Antdesign is then able to properly render the Collapse.

Fixes: #15829

BEFORE

126574252-c1fb3e64-712e-4dc9-abf0-fd4306b36b44.mov

AFTER

DEV.Number.of.mp4

TESTING INSTRUCTIONS

1. Open a chart in Explore
2. Go to the Customize tab and make sure it opens correctly
3. Change viz type
4. Go again to the Customize tab and make sure it opens correctly

ADDITIONAL INFORMATION

• Has associated issue: [explore] customize tab is broken #15829
• 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

[geido]

@rosemarie-chiu @jinghua-qa

[codecov]

Codecov Report

Merging #15841 (de18a0f) into master (f6fe29d) will decrease coverage by 0.24%.
The diff coverage is 63.54%.

❗ Current head de18a0f differs from pull request most recent head 548aace. Consider uploading reports for the commit 548aace to get more accurate results

@@            Coverage Diff             @@
##           master   #15841      +/-   ##
==========================================
- Coverage   77.13%   76.88%   -0.25%     
==========================================
  Files         984      984              
  Lines       51706    51796      +90     
  Branches     6995     7032      +37     
==========================================
- Hits        39882    39825      -57     
- Misses      11600    11746     +146     
- Partials      224      225       +1     

Flag	Coverage Δ
hive	?
javascript	71.80% <63.54%> (-0.02%)	⬇️
presto	?

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

Impacted Files	Coverage Δ
...frontend/src/dashboard/components/Header/index.jsx	66.42% <0.00%> (-0.97%)	⬇️
...nfigModal/FiltersConfigForm/getControlItemsMap.tsx	87.50% <ø> (+1.53%)	⬆️
...-frontend/src/views/CRUD/welcome/ActivityTable.tsx	81.00% <ø> (+2.15%)	⬆️
superset/config.py	91.24% <ø> (ø)
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx	41.48% <16.66%> (-2.97%)	⬇️
.../src/explore/components/ControlPanelsContainer.tsx	76.19% <25.00%> (-2.98%)	⬇️
...tersConfigModal/FiltersConfigForm/DefaultValue.tsx	25.00% <50.00%> (+4.16%)	⬆️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	74.34% <61.53%> (+0.58%)	⬆️
...set-frontend/src/views/CRUD/welcome/ChartTable.tsx	72.83% <63.63%> (-5.11%)	⬇️
...frontend/src/views/CRUD/welcome/DashboardTable.tsx	64.51% <63.63%> (-1.74%)	⬇️
... and 25 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 f6fe29d...548aace. Read the comment docs.

[geido]

/testenv up

[github-actions]

@geido Ephemeral environment spinning up at http://52.11.127.107:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[rosemarie-chiu]

@geido I'm not sure if this is related to this fix, but see my video

Steps:

1. Select bar chart and go to customize tab and collapse charts option
2. Go back to data tab and select pie chart
3. Go to customize tab and observe that the charts option is in expand mode (up arrow) but UI still blank
4. Only after clicking collapse and expand again UI shows

If we to save the state of collapse, then I think UI should also reflect that it is currently in collapse (down arrow)

CleanShot.2021-07-22.at.10.13.58.mp4

[geido]

@rosemarie-chiu thanks for spotting that one. From a first look, it appears to be a problem related to the original one. I will try to fix this issue as well with this PR. I'll ping you once I am done with this additional change.

[geido]

@junlincc @rosemarie-chiu this should be good to go for another round of testing. I have updated the description as well.

[geido]

/testenv up

[github-actions]

@geido Ephemeral environment spinning up at http://35.164.243.123:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[rosemarie-chiu]

nice! Customize tab always have all section expanded. LGTM!

[rusackas]

LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.