@vertesia/ui 1.5.0-dev.20260717.131047Z → 1.5.0-dev.20260725.083715Z

package/src/features/views/ViewSearch.test.tsx

@@ -0,0 +1,147 @@
+import { cleanup, fireEvent, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { DefaultViewSearch } from './ViewSearch.js';
+
+describe('DefaultViewSearch', () => {
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('buckets structured fields and renders a typed range without browser completion', () => {
+        const onKeyTermsChange = vi.fn();
+
+        renderWithProviders(
+            <DefaultViewSearch
+                configuration={{
+                    mode: 'deterministic',
+                    placeholder: 'Find orders',
+                    key_terms: [
+                        {
+                            id: 'purchase_order',
+                            label: 'Purchase order',
+                            field: 'properties.purchase_order',
+                            type: 'keyword',
+                            operator: 'term',
+                        },
+                        {
+                            id: 'release_dates',
+                            label: 'Release dates',
+                            field: 'properties.release_date',
+                            type: 'date',
+                            operator: 'range',
+                        },
+                    ],
+                }}
+                query=""
+                keyTerms={{ release_dates: ['2026-01-01..2026-01-31'] }}
+                isLoading={false}
+                onQueryChange={vi.fn()}
+                onKeyTermsChange={onKeyTermsChange}
+                onSubmit={vi.fn()}
+            />,
+        );
+
+        expect(screen.getByText('Search fields')).not.toBeNull();
+        expect(screen.getByText('Ranges')).not.toBeNull();
+
+        const query = screen.getByPlaceholderText('Find orders') as HTMLInputElement;
+        const purchaseOrder = screen.getByLabelText('Purchase order') as HTMLInputElement;
+        const from = screen.getByLabelText('Release dates: From') as HTMLInputElement;
+        const to = screen.getByLabelText('Release dates: To') as HTMLInputElement;
+
+        expect(query.autocomplete).toBe('off');
+        expect(purchaseOrder.autocomplete).toBe('off');
+        expect(purchaseOrder.name).toBe('view-key-term-purchase_order');
+        expect(from.type).toBe('date');
+        expect(from.value).toBe('2026-01-01');
+        expect(to.value).toBe('2026-01-31');
+
+        fireEvent.change(from, { target: { value: '2026-01-05' } });
+
+        expect(onKeyTermsChange).toHaveBeenCalledWith('release_dates', ['2026-01-05..2026-01-31']);
+    });
+
+    it('preserves unfinished spaces and separators while normalizing submitted key-term values', () => {
+        const onKeyTermsChange = vi.fn();
+
+        renderWithProviders(
+            <DefaultViewSearch
+                configuration={{
+                    mode: 'deterministic',
+                    key_terms: [
+                        {
+                            id: 'city',
+                            label: 'City',
+                            field: 'properties.city',
+                            type: 'keyword',
+                        },
+                        {
+                            id: 'customers',
+                            label: 'Customers',
+                            field: 'properties.customer',
+                            type: 'keyword',
+                            multiple: true,
+                        },
+                    ],
+                }}
+                query=""
+                keyTerms={{}}
+                isLoading={false}
+                onQueryChange={vi.fn()}
+                onKeyTermsChange={onKeyTermsChange}
+                onSubmit={vi.fn()}
+            />,
+        );
+
+        const city = screen.getByLabelText('City') as HTMLInputElement;
+        fireEvent.focus(city);
+        fireEvent.change(city, { target: { value: 'New York' } });
+        expect(city.value).toBe('New York');
+        expect(onKeyTermsChange).toHaveBeenCalledWith('city', ['New York']);
+
+        const customers = screen.getByLabelText('Customers') as HTMLInputElement;
+        fireEvent.focus(customers);
+        fireEvent.change(customers, { target: { value: 'Acme, ' } });
+        expect(customers.value).toBe('Acme, ');
+        expect(onKeyTermsChange).toHaveBeenCalledWith('customers', ['Acme']);
+
+        fireEvent.change(customers, { target: { value: 'Acme, Globex' } });
+        expect(customers.value).toBe('Acme, Globex');
+        expect(onKeyTermsChange).toHaveBeenCalledWith('customers', ['Acme', 'Globex']);
+    });
+
+    it('applies external key-term resets while preserving focused local formatting echoes', () => {
+        const onKeyTermsChange = vi.fn();
+        const props = {
+            configuration: {
+                mode: 'deterministic' as const,
+                key_terms: [
+                    {
+                        id: 'customers',
+                        label: 'Customers',
+                        field: 'properties.customer',
+                        type: 'keyword' as const,
+                        multiple: true,
+                    },
+                ],
+            },
+            query: '',
+            isLoading: false,
+            onQueryChange: vi.fn(),
+            onKeyTermsChange,
+            onSubmit: vi.fn(),
+        };
+        const { rerender } = renderWithProviders(<DefaultViewSearch {...props} keyTerms={{}} />);
+        const customers = screen.getByLabelText('Customers') as HTMLInputElement;
+
+        fireEvent.focus(customers);
+        fireEvent.change(customers, { target: { value: 'Acme, ' } });
+        rerender(<DefaultViewSearch {...props} keyTerms={{ customers: ['Acme'] }} />);
+        expect(customers.value).toBe('Acme, ');
+
+        rerender(<DefaultViewSearch {...props} keyTerms={{}} />);
+        expect(customers.value).toBe('');
+    });
+});

package/src/features/views/ViewSearch.tsx

@@ -0,0 +1,205 @@
+import { Button, FormItem, Input } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { Search } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+import type { ViewSearchRendererProps } from './types.js';
+
+type ViewKeyTerm = NonNullable<ViewSearchRendererProps['configuration']['key_terms']>[number];
+
+function keyTermInputType(type: string, multiple: boolean | undefined): 'text' | 'number' | 'date' {
+    if (multiple) return 'text';
+    if (type === 'number') return 'number';
+    if (type === 'date') return 'date';
+    return 'text';
+}
+
+function rangeBounds(values: string[]): [string, string] {
+    const [from = '', to = ''] = (values[0] ?? '').split('..', 2);
+    return [from, to];
+}
+
+function rangeValues(from: string, to: string): string[] {
+    return from || to ? [`${from}..${to}`] : [];
+}
+
+function serializeKeyTerm(values: string[], multiple: boolean | undefined): string {
+    return multiple ? values.join(', ') : (values[0] ?? '');
+}
+
+function parseKeyTerm(value: string, multiple: boolean | undefined): string[] {
+    if (multiple) {
+        return value
+            .split(',')
+            .map((entry) => entry.trim())
+            .filter(Boolean);
+    }
+    return value.trim() ? [value.trim()] : [];
+}
+
+function KeyTermInput({
+    term,
+    values,
+    isLoading,
+    onChange,
+}: {
+    term: ViewKeyTerm;
+    values: string[];
+    isLoading: boolean;
+    onChange: (values: string[]) => void;
+}) {
+    const focused = useRef(false);
+    const lastEmittedValues = useRef<string | undefined>(undefined);
+    const [input, setInput] = useState(() => serializeKeyTerm(values, term.multiple));
+    const serializedValues = serializeKeyTerm(values, term.multiple);
+
+    useEffect(() => {
+        const isLocalEcho = focused.current && lastEmittedValues.current === serializedValues;
+        if (!isLocalEcho) setInput(serializedValues);
+        lastEmittedValues.current = undefined;
+    }, [serializedValues]);
+
+    return (
+        <FormItem label={term.label}>
+            <Input
+                type={keyTermInputType(term.type, term.multiple)}
+                name={`view-key-term-${term.id}`}
+                autoComplete="off"
+                value={input}
+                onFocus={() => {
+                    focused.current = true;
+                }}
+                onBlur={() => {
+                    focused.current = false;
+                    const normalized = parseKeyTerm(input, term.multiple);
+                    setInput(serializeKeyTerm(normalized, term.multiple));
+                }}
+                onChange={(value) => {
+                    setInput(value);
+                    const parsed = parseKeyTerm(value, term.multiple);
+                    lastEmittedValues.current = serializeKeyTerm(parsed, term.multiple);
+                    onChange(parsed);
+                }}
+                placeholder={term.label}
+                disabled={isLoading}
+            />
+        </FormItem>
+    );
+}
+
+export function DefaultViewSearch({
+    configuration,
+    query,
+    keyTerms,
+    isLoading,
+    onQueryChange,
+    onKeyTermsChange,
+    onSubmit,
+}: ViewSearchRendererProps) {
+    const { t } = useUITranslation();
+    const searchId = useId();
+    const fieldTerms = configuration.key_terms?.filter((term) => term.operator !== 'range') ?? [];
+    const rangeTerms = configuration.key_terms?.filter((term) => term.operator === 'range') ?? [];
+
+    const renderTerm = (term: ViewKeyTerm) => (
+        <KeyTermInput
+            key={term.id}
+            term={term}
+            values={keyTerms[term.id] ?? []}
+            isLoading={isLoading}
+            onChange={(values) => onKeyTermsChange(term.id, values)}
+        />
+    );
+
+    const renderRange = (term: ViewKeyTerm) => {
+        const [from, to] = rangeBounds(keyTerms[term.id] ?? []);
+        const inputType = term.type === 'number' ? 'number' : term.type === 'date' ? 'date' : 'text';
+        return (
+            <fieldset key={term.id} className="min-w-0">
+                <legend className="mb-1 text-sm font-medium">{term.label}</legend>
+                <div className="grid grid-cols-2 gap-2">
+                    <Input
+                        type={inputType}
+                        name={`view-key-term-${term.id}-from`}
+                        autoComplete="off"
+                        aria-label={`${term.label}: ${t('view.from')}`}
+                        value={from}
+                        onChange={(value) => onKeyTermsChange(term.id, rangeValues(value.trim(), to))}
+                        placeholder={t('view.from')}
+                        disabled={isLoading}
+                    />
+                    <Input
+                        type={inputType}
+                        name={`view-key-term-${term.id}-to`}
+                        autoComplete="off"
+                        aria-label={`${term.label}: ${t('view.to')}`}
+                        value={to}
+                        onChange={(value) => onKeyTermsChange(term.id, rangeValues(from, value.trim()))}
+                        placeholder={t('view.to')}
+                        disabled={isLoading}
+                    />
+                </div>
+            </fieldset>
+        );
+    };
+
+    return (
+        <form
+            className="flex flex-col gap-3"
+            aria-label={t('layout.search')}
+            autoComplete="off"
+            onSubmit={(event) => {
+                event.preventDefault();
+                onSubmit();
+            }}
+        >
+            <div className="flex items-center gap-2">
+                <label htmlFor={searchId} className="sr-only">
+                    {t('layout.search')}
+                </label>
+                <Input
+                    id={searchId}
+                    name="view-query"
+                    autoComplete="off"
+                    value={query}
+                    onChange={onQueryChange}
+                    placeholder={configuration.placeholder ?? t('store.searchPlaceholder')}
+                    disabled={isLoading}
+                />
+                <Button type="submit" disabled={isLoading} className="shrink-0">
+                    <Search className="size-4" />
+                    {isLoading ? t('store.searching') : t('store.search')}
+                </Button>
+            </div>
+            {configuration.key_terms && configuration.key_terms.length > 0 && (
+                <div className="grid gap-3 lg:grid-cols-2">
+                    {fieldTerms.length > 0 && (
+                        <fieldset
+                            className={`rounded-md border border-mixer-muted/30 bg-mixer-muted/5 p-3 ${
+                                rangeTerms.length === 0 ? 'lg:col-span-2' : ''
+                            }`}
+                        >
+                            <legend className="px-1 text-xs font-medium text-muted">{t('view.searchFields')}</legend>
+                            <div
+                                className={`grid gap-3 sm:grid-cols-2 ${
+                                    rangeTerms.length === 0 ? 'lg:grid-cols-4' : ''
+                                }`}
+                            >
+                                {fieldTerms.map(renderTerm)}
+                            </div>
+                        </fieldset>
+                    )}
+                    {rangeTerms.length > 0 && (
+                        <fieldset
+                            className={`rounded-md border border-mixer-muted/30 bg-mixer-muted/5 p-3 ${
+                                fieldTerms.length === 0 ? 'lg:col-span-2' : ''
+                            }`}
+                        >
+                            <legend className="px-1 text-xs font-medium text-muted">{t('view.ranges')}</legend>
+                            <div className="grid gap-3 sm:grid-cols-2">{rangeTerms.map(renderRange)}</div>
+                        </fieldset>
+                    )}
+                </div>
+            )}
+        </form>
+    );
+}

package/src/features/views/index.ts

@@ -0,0 +1,6 @@
+export * from './types.js';
+export * from './ViewExperience.js';
+export * from './ViewNavigation.js';
+export * from './ViewResults.js';
+export * from './ViewSearch.js';
+export * from './viewState.js';

package/src/features/views/types.ts

@@ -0,0 +1,57 @@
+import type {
+    ExecuteViewRequest,
+    ViewDisplayConfiguration,
+    ViewExecutionDefinition,
+    ViewExecutionResult,
+    ViewHit,
+    ViewNavigationItem,
+    ViewNavigationResult,
+    ViewResultMedia,
+    ViewSearchConfiguration,
+} from '@vertesia/common';
+import type { ComponentType } from 'react';
+
+export interface ViewSearchRendererProps {
+    configuration: ViewSearchConfiguration;
+    query: string;
+    keyTerms: Record<string, string[]>;
+    isLoading: boolean;
+    onQueryChange: (query: string) => void;
+    onKeyTermsChange: (id: string, values: string[]) => void;
+    onSubmit: () => void;
+}
+
+export interface ViewNavigationRendererProps {
+    configuration: ViewNavigationItem;
+    result: ViewNavigationResult;
+    isLoading: boolean;
+    onChange: (values: string[]) => void;
+}
+
+export interface ViewResultsRendererProps {
+    configuration: ViewDisplayConfiguration;
+    definition: ViewExecutionDefinition;
+    request: ExecuteViewRequest;
+    result: ViewExecutionResult;
+    isLoading: boolean;
+    onSortChange?: (sort: string) => void;
+    onOpenHit?: (hit: ViewHit) => void;
+    resolveMedia?: ViewMediaResolver;
+}
+
+export interface ViewExperienceRenderers {
+    search?: Record<string, ComponentType<ViewSearchRendererProps>>;
+    navigation?: Record<string, ComponentType<ViewNavigationRendererProps>>;
+    results?: Record<string, ComponentType<ViewResultsRendererProps>>;
+}
+
+export type ViewExecutor = (request: ExecuteViewRequest) => Promise<ViewExecutionResult>;
+
+/**
+ * Resolves media that is not already an HTTP URL, such as a signed content
+ * thumbnail. Embedded apps can provide their own resolver.
+ */
+export type ViewMediaResolver = (
+    hit: ViewHit,
+    media: ViewResultMedia,
+) => string | undefined | Promise<string | undefined>;

package/src/features/views/viewState.test.ts

@@ -0,0 +1,111 @@
+import type { ViewExecutionResult } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { canonicalizeViewState, parseViewState, resolveViewSort, serializeViewState } from './viewState.js';
+
+describe('View URL state', () => {
+    it('parses repeated key terms and navigation values', () => {
+        expect(
+            parseViewState(
+                '?q=find+contracts&t.party=Acme&t.party=Globex&n.brand=Vertesia&display=cards&sort=updated&offset=20',
+            ),
+        ).toEqual({
+            query: 'find contracts',
+            key_terms: { party: ['Acme', 'Globex'] },
+            navigation: { brand: ['Vertesia'] },
+            display: 'cards',
+            sort: 'updated',
+            offset: 20,
+        });
+    });
+
+    it('round trips View state and preserves unrelated host parameters', () => {
+        const hierarchyPath = 'h1:WyJGTCIsIk1pYW1pIl0';
+        const serialized = serializeViewState(
+            {
+                query: 'renewal rights',
+                key_terms: { party: ['Acme'], topic: ['renewal'] },
+                navigation: {
+                    location: ['/Customers/Acme'],
+                    brand: ['Contoso', 'Vertesia'],
+                    geography: [hierarchyPath],
+                },
+                display: 'table',
+            },
+            '?account=account-1&project=project-1&q=stale&n.brand=stale',
+        );
+
+        expect(serialized).toContain('account=account-1');
+        expect(serialized).toContain('project=project-1');
+        expect(parseViewState(serialized)).toEqual({
+            query: 'renewal rights',
+            key_terms: { party: ['Acme'], topic: ['renewal'] },
+            navigation: {
+                brand: ['Contoso', 'Vertesia'],
+                geography: [hierarchyPath],
+                location: ['/Customers/Acme'],
+            },
+            display: 'table',
+        });
+    });
+
+    it('drops malformed offsets and empty values', () => {
+        expect(parseViewState('?offset=-2&q=++&n.brand=&t.party=')).toEqual({});
+    });
+
+    it('canonicalizes stale configuration IDs from the runtime response', () => {
+        expect(
+            canonicalizeViewState(
+                {
+                    query: '  contracts  ',
+                    key_terms: { party: ['Acme'], retired: ['old'] },
+                    navigation: { brand: ['stale'], retired: ['old'] },
+                    display: 'retired',
+                    sort: 'retired',
+                    offset: 20,
+                },
+                {
+                    view: 'document-lib',
+                    revision: 2,
+                    definition: {
+                        name: 'Documents',
+                        search: { key_terms: [{ id: 'party', label: 'Party', type: 'keyword' }] },
+                    },
+                    display: 'table',
+                    sort: 'updated',
+                    search: { requested_mode: 'agentic', applied_mode: 'query', warnings: [] },
+                    hits: [],
+                    total: 0,
+                    navigation: {
+                        brand: { id: 'brand', selected: ['Acme'], nodes: [] },
+                    },
+                    took: 5,
+                },
+            ),
+        ).toEqual({
+            query: 'contracts',
+            key_terms: { party: ['Acme'] },
+            navigation: { brand: ['Acme'] },
+            display: 'table',
+            sort: 'updated',
+            offset: 20,
+        });
+    });
+
+    it('does not relabel relevance-ranked query results with the browse default sort', () => {
+        const result = {
+            view: 'document-lib',
+            revision: 1,
+            definition: { name: 'Documents' },
+            search: { requested_mode: 'agentic', applied_mode: 'query', warnings: [] },
+            hits: [],
+            total: 0,
+            navigation: {},
+            took: 5,
+        } satisfies ViewExecutionResult;
+
+        expect(resolveViewSort({ query: 'garden hose' }, result, 'recent')).toBeUndefined();
+        expect(resolveViewSort({}, result, 'recent')).toBe('recent');
+        expect(resolveViewSort({ query: 'garden hose', sort: 'recent' }, result, 'recent')).toBe('recent');
+        expect(resolveViewSort({ query: 'orders over 1000' }, { ...result, sort: 'recent' }, 'recent')).toBe('recent');
+    });
+});

package/src/features/views/viewState.ts

@@ -0,0 +1,132 @@
+import type { ExecuteViewRequest, ViewExecutionResult } from '@vertesia/common';
+
+const QUERY_PARAM = 'q';
+const DISPLAY_PARAM = 'display';
+const SORT_PARAM = 'sort';
+const OFFSET_PARAM = 'offset';
+const KEY_TERM_PREFIX = 't.';
+const NAVIGATION_PREFIX = 'n.';
+
+function nonNegativeInteger(value: string | null): number | undefined {
+    if (value === null || value.trim() === '') return undefined;
+    const parsed = Number(value);
+    return Number.isSafeInteger(parsed) && parsed >= 0 ? parsed : undefined;
+}
+
+function collectPrefixedValues(params: URLSearchParams, prefix: string): Record<string, string[]> | undefined {
+    const values: Record<string, string[]> = {};
+    for (const key of new Set(params.keys())) {
+        if (!key.startsWith(prefix) || key.length === prefix.length) continue;
+        const entries = params.getAll(key).filter((value) => value !== '');
+        if (entries.length > 0) values[key.slice(prefix.length)] = entries;
+    }
+    return Object.keys(values).length > 0 ? values : undefined;
+}
+
+/** Parse the stable, shareable URL representation of a View execution request. */
+export function parseViewState(search: string): ExecuteViewRequest {
+    const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search);
+    const query = params.get(QUERY_PARAM)?.trim();
+    const display = params.get(DISPLAY_PARAM)?.trim();
+    const sort = params.get(SORT_PARAM)?.trim();
+    const offset = nonNegativeInteger(params.get(OFFSET_PARAM));
+    const key_terms = collectPrefixedValues(params, KEY_TERM_PREFIX);
+    const navigation = collectPrefixedValues(params, NAVIGATION_PREFIX);
+
+    return {
+        ...(query ? { query } : {}),
+        ...(key_terms ? { key_terms } : {}),
+        ...(navigation ? { navigation } : {}),
+        ...(display ? { display } : {}),
+        ...(sort ? { sort } : {}),
+        ...(offset ? { offset } : {}),
+    };
+}
+
+function deleteManagedParams(params: URLSearchParams): void {
+    for (const key of [...params.keys()]) {
+        if (
+            key === QUERY_PARAM ||
+            key === DISPLAY_PARAM ||
+            key === SORT_PARAM ||
+            key === OFFSET_PARAM ||
+            key.startsWith(KEY_TERM_PREFIX) ||
+            key.startsWith(NAVIGATION_PREFIX)
+        ) {
+            params.delete(key);
+        }
+    }
+}
+
+function appendRecord(params: URLSearchParams, prefix: string, values: Record<string, string[]> | undefined): void {
+    if (!values) return;
+    for (const [key, entries] of Object.entries(values).sort(([left], [right]) => left.localeCompare(right))) {
+        for (const value of entries) {
+            if (value !== '') params.append(`${prefix}${key}`, value);
+        }
+    }
+}
+
+/** Serialize View state while preserving unrelated host parameters such as account/project selection. */
+export function serializeViewState(request: ExecuteViewRequest, currentSearch = ''): string {
+    const params = new URLSearchParams(currentSearch.startsWith('?') ? currentSearch.slice(1) : currentSearch);
+    deleteManagedParams(params);
+
+    if (request.query?.trim()) params.set(QUERY_PARAM, request.query.trim());
+    if (request.display) params.set(DISPLAY_PARAM, request.display);
+    if (request.sort) params.set(SORT_PARAM, request.sort);
+    if (request.offset && request.offset > 0) params.set(OFFSET_PARAM, String(request.offset));
+    appendRecord(params, KEY_TERM_PREFIX, request.key_terms);
+    appendRecord(params, NAVIGATION_PREFIX, request.navigation);
+
+    const value = params.toString();
+    return value ? `?${value}` : '';
+}
+
+function selectedRecord(result: ViewExecutionResult): Record<string, string[]> | undefined {
+    const selections = Object.fromEntries(
+        Object.entries(result.navigation)
+            .filter(([, navigation]) => navigation.selected.length > 0)
+            .map(([id, navigation]) => [id, navigation.selected]),
+    );
+    return Object.keys(selections).length > 0 ? selections : undefined;
+}
+
+/** Remove stale configuration IDs and apply the display/sort selected by the authoritative runtime. */
+export function canonicalizeViewState(request: ExecuteViewRequest, result: ViewExecutionResult): ExecuteViewRequest {
+    const keyTermIds = new Set(result.definition.search?.key_terms?.map((term) => term.id) ?? []);
+    const key_terms = request.key_terms
+        ? Object.fromEntries(
+              Object.entries(request.key_terms).filter(([id, values]) => keyTermIds.has(id) && values.length),
+          )
+        : undefined;
+    const navigation = selectedRecord(result);
+
+    return {
+        ...(request.query?.trim() ? { query: request.query.trim() } : {}),
+        ...(key_terms && Object.keys(key_terms).length > 0 ? { key_terms } : {}),
+        ...(navigation ? { navigation } : {}),
+        ...(result.display ? { display: result.display } : {}),
+        ...(result.sort ? { sort: result.sort } : {}),
+        ...(request.offset && request.offset > 0 ? { offset: request.offset } : {}),
+        ...(request.limit ? { limit: request.limit } : {}),
+    };
+}
+
+/**
+ * Resolve the sort the server actually applied. Natural-language queries with
+ * no returned sort use Elasticsearch relevance rather than the browse default.
+ */
+export function resolveViewSort(
+    request: ExecuteViewRequest,
+    result: ViewExecutionResult,
+    defaultSort: string | undefined,
+): string | undefined {
+    return result.sort ?? request.sort ?? (request.query?.trim() ? undefined : defaultSort);
+}
+
+export function replaceViewStateInUrl(request: ExecuteViewRequest): void {
+    if (typeof window === 'undefined') return;
+    const search = serializeViewState(request, window.location.search);
+    window.history.replaceState(window.history.state || {}, '', `${window.location.pathname}${search}`);
+}