Skip to content

Commit

Permalink
[Fleet][EuiInMemoryTable] Replace usage of deprecated ref method with…
Browse files Browse the repository at this point in the history
… controlled `selection.selected` API (#175727)

## 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 Fleet's more advanced usage of controlled selection, which
should not suffer any UI/UX regressions.

See also: 
- elastic/eui#7321
- #175722 (examples of basic
conversions)
  • Loading branch information
cee-chen authored Jan 29, 2024
1 parent ace2b78 commit da17447
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ interface Props {
sortField: keyof Agent;
sortOrder: 'asc' | 'desc';
onSelectionChange: (agents: Agent[]) => void;
tableRef?: React.Ref<any>;
selected: Agent[];
showUpgradeable: boolean;
totalAgents?: number;
pagination: Pagination;
Expand All @@ -77,9 +77,9 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
renderActions,
sortField,
sortOrder,
tableRef,
onTableChange,
onSelectionChange,
selected,
totalAgents = 0,
showUpgradeable,
pagination,
Expand Down Expand Up @@ -318,7 +318,6 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {

return (
<EuiBasicTable<Agent>
ref={tableRef}
className="fleet__agentList__table"
data-test-subj="fleetAgentListTable"
loading={isLoading}
Expand All @@ -341,6 +340,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
}}
isSelectable={true}
selection={{
selected,
onSelectionChange,
selectable: isAgentSelectable,
selectableMessage: (selectable, agent) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { useState, useMemo, useCallback, useRef } from 'react';
import React, { useState, useMemo, useCallback } from 'react';
import { differenceBy, isEqual } from 'lodash';
import type { EuiBasicTable } from '@elastic/eui';
import { EuiSpacer, EuiPortal } from '@elastic/eui';

import type { Agent } from '../../../types';
Expand Down Expand Up @@ -49,7 +48,6 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
// Table and search states
const [selectedAgents, setSelectedAgents] = useState<Agent[]>([]);
const [selectionMode, setSelectionMode] = useState<SelectionMode>('manual');
const tableRef = useRef<EuiBasicTable<Agent>>(null);

const {
allTags,
Expand Down Expand Up @@ -208,21 +206,19 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
);

const onSelectionChange = (newAgents: Agent[]) => {
setSelectedAgents(newAgents);
if (selectionMode === 'query' && newAgents.length < selectedAgents.length) {
// differentiating between selection changed by agents dropping from current page or user action
const areSelectedAgentsStillVisible =
selectedAgents.length > 0 &&
differenceBy(selectedAgents, agentsOnCurrentPage, 'id').length === 0;
if (areSelectedAgentsStillVisible) {
setSelectionMode('manual');
} else {
if (!areSelectedAgentsStillVisible) {
// force selecting all agents on current page if staying in query mode
if (tableRef?.current) {
tableRef.current.setSelection(agentsOnCurrentPage);
}
return setSelectedAgents(agentsOnCurrentPage);
} else {
setSelectionMode('manual');
}
}
setSelectedAgents(newAgents);
};

const agentToUnenrollHasFleetServer = useMemo(() => {
Expand Down Expand Up @@ -429,10 +425,8 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
setSelectionMode={setSelectionMode}
selectedAgents={selectedAgents}
setSelectedAgents={(newAgents: Agent[]) => {
if (tableRef?.current) {
tableRef.current.setSelection(newAgents);
setSelectionMode('manual');
}
setSelectedAgents(newAgents);
setSelectionMode('manual');
}}
clearFilters={clearFilters}
isUsingFilter={isUsingFilter}
Expand All @@ -448,7 +442,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
agentPoliciesIndexedById={agentPoliciesIndexedById}
renderActions={renderActions}
onSelectionChange={onSelectionChange}
tableRef={tableRef}
selected={selectedAgents}
showUpgradeable={showUpgradeable}
onTableChange={onTableChange}
pagination={pagination}
Expand Down

0 comments on commit da17447

Please sign in to comment.