(superset) branch master updated: fix(drillby): Enable DrillBy in charts w/o filters (dimensions) (#27941)

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 35c8b7a162 fix(drillby): Enable DrillBy in charts w/o filters 
(dimensions) (#27941)
35c8b7a162 is described below

commit 35c8b7a162e1d3f5efa74e86ad71be6af584367b
Author: sowo <wolfgangsomme...@gmail.com>
AuthorDate: Thu Apr 11 20:47:02 2024 +0200

    fix(drillby): Enable DrillBy in charts w/o filters (dimensions) (#27941)
---
 .../Chart/DrillBy/DrillByMenuItems.test.tsx        |  4 +--
 .../components/Chart/DrillBy/DrillByMenuItems.tsx  |  4 +--
 .../Chart/DrillBy/useDrillByBreadcrumbs.tsx        | 42 +++++++++++++---------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git 
a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx 
b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
index 41cc6b3c08..c98ca48472 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 2fe711474e..26ae3e2f32 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 fc7c0b2bf5..36f86371f8 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) => (
-          <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]);