[SecuritySolution] Fix issue of disappearing columns in the alerts ta…

…ble (#197043)

## Summary

Fixes: #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 <[email protected]>

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', () => {

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,