Fix environment binding preview

packages/toolpad-studio/src/server/EnvManager.ts

@@ -96,8 +96,8 @@ export default class EnvManager {
  this.watcher.on('change', handleChange);
  }
 
- async getDeclaredValues(): Promise<Record<string, string>> {
- return this.values;
+ async getDeclaredKeys(): Promise<string[]> {
+ return Object.keys(this.values);
  }
 
  // eslint-disable-next-line class-methods-use-this

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

@@ -63,14 +63,12 @@ interface BindingEditorContext {
  label: string;
  globalScope: Record<string, unknown>;
  globalScopeMeta: ScopeMeta;
- /**
- * Serverside binding, use the QuickJs runtime to evaluate bindings
- */
  jsRuntime: JsRuntime;
  disabled?: boolean;
  propType?: PropValueType;
  liveBinding?: LiveBinding;
- env?: Record<string, string>;
+ env: Record<string, string | undefined>;
+ declaredEnvKeys: string[];
 }
 
 const [useBindingEditorContext, BindingEditorContextProvider] =
@@ -137,13 +135,10 @@ function JsExpressionPreview({ jsRuntime, input, globalScope }: JsExpressionPrev
 export interface EnvBindingEditorProps extends WithControlledProp<EnvAttrValue | null> {}
 
 export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) {
- const context = useBindingEditorContext();
- const envVarNames = Object.keys(context.env ?? {});
+ const { declaredEnvKeys, env } = useBindingEditorContext();
  const handleInputChange = React.useCallback(
  (event: React.SyntheticEvent, newValue: string | null) => {
- onChange({
- $$env: newValue || '',
- });
+ onChange({ $$env: newValue || '' });
  },
  [onChange],
  );
@@ -153,7 +148,7 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) {
  <Typography>Assign to an environment variable</Typography>
  <Autocomplete
  freeSolo
- options={envVarNames}
+ options={declaredEnvKeys}
  value={value?.$$env || ''}
  onInputChange={handleInputChange}
  renderInput={(params) => (
@@ -163,23 +158,25 @@ export function EnvBindingEditor({ value, onChange }: EnvBindingEditorProps) {
  sx={{ my: 3 }}
  label="Environment variable name"
  helperText={
- value?.$$env && !envVarNames.includes(value.$$env)
+ value?.$$env && !declaredEnvKeys.includes(value.$$env)
  ? 'Warning: This variable is not in your env file!'
  : ''
  }
  />
  )}
  />
+ Value:
+ <JsonView sx={{ flex: 1 }} src={value?.$$env ? env[value?.$$env] : undefined} />
  </Box>
  );
 }
 
 function getValueBindingTab(value: Maybe<BindableAttrValue<any>>) {
- if (value?.$$env) {
- return 'env';
+ if (value?.$$env === undefined) {
+ return 'jsExpression';
  }
 
- return 'jsExpression';
+ return 'env';
 }
 
 export interface ValueBindingEditorProps
@@ -207,6 +204,7 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito
  const handleTabChange = (event: React.SyntheticEvent, newValue: BindableType) => {
  setActiveTab(newValue);
  };
+
  const jsExpressionBindingEditor = (
  <Stack direction="row" sx={{ height: 400, gap: 2, my: hasEnv ? 3 : 0 }}>
  <GlobalScopeExplorer sx={{ width: 250 }} value={globalScope} meta={globalScopeMeta} />
@@ -254,15 +252,11 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito
 
  const envBindingEditor = (
  <EnvBindingEditor
- value={(value as EnvAttrValue)?.$$env ? (value as EnvAttrValue) : null}
+ value={(value as EnvAttrValue)?.$$env !== undefined ? (value as EnvAttrValue) : null}
  onChange={onChange}
  />
  );
 
- if (!hasEnv) {
- return jsExpressionBindingEditor;
- }
-
  return (
  <TabContext value={activeTab}>
  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
@@ -594,7 +588,8 @@ export function BindingEditorDialog<V>({
  <ValueBindingEditor
  error={error}
  value={
- (input as JsExpressionAttrValue)?.$$jsExpression || (input as EnvAttrValue)?.$$env
+ (input as JsExpressionAttrValue)?.$$jsExpression !== undefined ||
+ (input as EnvAttrValue)?.$$env !== undefined
  ? (input as JsExpressionAttrValue | EnvAttrValue)
  : null
  }
@@ -629,7 +624,8 @@ export interface BindingEditorProps<V> extends WithControlledProp<BindableAttrVa
  hidden?: boolean;
  propType?: PropValueType;
  liveBinding?: LiveBinding;
- env?: Record<string, string>;
+ env?: Record<string, string | undefined>;
+ declaredEnvKeys?: string[];
 }
 
 export function BindingEditor<V>({
@@ -644,6 +640,7 @@ export function BindingEditor<V>({
  onChange,
  liveBinding,
  env,
+ declaredEnvKeys,
 }: BindingEditorProps<V>) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = React.useCallback(() => setOpen(true), []);
@@ -700,9 +697,20 @@ export function BindingEditor<V>({
  disabled,
  propType,
  liveBinding,
- env,
+ env: env ?? {},
+ declaredEnvKeys: declaredEnvKeys ?? [],
  }),
- [disabled, env, globalScope, jsRuntime, label, liveBinding, propType, resolvedMeta],
+ [
+ disabled,
+ env,
+ globalScope,
+ jsRuntime,
+ label,
+ liveBinding,
+ propType,
+ resolvedMeta,
+ declaredEnvKeys,
+ ],
  );
 
  return (

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

@@ -37,7 +37,8 @@ export interface BindableEditorProps<V> extends WithControlledProp<BindableAttrV
  liveBinding?: LiveBinding;
  globalScope?: Record<string, unknown>;
  globalScopeMeta: ScopeMeta;
- env?: Record<string, string>;
+ env?: Record<string, string | undefined>;
+ declaredEnvKeys?: string[];
  sx?: SxProps;
 }
 
@@ -54,6 +55,7 @@ export default function BindableEditor<V>({
  globalScope = {},
  globalScopeMeta = {},
  env,
+ declaredEnvKeys,
  sx,
 }: BindableEditorProps<V>) {
  const propTypeControls = usePropControlsContext();
@@ -120,6 +122,7 @@ export default function BindableEditor<V>({
  hidden={!bindable}
  liveBinding={liveBinding}
  env={env}
+ declaredEnvKeys={declaredEnvKeys}
  />
  </React.Fragment>
  </Stack>

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ParametersEditor.tsx

@@ -16,7 +16,8 @@ export interface StringRecordEntriesEditorProps
  autoFocus?: boolean;
  sx?: SxProps;
  jsRuntime: JsRuntime;
- env?: Record<string, string>;
+ env?: Record<string, string | undefined>;
+ declaredEnvKeys?: string[];
  disabled?: boolean;
 }
 
@@ -34,6 +35,7 @@ export default function ParametersEditor({
  disabled,
  globalScopeMeta,
  env,
+ declaredEnvKeys,
 }: StringRecordEntriesEditorProps) {
  const fieldInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -94,6 +96,7 @@ export default function ParametersEditor({
  }
  disabled={disabled}
  env={env}
+ declaredEnvKeys={declaredEnvKeys}
  />
 
  <IconButton

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

@@ -311,7 +311,11 @@ function QueryEditor({
  [appStateApi],
  );
 
- const env = React.useMemo(() => introspection?.data?.env, [introspection]);
+ const env = React.useMemo(() => introspection?.data?.env ?? {}, [introspection?.data?.env]);
+ const declaredEnvKeys = React.useMemo(
+ () => introspection?.data?.declaredEnvKeys ?? [],
+ [introspection?.data?.declaredEnvKeys],
+ );
  const handleParamsChange = React.useCallback(
  (newParams: [string, BindableAttrValue<string>][]) => {
  appStateApi.updateQueryDraft((draft) => ({
@@ -650,6 +654,7 @@ function QueryEditor({
  liveValue={paramsEditorLiveValue}
  jsRuntime={jsServerRuntime}
  env={env}
+ declaredEnvKeys={declaredEnvKeys}
  />
  </TabPanel>
  </TabContext>

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

@@ -21,15 +21,12 @@ import {
  RawBody,
  RestConnectionParams,
  UrlEncodedBody,
+ IntrospectionResult,
 } from './types';
 import applyTransform from '../applyTransform';
 import { HTTP_NO_BODY, getAuthenticationHeaders, parseBaseUrl } from './shared';
 import type { IToolpadProject } from '../server';
 
-async function loadEnvFile(project: IToolpadProject) {
- return project.envManager.getDeclaredValues();
-}
-
 function resolveBindable<T>(
  jsRuntime: JsRuntime,
  bindable: BindableAttrValue<T>,
@@ -229,8 +226,10 @@ export default function createDatasource(
  async execPrivate(connection: Maybe<RestConnectionParams>, query: FetchPrivateQuery) {
  switch (query.kind) {
  case 'introspection': {
- const env = await loadEnvFile(project);
- return { env };
+ return {
+ env: process.env,
+ declaredEnvKeys: await project.envManager.getDeclaredKeys(),
+ } satisfies IntrospectionResult;
  }
  case 'debugExec':
  return execBase(project, connection, query.query, query.params);

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

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