From 2a6b8058dad3ba11bb5d8bf2840797fb7d68a623 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 16 Jan 2024 11:41:49 +0100
Subject: [PATCH 1/2] Fix screenshot flakyness

---
 packages/toolpad-app/src/components/Devtools.tsx       |  6 ++++--
 .../toolpad/AppEditor/PageEditor/QueryEditor/index.tsx | 10 +++++-----
 .../src/toolpad/AppEditor/PageEditor/index.tsx         |  4 ++--
 .../toolpad-app/src/toolpadDataSources/rest/client.tsx |  1 +
 test/models/ToolpadEditor.ts                           |  2 +-
 5 files changed, 13 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..e1f96646e04 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} order={2} id="query-panel">
             <QueryEditor />
           </Panel>
         ) : null}
diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
index cb5503b5e78..2da15870601 100644
--- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
+++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
@@ -15,6 +15,7 @@ import {
   Divider,
   inputLabelClasses,
   inputBaseClasses,
+  LinearProgress,
 } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
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() {

From 131621388815dc60617a0326edf624f3db708e14 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:12:13 +0100
Subject: [PATCH 2/2] dew

---
 packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx | 2 +-
 packages/toolpad-app/src/toolpadDataSources/rest/client.tsx     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
index e1f96646e04..5bc905ad6b2 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
@@ -59,7 +59,7 @@ function PageEditorContent({ node }: PageEditorContentProps) {
         <PanelResizeHandle />
 
         {showQuery ? (
-          <Panel minSize={10} maxSize={90} order={2} id="query-panel">
+          <Panel minSize={10} maxSize={90} defaultSize={35} order={2} id="query-panel">
             <QueryEditor />
           </Panel>
         ) : null}
diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
index 2da15870601..cb5503b5e78 100644
--- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
+++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx
@@ -15,7 +15,6 @@ import {
   Divider,
   inputLabelClasses,
   inputBaseClasses,
-  LinearProgress,
 } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';