OCPBUGS-52589: update @types/react to v17, use new JSX transform

dynamic-demo-plugin/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "target": "es2021",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "experimentalDecorators": true,
     "noUnusedLocals": true,

frontend/.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
     'prefer-const': ['error', { destructuring: 'all' }],
     'prefer-template': 2,
     radix: 2,
+    'react/react-in-jsx-scope': 'off', // React 17 doesn't require this anymore
     'react/jsx-fragments': 'error',
     'react/jsx-no-duplicate-props': 2,
     'react/jsx-uses-react': 'error',

frontend/__tests__/components/cluster-settings/basicauth-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/github-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/gitlab-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/google-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/htpasswd-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/keystone-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/ldap-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/openid-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/cluster-settings/request-header-idp-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom-v5-compat';

frontend/__tests__/components/command-line-tools.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';

frontend/__tests__/components/container.spec.tsx

@@ -4,7 +4,6 @@ import {
   ContainerDetailsList,
 } from '../../public/components/container';
 import { mount, ReactWrapper, shallow } from 'enzyme';
-import * as React from 'react';
 import store from '@console/internal/redux';
 import { Provider } from 'react-redux';
 import * as ReactRouter from 'react-router-dom-v5-compat';

frontend/__tests__/components/create-yaml.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { safeLoad, safeDump } from 'js-yaml';
 import * as useExtensionsModule from '@console/plugin-sdk/src/api/useExtensions';

frontend/__tests__/components/environment.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import { t } from '../../__mocks__/i18next';

frontend/__tests__/components/factory/details.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Provider } from 'react-redux';
 import * as Router from 'react-router-dom-v5-compat';
 import { mount, ReactWrapper } from 'enzyme';

frontend/__tests__/components/graphs/area.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { Chart, ChartArea, ChartAxis } from '@patternfly/react-charts/victory';
 

frontend/__tests__/components/graphs/bar.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { ChartBar } from '@patternfly/react-charts/victory';
 

frontend/__tests__/components/graphs/gauge.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
 

frontend/__tests__/components/graphs/graph-empty.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';

frontend/__tests__/components/graphs/prometheus-graph.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Link, BrowserRouter } from 'react-router-dom-v5-compat';
 import { mount, shallow } from 'enzyme';

frontend/__tests__/components/import-yaml-results.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Spinner } from '@patternfly/react-core';
 import { Tr } from '@patternfly/react-table';

frontend/__tests__/components/limitrange.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import {
   LimitRangeDetailsRowProps,

frontend/__tests__/components/modals/column-management-modal.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 import { Alert, DataList, DataListCheck } from '@patternfly/react-core';

frontend/__tests__/components/modals/configure-update-strategy-modal.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import Spy = jasmine.Spy;
 

frontend/__tests__/components/namespace.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import Spy = jasmine.Spy;
 

frontend/__tests__/components/pod.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Provider } from 'react-redux';
 import { shallow, ShallowWrapper, mount, ReactWrapper } from 'enzyme';
 import store from '@console/internal/redux';

frontend/__tests__/components/resource-quota.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import {
   UsageIcon,

frontend/__tests__/components/route-pages.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, mount } from 'enzyme';
 
 import { RouteLinkAndCopy, RouteLocation, RouteStatus } from '../../public/components/routes';

frontend/__tests__/components/routes/create-route.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Formik } from 'formik';
 import { Button } from '@patternfly/react-core';

frontend/__tests__/components/safety-first.spec.tsx

@@ -5,6 +5,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import Spy = jasmine.Spy;
 
 import { useSafetyFirst } from '@console/dynamic-plugin-sdk';
+import { waitFor } from '@testing-library/react';
 
 type Props = {
   loader: () => Promise<any>;
@@ -76,16 +77,16 @@ describe('useSafetyFirst', () => {
     wrapper = wrapper.setProps({ loader });
     wrapper.find('button').simulate('click');
 
-    // FIXME(alecmerdler): Shouldn't need a `setTimeout` here...
-    setTimeout(() => {
+    waitFor(() => {
       expect(
         consoleErrorSpy.calls
           .all()
           .map((call) => call.args[0] as string)
           .some((text) => text.includes(warning)),
       ).toBe(false);
-      done();
-    }, 500);
+    });
+
+    done();
   });
 
   it('will set React state if mounted (using hook)', (done) => {
@@ -98,16 +99,16 @@ describe('useSafetyFirst', () => {
     wrapper = wrapper.setProps({ loader });
     wrapper.find('button').simulate('click');
 
-    // FIXME(alecmerdler): Shouldn't need a `setTimeout` here...
-    setTimeout(() => {
+    waitFor(() => {
       expect(wrapper.text()).toEqual('Loaded');
       expect(
         consoleErrorSpy.calls
           .all()
           .map((call) => call.args[0] as string)
           .some((text) => text.includes(warning)),
       ).toBe(false);
-      done();
-    }, 500);
+    });
+
+    done();
   });
 });

frontend/__tests__/components/utils/async.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
 import { AsyncComponent } from '../../../public/components/utils/async';

frontend/__tests__/components/utils/download-button.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import Spy = jasmine.Spy;
 import * as fileSaver from 'file-saver';

frontend/__tests__/components/utils/name-value-editor.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { NameValueEditor } from '../../../public/components/utils/name-value-editor';
 

frontend/__tests__/components/utils/page-heading.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import { shallow, ShallowWrapper } from 'enzyme';
 

frontend/__tests__/components/utils/promise-component.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import {

frontend/package.json

@@ -248,8 +248,8 @@
     "@types/lodash-es": "4.17.x",
     "@types/node": "18.x",
     "@types/prop-types": "15.5.6",
-    "@types/react": "16.8.13",
-    "@types/react-dom": "16.8.4",
+    "@types/react": "17.x",
+    "@types/react-dom": "17.x",
     "@types/react-helmet": "5.x",
     "@types/react-jsonschema-form": "^1.3.8",
     "@types/react-measure": "^2.0.6",

frontend/packages/console-app/src/__tests__/hooks/useCSPViolationDetector.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { act, fireEvent, render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';

frontend/packages/console-app/src/__tests__/network-policies/create-network-policy.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Button, FormFieldGroupExpandable } from '@patternfly/react-core';
 import { mount } from 'enzyme';
 import { ButtonBar } from '@console/internal/components/utils';

frontend/packages/console-app/src/__tests__/network-policies/network-policy-form.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Alert, FormFieldGroupExpandable } from '@patternfly/react-core';
 import { mount } from 'enzyme';
 import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';

frontend/packages/console-app/src/__tests__/network-policies/network-policy-peer-ipblock.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { mount } from 'enzyme';
 import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';

frontend/packages/console-app/src/__tests__/network-policies/network-policy-selector-preview.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { NamespaceModel, PodModel } from '@console/internal/models';

frontend/packages/console-app/src/components/detect-perspective/__tests__/DetectPerspective.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { usePerspectives } from '@console/shared/src';

frontend/packages/console-app/src/components/detect-perspective/__tests__/PerspectiveDetector.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { Perspective } from '@console/dynamic-plugin-sdk';

frontend/packages/console-app/src/components/guided-tour/__tests__/GuidedTourText.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { cleanup, configure, render, screen } from '@testing-library/react';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { FinishTourText } from '../GuidedTourText';

frontend/packages/console-app/src/components/nav/__tests__/PerspectiveNav.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Nav } from '@patternfly/react-core';
 import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';

frontend/packages/console-app/src/components/nav/__tests__/perspective-nav.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Nav } from '@patternfly/react-core';
 import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';

frontend/packages/console-app/src/components/nav/confirmNavUnpinModal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import i18next from 'i18next';
 import { Trans } from 'react-i18next';
 import { confirmModal } from '@console/internal/components/modals';

frontend/packages/console-app/src/components/resource-quota/AppliedClusterResourceQuotaCharts.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { DonutChart } from '@console/internal/components/graphs/donut';
 import { AppliedClusterResourceQuotaKind } from '@console/internal/module/k8s';

frontend/packages/console-app/src/components/resource-quota/ClusterResourceQuotaCharts.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { DonutChart } from '@console/internal/components/graphs/donut';
 import { ClusterResourceQuotaKind } from '@console/internal/module/k8s';

frontend/packages/console-app/src/components/resource-quota/ResourceQuotaCharts.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { GaugeChart } from '@console/internal/components/graphs/gauge';
 import { ResourceQuotaKind } from '@console/internal/module/k8s';

frontend/packages/console-app/src/components/tabs/__tests__/Generated/Tabs.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { Tabs } from '../../Tabs';
 // any missing imports can usually be resolved by adding them here

frontend/packages/console-app/src/components/tabs/__tests__/Tabs.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Tab, Tabs, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
 import { render } from 'enzyme';
 

frontend/packages/console-app/src/components/tour/__tests__/TourStepComponent.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { Popover, Modal, Spotlight } from '@console/shared';
 import TourStepComponent from '../TourStepComponent';

frontend/packages/console-app/src/components/user-preferences/__tests__/userPreferences.data.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   ResolvedExtension,
   UserPreferenceFieldType,

frontend/packages/console-app/src/components/user-preferences/namespace/__tests__/NamespaceDropdown.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { Provider } from 'react-redux';
 import { useProjectOrNamespaceModel } from '@console/internal/components/utils';

frontend/packages/console-app/src/components/user-preferences/perspective/__tests__/PreferredPerspectiveSelect.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen, configure } from '@testing-library/react';
 import { useExtensions } from '@console/plugin-sdk/src';
 import PreferredPerspectiveSelect from '../PreferredPerspectiveSelect';

frontend/packages/console-demo-plugin/src/components/test-icon.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export default () => (
   <svg
     style={{ verticalAlign: '-0.125em' }}

frontend/packages/console-demo-plugin/src/components/test-pages.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export const DummyResourceListPage = () => <h1>Example Resource List Page</h1>;
 export const DummyResourceDetailsPage = () => <h1>Example Resource Details Page</h1>;
 export const DummyHorizontalNavTab = () => <h1>Example Resource Detail View Tab</h1>;

frontend/packages/console-demo-plugin/src/plugin.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as _ from 'lodash';
 import { GridPosition } from '@console/dynamic-plugin-sdk';
 // TODO(vojtech): internal code needed by plugins should be moved to console-shared package

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -2548,7 +2548,7 @@ The isAllowed boolean value.
 
 ### Returns
 
-An array with a pair of state value and it's set function.
+An array with a pair of state value and its set function.
 
 
 ---

frontend/packages/console-dynamic-plugin-sdk/src/app/__tests__/AppInitSDK.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';

frontend/packages/console-dynamic-plugin-sdk/src/app/components/safety-first.tsx

@@ -5,13 +5,17 @@ import * as React from 'react';
  * Hook that ensures a safe asynchronnous setting of the React state in case a given component could be unmounted.
  * (https://github.com/facebook/react/issues/14113)
  * @param initialState initial state value
- * @returns An array with a pair of state value and it's set function.
+ * @returns An array with a pair of state value and its set function.
  */
 export const useSafetyFirst = <S extends any>(
   initialState: S | (() => S),
 ): [S, React.Dispatch<React.SetStateAction<S>>] => {
   const mounted = React.useRef(true);
-  React.useEffect(() => () => (mounted.current = false), []);
+  React.useEffect(() => {
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
 
   const [value, setValue] = React.useState(initialState);
   const setValueSafe = React.useCallback((newValue: S) => {