Bag of tweaks (#637)

* Bag of tweaks * Fix RUN button constant loading
mui · Jul 7, 2022 · 9a8a84a · 9a8a84a
1 parent 3344309
commit 9a8a84a
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 16 deletions.
diff --git a/packages/toolpad-app/pages/api/rpc.ts b/packages/toolpad-app/pages/api/rpc.ts
@@ -14,7 +14,6 @@ import {
   createRelease,
   getReleases,
   getRelease,
-  loadReleaseDom,
   createDeployment,
   findActiveDeployment,
   findLastRelease,
@@ -133,9 +132,6 @@ const rpcServer = {
     findActiveDeployment: createMethod<typeof findActiveDeployment>((params) => {
       return findActiveDeployment(...params);
     }),
-    loadReleaseDom: createMethod<typeof loadReleaseDom>((params) => {
-      return loadReleaseDom(...params);
-    }),
     loadDom: createMethod<typeof loadDom>((params) => {
       return loadDom(...params);
     }),

diff --git a/packages/toolpad-app/pages/app/[appId]/[version]/[[...path]].tsx b/packages/toolpad-app/pages/app/[appId]/[version]/[[...path]].tsx
@@ -2,10 +2,9 @@ import type { GetServerSideProps, NextPage } from 'next';
 import * as React from 'react';
 import { asArray } from '../../../../src/utils/collections';
 import ToolpadApp, { ToolpadAppProps } from '../../../../src/runtime/ToolpadApp';
-import { createRenderTree } from '../../../../src/appDom';
 
 export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async (context) => {
-  const { loadDom, parseVersion } = await import('../../../../src/server/data');
+  const { loadRenderTree, parseVersion } = await import('../../../../src/server/data');
 
   const [appId] = asArray(context.query.appId);
   const version = parseVersion(context.query.version);
@@ -15,12 +14,12 @@ export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async (co
     };
   }
 
-  const dom = await loadDom(appId, version);
+  const dom = await loadRenderTree(appId, version);
 
   return {
     props: {
       appId,
-      dom: createRenderTree(dom),
+      dom,
       version,
       basename: `/app/${appId}/${version}`,
     },

diff --git a/packages/toolpad-app/pages/deploy/[appId]/[[...path]].tsx b/packages/toolpad-app/pages/deploy/[appId]/[[...path]].tsx
@@ -2,10 +2,9 @@ import type { GetServerSideProps, NextPage } from 'next';
 import * as React from 'react';
 import { asArray } from '../../../src/utils/collections';
 import ToolpadApp, { ToolpadAppProps } from '../../../src/runtime/ToolpadApp';
-import { createRenderTree } from '../../../src/appDom';
 
 export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async (context) => {
-  const { loadDom, findActiveDeployment } = await import('../../../src/server/data');
+  const { loadRenderTree, findActiveDeployment } = await import('../../../src/server/data');
 
   const [appId] = asArray(context.query.appId);
 
@@ -25,12 +24,12 @@ export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async (co
 
   const { version } = activeDeployment;
 
-  const dom = await loadDom(appId, version);
+  const dom = await loadRenderTree(appId, version);
 
   return {
     props: {
       appId,
-      dom: createRenderTree(dom),
+      dom,
       version,
       basename: `/deploy/${appId}`,
     },

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx
@@ -287,6 +287,8 @@ function QueryNodeEditorDialog<Q, P>({
     { retry: false },
   );
 
+  const isPreviewLoading: boolean = !!previewQuery && queryPreview.isLoading;
+
   const handleUpdatePreview = React.useCallback(() => {
     setPreviewQuery(input);
     setPreviewParams(paramsObject);
@@ -404,7 +406,7 @@ function QueryNodeEditorDialog<Q, P>({
             <LoadingButton
               sx={{ ml: 2 }}
               disabled={previewParams === paramsObject && previewQuery === input}
-              loading={queryPreview.isLoading}
+              loading={isPreviewLoading}
               loadingPosition="start"
               onClick={handleUpdatePreview}
               startIcon={<PlayArrowIcon />}

diff --git a/packages/toolpad-app/src/server/data.ts b/packages/toolpad-app/src/server/data.ts
@@ -442,3 +442,10 @@ export function parseVersion(param?: string | string[]): VersionOrPreview | null
 export async function loadDom(appId: string, version: VersionOrPreview = 'preview') {
   return version === 'preview' ? loadPreviewDom(appId) : loadReleaseDom(appId, version);
 }
+
+/**
+ * Version of loadDom that returns a subset of the dom that doesn't contain sensitive information
+ */
+export async function loadRenderTree(appId: string, version: VersionOrPreview = 'preview') {
+  return appDom.createRenderTree(await loadDom(appId, version));
+}
diff --git a/packages/toolpad-app/src/utils/react.ts → packages/toolpad-app/src/utils/react.tsx b/packages/toolpad-app/src/utils/react.ts → packages/toolpad-app/src/utils/react.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
-export function createProvidedContext<T>(name: string) {
+export function createProvidedContext<T>(
+  name: string,
+): [() => T, React.ComponentType<React.ProviderProps<T>>] {
   const context = React.createContext<T | undefined>(undefined);
 
   const useContext = () => {
@@ -11,7 +13,11 @@ export function createProvidedContext<T>(name: string) {
     return maybeContext;
   };
 
-  return [useContext, context.Provider] as const;
+  const Provider = ({ value, ...props }: React.ProviderProps<T>) => {
+    return <context.Provider value={value} {...props} />;
+  };
+
+  return [useContext, Provider];
 }
 
 export function suspendPromise<T>(promise: Promise<T>): () => T {

diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
@@ -2,7 +2,7 @@
   "name": "@mui/toolpad-core",
   "version": "0.0.8",
   "description": "Build MUI apps quickly",
-  "author": "MUI Soolpad team",
+  "author": "MUI Toolpad team",
   "homepage": "https://github.com/mui/mui-toolpad#readme",
   "license": "MIT",
   "main": "dist/index.js",