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]);