[8.x] [Roles] Fix bug with roles grid not sorting on clicking table h…

…eader (#194196) (#194283) # Backport This will backport the following commits from `main` to `8.x`: - [[Roles] Fix bug with roles grid not sorting on clicking table header (#194196)](#194196)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Sid <[email protected]>
elastic · Sep 27, 2024 · 8c9060d · 8c9060d
1 parent 366679c
commit 8c9060d
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 47 deletions.
diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.test.tsx b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiBasicTable, EuiIcon } from '@elastic/eui';
+import { EuiIcon, EuiInMemoryTable } from '@elastic/eui';
 import type { ReactWrapper } from 'enzyme';
 import React from 'react';
 
@@ -209,7 +209,7 @@ describe('<RolesGridPage />', () => {
       return updatedWrapper.find(EuiIcon).length > initialIconCount;
     });
 
-    expect(wrapper.find(EuiBasicTable).props().items).toEqual([
+    expect(wrapper.find(EuiInMemoryTable).props().items).toEqual([
       {
         name: 'test-role-1',
         elasticsearch: {
@@ -296,7 +296,7 @@ describe('<RolesGridPage />', () => {
 
     findTestSubject(wrapper, 'showReservedRolesSwitch').simulate('click');
 
-    expect(wrapper.find(EuiBasicTable).props().items).toEqual([
+    expect(wrapper.find(EuiInMemoryTable).props().items).toEqual([
       {
         name: 'test-role-1',
         elasticsearch: { cluster: [], indices: [], run_as: [] },
@@ -322,6 +322,115 @@ describe('<RolesGridPage />', () => {
     ]);
   });
 
+  it('sorts columns on clicking the column header', async () => {
+    const wrapper = mountWithIntl(
+      <RolesGridPage
+        rolesAPIClient={apiClientMock}
+        history={history}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
+      />
+    );
+    const initialIconCount = wrapper.find(EuiIcon).length;
+
+    await waitForRender(wrapper, (updatedWrapper) => {
+      return updatedWrapper.find(EuiIcon).length > initialIconCount;
+    });
+
+    expect(wrapper.find(EuiInMemoryTable).props().items).toEqual([
+      {
+        name: 'test-role-1',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+      },
+      {
+        name: 'test-role-with-description',
+        description: 'role-description',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+      },
+      {
+        name: 'reserved-role',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+        metadata: {
+          _reserved: true,
+        },
+      },
+      {
+        name: 'disabled-role',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+        transient_metadata: {
+          enabled: false,
+        },
+      },
+      {
+        name: 'special%chars%role',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+      },
+    ]);
+
+    findTestSubject(wrapper, 'tableHeaderCell_name_0').simulate('click');
+
+    const firstRowElement = findTestSubject(wrapper, 'roleRowName').first();
+    expect(firstRowElement.text()).toBe('disabled-role');
+  });
+
   it('hides controls when `readOnly` is enabled', async () => {
     const wrapper = mountWithIntl(
       <RolesGridPage

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
@@ -5,18 +5,13 @@
  * 2.0.
  */
 
-import type {
-  CriteriaWithPagination,
-  EuiBasicTableColumn,
-  EuiSwitchEvent,
-  Query,
-} from '@elastic/eui';
+import type { EuiBasicTableColumn, EuiSwitchEvent } from '@elastic/eui';
 import {
-  EuiBasicTable,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiInMemoryTable,
   EuiLink,
   EuiSearchBar,
   EuiSpacer,
@@ -59,12 +54,6 @@ export interface Props extends StartServices {
   cloudOrgUrl?: string;
 }
 
-interface RolesTableState {
-  query: Query;
-  from: number;
-  size: number;
-}
-
 const getRoleManagementHref = (action: 'edit' | 'clone', roleName?: string) => {
   return `/${action}${roleName ? `/${encodeURIComponent(roleName)}` : ''}`;
 };
@@ -79,17 +68,6 @@ const getVisibleRoles = (roles: Role[], filter: string, includeReservedRoles: bo
   });
 };
 
-const DEFAULT_TABLE_STATE = {
-  query: EuiSearchBar.Query.MATCH_ALL,
-  sort: {
-    field: 'creation' as const,
-    direction: 'desc' as const,
-  },
-  from: 0,
-  size: 25,
-  filters: {},
-};
-
 export const RolesGridPage: FC<Props> = ({
   notifications,
   rolesAPIClient,
@@ -109,7 +87,6 @@ export const RolesGridPage: FC<Props> = ({
   const [permissionDenied, setPermissionDenied] = useState<boolean>(false);
   const [includeReservedRoles, setIncludeReservedRoles] = useState<boolean>(true);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [tableState, setTableState] = useState<RolesTableState>(DEFAULT_TABLE_STATE);
 
   useEffect(() => {
     loadRoles();
@@ -235,15 +212,6 @@ export const RolesGridPage: FC<Props> = ({
     }
   };
 
-  const onTableChange = ({ page, sort }: CriteriaWithPagination<Role>) => {
-    const newState = {
-      ...tableState,
-      from: page?.index! * page?.size!,
-      size: page?.size!,
-    };
-    setTableState(newState);
-  };
-
   const getColumnConfig = (): Array<EuiBasicTableColumn<Role>> => {
     const config: Array<EuiBasicTableColumn<Role>> = [
       {
@@ -365,12 +333,6 @@ export const RolesGridPage: FC<Props> = ({
     setShowDeleteConfirmation(false);
   };
 
-  const pagination = {
-    pageIndex: tableState.from / tableState.size,
-    pageSize: tableState.size,
-    totalItemCount: visibleRoles.length,
-    pageSizeOptions: [25, 50, 100],
-  };
   return permissionDenied ? (
     <PermissionDenied />
   ) : (
@@ -466,7 +428,7 @@ export const RolesGridPage: FC<Props> = ({
           toolsRight={renderToolsRight()}
         />
         <EuiSpacer size="s" />
-        <EuiBasicTable
+        <EuiInMemoryTable
           data-test-subj="rolesTable"
           itemId="name"
           columns={getColumnConfig()}
@@ -481,9 +443,11 @@ export const RolesGridPage: FC<Props> = ({
                   selected: selection,
                 }
           }
-          onChange={onTableChange}
-          pagination={pagination}
-          noItemsMessage={
+          pagination={{
+            initialPageSize: 20,
+            pageSizeOptions: [10, 20, 30, 50, 100],
+          }}
+          message={
             buildFlavor === 'serverless' ? (
               <FormattedMessage
                 id="xpack.security.management.roles.noCustomRolesFound"