Preview query button (#647)

* setting editingTitle to false does not blur input * Small styling improvements * sort out spacing issue with Stack * Remove left margin on jsonview as well Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
mui · Jul 12, 2022 · a5de5e2 · a5de5e2
1 parent 2676597
commit a5de5e2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -404,16 +404,16 @@ 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}
@@ -422,7 +422,7 @@ function QueryNodeEditorDialog<Q, P>({
         </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
@@ -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,26 @@ 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' }}>
+    <JsonViewRoot sx={sx}>
       <ObjectInspector
         nodeRenderer={nodeRenderer}
         expandLevel={1}
         expandPaths={expandPaths}
         data={src}
       />
-    </div>
+    </JsonViewRoot>
   );
 }