Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix screenshot flakeyness #3087

Merged
merged 2 commits into from
Jan 16, 2024
Merged

Fix screenshot flakeyness #3087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a6b805
Fix screenshot flakyness
Janpot Jan 16, 2024
1316213
dew
Janpot Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/toolpad-app/src/components/Devtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() || '';
}
Expand All @@ -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({
Expand Down Expand Up @@ -178,7 +178,7 @@ export default function QueryEditor() {
}, [appStateApi]);

const saveDisabled = React.useMemo(
() => !hasUnsavedChanges(parseInt(currentTabIndex, 10)),
() => !hasUnsavedChanges(Number(currentTabIndex)),
[hasUnsavedChanges, currentTabIndex],
);

Expand All @@ -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}>
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion test/models/ToolpadEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Loading