zhaoyongjie commented on code in PR #21351:
URL: https://github.com/apache/superset/pull/21351#discussion_r990218354
##########
superset-frontend/src/components/Chart/ChartContextMenu.tsx:
##########
@@ -23,90 +23,102 @@ import React, {
useImperativeHandle,
useState,
} from 'react';
-import { QueryObjectFilterClause, t, styled } from '@superset-ui/core';
+import ReactDOM from 'react-dom';
+import { useSelector } from 'react-redux';
+import {
+ BinaryQueryObjectFilterClause,
+ FeatureFlag,
+ isFeatureEnabled,
+ QueryFormData,
+} from '@superset-ui/core';
+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 ReactDOM from 'react-dom';
+import { DrillDetailMenuItems } from './DrillDetail';
const MENU_ITEM_HEIGHT = 32;
const MENU_VERTICAL_SPACING = 32;
export interface ChartContextMenuProps {
- id: string;
- onSelection: (filters: QueryObjectFilterClause[]) => void;
+ id: number;
+ formData: QueryFormData;
+ onSelection: () => void;
onClose: () => void;
}
export interface Ref {
open: (
- filters: QueryObjectFilterClause[],
clientX: number,
clientY: number,
+ filters?: BinaryQueryObjectFilterClause[],
) => void;
}
-const Filter = styled.span`
- ${({ theme }) => `
- font-weight: ${theme.typography.weights.bold};
- color: ${theme.colors.primary.base};
- `}
-`;
-
const ChartContextMenu = (
- { id, onSelection, onClose }: ChartContextMenuProps,
+ { id, formData, onSelection, onClose }: ChartContextMenuProps,
ref: RefObject<Ref>,
) => {
- const [state, setState] = useState<{
- filters: QueryObjectFilterClause[];
+ const canExplore = useSelector((state: RootState) =>
+ findPermission('can_explore', 'Superset', state.user?.roles),
+ );
+
+ const [{ filters, clientX, clientY }, setState] = useState<{
clientX: number;
clientY: number;
- }>({ filters: [], clientX: 0, clientY: 0 });
+ filters?: BinaryQueryObjectFilterClause[];
+ }>({ clientX: 0, clientY: 0 });
- const menu = (
- <Menu>
- {state.filters.map((filter, i) => (
- <Menu.Item key={i} onClick={() => onSelection([filter])}>
- {`${t('Drill to detail by')} `}
- <Filter>{filter.formattedVal}</Filter>
- </Menu.Item>
- ))}
- {state.filters.length === 0 && (
- <Menu.Item key="none" onClick={() => onSelection([])}>
- {t('Drill to detail')}
- </Menu.Item>
- )}
- {state.filters.length > 1 && (
- <Menu.Item key="all" onClick={() => onSelection(state.filters)}>
- {`${t('Drill to detail by')} `}
- <Filter>{t('all')}</Filter>
- </Menu.Item>
- )}
- </Menu>
- );
+ const menuItems = [];
+ const showDrillToDetail =
+ isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) && canExplore;
+
+ if (showDrillToDetail) {
+ menuItems.push(
+ <DrillDetailMenuItems
+ chartId={id}
+ formData={formData}
+ isContextMenu
+ filters={filters}
+ onSelection={onSelection}
+ />,
+ );
+ }
const open = useCallback(
- (filters: QueryObjectFilterClause[], clientX: number, clientY: number) => {
+ (
+ clientX: number,
+ clientY: number,
+ filters?: BinaryQueryObjectFilterClause[],
+ ) => {
// Viewport height
const vh = Math.max(
document.documentElement.clientHeight || 0,
window.innerHeight || 0,
);
- // +1 for automatically added options such as 'All' and 'Drill to detail'
- const itemsCount = filters.length + 1;
+ const itemsCount =
+ [
+ showDrillToDetail ? 2 : 0, // Drill to detail always has 2 top-level
menu items
+ ].reduce((a, b) => a + b, 0) || 1; // "No actions" appears if no
actions in menu
+
const menuHeight = MENU_ITEM_HEIGHT * itemsCount + MENU_VERTICAL_SPACING;
// Always show the context menu inside the viewport
const adjustedY = vh - clientY < menuHeight ? vh - menuHeight : clientY;
- setState({ filters, clientX, clientY: adjustedY });
+ setState({
+ clientX,
+ clientY: adjustedY,
+ filters,
+ });
// Since Ant Design's Dropdown does not offer an imperative API
// and we can't attach event triggers to charts SVG elements, we
// use a hidden span that gets clicked on when receiving click events
// from the charts.
document.getElementById(`hidden-span-${id}`)?.click();
},
- [id],
+ [id, showDrillToDetail],
Review Comment:
not true, `isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL)` is a static value.
it depends on config.py.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
