codyml commented on code in PR #21351:
URL: https://github.com/apache/superset/pull/21351#discussion_r990205325
##########
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;
Review Comment:
Agreed that this would work for the D2D case and is definitely cleaner, but
I was trying to make it easy to add additional menu items to the contextual
menu in the future (e.g. other drilling operations). The way I have it now,
you'd just add a new element for the menu items to `menuItems` and you'd add a
new expression to the array that gets reduced into `itemsCount` and it should
still work. Do you think that's an over-optimization at this point though?
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
