chore: migrate to react 18 (#582)

* chore: migrate to react 18

.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>
     );
 });
 

lib/static/components/icons/view-in-browser/index.jsx

@@ -45,7 +45,7 @@ class ViewInBrowser extends Component {
                 onClick={this.onViewInBrowser}
                 title="view in browser"
                 target="_blank"
-                data-test-id='view-in-browser' rel="noreferrer"
+                data-qa='view-in-browser' rel="noreferrer"
             ><Eye color='black'/></a>
         );
     }

lib/static/components/modals/screenshot-accepter/body.jsx

@@ -51,7 +51,7 @@ class ScreenshotAccepterBody extends Component {
 
         return (
             <div className="screenshot-accepter__title">
-                <span className="screenshot-accepter__test-name" data-test-id="screenshot-accepter-test-name">{testName}</span>
+                <span className="screenshot-accepter__test-name" data-qa="screenshot-accepter-test-name">{testName}</span>
                 <span className="screenshot-accepter__title-divider">{'/'}</span>
                 <span className="screenshot-accepter__browser-name">{browserName}</span>
                 <span className="screenshot-accepter__title-divider">{'/'}</span>

lib/static/components/modals/screenshot-accepter/index.jsx

@@ -56,7 +56,7 @@ class ScreenshotAccepter extends Component {
         this.totalImagesCount = size(imagesByStateName);
 
         for (let i = 1; i <= PRELOAD_IMAGE_COUNT; i++) {
-            this._preloadAdjacentImages(i);
+            this._preloadAdjacentImages(activeImageIndex, stateNameImageIds, i);
         }
     }
 
@@ -72,7 +72,7 @@ class ScreenshotAccepter extends Component {
         const images = this._getActiveImages(activeImageIndex);
 
         this.setState({retryIndex: images.length - 1, activeImageIndex});
-        this._preloadAdjacentImages();
+        this._preloadAdjacentImages(activeImageIndex, this.state.stateNameImageIds);
     };
 
     onScreenshotAccept = async (imageId) => {
@@ -117,7 +117,7 @@ class ScreenshotAccepter extends Component {
             stateNameImageIds: stateNameIds,
             retryIndex: newImages.length - 1
         });
-        this._preloadAdjacentImages();
+        this._preloadAdjacentImages(activeImageIndex, stateNameIds);
     };
 
     onScreenshotUndo = async () => {
@@ -147,7 +147,7 @@ class ScreenshotAccepter extends Component {
             stateNameImageIds: previousStateNameImageId,
             retryIndex: images.length - 1
         });
-        this._preloadAdjacentImages();
+        this._preloadAdjacentImages(ind, previousStateNameImageId);
     };
 
     onShowMeta = () => {
@@ -208,13 +208,13 @@ class ScreenshotAccepter extends Component {
         return imageId;
     }
 
-    _preloadAdjacentImages(offset = PRELOAD_IMAGE_COUNT) {
-        const screensCount = size(this.state.stateNameImageIds);
-        const previosImagesIndex = (screensCount + this.state.activeImageIndex - offset) % screensCount;
-        const nextImagesIndex = (this.state.activeImageIndex + offset) % screensCount;
+    _preloadAdjacentImages(activeImageIndex, stateNameImageIds, offset = PRELOAD_IMAGE_COUNT) {
+        const screensCount = size(stateNameImageIds);
+        const previosImagesIndex = (screensCount + activeImageIndex - offset) % screensCount;
+        const nextImagesIndex = (activeImageIndex + offset) % screensCount;
 
         [previosImagesIndex, nextImagesIndex].filter(ind => ind >= 0).forEach(preloadingImagesIndex => {
-            const stateNameImageId = this.state.stateNameImageIds[preloadingImagesIndex];
+            const stateNameImageId = stateNameImageIds[preloadingImagesIndex];
             const {expectedImg, actualImg, diffImg} = last(this.props.imagesByStateName[stateNameImageId]);
 
             [expectedImg, actualImg, diffImg].filter(Boolean).forEach(({path}) => preloadImage(path));

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

@@ -7,7 +7,7 @@ const ProgressBar = ({done, total, dataTestId}) => {
     const percent = (done / total).toFixed(2) * 100;
 
     return (
-        <span className="progress-bar" data-content={`${done}/${total}`} data-test-id={dataTestId}>
+        <span className="progress-bar" data-content={`${done}/${total}`} data-qa={dataTestId}>
             <span className="progress-bar__container" style={{width: `${percent}%`}}/>
         </span>
     );

lib/static/components/retry-switcher/item.jsx

@@ -64,7 +64,7 @@ class RetrySwitcherItem extends Component {
             {'tab-switcher__button_non-matched': keyToGroupTestsBy && !matchedSelectedGroup}
         );
 
-        return <Button {...statusToView[status]} title={title} className={className} onClick={onClick} qa='retry-switcher'>{attempt + 1}</Button>;
+        return <Button {...statusToView[status]} title={title} className={className} onClick={onClick} qa={'retry-switcher'}>{attempt + 1}</Button>;
     }
 }
 

lib/static/components/section/body/description.jsx

@@ -1,5 +1,3 @@
-'use strict';
-
 import React, {Component} from 'react';
 import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';

lib/static/components/state/index.jsx

@@ -125,7 +125,7 @@ class State extends Component {
                     isDisabled={isScreenshotAccepterDisabled}
                     extendClassNames="screenshot-accepter__arrows-open-btn"
                     handler={() => this.toggleModal()}
-                    data-test-id="test-switch-accept-mode"
+                    data-qa="test-switch-accept-mode"
                 />
             </div>
         );

lib/static/components/state/screenshot/diff-circle.jsx

@@ -2,7 +2,6 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {keyframes} from 'styled-components';
 import {CIRCLE_RADIUS} from '../../../../constants/defaults';
 
 export default class DiffCircle extends Component {
@@ -48,16 +47,10 @@ export default class DiffCircle extends Component {
         };
         const radius = diffRect.minSize + CIRCLE_RADIUS;
 
-        const animation = keyframes`
-            100% {
-                transform: scale(${radius / diffRect.minSize})
-            }
-        `;
-
         return (
             <div
                 className='diff-circle'
-                style={{animation: `${animation} 1s ease-out`, ...diffCircle}}
+                style={{'--diff-bubbles-scale': `${radius / diffRect.minSize}`, animation: `diff-bubbles 1s ease-out`, ...diffCircle}}
                 onAnimationEnd={() => toggleDiff()}
             >
             </div>