From d833333c870536ba083d99ce16f2e636083ca6f2 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Mon, 20 Jun 2022 11:18:39 +0200
Subject: [PATCH 1/4] setting editingTitle to false does not blur input

---
 packages/toolpad-app/src/components/Home.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/toolpad-app/src/components/Home.tsx b/packages/toolpad-app/src/components/Home.tsx
index 6d77131af6a..1ff8e9eaff8 100644
--- a/packages/toolpad-app/src/components/Home.tsx
+++ b/packages/toolpad-app/src/components/Home.tsx
@@ -215,9 +215,10 @@ function AppCard({ app, onDelete }: AppCardProps) {
       }
       if (event.key === 'Enter') {
         setEditingTitle(false);
+        handleAppRename((event.target as HTMLInputElement).value);
       }
     },
-    [app?.name],
+    [app?.name, handleAppRename],
   );
 
   React.useEffect(() => {

From dd544416de6148e56a0b5bf80c5c2f293a18aaef Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Mon, 11 Jul 2022 20:07:49 +0530
Subject: [PATCH 2/4] Small styling improvements

---
 .../AppEditor/PageEditor/QueryEditor.tsx      |  9 +++----
 .../toolpad-app/src/components/JsonView.tsx   | 24 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index c1e52a0e8bb..9d574dce005 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -404,25 +404,26 @@ function QueryNodeEditorDialog<Q, P>({
             </Grid>
             <Divider />
             <Toolbar disableGutters>
-              preview
               <LoadingButton
                 sx={{ ml: 2 }}
+                size="medium"
                 disabled={previewParams === paramsObject && previewQuery === input}
                 loading={isPreviewLoading}
                 loadingPosition="start"
+                variant="contained"
                 onClick={handleUpdatePreview}
                 startIcon={<PlayArrowIcon />}
               >
-                Run
+                Preview
               </LoadingButton>
             </Toolbar>
             {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
-            {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
+            {queryPreview.isSuccess ? <JsonView sx={{ ml: 2 }} src={queryPreview.data} /> : null}
           </Stack>
         </DialogContent>
       ) : (
         <DialogContent>
-          <Alert severity="error">DataSource &quot;{dataSourceId}&quot; not found</Alert>
+          <Alert severity="error">DaPtaSource &quot;{dataSourceId}&quot; not found</Alert>
         </DialogContent>
       )}
       <DialogActions>
diff --git a/packages/toolpad-app/src/components/JsonView.tsx b/packages/toolpad-app/src/components/JsonView.tsx
index 853c5e51763..fd1a9d6b109 100644
--- a/packages/toolpad-app/src/components/JsonView.tsx
+++ b/packages/toolpad-app/src/components/JsonView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps, styled } from '@mui/material';
 import { ObjectInspector, ObjectInspectorProps, ObjectValue, ObjectLabel } from 'react-inspector';
 
 const nodeRenderer: ObjectInspectorProps['nodeRenderer'] = ({
@@ -14,21 +15,28 @@ const nodeRenderer: ObjectInspectorProps['nodeRenderer'] = ({
   );
 };
 
+const JsonViewRoot = styled('div')({
+  whiteSpace: 'nowrap',
+});
+
 export interface JsonViewProps {
   src: unknown;
+  sx?: SxProps;
 }
 
-export default function JsonView({ src }: JsonViewProps) {
+export default function JsonView({ src, sx }: JsonViewProps) {
   // TODO: elaborate on this to show a nice default, but avoid expanding massive amount of objects
   const expandPaths = Array.isArray(src) ? ['$', '$.0', '$.1', '$.2', '$.3', '$.4'] : undefined;
   return (
-    <div style={{ whiteSpace: 'nowrap' }}>
-      <ObjectInspector
-        nodeRenderer={nodeRenderer}
-        expandLevel={1}
-        expandPaths={expandPaths}
-        data={src}
-      />
+    <div>
+      <JsonViewRoot sx={sx}>
+        <ObjectInspector
+          nodeRenderer={nodeRenderer}
+          expandLevel={1}
+          expandPaths={expandPaths}
+          data={src}
+        />
+      </JsonViewRoot>
     </div>
   );
 }

From b5a186f6e7eb67fac28909b591ebb29226d6b7f5 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Mon, 11 Jul 2022 18:18:23 +0200
Subject: [PATCH 3/4] sort out spacing issue with Stack

---
 .../AppEditor/PageEditor/QueryEditor.tsx       |  3 +--
 .../toolpad-app/src/components/JsonView.tsx    | 18 ++++++++----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index 9d574dce005..15f0ef782c5 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -321,7 +321,7 @@ function QueryNodeEditorDialog<Q, P>({
       <DialogTitle>Edit Query ({node.id})</DialogTitle>
       {dataSourceId && dataSource ? (
         <DialogContent>
-          <Stack spacing={1} py={1} gap={2}>
+          <Stack spacing={2} py={1}>
             <Stack direction="row" gap={2}>
               <NodeNameEditor node={node} />
               <ConnectionSelect
@@ -405,7 +405,6 @@ function QueryNodeEditorDialog<Q, P>({
             <Divider />
             <Toolbar disableGutters>
               <LoadingButton
-                sx={{ ml: 2 }}
                 size="medium"
                 disabled={previewParams === paramsObject && previewQuery === input}
                 loading={isPreviewLoading}
diff --git a/packages/toolpad-app/src/components/JsonView.tsx b/packages/toolpad-app/src/components/JsonView.tsx
index fd1a9d6b109..156296af5b7 100644
--- a/packages/toolpad-app/src/components/JsonView.tsx
+++ b/packages/toolpad-app/src/components/JsonView.tsx
@@ -28,15 +28,13 @@ export default function JsonView({ src, sx }: JsonViewProps) {
   // TODO: elaborate on this to show a nice default, but avoid expanding massive amount of objects
   const expandPaths = Array.isArray(src) ? ['$', '$.0', '$.1', '$.2', '$.3', '$.4'] : undefined;
   return (
-    <div>
-      <JsonViewRoot sx={sx}>
-        <ObjectInspector
-          nodeRenderer={nodeRenderer}
-          expandLevel={1}
-          expandPaths={expandPaths}
-          data={src}
-        />
-      </JsonViewRoot>
-    </div>
+    <JsonViewRoot sx={sx}>
+      <ObjectInspector
+        nodeRenderer={nodeRenderer}
+        expandLevel={1}
+        expandPaths={expandPaths}
+        data={src}
+      />
+    </JsonViewRoot>
   );
 }

From 2db8e2237b3e3ffd6d43db26f34d0fac46bf931e Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Mon, 11 Jul 2022 18:19:50 +0200
Subject: [PATCH 4/4] Remove left margin on jsonview as well

---
 .../src/components/AppEditor/PageEditor/QueryEditor.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
index 15f0ef782c5..a61757a5afd 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -417,7 +417,7 @@ function QueryNodeEditorDialog<Q, P>({
               </LoadingButton>
             </Toolbar>
             {queryPreview.error ? <ErrorAlert error={queryPreview.error} /> : null}
-            {queryPreview.isSuccess ? <JsonView sx={{ ml: 2 }} src={queryPreview.data} /> : null}
+            {queryPreview.isSuccess ? <JsonView src={queryPreview.data} /> : null}
           </Stack>
         </DialogContent>
       ) : (