Skip to content

Commit

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

Closes #175836

## 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 the Security plugin's basic usages of controlled selection and
additionally removes 2 deletion cancellation behaviors on the team's
request. There should not be any other UI/UX regressions when selecting
rows.

See also: 
- elastic/eui#7321
- #175722 (examples of basic
conversions)
  • Loading branch information
cee-chen authored Jan 29, 2024
1 parent da17447 commit ba5a5c6
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
readOnly: false,
};

private tableRef: React.RefObject<EuiInMemoryTable<RoleMapping>>;
constructor(props: any) {
super(props);
this.state = {
Expand All @@ -85,7 +84,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
selectedItems: [],
error: undefined,
};
this.tableRef = React.createRef();
}

public componentDidMount() {
Expand Down Expand Up @@ -226,6 +224,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
selectedItems: newSelectedItems,
});
},
selected: selectedItems,
};

const search = {
Expand All @@ -237,13 +236,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
{(deleteRoleMappingsPrompt) => {
return (
<EuiButton
onClick={() =>
deleteRoleMappingsPrompt(
selectedItems,
this.onRoleMappingsDeleted,
this.onRoleMappingsDeleteCancel
)
}
onClick={() => deleteRoleMappingsPrompt(selectedItems, this.onRoleMappingsDeleted)}
color="danger"
data-test-subj="bulkDeleteActionButton"
>
Expand Down Expand Up @@ -298,7 +291,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
loading={loadState === 'loadingTable'}
message={message}
isSelectable={true}
ref={this.tableRef}
rowProps={() => {
return {
'data-test-subj': 'roleMappingRow',
Expand Down Expand Up @@ -499,10 +491,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
}
};

private onRoleMappingsDeleteCancel = () => {
this.tableRef.current?.setSelection([]);
};

private async checkPrivileges() {
try {
const { canManageRoleMappings, hasCompatibleRealms } =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export class RolesGridPage extends Component<Props, State> {
readOnly: false,
};

private tableRef: React.RefObject<EuiInMemoryTable<Role>>;
constructor(props: Props) {
super(props);
this.state = {
Expand All @@ -80,7 +79,6 @@ export class RolesGridPage extends Component<Props, State> {
permissionDenied: false,
includeReservedRoles: true,
};
this.tableRef = React.createRef();
}

public componentDidMount() {
Expand Down Expand Up @@ -156,6 +154,7 @@ export class RolesGridPage extends Component<Props, State> {
selectableMessage: (selectable: boolean) =>
!selectable ? 'Role is reserved' : '',
onSelectionChange: (selection: Role[]) => this.setState({ selection }),
selected: this.state.selection,
}
}
pagination={{
Expand Down Expand Up @@ -188,7 +187,6 @@ export class RolesGridPage extends Component<Props, State> {
direction: 'asc',
},
}}
ref={this.tableRef}
rowProps={(role: Role) => {
return {
'data-test-subj': `roleRow`,
Expand Down Expand Up @@ -484,7 +482,6 @@ export class RolesGridPage extends Component<Props, State> {
);
}
private onCancelDelete = () => {
this.setState({ showDeleteConfirmation: false, selection: [] });
this.tableRef.current?.setSelection([]);
this.setState({ showDeleteConfirmation: false });
};
}

0 comments on commit ba5a5c6

Please sign in to comment.