Enable custom configuration settings for the data table manager (#2851)

* feat(data table manager): enable custom configuration settings for data table manager

* feat(data table manager): remove unused files

* feat(data table manager): include test for custom component

* feat(data table manager): fix type issue

* feat(data table manager): update changeset

* feat(data table manager): update story

* feat(data table manager): update data table with custom props

* feat(data table manager): define data table payload data shape

* feat(data table manager): option to change default settings dropdown label

* feat(data table manager): expose column settings manager component

* feat(data table manager): remove unused console logs

* feat(data table manager): refactor columns update

* feat(data table manager): restructure payload schema

* feat(data table manager): update test

* feat(data table manager): remove comments

* feat(data table manager): fix searchable bug

* feat(data table manager): add description to property definitions

* feat(data table manager): add description to property definitions

* feat(data table manager): prop description

* feat(data table manager): update title type

* feat(data table manager): change check for custom column manager

* feat(data table manager): visual storybook changes for the custom settings

* feat(data table manager): visual storybook changes for the custom settings

* feat(data table manager): update reame docs with new prop changes

* feat(data table manager): update reame docs to include column manager label override

* feat(data table manager): update reame docs

* feat(data table manager): update docs

* feat(data table manager): update types

* feat(data table manager): initiate simple poc for the nested table onclick

* feat(data table manager): initiate simple poc for the nested table onclick

---------

Co-authored-by: Ddouglasz <[email protected]>

.changeset/spotty-suits-develop.md

@@ -0,0 +1,7 @@
+---
+'@commercetools-uikit/data-table-manager': minor
+'@commercetools-uikit/data-table': minor
+---
+
+This extends the data table manager settings to make provision for additional settings that can allow users add more configurations to the already existing settings of the data table manager.
+With the new approach, a user can now add any desired configuration option to the settings dropdown, and also create their own settings interface (a custom settings component) to configure the data table to their desired settings.

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

@@ -0,0 +1,4 @@
+{
+  "main": "dist/commercetools-uikit-data-table-manager-column-settings-manager.cjs.js",
+  "module": "dist/commercetools-uikit-data-table-manager-column-settings-manager.esm.js"
+}

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

@@ -18,9 +18,13 @@
   "main": "dist/commercetools-uikit-data-table-manager.cjs.js",
   "module": "dist/commercetools-uikit-data-table-manager.esm.js",
   "preconstruct": {
-    "entrypoints": ["./index.ts", "data-table-manager-provider/index.ts"]
+    "entrypoints": [
+      "./index.ts",
+      "data-table-manager-provider/index.ts",
+      "column-settings-manager/index.ts"
+    ]
   },
-  "files": ["dist", "data-table-manager-provider"],
+  "files": ["dist", "data-table-manager-provider", "column-settings-manager"],
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",

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

@@ -42,6 +42,7 @@ export type TColumnData = {
 };
 
 export type TColumnSettingsManagerProps = {
+  title?: string;
   availableColumns: TColumnData[];
   selectedColumns: TColumnData[];
   onUpdateColumns: (updatedColums: TColumnData[]) => void;
@@ -178,6 +179,7 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => {
 
   return (
     <SettingsContainer
+      customSettingsTitle={props.title}
       title={messages.title}
       closeButtonLabel={messages.closeButtonLabel}
       onClose={props.onClose}

packages/components/data-table-manager/src/column-settings-manager/index.ts

@@ -1,2 +1,2 @@
-export { default } from './column-settings-manager';
+export { ColumnSettingsManager } from './column-settings-manager';
 export * from './export-types';

packages/components/data-table-manager/src/constants.ts

@@ -1,5 +1,7 @@
 export const UPDATE_ACTIONS = {
   COLUMNS_UPDATE: 'columnsUpdate',
+  CUSTOM_SETTINGS_UPDATE: 'customSettingsUpdate',
+  CUSTOM_COLUMNS_UPDATE: 'customColumnsUpdate',
   IS_TABLE_CONDENSED_UPDATE: 'isTableCondensedUpdate',
   IS_TABLE_WRAPPING_TEXT_UPDATE: 'isTableWrappingTextUpdate',
 };

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

@@ -0,0 +1,34 @@
+import { screen, render, fireEvent } from '../../../../../test/test-utils';
+import CustomSettingsManager from './custom-settings-manager';
+
+const mockCustomComponentClick = jest.fn();
+
+const CustomComponent = (prop) => (
+  <button onClick={prop.onClick}>Custom Component</button>
+);
+
+const createTestProps = (customProps) => ({
+  managerTheme: 'light',
+  children: <CustomComponent onClick={mockCustomComponentClick} />,
+  customPanelTitle: 'Test Title',
+  onClose: jest.fn(),
+  ...customProps,
+});
+
+describe('CustomSettingsManager', () => {
+  it('renders with the correct title', () => {
+    const props = createTestProps();
+    render(<CustomSettingsManager {...props} />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+  it('renders with the correct children', () => {
+    const props = createTestProps();
+    render(<CustomSettingsManager {...props} />);
+
+    const customButton = screen.getByText('Custom Component');
+    expect(customButton).toBeInTheDocument();
+
+    fireEvent.click(customButton);
+    expect(mockCustomComponentClick).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,31 @@
+import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import SettingsContainer, { type TIntlMessage } from '../settings-container';
+import messages from './messages';
+
+export type TCustomSettingsManagerProps = {
+  onClose: (
+    event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
+  ) => void;
+  managerTheme?: 'light' | 'dark';
+  children: ReactNode;
+  customPanelTitle: string | TIntlMessage;
+};
+
+const CustomSettingsManager = (props: TCustomSettingsManagerProps) => {
+  return (
+    <>
+      <SettingsContainer
+        customSettingsTitle={props.customPanelTitle}
+        closeButtonLabel={messages.closeButtonLabel}
+        onClose={props.onClose}
+        containerTheme={props.managerTheme}
+      >
+        {props.children}
+      </SettingsContainer>
+    </>
+  );
+};
+
+CustomSettingsManager.displayName = 'CustomSettingsManager';
+
+export default CustomSettingsManager;

packages/components/data-table-manager/src/custom-settings-manager/export-types.ts

@@ -0,0 +1,3 @@
+import type { TCustomSettingsManagerProps as CustomSettingsManagerProps } from './custom-settings-manager';
+
+export type TCustomSettingsManagerProps = CustomSettingsManagerProps;

packages/components/data-table-manager/src/custom-settings-manager/index.ts

@@ -0,0 +1,2 @@
+export { default } from './custom-settings-manager';
+export * from './export-types';

packages/components/data-table-manager/src/custom-settings-manager/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  closeButtonLabel: {
+    id: 'UIKit.DataTableManager.CustomSettingsManager.closeButtonLabel',
+    description: 'Label for custom settings manager close button.',
+    defaultMessage: 'Close',
+  },
+});

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

@@ -1,17 +1,28 @@
-import { createContext, useContext, useMemo } from 'react';
-import type { TDataTableSettingsProps, TColumnManagerProps } from '../types';
+import { createContext, useContext, useMemo, useState } from 'react';
+import type {
+  TDataTableSettingsProps,
+  TColumnManagerProps,
+  TCustomSettingsProps,
+  TAdditionalSettings,
+} from '../types';
 import type { TDataTableManagerColumnProps, TRow } from './types';
+import { TColumnData } from '../column-settings-manager';
 
 export type TDataTableManagerContext<Row extends TRow = TRow> =
   TDataTableSettingsProps & {
     columns: TDataTableManagerColumnProps<Row>[];
     isCondensed?: boolean;
+    customSettingsPayload?: Record<string, unknown>;
+    customColumns?: TColumnData[];
+    debug: boolean; // TODO - remove when nested rows are implemented
   };
 
 const DataTableManagerContext = createContext<TDataTableManagerContext>({
   columns: [],
   displaySettings: undefined,
   isCondensed: true,
+  debug: false,
+  additionalSettings: {},
 });
 
 export const useDataTableManagerContext = () => {
@@ -33,14 +44,36 @@ export const DataTableManagerProvider = ({
   topBar,
   onSettingsChange,
   columnManager,
+  customSettings,
+  selectedColumns,
+  customColumnManager,
+  customColumns,
+  debug, // TODO - remove when nested rows are implemented
 }: {
   children: React.ReactNode;
   columns: TDataTableManagerColumnProps[];
   displaySettings: TDataTableSettingsProps['displaySettings'];
   topBar: string;
   onSettingsChange: () => void;
   columnManager: TColumnManagerProps;
+  customSettings?: TCustomSettingsProps[];
+  selectedColumns?: TColumnData[];
+  customColumnManager?: TColumnManagerProps;
+  customColumns?: TColumnData[];
+  debug: boolean;
 }) => {
+  const [additionalSettings, setAdditionalSettings] = useState<{
+    [key: string]: unknown;
+  }>({});
+
+  const updateCustomSettings = (
+    additionalCustomSettings: TAdditionalSettings
+  ) => {
+    setAdditionalSettings(
+      additionalCustomSettings as { [key: string]: unknown }
+    );
+  };
+
   const decoupledDataTableManagerContext = useMemo(() => {
     const areDisplaySettingsEnabled = Boolean(
       displaySettings && !displaySettings.disableDisplaySettings
@@ -49,6 +82,12 @@ export const DataTableManagerProvider = ({
     const isWrappingText =
       areDisplaySettingsEnabled && displaySettings!.isWrappingText;
 
+    const customSettingsPayload = {} as Record<string, unknown>;
+    customSettings &&
+      Object.entries(customSettings).forEach(([key, settingsPayload]) => {
+        customSettingsPayload[key] = settingsPayload;
+      });
+
     return {
       columns: columns.map((column) => ({
         ...column,
@@ -60,9 +99,30 @@ export const DataTableManagerProvider = ({
       topBar,
       onSettingsChange,
       columnManager,
+      customSettings,
+      customSettingsPayload,
       isCondensed: areDisplaySettingsEnabled && displaySettings!.isCondensed,
+      updateCustomSettings: (settings: TAdditionalSettings) =>
+        updateCustomSettings(settings),
+      additionalSettings,
+      selectedColumns,
+      customColumnManager,
+      customColumns,
+      debug, // TODO - remove when nested rows are implemented
     };
-  }, [columns, displaySettings, topBar, onSettingsChange, columnManager]);
+  }, [
+    displaySettings,
+    customSettings,
+    columns,
+    topBar,
+    onSettingsChange,
+    columnManager,
+    additionalSettings,
+    selectedColumns,
+    customColumnManager,
+    customColumns,
+    debug,
+  ]);
 
   return (
     <DataTableManagerContext.Provider value={decoupledDataTableManagerContext}>