diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx index 41cc6b3c08ea2..c98ca4847265c 100644 --- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx @@ -131,9 +131,9 @@ test('render disabled menu item for unsupported chart', async () => { ); }); -test('render disabled menu item for supported chart, no filters', async () => { +test('render enabled menu item for supported chart, no filters', async () => { renderMenu({ drillByConfig: { filters: [], groupbyFieldName: 'groupby' } }); - await expectDrillByDisabled('Drill by is not available for this data point'); + await expectDrillByEnabled(); }); test('render disabled menu item for supported chart, no columns', async () => { diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx index 2fe711474e116..26ae3e2f32ff4 100644 --- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx @@ -107,9 +107,7 @@ export const DrillByMenuItems = ({ setSearchInput(''); }, [columns.length]); - const hasDrillBy = - ensureIsArray(drillByConfig?.filters).length && - drillByConfig?.groupbyFieldName; + const hasDrillBy = drillByConfig?.groupbyFieldName; const handlesDimensionContextMenu = useMemo( () => diff --git a/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx b/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx index fc7c0b2bf5507..36f86371f8ec6 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx @@ -34,8 +34,11 @@ export interface DrillByBreadcrumb { filters?: BinaryQueryObjectFilterClause[]; } -const BreadcrumbItem = styled(AntdBreadcrumb.Item)<{ isClickable: boolean }>` - ${({ theme, isClickable }) => css` +const BreadcrumbItem = styled(AntdBreadcrumb.Item)<{ + isClickable: boolean; + isHidden: boolean; +}>` + ${({ theme, isClickable, isHidden }) => css` cursor: ${isClickable ? 'pointer' : 'auto'}; color: ${theme.colors.grayscale.light1}; transition: color ease-in ${theme.transitionTiming}s; @@ -45,6 +48,7 @@ const BreadcrumbItem = styled(AntdBreadcrumb.Item)<{ isClickable: boolean }>` &:hover { color: ${isClickable ? theme.colors.grayscale.dark1 : 'inherit'}; } + visibility: ${isHidden ? 'hidden' : 'visible'}; `} `; @@ -58,6 +62,9 @@ export const useDrillByBreadcrumbs = ( useMemo(() => { // the last breadcrumb is not clickable const isClickable = (index: number) => index < breadcrumbsData.length - 1; + const isHidden = (breadcumb: DrillByBreadcrumb) => + ensureIsArray(breadcumb.groupby).length === 0 && + ensureIsArray(breadcumb.filters).length === 0; const getBreadcrumbText = (breadcrumb: DrillByBreadcrumb) => `${ensureIsArray(breadcrumb.groupby) .map(column => column.verbose_name || column.column_name) @@ -74,20 +81,23 @@ export const useDrillByBreadcrumbs = ( margin: ${theme.gridUnit * 2}px 0 ${theme.gridUnit * 4}px; `} > - {breadcrumbsData.map((breadcrumb, index) => ( - onBreadcrumbClick(breadcrumb, index) - : noOp - } - data-test="drill-by-breadcrumb-item" - > - {getBreadcrumbText(breadcrumb)} - - ))} + {breadcrumbsData + .map((breadcrumb, index) => ( + onBreadcrumbClick(breadcrumb, index) + : noOp + } + data-test="drill-by-breadcrumb-item" + > + {getBreadcrumbText(breadcrumb)} + + )) + .filter(item => item.props.isHidden === false)} ); }, [breadcrumbsData, onBreadcrumbClick]);