WIP On fixing CI checks for React 18 upgrade

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Maintenance
 - Remove transport_enabled column from the authentication sequence table ([#2363](https://github.com/opensearch-project/security-dashboards-plugin/pull/2363))
+- React 18 Upgrade ([#2371](https://github.com/opensearch-project/security-dashboards-plugin/issues/2371))
 
 ### Documentation
 

opensearch_dashboards.json

@@ -1,7 +1,7 @@
 {
   "id": "securityDashboards",
-  "version": "3.5.0.0",
-  "opensearchDashboardsVersion": "3.5.0",
+  "version": "3.6.0.0",
+  "opensearchDashboardsVersion": "3.6.0",
   "configPath": [
     "opensearch_security"
   ],

package.json

@@ -1,10 +1,10 @@
 {
   "name": "opensearch-security-dashboards",
-  "version": "3.5.0.0",
+  "version": "3.6.0.0",
   "main": "target/plugins/opensearch_security_dashboards",
   "opensearchDashboards": {
-    "version": "3.5.0",
-    "templateVersion": "3.5.0"
+    "version": "3.6.0",
+    "templateVersion": "3.6.0"
   },
   "license": "Apache-2.0",
   "homepage": "https://github.com/opensearch-project/security-dashboards-plugin",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.0.0",
     "@types/hapi__wreck": "^15.0.1",
     "cypress": "^13.6.0",
     "cypress-mochawesome-reporter": "^3.3.0",

public/apps/account/account-app.tsx

@@ -14,8 +14,8 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { CoreStart } from 'opensearch-dashboards/public';
+import { createRoot } from 'react-dom/client';
 import { AccountNavButton } from './account-nav-button';
 import { fetchAccountInfoSafe } from './utils';
 import { ClientConfigType } from '../../types';
@@ -112,18 +112,18 @@ export async function setupTopNavButton(coreStart: CoreStart, config: ClientConf
     coreStart.chrome.navControls[isPlacedInLeftNav ? 'registerLeftBottom' : 'registerRight']({
       order: isPlacedInLeftNav ? 10000 : 2000,
       mount: (element: HTMLElement) => {
-        ReactDOM.render(
+        const root = createRoot(element);
+        root.render(
           <AccountNavButton
             coreStart={coreStart}
             isInternalUser={accountInfo.is_internal_user}
             username={accountInfo.user_name}
             tenant={tenant}
             config={config}
             currAuthType={currAuthType.toLowerCase()}
-          />,
-          element
+          />
         );
-        return () => ReactDOM.unmountComponentAtNode(element);
+        return () => root.unmount();
       },
     });
   }

public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap

@@ -3,7 +3,13 @@
 exports[`Role view basic rendering when permission tab is selected 1`] = `
 <Fragment>
   <Memo()
-    config={Object {}}
+    config={
+      Object {
+        "multitenancy": Object {
+          "enabled": false,
+        },
+      }
+    }
     coreStart={
       Object {
         "chrome": Object {
@@ -438,7 +444,13 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
 exports[`Role view renders when mapped user tab is selected 1`] = `
 <Fragment>
   <Memo()
-    config={Object {}}
+    config={
+      Object {
+        "multitenancy": Object {
+          "enabled": false,
+        },
+      }
+    }
     coreStart={
       Object {
         "chrome": Object {

public/apps/configuration/panels/role-view/test/role-view-multitenancy.test.tsx

@@ -0,0 +1,163 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+import { RoleView } from '../role-view';
+import { TenantsPanel } from '../tenants-panel';
+import { TenantPermissionType } from '../../../types';
+import { transformRoleIndexPermissions } from '../../../utils/index-permission-utils';
+import { transformRoleTenantPermissions } from '../../../utils/tenant-utils';
+import { getDashboardsInfoSafe } from '../../../../../utils/dashboards-info-utils';
+
+jest.mock('../../../utils/role-mapping-utils', () => ({
+  getRoleMappingData: jest.fn().mockResolvedValue({ backend_roles: [], hosts: [], users: [] }),
+  transformRoleMappingData: jest.fn().mockReturnValue({ userName: '', userType: '' }),
+  updateRoleMapping: jest.fn(),
+}));
+jest.mock('../../../utils/action-groups-utils', () => ({
+  fetchActionGroups: jest.fn().mockResolvedValue({}),
+}));
+jest.mock('../../../utils/role-detail-utils', () => ({
+  getRoleDetail: jest.fn().mockResolvedValue({
+    cluster_permissions: [],
+    index_permissions: [],
+    tenant_permissions: [],
+    reserved: false,
+  }),
+}));
+jest.mock('../../../utils/delete-confirm-modal-utils', () => ({
+  useDeleteConfirmState: jest.fn().mockReturnValue([jest.fn(), '']),
+}));
+jest.mock('../../../utils/index-permission-utils');
+jest.mock('../../../utils/tenant-utils', () => ({
+  transformRoleTenantPermissions: jest.fn(),
+  fetchTenants: jest.fn().mockResolvedValue({}),
+  transformRoleTenantPermissionData: jest.fn().mockReturnValue([]),
+  transformTenantData: jest.fn().mockReturnValue({}),
+}));
+jest.mock('../../../../../utils/auth-info-utils', () => ({
+  getCurrentUser: jest.fn().mockResolvedValue('test-user'),
+}));
+jest.mock('../../../utils/role-list-utils', () => ({
+  requestDeleteRoles: jest.fn(),
+}));
+jest.mock('../../../utils/context-menu', () => ({
+  useContextMenuState: jest
+    .fn()
+    .mockImplementation((buttonText, buttonProps, children) => [children, jest.fn()]),
+}));
+jest.mock('../../../utils/toast-utils', () => ({
+  createErrorToast: jest.fn(),
+  createUnknownErrorToast: jest.fn(),
+  useToastState: jest.fn().mockReturnValue([[], jest.fn(), jest.fn()]),
+}));
+jest.mock('../../../../../utils/dashboards-info-utils');
+
+// Mock useContext to provide DataSourceContext
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn().mockReturnValue({ dataSource: { id: 'test' }, setDataSource: jest.fn() }),
+}));
+
+const sampleRole = 'role';
+const mockCoreStart = {
+  http: 1,
+  uiSettings: { get: jest.fn().mockReturnValue(false) },
+  chrome: {
+    navGroup: { getNavGroupEnabled: jest.fn().mockReturnValue(false) },
+    setBreadcrumbs: jest.fn(),
+  },
+};
+const mockDepsStart = { navigation: { ui: { HeaderControl: {} } } };
+
+describe('RoleView multitenancy', () => {
+  const mockRoleIndexPermission = [
+    { index_patterns: ['*'], dls: '', fls: [], masked_fields: [], allowed_actions: [] },
+  ];
+  const mockRoleTenantPermission = {
+    tenant_patterns: ['dummy'],
+    permissionType: TenantPermissionType.Read,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (transformRoleIndexPermissions as jest.Mock).mockReturnValue(mockRoleIndexPermission);
+    (transformRoleTenantPermissions as jest.Mock).mockReturnValue([mockRoleTenantPermission]);
+  });
+
+  afterEach(() => {
+    // Ensure mock is reset for each test
+    (transformRoleTenantPermissions as jest.Mock).mockReturnValue([mockRoleTenantPermission]);
+  });
+
+  it.each([
+    { configEnabled: true, dashboardsEnabled: true, expected: true },
+    { configEnabled: false, dashboardsEnabled: true, expected: false },
+    { configEnabled: false, dashboardsEnabled: false, expected: false },
+    { configEnabled: true, dashboardsEnabled: false, expected: false },
+  ])(
+    'config=$configEnabled, dashboards=$dashboardsEnabled → TenantsPanel=$expected',
+    async ({ configEnabled, dashboardsEnabled, expected }) => {
+      (getDashboardsInfoSafe as jest.Mock).mockResolvedValue({
+        multitenancy_enabled: dashboardsEnabled,
+      });
+
+      let wrapper: any;
+      await act(async () => {
+        wrapper = mount(
+          <RoleView
+            roleName={sampleRole}
+            prevAction=""
+            coreStart={mockCoreStart as any}
+            depsStart={mockDepsStart as any}
+            params={{} as any}
+            config={{ multitenancy: { enabled: configEnabled } } as any}
+          />
+        );
+        await new Promise((r) => setTimeout(r, 50));
+      });
+
+      wrapper.update();
+      expect(wrapper.find(TenantsPanel).exists()).toBe(expected);
+    }
+  );
+
+  it('handles error when fetching dashboards info', async () => {
+    (getDashboardsInfoSafe as jest.Mock).mockRejectedValue(new Error('test'));
+    (transformRoleTenantPermissions as jest.Mock).mockReturnValue([mockRoleTenantPermission]);
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    let wrapper: any;
+    await act(async () => {
+      wrapper = mount(
+        <RoleView
+          roleName={sampleRole}
+          prevAction=""
+          coreStart={mockCoreStart as any}
+          depsStart={mockDepsStart as any}
+          params={{} as any}
+          config={{ multitenancy: { enabled: true } } as any}
+        />
+      );
+      await new Promise((r) => setTimeout(r, 50));
+    });
+
+    wrapper.update();
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+});