feat: Support further drill by in the modal

superset-frontend/packages/superset-ui-core/src/chart/components/SuperChart.tsx

@@ -86,6 +86,10 @@ export type Props = Omit<SuperChartCoreProps, 'chartProps'> &
  * If not defined, NoResultsComponent is used
  */
  noResults?: ReactNode;
+ /**
+ * Determines is the context menu related to the chart is open
+ */
+ inContextMenu?: boolean;
  };
 
 type PropsWithDefault = Props & Readonly<typeof defaultProps>;

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

@@ -29,6 +29,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
  Behavior,
  ContextMenuFilters,
+ ensureIsArray,
  FeatureFlag,
  getChartMetadataRegistry,
  isFeatureEnabled,
@@ -39,21 +40,33 @@ import {
 import { RootState } from 'src/dashboard/types';
 import { findPermission } from 'src/utils/findPermission';
 import { Menu } from 'src/components/Menu';
-import { AntdDropdown as Dropdown } from 'src/components';
-import { DrillDetailMenuItems } from './DrillDetail';
-import { getMenuAdjustedY } from './utils';
-import { updateDataMask } from '../../dataMask/actions';
-import { MenuItemTooltip } from './DisabledMenuItemTooltip';
-import { DrillByMenuItems } from './DrillBy/DrillByMenuItems';
+import { AntdDropdown as Dropdown } from 'src/components/index';
+import { updateDataMask } from 'src/dataMask/actions';
+import { DrillDetailMenuItems } from '../DrillDetail';
+import { getMenuAdjustedY } from '../utils';
+import { MenuItemTooltip } from '../DisabledMenuItemTooltip';
+import { DrillByMenuItems } from '../DrillBy/DrillByMenuItems';
 
+export enum ContextMenuItem {
+ CrossFilter,
+ DrillToDetail,
+ DrillBy,
+ All,
+}
 export interface ChartContextMenuProps {
  id: number;
  formData: QueryFormData;
  onSelection: () => void;
  onClose: () => void;
+ additionalConfig?: {
+ crossFilter?: Record<string, any>;
+ drillToDetail?: Record<string, any>;
+ drillBy?: Record<string, any>;
+ };
+ displayedItems?: ContextMenuItem[] | ContextMenuItem;
 }
 
-export interface Ref {
+export interface ChartContextMenuRef {
  open: (
  clientX: number,
  clientY: number,
@@ -62,8 +75,15 @@ export interface Ref {
 }
 
 const ChartContextMenu = (
- { id, formData, onSelection, onClose }: ChartContextMenuProps,
- ref: RefObject<Ref>,
+ {
+ id,
+ formData,
+ onSelection,
+ onClose,
+ displayedItems = ContextMenuItem.All,
+ additionalConfig,
+ }: ChartContextMenuProps,
+ ref: RefObject<ChartContextMenuRef>,
 ) => {
  const theme = useTheme();
  const dispatch = useDispatch();
@@ -74,6 +94,10 @@ const ChartContextMenu = (
  ({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
  );
 
+ const isDisplayed = (item: ContextMenuItem) =>
+ displayedItems === ContextMenuItem.All ||
+ ensureIsArray(displayedItems).includes(item);
+
  const [{ filters, clientX, clientY }, setState] = useState<{
  clientX: number;
  clientY: number;
@@ -83,13 +107,19 @@ const ChartContextMenu = (
  const menuItems = [];
 
  const showDrillToDetail =
- isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) && canExplore;
+ isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) &&
+ canExplore &&
+ isDisplayed(ContextMenuItem.DrillToDetail);
 
- const showDrillBy = isFeatureEnabled(FeatureFlag.DRILL_BY) && canExplore;
+ const showDrillBy =
+ isFeatureEnabled(FeatureFlag.DRILL_BY) &&
+ canExplore &&
+ isDisplayed(ContextMenuItem.DrillBy);
+
+ const showCrossFilters =
+ isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+ isDisplayed(ContextMenuItem.CrossFilter);
 
- const showCrossFilters = isFeatureEnabled(
- FeatureFlag.DASHBOARD_CROSS_FILTERS,
- );
  const isCrossFilteringSupportedByChart = getChartMetadataRegistry()
  .get(formData.viz_type)
  ?.behaviors?.includes(Behavior.INTERACTIVE_CHART);
@@ -108,7 +138,7 @@ const ChartContextMenu = (
  itemsCount = 1; // "No actions" appears if no actions in menu
  }
 
- if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+ if (showCrossFilters) {
  const isCrossFilterDisabled =
  !isCrossFilteringSupportedByChart ||
  !crossFiltersEnabled ||
@@ -190,6 +220,7 @@ const ChartContextMenu = (
  contextMenuY={clientY}
  onSelection={onSelection}
  submenuIndex={showCrossFilters ? 2 : 1}
+ {...(additionalConfig?.drillToDetail || {})}
  />,
  );
  }
@@ -205,9 +236,11 @@ const ChartContextMenu = (
  <DrillByMenuItems
  filters={filters?.drillBy?.filters}
  groupbyFieldName={filters?.drillBy?.groupbyFieldName}
+ onSelection={onSelection}
  formData={formData}
  contextMenuY={clientY}
  submenuIndex={submenuIndex}
+ {...(additionalConfig?.drillBy || {})}
  />,
  );
  }
@@ -241,7 +274,7 @@ const ChartContextMenu = (
  return ReactDOM.createPortal(
  <Dropdown
  overlay={
- <Menu>
+ <Menu className="chart-context-menu" data-test="chart-context-menu">
  {menuItems.length ? (
  menuItems
  ) : (

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

@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FeatureFlag } from '@superset-ui/core';
+import { render, screen } from 'spec/helpers/testing-library';
+import { renderHook } from '@testing-library/react-hooks';
+import mockState from 'spec/fixtures/mockState';
+import { sliceId } from 'spec/fixtures/mockChartQueries';
+import { noOp } from 'src/utils/common';
+import { useContextMenu } from './useContextMenu';
+import { ContextMenuItem } from './ChartContextMenu';
+
+const CONTEXT_MENU_TEST_ID = 'chart-context-menu';
+
+// @ts-ignore
+global.featureFlags = {
+ [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+ [FeatureFlag.DRILL_TO_DETAIL]: true,
+ [FeatureFlag.DRILL_BY]: true,
+};
+
+const setup = ({
+ onSelection = noOp,
+ displayedItems = ContextMenuItem.All,
+ additionalConfig = {},
+}: {
+ onSelection?: () => void;
+ displayedItems?: ContextMenuItem | ContextMenuItem[];
+ additionalConfig?: Record<string, any>;
+} = {}) => {
+ const { result } = renderHook(() =>
+ useContextMenu(
+ sliceId,
+ { datasource: '1__table', viz_type: 'pie' },
+ onSelection,
+ displayedItems,
+ additionalConfig,
+ ),
+ );
+ render(result.current.contextMenu, {
+ useRedux: true,
+ initialState: {
+ ...mockState,
+ user: {
+ ...mockState.user,
+ roles: { Admin: [['can_explore', 'Superset']] },
+ },
+ },
+ });
+ return result;
+};
+
+test('Context menu renders', () => {
+ const result = setup();
+ expect(screen.queryByTestId(CONTEXT_MENU_TEST_ID)).not.toBeInTheDocument();
+ result.current.onContextMenu(0, 0, {});
+ expect(screen.getByTestId(CONTEXT_MENU_TEST_ID)).toBeInTheDocument();
+ expect(screen.getByText('Add cross-filter')).toBeInTheDocument();
+ expect(screen.getByText('Drill to detail')).toBeInTheDocument();
+ expect(screen.getByText('Drill by')).toBeInTheDocument();
+});
+
+test('Context menu contains all items only', () => {
+ const result = setup({
+ displayedItems: [ContextMenuItem.DrillToDetail, ContextMenuItem.DrillBy],
+ });
+ result.current.onContextMenu(0, 0, {});
+ expect(screen.queryByText('Add cross-filter')).not.toBeInTheDocument();
+ expect(screen.getByText('Drill to detail')).toBeInTheDocument();
+ expect(screen.getByText('Drill by')).toBeInTheDocument();
+});

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

@@ -0,0 +1,82 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { BaseFormData, ContextMenuFilters } from '@superset-ui/core';
+import ChartContextMenu, {
+ ChartContextMenuRef,
+ ContextMenuItem,
+} from './ChartContextMenu';
+
+export const useContextMenu = (
+ chartId: number,
+ formData: BaseFormData & { [key: string]: any },
+ onSelection?: (...args: any) => void,
+ displayedItems?: ContextMenuItem[] | ContextMenuItem,
+ additionalConfig?: {
+ crossFilter?: Record<string, any>;
+ drillToDetail?: Record<string, any>;
+ drillBy?: Record<string, any>;
+ },
+) => {
+ const contextMenuRef = useRef<ChartContextMenuRef>(null);
+ const [inContextMenu, setInContextMenu] = useState(false);
+ const onContextMenu = (
+ offsetX: number,
+ offsetY: number,
+ filters: ContextMenuFilters,
+ ) => {
+ contextMenuRef.current?.open(offsetX, offsetY, filters);
+ setInContextMenu(true);
+ };
+
+ const handleContextMenuSelected = useCallback(
+ (...args: any) => {
+ setInContextMenu(false);
+ onSelection?.(...args);
+ },
+ [onSelection],
+ );
+
+ const handleContextMenuClosed = useCallback(() => {
+ setInContextMenu(false);
+ }, []);
+
+ const contextMenu = useMemo(
+ () => (
+ <ChartContextMenu
+ ref={contextMenuRef}
+ id={chartId}
+ formData={formData}
+ onSelection={handleContextMenuSelected}
+ onClose={handleContextMenuClosed}
+ displayedItems={displayedItems}
+ additionalConfig={additionalConfig}
+ />
+ ),
+ [
+ additionalConfig,
+ chartId,
+ displayedItems,
+ formData,
+ handleContextMenuClosed,
+ handleContextMenuSelected,
+ ],
+ );
+ return { contextMenu, inContextMenu, onContextMenu };
+};

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -31,7 +31,7 @@ import {
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
 import { EmptyStateBig, EmptyStateSmall } from 'src/components/EmptyState';
 import { ChartSource } from 'src/types/ChartSource';
-import ChartContextMenu from './ChartContextMenu';
+import ChartContextMenu from './ChartContextMenu/ChartContextMenu';
 
 const propTypes = {
  annotationData: PropTypes.object,

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

@@ -19,7 +19,7 @@
 import React from 'react';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
-import fetchMock from 'fetch-mock';
+import { noOp } from 'src/utils/common';
 import DrillByChart from './DrillByChart';
 
 const chart = chartQueries[sliceId];
@@ -28,6 +28,8 @@ const setup = (overrides: Record<string, any> = {}, result?: any) =>
  render(
  <DrillByChart
  formData={{ ...chart.form_data, ...overrides }}
+ onContextMenu={noOp}
+ inContextMenu={false}
  result={result}
  />,
  {
@@ -38,8 +40,6 @@ const setup = (overrides: Record<string, any> = {}, result?: any) =>
 const waitForRender = (overrides: Record<string, any> = {}) =>
  waitFor(() => setup(overrides));
 
-afterEach(fetchMock.restore);
-
 test('should render', async () => {
  const { container } = await waitForRender();
  expect(container).toBeInTheDocument();