Allow binding query parameters to environment variables

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,

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx

@@ -71,7 +71,7 @@ interface BindingEditorContext {
  disabled?: boolean;
  propType?: PropValueType;
  liveBinding?: LiveBinding;
- envVarNames?: string[];
+ env?: Record<string, string>;
 }
 
 const [useBindingEditorContext, BindingEditorContextProvider] =
@@ -138,8 +138,8 @@ function JsExpressionPreview({ jsRuntime, input, globalScope }: JsExpressionPrev
 export interface EnvBindingEditorProps extends WithControlledProp<EnvAttrValue | null> {}
 
 export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) {
- const { envVarNames = [] } = useBindingEditorContext();
-
+ const context = useBindingEditorContext();
+ const envVarNames = Object.keys(context.env ?? {});
  const handleInputChange = React.useCallback(
  (event: React.SyntheticEvent, newValue: string | null) => {
  onChange({
@@ -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<BindableType>(getValueBindingTab(value));
  React.useEffect(() => {
@@ -616,7 +616,7 @@ export interface BindingEditorProps<V> extends WithControlledProp<BindableAttrVa
  hidden?: boolean;
  propType?: PropValueType;
  liveBinding?: LiveBinding;
- envVarNames?: string[];
+ env?: Record<string, string>;
 }
 
 export function BindingEditor<V>({
@@ -630,7 +630,7 @@ export function BindingEditor<V>({
  value,
  onChange,
  liveBinding,
- envVarNames,
+ env,
 }: BindingEditorProps<V>) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = React.useCallback(() => setOpen(true), []);
@@ -687,9 +687,9 @@ export function BindingEditor<V>({
  disabled,
  propType,
  liveBinding,
- envVarNames,
+ env,
  }),
- [disabled, envVarNames, globalScope, jsRuntime, label, liveBinding, propType, resolvedMeta],
+ [disabled, env, globalScope, jsRuntime, label, liveBinding, propType, resolvedMeta],
  );
 
  return (

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx

@@ -31,7 +31,7 @@ export interface BindableEditorProps<V> extends WithControlledProp<BindableAttrV
  liveBinding?: LiveBinding;
  globalScope?: Record<string, unknown>;
  globalScopeMeta: ScopeMeta;
- envVarNames?: string[];
+ env?: Record<string, string>;
  sx?: SxProps;
 }
 
@@ -47,7 +47,7 @@ export default function BindableEditor<V>({
  liveBinding,
  globalScope = {},
  globalScopeMeta = {},
- envVarNames,
+ env,
  sx,
 }: BindableEditorProps<V>) {
  const propTypeControls = usePropControlsContext();
@@ -103,7 +103,7 @@ export default function BindableEditor<V>({
  disabled={disabled || !bindable}
  hidden={!bindable}
  liveBinding={liveBinding}
- envVarNames={envVarNames}
+ env={env}
  />
  </React.Fragment>
  </Stack>

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<string, string>;
  disabled?: boolean;
 }
 
@@ -33,7 +33,7 @@ export default function ParametersEditor({
  jsRuntime,
  disabled,
  globalScopeMeta,
- envVarNames,
+ env,
 }: StringRecordEntriesEditorProps) {
  const fieldInputRef = React.useRef<HTMLInputElement>(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}
  />
 
  <IconButton aria-label="Delete property" onClick={handleRemove(index)}>

packages/toolpad-app/src/toolpadDataSources/rest/client.tsx

@@ -15,8 +15,7 @@ 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 { createServerJsRuntime } from '@mui/toolpad-core/jsServerRuntime';
 import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels';
 import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types';
 import {
@@ -266,8 +265,8 @@ function QueryEditor({
  },
  { retry: false },
  );
- const envVarNames = React.useMemo(() => introspection?.data?.envVarNames || [], [introspection]);
 
+ const env = React.useMemo(() => introspection?.data?.env, [introspection]);
  const handleParamsChange = React.useCallback(
  (newParams: [string, BindableAttrValue<string>][]) => {
  setInput((existing) => ({ ...existing, params: newParams }));
@@ -334,12 +333,10 @@ function QueryEditor({
  );
 
  const paramsEntries = input.params || EMPTY_PARAMS;
-
- const jsBrowserRuntime = useBrowserJsRuntime();
- const jsServerRuntime = useServerJsRuntime();
+ const jsServerRuntime = React.useMemo(() => createServerJsRuntime(env ?? {}), [env]);
 
  const paramsEditorLiveValue = useEvaluateLiveBindingEntries({
- jsRuntime: jsBrowserRuntime,
+ jsRuntime: jsServerRuntime,
  input: paramsEntries,
  globalScope,
  });
@@ -482,7 +479,7 @@ function QueryEditor({
  globalScopeMeta={QUERY_SCOPE_META}
  liveValue={liveHeaders}
  jsRuntime={jsServerRuntime}
- envVarNames={envVarNames}
+ env={env}
  />
  </TabPanel>
  <TabPanel disableGutters value="response">
@@ -530,7 +527,8 @@ function QueryEditor({
  globalScope={globalScope}
  globalScopeMeta={globalScopeMeta}
  liveValue={paramsEditorLiveValue}
- jsRuntime={jsBrowserRuntime}
+ jsRuntime={jsServerRuntime}
+ env={env}
  />
  </Box>
  </Panel>

packages/toolpad-app/src/toolpadDataSources/rest/server.ts

@@ -137,20 +137,22 @@ async function execBase(
  connection: Maybe<RestConnectionParams>,
  fetchQuery: FetchQuery,
  params: Record<string, string>,
+ envParams?: Record<string, string>,
 ): Promise<FetchResult> {
  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,17 +225,16 @@ export default function createDatasource(
  fetchQuery: FetchQuery,
  params: Record<string, string>,
  ): Promise<ExecFetchResult<any>> {
- 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 };
  },
 
  async execPrivate(connection: Maybe<RestConnectionParams>, query: FetchPrivateQuery) {
  switch (query.kind) {
  case 'introspection': {
  const env = await loadEnvFile(project);
- const envVarNames = Object.keys(env);
-
- return { envVarNames };
+ return { env };
  }
  case 'debugExec':
  return execBase(project, connection, query.query, query.params);

packages/toolpad-app/src/toolpadDataSources/rest/types.ts

@@ -125,5 +125,5 @@ export interface FetchResult extends ExecFetchResult<any> {
 }
 
 export type IntrospectionResult = {
- envVarNames: string[];
+ env: Record<string, string>;
 };