github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][EuiInMemoryTable] Replace usage of deprecated ref method with controlled selection.selected API (#175726)

Browse source 
## Summary

**Please help us QA your affected tables to confirm that your plugin's
table selection still works as before!**

EUI will shortly be removing this deprecated ref `setSelection` method
in favor of the new controlled `selection.selected` prop. This PR
converts basic usages of controlled selection, which should not suffer
any UI/UX regressions.

See also: 
- https://github.com/elastic/eui/pull/7321
- https://github.com/elastic/kibana/pull/175722 (examples of basic
conversions)

Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>
This commit is contained in:
Cee Chen 2024-01-30 11:51:07 -08:00 • committed by GitHub
parent 5b25191153
commit 9e720d0076
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 4 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

37
x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx
View file

@ -10,7 +10,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
import React, { useCallback, useMemo, useRef } from 'react';
import { Loader } from '../../../../common/components/loader';
import { useBoolState } from '../../../../common/hooks/use_bool_state';
import { useValueChanged } from '../../../../common/hooks/use_value_changed';
import { PrePackagedRulesPrompt } from '../../../../detections/components/rules/pre_packaged_rules/load_empty_prompt';
import type { Rule } from '../../../rule_management/logic';
import * as i18n from '../../../../detections/pages/detection_engine/rules/translations';
@ -61,7 +60,6 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
const hasPermissions = hasUserCRUDPermission(canUserCRUD);
const isUpgradingSecurityPackages = useIsUpgradingSecurityPackages();
const tableRef = useRef<EuiBasicTable>(null);
const rulesTableContext = useRulesTableContext();
const { data: ruleManagementFilters } = useRuleManagementFilters();
@ -171,14 +169,6 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
const isSelectAllCalled = useRef(false);
// TODO Remove this synchronization logic after https://github.com/elastic/eui/issues/6184 is implemented
// Synchronize selectedRuleIds with EuiBasicTable's selected rows
useValueChanged((ruleIds) => {
if (tableRef.current != null) {
tableRef.current.setSelection(rules.filter((rule) => ruleIds.includes(rule.id)));
}
}, selectedRuleIds);
const isTableSelectable =
hasPermissions &&
(selectedTab === AllRulesTabs.management || selectedTab === AllRulesTabs.monitoring);
@ -187,30 +177,12 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
() => ({
selectable: (item: Rule) => !loadingRuleIds.includes(item.id),
onSelectionChange: (selected: Rule[]) => {
/**
* EuiBasicTable doesn't provide declarative API to control selected rows.
* This limitation requires us to synchronize selection state manually using setSelection().
* But it creates a chain reaction when the user clicks Select All:
* selectAll() -> setSelection() -> onSelectionChange() -> setSelection().
* To break the chain we should check whether the onSelectionChange was triggered
* by the Select All action or not.
*
*/
if (isSelectAllCalled.current) {
isSelectAllCalled.current = false;
// Handle special case of unselecting all rules via checkbox
// after all rules were selected via Bulk select.
if (selected.length === 0) {
setIsAllSelected(false);
setSelectedRuleIds([]);
}
} else {
setSelectedRuleIds(selected.map(({ id }) => id));
setIsAllSelected(false);
}
setSelectedRuleIds(selected.map(({ id }) => id));
setIsAllSelected(false);
},
selected: selectedRuleIds.map((id) => ({ id } as Rule)), // EuiBasicTable only needs the itemId
}),
[loadingRuleIds, setIsAllSelected, setSelectedRuleIds]
[loadingRuleIds, setIsAllSelected, setSelectedRuleIds, selectedRuleIds]
);
const toggleSelectAll = useCallback(() => {
@ -329,7 +301,6 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
noItemsMessage={NO_ITEMS_MESSAGE}
onChange={tableOnChangeCallback}
pagination={paginationMemo}
ref={tableRef}
selection={isTableSelectable ? euiBasicTableSelectionProps : undefined}
sorting={{
sort: {