harden lint rule about array indexes

.eslintrc.js

@@ -5,7 +5,6 @@ const {
   TYPESCRIPT_CONVERSION,
   TYPESCRIPT_EXTENSION,
   UNKNOWN,
-  WARN,
 } = require('eslint-config-helpers');
 
 /** @type { import('eslint').Linter.Config } */
@@ -119,7 +118,7 @@ module.exports = {
     'react/jsx-closing-bracket-location': [ERROR, 'line-aligned'],
     'react/prefer-stateless-function': ERROR,
     'react/jsx-key': [ERROR, { 'checkFragmentShorthand': true }],
-    'react/no-array-index-key': WARN(UNKNOWN),
+    'react/no-array-index-key': ERROR,
     'react/self-closing-comp': ERROR,
 
     'react-hooks/exhaustive-deps': [ERROR, {

packages/insomnia/src/ui/components/error-boundary.tsx

@@ -6,9 +6,6 @@ interface Props {
   children: ReactNode;
   errorClassName?: string;
   showAlert?: boolean;
-  // Avoid using invalidation with showAlert, otherwise an alert will be shown with every attempted re-render
-  invalidationKey?: string;
-  renderError?: (error: Error) => ReactNode;
 }
 
 interface State {
@@ -24,21 +21,6 @@ class SingleErrorBoundary extends PureComponent<Props, State> {
     info: null,
   };
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    const { error, info } = this.state;
-    const invalidationKeyChanged = nextProps.invalidationKey !== this.props.invalidationKey;
-    const isErrored = error !== null || info !== null;
-    const shouldResetError = invalidationKeyChanged && isErrored;
-
-    if (shouldResetError) {
-      this.setState({
-        error: null,
-        info: null,
-      });
-    }
-  }
-
   componentDidCatch(
     error: Error,
     info: {
@@ -61,7 +43,6 @@ class SingleErrorBoundary extends PureComponent<Props, State> {
         showError({
           error,
           title: 'Application Error',
-          // @ts-expect-error -- TSCONVERSION
           message: (
             <p>
               Failed to render {componentName}. Please report the error to <a href="https://github.com/Kong/insomnia/issues">our Github Issues</a>
@@ -75,35 +56,26 @@ class SingleErrorBoundary extends PureComponent<Props, State> {
   }
 
   render() {
-    const { error, info } = this.state;
-    const { errorClassName, children, renderError } = this.props;
-
-    if (error && info) {
-      return renderError ? (
-        renderError(error)
-      ) : (
-        <div className={errorClassName ?? ''}>Render Failure: {error.message}</div>
+    if (this.state.error) {
+      return (
+        <div className={this.props.errorClassName ?? ''}>Render Failure: {this.state.error.message}</div>
       );
     }
 
-    return children;
+    return this.props.children;
   }
 }
 
-export class ErrorBoundary extends PureComponent<Props> {
-  render() {
-    const { children, ...extraProps } = this.props;
-
-    if (!children) {
-      return null;
-    }
+export const ErrorBoundary = (props: Props) => {
+  const { children, ...extraProps } = props;
 
-    // Unwrap multiple children into single children for better error isolation
-    const childArray = Array.isArray(children) ? children : [children];
-    return childArray.map((child, i) => (
-      <SingleErrorBoundary key={i} {...extraProps}>
-        {child}
-      </SingleErrorBoundary>
-    ));
+  if (!children) {
+    return null;
   }
-}
+
+  return (
+    <SingleErrorBoundary {...extraProps}>
+      {children}
+    </SingleErrorBoundary>
+  );
+};

packages/insomnia/src/ui/components/modals/error-modal.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } from 'react';
 
 import { Modal, type ModalHandle, ModalProps } from '../base/modal';
 import { ModalBody } from '../base/modal-body';
@@ -9,7 +9,7 @@ export interface ErrorModalOptions {
   title?: string;
   error?: Error | null;
   addCancel?: boolean;
-  message?: string;
+  message?: string | ReactNode;
 }
 export interface ErrorModalHandle {
   show: (options: ErrorModalOptions) => void;