[8.16] [SecuritySolution] Fix issue of disappearing columns in the al…

…erts table (#197043) (#197624)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[SecuritySolution] Fix issue of disappearing columns in the alerts
table (#197043)](#197043)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jan
Monschke","email":"jan.monschke@elastic.co"},"sourceCommit":{"committedDate":"2024-10-24T12:14:29Z","message":"[SecuritySolution]
Fix issue of disappearing columns in the alerts table (#197043)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/196877\r\n\r\nThe issue above
describes a situation in which columns can disappear\r\nwhen toggling
them in a certain order in the \"Columns\" and \"Fields\".\r\n\r\nSteps
to reproduce the original issue:\r\n\r\n- Make sure the`file.name`
column us visible in the alerts table, the\r\n`Fields` popup and in the
`Columns` selector\r\n- Hide the `file.name` column from the `Columns`
selector\r\n- Go to `Fields` and enable the `file.name` field\r\n-
Observe that the column isn't showing up in the table\r\n- The
`file.name` column is also not showing up in the `Columns`\r\nselector
anymore.\r\n\r\nThe issue has a video demonstration attached to it as
well.\r\n\r\nWith this fix applied, the column does not \"disappear\"
anymore:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4056f297-584a-4713-8936-b4e3ac3339a0\r\n\r\n###
Checklist\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the common
scenarios\r\n\r\n@elastic/response-ops Got any ideas on how to best add
unit tests for\r\nthis?\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic
Machine
<elasticmachine@users.noreply.github.com>","sha":"d74b70f7f5c64b5fa4166d761b48c211c2d5abac","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","v8.16.0"],"title":"[SecuritySolution] Fix issue
of disappearing columns in the alerts
table","number":197043,"url":"https://github.com/elastic/kibana/pull/197043","mergeCommit":{"message":"[SecuritySolution]
Fix issue of disappearing columns in the alerts table (#197043)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/196877\r\n\r\nThe issue above
describes a situation in which columns can disappear\r\nwhen toggling
them in a certain order in the \"Columns\" and \"Fields\".\r\n\r\nSteps
to reproduce the original issue:\r\n\r\n- Make sure the`file.name`
column us visible in the alerts table, the\r\n`Fields` popup and in the
`Columns` selector\r\n- Hide the `file.name` column from the `Columns`
selector\r\n- Go to `Fields` and enable the `file.name` field\r\n-
Observe that the column isn't showing up in the table\r\n- The
`file.name` column is also not showing up in the `Columns`\r\nselector
anymore.\r\n\r\nThe issue has a video demonstration attached to it as
well.\r\n\r\nWith this fix applied, the column does not \"disappear\"
anymore:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4056f297-584a-4713-8936-b4e3ac3339a0\r\n\r\n###
Checklist\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the common
scenarios\r\n\r\n@elastic/response-ops Got any ideas on how to best add
unit tests for\r\nthis?\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic
Machine
<elasticmachine@users.noreply.github.com>","sha":"d74b70f7f5c64b5fa4166d761b48c211c2d5abac"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197043","number":197043,"mergeCommit":{"message":"[SecuritySolution]
Fix issue of disappearing columns in the alerts table (#197043)\n\n##
Summary\r\n\r\nFixes:
https://github.com/elastic/kibana/issues/196877\r\n\r\nThe issue above
describes a situation in which columns can disappear\r\nwhen toggling
them in a certain order in the \"Columns\" and \"Fields\".\r\n\r\nSteps
to reproduce the original issue:\r\n\r\n- Make sure the`file.name`
column us visible in the alerts table, the\r\n`Fields` popup and in the
`Columns` selector\r\n- Hide the `file.name` column from the `Columns`
selector\r\n- Go to `Fields` and enable the `file.name` field\r\n-
Observe that the column isn't showing up in the table\r\n- The
`file.name` column is also not showing up in the `Columns`\r\nselector
anymore.\r\n\r\nThe issue has a video demonstration attached to it as
well.\r\n\r\nWith this fix applied, the column does not \"disappear\"
anymore:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4056f297-584a-4713-8936-b4e3ac3339a0\r\n\r\n###
Checklist\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the common
scenarios\r\n\r\n@elastic/response-ops Got any ideas on how to best add
unit tests for\r\nthis?\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic
Machine
<elasticmachine@users.noreply.github.com>","sha":"d74b70f7f5c64b5fa4166d761b48c211c2d5abac"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jan Monschke <jan.monschke@elastic.co>

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,