ou-849: upgrade jsx pre-procesor to "react-jsx"

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>

Author: zhuje

web/.eslintrc.yml

@@ -6,6 +6,7 @@ extends:
   - plugin:react/recommended
   - plugin:react-hooks/recommended
   - plugin:@typescript-eslint/recommended
+  - plugin:react/jsx-runtime
   - prettier
 parser: '@typescript-eslint/parser'
 parserOptions:

web/cypress/dummy.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export {
   ActionServiceProvider,
   BlueInfoCircleIcon,

web/src/components/Incidents/AlertsChart/AlertsChart.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 
 import {
   Chart,
@@ -25,8 +25,8 @@ import { VictoryPortal } from 'victory';
 
 const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
-  const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
-  const [chartHeight, setChartHeight] = React.useState<number>();
+  const [chartContainerHeight, setChartContainerHeight] = useState<number>();
+  const [chartHeight, setChartHeight] = useState<number>();
   const alertsData = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'alertsData']),
   );
@@ -40,34 +40,34 @@ const AlertsChart = ({ chartDays, theme }: { chartDays: number; theme: 'light' |
     state.plugins.mcp.getIn(['incidentsData', 'groupId']),
   );
 
-  const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
+  const dateValues = useMemo(() => generateDateArray(chartDays), [chartDays]);
 
-  const chartData = React.useMemo(() => {
+  const chartData = useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) return [];
     return alertsData.map((alert) => createAlertsChartBars(alert, dateValues));
   }, [alertsData, dateValues]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
     setChartHeight(chartData?.length < 5 ? 250 : chartData?.length * 55);
   }, [chartData]);
 
-  const selectedIncidentIsVisible = React.useMemo(() => {
+  const selectedIncidentIsVisible = useMemo(() => {
     return filteredData.some((incident) => incident.group_id === incidentGroupId);
   }, [filteredData, incidentGroupId]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(setAlertsAreLoading({ alertsAreLoading: !selectedIncidentIsVisible }));
   }, [dispatch, selectedIncidentIsVisible]);
 
-  const [width, setWidth] = React.useState(0);
-  const containerRef = React.useRef(null);
-  const handleResize = React.useCallback(() => {
+  const [width, setWidth] = useState(0);
+  const containerRef = useRef(null);
+  const handleResize = useCallback(() => {
     if (containerRef.current && containerRef.current.clientWidth) {
       setWidth(containerRef.current.clientWidth);
     }
   }, []);
-  React.useEffect(() => {
+  useEffect(() => {
     const observer = getResizeObserver(containerRef.current, handleResize);
     handleResize();
     return () => observer();

web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 
 import {
   Chart,
@@ -46,34 +46,34 @@ const IncidentsChart = ({
   theme: 'light' | 'dark';
 }) => {
   const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [chartContainerHeight, setChartContainerHeight] = React.useState<number>();
-  const [chartHeight, setChartHeight] = React.useState<number>();
-  const dateValues = React.useMemo(() => generateDateArray(chartDays), [chartDays]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [chartContainerHeight, setChartContainerHeight] = useState<number>();
+  const [chartHeight, setChartHeight] = useState<number>();
+  const dateValues = useMemo(() => generateDateArray(chartDays), [chartDays]);
 
-  const chartData = React.useMemo(() => {
+  const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
     return incidentsData.map((incident) => createIncidentsChartBars(incident, dateValues));
   }, [incidentsData, dateValues]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsLoading(false);
   }, [incidentsData]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setChartContainerHeight(chartData?.length < 5 ? 300 : chartData?.length * 60);
     setChartHeight(chartData?.length < 5 ? 250 : chartData?.length * 55);
   }, [chartData]);
 
-  const [width, setWidth] = React.useState(0);
-  const containerRef = React.useRef(null);
+  const [width, setWidth] = useState(0);
+  const containerRef = useRef(null);
 
   const handleResize = () => {
     if (containerRef.current && containerRef.current.clientWidth) {
       setWidth(containerRef.current.clientWidth);
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     const observer = getResizeObserver(containerRef.current, handleResize);
     handleResize();
     return () => observer();
@@ -86,7 +86,7 @@ const IncidentsChart = ({
     state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
   );
 
-  const isHidden = React.useCallback(
+  const isHidden = useCallback(
     (group_id) => selectedId !== '' && selectedId !== group_id,
     [selectedId],
   );
@@ -109,7 +109,7 @@ const IncidentsChart = ({
     }
   };
 
-  const getOpacity = React.useCallback(
+  const getOpacity = useCallback(
     (datum) => (datum.fillOpacity = isHidden(datum.group_id) ? '0.3' : '1'),
     [isHidden],
   );

web/src/components/Incidents/IncidentsDetailsRowTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   GreenCheckCircleIcon,
@@ -28,7 +28,7 @@ import isEqual from 'lodash/isEqual';
 import { MonitoringState } from 'src/reducers/observe';
 
 function useDeepCompareMemoize(value) {
-  const ref = React.useRef();
+  const ref = useRef();
 
   if (!isEqual(value, ref.current)) {
     ref.current = value;
@@ -42,7 +42,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
   const [namespace] = useActiveNamespace();
   useAlertsPoller();
   const { perspective, alertsKey } = usePerspective();
-  const [alertsWithMatchedData, setAlertsWithMatchedData] = React.useState([]);
+  const [alertsWithMatchedData, setAlertsWithMatchedData] = useState([]);
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   const alertsWithLabels = useSelector((state: MonitoringState) =>
@@ -63,7 +63,7 @@ const IncidentsDetailsRowTable = ({ alerts }) => {
   }
   const memoizedAlerts = useDeepCompareMemoize(alerts);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setAlertsWithMatchedData(findMatchingAlertsWithId(memoizedAlerts, alertsWithLabels));
   }, [memoizedAlerts, alertsWithLabels]);
 

web/src/components/Incidents/IncidentsPage.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import * as React from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useSafeFetch } from '../console/utils/safe-fetch-hook';
 import { createAlertsQuery, fetchDataForIncidentsAndAlerts } from './api';
 import { useTranslation } from 'react-i18next';
@@ -63,24 +63,24 @@ const IncidentsPage = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const dispatch = useDispatch();
   const location = useLocation();
-  const urlParams = React.useMemo(() => parseUrlParams(location.search), [location.search]);
+  const urlParams = useMemo(() => parseUrlParams(location.search), [location.search]);
   const { perspective } = usePerspective();
   const { theme } = usePatternFlyTheme();
   // loading states
-  const [incidentsAreLoading, setIncidentsAreLoading] = React.useState(true);
+  const [incidentsAreLoading, setIncidentsAreLoading] = useState(true);
   // days span is where we store the value for creating time ranges for
   // fetch incidents/alerts based on the length of time ranges
   // when days filter changes we set a new days span -> calculate new time range and fetch new data
-  const [daysSpan, setDaysSpan] = React.useState<number>();
-  const [timeRanges, setTimeRanges] = React.useState([]);
+  const [daysSpan, setDaysSpan] = useState<number>();
+  const [timeRanges, setTimeRanges] = useState([]);
   // data that is used for processing to serve it to the alerts table and chart
-  const [incidentForAlertProcessing, setIncidentForAlertProcessing] = React.useState<
+  const [incidentForAlertProcessing, setIncidentForAlertProcessing] = useState<
     Array<Partial<Incident>>
   >([]);
-  const [hideCharts, setHideCharts] = React.useState(false);
+  const [hideCharts, setHideCharts] = useState(false);
 
-  const [incidentFilterIsExpanded, setIncidentIsExpanded] = React.useState(false);
-  const [daysFilterIsExpanded, setDaysFilterIsExpanded] = React.useState(false);
+  const [incidentFilterIsExpanded, setIncidentIsExpanded] = useState(false);
+  const [daysFilterIsExpanded, setDaysFilterIsExpanded] = useState(false);
 
   const onIncidentFilterToggle = (ev) => {
     ev.stopPropagation();
@@ -115,7 +115,7 @@ const IncidentsPage = () => {
   const filteredData = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'filteredIncidentsData']),
   );
-  React.useEffect(() => {
+  useEffect(() => {
     const hasUrlParams = Object.keys(urlParams).length > 0;
     if (hasUrlParams) {
       // If URL parameters exist, update incidentsActiveFilters based on them
@@ -147,11 +147,11 @@ const IncidentsPage = () => {
     }
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateBrowserUrl(incidentsActiveFilters, incidentGroupId);
   }, [incidentsActiveFilters]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(
       setFilteredIncidentsData({
         filteredIncidentsData: filterIncident(incidentsActiveFilters, incidents),
@@ -163,11 +163,11 @@ const IncidentsPage = () => {
   const safeFetch = useSafeFetch();
   const title = t('Incidents');
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeRanges(getIncidentsTimeRanges(daysSpan, now));
   }, [daysSpan]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setDaysSpan(
       parsePrometheusDuration(
         incidentsActiveFilters.days.length > 0
@@ -177,7 +177,7 @@ const IncidentsPage = () => {
     );
   }, [incidentsActiveFilters.days]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       Promise.all(
         timeRanges.map(async (range) => {
@@ -206,15 +206,15 @@ const IncidentsPage = () => {
     })();
   }, [incidentForAlertProcessing]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(
       setAlertsTableData({
         alertsTableData: groupAlertsForTable(alertsData),
       }),
     );
   }, [alertsData]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       Promise.all(
         timeRanges.map(async (range) => {
@@ -251,7 +251,7 @@ const IncidentsPage = () => {
     })();
   }, [timeRanges]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (incidentGroupId) {
       Promise.all(
         timeRanges.map(async (range) => {

web/src/components/Incidents/IncidentsTable.tsx

@@ -3,7 +3,7 @@ import { Bullseye, Card, CardBody, EmptyState, EmptyStateBody } from '@patternfl
 import { SearchIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
-import React from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from 'src/reducers/observe';
 import { AlertStateIcon, SeverityBadge } from '../alerting/AlertUtils';
@@ -17,7 +17,7 @@ export const IncidentsTable = () => {
     severity: 'Severity',
     state: 'State',
   };
-  const [expandedAlerts, setExpandedAlerts] = React.useState([]);
+  const [expandedAlerts, setExpandedAlerts] = useState([]);
   const setAlertExpanded = (alert: Alert, isExpanding = true) =>
     setExpandedAlerts((prevExpanded) => {
       const otherAlertExpanded = prevExpanded.filter((r) => r !== alert.component);