fix: show drilldown icon for drilldown dimension (#1129)

apis/locale/locales/en-US.json

@@ -55,6 +55,10 @@
     "value": "Dismiss",
     "comment": "Dismiss the disclaimer that not all data is being shown"
   },
+  "Listbox.DrillDown": {
+    "value": "Drill-down dimension",
+    "comment": "Tooltip for the drill-down icons on the dimension titles in charts. (pde 160210)"
+  },
   "Menu.More": {
     "value": "More",
     "comment": "Menu option to display list of additional actions to choose from (ffd 20200520)"

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -5,6 +5,7 @@ import Lock from '@nebula.js/ui/icons/lock';
 import { IconButton, Grid, Typography } from '@mui/material';
 import { useTheme } from '@nebula.js/ui/theme';
 import SearchIcon from '@nebula.js/ui/icons/search';
+import DrillDownIcon from '@nebula.js/ui/icons/drill-down';
 import useLayout from '../../hooks/useLayout';
 import ListBox from './ListBox';
 import createListboxSelectionToolbar from './interactions/listbox-selection-toolbar';
@@ -16,8 +17,9 @@ import addListboxTheme from './assets/addListboxTheme';
 import useAppSelections from '../../hooks/useAppSelections';
 
 const PREFIX = 'ListBoxInline';
+const ICON_PADDING = 7;
 const searchIconWidth = 28;
-
+const drillDownIconWidth = 24;
 const classes = {
   listBoxHeader: `${PREFIX}-listBoxHeader`,
   screenReaderOnly: `${PREFIX}-screenReaderOnly`,
@@ -168,7 +170,7 @@ function ListBoxInline({ options, layout }) {
   }
 
   const isLocked = layout.qListObject.qDimensionInfo.qLocked === true;
-
+  const isDrillDown = layout.qListObject.qDimensionInfo.qGrouping === 'H';
   const listboxSelectionToolbarItems = toolbar
     ? createListboxSelectionToolbar({
         layout,
@@ -193,7 +195,12 @@ function ListBoxInline({ options, layout }) {
   };
 
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const showIcon = isLocked || (searchEnabled !== false && !constraints?.active);
+  const showSearchIcon = searchEnabled !== false && !constraints?.active;
+  const showSearchOrLockIcon = isLocked || showSearchIcon;
+  const showIcons = showSearchOrLockIcon || isDrillDown;
+  const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
+  const drillDownPaddingLeft = showSearchOrLockIcon ? 0 : ICON_PADDING;
+  const headerPaddingLeft = parseFloat(theme.spacing(1)) - (showIcons ? ICON_PADDING : 0);
 
   return (
     <StyledGrid
@@ -209,22 +216,34 @@ function ListBoxInline({ options, layout }) {
       ref={containerRef}
     >
       {toolbar && (
-        <Grid item container style={{ padding: theme.spacing(1) }} wrap="nowrap">
+        <Grid item container style={{ padding: theme.spacing(1), paddingLeft: `${headerPaddingLeft}px` }} wrap="nowrap">
           <Grid item container height={headerHeight} wrap="nowrap">
-            {showIcon && (
-              <Grid item sx={{ display: 'flex', alignItems: 'center', width: searchIconWidth }}>
+            {showIcons && (
+              <Grid item sx={{ display: 'flex', alignItems: 'center', width: iconsWidth }}>
                 {isLocked ? (
                   <IconButton tabIndex={-1} onClick={unlock} disabled={selectDisabled()} size="large">
                     <Lock title={translator.get('Listbox.Unlock')} style={{ fontSize: '12px' }} />
                   </IconButton>
                 ) : (
+                  showSearchIcon && (
+                    <IconButton
+                      onClick={onShowSearch}
+                      tabIndex={-1}
+                      title={translator.get('Listbox.Search')}
+                      size="large"
+                    >
+                      <SearchIcon style={{ fontSize: '12px' }} />
+                    </IconButton>
+                  )
+                )}
+                {isDrillDown && (
                   <IconButton
-                    onClick={onShowSearch}
                     tabIndex={-1}
-                    title={translator.get('Listbox.Search')}
+                    title={translator.get('Listbox.DrillDown')}
                     size="large"
+                    sx={{ paddingLeft: `${drillDownPaddingLeft}px` }}
                   >
-                    <SearchIcon style={{ fontSize: '12px' }} />
+                    <DrillDownIcon style={{ fontSize: '12px' }} />
                   </IconButton>
                 )}
               </Grid>

packages/ui/icons/drill-down.js

@@ -0,0 +1,15 @@
+import SvgIcon from './SvgIcon';
+
+const drillDown = (props) => ({
+  ...props,
+  shapes: [
+    {
+      type: 'path',
+      attrs: {
+        d: 'M15.9993744,3 L15.9993744,5 L4.99937445,5 L4.99937445,3 L15.9993744,3 Z M8.99937445,7 L15.9993744,7 L15.9993744,9 L8.99937445,9 L8.99937445,7 Z M11.9993744,11 L15.9993744,11 L15.9993744,13 L11.9993744,13 L11.9993744,11 Z M2.2,11 L7,11 L7,9.00369263 C7,8.89323568 7.08954305,8.80369263 7.2,8.80369263 C7.2549016,8.80369263 7.30738916,8.82626165 7.34515712,8.86610844 L10.1852182,11.8624926 C10.2583124,11.93961 10.258346,12.0604218 10.1852948,12.13758 L7.34523376,15.1373102 C7.2692928,15.2175206 7.14270711,15.2209817 7.06249671,15.1450407 C7.02260076,15.1072683 7,15.0547472 7,14.9998069 L7,12.9043747 C4.79351111,12.9043747 2.8018683,12.9266213 1.02507156,12.9711145 L1.02507252,12.9711526 C0.472939773,12.9849787 0.014139487,12.5485949 0.000313396522,11.9964622 C0.000104473692,11.988119 -1.32268838e-12,11.9797736 -1.3231638e-12,11.9714278 L-1.83320026e-12,3 L2,3 L2,10.8 C2,10.9104569 2.08954305,11 2.2,11 Z',
+      },
+    },
+  ],
+});
+export default (props) => SvgIcon(drillDown(props));
+export { drillDown };