From e4da040193bc1a47be932f3a1c8cf51748a65503 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Tue, 16 Jan 2024 17:40:54 +0100
Subject: [PATCH] Fix screenshot flakeyness (#3087)

---
 packages/toolpad-app/src/components/Devtools.tsx       |  6 ++++--
 .../toolpad/AppEditor/PageEditor/QueryEditor/index.tsx | 10 +++++-----
 .../src/toolpad/AppEditor/PageEditor/index.tsx         |  4 ++--
 test/models/ToolpadEditor.ts                           |  2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/toolpad-app/src/components/Devtools.tsx b/packages/toolpad-app/src/components/Devtools.tsx
index 25d30349a89..c88b790ccf5 100644
--- a/packages/toolpad-app/src/components/Devtools.tsx
+++ b/packages/toolpad-app/src/components/Devtools.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import { Box, IconButton, styled, SxProps, Tab } from '@mui/material';
+import { Box, IconButton, LinearProgress, styled, SxProps, Tab } from '@mui/material';
 import type { Har } from 'har-format';
 import DoDisturbIcon from '@mui/icons-material/DoDisturb';
 import Console, { LogEntry } from './Console';
@@ -114,7 +114,9 @@ export default function Devtools({ sx, log, onLogClear, har, onHarClear }: Devto
         ) : null}
         {har ? (
           <DebuggerTabPanel value="network">
-            <HarViewer sx={{ flex: 1 }} value={har} />
+            <React.Suspense fallback={<LinearProgress />}>
+              <HarViewer sx={{ flex: 1 }} value={har} />
+            </React.Suspense>
           </DebuggerTabPanel>
         ) : null}
       </TabContext>
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
index 74a00b1d977..62dbb87da4f 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
@@ -108,7 +108,7 @@ export default function QueryEditor() {
     return '';
   }, [currentView]);
 
-  const currentTabIndex = React.useMemo(() => {
+  const currentTabIndex: string = React.useMemo(() => {
     if (currentView.kind === 'page' && currentView.view?.kind === 'query') {
       return currentView.queryPanel?.currentTabIndex?.toString() || '';
     }
@@ -118,7 +118,7 @@ export default function QueryEditor() {
   const handleTabChange = React.useCallback(
     (event: React.SyntheticEvent, newValue: string) => {
       if (currentView.kind === 'page') {
-        const tabIndex = parseInt(newValue, 10);
+        const tabIndex = Number(newValue);
         const queryId = currentView.queryPanel?.queryTabs?.[tabIndex]?.meta?.id;
         if (queryId) {
           appStateApi.setView({
@@ -178,7 +178,7 @@ export default function QueryEditor() {
   }, [appStateApi]);
 
   const saveDisabled = React.useMemo(
-    () => !hasUnsavedChanges(parseInt(currentTabIndex, 10)),
+    () => !hasUnsavedChanges(Number(currentTabIndex)),
     [hasUnsavedChanges, currentTabIndex],
   );
 
@@ -203,7 +203,7 @@ export default function QueryEditor() {
     <Stack
       direction="column"
       sx={{ height: '100%', overflow: 'hidden', borderBottom: 5, borderColor: 'divider' }}
-      aria-label="Query editor panel"
+      aria-label="Query editor"
       role="tabpanel"
     >
       <TabContext value={currentTabIndex}>
@@ -212,7 +212,7 @@ export default function QueryEditor() {
           justifyContent={'space-between'}
           sx={{ maxHeight: 36, borderBottom: 1, borderColor: 'divider' }}
         >
-          <TabList onChange={handleTabChange} aria-label="Query editor panel">
+          <TabList onChange={handleTabChange} aria-label="Query editor tabs">
             {currentView.queryPanel?.queryTabs?.map((query, index) => (
               <Tab
                 key={index}
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
index bb4d6ce1016..5bc905ad6b2 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
@@ -42,7 +42,7 @@ function PageEditorContent({ node }: PageEditorContentProps) {
   return (
     <PageEditorProvider key={node.id} nodeId={node.id}>
       <PanelGroup autoSaveId="toolpad/editor-panel-split" direction="vertical">
-        <Panel defaultSize={100} minSize={0} maxSize={100} order={1} id="editor">
+        <Panel order={1} id="editor">
           <PanelGroup autoSaveId="editor/component-panel-split" direction="horizontal">
             <Panel id="page-editor" defaultSize={75} minSize={50} maxSize={80}>
               <PageEditorRoot>
@@ -59,7 +59,7 @@ function PageEditorContent({ node }: PageEditorContentProps) {
         <PanelResizeHandle />
 
         {showQuery ? (
-          <Panel minSize={35} maxSize={100} order={2} id="query-panel">
+          <Panel minSize={10} maxSize={90} defaultSize={35} order={2} id="query-panel">
             <QueryEditor />
           </Panel>
         ) : null}
diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts
index 3dbb53fe344..28f78d3f899 100644
--- a/test/models/ToolpadEditor.ts
+++ b/test/models/ToolpadEditor.ts
@@ -74,7 +74,7 @@ export class ToolpadEditor {
     this.explorer = page.getByTestId('pages-explorer');
     this.queriesExplorer = page.getByTestId('query-explorer');
     this.confirmationDialog = page.getByRole('dialog').filter({ hasText: 'Confirm' });
-    this.queryEditorPanel = page.getByRole('tabpanel', { name: 'Query editor panel', exact: true });
+    this.queryEditorPanel = page.getByRole('tabpanel', { name: 'Query editor', exact: true });
   }
 
   async goto() {