PANGOLIN-3680: data table settings menu

.changeset/slimy-kangaroos-hammer.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/data-table-manager': minor
+---
+
+replace the dataTableManager SelectInput with the new dropDownMenu component

packages/components/data-table-manager/package.json

@@ -27,9 +27,11 @@
     "@commercetools-uikit/card": "19.2.0",
     "@commercetools-uikit/collapsible-motion": "19.2.0",
     "@commercetools-uikit/design-system": "19.2.0",
+    "@commercetools-uikit/dropdown-menu": "19.2.0",
     "@commercetools-uikit/field-label": "19.2.0",
     "@commercetools-uikit/grid": "19.2.0",
     "@commercetools-uikit/hooks": "19.2.0",
+    "@commercetools-uikit/icon-button": "19.2.0",
     "@commercetools-uikit/icons": "19.2.0",
     "@commercetools-uikit/primary-button": "19.2.0",
     "@commercetools-uikit/radio-input": "19.2.0",
@@ -39,6 +41,7 @@
     "@commercetools-uikit/spacings": "19.2.0",
     "@commercetools-uikit/tag": "19.2.0",
     "@commercetools-uikit/text": "19.2.0",
+    "@commercetools-uikit/tooltip": "19.2.0",
     "@commercetools-uikit/utils": "19.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",

packages/components/data-table-manager/src/data-table-manager.spec.js

@@ -86,8 +86,10 @@ describe('rendering', () => {
     );
 
     fireEvent.focus(selectDropdown);
-    fireEvent.change(selectDropdown, { target: { value: 'display' } });
-    fireEvent.keyDown(selectDropdown, { key: 'Enter', keyCode: 13, which: 13 });
+    const layoutSettingsOption = await screen.findByLabelText(
+      'Layout settings'
+    );
+    fireEvent.click(layoutSettingsOption);
 
     await screen.findByText('Table layout settings');
 
@@ -131,15 +133,10 @@ describe('rendering', () => {
     );
 
     fireEvent.focus(selectDropdown);
-    fireEvent.change(selectDropdown, { target: { value: 'column' } });
-    fireEvent.keyDown(selectDropdown, {
-      key: 'Enter',
-      keyCode: 13,
-      which: 13,
-    });
+    const columnManagerOption = await screen.findByLabelText('Column manager');
+    fireEvent.click(columnManagerOption);
 
     await screen.findByText('Column Manager');
-
     screen.getByLabelText('Hidden columns');
     expect(
       screen.getByText('There are no hidden columns to show.')

packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx

@@ -2,18 +2,18 @@ import { useState, type ReactElement, type ReactNode } from 'react';
 import { warning } from '@commercetools-uikit/utils';
 import { useIntl, type MessageDescriptor } from 'react-intl';
 import styled from '@emotion/styled';
-import AccessibleHidden from '@commercetools-uikit/accessible-hidden';
-import SelectInput from '@commercetools-uikit/select-input';
-import { TableIcon } from '@commercetools-uikit/icons';
+import { ColumnsIcon } from '@commercetools-uikit/icons';
 import Spacings from '@commercetools-uikit/spacings';
-import { designTokens } from '@commercetools-uikit/design-system';
 import { UPDATE_ACTIONS, COLUMN_MANAGER, DISPLAY_SETTINGS } from '../constants';
 import DisplaySettingsManager, {
   DENSITY_COMPACT,
   SHOW_HIDE_ON_DEMAND,
 } from '../display-settings-manager';
 import ColumnSettingsManager from '../column-settings-manager';
 import messages from './messages';
+import DropdownMenu from '@commercetools-uikit/dropdown-menu';
+import IconButton from '@commercetools-uikit/icon-button';
+import Tooltip from '@commercetools-uikit/tooltip';
 
 export type TSelectChangeEvent = {
   target: {
@@ -121,12 +121,10 @@ export type TDataTableSettingsProps = {
   managerTheme?: 'light' | 'dark';
 };
 
-/* The horizontal constraint is set on this container instead of the SelectInput
-because the input is always empty, and therefore doesn't take any space by itself
-but we want to keep enough space for the placeholder to be readable */
-const SelectContainer = styled.div`
-  min-width: ${designTokens.constraint4};
-`;
+export type TDropdownOption = {
+  value: string;
+  label: string;
+};
 
 const TopBarContainer = styled.div`
   flex-grow: 1;
@@ -191,20 +189,12 @@ const DataTableSettings = (props: TDataTableSettingsProps) => {
   const [openedPanelId, setOpenedPanelId] = useState<string | null | undefined>(
     null
   );
-
-  const dropdownOptions = getDropdownOptions({
+  const dropdownOptions: TDropdownOption[] = getDropdownOptions({
     areDisplaySettingsEnabled,
     areColumnSettingsEnabled,
     formatMessage: intl.formatMessage,
   });
 
-  const handleDropdownChange = (event: TSelectChangeEvent) =>
-    setOpenedPanelId(
-      Array.isArray(event.target.value)
-        ? event.target.value[0]
-        : event.target.value
-    );
-
   const mappedColumns = getMappedColumns(
     areColumnSettingsEnabled ? props.columnManager!.hideableColumns : undefined
   );
@@ -223,23 +213,33 @@ const DataTableSettings = (props: TDataTableSettingsProps) => {
       <Spacings.Inline justifyContent="space-between" alignItems="center">
         <TopBarContainer>{props.topBar}</TopBarContainer>
         {dropdownOptions.length > 0 && (
-          <SelectContainer>
-            <AccessibleHidden>
-              <label htmlFor="table-settings-dropdown">
-                Open table manager dropdown
-              </label>
-            </AccessibleHidden>
-            <SelectInput
-              id="table-settings-dropdown"
-              // the dropdown always shows the placeholder as selecting an option
-              // will open the corresponding panel (column manager or display settings)
-              value=""
-              placeholder={intl.formatMessage(messages.placeholder)}
-              onChange={handleDropdownChange}
-              options={dropdownOptions}
-              iconLeft={<TableIcon color="neutral60" />}
-            />
-          </SelectContainer>
+          <Tooltip
+            placement="left"
+            title={intl.formatMessage(messages.placeholder)}
+          >
+            <DropdownMenu
+              triggerElement={
+                <IconButton
+                  icon={<ColumnsIcon />}
+                  label="Open table manager dropdown"
+                />
+              }
+              menuHorizontalConstraint={'auto'}
+              menuPosition="right"
+              menuType="list"
+            >
+              {dropdownOptions?.map((option: TDropdownOption) => (
+                <DropdownMenu.ListMenuItem
+                  key={option?.label}
+                  onClick={() => {
+                    setOpenedPanelId(option?.value);
+                  }}
+                >
+                  {option?.label}
+                </DropdownMenu.ListMenuItem>
+              ))}
+            </DropdownMenu>
+          </Tooltip>
         )}
       </Spacings.Inline>
       {openedPanelId === DISPLAY_SETTINGS && (

yarn.lock

@@ -2577,9 +2577,11 @@ __metadata:
     "@commercetools-uikit/card": 19.2.0
     "@commercetools-uikit/collapsible-motion": 19.2.0
     "@commercetools-uikit/design-system": 19.2.0
+    "@commercetools-uikit/dropdown-menu": 19.2.0
     "@commercetools-uikit/field-label": 19.2.0
     "@commercetools-uikit/grid": 19.2.0
     "@commercetools-uikit/hooks": 19.2.0
+    "@commercetools-uikit/icon-button": 19.2.0
     "@commercetools-uikit/icons": 19.2.0
     "@commercetools-uikit/primary-button": 19.2.0
     "@commercetools-uikit/radio-input": 19.2.0
@@ -2589,6 +2591,7 @@ __metadata:
     "@commercetools-uikit/spacings": 19.2.0
     "@commercetools-uikit/tag": 19.2.0
     "@commercetools-uikit/text": 19.2.0
+    "@commercetools-uikit/tooltip": 19.2.0
     "@commercetools-uikit/utils": 19.2.0
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5