feat: Implement breadcrumbs in Drill By modal

[kgabryje]

SUMMARY

This PR implements breadcrumbs component in the Drill By modal in order to:

1. Show the history of drillings (currently applied groupings and filters)
2. Allow user to undo drilling actions

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2023-04-12.at.16.59.57.mov

TESTING INSTRUCTIONS

0. Enable DRILL_BY feature flag
1. Perform drill by action
2. Verify that breadcrumbs display the history of drilling - in the format groupby1 (filter1) / groupby2 (filter2) / current_groupby

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags: DRILL_BY
• 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

[codecov]

Codecov Report

Merging #23664 (70d47eb) into master (587e775) will increase coverage by 0.07%.
The diff coverage is 76.02%.

❗ Current head 70d47eb differs from pull request most recent head 44c8073. Consider uploading reports for the commit 44c8073 to get more accurate results

@@            Coverage Diff             @@
##           master   #23664      +/-   ##
==========================================
+ Coverage   68.02%   68.09%   +0.07%     
==========================================
  Files        1919     1922       +3     
  Lines       73932    74039     +107     
  Branches     8067     8101      +34     
==========================================
+ Hits        50291    50417     +126     
+ Misses      21574    21551      -23     
- Partials     2067     2071       +4     

Flag	Coverage Δ
javascript	54.13% <73.71%> (+0.06%)	⬆️

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

Impacted Files	Coverage Δ
...d/packages/superset-ui-chart-controls/src/types.ts	100.00% <ø> (ø)
...ackages/superset-ui-core/src/utils/featureFlags.ts	100.00% <ø> (ø)
...s/plugin-chart-echarts/src/Timeseries/constants.ts	100.00% <ø> (ø)
...gin-chart-echarts/src/Timeseries/transformProps.ts	57.27% <0.00%> (-1.07%)	⬇️
...tend/plugins/plugin-chart-echarts/src/constants.ts	100.00% <ø> (ø)
...tend/plugins/plugin-chart-echarts/src/controls.tsx	76.00% <ø> (ø)
...ugins/preset-chart-xy/src/components/Line/Line.tsx	0.00% <0.00%> (ø)
...preset-chart-xy/src/utils/createMarginSelector.tsx	0.00% <0.00%> (ø)
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (ø)
...frontend/src/SqlLab/components/SqlEditor/index.jsx	56.68% <0.00%> (-1.92%)	⬇️
... and 24 more

... and 5 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[villebro]

LGTM and feels very intuitive! Code looks solid, so once the tests are in this is ready to 🚢 . And a thought for post 3.0: we should standardize on the adhoc filter and groupby controls so that we always know for certain that they're drillable.

[villebro]

Just a thought - would it potentially simplify the code, if we'd do something like this (we'd also do something similar in those other similar code blocks):

  const [currentColumns, setCurrentColumns] = useState(ensureIsArray(column));

Then we wouldn't have to jump between currentColumn and currentColumns or worry about it potentially being undefined.

[lilykuang]

lgtm. Agreed with @villebro on the setCurrentColumns nit

[kgabryje]

@villebro @lilykuang Thanks for comments. I decided to do a bit of refactoring so that currentColumn can only be Column | undefined, not an array, as was originally intended. I think the code and flow is simpler now since we eliminated a special case which would only occur if user clicked on the first breadcrumb of a chart that was initially grouped by 2 columns.
Also, added unit tests for breadcrumbs

[villebro]

Not like I've ever done anything similar 😆😆😆