Migrate to ReactDOM 18 functions

openshift-assisted · Apr 26, 2024 · dc66843 · dc66843
1 parent 38295d0
commit dc66843
Show file tree

Hide file tree

Showing 6 changed files with 2,040 additions and 1,857 deletions.
diff --git a/apps/assisted-ui/src/main.tsx b/apps/assisted-ui/src/main.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { App } from './components/App';
 
 const rootElement = document.getElementById('root');
 if (rootElement) {
   rootElement.classList.add('pf-v5-u-h-100vh');
-  ReactDOM.render(
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
-    rootElement,
   );
 }
diff --git a/libs/ui-lib/lib/_test-helpers/mock-container.ts b/libs/ui-lib/lib/_test-helpers/mock-container.ts
@@ -1,9 +1,13 @@
-import { unmountComponentAtNode } from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 let element: HTMLDivElement | null = null;
+let root: ReactDOM.Root;
 
 function getMockContainer() {
-  return element;
+  if (element) {
+    root = ReactDOM.createRoot(element);
+    return root;
+  }
 }
 
 /**
@@ -30,7 +34,7 @@ function initMockContainer(
 function tryResetMockContainer() {
   let didResetMockContainer = false;
   if (element) {
-    unmountComponentAtNode(element);
+    root.unmount();
     element.remove();
     element = null;
     didResetMockContainer = true;

diff --git a/libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx b/libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx
@@ -65,11 +65,7 @@ export const LabelField: React.FC<LabelFieldProps> = ({
           }}
           addKeys={[13, 32, 188]}
           renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-            <LabelValue
-              key={key as number}
-              onClose={() => onRemove(key as number)}
-              value={getTagDisplayValue(tag)}
-            />
+            <LabelValue key={key} onClose={() => onRemove(key)} value={getTagDisplayValue(tag)} />
           )}
           addOnBlur
           inputProps={{

diff --git a/libs/ui-lib/lib/ocm/hooks/_use-feature-detection.test.tsx b/libs/ui-lib/lib/ocm/hooks/_use-feature-detection.test.tsx
@@ -2,7 +2,6 @@ import type { Account, Organization } from '@openshift-assisted/types/accounts-m
 import { describe, it, vi, expect } from 'vitest';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { render } from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { featureFlagsActions } from '../store/slices/feature-flags/slice';
 import { storeDay1 } from '../store/store-day1';
@@ -40,16 +39,19 @@ describe('use-feature-detection.ts', () => {
       ],
     });
 
-    await act(() =>
-      Promise.resolve(
-        render(
-          <Provider store={storeDay1}>
-            <DummyComponent />
-          </Provider>,
-          getMockContainer(),
+    const mockContainer = getMockContainer();
+
+    if (mockContainer) {
+      await act(() =>
+        Promise.resolve(
+          mockContainer.render(
+            <Provider store={storeDay1}>
+              <DummyComponent />
+            </Provider>,
+          ),
         ),
-      ),
-    );
+      );
+    }
 
     expect(isFeatureEnabled('ASSISTED_INSTALLER_PLATFORM_OCI')(storeDay1.getState())).toBe(true);
   });
@@ -70,16 +72,19 @@ describe('use-feature-detection.ts', () => {
       ],
     });
 
-    await act(() =>
-      Promise.resolve(
-        render(
-          <Provider store={storeDay1}>
-            <DummyComponent />
-          </Provider>,
-          getMockContainer(),
+    const mockContainer = getMockContainer();
+
+    if (mockContainer) {
+      await act(() =>
+        Promise.resolve(
+          mockContainer.render(
+            <Provider store={storeDay1}>
+              <DummyComponent />
+            </Provider>,
+          ),
         ),
-      ),
-    );
+      );
+    }
 
     expect(isFeatureEnabled('ASSISTED_INSTALLER_PLATFORM_OCI')(storeDay1.getState())).toBe(
       featuresOverride.ASSISTED_INSTALLER_PLATFORM_OCI,
@@ -93,17 +98,19 @@ describe('use-feature-detection.ts', () => {
       return null;
     };
 
-    await act(() =>
-      Promise.resolve(
-        render(
-          <Provider store={storeDay1}>
-            <DummyComponent />
-          </Provider>,
-          getMockContainer(),
-        ),
-      ),
-    );
+    const mockContainer = getMockContainer();
 
+    if (mockContainer) {
+      await act(() =>
+        Promise.resolve(
+          mockContainer.render(
+            <Provider store={storeDay1}>
+              <DummyComponent />
+            </Provider>,
+          ),
+        ),
+      );
+    }
     /* Here we don't mock the call to the user organization API, therefore the
      * capabilities in the currentUser slice should remain undefined, since the list
      * of featuresOverride should get filtered out of features not prefixed with

diff --git a/libs/ui-lib/package.json b/libs/ui-lib/package.json
@@ -44,7 +44,7 @@
     "@types/node": "^18.14.6",
     "@types/react": "<17.0.30",
     "@types/react-autosuggest": "^10.1.5",
-    "@types/react-dom": "<17.0.30",
+    "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.8",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.3.0",