Fix/partial nested var resolution

packages/bruno-api-docs/src/components/VariableText/VariableText.spec.tsx

@@ -9,7 +9,18 @@ import { useRenderToDom } from '@/hooks/useRenderToDom';
 import { VariableText } from './VariableText';
 
 const collection: any = {
-  config: { environments: [{ name: 'Dev', variables: [{ name: 'baseUrl', value: 'https://dev.test' }] }] }
+  config: {
+    environments: [
+      {
+        name: 'Dev',
+        variables: [
+          { name: 'baseUrl', value: 'https://dev.test' },
+          { name: 'emptyValue', value: '' },
+          { name: 'authToken', secret: true }
+        ]
+      }
+    ]
+  }
 };
 
 const tree = (value: string, configure?: (store: ReturnType<typeof createOpenCollectionStore>) => void) => {
@@ -58,10 +69,24 @@ describe('VariableText', () => {
     expect(root.querySelector('.var-text')?.text).toBe('https://dev.test/api/v1/auth');
   });
 
-  it('still highlights an unknown variable when show-variables is on', () => {
+  it('shows the (empty) placeholder for a defined variable that has no value', () => {
+    const root = useRenderToDom(tree('{{emptyValue}}', withShowVars));
+    const token = root.querySelector('.var');
+    expect(token?.getAttribute('data-var-name')).toBe('emptyValue');
+    expect(token?.text).toBe('(empty)');
+    expect(token?.getAttribute('class')).toContain('var-empty');
+  });
+
+  it('shows the (empty) placeholder for a variable that is not defined at all', () => {
     const root = useRenderToDom(tree('{{unknown}}/x', withShowVars));
     const token = root.querySelector('.var');
     expect(token?.getAttribute('data-var-name')).toBe('unknown');
-    expect(token?.text).toBe('{{unknown}}');
+    expect(token?.text).toBe('(empty)');
+  });
+  it('leaves a secret and a dynamic reference untouched when show-variables is on', () => {
+    expect(useRenderToDom(tree('{{authToken}}', withShowVars)).querySelector('.var')?.text)
+      .toBe('{{authToken}}');
+    expect(useRenderToDom(tree('{{$randomInt}}', withShowVars)).querySelector('.var')?.text)
+      .toBe('{{$randomInt}}');
   });
 });

packages/bruno-api-docs/src/components/VariableText/VariableToken/StyledWrapper.ts

@@ -11,4 +11,9 @@ export const StyledWrapper = styled.span`
   &.var-plain {
     cursor: pointer;
   }
+
+  &.var-empty {
+    font-style: italic;
+    color: var(--text-tertiary);
+  }
 `;

packages/bruno-api-docs/src/components/VariableText/VariableToken/VariableToken.tsx

@@ -1,20 +1,32 @@
 import React from 'react';
 import { useResolvedVariables } from '@/hooks';
 import { Popover } from '@/ui/Popover/Popover';
+import { detectSpecialScope, isValidVariableName } from '@/utils/variableResolution';
 import { VariableInfoCard } from '../../VariableInfoCard/VariableInfoCard';
 import { StyledWrapper } from './StyledWrapper';
 
+const EMPTY_PLACEHOLDER = '(empty)';
+
 export const VariableToken: React.FC<{ token: string; highlighted?: boolean }> = ({ token, highlighted = true }) => {
-  const { showVars, resolve } = useResolvedVariables();
+  const { showVars, resolve, isFound, isSecret } = useResolvedVariables();
   const name = token.slice(2, -2).trim();
-  const display = showVars ? resolve(token) : token;
-  const revealed = display !== token;
+  const resolved = showVars ? resolve(token) : token;
+  const revealed = resolved !== token;
+
+  const plainVariable = isValidVariableName(name) && !isSecret(name) && !detectSpecialScope(name);
+  const empty = showVars && plainVariable && (resolved === '' || !isFound(name));
+
+  const display = empty ? EMPTY_PLACEHOLDER : resolved;
   const variant = highlighted ? 'var-highlight' : revealed ? undefined : 'var-plain';
 
   return (
-    <Popover content={<VariableInfoCard name={name} />} testId="variable-info-popover" disabled={revealed}>
+    <Popover
+      content={<VariableInfoCard name={name} />}
+      testId="variable-info-popover"
+      disabled={revealed || empty}
+    >
       <StyledWrapper
-        className={['var', variant].filter(Boolean).join(' ')}
+        className={['var', variant, empty ? 'var-empty' : null].filter(Boolean).join(' ')}
         data-var-name={name}
         data-testid={`variable-token-${name}`}
         translate="no"

packages/bruno-api-docs/src/hooks/useVariableResolver.spec.tsx

@@ -141,3 +141,43 @@ describe('lookup (variable hover card)', () => {
     expect(html).toContain('<span data-testid="scope">undefined</span>');
   });
 });
+
+const NestedProbe: React.FC = () => {
+  const r = useResolvedVariables();
+  return (
+    <div>
+      <span data-testid="nested-resolve">{r.resolve('{{endpoint}}')}</span>
+      <span data-testid="nested-interpolate">{r.interpolate('{{endpoint}}')}</span>
+    </div>
+  );
+};
+
+describe('nested variable resolution', () => {
+  const nested = {
+    request: {
+      variables: [
+        { name: 'endpoint', value: '{{host}}/v1' },
+        { name: 'host', value: 'https://api.test' }
+      ]
+    },
+    config: { environments: [{ name: 'Dev', variables: [] }] }
+  } as unknown as typeof collection;
+
+  it('follows a variable that points at another variable, for display and for interpolation', () => {
+    const store = createOpenCollectionStore();
+    store.dispatch(setDocsCollection(nested));
+    store.dispatch(setActiveEnv('Dev'));
+    store.dispatch(setShowVars(true));
+
+    const html = renderToStaticMarkup(
+      <Provider store={store}>
+        <ItemVariableResolverProvider collection={nested} ancestry={[]} item={null} writable>
+          <NestedProbe />
+        </ItemVariableResolverProvider>
+      </Provider>
+    );
+
+    expect(html).toContain('<span data-testid="nested-resolve">https://api.test/v1</span>');
+    expect(html).toContain('<span data-testid="nested-interpolate">https://api.test/v1</span>');
+  });
+});

packages/bruno-api-docs/src/hooks/useVariableResolver.tsx

@@ -12,7 +12,7 @@ import { getItemUuid } from '@/utils/itemUtils';
 import { mockDataFunctions, timeBasedDynamicVars } from '@/runner/utils/faker-functions';
 import {
   buildScopedVariableModel,
-  resolveVariables,
+  resolveValueDeep,
   singleReferenceName,
   detectSpecialScope,
   isValidVariableName,
@@ -95,7 +95,7 @@ const makeResolver = (
   activeEnvName: string | null
 ): VariableResolver => {
   const isSecret = (name: string) => model.secretNames.has(name.trim());
-  const interpolate = (raw: string) => resolveVariables(raw, model.values);
+  const interpolate = (raw: string) => resolveValueDeep(raw, model.values);
   return {
     showVars,
     activeEnvName,
@@ -263,7 +263,7 @@ export const ItemVariableResolverProvider: React.FC<{
   );
 
   const interpolateWithSecrets = useCallback(
-    (raw: string) => resolveVariables(raw, model.fullValues),
+    (raw: string) => resolveValueDeep(raw, model.fullValues),
     [model]
   );