From c9f813e471d437016a715d95dadd005537b5de51 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 10 Oct 2023 13:40:03 +0800 Subject: [PATCH 01/15] fix by second way --- .../src/toolpadDataSources/rest/client.tsx | 13 ++++++++----- .../src/toolpadDataSources/rest/server.ts | 4 +--- packages/toolpad-core/src/jsServerRuntime.tsx | 5 ++--- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 094deaa9765..bc542d45791 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -266,8 +266,11 @@ function QueryEditor({ }, { retry: false }, ); - const envVarNames = React.useMemo(() => introspection?.data?.envVarNames || [], [introspection]); + const envObj = React.useMemo(() => introspection?.data?.envVarNames || [], [introspection]); + + const envVarNames = React.useMemo(() => Object.keys(envObj) || [], [envObj]); + debugger; const handleParamsChange = React.useCallback( (newParams: [string, BindableAttrValue][]) => { setInput((existing) => ({ ...existing, params: newParams })); @@ -335,11 +338,10 @@ function QueryEditor({ const paramsEntries = input.params || EMPTY_PARAMS; - const jsBrowserRuntime = useBrowserJsRuntime(); - const jsServerRuntime = useServerJsRuntime(); + const jsServerRuntime = useServerJsRuntime(envObj); const paramsEditorLiveValue = useEvaluateLiveBindingEntries({ - jsRuntime: jsBrowserRuntime, + jsRuntime: jsServerRuntime, input: paramsEntries, globalScope, }); @@ -530,7 +532,8 @@ function QueryEditor({ globalScope={globalScope} globalScopeMeta={globalScopeMeta} liveValue={paramsEditorLiveValue} - jsRuntime={jsBrowserRuntime} + jsRuntime={jsServerRuntime} + envVarNames={envVarNames} /> diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts index c0a63406f9b..b950ae9876f 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts @@ -231,9 +231,7 @@ export default function createDatasource( switch (query.kind) { case 'introspection': { const env = await loadEnvFile(project); - const envVarNames = Object.keys(env); - - return { envVarNames }; + return { envVarNames: env }; } case 'debugExec': return execBase(project, connection, query.query, query.params); diff --git a/packages/toolpad-core/src/jsServerRuntime.tsx b/packages/toolpad-core/src/jsServerRuntime.tsx index 8bf525bddb3..4d787e49410 100644 --- a/packages/toolpad-core/src/jsServerRuntime.tsx +++ b/packages/toolpad-core/src/jsServerRuntime.tsx @@ -27,10 +27,9 @@ export function createServerJsRuntime(env?: Record): }; } -export function useServerJsRuntime(): JsRuntime { +export function useServerJsRuntime(processEnv: Record = {}): JsRuntime { return React.useMemo(() => { // process.env is not available in the browser - const processEnv = {}; return createServerJsRuntime(processEnv); - }, []); + }, [processEnv]); } From ceb878ef828f7b63893e3df7e0a3db3360737e50 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 11 Oct 2023 16:44:32 +0800 Subject: [PATCH 02/15] fix type error --- .../toolpad-app/src/toolpadDataSources/rest/client.tsx | 8 ++++---- packages/toolpad-app/src/toolpadDataSources/rest/types.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index bc542d45791..5e55521a7d9 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -15,7 +15,6 @@ import { } from '@mui/material'; 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'; @@ -267,10 +266,10 @@ function QueryEditor({ { retry: false }, ); - const envObj = React.useMemo(() => introspection?.data?.envVarNames || [], [introspection]); + const envObj = React.useMemo(() => introspection?.data?.envVarNames, [introspection]); + + const envVarNames = React.useMemo(() => Object.keys(envObj || {}) || [], [envObj]); - const envVarNames = React.useMemo(() => Object.keys(envObj) || [], [envObj]); - debugger; const handleParamsChange = React.useCallback( (newParams: [string, BindableAttrValue][]) => { setInput((existing) => ({ ...existing, params: newParams })); @@ -465,6 +464,7 @@ function QueryEditor({ globalScopeMeta={QUERY_SCOPE_META} liveValue={liveSearchParams} jsRuntime={jsServerRuntime} + envVarNames={envVarNames} /> diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/types.ts b/packages/toolpad-app/src/toolpadDataSources/rest/types.ts index eaf590346fd..6995e556c63 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/types.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/types.ts @@ -125,5 +125,5 @@ export interface FetchResult extends ExecFetchResult { } export type IntrospectionResult = { - envVarNames: string[]; + envVarNames: Record; }; From 60ea47ad26a0d57ba772b5e388891f9194660e98 Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 16 Oct 2023 09:46:28 +0800 Subject: [PATCH 03/15] revert --- packages/toolpad-app/src/toolpadDataSources/rest/client.tsx | 4 ++-- packages/toolpad-core/src/jsServerRuntime.tsx | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 5e55521a7d9..2e8f84921be 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -15,7 +15,7 @@ import { } from '@mui/material'; import { Controller, useForm } from 'react-hook-form'; import { TabContext, TabList } from '@mui/lab'; -import { useServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime'; +import { createServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime'; import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types'; import { @@ -337,7 +337,7 @@ function QueryEditor({ const paramsEntries = input.params || EMPTY_PARAMS; - const jsServerRuntime = useServerJsRuntime(envObj); + const jsServerRuntime = React.useMemo(() => createServerJsRuntime(envObj!), [envObj]); const paramsEditorLiveValue = useEvaluateLiveBindingEntries({ jsRuntime: jsServerRuntime, diff --git a/packages/toolpad-core/src/jsServerRuntime.tsx b/packages/toolpad-core/src/jsServerRuntime.tsx index 4d787e49410..8bf525bddb3 100644 --- a/packages/toolpad-core/src/jsServerRuntime.tsx +++ b/packages/toolpad-core/src/jsServerRuntime.tsx @@ -27,9 +27,10 @@ export function createServerJsRuntime(env?: Record): }; } -export function useServerJsRuntime(processEnv: Record = {}): JsRuntime { +export function useServerJsRuntime(): JsRuntime { return React.useMemo(() => { // process.env is not available in the browser + const processEnv = {}; return createServerJsRuntime(processEnv); - }, [processEnv]); + }, []); } From c2b15d3e0aa8dd153b080ec5fdb5015e13b1ce46 Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 16 Oct 2023 14:03:36 +0800 Subject: [PATCH 04/15] fix --- .../src/toolpad/AppEditor/BindingEditor.tsx | 22 +++++++++---------- .../AppEditor/PageEditor/BindableEditor.tsx | 6 ++--- .../AppEditor/PageEditor/ParametersEditor.tsx | 6 ++--- .../src/toolpadDataSources/rest/client.tsx | 12 ++++------ .../src/toolpadDataSources/rest/server.ts | 2 +- .../src/toolpadDataSources/rest/types.ts | 2 +- 6 files changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index e4639689097..e0b810cc2ae 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -71,7 +71,7 @@ interface BindingEditorContext { disabled?: boolean; propType?: PropValueType; liveBinding?: LiveBinding; - envVarNames?: string[]; + env?: Record; } const [useBindingEditorContext, BindingEditorContextProvider] = @@ -138,8 +138,8 @@ function JsExpressionPreview({ jsRuntime, input, globalScope }: JsExpressionPrev export interface EnvBindingEditorProps extends WithControlledProp {} export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) { - const { envVarNames = [] } = useBindingEditorContext(); - + const context = useBindingEditorContext(); + const env = Object.values(context.env ?? {}); const handleInputChange = React.useCallback( (event: React.SyntheticEvent, newValue: string | null) => { onChange({ @@ -154,7 +154,7 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) { Assign to an environment variable ( @@ -164,7 +164,7 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) { sx={{ my: 3 }} label="Environment variable name" helperText={ - value?.$$env && !envVarNames.includes(value.$$env) + value?.$$env && !env.includes(value.$$env) ? 'Warning: This variable is not in your env file!' : '' } @@ -195,10 +195,10 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito globalScopeMeta = {}, jsRuntime, propType, - envVarNames, + env, } = useBindingEditorContext(); - const hasEnv = Boolean(envVarNames); + const hasEnv = Boolean(env); const [activeTab, setActiveTab] = React.useState(getValueBindingTab(value)); React.useEffect(() => { @@ -616,7 +616,7 @@ export interface BindingEditorProps extends WithControlledProp; } export function BindingEditor({ @@ -630,7 +630,7 @@ export function BindingEditor({ value, onChange, liveBinding, - envVarNames, + env, }: BindingEditorProps) { const [open, setOpen] = React.useState(false); const handleOpen = React.useCallback(() => setOpen(true), []); @@ -687,9 +687,9 @@ export function BindingEditor({ disabled, propType, liveBinding, - envVarNames, + env, }), - [disabled, envVarNames, globalScope, jsRuntime, label, liveBinding, propType, resolvedMeta], + [disabled, env, globalScope, jsRuntime, label, liveBinding, propType, resolvedMeta], ); return ( diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx index 62a8bf9c1d4..a42526ae9a5 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx @@ -31,7 +31,7 @@ export interface BindableEditorProps extends WithControlledProp; globalScopeMeta: ScopeMeta; - envVarNames?: string[]; + env?: Record; sx?: SxProps; } @@ -47,7 +47,7 @@ export default function BindableEditor({ liveBinding, globalScope = {}, globalScopeMeta = {}, - envVarNames, + env, sx, }: BindableEditorProps) { const propTypeControls = usePropControlsContext(); @@ -103,7 +103,7 @@ export default function BindableEditor({ disabled={disabled || !bindable} hidden={!bindable} liveBinding={liveBinding} - envVarNames={envVarNames} + env={env} /> diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ParametersEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ParametersEditor.tsx index 57f6f67acfc..1f03f33dc12 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ParametersEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ParametersEditor.tsx @@ -16,7 +16,7 @@ export interface StringRecordEntriesEditorProps autoFocus?: boolean; sx?: SxProps; jsRuntime: JsRuntime; - envVarNames?: string[]; + env?: Record; disabled?: boolean; } @@ -33,7 +33,7 @@ export default function ParametersEditor({ jsRuntime, disabled, globalScopeMeta, - envVarNames, + env, }: StringRecordEntriesEditorProps) { const fieldInputRef = React.useRef(null); @@ -84,7 +84,7 @@ export default function ParametersEditor({ onChange(value.map((entry, i) => (i === index ? [entry[0], newBinding] : entry))) } disabled={disabled} - envVarNames={envVarNames} + env={env} /> diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 494f5e81f98..99134f5ec90 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -266,10 +266,7 @@ function QueryEditor({ { retry: false }, ); - const envObj = React.useMemo(() => introspection?.data?.envVarNames, [introspection]); - - const envVarNames = React.useMemo(() => Object.keys(envObj || {}) || [], [envObj]); - + const env = React.useMemo(() => introspection?.data?.env, [introspection]); const handleParamsChange = React.useCallback( (newParams: [string, BindableAttrValue][]) => { setInput((existing) => ({ ...existing, params: newParams })); @@ -337,7 +334,7 @@ function QueryEditor({ const paramsEntries = input.params || EMPTY_PARAMS; - const jsServerRuntime = React.useMemo(() => createServerJsRuntime(envObj!), [envObj]); + const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env!), [env]); const paramsEditorLiveValue = useEvaluateLiveBindingEntries({ jsRuntime: jsServerRuntime, @@ -464,7 +461,6 @@ function QueryEditor({ globalScopeMeta={QUERY_SCOPE_META} liveValue={liveSearchParams} jsRuntime={jsServerRuntime} - envVarNames={envVarNames} /> @@ -484,7 +480,7 @@ function QueryEditor({ globalScopeMeta={QUERY_SCOPE_META} liveValue={liveHeaders} jsRuntime={jsServerRuntime} - envVarNames={envVarNames} + env={env} /> @@ -533,7 +529,7 @@ function QueryEditor({ globalScopeMeta={globalScopeMeta} liveValue={paramsEditorLiveValue} jsRuntime={jsServerRuntime} - envVarNames={envVarNames} + env={env} /> diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts index 029a0aa92ec..f565190ba11 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts @@ -232,7 +232,7 @@ export default function createDatasource( switch (query.kind) { case 'introspection': { const env = await loadEnvFile(project); - return { envVarNames: env }; + return { env }; } case 'debugExec': return execBase(project, connection, query.query, query.params); diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/types.ts b/packages/toolpad-app/src/toolpadDataSources/rest/types.ts index 6995e556c63..f7ea42e80e4 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/types.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/types.ts @@ -125,5 +125,5 @@ export interface FetchResult extends ExecFetchResult { } export type IntrospectionResult = { - envVarNames: Record; + env: Record; }; From 4605334ab6b4a2f06d57968d346af3caf0d4b7b5 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 17 Oct 2023 17:19:30 +0800 Subject: [PATCH 05/15] fix --- .../toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index e0b810cc2ae..a1a08771e60 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx @@ -139,7 +139,7 @@ export interface EnvBindingEditorProps extends WithControlledProp { onChange({ @@ -154,7 +154,7 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) { Assign to an environment variable ( @@ -164,7 +164,7 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) { sx={{ my: 3 }} label="Environment variable name" helperText={ - value?.$$env && !env.includes(value.$$env) + value?.$$env && !envVarNames.includes(value.$$env) ? 'Warning: This variable is not in your env file!' : '' } From 4f691d59e3638992ce2d4eeeff536ed7e1b27e6c Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 18 Oct 2023 13:57:07 +0800 Subject: [PATCH 06/15] fix --- .../AppEditor/useEvaluateLiveBinding.ts | 11 +++++++++ .../src/toolpadDataSources/rest/client.tsx | 9 +++---- .../fixture/toolpad/pages/ddd/page.yml | 24 +++++++++++++++++++ 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml diff --git a/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts b/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts index 796f7f0504d..1da718b07a2 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts +++ b/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts @@ -76,3 +76,14 @@ export function useEvaluateLiveBindingEntries({ return evaluateBindableAttrEntries(jsRuntime, input, globalScope); }, [jsRuntime, input, globalScope]); } + +export function evaluateBindableAttrLArray( + jsRuntime: JsRuntime, + input: BindableAttrEntries, + globalScope: Record, +): [string, string | unknown][] { + return input.map(([key, bindable]) => { + const { value } = evaluateBindable(jsRuntime, bindable || null, globalScope); + return [key, value]; + }); +} diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 99134f5ec90..28b538ba79e 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -34,6 +34,7 @@ import BindableEditor, { import { useEvaluateLiveBinding, useEvaluateLiveBindingEntries, + evaluateBindableAttrLArray, } from '../../toolpad/AppEditor/useEvaluateLiveBinding'; import MapEntriesEditor from '../../components/MapEntriesEditor'; import { Maybe } from '../../utils/types'; @@ -267,11 +268,13 @@ function QueryEditor({ ); const env = React.useMemo(() => introspection?.data?.env, [introspection]); + const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env!), [env]); const handleParamsChange = React.useCallback( (newParams: [string, BindableAttrValue][]) => { - setInput((existing) => ({ ...existing, params: newParams })); + const newValue = evaluateBindableAttrLArray(jsServerRuntime, newParams, env!); + setInput((existing) => ({ ...existing, params: newValue })); }, - [setInput], + [setInput, env, jsServerRuntime], ); const handleUrlChange = React.useCallback( @@ -334,8 +337,6 @@ function QueryEditor({ const paramsEntries = input.params || EMPTY_PARAMS; - const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env!), [env]); - const paramsEditorLiveValue = useEvaluateLiveBindingEntries({ jsRuntime: jsServerRuntime, input: paramsEntries, diff --git a/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml new file mode 100644 index 00000000000..f463349786e --- /dev/null +++ b/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml @@ -0,0 +1,24 @@ +apiVersion: v1 +kind: page +spec: + id: 4B1b643 + title: ddd + display: shell + queries: + - name: query + query: + kind: rest + searchParams: + - name: sd + value: + $$jsExpression: | + `dd${parameters.sd}` + headers: + - name: dd + value: + $$jsExpression: | + `cc:${parameters.sd}` + method: GET + parameters: + - name: sd + value: Some bar secret From ebc73a450a433eab3275978d7cb7532e67f952cd Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 18 Oct 2023 14:40:32 +0800 Subject: [PATCH 07/15] fix --- .../fixture/toolpad/pages/ddd/page.yml | 24 ------------------- 1 file changed, 24 deletions(-) delete mode 100644 test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml diff --git a/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml deleted file mode 100644 index f463349786e..00000000000 --- a/test/integration/backend-basic/fixture/toolpad/pages/ddd/page.yml +++ /dev/null @@ -1,24 +0,0 @@ -apiVersion: v1 -kind: page -spec: - id: 4B1b643 - title: ddd - display: shell - queries: - - name: query - query: - kind: rest - searchParams: - - name: sd - value: - $$jsExpression: | - `dd${parameters.sd}` - headers: - - name: dd - value: - $$jsExpression: | - `cc:${parameters.sd}` - method: GET - parameters: - - name: sd - value: Some bar secret From 8e97f54d6d52ffd75a28cfc2eae10df2664fbfcf Mon Sep 17 00:00:00 2001 From: wuls Date: Fri, 20 Oct 2023 09:51:24 +0800 Subject: [PATCH 08/15] fix --- .../src/toolpad/AppEditor/useEvaluateLiveBinding.ts | 11 ----------- .../src/toolpadDataSources/rest/client.tsx | 7 +++---- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts b/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts index 1da718b07a2..796f7f0504d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts +++ b/packages/toolpad-app/src/toolpad/AppEditor/useEvaluateLiveBinding.ts @@ -76,14 +76,3 @@ export function useEvaluateLiveBindingEntries({ return evaluateBindableAttrEntries(jsRuntime, input, globalScope); }, [jsRuntime, input, globalScope]); } - -export function evaluateBindableAttrLArray( - jsRuntime: JsRuntime, - input: BindableAttrEntries, - globalScope: Record, -): [string, string | unknown][] { - return input.map(([key, bindable]) => { - const { value } = evaluateBindable(jsRuntime, bindable || null, globalScope); - return [key, value]; - }); -} diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index 28b538ba79e..b1c10cd337a 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -268,13 +268,11 @@ function QueryEditor({ ); const env = React.useMemo(() => introspection?.data?.env, [introspection]); - const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env!), [env]); const handleParamsChange = React.useCallback( (newParams: [string, BindableAttrValue][]) => { - const newValue = evaluateBindableAttrLArray(jsServerRuntime, newParams, env!); - setInput((existing) => ({ ...existing, params: newValue })); + setInput((existing) => ({ ...existing, params: newParams })); }, - [setInput, env, jsServerRuntime], + [setInput], ); const handleUrlChange = React.useCallback( @@ -336,6 +334,7 @@ function QueryEditor({ ); const paramsEntries = input.params || EMPTY_PARAMS; + const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env ?? {}), [env]); const paramsEditorLiveValue = useEvaluateLiveBindingEntries({ jsRuntime: jsServerRuntime, From 81c5f7579ff6d7bbc2052ed30f38832b9caff15f Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 24 Oct 2023 11:06:08 +0800 Subject: [PATCH 09/15] fix --- .../toolpad-app/src/runtime/ToolpadApp.tsx | 7 +++++++ .../src/toolpadDataSources/rest/client.tsx | 1 - .../fixture/toolpad/pages/dddd/page.yml | 21 +++++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 48d23191999..a6e6016bb8b 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -376,6 +376,13 @@ function parseBinding( result: { value: bindable }, }; } + + if (bindingType === 'env') { + return { + scopePath, + result: { value: bindable }, + }; + } if (bindingType === 'jsExpression') { return { scopePath, diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx index b1c10cd337a..ef59a0e469d 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/rest/client.tsx @@ -34,7 +34,6 @@ import BindableEditor, { import { useEvaluateLiveBinding, useEvaluateLiveBindingEntries, - evaluateBindableAttrLArray, } from '../../toolpad/AppEditor/useEvaluateLiveBinding'; import MapEntriesEditor from '../../components/MapEntriesEditor'; import { Maybe } from '../../utils/types'; diff --git a/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml new file mode 100644 index 00000000000..c0138d69bb7 --- /dev/null +++ b/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml @@ -0,0 +1,21 @@ +apiVersion: v1 +kind: page +spec: + id: yoPDDda + title: dddd + display: shell + queries: + - name: query + query: + kind: rest + headers: [{ name: jjj, value: '111' }] + method: GET + searchParams: + - name: ddd + value: + $$jsExpression: | + `cc:${parameters.ccc}` + parameters: + - name: ccc + value: + $$env: SECRET_BAR From 3fb2462bbac5f53aa54de8d5ddc6017170804627 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 24 Oct 2023 17:29:04 +0800 Subject: [PATCH 10/15] fix --- .../src/toolpadDataSources/rest/server.ts | 10 +++++---- .../fixture/toolpad/pages/dddd/page.yml | 21 ------------------- 2 files changed, 6 insertions(+), 25 deletions(-) delete mode 100644 test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts index f565190ba11..5f9bd0e26fe 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts @@ -137,20 +137,22 @@ async function execBase( connection: Maybe, fetchQuery: FetchQuery, params: Record, + envParams?: Record, ): Promise { const har = createHarLog(); const instrumentedFetch = withHarInstrumentation(fetch, { har }); const jsRuntime = createServerJsRuntime(process.env); + const parameter = resolveBindableEntries(jsRuntime, Object.entries(params), envParams!); + const queryScope = { // @TODO: remove deprecated query after v1 query: params, - parameters: params, + parameters: Object.fromEntries(parameter), }; const runtimeConfig = await project.getRuntimeConfig(); const urlvalue = fetchQuery.url || getDefaultUrl(runtimeConfig, connection); - const resolvedUrl = resolveBindable(jsRuntime, urlvalue, queryScope); const resolvedSearchParams = resolveBindableEntries( jsRuntime, @@ -211,7 +213,6 @@ async function execBase( } catch (rawError) { error = serializeError(errorFrom(rawError)); } - return { data, untransformedData, error, har }; } @@ -224,7 +225,8 @@ export default function createDatasource( fetchQuery: FetchQuery, params: Record, ): Promise> { - const { data, error } = await execBase(project, connection, fetchQuery, params); + const env = await loadEnvFile(project); + const { data, error } = await execBase(project, connection, fetchQuery, params, env); return { data, error }; }, diff --git a/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml b/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml deleted file mode 100644 index c0138d69bb7..00000000000 --- a/test/integration/backend-basic/fixture/toolpad/pages/dddd/page.yml +++ /dev/null @@ -1,21 +0,0 @@ -apiVersion: v1 -kind: page -spec: - id: yoPDDda - title: dddd - display: shell - queries: - - name: query - query: - kind: rest - headers: [{ name: jjj, value: '111' }] - method: GET - searchParams: - - name: ddd - value: - $$jsExpression: | - `cc:${parameters.ccc}` - parameters: - - name: ccc - value: - $$env: SECRET_BAR From e116cf5be5e32e325227e753fdea61b7583fc5d5 Mon Sep 17 00:00:00 2001 From: wuls Date: Thu, 26 Oct 2023 16:48:56 +0800 Subject: [PATCH 11/15] fix --- .../toolpad-app/src/toolpadDataSources/rest/server.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts index 5f9bd0e26fe..ccedc8c5995 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts @@ -136,19 +136,17 @@ async function execBase( project: IToolpadProject, connection: Maybe, fetchQuery: FetchQuery, - params: Record, - envParams?: Record, + params: BindableAttrValue, ): Promise { const har = createHarLog(); const instrumentedFetch = withHarInstrumentation(fetch, { har }); const jsRuntime = createServerJsRuntime(process.env); - - const parameter = resolveBindableEntries(jsRuntime, Object.entries(params), envParams!); + const resolvedParams = resolveBindableEntries(jsRuntime, Object.entries(params), {}); const queryScope = { // @TODO: remove deprecated query after v1 query: params, - parameters: Object.fromEntries(parameter), + parameters: Object.fromEntries(resolvedParams), }; const runtimeConfig = await project.getRuntimeConfig(); @@ -225,8 +223,7 @@ export default function createDatasource( fetchQuery: FetchQuery, params: Record, ): Promise> { - const env = await loadEnvFile(project); - const { data, error } = await execBase(project, connection, fetchQuery, params, env); + const { data, error } = await execBase(project, connection, fetchQuery, params); return { data, error }; }, From 7e237f7b2080f913103a8c9f38e5aedbd63359ff Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 30 Oct 2023 16:52:31 +0800 Subject: [PATCH 12/15] display undefined if the variable included variable env --- .../toolpad/AppEditor/GlobalScopeExplorer.tsx | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx index bf23cc198c5..0ce7f44c004 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx @@ -54,10 +54,28 @@ function groupScopeMeta(value: Record, meta: ScopeMeta): Explor structure[group].items.push({ ...metaField, key, - value: value[key], + value: Object.keys(value?.[key]!).reduce((obj, keyname) => { + const o = (value?.[key] as Record)?.[keyname] as + | Record + | undefined; + const paramObj = Object.keys(o ?? {}); + if (paramObj.length > 0) { + const m = paramObj.reduce((a, k) => { + if ((o?.[k] as Record)?.$$env) { + a[k] = undefined; + } else { + a[k] = o?.[k]; + } + return a; + }, {} as Record); + obj[keyname] = m; + } else { + obj[keyname] = o; + } + return obj; + }, {} as Record), }); } - return structure; } From c2d5bbfb197dcef1adec7580d7bbd9298f64dba7 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 31 Oct 2023 13:13:13 +0800 Subject: [PATCH 13/15] optimized my code --- .../toolpad/AppEditor/GlobalScopeExplorer.tsx | 34 ++++++++----------- .../src/toolpadDataSources/rest/server.ts | 2 +- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx index 0ce7f44c004..f2a864bb2c5 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx @@ -54,26 +54,20 @@ function groupScopeMeta(value: Record, meta: ScopeMeta): Explor structure[group].items.push({ ...metaField, key, - value: Object.keys(value?.[key]!).reduce((obj, keyname) => { - const o = (value?.[key] as Record)?.[keyname] as - | Record - | undefined; - const paramObj = Object.keys(o ?? {}); - if (paramObj.length > 0) { - const m = paramObj.reduce((a, k) => { - if ((o?.[k] as Record)?.$$env) { - a[k] = undefined; - } else { - a[k] = o?.[k]; - } - return a; - }, {} as Record); - obj[keyname] = m; - } else { - obj[keyname] = o; - } - return obj; - }, {} as Record), + value: Object.fromEntries( + Object.entries(value?.[key] ?? {}).map(([keyname, o]) => { + if (Object.keys(o ?? {}).length > 0) { + const filteredObj = Object.fromEntries( + Object.entries(o).map(([k, v]) => [ + k, + (v as Record)?.$$env ? undefined : v, + ]), + ); + return [keyname, filteredObj]; + } + return [keyname, o]; + }), + ), }); } return structure; diff --git a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts index ccedc8c5995..bf490d91609 100644 --- a/packages/toolpad-app/src/toolpadDataSources/rest/server.ts +++ b/packages/toolpad-app/src/toolpadDataSources/rest/server.ts @@ -136,7 +136,7 @@ async function execBase( project: IToolpadProject, connection: Maybe, fetchQuery: FetchQuery, - params: BindableAttrValue, + params: Record>, ): Promise { const har = createHarLog(); const instrumentedFetch = withHarInstrumentation(fetch, { har }); From 9c91fb3a0f619805c765fa1813b847ace91825b5 Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 6 Nov 2023 18:19:24 +0800 Subject: [PATCH 14/15] fix --- .../src/toolpad/AppEditor/GlobalScopeExplorer.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx index f2a864bb2c5..4f77fdb22c7 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx @@ -56,12 +56,9 @@ function groupScopeMeta(value: Record, meta: ScopeMeta): Explor key, value: Object.fromEntries( Object.entries(value?.[key] ?? {}).map(([keyname, o]) => { - if (Object.keys(o ?? {}).length > 0) { + if (Object.prototype.toString.call(value) === '[object Object]') { const filteredObj = Object.fromEntries( - Object.entries(o).map(([k, v]) => [ - k, - (v as Record)?.$$env ? undefined : v, - ]), + Object.entries(o).filter(([k, v]) => !(v as Record)?.$$env), ); return [keyname, filteredObj]; } From 1517841493895d45e869df3dd3ff17bea3f4392d Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 7 Nov 2023 14:37:26 +0800 Subject: [PATCH 15/15] fix --- packages/toolpad-app/src/runtime/evalJsBindings.ts | 6 +++--- .../src/toolpad/AppEditor/GlobalScopeExplorer.tsx | 12 +----------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/toolpad-app/src/runtime/evalJsBindings.ts b/packages/toolpad-app/src/runtime/evalJsBindings.ts index 9563d9d1e62..989f1df0c2c 100644 --- a/packages/toolpad-app/src/runtime/evalJsBindings.ts +++ b/packages/toolpad-app/src/runtime/evalJsBindings.ts @@ -3,7 +3,7 @@ import { mapValues } from '@mui/toolpad-utils/collections'; // TODO: remove these lodash-es imports // eslint-disable-next-line no-restricted-imports import { setWith, clone, set as setObjectPath } from 'lodash-es'; - +import { getBindingType } from './bindings'; /** * Updates an object's property value for a given path in an immutable way. */ @@ -116,8 +116,8 @@ export function buildGlobalScope( ): Record { const globalScope = { ...base }; for (const binding of Object.values(bindings)) { - if (binding.scopePath) { - const value = binding.result?.value; + const value = binding.result?.value; + if (binding.scopePath && getBindingType(value) === 'const') { setObjectPath(globalScope, binding.scopePath, value); } } diff --git a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx index 4f77fdb22c7..7d04a104d6b 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/GlobalScopeExplorer.tsx @@ -54,17 +54,7 @@ function groupScopeMeta(value: Record, meta: ScopeMeta): Explor structure[group].items.push({ ...metaField, key, - value: Object.fromEntries( - Object.entries(value?.[key] ?? {}).map(([keyname, o]) => { - if (Object.prototype.toString.call(value) === '[object Object]') { - const filteredObj = Object.fromEntries( - Object.entries(o).filter(([k, v]) => !(v as Record)?.$$env), - ); - return [keyname, filteredObj]; - } - return [keyname, o]; - }), - ), + value: value[key], }); } return structure;