From 20756bcd27d8577d399e39f7d86189d7cb3d4d14 Mon Sep 17 00:00:00 2001
From: Alexey <sudilovskiy@yandex-team.ru>
Date: Mon, 25 Dec 2023 09:16:27 +0100
Subject: [PATCH] fix(Table): columns change throws (#1219)

---
 src/components/Table/Table.tsx                | 21 +++++---
 .../__tests__/withTableSettings.test.tsx      | 52 +++++++++++++++++++
 .../Table/hoc/withTableSettings/i18n/en.json  |  3 ++
 .../Table/hoc/withTableSettings/i18n/index.ts |  8 +++
 .../Table/hoc/withTableSettings/i18n/ru.json  |  3 ++
 .../withTableSettings/withTableSettings.tsx   |  2 +
 6 files changed, 82 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
 create mode 100644 src/components/Table/hoc/withTableSettings/i18n/en.json
 create mode 100644 src/components/Table/hoc/withTableSettings/i18n/index.ts
 create mode 100644 src/components/Table/hoc/withTableSettings/i18n/ru.json

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 0eb6b2d695..f5cc18c22d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -346,9 +346,15 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
 
         return (
             <colgroup>
-                {columnsStyles.map(({width}, index) => (
-                    <col style={{width}} key={columns[index].id} />
-                ))}
+                {columnsStyles.flatMap(({width}, index) => {
+                    const key = columns[index]?.id;
+
+                    if (!key) {
+                        return [];
+                    }
+
+                    return <col style={{width}} key={key} />;
+                })}
             </colgroup>
         );
     }
@@ -553,10 +559,11 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         return style;
     }
 
-    private getCellStyles({
-        width: _width,
-        ...styles
-    }: React.CSSProperties): React.CSSProperties | undefined {
+    private getCellStyles(
+        columnStyles: React.CSSProperties | undefined,
+    ): React.CSSProperties | undefined {
+        const {width: _width, ...styles} = columnStyles || {};
+
         return Object.keys(styles).length ? styles : undefined;
     }
 
diff --git a/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx b/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
new file mode 100644
index 0000000000..81aca1ad0b
--- /dev/null
+++ b/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {Table, TableColumnConfig} from '../../../Table';
+import {TableSettingsData, withTableSettings} from '../withTableSettings';
+
+const item = {name: 'John Doe', occupation: 'Worker'};
+
+const TableWithSettings = withTableSettings<typeof item>(Table);
+
+const columns: TableColumnConfig<typeof item>[] = [
+    {
+        id: 'name',
+    },
+    {
+        id: 'occupation',
+    },
+];
+
+const data = [item];
+
+const settings: TableSettingsData = columns.map((column) => ({id: column.id, isSelected: true}));
+
+test('should change table columns', async () => {
+    const updateSettings = jest.fn();
+
+    render(
+        <TableWithSettings
+            columns={columns}
+            data={data}
+            settings={settings}
+            updateSettings={updateSettings}
+        />,
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Table settings'}));
+    await userEvent.click(await screen.findByRole('button', {name: 'occupation'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+    expect(updateSettings).toHaveBeenCalledWith([
+        {
+            id: 'name',
+            isSelected: true,
+        },
+        {
+            id: 'occupation',
+            isSelected: false,
+        },
+    ]);
+});
diff --git a/src/components/Table/hoc/withTableSettings/i18n/en.json b/src/components/Table/hoc/withTableSettings/i18n/en.json
new file mode 100644
index 0000000000..6c6be2b142
--- /dev/null
+++ b/src/components/Table/hoc/withTableSettings/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "label_settings": "Table settings"
+}
diff --git a/src/components/Table/hoc/withTableSettings/i18n/index.ts b/src/components/Table/hoc/withTableSettings/i18n/index.ts
new file mode 100644
index 0000000000..c9cd67b71b
--- /dev/null
+++ b/src/components/Table/hoc/withTableSettings/i18n/index.ts
@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '../../../../utils/addComponentKeysets';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'withTableSettings';
+
+export default addComponentKeysets({en, ru}, COMPONENT);
diff --git a/src/components/Table/hoc/withTableSettings/i18n/ru.json b/src/components/Table/hoc/withTableSettings/i18n/ru.json
new file mode 100644
index 0000000000..0b7ef79d59
--- /dev/null
+++ b/src/components/Table/hoc/withTableSettings/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "label_settings": "Настройки таблицы"
+}
diff --git a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
index 4b7e0761e8..634b87a66c 100644
--- a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
+++ b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
@@ -14,6 +14,7 @@ import {actionsColumnId, enhanceSystemColumn} from '../withTableActions/withTabl
 import {selectionColumnId} from '../withTableSelection/withTableSelection';
 
 import {TableColumnSetup} from './TableColumnSetup/TableColumnSetup';
+import i18n from './i18n';
 
 import './withTableSettings.scss';
 
@@ -191,6 +192,7 @@ export function withTableSettings<I extends TableDataItem, E extends {} = {}>(
                                         <Button
                                             view="flat"
                                             className={b('settings-button')}
+                                            extraProps={{'aria-label': i18n('label_settings')}}
                                             onClick={onClick}
                                         >
                                             <Icon data={Gear} />