feat(explore): UX improvements for drag'n'dropping time column

[kgabryje]

SUMMARY

Implements UX improvements for DnD, some of which are prerequisites for drag and dropping time columns.
Changes include:

• sorting columns in dataset panel so that temporal columns are displayed first (so that it's easy find them and drag to time column control)
• making delete button in DndColumnSelect configurable - we don't display the delete button for time column control
• changed logic of canDrop on single selection controls. Before in order to change the selection, user had to remove current selection and drop a new column/metric. Now when control field has a value, user can just drop a new value and it will get swapped

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-07-16.at.13.25.06.mov

TESTING INSTRUCTIONS

Instructions for changes related to time column dnd will be described in a PR in superset-ui
To test the new behaviour of single select controls:
0. Set ENABLE_EXPLORE_DRAG_AND_DROP to True

1. Open a chart that has controls that accept only a single value, e.g. Chord chart.
2. Add values to control fields, then swap them without removing first

ADDITIONAL INFORMATION

• Has associated issue:
• 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

[codecov]

Codecov Report

Merging #15740 (3fa14ec) into master (66c28d6) will increase coverage by 0.00%.
The diff coverage is 75.86%.

❗ Current head 3fa14ec differs from pull request most recent head 6f4761f. Consider uploading reports for the commit 6f4761f to get more accurate results

@@           Coverage Diff           @@
##           master   #15740   +/-   ##
=======================================
  Coverage   76.92%   76.92%           
=======================================
  Files         983      983           
  Lines       51609    51624   +15     
  Branches     6988     6994    +6     
=======================================
+ Hits        39698    39710   +12     
- Misses      11688    11691    +3     
  Partials      223      223           

Flag	Coverage Δ
javascript	71.37% <75.86%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx	44.44% <0.00%> (ø)
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx	64.58% <62.50%> (+0.13%)	⬆️
...d/src/explore/components/DatasourcePanel/index.tsx	80.72% <81.81%> (-0.62%)	⬇️
...ponents/controls/DndColumnSelectControl/Option.tsx	100.00% <100.00%> (ø)
.../controls/DndColumnSelectControl/OptionWrapper.tsx	85.29% <100.00%> (+0.44%)	⬆️

---

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 66c28d6...6f4761f. Read the comment docs.

[zhaoyongjie]

Is this by design?

[junlincc]

yes for now, until we add the generic X axis control.

[junlincc]

/testenv up ENABLE_EXPLORE_DRAG_AND_DROP=true

[github-actions]

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

[rusackas]

/testenv up FEATURE_ENABLE_EXPLORE_DRAG_AND_DROP=true

[github-actions]

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

[zhaoyongjie]

LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.