minor(ui): Bump react version to 17 (#17834)

* minor(ui): Bump react version to 17

* bump test libraries

* revert postinstall step

* fix tests

* address comments

* fix tests

openmetadata-ui/src/main/resources/ui/package.json

@@ -110,13 +110,13 @@
     "quill-mention": "^4.0.0",
     "quilljs-markdown": "^1.1.10",
     "rapidoc": "9.3.4",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-awesome-query-builder": "5.1.2",
     "react-codemirror2": "^7.2.1",
     "react-context-mutex": "^2.0.0",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.2",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-grid-layout": "^1.4.2",
     "react-helmet-async": "^1.3.0",
@@ -161,10 +161,10 @@
     "@estruyf/github-actions-reporter": "^1.7.0",
     "@playwright/test": "^1.44.1",
     "@svgr/webpack": "^6.5.0",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/user-event": "^12.8.3",
     "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^7.1.2",
     "@types/antlr4": "^4.11.2",
     "@types/classnames": "^2.3.1",
     "@types/codemirror": "^0.0.104",

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/image/ImageComponent.test.tsx

@@ -174,6 +174,7 @@ describe('ImageComponent', () => {
     const embedInput = screen.getByTestId('embed-input');
 
     await act(async () => {
+      userEvent.clear(embedInput);
       userEvent.type(embedInput, 'https://open-metadata.org/images/omd-logo');
     });
 
@@ -184,7 +185,7 @@ describe('ImageComponent', () => {
     });
 
     expect(mockUpdateAttributes).toHaveBeenCalledWith({
-      src: 'https://open-metadata.org/images/omd-logo',
+      src: 'https://open-metadata.org/images/omd-logo.svgo',
     });
   });
 

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.test.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { SearchIndex } from '../../../enums/search.enum';
 import { searchQuery } from '../../../rest/searchAPI';
@@ -100,10 +101,6 @@ const mockSearchAPIResponse = {
 };
 
 describe('DataAssetAsyncSelectList', () => {
-  function toggleOpen(container: ReturnType<typeof render>['container']): void {
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
-  }
-
   it('should render without crashing', async () => {
     await act(async () => {
       render(<DataAssetAsyncSelectList />);
@@ -120,7 +117,8 @@ describe('DataAssetAsyncSelectList', () => {
     const { container } = render(<DataAssetAsyncSelectList />);
 
     await act(async () => {
-      toggleOpen(container);
+      const inputBox = container.querySelector('.ant-select-selector');
+      inputBox && userEvent.click(inputBox);
     });
 
     expect(searchQuery).toHaveBeenCalledTimes(1);
@@ -144,7 +142,8 @@ describe('DataAssetAsyncSelectList', () => {
     );
 
     await act(async () => {
-      toggleOpen(container);
+      const inputBox = container.querySelector('.ant-select-selector');
+      inputBox && userEvent.click(inputBox);
     });
 
     expect(searchQuery).toHaveBeenCalledTimes(1);
@@ -180,7 +179,8 @@ describe('DataAssetAsyncSelectList', () => {
     );
 
     await act(async () => {
-      toggleOpen(container);
+      const inputBox = container.querySelector('.ant-select-selector');
+      inputBox && userEvent.click(inputBox);
     });
 
     expect(searchQuery).toHaveBeenCalledTimes(1);
@@ -196,7 +196,7 @@ describe('DataAssetAsyncSelectList', () => {
     const option = screen.getByTestId('option-test-1');
 
     await act(async () => {
-      fireEvent.click(option);
+      userEvent.click(option);
     });
 
     expect(mockOnChange).toHaveBeenCalledWith(mockOptions);
@@ -284,7 +284,8 @@ describe('DataAssetAsyncSelectList', () => {
     );
 
     await act(async () => {
-      toggleOpen(container);
+      const inputBox = container.querySelector('.ant-select-selector');
+      inputBox && userEvent.click(inputBox);
     });
 
     expect(searchQuery).toHaveBeenCalledTimes(1);

openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryUsedByOtherTable/QueryUsedByOtherTable.test.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { render, screen, waitForElement } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Query } from '../../../../generated/entity/data/query';
@@ -104,8 +104,10 @@ describe('QueryUsedByOtherTable test', () => {
     render(<QueryUsedByOtherTable {...mockProps} isEditMode />, {
       wrapper: MemoryRouter,
     });
+
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+
     const selectField = await screen.findByText('AsyncSelect.component');
-    waitForElement(async () => expect(await screen.findByText('Loader')));
 
     expect(selectField).toBeInTheDocument();
   });