commercetools · ddouglasz · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 27, 2024
@@ -27,6 +27,7 @@
 import SettingsContainer from '../settings-container';
 import messages from './messages';
 import { HIDDEN_COLUMNS_PANEL, SELECTED_COLUMNS_PANEL } from './constants';
+import { type MessageDescriptor } from 'react-intl';
 
 // 'searchHiddenColums' is only required if 'areHiddenColumnsSearchable' is true
 // but that callback is used in AsyncSelectInput.loadOptions which is required
@@ -42,6 +43,9 @@
 };
 
 export type TColumnSettingsManagerProps = {
+  title?: MessageDescriptor & {
+    values?: Record<string, React.ReactNode>;
+  };
   availableColumns: TColumnData[];
   selectedColumns: TColumnData[];
   onUpdateColumns: (updatedColums: TColumnData[]) => void;
@@ -130,7 +134,7 @@
 };

 export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
  if (props.areHiddenColumnsSearchable) {
    warning(
      typeof props.searchHiddenColumns !== 'undefined',
      'ui-kit/ColumnSettingsManager: "searchHiddenColumns" must be provided when "areHiddenColumnsSearchable" is true'
@@ -178,7 +182,8 @@
 
   return (
     <SettingsContainer
-      title={messages.title}
+      // @ts-ignore
+      title={props.title}
       closeButtonLabel={messages.closeButtonLabel}
       onClose={props.onClose}
       primaryButton={props.primaryButton}

@@ -33,13 +33,15 @@ export const DataTableManagerProvider = ({
   topBar,
   onSettingsChange,
   columnManager,
+  nestedColumnManager,
 }: {
   children: React.ReactNode;
   columns: TDataTableManagerColumnProps[];
   displaySettings: TDataTableSettingsProps['displaySettings'];
   topBar: string;
   onSettingsChange: () => void;
   columnManager: TColumnManagerProps;
+  nestedColumnManager: TColumnManagerProps[];
 }) => {
   const decoupledDataTableManagerContext = useMemo(() => {
     const areDisplaySettingsEnabled = Boolean(
@@ -60,9 +62,17 @@ export const DataTableManagerProvider = ({
       topBar,
       onSettingsChange,
       columnManager,
+      nestedColumnManager,
       isCondensed: areDisplaySettingsEnabled && displaySettings!.isCondensed,
     };
-  }, [columns, displaySettings, topBar, onSettingsChange, columnManager]);
+  }, [
+    displaySettings,
+    columns,
+    topBar,
+    onSettingsChange,
+    columnManager,
+    nestedColumnManager,
+  ]);
 
   return (
     <DataTableManagerContext.Provider value={decoupledDataTableManagerContext}>

@@ -431,6 +431,7 @@ storiesOf('Components|DataTable', module)
       ...displaySettingsButtons,
     };
 
+    // We either provide the columnManager or the nestedColumnManager for backwards compatibility
     const columnManager = {
       areHiddenColumnsSearchable: boolean('areHiddenColumnsSearchable', true),
       searchHiddenColumns: (searchTerm) => {
@@ -451,14 +452,62 @@ storiesOf('Components|DataTable', module)
       ...columnManagerButtons,
     };
 
+    //  In a case where we have a nested table, we want to provide multiple table settings
+    const nestedColumnManager = [
+      {
+        label: 'Column manager 1',
+        value: 'column_manager_1',
+        areHiddenColumnsSearchable: boolean('areHiddenColumnsSearchable', true),
+        searchHiddenColumns: (searchTerm) => {
+          setTableData({
+            ...tableData,
+            columns: initialColumnsState.filter(
+              (column) =>
+                tableData.visibleColumnKeys.includes(column.key) ||
+                column.label
+                  .toLocaleLowerCase()
+                  .includes(searchTerm.toLocaleLowerCase())
+            ),
+          });
+        },
+        disableColumnManager: boolean('disableColumnManager', false),
+        visibleColumnKeys: tableData.visibleColumnKeys,
+        hideableColumns: tableData.columns,
+        ...columnManagerButtons,
+      },
+      {
+        label: 'Column manager 2',
+        value: 'column_manager_2',
+        areHiddenColumnsSearchable: boolean('areHiddenColumnsSearchable', true),
+        searchHiddenColumns: (searchTerm) => {
+          setTableData({
+            ...tableData,
+            columns: initialColumnsState.filter(
+              (column) =>
+                tableData.visibleColumnKeys.includes(column.key) ||
+                column.label
+                  .toLocaleLowerCase()
+                  .includes(searchTerm.toLocaleLowerCase())
+            ),
+          });
+        },
+        disableColumnManager: boolean('disableColumnManager', false),
+        visibleColumnKeys: tableData.visibleColumnKeys,
+        hideableColumns: tableData.columns,
+        ...columnManagerButtons,
+      },
+    ];
+
     return (
       <DataTableManagerProvider
         columns={withRowSelection ? columnsWithSelect : visibleColumns}
         displaySettings={displaySettings}
         onSettingsChange={(action, nextValue) => {
           tableSettingsChangeHandler[action](nextValue);
         }}
-        columnManager={columnManager}
+        // We either provide the columnManager or the nestedColumnManager for backwards compatibility
+        // columnManager={columnManager}
+        nestedColumnManager={nestedColumnManager}
       >
         <Spacings.Stack>
           <header>

@@ -1,7 +1,12 @@
 import { useMemo, cloneElement } from 'react';
 import Spacings from '@commercetools-uikit/spacings';
 import DataTableSettings from './data-table-settings';
-import type { TRow, TColumnProps, TDataTableManagerProps } from './types';
+import type {
+  TRow,
+  TColumnProps,
+  TDataTableManagerProps,
+  TColumnManagerProps,
+} from './types';
 import { useDataTableManagerContext } from '@commercetools-uikit/data-table-manager/data-table-manager-provider';
 
 const DataTableManager = <Row extends TRow = TRow>(
@@ -19,6 +24,9 @@ const DataTableManager = <Row extends TRow = TRow>(
   const columnManager =
     props.columnManager || dataTableManagerContext.columnManager;
 
+  const nestedColumnManager =
+    props.nestedColumnManager || dataTableManagerContext.nestedColumnManager;
+
   const areDisplaySettingsEnabled = Boolean(
     displaySettings && !displaySettings.disableDisplaySettings
   );
@@ -45,11 +53,12 @@ const DataTableManager = <Row extends TRow = TRow>(
   return (
     <Spacings.Stack>
       <DataTableSettings
+        columnManager={columnManager as TColumnManagerProps}
         topBar={topBar}
         onSettingsChange={onSettingsChange}
-        columnManager={columnManager}
         displaySettings={displaySettings}
         managerTheme="light"
+        nestedColumnManager={nestedColumnManager as TColumnManagerProps[]}
       />
       {props.children
         ? cloneElement(props.children, {

@@ -39,10 +39,12 @@ export const getDropdownOptions = ({
   areColumnSettingsEnabled,
   areDisplaySettingsEnabled,
   formatMessage,
+  nestedColumnManager,
 }: {
   areColumnSettingsEnabled: boolean;
   areDisplaySettingsEnabled: boolean;
   formatMessage: (message: MessageDescriptor) => string;
+  nestedColumnManager: TDataTableSettingsProps['nestedColumnManager'];
 }) => [
   ...(areColumnSettingsEnabled
     ? [
@@ -52,6 +54,14 @@ export const getDropdownOptions = ({
         },
       ]
     : []),
+  ...(nestedColumnManager
+    ? nestedColumnManager.map((nestedColumns) => {
+        return {
+          value: nestedColumns.value,
+          label: nestedColumns.label,
+        };
+      })
+    : []),
   ...(areDisplaySettingsEnabled
     ? [
         {
@@ -94,10 +104,12 @@ const DataTableSettings = (props: TDataTableSettingsProps) => {
   const [openedPanelId, setOpenedPanelId] = useState<string | null | undefined>(
     null
   );
+  // @ts-ignore
   const dropdownOptions: TDropdownOption[] = getDropdownOptions({
     areDisplaySettingsEnabled,
     areColumnSettingsEnabled,
     formatMessage: intl.formatMessage,
+    nestedColumnManager: props.nestedColumnManager,
   });
 
   const mappedColumns = getMappedColumns(
@@ -166,24 +178,56 @@ const DataTableSettings = (props: TDataTableSettingsProps) => {
           managerTheme={props.managerTheme}
         />
       )}
-      {openedPanelId === COLUMN_MANAGER && (
-        <ColumnSettingsManager
-          {...(props.columnManager || {})}
-          availableColumns={props.columnManager?.hideableColumns ?? []}
-          selectedColumns={selectedColumns}
-          onClose={handleSettingsPanelChange}
-          onUpdateColumns={(nextVisibleColumns) => {
-            const keysOfVisibleColumns = nextVisibleColumns.map(
-              (visibleColumn) => visibleColumn.key
-            );
-            props.onSettingsChange?.(
-              UPDATE_ACTIONS.COLUMNS_UPDATE,
-              keysOfVisibleColumns
+      {props.nestedColumnManager
+        ? props.nestedColumnManager.map((nestedManager) => {
+            return (
+              openedPanelId === nestedManager.value && (
+                <ColumnSettingsManager
+                  key={nestedManager.value}
+                  {...(nestedManager || {})}
+                  availableColumns={nestedManager.hideableColumns ?? []}
+                  title={nestedManager.label}
+                  selectedColumns={
+                    props.nestedColumnManager
+                      ? getSelectedColumns(
+                          getMappedColumns(nestedManager.hideableColumns),
+                          nestedManager.visibleColumnKeys
+                        )
+                      : selectedColumns
+                  }
+                  onClose={handleSettingsPanelChange}
+                  onUpdateColumns={(nextVisibleColumns) => {
+                    const keysOfVisibleColumns = nextVisibleColumns.map(
+                      (visibleColumn) => visibleColumn.key
+                    );
+                    props.onSettingsChange?.(
+                      UPDATE_ACTIONS.COLUMNS_UPDATE,
+                      keysOfVisibleColumns
+                    );
+                  }}
+                  managerTheme={props.managerTheme}
+                />
+              )
             );
-          }}
-          managerTheme={props.managerTheme}
-        />
-      )}
+          })
+        : openedPanelId === COLUMN_MANAGER && (
+            <ColumnSettingsManager
+              {...(props.columnManager || {})}
+              availableColumns={props.columnManager?.hideableColumns ?? []}
+              selectedColumns={selectedColumns}
+              onClose={handleSettingsPanelChange}
+              onUpdateColumns={(nextVisibleColumns) => {
+                const keysOfVisibleColumns = nextVisibleColumns.map(
+                  (visibleColumn) => visibleColumn.key
+                );
+                props.onSettingsChange?.(
+                  UPDATE_ACTIONS.COLUMNS_UPDATE,
+                  keysOfVisibleColumns
+                );
+              }}
+              managerTheme={props.managerTheme}
+            />
+          )}
     </Spacings.Stack>
   );
 };

@@ -44,7 +44,9 @@ const DensityManager = (props: TDensityManagerProps) => {
 
   return (
     <SettingsContainer
-      title={messages.title}
+      // Keeping it simple for the purpose of the POC
+      // @ts-ignore
+      title="Display settings"
       closeButtonLabel={messages.closeButtonLabel}
       onClose={props.onClose}
       primaryButton={props.primaryButton}

@@ -45,7 +45,7 @@ const SettingsContainer = (props: TSettingsContainerProps) => {
           <CardContentWrapper>
             <Spacings.Stack scale="xl">
               <HeaderContainer>
-                <Text.Headline as="h2" intlMessage={props.title} />
+                <Text.Headline as="h2">{props.title}</Text.Headline>
                 <AccessibleButton
                   onClick={props.onClose}
                   label={intl.formatMessage(props.closeButtonLabel)}

@@ -1,4 +1,5 @@
 import type { ReactNode, MouseEventHandler, ReactElement } from 'react';
+import { MessageDescriptor } from 'react-intl';
 
 export type TColumnData = {
   key: string;
@@ -42,6 +43,10 @@ export type TDisplaySettingsProps = {
 };
 
 export type TColumnManagerProps = {
+  value?: string;
+  label?: MessageDescriptor & {
+    values?: Record<string, React.ReactNode>;
+  };
   /**
    * Set this to `true` to show a search input for the hidden columns panel.
    */
@@ -93,6 +98,7 @@ export type TDataTableSettingsProps = {
   ) => void;
   displaySettings?: TDisplaySettingsProps;
   columnManager?: TColumnManagerProps;
+  nestedColumnManager?: TColumnManagerProps[];
   managerTheme?: 'light' | 'dark';
 };
 
@@ -230,4 +236,5 @@ export type TDataTableManagerProps<Row extends TRow = TRow> = {
    * Sets the background theme of the Card that contains the settings
    */
   managerTheme?: 'light' | 'dark';
+  nestedColumnManager?: TDataTableSettingsProps['nestedColumnManager'];
 };