fix(dashboard): add context to operation value previews

Author: dlhck

packages/dashboard/e2e/tests/marketing/promotions.spec.ts

@@ -87,10 +87,10 @@ test.describe('Promotions CRUD', () => {
 
         const dp = detailPage(page);
 
-        // The condition renders as a sentence with the amount as a chip
-        // (default value 100 minor units → displayed as 1)
+        // The condition renders as a sentence with the amount and active
+        // channel currency as a chip (default value 100 minor units → $1.00).
         const amountChip = page.getByRole('button', { name: 'amount' });
-        await expect(amountChip).toHaveText('1');
+        await expect(amountChip).toHaveText('$1.00');
 
         // Edit the amount in the chip popover — changes apply live.
         // (MoneyInput does not forward the name attribute, so locate the
@@ -102,14 +102,14 @@ test.describe('Promotions CRUD', () => {
             .getByRole('textbox')
             .fill('50');
         await page.keyboard.press('Escape');
-        await expect(amountChip).toHaveText('50');
+        await expect(amountChip).toHaveText('$50.00');
 
         await dp.clickUpdate();
         await dp.expectSuccessToast(/Successfully updated promotion/);
 
         // The edited value persists across a reload
         await page.reload();
-        await expect(page.getByRole('button', { name: 'amount' })).toHaveText('50');
+        await expect(page.getByRole('button', { name: 'amount' })).toHaveText('$50.00');
     });
 
     test('should update the promotion', async ({ page }) => {

packages/dashboard/src/lib/components/data-input/affixed-input.tsx

@@ -28,8 +28,14 @@ export type AffixedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
  * @docsCategory form-components
  * @docsPage AffixedInput
  */
-export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
-    const readOnly = props.disabled || isReadonlyField(props.fieldDef);
+export function AffixedInput({
+    prefix,
+    suffix,
+    className = '',
+    fieldDef,
+    ...inputProps
+}: Readonly<AffixedInputProps>) {
+    const readOnly = inputProps.disabled || isReadonlyField(fieldDef);
     const prefixRef = useRef<HTMLSpanElement>(null);
     const suffixRef = useRef<HTMLSpanElement>(null);
     const [prefixWidth, setPrefixWidth] = useState(0);
@@ -44,7 +50,7 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Reado
         }
     }, [prefix, suffix]);
 
-    const style = {
+    const affixStyle = {
         paddingLeft: prefix ? `calc(1rem + ${prefixWidth}px)` : undefined,
         paddingRight: suffix ? `calc(1rem + ${suffixWidth}px)` : undefined,
     };
@@ -57,19 +63,10 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Reado
                 </span>
             )}
             <Input
-                value={props.value}
-                onChange={props.onChange}
-                onBlur={props.onBlur}
-                onFocus={props.onFocus}
-                onKeyDown={props.onKeyDown}
-                type={props.type}
-                ref={props.ref}
+                {...inputProps}
                 className={className}
-                style={style}
+                style={{ ...inputProps.style, ...affixStyle }}
                 disabled={readOnly}
-                min={props.min}
-                max={props.max}
-                step={props.step}
             />
             {suffix && (
                 <span ref={suffixRef} className="absolute right-3 text-muted-foreground whitespace-nowrap">

packages/dashboard/src/lib/components/data-input/text-input.tsx

@@ -1,4 +1,4 @@
-// Simple built-in components using the single DashboardFormComponent interface
+import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isFieldDisabled } from '@/vdb/framework/form-engine/utils.js';
@@ -12,5 +12,22 @@ import { isFieldDisabled } from '@/vdb/framework/form-engine/utils.js';
  */
 export const TextInput: DashboardFormComponent = ({ value, onChange, fieldDef, disabled, ...rest }) => {
     const readOnly = isFieldDisabled(disabled, fieldDef);
-    return <Input value={value ?? ''} onChange={e => onChange(e.target.value)} disabled={readOnly} {...rest} />;
+    const prefix = fieldDef?.ui?.prefix;
+    const suffix = fieldDef?.ui?.suffix;
+    if (prefix || suffix) {
+        return (
+            <AffixedInput
+                {...rest}
+                fieldDef={fieldDef}
+                value={value ?? ''}
+                onChange={event => onChange(event.target.value)}
+                disabled={readOnly}
+                prefix={prefix}
+                suffix={suffix}
+            />
+        );
+    }
+    return (
+        <Input value={value ?? ''} onChange={e => onChange(e.target.value)} disabled={readOnly} {...rest} />
+    );
 };

packages/dashboard/src/lib/components/shared/configurable-operation-arg-summary.spec.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+    compactText,
+    getJsonSummary,
+    shouldUseListCountSummary,
+} from './configurable-operation-arg-summary.js';
+
+describe('shouldUseListCountSummary', () => {
+    it('uses a count when a scalar component is wrapped for a list field', () => {
+        expect(shouldUseListCountSummary(true, [100, 200], undefined)).toBe(true);
+    });
+
+    it('keeps semantic summaries for list-aware components', () => {
+        expect(shouldUseListCountSummary(true, ['1', '2'], true)).toBe(false);
+        expect(shouldUseListCountSummary(true, ['1', '2'], 'dynamic')).toBe(false);
+    });
+});
+
+describe('compactText', () => {
+    it('strips HTML and normalizes whitespace', () => {
+        expect(
+            compactText(
+                '<style>.hidden { display: none }</style><p>Hello <strong>world</strong></p><p>Next</p>',
+            ).full,
+        ).toBe('Hello world Next');
+    });
+
+    it('truncates long content for sentence chips', () => {
+        const result = compactText('a'.repeat(100));
+        expect(result.compact).toHaveLength(80);
+        expect(result.compact.endsWith('\u2026')).toBe(true);
+    });
+});
+
+describe('getJsonSummary', () => {
+    it('summarizes arrays and objects', () => {
+        expect(getJsonSummary('[1, 2, 3]')).toEqual({ type: 'items', count: 3 });
+        expect(getJsonSummary('{"one": 1, "two": 2}')).toEqual({ type: 'properties', count: 2 });
+    });
+
+    it('uses compact text for invalid JSON', () => {
+        expect(getJsonSummary('not json')).toEqual({ type: 'text', value: 'not json' });
+    });
+});

packages/dashboard/src/lib/components/shared/configurable-operation-arg-summary.tsx

@@ -7,6 +7,7 @@ import { extractFieldOptions } from '@/vdb/framework/form-engine/utils.js';
 import { transformValue } from '@/vdb/framework/form-engine/value-transformers.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useLingui } from '@lingui/react/macro';
@@ -33,6 +34,17 @@ export interface ArgSummaryProps {
     fieldDef: ConfigurableFieldDef;
     /** The raw json-string encoded arg value */
     value: string;
+    omitPrefix?: boolean;
+    omitSuffix?: boolean;
+}
+
+export function shouldUseListCountSummary(
+    isListField: boolean,
+    value: unknown,
+    listInputMode: boolean | 'dynamic' | undefined,
+): boolean {
+    const componentHandlesList = listInputMode === true || listInputMode === 'dynamic';
+    return isListField && Array.isArray(value) && !componentHandlesList;
 }
 
 /**
@@ -47,17 +59,32 @@ export interface ArgSummaryProps {
  * 3. A default summary based on the arg type (boolean, datetime, list count,
  *    plain value)
  */
-export function ArgSummary({ fieldDef, value }: Readonly<ArgSummaryProps>) {
+export function ArgSummary({ fieldDef, value, omitPrefix, omitSuffix }: Readonly<ArgSummaryProps>) {
     const componentId = fieldDef.ui?.component as string | undefined;
     const CustomComponent = getInputComponent(componentId);
     const parsedValue = transformValue(value, fieldDef, 'json-string', 'parse');
+    const isListValue = fieldDef.list === true && Array.isArray(parsedValue);
+    const listInputMode = CustomComponent?.metadata?.isListInput;
+    const useListCountSummary = shouldUseListCountSummary(fieldDef.list, parsedValue, listInputMode);
 
-    const Summary =
-        CustomComponent?.metadata?.summary ??
-        (componentId ? BUILT_IN_SUMMARIES[componentId] : undefined) ??
-        DefaultArgSummary;
+    const Summary = useListCountSummary
+        ? DefaultArgSummary
+        : (CustomComponent?.metadata?.summary ??
+          (componentId ? BUILT_IN_SUMMARIES[componentId] : undefined) ??
+          DefaultArgSummary);
 
-    return <Summary value={parsedValue} fieldDef={fieldDef} />;
+    const isAffixedComponent =
+        !isListValue && (componentId === 'number-form-input' || componentId === 'text-form-input');
+    const prefix = isAffixedComponent && !omitPrefix ? fieldDef.ui?.prefix : undefined;
+    const suffix = isAffixedComponent && !omitSuffix ? fieldDef.ui?.suffix : undefined;
+
+    return (
+        <>
+            {prefix}
+            <Summary value={parsedValue} fieldDef={fieldDef} />
+            {suffix}
+        </>
+    );
 }
 
 function DefaultArgSummary({ value, fieldDef }: Readonly<DashboardFormComponentSummaryProps>) {
@@ -77,8 +104,83 @@ function DefaultArgSummary({ value, fieldDef }: Readonly<DashboardFormComponentS
 }
 
 function CurrencySummary({ value }: Readonly<DashboardFormComponentSummaryProps>) {
-    const { toMajorUnits, formatNumber } = useLocalFormat();
-    return <>{formatNumber(toMajorUnits(Number(value)))}</>;
+    const { activeChannel } = useChannel();
+    const { formatCurrency, toMajorUnits, formatNumber } = useLocalFormat();
+    const currencyCode = activeChannel?.defaultCurrencyCode;
+    return (
+        <>
+            {currencyCode
+                ? formatCurrency(Number(value), currencyCode)
+                : formatNumber(toMajorUnits(Number(value)))}
+        </>
+    );
+}
+
+function PasswordSummary() {
+    return <>{'\u2022'.repeat(8)}</>;
+}
+
+const MAX_TEXT_SUMMARY_LENGTH = 80;
+
+export function compactText(value: unknown): { full: string; compact: string } {
+    const raw = String(value ?? '')
+        .replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, '')
+        .replace(
+            /<\/(address|article|aside|blockquote|div|figcaption|figure|footer|header|h[1-6]|li|main|nav|ol|p|pre|section|table|tr|ul)>/gi,
+            ' ',
+        );
+    let plainText: string;
+    if (typeof DOMParser === 'undefined') {
+        plainText = raw.replace(/<[^>]*>/g, ' ');
+    } else {
+        plainText = new DOMParser().parseFromString(raw, 'text/html').body.textContent ?? '';
+    }
+    const full = plainText.replace(/\s+/g, ' ').trim();
+    const compact =
+        full.length > MAX_TEXT_SUMMARY_LENGTH
+            ? `${full.slice(0, MAX_TEXT_SUMMARY_LENGTH - 1).trimEnd()}\u2026`
+            : full;
+    return { full, compact };
+}
+
+function RichTextSummary({ value }: Readonly<DashboardFormComponentSummaryProps>) {
+    const { full, compact } = compactText(value);
+    return <span title={full}>{compact}</span>;
+}
+
+export type JsonSummary =
+    | { type: 'items'; count: number }
+    | { type: 'properties'; count: number }
+    | { type: 'text'; value: string };
+
+export function getJsonSummary(value: unknown): JsonSummary {
+    let parsed = value;
+    if (typeof value === 'string') {
+        try {
+            parsed = JSON.parse(value);
+        } catch {
+            return { type: 'text', value: compactText(value).compact };
+        }
+    }
+    if (Array.isArray(parsed)) {
+        return { type: 'items', count: parsed.length };
+    }
+    if (parsed !== null && typeof parsed === 'object') {
+        return { type: 'properties', count: Object.keys(parsed).length };
+    }
+    return { type: 'text', value: String(parsed) };
+}
+
+function JsonSummary({ value }: Readonly<DashboardFormComponentSummaryProps>) {
+    const { t } = useLingui();
+    const summary = getJsonSummary(value);
+    if (summary.type === 'items') {
+        return <>{summary.count === 1 ? t`1 item` : t`${summary.count} items`}</>;
+    }
+    if (summary.type === 'properties') {
+        return <>{summary.count === 1 ? t`1 property` : t`${summary.count} properties`}</>;
+    }
+    return <>{summary.value}</>;
 }
 
 function SelectOptionsSummary({ value, fieldDef }: Readonly<DashboardFormComponentSummaryProps>) {
@@ -143,8 +245,7 @@ function ProductVariantSummary({ value }: Readonly<DashboardFormComponentSummary
     const ids = toIdArray(value);
     const { data } = useQuery({
         queryKey: ['ProductVariantSummary', ids],
-        queryFn: () =>
-            api.query(productVariantSummaryDocument, { options: { filter: { id: { in: ids } } } }),
+        queryFn: () => api.query(productVariantSummaryDocument, { options: { filter: { id: { in: ids } } } }),
         enabled: ids.length > 0,
         placeholderData: undefined,
     });
@@ -155,6 +256,40 @@ function ProductVariantSummary({ value }: Readonly<DashboardFormComponentSummary
     return <NameList names={items.map(item => item.name)} />;
 }
 
+const productSummaryDocument = graphql(`
+    query ProductSummary($options: ProductListOptions) {
+        products(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+function ProductSummary({ value }: Readonly<DashboardFormComponentSummaryProps>) {
+    const ids = toIdArray(value);
+    const { data } = useQuery({
+        queryKey: ['ProductSummary', ids],
+        queryFn: () => api.query(productSummaryDocument, { options: { filter: { id: { in: ids } } } }),
+        enabled: ids.length > 0,
+        placeholderData: undefined,
+    });
+    const items = data?.products.items;
+    if (!items) {
+        return <EntityCountFallback count={ids.length} />;
+    }
+    return <NameList names={items.map(item => item.name)} />;
+}
+
+function ProductMultiSummary({ value, fieldDef }: Readonly<DashboardFormComponentSummaryProps>) {
+    return fieldDef.ui?.selectionMode === 'variant' ? (
+        <ProductVariantSummary value={value} fieldDef={fieldDef} />
+    ) : (
+        <ProductSummary value={value} fieldDef={fieldDef} />
+    );
+}
+
 const customerGroupSummaryDocument = graphql(`
     query CustomerGroupSummary($options: CustomerGroupListOptions) {
         customerGroups(options: $options) {
@@ -170,8 +305,7 @@ function CustomerGroupSummary({ value }: Readonly<DashboardFormComponentSummaryP
     const ids = toIdArray(value);
     const { data } = useQuery({
         queryKey: ['CustomerGroupSummary', ids],
-        queryFn: () =>
-            api.query(customerGroupSummaryDocument, { options: { filter: { id: { in: ids } } } }),
+        queryFn: () => api.query(customerGroupSummaryDocument, { options: { filter: { id: { in: ids } } } }),
         enabled: ids.length > 0,
         placeholderData: undefined,
     });
@@ -212,6 +346,12 @@ function toIdArray(value: any): string[] {
 
 const BUILT_IN_SUMMARIES: Record<string, ComponentType<DashboardFormComponentSummaryProps>> = {
     'currency-form-input': CurrencySummary,
+    'html-editor-form-input': RichTextSummary,
+    'json-editor-form-input': JsonSummary,
+    'password-form-input': PasswordSummary,
+    'product-multi-form-input': ProductMultiSummary,
+    'product-multi-input': ProductMultiSummary,
+    'rich-text-form-input': RichTextSummary,
     'select-form-input': SelectOptionsSummary,
     'facet-value-form-input': FacetValueSummary,
     'facet-value-input': FacetValueSummary,