fix(drillby): Enable DrillBy in charts w/o filters (dimensions) (apac…

…he#27941)
EnxDev · Apr 15, 2024 · d64d18c · d64d18c
1 parent f9844f2
commit d64d18c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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) => (
-          <BreadcrumbItem
-            key={index}
-            isClickable={isClickable(index)}
-            onClick={
-              isClickable(index)
-                ? () => onBreadcrumbClick(breadcrumb, index)
-                : noOp
-            }
-            data-test="drill-by-breadcrumb-item"
-          >
-            {getBreadcrumbText(breadcrumb)}
-          </BreadcrumbItem>
-        ))}
+        {breadcrumbsData
+          .map((breadcrumb, index) => (
+            <BreadcrumbItem
+              key={index}
+              isClickable={isClickable(index)}
+              isHidden={isHidden(breadcrumb)}
+              onClick={
+                isClickable(index)
+                  ? () => onBreadcrumbClick(breadcrumb, index)
+                  : noOp
+              }
+              data-test="drill-by-breadcrumb-item"
+            >
+              {getBreadcrumbText(breadcrumb)}
+            </BreadcrumbItem>
+          ))
+          .filter(item => item.props.isHidden === false)}
       </AntdBreadcrumb>
     );
   }, [breadcrumbsData, onBreadcrumbClick]);