From ba5a5c6d0ee460d642f5f0f42f32a199b3171134 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:35:35 -0800
Subject: [PATCH] [Security][EuiInMemoryTable] Replace usage of deprecated ref
 method with 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:
- https://github.com/elastic/eui/pull/7321
- https://github.com/elastic/kibana/pull/175722 (examples of basic
conversions)
---
 .../role_mappings_grid_page.tsx                  | 16 ++--------------
 .../roles/roles_grid/roles_grid_page.tsx         |  7 ++-----
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
index b5905ec147960..ed733ac8d24b9 100644
--- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
@@ -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 = {
@@ -85,7 +84,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
       selectedItems: [],
       error: undefined,
     };
-    this.tableRef = React.createRef();
   }
 
   public componentDidMount() {
@@ -226,6 +224,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
           selectedItems: newSelectedItems,
         });
       },
+      selected: selectedItems,
     };
 
     const search = {
@@ -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"
               >
@@ -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',
@@ -499,10 +491,6 @@ export class RoleMappingsGridPage extends Component<Props, State> {
     }
   };
 
-  private onRoleMappingsDeleteCancel = () => {
-    this.tableRef.current?.setSelection([]);
-  };
-
   private async checkPrivileges() {
     try {
       const { canManageRoleMappings, hasCompatibleRealms } =
diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
index 6a6433038d635..1da786c7e6b70 100644
--- a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx
@@ -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 = {
@@ -80,7 +79,6 @@ export class RolesGridPage extends Component<Props, State> {
       permissionDenied: false,
       includeReservedRoles: true,
     };
-    this.tableRef = React.createRef();
   }
 
   public componentDidMount() {
@@ -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={{
@@ -188,7 +187,6 @@ export class RolesGridPage extends Component<Props, State> {
                 direction: 'asc',
               },
             }}
-            ref={this.tableRef}
             rowProps={(role: Role) => {
               return {
                 'data-test-subj': `roleRow`,
@@ -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 });
   };
 }