From 6996c63b34506121eeb6db63c0ddd6f6e430e3cd Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Wed, 13 Jul 2022 11:54:05 +0200
Subject: [PATCH 1/3] Move query options to the bottom

---
 .../PageEditor/JsExpressionEditor.tsx         |   3 +-
 .../AppEditor/PageEditor/QueryEditor.tsx      | 154 +++++++++---------
 2 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx
index bf06928cc8e..adb8a4f75c7 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/JsExpressionEditor.tsx
@@ -11,8 +11,7 @@ const TypescriptEditor = lazyComponent(() => import('../../TypescriptEditor'), {
 
 const JsExpressionEditorRoot = styled('div')(({ theme }) => ({
   height: 150,
-  border: '1px solid black',
-  borderColor: theme.palette.divider,
+  border: `1px solid ${theme.palette.divider}`,
 }));
 
 export interface JsExpressionEditorProps extends WithControlledProp<string> {
diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index a61757a5afd..85240cc9edd 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -13,7 +13,6 @@ import {
   TextField,
   InputAdornment,
   Divider,
-  Typography,
   Toolbar,
   MenuItem,
   SxProps,
@@ -317,8 +316,7 @@ function QueryNodeEditorDialog<Q, P>({
   const queryEditorContext = React.useMemo(() => ({ appId, connectionId }), [appId, connectionId]);
 
   return (
-    <Dialog fullWidth maxWidth="lg" open={open} onClose={handleClose} scroll="body">
-      <DialogTitle>Edit Query ({node.id})</DialogTitle>
+    <Dialog fullWidth maxWidth="xl" open={open} onClose={handleClose} scroll="body">
       {dataSourceId && dataSource ? (
         <DialogContent>
           <Stack spacing={2} py={1}>
@@ -332,7 +330,6 @@ function QueryNodeEditorDialog<Q, P>({
             </Stack>
 
             <Divider />
-            <Typography>Build query:</Typography>
             <ConnectionContextProvider value={queryEditorContext}>
               <dataSource.QueryEditor
                 connectionParams={connection?.attributes.params.value}
@@ -345,84 +342,95 @@ function QueryNodeEditorDialog<Q, P>({
                 globalScope={pageState}
               />
             </ConnectionContextProvider>
-            <Divider />
-            <Typography>Options:</Typography>
             <Grid container direction="row" spacing={1}>
-              <Grid item xs={4}>
-                <Stack direction="column" gap={1}>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={input.attributes.refetchOnWindowFocus?.value ?? true}
-                        onChange={handleRefetchOnWindowFocusChange}
-                      />
-                    }
-                    label="Refetch on window focus"
-                  />
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={input.attributes.refetchOnReconnect?.value ?? true}
-                        onChange={handleRefetchOnReconnectChange}
+              {/* TODO: move transform inside of the dataSource.QueryEditor and remove the conditional */}
+              {dataSourceId === 'function' ? null : (
+                <>
+                  <Divider />
+                  <Grid item xs={6}>
+                    <Stack>
+                      <FormControlLabel
+                        label="Transform response"
+                        control={
+                          <Checkbox
+                            checked={input.attributes.transformEnabled?.value ?? false}
+                            onChange={handleTransformEnabledChange}
+                            inputProps={{ 'aria-label': 'controlled' }}
+                          />
+                        }
                       />
-                    }
-                    label="Refetch on network reconnect"
-                  />
-                  <TextField
-                    InputProps={{
-                      startAdornment: <InputAdornment position="start">s</InputAdornment>,
-                    }}
-                    sx={{ maxWidth: 300 }}
-                    type="number"
-                    label="Refetch interval"
-                    value={refetchIntervalInSeconds(input.attributes.refetchInterval?.value) ?? ''}
-                    onChange={handleRefetchIntervalChange}
-                  />
-                </Stack>
-              </Grid>
-              <Grid item xs={6}>
-                <Stack>
-                  <FormControlLabel
-                    label="Transform response"
-                    control={
-                      <Checkbox
-                        checked={input.attributes.transformEnabled?.value ?? false}
-                        onChange={handleTransformEnabledChange}
-                        inputProps={{ 'aria-label': 'controlled' }}
-                      />
-                    }
-                  />
 
-                  <JsExpressionEditor
-                    globalScope={{}}
-                    value={input.attributes.transform?.value ?? '(data) => {\n  return data;\n}'}
-                    onChange={handleTransformFnChange}
-                    disabled={!input.attributes.transformEnabled?.value}
-                  />
-                </Stack>
-              </Grid>
+                      <JsExpressionEditor
+                        globalScope={{}}
+                        value={
+                          input.attributes.transform?.value ?? '(data) => {\n  return data;\n}'
+                        }
+                        onChange={handleTransformFnChange}
+                        disabled={!input.attributes.transformEnabled?.value}
+                      />
+                    </Stack>
+                  </Grid>
+                </>
+              )}
             </Grid>
+            {/* TODO: move preview inside of the dataSource.QueryEditor and remove the conditional */}
+            {dataSourceId === 'function' ? null : (
+              <>
+                <Divider />
+                <Toolbar disableGutters>
+                  <LoadingButton
+                    size="medium"
+                    disabled={previewParams === paramsObject && previewQuery === input}
+                    loading={isPreviewLoading}
+                    loadingPosition="start"
+                    variant="contained"
+                    onClick={handleUpdatePreview}
+                    startIcon={<PlayArrowIcon />}
+                  >
+                    Preview
+                  </LoadingButton>
+                </Toolbar>
+                {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
+                {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
+              </>
+            )}
+
             <Divider />
-            <Toolbar disableGutters>
-              <LoadingButton
-                size="medium"
-                disabled={previewParams === paramsObject && previewQuery === input}
-                loading={isPreviewLoading}
-                loadingPosition="start"
-                variant="contained"
-                onClick={handleUpdatePreview}
-                startIcon={<PlayArrowIcon />}
-              >
-                Preview
-              </LoadingButton>
-            </Toolbar>
-            {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
-            {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
+            <Stack direction="row" gap={1} alignItems="center">
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={input.attributes.refetchOnWindowFocus?.value ?? true}
+                    onChange={handleRefetchOnWindowFocusChange}
+                  />
+                }
+                label="Refetch on window focus"
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={input.attributes.refetchOnReconnect?.value ?? true}
+                    onChange={handleRefetchOnReconnectChange}
+                  />
+                }
+                label="Refetch on network reconnect"
+              />
+              <TextField
+                InputProps={{
+                  startAdornment: <InputAdornment position="start">s</InputAdornment>,
+                }}
+                sx={{ maxWidth: 300 }}
+                type="number"
+                label="Refetch interval"
+                value={refetchIntervalInSeconds(input.attributes.refetchInterval?.value) ?? ''}
+                onChange={handleRefetchIntervalChange}
+              />
+            </Stack>
           </Stack>
         </DialogContent>
       ) : (
         <DialogContent>
-          <Alert severity="error">DaPtaSource &quot;{dataSourceId}&quot; not found</Alert>
+          <Alert severity="error">Datasource &quot;{dataSourceId}&quot; not found</Alert>
         </DialogContent>
       )}
       <DialogActions>

From 72ac465165cf65b7961f642f45426c1edf03a6ec Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Wed, 13 Jul 2022 11:55:24 +0200
Subject: [PATCH 2/3] fix lint

---
 .../src/components/AppEditor/PageEditor/QueryEditor.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index 85240cc9edd..62da9d9e52b 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -345,7 +345,7 @@ function QueryNodeEditorDialog<Q, P>({
             <Grid container direction="row" spacing={1}>
               {/* TODO: move transform inside of the dataSource.QueryEditor and remove the conditional */}
               {dataSourceId === 'function' ? null : (
-                <>
+                <React.Fragment>
                   <Divider />
                   <Grid item xs={6}>
                     <Stack>
@@ -370,12 +370,12 @@ function QueryNodeEditorDialog<Q, P>({
                       />
                     </Stack>
                   </Grid>
-                </>
+                </React.Fragment>
               )}
             </Grid>
             {/* TODO: move preview inside of the dataSource.QueryEditor and remove the conditional */}
             {dataSourceId === 'function' ? null : (
-              <>
+              <React.Fragment>
                 <Divider />
                 <Toolbar disableGutters>
                   <LoadingButton
@@ -392,7 +392,7 @@ function QueryNodeEditorDialog<Q, P>({
                 </Toolbar>
                 {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
                 {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
-              </>
+              </React.Fragment>
             )}
 
             <Divider />

From 37172de7bafb3870316b65cd381e1b0f5f3ccde5 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Wed, 13 Jul 2022 12:49:48 +0200
Subject: [PATCH 3/3] update

---
 .../AppEditor/PageEditor/QueryEditor.tsx      | 209 ++++++++++--------
 1 file changed, 116 insertions(+), 93 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index 62da9d9e52b..d879b369175 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -17,6 +17,7 @@ import {
   MenuItem,
   SxProps,
   Alert,
+  Box,
 } from '@mui/material';
 import * as React from 'react';
 import AddIcon from '@mui/icons-material/Add';
@@ -316,68 +317,89 @@ function QueryNodeEditorDialog<Q, P>({
   const queryEditorContext = React.useMemo(() => ({ appId, connectionId }), [appId, connectionId]);
 
   return (
-    <Dialog fullWidth maxWidth="xl" open={open} onClose={handleClose} scroll="body">
+    <Dialog fullWidth maxWidth="xl" open={open} onClose={handleClose}>
+      <DialogTitle>
+        <Stack direction="row" gap={2}>
+          <NodeNameEditor node={node} />
+          <ConnectionSelect
+            dataSource={dataSourceId}
+            value={input.attributes.connectionId.value || null}
+            onChange={handleConnectionChange}
+          />
+        </Stack>
+      </DialogTitle>
+      <Divider />
       {dataSourceId && dataSource ? (
-        <DialogContent>
-          <Stack spacing={2} py={1}>
-            <Stack direction="row" gap={2}>
-              <NodeNameEditor node={node} />
-              <ConnectionSelect
-                dataSource={dataSourceId}
-                value={input.attributes.connectionId.value || null}
-                onChange={handleConnectionChange}
-              />
+        <DialogContent sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', p: 0 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'row', minHeight: 0 }}>
+            <Stack
+              sx={{
+                flex: 1,
+                minWidth: 0,
+                overflow: 'auto',
+                gap: 2,
+                px: 3,
+                py: 1,
+              }}
+            >
+              <ConnectionContextProvider value={queryEditorContext}>
+                <dataSource.QueryEditor
+                  connectionParams={connection?.attributes.params.value}
+                  value={{
+                    query: input.attributes.query.value,
+                    params: input.params,
+                  }}
+                  liveParams={liveParams}
+                  onChange={handleQueryChange}
+                  globalScope={pageState}
+                />
+              </ConnectionContextProvider>
+
+              <Grid container direction="row" spacing={1}>
+                {/* TODO: move transform inside of the dataSource.QueryEditor and remove the conditional */}
+                {dataSourceId === 'function' ? null : (
+                  <React.Fragment>
+                    <Divider />
+                    <Grid item xs={6}>
+                      <Stack>
+                        <FormControlLabel
+                          label="Transform response"
+                          control={
+                            <Checkbox
+                              checked={input.attributes.transformEnabled?.value ?? false}
+                              onChange={handleTransformEnabledChange}
+                              inputProps={{ 'aria-label': 'controlled' }}
+                            />
+                          }
+                        />
+
+                        <JsExpressionEditor
+                          globalScope={{}}
+                          value={
+                            input.attributes.transform?.value ?? '(data) => {\n  return data;\n}'
+                          }
+                          onChange={handleTransformFnChange}
+                          disabled={!input.attributes.transformEnabled?.value}
+                        />
+                      </Stack>
+                    </Grid>
+                  </React.Fragment>
+                )}
+              </Grid>
             </Stack>
-
-            <Divider />
-            <ConnectionContextProvider value={queryEditorContext}>
-              <dataSource.QueryEditor
-                connectionParams={connection?.attributes.params.value}
-                value={{
-                  query: input.attributes.query.value,
-                  params: input.params,
-                }}
-                liveParams={liveParams}
-                onChange={handleQueryChange}
-                globalScope={pageState}
-              />
-            </ConnectionContextProvider>
-            <Grid container direction="row" spacing={1}>
-              {/* TODO: move transform inside of the dataSource.QueryEditor and remove the conditional */}
-              {dataSourceId === 'function' ? null : (
-                <React.Fragment>
-                  <Divider />
-                  <Grid item xs={6}>
-                    <Stack>
-                      <FormControlLabel
-                        label="Transform response"
-                        control={
-                          <Checkbox
-                            checked={input.attributes.transformEnabled?.value ?? false}
-                            onChange={handleTransformEnabledChange}
-                            inputProps={{ 'aria-label': 'controlled' }}
-                          />
-                        }
-                      />
-
-                      <JsExpressionEditor
-                        globalScope={{}}
-                        value={
-                          input.attributes.transform?.value ?? '(data) => {\n  return data;\n}'
-                        }
-                        onChange={handleTransformFnChange}
-                        disabled={!input.attributes.transformEnabled?.value}
-                      />
-                    </Stack>
-                  </Grid>
-                </React.Fragment>
-              )}
-            </Grid>
             {/* TODO: move preview inside of the dataSource.QueryEditor and remove the conditional */}
             {dataSourceId === 'function' ? null : (
-              <React.Fragment>
-                <Divider />
-                <Toolbar disableGutters>
+              <Box
+                sx={{
+                  flex: 1,
+                  minWidth: 0,
+                  borderLeft: 1,
+                  borderColor: 'divider',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <Toolbar>
                   <LoadingButton
                     size="medium"
                     disabled={previewParams === paramsObject && previewQuery === input}
@@ -390,42 +412,43 @@ function QueryNodeEditorDialog<Q, P>({
                     Preview
                   </LoadingButton>
                 </Toolbar>
-                {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
-                {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
-              </React.Fragment>
+                <Box sx={{ flex: 1, minHeight: 0, px: 3, py: 1, overflow: 'auto' }}>
+                  {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
+                  {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
+                </Box>
+              </Box>
             )}
-
-            <Divider />
-            <Stack direction="row" gap={1} alignItems="center">
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={input.attributes.refetchOnWindowFocus?.value ?? true}
-                    onChange={handleRefetchOnWindowFocusChange}
-                  />
-                }
-                label="Refetch on window focus"
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={input.attributes.refetchOnReconnect?.value ?? true}
-                    onChange={handleRefetchOnReconnectChange}
-                  />
-                }
-                label="Refetch on network reconnect"
-              />
-              <TextField
-                InputProps={{
-                  startAdornment: <InputAdornment position="start">s</InputAdornment>,
-                }}
-                sx={{ maxWidth: 300 }}
-                type="number"
-                label="Refetch interval"
-                value={refetchIntervalInSeconds(input.attributes.refetchInterval?.value) ?? ''}
-                onChange={handleRefetchIntervalChange}
-              />
-            </Stack>
+          </Box>
+          <Divider />
+          <Stack direction="row" alignItems="center" sx={{ pt: 2, px: 3, gap: 2 }}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={input.attributes.refetchOnWindowFocus?.value ?? true}
+                  onChange={handleRefetchOnWindowFocusChange}
+                />
+              }
+              label="Refetch on window focus"
+            />
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={input.attributes.refetchOnReconnect?.value ?? true}
+                  onChange={handleRefetchOnReconnectChange}
+                />
+              }
+              label="Refetch on network reconnect"
+            />
+            <TextField
+              InputProps={{
+                startAdornment: <InputAdornment position="start">s</InputAdornment>,
+              }}
+              sx={{ maxWidth: 300 }}
+              type="number"
+              label="Refetch interval"
+              value={refetchIntervalInSeconds(input.attributes.refetchInterval?.value) ?? ''}
+              onChange={handleRefetchIntervalChange}
+            />
           </Stack>
         </DialogContent>
       ) : (