feat: Improves the Drill By feature

superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts

@@ -23,13 +23,23 @@ import {
   ComponentType,
 } from 'react';
 import type { Editor } from 'brace';
+import { BaseFormData } from '../query';
+import { JsonResponse } from '../connection';
 
 /**
  * A function which returns text (or marked-up text)
  * If what you want is a react component, don't use this. Use React.ComponentType instead.
  */
 type ReturningDisplayable<P = void> = (props: P) => string | ReactElement;
 
+/**
+ * A function which returns the drill by options for a given dataset and chart's formData.
+ */
+export type LoadDrillByOptions = (
+  datasetId: number,
+  formData: BaseFormData,
+) => Promise<JsonResponse>;
+
 /**
  * This type defines all available extensions of Superset's default UI.
  * Namespace the keys here to follow the form of 'some_domain.functionality.item'.
@@ -193,6 +203,7 @@ export interface CustomAutocomplete extends AutocompleteItem {
 
 export type Extensions = Partial<{
   'alertsreports.header.icon': ComponentType;
+  'load.drillby.options': LoadDrillByOptions;
   'embedded.documentation.configuration_details': ComponentType<ConfigDetailsProps>;
   'embedded.documentation.description': ReturningDisplayable;
   'embedded.documentation.url': string;

superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx

@@ -18,6 +18,7 @@
  */
 import {
   forwardRef,
+  Key,
   ReactNode,
   RefObject,
   useCallback,
@@ -104,6 +105,7 @@ const ChartContextMenu = (
   const crossFiltersEnabled = useSelector<RootState, boolean>(
     ({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
   );
+  const [openKeys, setOpenKeys] = useState<Key[]>([]);
 
   const isDisplayed = (item: ContextMenuItem) =>
     displayedItems === ContextMenuItem.All ||
@@ -254,6 +256,8 @@ const ChartContextMenu = (
         formData={formData}
         contextMenuY={clientY}
         submenuIndex={submenuIndex}
+        open={openKeys.includes('drill-by-submenu')}
+        key="drill-by-submenu"
         {...(additionalConfig?.drillBy || {})}
       />,
     );
@@ -288,7 +292,13 @@ const ChartContextMenu = (
   return ReactDOM.createPortal(
     <Dropdown
       overlay={
-        <Menu className="chart-context-menu" data-test="chart-context-menu">
+        <Menu
+          className="chart-context-menu"
+          data-test="chart-context-menu"
+          onOpenChange={openKeys => {
+            setOpenKeys(openKeys);
+          }}
+        >
           {menuItems.length ? (
             menuItems
           ) : (

superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx

@@ -31,11 +31,17 @@ import { DrillByMenuItems, DrillByMenuItemsProps } from './DrillByMenuItems';
 
 /* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect*"] }] */
 
-const DATASET_ENDPOINT = 'glob:*/api/v1/dataset/7';
+const DATASET_ENDPOINT = 'glob:*/api/v1/dataset/7*';
 const CHART_DATA_ENDPOINT = 'glob:*/api/v1/chart/data*';
 const FORM_DATA_KEY_ENDPOINT = 'glob:*/api/v1/explore/form_data';
 const { form_data: defaultFormData } = chartQueries[sliceId];
 
+jest.mock('lodash/debounce', () => (fn: Function & { debounce: Function }) => {
+  // eslint-disable-next-line no-param-reassign
+  fn.debounce = jest.fn();
+  return fn;
+});
+
 const defaultColumns = [
   { column_name: 'col1', groupby: true },
   { column_name: 'col2', groupby: true },
@@ -68,6 +74,7 @@ const renderMenu = ({
       <DrillByMenuItems
         formData={formData ?? defaultFormData}
         drillByConfig={drillByConfig}
+        open
         {...rest}
       />
     </Menu>,