Update to React 18

Author: pimterry

package-lock.json

@@ -61,17 +61,17 @@
     "@types/node-forge": "^1.3.2",
     "@types/qrcode.react": "^1.0.0",
     "@types/reach__router": "^1.2.4",
-    "@types/react": "^16.14.29",
+    "@types/react": "^18.2.72",
     "@types/react-autosuggest": "^10.0.1",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^16.8.25",
+    "@types/react-dom": "^18.2.22",
     "@types/react-fontawesome": "^1.6.4",
     "@types/react-window": "^1.8.1",
     "@types/remarkable": "^1.7.3",
     "@types/semver": "^7.3.1",
     "@types/serialize-error": "^2.1.0",
     "@types/set-cookie-parser": "0.0.3",
-    "@types/styled-components": "^5.1.4",
+    "@types/styled-components": "^5.1.34",
     "@types/traverse": "^0.6.32",
     "@types/ua-parser-js": "^0.7.33",
     "@types/uuid": "^3.4.4",
@@ -114,15 +114,15 @@
     "qrcode.react": "^1.0.0",
     "randexp": "^0.5.3",
     "rawprotoparse": "^0.0.9",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-autosuggest": "^10.0.4",
     "react-beautiful-dnd": "^13.1.1",
     "react-contexify": "^6.0.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^2.1.3",
     "react-monaco-editor": "^0.45.0",
     "react-reverse-portal": "^2.1.1",
-    "react-split-pane": "^0.1.84",
+    "react-split-pane": "^0.1.92",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "remarkable": "^1.7.4",

package.json

@@ -45,8 +45,8 @@ const AppContainer = styled.div<{ inert?: boolean }>`
     }
 `;
 
-interface ExtendProps extends React.PropsWithChildren<any> {
-	pageComponent: React.ComponentType<{}>;
+interface ExtendProps extends React.ComponentProps<any> {
+    pageComponent: React.ComponentType<any>;
 }
 
 const Route = ({ children, ...props }: ExtendProps & RouteComponentProps): React.ReactElement => {

src/components/app.tsx

@@ -65,8 +65,8 @@ export const BlankContentPlaceholder = styled.div`
 // The __html format is intended to enforce this - those objects
 // should only be created during sanitization.
 export const ExternalContent = (p:  React.HTMLAttributes<HTMLDivElement> & {
-    content: Html
-}) => <Content {..._.omit(p, 'content')} dangerouslySetInnerHTML={p.content} />
+    htmlContent: Html
+}) => <Content {..._.omit(p, 'htmlContent')} dangerouslySetInnerHTML={p.htmlContent} />
 
 // Format blocks of readable text/docs/etc.
 export const Content = styled.div`
@@ -146,7 +146,7 @@ export const Content = styled.div`
 
 export const Markdown = (p: { content: string | undefined }) =>
     p.content ?
-        <ExternalContent content={fromMarkdown(
+        <ExternalContent htmlContent={fromMarkdown(
             p.content
                 .replace(/:suggestion:/g, suggestionIconHtml)
                 .replace(/:warning:/g, warningIconHtml)

src/components/common/text-content.tsx

@@ -65,7 +65,9 @@ const ErrorOutput = styled.code`
 `;
 
 @observer
-export class ErrorBoundary extends React.Component {
+export class ErrorBoundary extends React.Component<{
+    children?: React.ReactNode
+}> {
 
     @observable
     private error: Error | undefined;

src/components/error-boundary.tsx

@@ -1386,7 +1386,7 @@ class TimeoutHandlerConfig extends HandlerConfig<TimeoutHandler> {
                     : this.props.ruleType === 'websocket'
                         ? 'WebSocket'
                     : this.props.ruleType === 'webrtc'
-                        ? (() => { throw new Error('Not compatible with WebRTC rules') })
+                        ? (() => { throw new Error('Not compatible with WebRTC rules') })()
                     : unreachableCheck(this.props.ruleType)
                 } is received, the server will keep the connection open but do nothing.
                 With no data or response, most clients will time out and abort the
@@ -1407,7 +1407,7 @@ class CloseConnectionHandlerConfig extends HandlerConfig<CloseConnectionHandler>
                     : this.props.ruleType === 'websocket'
                         ? 'WebSocket'
                     : this.props.ruleType === 'webrtc'
-                        ? (() => { throw new Error('Not compatible with WebRTC rules') })
+                        ? (() => { throw new Error('Not compatible with WebRTC rules') })()
                     : unreachableCheck(this.props.ruleType)
                 } is received, the connection will be cleanly closed, with no response.
             </ConfigExplanation>
@@ -1426,7 +1426,7 @@ class ResetConnectionHandlerConfig extends HandlerConfig<ResetConnectionHandler>
                     : this.props.ruleType === 'websocket'
                         ? 'WebSocket'
                     : this.props.ruleType === 'webrtc'
-                        ? (() => { throw new Error('Not compatible with WebRTC rules') })
+                        ? (() => { throw new Error('Not compatible with WebRTC rules') })()
                     : unreachableCheck(this.props.ruleType)
                 } is received, the connection will be killed with a TCP RST packet (or a
                 RST_STREAM frame, for HTTP/2 requests).

src/components/mock/handler-config.tsx

@@ -122,7 +122,7 @@ const SendTab = observer((props: {
         props.onSelectTab(props.sendRequest)
     }, [props.onSelectTab, props.sendRequest]);
 
-    const onTaxAuxClick = React.useCallback((event) => {
+    const onTaxAuxClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
         if (event.button === 1) { // Middle mouse click
             props.onCloseTab(props.sendRequest);
         }

src/components/send/send-tabs.tsx

@@ -6,7 +6,8 @@ import { styled } from '../styles';
 // Styles original taken from
 // https://github.com/tomkp/react-split-pane/blob/master/README.md#example-styling
 export const SplitPane = styled(ReactSplitPane)<{
-    hiddenPane?: '1' | '2'
+    hiddenPane?: '1' | '2',
+    children?: React.ReactNode // Missing in real types - causes issues in React 18
 }>`
     .Resizer {
         background: #000;

src/components/split-pane.tsx

@@ -129,7 +129,7 @@ function formatValue(value: unknown): string | undefined {
 
 const getDetailsWithWarnings = (details: Html | undefined, warnings: string[]) => [
     warnings.length && warnings.map((warning, i) => <Warning key={warning}>{ warning }</Warning>),
-    details && <ExternalContent key='details' content={details} />
+    details && <ExternalContent key='details' htmlContent={details} />
 ].filter(d => !!d);
 
 
@@ -187,7 +187,7 @@ const ApiRequestDetails = (props: {
             { api.service.description &&
                 <CollapsibleSectionBody>
                     <ServiceLogo src={ api.service.logoUrl } alt='' />
-                    <ExternalContent content={api.service.description} />
+                    <ExternalContent htmlContent={api.service.description} />
                     <DocsLink href={api.service.docsUrl}>
                         Find out more
                     </DocsLink>

src/components/view/http/http-api-card.tsx

@@ -48,7 +48,7 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
     const responseDetails = [
         apiResponseDescription && <ExternalContent
             key='api-response-docs'
-            content={apiResponseDescription}
+            htmlContent={apiResponseDescription}
         />,
         statusDocs && <Markdown
             key='status-docs'