Update react 18 (#187)

* Update to React 18

- update CloudScape to get support for React 18
- update @testing-library to get support for React 18
- remove @testing-library/react-hooks as it does not support React 18

* Adopt built-in renderHook from @testing-library/react

* Fix failing test due to new semantics of waitFor

* Fix failing build due transpilation issues

* Fix internal import not being there anymore

* Fix failing test due to change in renderHook result interface

Author: mendaomn

frontend/next.config.js

@@ -43,6 +43,7 @@ const nextConfig = {
 
 const withTM = require("next-transpile-modules")([
   "@cloudscape-design/components",
+  "@cloudscape-design/component-toolkit",
   "@cloudscape-design/design-tokens"
 ]);
 

frontend/package-lock.json

@@ -4,18 +4,18 @@
   "private": true,
   "homepage": "/",
   "dependencies": {
-    "@cloudscape-design/components": "^3.0.118",
-    "@cloudscape-design/design-tokens": "^3.0.9",
-    "@cloudscape-design/global-styles": "^1.0.2",
+    "@cloudscape-design/components": "^3.0.248",
+    "@cloudscape-design/design-tokens": "^3.0.11",
+    "@cloudscape-design/global-styles": "^1.0.8",
     "@reduxjs/toolkit": "^1.6.1",
     "axios": "^0.21.4",
     "i18next": "^21.8.13",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "next": "^12.2.0",
     "next-transpile-modules": "^9.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.18.0",
     "react-query": "^3.39.1",
     "react-redux": "^7.2.5",
@@ -47,9 +47,8 @@
   },
   "devDependencies": {
     "@cloudscape-design/jest-preset": "^2.0.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^28.1.4",
     "@types/lodash": "^4.14.182",
     "@types/node": "^18.0.0",

frontend/package.json

@@ -1,4 +1,4 @@
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook} from '@testing-library/react'
 import {useClusterPoll} from '../useClusterPoll'
 
 jest.mock('../../model', () => ({

frontend/src/components/__tests__/useClusterPoll.test.tsx

@@ -1,4 +1,4 @@
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook, waitFor} from '@testing-library/react'
 import {useLoadingState} from '../useLoadingState'
 import {Box} from '@cloudscape-design/components'
 import React from 'react'
@@ -44,9 +44,9 @@ jest.mock('../../model', () => {
 })
 
 function expectDataToBeRequested() {
-  expect(mockGetAppConfig).toHaveBeenCalledTimes(1)
-  expect(mockGetIdentity).toHaveBeenCalledTimes(1)
-  expect(mockGetVersion).toHaveBeenCalledTimes(1)
+  waitFor(() => expect(mockGetAppConfig).toHaveBeenCalledTimes(1))
+  waitFor(() => expect(mockGetIdentity).toHaveBeenCalledTimes(1))
+  waitFor(() => expect(mockGetVersion).toHaveBeenCalledTimes(1))
 }
 
 function expectDataNotToBeRequested() {
@@ -114,12 +114,7 @@ describe('given a hook to load all the data necessary for the app to boot', () =
     })
 
     it('should request the data', async () => {
-      const {waitForNextUpdate} = renderHook(
-        () => useLoadingState(<Box></Box>),
-        {wrapper},
-      )
-
-      await waitForNextUpdate()
+      renderHook(() => useLoadingState(<Box></Box>), {wrapper})
 
       expectDataToBeRequested()
     })
@@ -139,12 +134,7 @@ describe('given a hook to load all the data necessary for the app to boot', () =
     })
 
     it('should request the data', async () => {
-      const {waitForNextUpdate} = renderHook(
-        () => useLoadingState(<Box></Box>),
-        {wrapper},
-      )
-
-      await waitForNextUpdate()
+      renderHook(() => useLoadingState(<Box></Box>), {wrapper})
 
       expectDataToBeRequested()
     })
@@ -166,12 +156,7 @@ describe('given a hook to load all the data necessary for the app to boot', () =
     })
 
     it('should request the data', async () => {
-      const {waitForNextUpdate} = renderHook(
-        () => useLoadingState(<Box></Box>),
-        {wrapper},
-      )
-
-      await waitForNextUpdate()
+      renderHook(() => useLoadingState(<Box></Box>), {wrapper})
 
       expectDataToBeRequested()
     })
@@ -259,10 +244,9 @@ describe('given a hook to load all the data necessary for the app to boot', () =
           done()
         })
 
-        const {waitForNextUpdate} = renderHook(() => useLoadingState(<></>), {
+        renderHook(() => useLoadingState(<></>), {
           wrapper,
         })
-        waitForNextUpdate()
       })
     })
   })

frontend/src/components/__tests__/useLoadingState.test.tsx

@@ -8,7 +8,7 @@
 // OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook} from '@testing-library/react'
 import {useFeatureFlag} from '../useFeatureFlag'
 
 const mockUseState = jest.fn()

frontend/src/feature-flags/__tests__/useFeatureFlag.test.ts

@@ -10,7 +10,7 @@
 // limitations under the License.
 
 import {Store} from '@reduxjs/toolkit'
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook} from '@testing-library/react'
 import {mock} from 'jest-mock-extended'
 import {PropsWithChildren} from 'react'
 import {Provider} from 'react-redux'

frontend/src/old-pages/Clusters/FromClusterModal/__tests__/useClustersToCopyFrom.test.tsx

@@ -38,7 +38,6 @@ import {setState, getState, useState} from '../../store'
 import {NavigateFunction} from 'react-router-dom'
 import TitleDescriptionHelpPanel from '../../components/help-panel/TitleDescriptionHelpPanel'
 import {useHelpPanel} from '../../components/help-panel/HelpPanel'
-import {StackedFlashbarProps} from '@cloudscape-design/components/flashbar/interfaces'
 import {errorsToFlashbarItems} from './errorsToFlashbarItems'
 
 // Constants
@@ -209,7 +208,7 @@ function Create() {
     FlashbarProps.MessageDefinition[]
   >([])
 
-  const flashbarProps: StackedFlashbarProps = {
+  const flashbarProps: FlashbarProps = {
     stackItems: true,
     items: flashbarItems,
   }

frontend/src/old-pages/Configure/Create.tsx

@@ -1,5 +1,5 @@
 import {Store} from '@reduxjs/toolkit'
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook} from '@testing-library/react'
 import {mock} from 'jest-mock-extended'
 import {Provider} from 'react-redux'
 import {useDynamicStorage} from '../Storage'

frontend/src/old-pages/Configure/__tests__/dynamicFS.test.tsx

@@ -1,5 +1,5 @@
 import {Store} from '@reduxjs/toolkit'
-import {renderHook} from '@testing-library/react-hooks'
+import {renderHook} from '@testing-library/react'
 import {mock} from 'jest-mock-extended'
 import {Provider} from 'react-redux'
 import {useWizardNavigation} from '../useWizardNavigation'

frontend/src/old-pages/Configure/__tests__/useWizardNavigation.test.tsx

@@ -10,7 +10,7 @@
 // limitations under the License.
 
 import {Store} from '@reduxjs/toolkit'
-import {render, RenderResult} from '@testing-library/react'
+import {render, RenderResult, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {mock} from 'jest-mock-extended'
 import {I18nextProvider, initReactI18next} from 'react-i18next'
@@ -142,7 +142,7 @@ describe('given a component to show the log streams list and a cluster name', ()
 
     describe('when the user selects a log stream', () => {
       it('should call the selection handler with the selected log stream name', async () => {
-        await userEvent.click(screen.getByRole('radio'))
+        await waitFor(() => userEvent.click(screen.getByRole('radio')))
         expect(mockOnLogStreamSelect).toHaveBeenCalledTimes(1)
         expect(mockOnLogStreamSelect).toHaveBeenCalledWith(
           'hostname.instanceId.logIdentifier',