From e0d22b31afbbed626415b84104cd8e7cbe600618 Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Tue, 9 Sep 2025 02:49:03 +0200 Subject: [PATCH] [Security Solution] Fix toggle column not working from anywhere but the alerts page (#234278) ## Summary This PR fixes an issue related to the alert flyout toggle column functionality not working anywhere but from the alerts page. We noticed in the code that we when toggling on/off columns, were filtering out all the usages of the alerts table that were not the alerts page. This means that the rule details, case details, attack discovery and entity analytics pages had a bug where the toggle column cell actions was not working.
Alerts page remains unchanged Before fix https://github.com/user-attachments/assets/f713e70a-8a13-452c-8b9c-c468448b967a After fix https://github.com/user-attachments/assets/7383783e-69a8-452c-9d83-ad8d6e2a1565
Timeline remains unchanged Before fix | Before fix | After fix | | ------------- | ------------- | | https://github.com/user-attachments/assets/6088856d-f884-4a2e-819e-a6df12b31fbc | https://github.com/user-attachments/assets/4916b382-54fc-4210-9576-11cc8ebc2f2e |
Explore pages remain unchanged Before fix https://github.com/user-attachments/assets/8c42e3f2-ab26-4632-9bba-e1c7f8957b6e After fix https://github.com/user-attachments/assets/69561c31-f69c-4ef9-9d8e-a7862e634e0b
Case details page is fixed Before fix https://github.com/user-attachments/assets/9a73f413-606e-4245-b827-023677130d2b After fix https://github.com/user-attachments/assets/b7c0827a-4abc-4824-9b9e-8b86f545de17
Rule details page is fixed Before fix https://github.com/user-attachments/assets/560ddf58-7047-4258-aa21-6fd5bdb5e285 After fix https://github.com/user-attachments/assets/1d41244a-5482-4833-8887-d883a9f537be
Attack discovery page is fixed Before fix https://github.com/user-attachments/assets/692e9af4-4cd8-4cb5-ac86-ce99706f6d37 After fix https://github.com/user-attachments/assets/5984c404-9d6b-4c1e-9af3-0877bd660024
### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. https://github.com/elastic/kibana/issues/234223 (cherry picked from commit 890f7e9c631938443e3c8910350877f87f2a87bb) --- .../cell_action/toggle_column.test.ts | 57 ++++++++++++------- .../cell_action/toggle_column.ts | 10 ++-- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.test.ts b/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.test.ts index 58e06a1b6e6bf..209dc2704d0d7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.test.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.test.ts @@ -6,7 +6,7 @@ */ import type { SecurityAppStore } from '../../../../common/store/types'; -import { TableId, dataTableActions } from '@kbn/securitysolution-data-table'; +import { dataTableActions, TableId } from '@kbn/securitysolution-data-table'; import type { CellActionExecutionContext } from '@kbn/cell-actions'; import { createToggleColumnCellActionFactory } from './toggle_column'; @@ -79,6 +79,7 @@ describe('createToggleColumnCellActionFactory', () => { afterEach(() => { mockToggleColumn.mockClear(); }); + it('should remove column', async () => { await toggleColumnAction.execute(context); expect(mockDispatch).toHaveBeenCalledWith( @@ -108,32 +109,46 @@ describe('createToggleColumnCellActionFactory', () => { ); }); - it('should call toggleColumn on the visible alerts table to add a column in alert', async () => { - const name = 'fake-field-name'; - await toggleColumnAction.execute({ - ...context, - data: [{ ...context.data[0], field: { ...context.data[0].field, name } }], - metadata: { - scopeId: TableId.alertsOnAlertsPage, - alertsTableRef: { - current: { toggleColumn: mockToggleColumn } as unknown as AlertsTableImperativeApi, + [ + TableId.alertsOnAlertsPage, + TableId.alertsOnCasePage, + TableId.alertsOnRuleDetailsPage, + TableId.alertsRiskInputs, + ].forEach((scopeId) => { + it(`should call toggleColumn on the visible alerts table to add a column in alert for TableId ${scopeId}`, async () => { + const name = 'fake-field-name'; + await toggleColumnAction.execute({ + ...context, + data: [{ ...context.data[0], field: { ...context.data[0].field, name } }], + metadata: { + scopeId, + alertsTableRef: { + current: { toggleColumn: mockToggleColumn } as unknown as AlertsTableImperativeApi, + }, }, - }, + }); + expect(mockToggleColumn).toHaveBeenCalledWith(name); }); - expect(mockToggleColumn).toHaveBeenCalledWith(name); }); - it('should call toggleColumn on the visible alerts table to remove a column in alert', async () => { - await toggleColumnAction.execute({ - ...context, - metadata: { - scopeId: TableId.alertsOnAlertsPage, - alertsTableRef: { - current: { toggleColumn: mockToggleColumn } as unknown as AlertsTableImperativeApi, + [ + TableId.alertsOnAlertsPage, + TableId.alertsOnCasePage, + TableId.alertsOnRuleDetailsPage, + TableId.alertsRiskInputs, + ].forEach((scopeId) => { + it(`should call toggleColumn on the visible alerts table to remove a column in alert for TableId ${scopeId}`, async () => { + await toggleColumnAction.execute({ + ...context, + metadata: { + scopeId: TableId.alertsOnAlertsPage, + alertsTableRef: { + current: { toggleColumn: mockToggleColumn } as unknown as AlertsTableImperativeApi, + }, }, - }, + }); + expect(mockToggleColumn).toHaveBeenCalledWith(fieldName); }); - expect(mockToggleColumn).toHaveBeenCalledWith(fieldName); }); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.ts b/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.ts index b41866fded5b6..6f2f4e87d36ae 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/app/actions/toggle_column/cell_action/toggle_column.ts @@ -6,12 +6,11 @@ */ import { i18n } from '@kbn/i18n'; -import { createCellActionFactory, type CellActionTemplate } from '@kbn/cell-actions/actions'; +import { type CellActionTemplate, createCellActionFactory } from '@kbn/cell-actions/actions'; import { + dataTableSelectors, defaultColumnHeaderType, tableDefaults, - dataTableSelectors, - TableId, } from '@kbn/securitysolution-data-table'; import { fieldHasCellActions } from '../../utils'; import type { SecurityAppStore } from '../../../../common/store'; @@ -69,11 +68,12 @@ export const createToggleColumnCellActionFactory = createCellActionFactory( } // When the flyout was initiated from an alerts table, use its toggleColumn action - if (metadata.alertsTableRef?.current && scopeId === TableId.alertsOnAlertsPage) { + // We can safely do this now as we do not have a page with multiple alerts tables. If that were the case we'd have problem with the ref + if (metadata.alertsTableRef?.current) { metadata.alertsTableRef.current.toggleColumn(field.name); return; } - + // Otherwise, use the store to dispatch the action, either for Timeline or the events table in the Explore pages const selector = isTimelineScope(scopeId) ? timelineSelectors.getTimelineByIdSelector() : dataTableSelectors.getTableByIdSelector();