chore(ui): update to react 18 (#32079)

Part of https://github.com/microsoft/playwright/issues/31863. Updates
most of our React usage to React 18. `recorder` doesn't seem to like it
yet. I suspect that some of our code isn't compatible with concurrent
mode, i've investigated that in
https://github.com/microsoft/playwright/pull/32101.

---------

Signed-off-by: Simon Knott <info@simonknott.de>
Co-authored-by: Max Schmitt <max@schmitt.mx>

packages/html-reporter/src/index.tsx

@@ -19,7 +19,7 @@ import type zip from '@zip.js/zip.js';
 // @ts-ignore
 import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import './colors.css';
 import type { LoadedReport } from './loadedReport';
 import { ReportView } from './reportView';
@@ -44,7 +44,7 @@ const ReportLoader: React.FC = () => {
 };
 
 window.onload = () => {
-  ReactDOM.render(<ReportLoader />, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<ReportLoader />);
 };
 
 class ZipReport implements LoadedReport {

packages/trace-viewer/src/embedded.tsx

@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
 
 (async () => {
@@ -56,5 +56,5 @@ import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<EmbeddedWorkbenchLoader />, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<EmbeddedWorkbenchLoader />);
 })();

packages/trace-viewer/src/index.tsx

@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { WorkbenchLoader } from './ui/workbenchLoader';
 
 (async () => {
@@ -38,5 +38,5 @@ import { WorkbenchLoader } from './ui/workbenchLoader';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<WorkbenchLoader/>, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<WorkbenchLoader/>);
 })();

packages/trace-viewer/src/ui/uiModeTestListView.tsx

@@ -40,7 +40,7 @@ export const TestListView: React.FC<{
   testServerConnection: TestServerConnection | undefined,
   testModel?: TestModel,
   runTests: (mode: 'bounce-if-busy' | 'queue-if-busy', testIds: Set<string>) => void,
-  runningState?: { testIds: Set<string>, itemSelectedByUser?: boolean },
+  runningState?: { testIds: Set<string>, itemSelectedByUser?: boolean, completed?: boolean },
   watchAll: boolean,
   watchedTreeIds: { value: Set<string> },
   setWatchedTreeIds: (ids: { value: Set<string> }) => void,
@@ -154,7 +154,7 @@ export const TestListView: React.FC<{
         </div>
         {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
         <Toolbar noMinHeight={true} noShadow={true}>
-          <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
+          <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState && !runningState.completed}></ToolbarButton>
           <ToolbarButton icon='go-to-file' title='Show source' onClick={onRevealSource} style={(treeItem.kind === 'group' && treeItem.subKind === 'folder') ? { visibility: 'hidden' } : {}}></ToolbarButton>
           {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
             if (watchedTreeIds.value.has(treeItem.id))

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -85,7 +85,9 @@ export const UIModeView: React.FC<{}> = ({
   const [selectedItem, setSelectedItem] = React.useState<{ treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase }>({});
   const [visibleTestIds, setVisibleTestIds] = React.useState<Set<string>>(new Set());
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const [runningState, setRunningState] = React.useState<{ testIds: Set<string>, itemSelectedByUser?: boolean } | undefined>();
+  const [runningState, setRunningState] = React.useState<{ testIds: Set<string>, itemSelectedByUser?: boolean, completed?: boolean } | undefined>();
+  const isRunningTest = runningState && !runningState.completed;
+
   const [watchAll, setWatchAll] = useSetting<boolean>('watch-all', false);
   const [watchedTreeIds, setWatchedTreeIds] = React.useState<{ value: Set<string> }>({ value: new Set() });
   const commandQueue = React.useRef(Promise.resolve());
@@ -251,29 +253,29 @@ export const UIModeView: React.FC<{}> = ({
 
   // Update progress.
   React.useEffect(() => {
-    if (runningState && testModel?.progress)
+    if (isRunningTest && testModel?.progress)
       setProgress(testModel.progress);
     else if (!testModel)
       setProgress(undefined);
-  }, [testModel, runningState]);
+  }, [testModel, isRunningTest]);
 
   // Test tree is built from the model and filters.
   const { testTree } = React.useMemo(() => {
     if (!testModel)
       return { testTree: new TestTree('', new TeleSuite('', 'root'), [], projectFilters, pathSeparator) };
     const testTree = new TestTree('', testModel.rootSuite, testModel.loadErrors, projectFilters, pathSeparator);
-    testTree.filterTree(filterText, statusFilters, runningState?.testIds);
+    testTree.filterTree(filterText, statusFilters, isRunningTest ? runningState?.testIds : undefined);
     testTree.sortAndPropagateStatus();
     testTree.shortenRoot();
     testTree.flattenForSingleProject();
     setVisibleTestIds(testTree.testIds());
     return { testTree };
-  }, [filterText, testModel, statusFilters, projectFilters, setVisibleTestIds, runningState]);
+  }, [filterText, testModel, statusFilters, projectFilters, setVisibleTestIds, runningState, isRunningTest]);
 
   const runTests = React.useCallback((mode: 'queue-if-busy' | 'bounce-if-busy', testIds: Set<string>) => {
     if (!testServerConnection || !testModel)
       return;
-    if (mode === 'bounce-if-busy' && runningState)
+    if (mode === 'bounce-if-busy' && isRunningTest)
       return;
 
     runTestBacklog.current = new Set([...runTestBacklog.current, ...testIds]);
@@ -320,9 +322,9 @@ export const UIModeView: React.FC<{}> = ({
           test.results = [];
       }
       setTestModel({ ...testModel });
-      setRunningState(undefined);
+      setRunningState(oldState => oldState ? ({ ...oldState, completed: true }) : undefined);
     });
-  }, [projectFilters, runningState, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]);
+  }, [projectFilters, isRunningTest, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]);
 
   React.useEffect(() => {
     if (!testServerConnection || !teleSuiteUpdater)
@@ -396,7 +398,6 @@ export const UIModeView: React.FC<{}> = ({
     };
   }, [runTests, reloadTests, testServerConnection, visibleTestIds, isShowingOutput]);
 
-  const isRunningTest = !!runningState;
   const dialogRef = React.useRef<HTMLDialogElement>(null);
   const openInstallDialog = React.useCallback((e: React.MouseEvent) => {
     e.preventDefault();

packages/trace-viewer/src/uiMode.tsx

@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { UIModeView } from './ui/uiModeView';
 
 (async () => {
@@ -38,5 +38,5 @@ import { UIModeView } from './ui/uiModeView';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<UIModeView></UIModeView>, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<UIModeView/>);
 })();

tests/playwright-test/ui-mode-test-run.spec.ts

@@ -174,7 +174,9 @@ test('should run by project', async ({ runUITest }) => {
   await expect.poll(dumpTestTree(page)).toBe(`
     ▼ ❌ a.test.ts
       ► ◯ passes
-      ► ❌ fails <=
+      ▼ ❌ fails
+          ❌ foo <=
+          ◯ bar
       ► ❌ suite
     ▼ ❌ b.test.ts
       ► ◯ passes