Refactor Roles Grid page from class component to functional component (…

…#186278) Closes #186388 ## Summary This PR covers some of the pre-work required to modernize role management in Kibana. It convert the older Class component to a functional component. It also breaks up the EUI in-memory table into it's component parts of EUI Search Bar, Filters and EUI Basic table. ### Checklist - [x] Since there's no change to the functionality, tests are expected to continue passing --------- Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 21, 2024 · 9ed2ad9 · 9ed2ad9
1 parent 32e5360
commit 9ed2ad9
Show file tree

Hide file tree

Showing 2 changed files with 448 additions and 375 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
@@ -44,6 +44,7 @@ const waitForRender = async (
 describe('<RolesGridPage />', () => {
   let apiClientMock: jest.Mocked<PublicMethodsOf<RolesAPIClient>>;
   let history: ReturnType<typeof scopedHistoryMock.create>;
+  const { theme, i18n, analytics, notifications } = coreMock.createStart();
 
   beforeEach(() => {
     history = scopedHistoryMock.create();
@@ -87,7 +88,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
       />
     );
     const initialIconCount = wrapper.find(EuiIcon).length;
@@ -105,7 +110,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
       />
     );
     const initialIconCount = wrapper.find(EuiIcon).length;
@@ -125,7 +134,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
       />
     );
     await waitForRender(wrapper, (updatedWrapper) => {
@@ -139,7 +152,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
       />
     );
     const initialIconCount = wrapper.find(EuiIcon).length;
@@ -179,7 +196,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
       />
     );
     const initialIconCount = wrapper.find(EuiIcon).length;
@@ -190,57 +211,111 @@ describe('<RolesGridPage />', () => {
 
     expect(wrapper.find(EuiBasicTable).props().items).toEqual([
       {
-        name: 'disabled-role',
-        elasticsearch: { cluster: [], indices: [], run_as: [] },
-        kibana: [{ base: [], spaces: [], feature: {} }],
-        transient_metadata: { enabled: false },
+        name: 'test-role-1',
+        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: 'test-role-with-description',
+        description: 'role-description',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
       },
       {
-        name: 'special%chars%role',
-        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: 'test-role-1',
-        elasticsearch: { cluster: [], indices: [], run_as: [] },
-        kibana: [{ base: [], spaces: [], feature: {} }],
+        name: 'disabled-role',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
+        transient_metadata: {
+          enabled: false,
+        },
       },
       {
-        name: 'test-role-with-description',
-        description: 'role-description',
-        elasticsearch: { cluster: [], indices: [], run_as: [] },
-        kibana: [{ base: [], spaces: [], feature: {} }],
+        name: 'special%chars%role',
+        elasticsearch: {
+          cluster: [],
+          indices: [],
+          run_as: [],
+        },
+        kibana: [
+          {
+            base: [],
+            spaces: [],
+            feature: {},
+          },
+        ],
       },
     ]);
 
     findTestSubject(wrapper, 'showReservedRolesSwitch').simulate('click');
 
     expect(wrapper.find(EuiBasicTable).props().items).toEqual([
       {
-        name: 'disabled-role',
+        name: 'test-role-1',
         elasticsearch: { cluster: [], indices: [], run_as: [] },
         kibana: [{ base: [], spaces: [], feature: {} }],
-        transient_metadata: { enabled: false },
       },
       {
-        name: 'special%chars%role',
+        name: 'test-role-with-description',
+        description: 'role-description',
         elasticsearch: { cluster: [], indices: [], run_as: [] },
         kibana: [{ base: [], spaces: [], feature: {} }],
       },
       {
-        name: 'test-role-1',
+        name: 'disabled-role',
         elasticsearch: { cluster: [], indices: [], run_as: [] },
         kibana: [{ base: [], spaces: [], feature: {} }],
+        transient_metadata: { enabled: false },
       },
       {
-        name: 'test-role-with-description',
-        description: 'role-description',
+        name: 'special%chars%role',
         elasticsearch: { cluster: [], indices: [], run_as: [] },
         kibana: [{ base: [], spaces: [], feature: {} }],
       },
@@ -252,7 +327,11 @@ describe('<RolesGridPage />', () => {
       <RolesGridPage
         rolesAPIClient={apiClientMock}
         history={history}
-        notifications={coreMock.createStart().notifications}
+        notifications={notifications}
+        i18n={i18n}
+        buildFlavor={'traditional'}
+        analytics={analytics}
+        theme={theme}
         readOnly
       />
     );