chore(react): use new JSX transformations and remove react-axe (#1129)

* chore(react): remove default imports from react

* chore(react): remove react-axe deps

Signed-off-by: Thuan Vo <[email protected]>

.eslintrc

@@ -14,6 +14,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript"
@@ -29,7 +30,7 @@
   },
   "settings": {
     "react": {
-      "version": "^16.11.0"
+      "version": "detect"
     }
   },
   // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

package.json

@@ -76,7 +76,6 @@
     "prettier": "^3.0.3",
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
-    "react-axe": "^3.4.1",
     "react-router-dom": "^5.3.4",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^4.1.2",

src/app/About/About.tsx

@@ -21,7 +21,7 @@ import build from '@app/build.json';
 import { ThemeSetting } from '@app/Settings/types';
 import { useTheme } from '@app/utils/hooks/useTheme';
 import { Brand, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AboutDescription } from './AboutDescription';
 

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx

@@ -29,7 +29,7 @@ import {
   ToolbarToggleGroup,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AutomatedAnalysisNameFilter } from './Filters/AutomatedAnalysisNameFilter';

src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx

@@ -20,7 +20,7 @@ import { Label, LabelProps, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon, ExclamationCircleIcon, InfoCircleIcon, WarningTriangleIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import popoverStyles from '@patternfly/react-styles/css/components/Popover/popover';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { transformAADescription } from './utils';
 

src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.tsx

@@ -17,7 +17,7 @@
 import { CategorizedRuleEvaluations } from '@app/Shared/Services/api.types';
 import { portalRoot } from '@app/utils/utils';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface AutomatedAnalysisNameFilterProps {
   evaluations: CategorizedRuleEvaluations[];

src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisScoreFilter.tsx

@@ -27,7 +27,7 @@ import {
   TextVariants,
   Tooltip,
 } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 

src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter.tsx

@@ -17,7 +17,7 @@
 import { CategorizedRuleEvaluations } from '@app/Shared/Services/api.types';
 import { portalRoot } from '@app/utils/utils';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface AutomatedAnalysisTopicFilterProps {
   evaluations: CategorizedRuleEvaluations[];

src/app/Dashboard/AutomatedAnalysis/utils.tsx

@@ -16,7 +16,6 @@
 import { AnalysisResult, Evaluation } from '@app/Shared/Services/api.types';
 import { Stack, StackItem, Label, Title, Text } from '@patternfly/react-core';
 import _ from 'lodash';
-import * as React from 'react';
 
 export const transformAADescription = (result: AnalysisResult): JSX.Element => {
   const format = (s: Evaluation): JSX.Element => {

src/app/Dashboard/DashboardLayoutToolbar.tsx

@@ -55,7 +55,7 @@ import {
   TrashIcon,
   UploadIcon,
 } from '@patternfly/react-icons';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AddCard } from './AddCard';

src/app/Dashboard/DraggableRef.tsx

@@ -17,7 +17,7 @@
 import { dashboardConfigReorderCardIntent } from '@app/Shared/Redux/ReduxStore';
 import { clickOutside } from '@app/utils/utils';
 import { css } from '@patternfly/react-styles';
-import React from 'react';
+import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { DRAGGABLE_REF_KLAZZ } from './const';
 import { handleDisabledElements } from './ResizableRef';

src/app/Dashboard/LayoutTemplateGroup.tsx

@@ -29,7 +29,7 @@ import {
   SplitItem,
   Title,
 } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import {

src/app/Dashboard/LayoutTemplatePicker.tsx

@@ -72,7 +72,7 @@ import {
   UploadIcon,
 } from '@patternfly/react-icons';
 import { InnerScrollContainer, OuterScrollContainer } from '@patternfly/react-table';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { ChartContext } from './Charts/context';

src/app/Dashboard/ResizableRef.tsx

@@ -17,7 +17,7 @@
 import { dashboardConfigResizeCardIntent, RootState } from '@app/Shared/Redux/ReduxStore';
 import { gridSpans } from '@patternfly/react-core';
 import _ from 'lodash';
-import React from 'react';
+import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DashboardCardContext } from './context';
 import type { CardConfig, DashboardCardSizes } from './types';

src/app/Dashboard/SearchAutocomplete.tsx

@@ -15,7 +15,7 @@
  */
 import { portalRoot } from '@app/utils/utils';
 import { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface SearchAutocompleteProps {
   values: string[];

src/app/DateTimePicker/DateTimePicker.tsx

@@ -31,7 +31,7 @@ import {
   TabTitleText,
   TextInput,
 } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TimezonePicker } from './TimezonePicker';
 

src/app/Joyride/CryostatJoyride.tsx

@@ -20,7 +20,7 @@ import { useJoyride } from '@app/Joyride/JoyrideProvider';
 import JoyrideTooltip from '@app/Joyride/JoyrideTooltip';
 import { ThemeSetting } from '@app/Settings/types';
 import { useTheme } from '@app/utils/hooks/useTheme';
-import React from 'react';
+import * as React from 'react';
 import ReactJoyride, { CallBackProps, ACTIONS, EVENTS, STATUS } from 'react-joyride';
 
 interface CryostatJoyrideProps {

src/app/Joyride/JoyrideProvider.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import useSetState from '@app/utils/hooks/useSetState';
-import React from 'react';
+import * as React from 'react';
 import { Step } from 'react-joyride';
 
 export interface JoyrideState {

src/app/Joyride/JoyrideTooltip.tsx

@@ -27,7 +27,7 @@ import {
   Text,
   TextContent,
 } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { TooltipRenderProps } from 'react-joyride';
 
 const JoyrideTooltip: React.FC<TooltipRenderProps> = ({

src/app/QuickStarts/QuickStartsCatalogPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { QuickStartCatalogPage } from '@patternfly/quickstarts';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { withRouter } from 'react-router-dom';
 

src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx

@@ -15,7 +15,6 @@
  */
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
-import React from 'react';
 import { CryostatIcon, conclusion } from '../quickstart-utils';
 
 const displayName = 'Get started with Automated Rules';

src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx

@@ -16,7 +16,6 @@
 import build from '@app/build.json';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
-import React from 'react';
 import { CryostatIcon, conclusion } from '../quickstart-utils';
 
 const displayName = 'Get started with the Dashboard';

src/app/QuickStarts/quickstarts/generic-quickstart.tsx

@@ -18,7 +18,6 @@ import build from '@app/build.json';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
 import { PficonTemplateIcon } from '@patternfly/react-icons';
-import React from 'react';
 import { conclusion } from '../quickstart-utils';
 
 // Quick start name (currently cannot use [APP], there is a bug with how the title gets rendered in the quick start panel)

src/app/QuickStarts/quickstarts/settings-quickstart.tsx

@@ -16,7 +16,6 @@
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
 import { CogIcon } from '@patternfly/react-icons';
-import React from 'react';
 import { conclusion } from '../quickstart-utils';
 
 const displayName = 'Using Settings';

src/app/QuickStarts/quickstarts/start-a-recording.tsx

@@ -16,7 +16,6 @@
 import build from '@app/build.json';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
-import React from 'react';
 import { CryostatIcon, conclusion } from '../quickstart-utils';
 
 const displayName = 'Start a Recording';

src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx

@@ -17,7 +17,6 @@
 import { conclusion, CryostatIcon } from '@app/QuickStarts/quickstart-utils';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
-import * as React from 'react';
 
 const CustomTargetQuickstart: QuickStart = {
   metadata: {

src/app/QuickStarts/quickstarts/topology/group-start-recordings.tsx

@@ -17,7 +17,6 @@
 import { conclusion, CryostatIcon } from '@app/QuickStarts/quickstart-utils';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { QuickStart } from '@patternfly/quickstarts';
-import * as React from 'react';
 
 const GroupStartRecordingQuickStart: QuickStart = {
   apiVersion: 'v2.3.0',

src/app/RecordingMetadata/ClickableLabel.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Label } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { RecordingLabel } from './types';
 
 export interface ClickableLabelCellProps {

src/app/RecordingMetadata/LabelCell.tsx

@@ -16,7 +16,7 @@
 
 import { UpdateFilterOptions } from '@app/Shared/Redux/Filters/Common';
 import { Label, Text } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 import { ClickableLabel } from './ClickableLabel';
 import { RecordingLabel } from './types';
 import { getLabelDisplay } from './utils';

src/app/Recordings/Filters/DurationFilter.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Checkbox, Flex, FlexItem, TextInput } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface DurationFilterProps {
   durations: string[] | undefined;

src/app/Recordings/Filters/LabelFilter.tsx

@@ -17,7 +17,7 @@
 import { parseLabels, getLabelDisplay } from '@app/RecordingMetadata/utils';
 import { Recording } from '@app/Shared/Services/api.types';
 import { Label, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface LabelFilterProps {
   recordings: Recording[];

src/app/Recordings/Filters/NameFilter.tsx

@@ -16,7 +16,7 @@
 
 import { Recording } from '@app/Shared/Services/api.types';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface NameFilterProps {
   recordings: Recording[];

src/app/Recordings/Filters/RecordingStateFilter.tsx

@@ -16,7 +16,7 @@
 
 import { RecordingState } from '@app/Shared/Services/api.types';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface RecordingStateFilterProps {
   filteredStates: RecordingState[] | undefined;

src/app/Recordings/RecordingFilters.tsx

@@ -34,7 +34,7 @@ import {
   ToolbarToggleGroup,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
-import React from 'react';
+import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DateTimeFilter } from './Filters/DatetimeFilter';
 import { DurationFilter } from './Filters/DurationFilter';

src/app/Recordings/RecordingLabelsPanel.tsx

@@ -23,7 +23,7 @@ import {
   DrawerPanelBody,
   DrawerPanelContent,
 } from '@patternfly/react-core';
-import React from 'react';
+import * as React from 'react';
 
 export interface RecordingLabelsPanelProps {
   setShowPanel: (showPanel: React.SetStateAction<boolean>) => void;

src/app/Settings/Config/AutomatedAnalysis.tsx

@@ -15,7 +15,6 @@
  */
 
 import { AutomatedAnalysisConfigForm } from '@app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm';
-import * as React from 'react';
 import { SettingTab, UserSetting } from '../types';
 
 const Component = () => {

src/app/Shared/Components/FileUploads.tsx

@@ -23,7 +23,7 @@ import {
   MultipleFileUploadStatusItem,
 } from '@patternfly/react-core';
 import { InProgressIcon, UploadIcon } from '@patternfly/react-icons';
-import React from 'react';
+import * as React from 'react';
 import { Prompt } from 'react-router-dom';
 import { Subject } from 'rxjs';
 

src/app/Topology/Actions/QuickSearchPanel.tsx

@@ -47,7 +47,7 @@ import {
 import { SearchIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import { useHover } from '@patternfly/react-topology';
-import React from 'react';
+import * as React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import QuickSearchIcon from '../../Shared/Components/QuickSearchIcon';
 import quickSearches, { QuickSearchId, quickSearchIds } from './quicksearches/all-quick-searches';

src/app/Topology/Actions/quicksearches/custom-target.tsx

@@ -15,7 +15,6 @@
  */
 import openjdkSvg from '@app/assets/openjdk.svg';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
-import * as React from 'react';
 import { QuickSearchItem } from '../types';
 
 const _CustomTargetSearchItem: QuickSearchItem = {

src/app/Topology/Actions/quicksearches/dev-sample.tsx

@@ -15,7 +15,6 @@
  */
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ContainerNodeIcon } from '@patternfly/react-icons';
-import * as React from 'react';
 import { QuickSearchItem } from '../types';
 
 const _DevSampleSearchItem: QuickSearchItem = {

src/app/Topology/Actions/utils.tsx

@@ -25,7 +25,6 @@ import {
 import { getAllLeaves, isTargetNode } from '@app/Shared/Services/api.utils';
 import { NotificationService } from '@app/Shared/Services/Notifications.service';
 import { ContextMenuSeparator } from '@patternfly/react-topology';
-import * as React from 'react';
 import { merge, filter, map, debounceTime } from 'rxjs';
 import { getConnectUrlFromEvent } from '../Entity/utils';
 import { GraphElement, ListElement } from '../Shared/types';

src/app/Topology/ListView/utils.tsx

@@ -23,7 +23,6 @@ import {
   isTargetNode,
 } from '@app/Shared/Services/api.utils';
 import { Badge, Flex, FlexItem, Label, LabelGroup, TreeViewDataItem } from '@patternfly/react-core';
-import * as React from 'react';
 import { ActionDropdown } from '../Actions/NodeActions';
 import { actionFactory } from '../Actions/utils';
 import EntityDetails from '../Entity/EntityDetails';

src/app/Topology/Shared/Components/PropertyPath.tsx

@@ -15,7 +15,7 @@
  */
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 import _ from 'lodash';
-import React from 'react';
+import * as React from 'react';
 
 export interface PropertyPathProps {
   kind: string;

src/app/utils/withThemedIcon.tsx

@@ -15,7 +15,7 @@
  */
 import { ThemeSetting } from '@app/Settings/types';
 import { useTheme } from '@app/utils/hooks/useTheme';
-import React from 'react';
+import * as React from 'react';
 
 export const withThemedIcon = (icon: string, darkIcon: string, alt: string): React.FC => {
   const WithThemedIcon: React.FC = () => {