feat(dashboard): menu improvements, fallback support for Drill to Detail

[codyml]

SUMMARY

This PR does some code cleanup, adds/updates testing, and extends support for Drill to Detail to additional edge cases.

• Code DRYing for right-click and chart header dropdown Drill to Detail menus. Right-click menu and chart header dropdown menu currently relies on some duplicated code between the SliceHeaderControls and Chart components. This PR combines/moves all Drill to Detail code to Chart/DrillDetail.
• Tests for menu items. Drill to Detail menu items currently lacks unit tests. This PR adds some.
• Basic fallback support for right-click Drill to Detail menus for all viz plugins. Right-click Drill to Detail support is currently limited to viz plugins that have been updated to handle the contextmenu event. This PR adds a fallback contextmenu event handler to the ChartRenderer chart wrapper that allows access to Drill to Detail without any filters, just like what's currently possible from the chart header menu.
• Updated menu hierarchy. The right-click menu currently shows all items as a flat list. This PR updates the right-click menu to have a top-level "Drill to detail" menu item that opens the D2D modal with no filters and a "Drill to detail by" submenu that contains "Drill to detail by XXX" menu items that open the D2D modal with filters.
• Support for additional states.: This PR updates the right-click menu and header dropdown menus to behave as follows in the following situations:
  • Viz plugin has not been updated to handle the contextmenu event: right-click menu has enabled "Drill to detail" and enabled "Drill to detail by" submenu containing just a message noting the lack of support. Header dropdown menu has enabled "Drill to detail".
  • Viz plugin has been updated, but the chart doesn't group data by dimension: right-click menu has disabled "Drill to detail" with an explanatory tooltip and disabled "Drill to detail by" submenu. Header dropdown menu has disabled "Drill to detail" with an explanatory tooltip.
  • Viz plugin has been updated and the chart groups data by dimension: right-click menu has enabled "Drill to detail" and enabled "Drill to detail by" submenu. If you right-clicked on a valid dimension value, it'll contain "Drill to detail by" options. If you didn't, it'll contain an explanatory message. Header dropdown menu has enabled "Drill to detail".

Notes for adding/improving Drill to Detail support for viz plugins

• If a plugin hasn't been updated to explicitly support Drill to Detail, header dropdown menu and right-click menu Drill to Detail will work, but the "Drill to detail by" submenu will contain a message saying the chart doesn't have support.
• To update a plugin to support Drill to Detail, handle the contextmenu event such that the onContextMenu chart hook gets called with filters corresponding to whatever dimension(s) the user right-clicked on.
• To mark a plugin as supported, add the Behavior.DRILL_TO_DETAIL behavior to the plugin's ChartMetadata instance. The Drill to Detail menu component checks for this behavior whenever onContextMenu is called without filters to determine if it should show the "not yet supported" message or the "you didn't select a dimension" message. Therefore, if you add the Behavior.DRILL_TO_DETAIL behavior, you can let the fallback handler catch right-clicks to parts of the chart that don't correspond to dimension values and the menu will correctly interpret these clicks as clicks not corresponding to a dimension rather than clicks to an unsupported chart.
• Drill to Detail should be disabled in situations when a viz plugin is not grouping data by dimension, as there aren't any aggregations to de-aggregate. To indicate when this is the case for a viz plugin, add a noAggregations function to the viz plugin's ChartMetadata instance that receives formData as a param and returns true if the chart contains only atomic data.

cc: @kasiazjc @michael-s-molina

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

1. Unsupported chart, header menu
2. Unsupported chart, right-click menu
3. Supported chart w/o aggregations, header menu
4. Supported chart w/o aggregations, right-click menu
5. Supported chart w/ aggregations, header menu
6. Supported chart w/ aggregations, right-click menu on empty space
7. Supported chart w/ aggregations, right-click menu on dimension

Before

Screen.Recording.2022-10-05.at.6.24.25.PM.mov

After

Screen.Recording.2022-10-05.at.6.21.43.PM.mov

TESTING INSTRUCTIONS

• Enable feature flag DRILL_TO_DETAIL
• Test the situations shown in the before/after videos above and make sure they behave as expected
• Make sure the modals open with the indicated filters when clicking "Drill to detail" and "Drill to detail by" options

ADDITIONAL INFORMATION

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

[codecov]

Codecov Report

Merging #21351 (a422706) into master (200bed6) will decrease coverage by 0.02%.
The diff coverage is 53.93%.

❗ Current head a422706 differs from pull request most recent head 7d4f844. Consider uploading reports for the commit 7d4f844 to get more accurate results

@@            Coverage Diff             @@
##           master   #21351      +/-   ##
==========================================
- Coverage   66.84%   66.81%   -0.03%     
==========================================
  Files        1799     1800       +1     
  Lines       68902    68943      +41     
  Branches     7324     7337      +13     
==========================================
+ Hits        46057    46067      +10     
- Misses      20955    20985      +30     
- Partials     1890     1891       +1     

Flag	Coverage Δ
javascript	53.16% <53.93%> (+<0.01%)	⬆️
mysql	?

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

Impacted Files	Coverage Δ
.../packages/superset-ui-core/src/chart/types/Base.ts	100.00% <ø> (ø)
...gins/legacy-plugin-chart-world-map/src/WorldMap.js	0.00% <0.00%> (ø)
...plugins/legacy-plugin-chart-world-map/src/index.js	66.66% <ø> (ø)
...hart-echarts/src/BigNumber/BigNumberTotal/index.ts	66.66% <ø> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	0.00% <0.00%> (ø)
...arts/src/BigNumber/BigNumberWithTrendline/index.ts	66.66% <ø> (ø)
.../plugins/plugin-chart-echarts/src/BoxPlot/index.ts	50.00% <ø> (ø)
...d/plugins/plugin-chart-echarts/src/Funnel/index.ts	50.00% <ø> (ø)
...nd/plugins/plugin-chart-echarts/src/Gauge/index.ts	50.00% <ø> (ø)
...ns/plugin-chart-echarts/src/Graph/EchartsGraph.tsx	0.00% <0.00%> (ø)
... and 40 more

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

[zhaoyongjie]

left a quick suggestion

[michael-s-molina]

Thanks for the awesome PR description @codyml. I have a suggestion while looking at the screenshots. Can we standardize the way we display messages?

For example:

I like disabling the option and showing an icon with a tooltip. Can we do the same for the "Drill to detail by" option? As you can see in the screenshot below, the message is displayed as a sub-item and the text is greyed out which is hard to read. It also forces the user to open the sub-menu before realizing the operation is not supported. I think using the icon plus tooltip also helps when the user already knows the possible causes and just wants to see if the option is enabled or not.

[codyml]

Thanks for the awesome PR description @codyml. I have a suggestion while looking at the screenshots. Can we standardize the way we display messages?

@michael-s-molina that works for me! @kasiazjc any thoughts?

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.