chore: migrate to react 18 (#582)

* chore: migrate to react 18

Author: shadowusr

.mocharc.js

@@ -3,5 +3,10 @@
 module.exports = {
     extension: ["js", "jsx", "ts", "tsx"],
     recursive: true,
-    require: ["./test/ts-node", "./test/setup", "./test/assert-ext", "jsdom-global/register"],
+    require: [
+        "./test/setup/ts-node",
+        "./test/setup/globals",
+        "./test/setup/assert-ext",
+        "./test/setup/configure-testing-library"
+    ],
 };

lib/adapters/test-result/testplane.ts

@@ -32,7 +32,7 @@ export const getStatus = (eventName: ValueOf<Testplane['events']>, events: Testp
     } else if (eventName === events.TEST_PENDING) {
         return TestStatus.SKIPPED;
     } else if (eventName === events.RETRY || eventName === events.TEST_FAIL) {
-        return hasUnrelatedToScreenshotsErrors(testResult.err!) ? TestStatus.ERROR : TestStatus.FAIL;
+        return hasUnrelatedToScreenshotsErrors(testResult.err as Error) ? TestStatus.ERROR : TestStatus.FAIL;
     } else if (eventName === events.TEST_BEGIN) {
         return TestStatus.RUNNING;
     }

lib/static/components/bottom-progress-bar/index.jsx

@@ -37,7 +37,7 @@ const BottomProgressBar = (props) => {
 
 BottomProgressBar.propTypes = {
     progressBar: PropTypes.object.isRequired,
-    visibleRootSuiteIds: PropTypes.arrayOf(PropTypes.number)
+    visibleRootSuiteIds: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default connect(

lib/static/components/bullet.jsx

@@ -16,7 +16,7 @@ const Bullet = ({status, onClick, className}) => {
     });
 
     if (!isCheckbox) {
-        return <div className='bullet-container'><ChevronUp className={classNames(className, 'bullet_type-simple')}/></div>;
+        return <div className='bullet-container'><ChevronUp className={classNames(className, 'bullet_type-simple')} data-qa={'bullet-icon'}/></div>;
     }
 
     return <div onClick={handleClick} className='bullet-container'>

lib/static/components/controls/common-controls.jsx

@@ -18,8 +18,7 @@ class ControlButtons extends Component {
         view: PropTypes.shape({
             expand: PropTypes.string.isRequired,
             viewMode: PropTypes.string.isRequired,
-            diffMode: PropTypes.string.isRequired,
-            changeViewMode: PropTypes.func.isRequired
+            diffMode: PropTypes.string.isRequired
         }),
         isStatisImageAccepterEnabled: PropTypes.bool,
         actions: PropTypes.object.isRequired

lib/static/components/controls/control-button.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import {Button} from '@gravity-ui/uikit';
 
 interface ControlButtonProps {
-    label: string | Component;
+    label: React.ReactNode;
     title?: string;
     handler: () => void;
     isActive?: boolean;

lib/static/components/controls/menu-bar.jsx

@@ -33,7 +33,7 @@ class MenuBar extends Component {
         }
 
         return (
-            <div className="menu-bar" data-test-id='menu-bar'>
+            <div className="menu-bar" data-qa='menu-bar'>
                 <DropdownMenu size='m' renderSwitcher={({className, ...props}) => (
                     <Button className={classNames('menu-bar__dropdown', className)}{...props} view="flat">
                         <Icon size={16} data={Bars} />

lib/static/components/details.jsx

@@ -70,8 +70,8 @@ export default class Details extends Component {
                     size='l'>
                     <Disclosure.Summary>
                         {(props, defaultButton) => (
-                            <div className={classNames(className, 'details__summary')} {...props}>
-                                <div className='details__expand-button' onClick={this.stopPropagation}>
+                            <div className={classNames(className, 'details__summary')} aria-controls={props.ariaControls} onClick={props.onClick} id={props.id}>
+                                <div className="details__expand-button" onClick={this.stopPropagation}>
                                     {defaultButton}
                                 </div>
                                 {title}

lib/static/components/extension-point.jsx

@@ -6,7 +6,7 @@ import * as plugins from '../modules/plugins';
 export default class ExtensionPoint extends Component {
     static propTypes = {
         name: PropTypes.string.isRequired,
-        children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+        children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.array])
     };
 
     render() {

lib/static/components/header/summary/dbBtn.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Ref} from 'semantic-ui-react';
 import {Button} from '@gravity-ui/uikit';
 import {ChevronDown} from '@gravity-ui/icons';
 
@@ -11,16 +10,14 @@ const ForwardedDbBtn = React.forwardRef(function DbBtn({fetchDbDetails}, ref) {
     const content = `Databases loaded: ${value}`;
 
     return (
-        <Ref innerRef={ref}>
-            <Button
-                view={isFailed ? 'flat-danger' : 'flat'}
-            >
-                <div className='db-info'>
-                    <ChevronDown/>
-                    {content}
-                </div>
-            </Button>
-        </Ref>
+        <Button
+            view={isFailed ? 'flat-danger' : 'flat'} ref={ref}
+        >
+            <div className='db-info'>
+                <ChevronDown/>
+                {content}
+            </div>
+        </Button>
     );
 });