From ed67fa53bc072f2edd25d06b33275e49b70a2cb2 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 12 Jul 2023 14:54:57 +0200 Subject: [PATCH 1/5] eperiment --- packages/toolpad-app/package.json | 3 +- .../src/components/resizablePanels.tsx | 33 +++++++++++++++++ .../toolpad/AppEditor/PageEditor/index.tsx | 37 +++++++------------ yarn.lock | 5 +++ 4 files changed, 53 insertions(+), 25 deletions(-) create mode 100644 packages/toolpad-app/src/components/resizablePanels.tsx diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index 5e6baf976f1..b77b1b4a28b 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -112,6 +112,7 @@ "react-hook-form": "7.45.1", "react-inspector": "5.1.1", "react-is": "18.2.0", + "react-resizable-panels": "0.0.53", "react-router-dom": "6.3.0", "react-split-pane": "0.1.92", "semver": "7.5.4", @@ -120,8 +121,8 @@ "superjson": "1.12.4", "typescript": "5.1.6", "vite": "4.4.2", - "whatwg-url": "13.0.0", "vm-browserify": "^1.1.2", + "whatwg-url": "13.0.0", "ws": "8.13.0", "yaml": "2.3.1", "yaml-diff-patch": "2.0.0", diff --git a/packages/toolpad-app/src/components/resizablePanels.tsx b/packages/toolpad-app/src/components/resizablePanels.tsx new file mode 100644 index 00000000000..a41a11f0405 --- /dev/null +++ b/packages/toolpad-app/src/components/resizablePanels.tsx @@ -0,0 +1,33 @@ +import { styled } from '@mui/material'; +import { PanelResizeHandle as PanelResizeHandleOrig } from 'react-resizable-panels'; + +export * from 'react-resizable-panels'; + +const RESIZE_HANDLE_OFFSET = 3; + +export const PanelResizeHandle = styled(PanelResizeHandleOrig)(({ theme }) => ({ + backgroundClip: 'padding-box', + zIndex: 1, + display: 'flex', + backgroundColor: theme.palette.divider, + borderStyle: 'solid', + borderColor: 'rgba(255, 255, 255, 0)', + '&:hover': { + borderColor: theme.palette.divider, + }, + transition: 'all 250ms ease', + '&[data-panel-group-direction="horizontal"]': { + width: 2 * RESIZE_HANDLE_OFFSET + 1, + marginLeft: -RESIZE_HANDLE_OFFSET, + marginRight: -RESIZE_HANDLE_OFFSET, + borderLeftWidth: RESIZE_HANDLE_OFFSET, + borderRightWidth: RESIZE_HANDLE_OFFSET, + }, + '&[data-panel-group-direction="vertical"]': { + height: 2 * RESIZE_HANDLE_OFFSET + 1, + marginTop: -RESIZE_HANDLE_OFFSET, + marginBottom: -RESIZE_HANDLE_OFFSET, + borderTopWidth: RESIZE_HANDLE_OFFSET, + borderBottomWidth: RESIZE_HANDLE_OFFSET, + }, +})); diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx index 0ec14461b24..e0418f550cc 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material'; import { NodeId } from '@mui/toolpad-core'; -import SplitPane from '../../../components/SplitPane'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../../components/resizablePanels'; import RenderPanel from './RenderPanel'; import ComponentPanel from './ComponentPanel'; import { PageEditorProvider } from './PageEditorProvider'; @@ -10,8 +10,6 @@ import * as appDom from '../../../appDom'; import ComponentCatalog from './ComponentCatalog'; import NotFoundEditor from '../NotFoundEditor'; import usePageTitle from '../../../utils/usePageTitle'; -import useLocalStorageState from '../../../utils/useLocalStorageState'; -import useDebouncedHandler from '../../../utils/useDebouncedHandler'; import useUndoRedo from '../../hooks/useUndoRedo'; const classes = { @@ -36,29 +34,20 @@ interface PageEditorContentProps { function PageEditorContent({ node }: PageEditorContentProps) { usePageTitle(`${node.attributes.title} | Toolpad editor`); - const [splitDefaultSize, setSplitDefaultSize] = useLocalStorageState( - `editor/component-panel-split`, - 300, - ); - - const handleSplitChange = useDebouncedHandler((newSize) => setSplitDefaultSize(newSize), 100); - return ( - - - - - - - + + + + + + + + + + + + ); } diff --git a/yarn.lock b/yarn.lock index 89c8caf991d..9cc68c39e9f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11415,6 +11415,11 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +react-resizable-panels@0.0.53: + version "0.0.53" + resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.53.tgz#d169e45f33ccb38cdc077e0f99049385e89883ca" + integrity sha512-lGOJF0Hh5+Y+Usi7x8btmBTi+6CQV1/RKxnj6jVrzvJ9vLbftbSoJPzymOuX8ZCFimlEwP2AKsGtQVKG/KieHA== + react-resize-detector@^8.0.4: version "8.1.0" resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a" From 0797b51af75758fbca50bd06a93446853dabb9d0 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Wed, 16 Aug 2023 15:15:54 +0530 Subject: [PATCH 2/5] WIP react-resizeable-panels --- packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx index e0418f550cc..ef7ec5f8a14 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx @@ -44,7 +44,7 @@ function PageEditorContent({ node }: PageEditorContentProps) { - + From 46610f9b03e768c5f05a73e9abfcf316f18d13bd Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 17 Aug 2023 17:37:59 +0530 Subject: [PATCH 3/5] Replace split-pane with resizable-panels --- packages/toolpad-app/package.json | 3 +- .../toolpad-app/src/components/SplitPane.tsx | 118 -------- .../toolpad/AppEditor/PageEditor/index.tsx | 4 +- .../src/toolpad/AppEditor/PagePanel.tsx | 16 +- .../googleSheets/client.tsx | 186 ++++++------ .../src/toolpadDataSources/local/client.tsx | 252 ++++++++-------- .../src/toolpadDataSources/rest/client.tsx | 276 +++++++++--------- .../src/toolpadDataSources/sql/client.tsx | 151 ++++++---- yarn.lock | 18 +- 9 files changed, 471 insertions(+), 553 deletions(-) delete mode 100644 packages/toolpad-app/src/components/SplitPane.tsx diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index dce69e5ad7e..d5e6acb22c2 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -109,9 +109,8 @@ "react-hook-form": "7.45.4", "react-inspector": "5.1.1", "react-is": "18.2.0", - "react-resizable-panels": "0.0.53", + "react-resizable-panels": "0.0.53", "react-router-dom": "6.15.0", - "react-split-pane": "0.1.92", "recharts": "2.7.3", "semver": "7.5.4", "serialize-javascript": "6.0.1", diff --git a/packages/toolpad-app/src/components/SplitPane.tsx b/packages/toolpad-app/src/components/SplitPane.tsx deleted file mode 100644 index 1174a66d87c..00000000000 --- a/packages/toolpad-app/src/components/SplitPane.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { styled } from '@mui/material'; -import clsx from 'clsx'; -import * as React from 'react'; -import ReactSplitPane, { SplitPaneProps } from 'react-split-pane'; - -const classes = { - dragging: 'MuiToolpadSplitPaneDragging', -}; - -const WrappedSplitPane = React.forwardRef< - ReactSplitPane, - SplitPaneProps & { children?: React.ReactNode } ->(({ className, onDragStarted, onDragFinished, ...props }, ref) => { - const [dragActive, setDragActive] = React.useState(false); - - const handleDragStarted = React.useCallback( - (...args: Parameters>) => { - setDragActive(true); - onDragStarted?.(...args); - }, - [onDragStarted], - ); - - const handleDragFinished = React.useCallback( - (...args: Parameters>) => { - setDragActive(false); - onDragFinished?.(...args); - }, - [onDragFinished], - ); - - return ( - - ); -}); - -const SplitPane = styled(WrappedSplitPane)(({ theme }) => ({ - [`&.${classes.dragging} *`]: { - // Workaround for https://github.com/tomkp/react-split-pane/issues/30 - pointerEvents: 'none', - }, - - '& .Pane': { - background: theme.palette.background.default, - }, - - '& .Pane2': { - zIndex: 1, - }, - - '& .Resizer': { - background: theme.palette.divider, - zIndex: '1', - boxSizing: 'border-box', - backgroundClip: 'padding-box', - flexShrink: '0', - }, - - '& .Resizer:hover': { - transition: 'all 2s ease', - }, - - '& .Resizer.horizontal': { - height: '11px', - margin: '-5px 0', - borderTop: '5px solid rgba(255, 255, 255, 0)', - borderBottom: '5px solid rgba(255, 255, 255, 0)', - cursor: 'row-resize', - width: '100%', - }, - - '& .Resizer.horizontal:hover': { - borderTop: '5px solid rgba(0, 0, 0, 0.5)', - borderBottom: '5px solid rgba(0, 0, 0, 0.5)', - }, - - '& .Resizer.vertical': { - width: '11px', - margin: '0 -5px', - borderLeft: '5px solid rgba(255, 255, 255, 0)', - borderRight: '5px solid rgba(255, 255, 255, 0)', - cursor: 'col-resize', - }, - - '& .Resizer.vertical:hover': { - borderLeft: '5px solid rgba(0, 0, 0, 0.5)', - borderRight: '5px solid rgba(0, 0, 0, 0.5)', - }, - - '& .Resizer.disabled': { - cursor: 'not-allowed', - }, - - '& .Resizer.disabled:hover': { - borderColor: 'transparent', - }, -})); - -export default SplitPane; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx index ef7ec5f8a14..742900645dc 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx @@ -37,14 +37,14 @@ function PageEditorContent({ node }: PageEditorContentProps) { return ( - + - + diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx index 15ac1914c28..d23197db260 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { styled, SxProps, Box, Divider, Typography } from '@mui/material'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import PagesExplorer from './PagesExplorer'; import PageHierarchyExplorer from './HierarchyExplorer'; -import SplitPane from '../../components/SplitPane'; import { useDom } from '../AppState'; import AppOptions from '../AppOptions'; import config from '../../config'; @@ -38,10 +38,16 @@ export default function PagePanel({ className, sx }: ComponentPanelProps) { - - - - + + + + + + + + + + ); } diff --git a/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx b/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx index 6fc03ec5b4c..a866f317851 100644 --- a/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx @@ -15,6 +15,7 @@ import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'; import { UseQueryResult } from '@tanstack/react-query'; import { getObjectKey } from '@mui/toolpad-utils/objectKey'; import useDebounced from '@mui/toolpad-utils/hooks/useDebounced'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types'; import { GoogleSheetsConnectionParams, @@ -29,7 +30,6 @@ import { } from './types'; import { usePrivateQuery } from '../context'; import QueryInputPanel from '../QueryInputPanel'; -import SplitPane from '../../components/SplitPane'; import useQueryPreview from '../useQueryPreview'; import useFetchPrivate from '../useFetchPrivate'; import * as appDom from '../../appDom'; @@ -140,96 +140,100 @@ function QueryEditor({ const previewGridKey = React.useMemo(() => getObjectKey(columns), [columns]); return ( - - - - option.name ?? ''} - onInputChange={handleSpreadsheetInput} - onChange={handleSpreadsheetChange} - isOptionEqualToValue={(option: GoogleDriveFile, val: GoogleDriveFile) => - option.id === val.id - } - renderInput={(params) => } - renderOption={(props, option) => { - return ( -
  • - {option.name} -
    • - ); - }} - /> - option.properties?.title ?? ''} - onChange={handleSheetChange} - renderInput={(params) => } - renderOption={(props, option) => { - return ( -
  • - {option?.properties?.title} -
    • - ); - }} - /> - - - } - /> -     -     - - - {preview?.error ? ( - - {preview?.error?.message} - - ) : ( - - )} - -     + + + + + option.name ?? ''} + onInputChange={handleSpreadsheetInput} + onChange={handleSpreadsheetChange} + isOptionEqualToValue={(option: GoogleDriveFile, val: GoogleDriveFile) => + option.id === val.id + } + renderInput={(params) => } + renderOption={(props, option) => { + return ( +
  • + {option.name} +
    • + ); + }} + /> + option.properties?.title ?? ''} + onChange={handleSheetChange} + renderInput={(params) => } + renderOption={(props, option) => { + return ( +
  • + {option?.properties?.title} +
    • + ); + }} + /> + + + } + /> +     +     +     + + + + {preview?.error ? ( + + {preview?.error?.message} + + ) : ( + + )} + + +     ); } diff --git a/packages/toolpad-app/src/toolpadDataSources/local/client.tsx b/packages/toolpad-app/src/toolpadDataSources/local/client.tsx index 8a3c75980ef..d6e14bd6c68 100644 --- a/packages/toolpad-app/src/toolpadDataSources/local/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/local/client.tsx @@ -21,6 +21,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import useBoolean from '@mui/toolpad-utils/hooks/useBoolean'; import { useQuery } from '@tanstack/react-query'; import { ensureSuffix } from '@mui/toolpad-utils/strings'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import { ClientDataSource, QueryEditorProps } from '../../types'; import { LocalPrivateApi, LocalQuery, LocalConnectionParams } from './types'; import { @@ -28,7 +29,6 @@ import { useEvaluateLiveBindings, } from '../../toolpad/AppEditor/useEvaluateLiveBinding'; import * as appDom from '../../appDom'; -import SplitPane from '../../components/SplitPane'; import JsonView from '../../components/JsonView'; import OpenCodeEditorButton from '../../components/OpenCodeEditor'; import useQueryPreview from '../useQueryPreview'; @@ -264,132 +264,136 @@ function QueryEditor({ ]); return ( - - New handler file} - > - - - } - defaultExpandIcon={} - expanded={expanded} - onNodeToggle={(_event, nodeIds) => setExpanded(nodeIds)} - > - {isCreateNewHandlerOpen ? ( - - - setNewHandlerInput(event.target.value.replaceAll(/[^a-zA-Z0-9]/g, '')) - } - autoFocus - disabled={newHandlerLoading} - endAdornment={newHandlerLoading ? : null} - onBlur={handleCreateNewCommit} - onKeyDown={(event) => { - if (event.key === 'Enter') { - handleCreateNewCommit(); - } else if (event.key === 'Escape') { - handleCloseCreateNewHandler(); - event.stopPropagation(); - } - }} - /> - setAnchorEl(null)} - disableAutoFocus - anchorOrigin={{ - vertical: 'bottom', - horizontal: 'left', - }} - > - - {inputError} - - - - } - /> - ) : null} - - {introspection.data?.files?.map((file) => ( - - ))} - - {introspection.isLoading ? ( - - } /> - } /> - } /> - - ) : null} - - {introspection.error ? ( - + + New handler file} + > + + + } + defaultExpandIcon={} + expanded={expanded} + onNodeToggle={(_event, nodeIds) => setExpanded(nodeIds)} > - {errorFrom(introspection.error).message} - - ) : null} - - - - Parameters: - {Object.entries(parameterDefs).map(([name, definiton]) => { - const Control = getDefaultControl(propTypeControls, definiton, liveBindings); - return Control ? ( - ( - - )} - value={paramsObject[name]} - onChange={(newValue) => { - const paramKeys = Object.keys(parameterDefs); - const newParams: BindableAttrEntries = paramKeys.flatMap((key) => { - const paramValue = key === name ? newValue : paramsObject[key]; - return paramValue ? [[key, paramValue]] : []; - }); - setInput((existing) => ({ - ...existing, - params: newParams, - })); + {isCreateNewHandlerOpen ? ( + + + setNewHandlerInput(event.target.value.replaceAll(/[^a-zA-Z0-9]/g, '')) + } + autoFocus + disabled={newHandlerLoading} + endAdornment={newHandlerLoading ? : null} + onBlur={handleCreateNewCommit} + onKeyDown={(event) => { + if (event.key === 'Enter') { + handleCreateNewCommit(); + } else if (event.key === 'Escape') { + handleCloseCreateNewHandler(); + event.stopPropagation(); + } + }} + /> + setAnchorEl(null)} + disableAutoFocus + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + + {inputError} + + + + } + /> + ) : null} + + {introspection.data?.files?.map((file) => ( + + ))} + + {introspection.isLoading ? ( + + } /> + } /> + } /> + + ) : null} + + {introspection.error ? ( + - ) : null; - })} + > + {errorFrom(introspection.error).message} + + ) : null} + + + + Parameters: + {Object.entries(parameterDefs).map(([name, definiton]) => { + const Control = getDefaultControl(propTypeControls, definiton, liveBindings); + return Control ? ( + ( + + )} + value={paramsObject[name]} + onChange={(newValue) => { + const paramKeys = Object.keys(parameterDefs); + const newParams: BindableAttrEntries = paramKeys.flatMap((key) => { + const paramValue = key === name ? newValue : paramsObject[key]; + return paramValue ? [[key, paramValue]] : []; + }); + setInput((existing) => ({ + ...existing, + params: newParams, + })); + }} + /> + ) : null; + })} + - - - - - - - + +     + + + + + + + ); } diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 5fc70e970c1..d9280252d75 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -17,6 +17,7 @@ import { Controller, useForm } from 'react-hook-form'; import { TabContext, TabList } from '@mui/lab'; import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime'; import { useServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types'; import { FetchPrivateQuery, @@ -43,7 +44,6 @@ import * as appDom from '../../appDom'; import ParametersEditor from '../../toolpad/AppEditor/PageEditor/ParametersEditor'; import BodyEditor from './BodyEditor'; import TabPanel from '../../components/TabPanel'; -import SplitPane from '../../components/SplitPane'; import JsonView from '../../components/JsonView'; import useQueryPreview from '../useQueryPreview'; import TransformInput from '../TranformInput'; @@ -409,141 +409,157 @@ function QueryEditor({ ); return ( - - - - - Query - - - {HTTP_METHODS.map((method) => ( - - {method} - - ))} - - - liveBinding={liveUrl} - globalScope={queryScope} - globalScopeMeta={QUERY_SCOPE_META} - sx={{ flex: 1 }} - jsRuntime={jsServerRuntime} - label="url" - propType={{ type: 'string' }} - renderControl={(props) => } - value={urlValue} - onChange={handleUrlChange} - /> - - - - - - - - - - - - - - - - - - - - - - + + + + + + + Query + - raw - JSON - - 🚧 CSV - - - 🚧 XML - + {HTTP_METHODS.map((method) => ( + + {method} + + ))} - - - + liveBinding={liveUrl} + globalScope={queryScope} + globalScopeMeta={QUERY_SCOPE_META} + sx={{ flex: 1 }} + jsRuntime={jsServerRuntime} + label="url" + propType={{ type: 'string' }} + renderControl={(props) => } + value={urlValue} + onChange={handleUrlChange} /> - - + + + + + + + + + + + + + + + + + + + + + + + + raw + JSON + + 🚧 CSV + + + 🚧 XML + + + + + + + + + + + + + + + + + Parameters + - - - - - Parameters - - - - - - - setActiveTab('transform')} /> - - - - + + + + + + + + + + + setActiveTab('transform')} + /> + + + + + + + + + ); } diff --git a/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx b/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx index 946a9992048..54e50f757ff 100644 --- a/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx @@ -1,5 +1,14 @@ import { LoadingButton } from '@mui/lab'; -import { Box, Button, Skeleton, Stack, TextField, Toolbar, Typography } from '@mui/material'; +import { + Box, + Button, + Divider, + Skeleton, + Stack, + TextField, + Toolbar, + Typography, +} from '@mui/material'; import { inferColumns, parseColumns } from '@mui/toolpad-components'; import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'; import * as React from 'react'; @@ -11,7 +20,7 @@ import { getObjectKey } from '@mui/toolpad-utils/objectKey'; import { BindableAttrEntries, BindableAttrValue, ExecFetchResult } from '@mui/toolpad-core'; import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime'; import { serializeError, errorFrom } from '@mui/toolpad-utils/errors'; -import SplitPane from '../../components/SplitPane'; +import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import ParametersEditor from '../../toolpad/AppEditor/PageEditor/ParametersEditor'; import { useEvaluateLiveBindingEntries } from '../../toolpad/AppEditor/useEvaluateLiveBinding'; import { QueryEditorProps } from '../../types'; @@ -224,70 +233,84 @@ export function QueryEditor({ const previewGridKey = React.useMemo(() => getObjectKey(columns), [columns]); return ( - - - - - - setInput((existing) => appDom.setQueryProp(existing, 'sql', newValue)) - } - language="sql" + + + + + + + + setInput((existing) => appDom.setQueryProp(existing, 'sql', newValue)) + } + language="sql" + /> + + + + + - - - - - Parameters - + + + + Parameters + + + + + + + + {preview?.error ? ( + + {preview?.error?.message} + + ) : ( + + + {preview?.info ? ( + + {preview.info} + + ) : null} + + )} - - - - {preview?.error ? ( - - {preview?.error?.message} - - ) : ( - - - {preview?.info ? ( - - {preview.info} - - ) : null} - - )} - - + + ); } diff --git a/yarn.lock b/yarn.lock index 352f92928b8..3cf9bc7f3a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11485,7 +11485,7 @@ promzard@^1.0.0: dependencies: read "^2.0.0" -prop-types@15.8.1, prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.8.1, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -11794,22 +11794,6 @@ react-smooth@^2.0.2: fast-equals "^4.0.3" react-transition-group "2.9.0" -react-split-pane@0.1.92: - version "0.1.92" - resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41" - integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w== - dependencies: - prop-types "^15.7.2" - react-lifecycles-compat "^3.0.4" - react-style-proptype "^3.2.2" - -react-style-proptype@^3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0" - integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ== - dependencies: - prop-types "^15.5.4" - react-transition-group@2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" From bca1ef137c09f679f7ffae6239e83eebabc937fe Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Fri, 18 Aug 2023 13:22:51 +0530 Subject: [PATCH 4/5] If specified, they must add up to `100` --- packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx index d23197db260..478ded907a4 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx @@ -40,11 +40,11 @@ export default function PagePanel({ className, sx }: ComponentPanelProps) { - + - + From 897477117f2d8b37ca0076c91f98adb2c7a5380d Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Fri, 18 Aug 2023 16:02:48 +0530 Subject: [PATCH 5/5] Ignore minor differences (<0.1px) --- test/integration/editor/index.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/editor/index.spec.ts b/test/integration/editor/index.spec.ts index fe35072083e..5a14996d64f 100644 --- a/test/integration/editor/index.spec.ts +++ b/test/integration/editor/index.spec.ts @@ -152,8 +152,8 @@ test('must correctly size new layout columns', async ({ page }) => { const secondFullWidthBoundingBox3 = await getNthFullWidthBoundingBox(1); const thirdFullWidthBoundingBox3 = await getNthFullWidthBoundingBox(2); - expect(firstFullWidthBoundingBox3!.width).toBe(secondFullWidthBoundingBox3!.width); - expect(secondFullWidthBoundingBox3!.width).toBe(thirdFullWidthBoundingBox3!.width); + expect(firstFullWidthBoundingBox3!.width).toBeCloseTo(secondFullWidthBoundingBox3!.width, 1); + expect(secondFullWidthBoundingBox3!.width).toBeCloseTo(thirdFullWidthBoundingBox3!.width, 1); // Drag new element to same row as existing different-width elements