feat(ver): update for react 19 support

Author: kmcfaul

.eslintrc.json

@@ -9,6 +9,7 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",

packages/dev/src/App.test.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom';
 import App from './AppContext';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
+  const root = createRoot(div);
+  root.unmount();
 });

packages/module/package.json

@@ -46,8 +46,8 @@
   },
   "peerDependencies": {
     "@patternfly/react-core": "^6.0.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "marked": "^15.0.6"
   },
   "dependencies": {
@@ -88,7 +88,6 @@
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
-    "react-monaco-editor": "0.51.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.2",

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import { marked } from 'marked';
 import { useForceRender } from '@console/shared';
@@ -121,7 +121,7 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
   className?: string;
 };
 
-export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
+export const SyncMarkdownView: FC<SyncMarkdownProps> = ({
   content,
   emptyMsg,
   extensions,
@@ -130,10 +130,10 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   inline,
   className,
 }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [markup, setMarkup] = React.useState<string>('');
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [markup, setMarkup] = useState<string>('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     async function getMd() {
       const md = await markdownConvert(
         content || emptyMsg || getResource('Not available'),
@@ -176,8 +176,8 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   docContext,
 }) => {
   const forceRender = useForceRender();
-  const markupRef = React.useRef<string>(null);
-  const shouldRenderExtension = React.useCallback(() => {
+  const markupRef = useRef<string>(null);
+  const shouldRenderExtension = useCallback(() => {
     if (markupRef.current === markup) {
       return true;
     }
@@ -190,7 +190,7 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
    * which causes the component rendered by renderExtension to receive old copy of document
    * use forceRender to delay the rendering of extension by one render cycle
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (renderExtension) {
       forceRender();
     }
@@ -201,13 +201,13 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   );
 };
 
-const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const id = React.useMemo(() => uniqueId('markdown'), []);
+  const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
@@ -218,18 +218,18 @@ const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   );
 };
 
-const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   exactHeight,
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const [frame, setFrame] = React.useState<HTMLIFrameElement>();
-  const [loaded, setLoaded] = React.useState(false);
-  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
+  const [frame, setFrame] = useState<HTMLIFrameElement>();
+  const [loaded, setLoaded] = useState(false);
+  const updateTimeoutHandle = useRef<NodeJS.Timeout>(null);
 
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = useCallback(() => {
     if (!frame?.contentWindow?.document.body.firstChild) {
       return;
     }
@@ -248,14 +248,14 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
     });
   }, [frame, exactHeight]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       clearTimeout(updateTimeoutHandle.current);
     },
     [],
   );
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     updateDimensions();
     setLoaded(true);
   }, [updateDimensions]);
@@ -302,7 +302,9 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}
-        ref={(r) => setFrame(r)}
+        ref={(r) => {
+          setFrame(r);
+        }}
         onLoad={() => onLoad()}
         className={className}
       />

packages/module/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 
 const MEMO = {};
 
@@ -16,10 +16,10 @@ export const CamelCaseWrap: React.FC<CamelCaseWrapProps> = ({ value, dataTest })
   const rendered = (
     <span data-test={dataTest}>
       {words.map((word, i) => (
-        <React.Fragment key={i}>
+        <Fragment key={i}>
           {word}
           {i !== words.length - 1 && <wbr />}
-        </React.Fragment>
+        </Fragment>
       ))}
     </span>
   );

packages/module/src/ConsoleInternal/components/utils/status-box.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import { QuickStartContext, QuickStartContextValues } from '../../../utils/quick-start-context';
 
 export const Box: React.FC<BoxProps> = ({ children, className }) => (
   <div className={css('pfext-status-box', className)}>{children}</div>
 );
 
-export const Loading: React.FC<LoadingProps> = ({ className }) => (
+export const Loading: FC<LoadingProps> = ({ className }) => (
   <div className={css('pfext-m-loader', className)}>
     <div className="pfext-m-loader-dot__one" />
     <div className="pfext-m-loader-dot__two" />
@@ -15,7 +15,7 @@ export const Loading: React.FC<LoadingProps> = ({ className }) => (
 );
 Loading.displayName = 'Loading';
 
-export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) => (
+export const LoadingBox: FC<LoadingBoxProps> = ({ className, message }) => (
   <Box className={css('pfext-status-box--loading', className)}>
     <Loading />
     {message && <div className="pfext-status-box__loading-message">{message}</div>}
@@ -24,7 +24,7 @@ export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) =>
 LoadingBox.displayName = 'LoadingBox';
 
 export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Box>
       <div data-test="empty-message" className="text-center">

packages/module/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useMemo, useState } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { useEventListener } from '../../hooks';
@@ -10,14 +10,10 @@ interface CopyClipboardProps {
   docContext: Document;
 }
 
-export const CopyClipboard: React.FC<CopyClipboardProps> = ({
-  element,
-  rootSelector,
-  docContext,
-}) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
-  const textToCopy = React.useMemo(() => {
+export const CopyClipboard: FC<CopyClipboardProps> = ({ element, rootSelector, docContext }) => {
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = useState<boolean>(false);
+  const textToCopy = useMemo(() => {
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
     return (
       docContext.querySelector(
@@ -29,7 +25,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'click',
-    React.useCallback(() => {
+    useCallback(() => {
       navigator.clipboard
         .writeText(textToCopy.trim())
         .then(() => {
@@ -42,7 +38,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'mouseleave',
-    React.useCallback(() => {
+    useCallback(() => {
       setShowSuccessContent(false);
     }, []),
   );
@@ -70,10 +66,7 @@ interface MarkdownCopyClipboardProps {
   rootSelector: string;
 }
 
-const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
-  docContext,
-  rootSelector,
-}) => {
+const MarkdownCopyClipboard: FC<MarkdownCopyClipboardProps> = ({ docContext, rootSelector }) => {
   const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
   return elements.length > 0 ? (
     <>

packages/module/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
 import { htmlDocumentForCopyClipboard } from './test-data';

packages/module/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,7 +10,7 @@ import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
 const useAccordionShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,

packages/module/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useState } from 'react';
 import { useEventListener } from '../../hooks';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
@@ -7,11 +7,11 @@ interface AccordionShowdownComponentProps {
   contentElement: HTMLElement;
 }
 
-const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   buttonElement,
   contentElement,
 }) => {
-  const [expanded, setExpanded] = React.useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
     const expandedModifier = 'pf-m-expanded';
@@ -33,7 +33,7 @@ interface accordionRenderExtensionProps {
   docContext: Document;
 }
 
-const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+const AccordionRenderExtension: FC<accordionRenderExtensionProps> = ({ docContext }) => {
   const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
   const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);