From 2b98ec1379b720711b74f58300dd913ee55bed2d Mon Sep 17 00:00:00 2001
From: Jan Monschke <jan.monschke@elastic.co>
Date: Thu, 24 Oct 2024 14:14:29 +0200
Subject: [PATCH] [SecuritySolution] Fix issue of disappearing columns in the
 alerts table (#197043)

## Summary

Fixes: https://github.com/elastic/kibana/issues/196877

The issue above describes a situation in which columns can disappear
when toggling them in a certain order in the "Columns" and "Fields".

Steps to reproduce the original issue:

- Make sure the`file.name` column us visible in the alerts table, the
`Fields` popup and in the `Columns` selector
- Hide the `file.name` column from the `Columns` selector
- Go to `Fields` and enable the `file.name` field
- Observe that the column isn't showing up in the table
- The `file.name` column is also not showing up in the `Columns`
selector anymore.

The issue has a video demonstration attached to it as well.

With this fix applied, the column does not "disappear" anymore:

https://github.com/user-attachments/assets/4056f297-584a-4713-8936-b4e3ac3339a0

### Checklist
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the common scenarios

@elastic/response-ops Got any ideas on how to best add unit tests for
this?

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit d74b70f7f5c64b5fa4166d761b48c211c2d5abac)
---
 .../alerts_table/alerts_table.test.tsx        | 36 +++++++++++++++++++
 .../sections/alerts_table/alerts_table.tsx    |  4 +--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
index d410e8ee9d43e..bcd9026992d15 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
@@ -694,6 +694,42 @@ describe('AlertsTable', () => {
 
         expect(await screen.findByTestId(TEST_ID.FIELD_BROWSER_CUSTOM_CREATE_BTN)).toBeVisible();
       });
+
+      it('The column state is synced correctly between the column selector and the field selector', async () => {
+        const columnToHide = tableProps.columns[0];
+        render(
+          <AlertsTableWithProviders
+            {...tableProps}
+            toolbarVisibility={{
+              showColumnSelector: true,
+            }}
+            initialBulkActionsState={{
+              ...defaultBulkActionsState,
+              rowSelection: new Map(),
+            }}
+          />
+        );
+
+        const fieldBrowserBtn = await screen.findByTestId(TEST_ID.FIELD_BROWSER_BTN);
+        const columnSelectorBtn = await screen.findByTestId('dataGridColumnSelectorButton');
+
+        // Open the column visibility selector and hide the column
+        fireEvent.click(columnSelectorBtn);
+        const columnVisibilityToggle = await screen.findByTestId(
+          `dataGridColumnSelectorToggleColumnVisibility-${columnToHide.id}`
+        );
+        fireEvent.click(columnVisibilityToggle);
+
+        // Open the field browser
+        fireEvent.click(fieldBrowserBtn);
+        expect(await screen.findByTestId(TEST_ID.FIELD_BROWSER)).toBeVisible();
+
+        // The column should be checked in the field browser, independent of its visibility status
+        const columnCheckbox: HTMLInputElement = await screen.findByTestId(
+          `field-${columnToHide.id}-checkbox`
+        );
+        expect(columnCheckbox).toBeChecked();
+      });
     });
 
     describe('cases column', () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
index 617b0f9c70a0a..61c65eded27b5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
@@ -413,7 +413,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
       rowSelection: bulkActionsState.rowSelection,
       alerts,
       isLoading,
-      columnIds: visibleColumns,
+      columnIds: columns.map((column) => column.id),
       onToggleColumn,
       onResetColumns,
       browserFields,
@@ -431,7 +431,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
     alertsCount,
     bulkActionsState,
     isLoading,
-    visibleColumns,
+    columns,
     onToggleColumn,
     onResetColumns,
     browserFields,