From eb11701e8f174e9c28d9f0dd1321de77cb44f82a Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 22 Dec 2023 15:23:34 +0100
Subject: [PATCH 1/4] fix(Table): check that data exist

---
 src/components/Table/Table.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

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;
     }
 

From e3a26b7f73dd85d3e03e6d9d676d43806b0452e0 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 22 Dec 2023 15:50:47 +0100
Subject: [PATCH 2/4] feat: improve settings button a11y

---
 src/components/Table/hoc/withTableSettings/i18n/en.json   | 3 +++
 src/components/Table/hoc/withTableSettings/i18n/index.ts  | 8 ++++++++
 src/components/Table/hoc/withTableSettings/i18n/ru.json   | 3 +++
 .../Table/hoc/withTableSettings/withTableSettings.tsx     | 2 ++
 4 files changed, 16 insertions(+)
 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/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} />

From 5640503baed7d265068b47f999840b617ae33e21 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 22 Dec 2023 15:53:02 +0100
Subject: [PATCH 3/4] test: columns hiding

---
 .../__tests__/withTableSettings.test.tsx      | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx

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..9f3f208323
--- /dev/null
+++ b/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {render, screen, waitForElementToBeRemoved} 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}
+        />,
+    );
+
+    expect(screen.getByRole('columnheader', {name: 'occupation'})).toBeInTheDocument();
+
+    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'}));
+
+    await waitForElementToBeRemoved(() => screen.queryByRole('columnheader', {name: 'occupation'}));
+});

From b3121e8ce3c1835ac6cb6aed449ed3cadeec1796 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 22 Dec 2023 16:32:41 +0100
Subject: [PATCH 4/4] test: settings update instead

---
 .../__tests__/withTableSettings.test.tsx          | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx b/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
index 9f3f208323..81aca1ad0b 100644
--- a/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
+++ b/src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {Table, TableColumnConfig} from '../../../Table';
@@ -35,11 +35,18 @@ test('should change table columns', async () => {
         />,
     );
 
-    expect(screen.getByRole('columnheader', {name: 'occupation'})).toBeInTheDocument();
-
     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'}));
 
-    await waitForElementToBeRemoved(() => screen.queryByRole('columnheader', {name: 'occupation'}));
+    expect(updateSettings).toHaveBeenCalledWith([
+        {
+            id: 'name',
+            isSelected: true,
+        },
+        {
+            id: 'occupation',
+            isSelected: false,
+        },
+    ]);
 });