fix(types): follow up to react 18 changes (#14671)

2022-06-06 21:05:47 -07:00 · 2022-06-06 21:05:47 -07:00 · 4cc25725f9
--- a/package-lock.json
+++ b/package-lock.json
@ -23,7 +23,7 @@
        "@babel/preset-react": "^7.16.7",
        "@types/formidable": "^2.0.4",
        "@types/node": "=14.17.15",
-        "@types/react": "^18.0.11",
+        "@types/react": "^18.0.12",
        "@types/react-dom": "^18.0.5",
        "@types/resize-observer-browser": "^0.1.7",
        "@types/xml2js": "^0.4.9",
@ -53,7 +53,7 @@
        "react-dom": "^18.1.0",
        "rimraf": "^3.0.2",
        "socksv5": "0.0.6",
-        "typescript": "^4.7.2",
+        "typescript": "^4.7.3",
        "vite": "^2.9.9",
        "ws": "^8.5.0",
        "xml2js": "^0.4.23",
@ -1287,9 +1287,9 @@
      "dev": true
    },
    "node_modules/@types/react": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.11.tgz",
-      "integrity": "sha512-JxSwm54IgMW4XTR+zFF5QpNx4JITmFbB4WHR2J0vg9RpjNeyqEMlODXsD2e64br6GX70TL0UYjZJETpyyC1WdA==",
+      "version": "18.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
+      "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
      "dev": true,
      "dependencies": {
        "@types/prop-types": "*",
@ -5920,9 +5920,9 @@
      "dev": true
    },
    "node_modules/typescript": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz",
-      "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
@ -7574,9 +7574,9 @@
      "dev": true
    },
    "@types/react": {
-      "version": "18.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.11.tgz",
-      "integrity": "sha512-JxSwm54IgMW4XTR+zFF5QpNx4JITmFbB4WHR2J0vg9RpjNeyqEMlODXsD2e64br6GX70TL0UYjZJETpyyC1WdA==",
+      "version": "18.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz",
+      "integrity": "sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==",
      "dev": true,
      "requires": {
        "@types/prop-types": "*",
@ -11000,9 +11000,9 @@
      "dev": true
    },
    "typescript": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.2.tgz",
-      "integrity": "sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
      "dev": true
    },
    "universalify": {
--- a/package.json
+++ b/package.json
@ -57,7 +57,7 @@
    "@babel/preset-react": "^7.16.7",
    "@types/formidable": "^2.0.4",
    "@types/node": "=14.17.15",
-    "@types/react": "^18.0.11",
+    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "@types/resize-observer-browser": "^0.1.7",
    "@types/xml2js": "^0.4.9",
@ -87,7 +87,7 @@
    "react-dom": "^18.1.0",
    "rimraf": "^3.0.2",
    "socksv5": "0.0.6",
-    "typescript": "^4.7.2",
+    "typescript": "^4.7.3",
    "vite": "^2.9.9",
    "ws": "^8.5.0",
    "xml2js": "^0.4.23",
--- a/packages/html-reporter/src/chip.spec.tsx
+++ b/packages/html-reporter/src/chip.spec.tsx
@ -14,7 +14,6 @@
 * limitations under the License.
 */

-import React from 'react';
 import { expect, test } from '@playwright/experimental-ct-react';
 import { AutoChip, Chip as LocalChip } from './chip';

--- a/packages/html-reporter/src/headerView.spec.tsx
+++ b/packages/html-reporter/src/headerView.spec.tsx
@ -14,7 +14,6 @@
 * limitations under the License.
 */

-import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import { HeaderView } from './headerView';

--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@ -23,11 +23,11 @@ import * as icons from './icons';
 import { Link, navigate } from './links';
 import { statusIcon } from './statusIcon';

-export const HeaderView: React.FC<{
+export const HeaderView: React.FC<React.PropsWithChildren<{
  stats: Stats,
  filterText: string,
  setFilterText: (filterText: string) => void,
-}> = ({ stats, filterText, setFilterText }) => {
+}>> = ({ stats, filterText, setFilterText }) => {
  React.useEffect(() => {
    (async () => {
      window.addEventListener('popstate', () => {
--- a/packages/html-reporter/src/icons.tsx
+++ b/packages/html-reporter/src/icons.tsx
@ -14,7 +14,6 @@
  limitations under the License.
 */

-import * as React from 'react';
 import './colors.css';
 import './common.css';

--- a/packages/html-reporter/src/imageDiffView.tsx
+++ b/packages/html-reporter/src/imageDiffView.tsx
@ -93,10 +93,10 @@ export const ImageDiffView: React.FunctionComponent<{
  </div>;
 };

-export const ImageDiffSlider: React.FC<{
+export const ImageDiffSlider: React.FC<React.PropsWithChildren<{
  sliderPosition: number,
  setSliderPosition: (position: number) => void,
-}> = ({ children, sliderPosition, setSliderPosition }) => {
+}>> = ({ children, sliderPosition, setSliderPosition }) => {
  const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
  const size = sliderPosition;

--- a/packages/html-reporter/src/metadataView.tsx
+++ b/packages/html-reporter/src/metadataView.tsx
@ -31,9 +31,9 @@ export type Metainfo = {
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number
-} | undefined;
+};

-class ErrorBoundary extends React.Component<{}, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
+class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
  state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
    error: null,
    errorInfo: null,
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@ -23,13 +23,13 @@ import { Link, ProjectLink } from './links';
 import { statusIcon } from './statusIcon';
 import './testFileView.css';

-export const TestFileView: React.FC<{
+export const TestFileView: React.FC<React.PropsWithChildren<{
  report: HTMLReport;
  file: TestFileSummary;
  isFileExpanded: (fileId: string) => boolean;
  setFileExpanded: (fileId: string, expanded: boolean) => void;
  filter: Filter;
-}> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
+}>> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
  return <Chip
    expanded={isFileExpanded(file.fileId)}
    noInsets={true}
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@ -64,7 +64,7 @@ export const ConsoleTab: React.FunctionComponent<{
        } else {
          return <div className='console-line error' key={index}>
            <span className={'codicon codicon-error'}></span>
-            <span className='console-line-message'>{value}</span>
+            <span className='console-line-message'>{String(value)}</span>
          </div>;
        }
      }
--- a/packages/web/src/components/expandable.tsx
+++ b/packages/web/src/components/expandable.tsx
@ -16,13 +16,12 @@

 import * as React from 'react';

-export const Expandable: React.FunctionComponent<{
+export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
  title: JSX.Element | string,
  setExpanded: Function,
  expanded: Boolean,
  style?: React.CSSProperties,
-  children: JSX.Element | JSX.Element[] | string,
-}> = ({ title, children, setExpanded, expanded, style }) => {
+}>> = ({ title, children, setExpanded, expanded, style }) => {
  return <div style={{ ...style, display: 'flex', flexDirection: 'column' }}>
    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}>
      <div
--- a/packages/web/src/components/splitView.tsx
+++ b/packages/web/src/components/splitView.tsx
@ -22,6 +22,7 @@ export interface SplitViewProps {
  sidebarHidden?: boolean,
  sidebarIsFirst?: boolean,
  orientation?: 'vertical' | 'horizontal',
+  children: JSX.Element | JSX.Element[] | string,
 }

 const kMinSize = 50;
--- a/packages/web/src/components/toolbar.tsx
+++ b/packages/web/src/components/toolbar.tsx
@ -20,7 +20,7 @@ import * as React from 'react';
 export interface ToolbarProps {
 }

-export const Toolbar: React.FC<ToolbarProps> = ({
+export const Toolbar: React.FC<React.PropsWithChildren<ToolbarProps>> = ({
  children
 }) => {
  return <div className='toolbar'>{children}</div>;
--- a/packages/web/src/components/toolbarButton.tsx
+++ b/packages/web/src/components/toolbarButton.tsx
@ -23,10 +23,10 @@ export interface ToolbarButtonProps {
  icon: string,
  disabled?: boolean,
  toggled?: boolean,
-  onClick: () => void
+  onClick: () => void,
 }

-export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+export const ToolbarButton: React.FC<React.PropsWithChildren<ToolbarButtonProps>> = ({
  children,
  title = '',
  icon = '',