@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/store/objects/layout/renderers.tsx

@@ -1,38 +1,64 @@
-import dayjs from "dayjs";
-import LocalizedFormat from "dayjs/plugin/localizedFormat";
-import RelativeTime from "dayjs/plugin/relativeTime";
-import { shortId } from "../../../utils";
-import { ExternalLink, Eye } from "lucide-react";
-import { Button } from "@vertesia/ui/core";
+import { Button } from '@vertesia/ui/core';
+import dayjs from 'dayjs';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import RelativeTime from 'dayjs/plugin/relativeTime';
+import { ExternalLink, Eye } from 'lucide-react';
+import { shortId } from '../../../utils';
+
 dayjs.extend(RelativeTime);
 dayjs.extend(LocalizedFormat);
 
-const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string) => void) => (value: any, index: number) => React.ReactNode> = {
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null;
+}
+
+function getStringProperty(value: unknown, property: string): string | undefined {
+    if (!isRecord(value)) return undefined;
+    const propertyValue = value[property];
+    return typeof propertyValue === 'string' ? propertyValue : undefined;
+}
+
+function getObjectId(value: unknown): string {
+    if (typeof value === 'string') return value;
+    return getStringProperty(value, 'id') || '';
+}
+
+function renderableValue(value: unknown): React.ReactNode {
+    if (value == null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+        return value;
+    }
+    return String(value);
+}
+
+const renderers: Record<
+    string,
+    (params?: URLSearchParams, onClick?: (id: string) => void) => (value: unknown, index: number) => React.ReactNode
+> = {
     string(params?: URLSearchParams, _onClick?: (id: string) => void) {
-        let transforms: ((value: string) => string)[] = [];
+        const transforms: ((value: string) => string)[] = [];
         if (params) {
-            const slice = params.get("slice");
+            const slice = params.get('slice');
             if (slice) {
-                transforms.push((value: string) => value.slice(parseInt(slice)));
+                transforms.push((value: string) => value.slice(parseInt(slice, 10)));
             }
-            const max_length = params.get("max_length");
+            const max_length = params.get('max_length');
             if (max_length) {
-                transforms.push((value: string) => value.slice(0, parseInt(max_length)));
+                transforms.push((value: string) => value.slice(0, parseInt(max_length, 10)));
             }
-            if (params.has("upper")) {
+            if (params.has('upper')) {
                 transforms.push((value: string) => value.toUpperCase());
             }
-            if (params.has("lower")) {
+            if (params.has('lower')) {
                 transforms.push((value: string) => value.toLowerCase());
             }
-            if (params.has("capitalize")) {
+            if (params.has('capitalize')) {
                 transforms.push((value: string) => value[0].toUpperCase() + value.substring(1));
             }
-            if (params.has("ellipsis")) {
-                transforms.push((value: string) => value + "...");
+            if (params.has('ellipsis')) {
+                transforms.push((value: string) => `${value}...`);
             }
         }
-        return (value: any, index: number) => {
+        return (value: unknown, index: number) => {
             let v: string;
             if (value) {
                 v = String(value);
@@ -42,7 +68,7 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
                     }
                 }
             } else {
-                v = "";
+                v = '';
             }
 
             return <td key={index}>{v}</td>;
@@ -50,17 +76,17 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
     },
 
     fileSize(_params?: URLSearchParams, _onClick?: (id: string) => void) {
-        return (value: any, index: number) => {
-            let fileSize = "";
+        return (value: unknown, index: number) => {
+            let fileSize = '';
             if (value) {
                 const bytes = Number(value);
-                if (!isNaN(bytes)) {
-                    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+                if (!Number.isNaN(bytes)) {
+                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                     if (bytes === 0) {
-                        fileSize = "0 Bytes";
+                        fileSize = '0 Bytes';
                     } else {
                         const i = Math.floor(Math.log(bytes) / Math.log(1024));
-                        fileSize = `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+                        fileSize = `${(bytes / 1024 ** i).toFixed(2)} ${sizes[i]}`;
                     }
                 } else {
                     fileSize = String(value);
@@ -74,61 +100,66 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
         let currency: string | undefined;
         let decimals: string | undefined;
         if (params) {
-            currency = params.get("currency") || undefined;
-            decimals = params.get("decimals") || undefined;
+            currency = params.get('currency') || undefined;
+            decimals = params.get('decimals') || undefined;
         }
 
-        const digits = decimals ? parseInt(decimals) : 2;
+        const digits = decimals ? parseInt(decimals, 10) : 2;
 
-        return (value: any, index: number) => {
-            let v = new Intl.NumberFormat("en-US", {
-                style: currency ? "currency" : "decimal",
+        return (value: unknown, index: number) => {
+            const numberValue = Number(value);
+            const v = new Intl.NumberFormat('en-US', {
+                style: currency ? 'currency' : 'decimal',
                 currency,
                 maximumFractionDigits: digits,
-            }).format(value);
+            }).format(Number.isFinite(numberValue) ? numberValue : 0);
             return <td key={index}>{v}</td>;
         };
     },
     objectId(params?: URLSearchParams, onClick?: (id: string) => void) {
-        let transforms: ((value: string) => string)[] = [];
+        const transforms: ((value: string) => string)[] = [];
         let hasSlice = false;
         if (params) {
-            const slice = params.get("slice");
+            const slice = params.get('slice');
             if (slice) {
                 hasSlice = true;
-                transforms.push((value) => value.slice(parseInt(slice)));
+                transforms.push((value) => value.slice(parseInt(slice, 10)));
             }
         }
-        return (value: any, index: number) => {
-            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+        return (value: unknown, index: number) => {
+            const objectId = getObjectId(value);
+            const displayValue = transforms.reduce((v, t) => t(v), objectId);
             return (
-                <td key={index} className="flex justify-between items-center gap-2">
-                    {hasSlice ? '~' : ''}{displayValue}
+                <td key={index} className="flex justify-start items-center gap-2">
                     <Button
                         variant="ghost"
-                        alt="Preview Object"
+                        aria-label="Preview Object"
+                        title="Preview Object"
                         onClick={(e) => {
                             e.stopPropagation();
-                            onClick?.(value.id);
+                            onClick?.(objectId);
                         }}
                     >
                         <Eye className="size-4" />
                     </Button>
+                    {hasSlice ? '~' : ''}
+                    {displayValue}
                 </td>
             );
         };
     },
     objectName(params?: URLSearchParams, _onClick?: (id: string) => void) {
-        let title = "title";
+        let title = 'title';
         if (params) {
-            title = params.get("title") || "title";
+            title = params.get('title') || 'title';
         }
-        return (value: any, index: number) => {
-            return (
-                <td key={index}>
-                    {value.properties?.[title] || value.name || shortId(value.id)}
-                </td>
-            );
+        return (value: unknown, index: number) => {
+            const properties = isRecord(value) && isRecord(value.properties) ? value.properties : undefined;
+            const titleValue = properties?.[title];
+            const titleText = renderableValue(titleValue);
+            const name = getStringProperty(value, 'name');
+            const id = getStringProperty(value, 'id');
+            return <td key={index}>{titleText || name || (id ? shortId(id) : '')}</td>;
         };
     },
     // objectLink - same implementation as objectId but defaults to slice=-7
@@ -137,17 +168,19 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
         const hasSlice = true;
         transforms.push((value) => value.slice(-7));
 
-        return (value: any, index: number) => {
-            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+        return (value: unknown, index: number) => {
+            const objectId = getObjectId(value);
+            const displayValue = transforms.reduce((v, t) => t(v), objectId);
             return (
                 <td key={index} className="flex justify-between items-center gap-2 max-w-48">
-                    {hasSlice ? "~" : ""}{displayValue}
+                    {hasSlice ? '~' : ''}
+                    {displayValue}
                     <Button
                         variant="ghost"
                         alt="Preview Object"
                         onClick={(e) => {
                             e.stopPropagation();
-                            onClick?.(value.id);
+                            onClick?.(objectId);
                         }}
                     >
                         <Eye className="size-4" />
@@ -157,53 +190,54 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
         };
     },
     typeLink(_params?: URLSearchParams, _onClick?: (id: string) => void) {
-        return (value: any, index: number) => {
-            return <td key={index}>{value?.name || "n/a"}</td>;
+        return (value: unknown, index: number) => {
+            return <td key={index}>{getStringProperty(value, 'name') || 'n/a'}</td>;
         };
     },
     revision(_params?: URLSearchParams, _onClick?: (id: string) => void) {
-        return (value: any, index: number) => {
-            const rev = value?.revision;
+        return (value: unknown, index: number) => {
+            const rev = isRecord(value) && isRecord(value.revision) ? value.revision : undefined;
             if (!rev) return <td key={index} />;
+            const root = getStringProperty(rev, 'root');
+            const label = getStringProperty(rev, 'label');
             return (
                 <td key={index}>
                     <div className="flex flex-col gap-0.5">
-                        {rev.root &&
+                        {root && (
                             <div className="flex items-center gap-1">
-                                <span className="text-xs text-muted font-mono">
-                                    root: ~{rev.root.slice(-7)}
-                                </span>
-                                <a
-                                    href={`/store/objects/${rev.root}`}
-                                    onClick={(e) => e.stopPropagation()}
-                                >
+                                <span className="text-xs text-muted font-mono">root: ~{root.slice(-7)}</span>
+                                <a href={`/store/objects/${root}`} onClick={(e) => e.stopPropagation()}>
                                     <ExternalLink className="size-3 text-muted" />
                                 </a>
                             </div>
-                        }
-                        {rev.label && <span className="text-xs text-muted">label: {rev.label}</span>}
+                        )}
+                        {label && <span className="text-xs text-muted">label: {label}</span>}
                     </div>
                 </td>
             );
         };
     },
     date(params?: URLSearchParams, _onClick?: (id: string) => void) {
-        let method = "format";
-        let arg: string | undefined = "LLL";
+        let method = 'format';
+        let arg: string | undefined = 'LLL';
         if (params) {
-            const localized = params.get("localized");
+            const localized = params.get('localized');
             if (localized) {
                 arg = localized;
             } else {
-                const relative = params.get("relative");
+                const relative = params.get('relative');
                 if (relative) {
                     method = relative; // fromNow or toNow
                     arg = undefined;
                 }
             }
         }
-        return (value: any, index: number) => {
-            return <td key={index}>{(dayjs(value) as any)[method](arg)}</td>;
+        return (value: unknown, index: number) => {
+            const dateValue =
+                typeof value === 'string' || typeof value === 'number' || value instanceof Date ? value : undefined;
+            const date = dayjs(dateValue);
+            const text = method === 'fromNow' ? date.fromNow() : method === 'toNow' ? date.toNow() : date.format(arg);
+            return <td key={index}>{text}</td>;
         };
     },
 };

package/src/features/store/objects/search/DocumentSearchContext.test.ts

@@ -0,0 +1,49 @@
+import type { ZenoClient } from '@vertesia/client';
+import type { ContentObjectItem } from '@vertesia/common';
+import { describe, expect, it, vi } from 'vitest';
+import { DocumentSearch } from './DocumentSearchContext';
+
+function createClient(searchImpl: () => Promise<unknown>): ZenoClient {
+    return {
+        objects: {
+            search: vi.fn(searchImpl),
+        },
+    } as unknown as ZenoClient;
+}
+
+describe('DocumentSearch', () => {
+    it('settles loading state and preserves current objects when search fails', async () => {
+        const error = new Error('search failed');
+        const currentObject = { id: 'object-1', name: 'Existing object' } as ContentObjectItem;
+        const search = new DocumentSearch(createClient(() => Promise.reject(error)));
+        search.result.value = {
+            objects: [currentObject],
+            isLoading: false,
+            hasMore: true,
+        };
+
+        await expect(search.search()).resolves.toBe(false);
+
+        expect(search.initialized).toBe(true);
+        expect(search.result.value).toMatchObject({
+            error,
+            isLoading: false,
+            objects: [currentObject],
+            hasMore: false,
+        });
+    });
+
+    it('handles a missing index as an empty initialized search', async () => {
+        const error = Object.assign(new Error('index missing'), { status: 404 });
+        const search = new DocumentSearch(createClient(() => Promise.reject(error)));
+
+        await expect(search.search()).resolves.toBe(false);
+
+        expect(search.initialized).toBe(true);
+        expect(search.result.value).toEqual({
+            isLoading: false,
+            objects: [],
+            hasMore: false,
+        });
+    });
+});

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -1,28 +1,38 @@
-import { createContext, useContext } from 'react';
-
+import type { ZenoClient } from '@vertesia/client';
+import type {
+    ComplexSearchPayload,
+    ComplexSearchQuery,
+    ComputedFacetResponse,
+    ComputeObjectFacetPayload,
+    ContentObjectItem,
+    FacetBucket,
+    FacetSpec,
+    ObjectSearchQuery,
+} from '@vertesia/common';
 import { SharedState, useWatchSharedState } from '@vertesia/ui/core';
-import { ZenoClient } from '@vertesia/client';
-import { ComplexSearchPayload, ComplexSearchQuery, ComputeObjectFacetPayload, ComputedFacetResponse, ContentObjectItem, FacetBucket, FacetSpec, ObjectSearchQuery } from '@vertesia/common';
-import { SearchInterface } from '@vertesia/ui/features'
+import type { SearchInterface } from '@vertesia/ui/features';
+import { createContext, useContext } from 'react';
 
 interface DocumentSearchResult {
-    objects: ContentObjectItem[],
+    objects: ContentObjectItem[];
     error?: Error;
     isLoading: boolean;
     hasMore?: boolean;
 }
 
-
 export class DocumentSearch implements SearchInterface {
-
     collectionId?: string;
     facets = new SharedState<ComputedFacetResponse>({});
     result = new SharedState<DocumentSearchResult>({ objects: [], isLoading: false });
+    initialized = false;
 
     facetSpecs: FacetSpec[] = [];
     query: ComplexSearchQuery = {};
 
-    constructor(public client: ZenoClient, public limit = 100) { }
+    constructor(
+        public client: ZenoClient,
+        public limit = 100,
+    ) {}
 
     withFacets(facets: FacetSpec[]) {
         this.facetSpecs = facets;
@@ -46,22 +56,23 @@ export class DocumentSearch implements SearchInterface {
     }
 
     getFilterValue(name: string) {
-        return (this.query as any)[name];
+        return (this.query as Record<string, unknown>)[name];
     }
 
-    setFilterValue(name: string, value: any) {
-        (this.query as any)[name] = value;
+    setFilterValue(name: string, value: unknown) {
+        (this.query as Record<string, unknown>)[name] = value;
         // search now
-        this.search();
+        void this.search();
     }
 
-    setDefaultKeys(keys: any[]) {
+    setDefaultKeys(keys: unknown[]) {
         void keys;
     }
 
     clearFilters(autoSearch: boolean = true) {
         // Preserve search-related fields when clearing filters
-        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit, all_revisions } = this.query;
+        const { parent, full_text, vector, weights, score_aggregation, dynamic_scaling, limit, all_revisions } =
+            this.query;
         this.query = {
             parent,
             ...(full_text !== undefined && { full_text }),
@@ -70,11 +81,11 @@ export class DocumentSearch implements SearchInterface {
             ...(score_aggregation !== undefined && { score_aggregation }),
             ...(dynamic_scaling !== undefined && { dynamic_scaling }),
             ...(limit !== undefined && { limit }),
-            ...(all_revisions !== undefined && { all_revisions })
+            ...(all_revisions !== undefined && { all_revisions }),
         };
 
         if (autoSearch) {
-            this.search();
+            void this.search();
         }
     }
 
@@ -88,10 +99,11 @@ export class DocumentSearch implements SearchInterface {
     }
 
     reset(isLoading = false) {
+        this.initialized = false;
         this.result.value = {
             objects: [],
             isLoading,
-            hasMore: true
+            hasMore: true,
         };
     }
 
@@ -101,8 +113,8 @@ export class DocumentSearch implements SearchInterface {
             objects: prev.objects,
             isLoading: value,
             error: prev.error,
-            hasMore: prev.hasMore
-        }
+            hasMore: prev.hasMore,
+        };
     }
 
     _searchRequest(query: ComplexSearchQuery, limit: number, offset: number, includeFacets: boolean = true) {
@@ -110,20 +122,20 @@ export class DocumentSearch implements SearchInterface {
             limit,
             offset,
             query,
-            facets: includeFacets ? this.facetSpecs : undefined
+            facets: includeFacets ? this.facetSpecs : undefined,
         };
 
-        const request = this.collectionId ?
-            this.client.collections.searchMembers(this.collectionId, payload)
+        const request = this.collectionId
+            ? this.client.collections.searchMembers(this.collectionId, payload)
             : this.client.objects.search(payload);
-            
+
         return request;
     }
 
     _facetsRequest() {
-        const payload: ComputeObjectFacetPayload = { facets: this.facetSpecs, query: this.query }
-        return this.collectionId ?
-            this.client.collections.computeFacets(this.collectionId, payload)
+        const payload: ComputeObjectFacetPayload = { facets: this.facetSpecs, query: this.query };
+        return this.collectionId
+            ? this.client.collections.computeFacets(this.collectionId, payload)
             : this.client.objects.computeFacets(payload);
     }
 
@@ -133,18 +145,23 @@ export class DocumentSearch implements SearchInterface {
         });
     }
 
-    _search(loadMore = false, noFacets = false) {
-        if (this.isRunning && loadMore) { // avoid searching when a search is pending, but allow initial search
-            return Promise.resolve(false);
+    async _search(loadMore = false, noFacets = false): Promise<boolean> {
+        if (this.isRunning && loadMore) {
+            return false;
+        }
+        const previous = this.result.value;
+        if (!loadMore) {
+            this.initialized = true;
         }
         this.result.value = {
             isLoading: true,
             objects: loadMore ? this.objects : [],
-            hasMore: loadMore ? this.result.value.hasMore : true
-        }
+            hasMore: loadMore ? this.result.value.hasMore : true,
+        };
         const limit = this.limit;
         const offset = loadMore ? this.objects.length : 0;
-        return this._searchRequest(this.query, limit, offset, !noFacets).then(async (res) => {
+        try {
+            const res = await this._searchRequest(this.query, limit, offset, !noFacets);
             // Handle the new format with results and facets
             const results = res.results || [];
             const facets = res.facets || {};
@@ -152,8 +169,8 @@ export class DocumentSearch implements SearchInterface {
             this.result.value = {
                 isLoading: false,
                 objects: loadMore ? this.objects.concat(results) : results,
-                hasMore: results.length === limit
-            }
+                hasMore: results.length === limit,
+            };
 
             // Update facets if they were requested and returned
             if (!noFacets && facets && Object.keys(facets).length > 0) {
@@ -161,25 +178,25 @@ export class DocumentSearch implements SearchInterface {
             }
 
             return true;
-        }).catch((err) => {
+        } catch (err: unknown) {
             // index_not_found_exception means the data store has no index yet — treat as empty
-            if (err?.status === 404) {
+            if (typeof err === 'object' && err !== null && 'status' in err && err.status === 404) {
                 this.result.value = { isLoading: false, objects: [], hasMore: false };
                 return false;
             }
+            const error = err instanceof Error ? err : new Error(String(err));
             this.result.value = {
-                error: err,
+                error,
                 isLoading: false,
-                objects: this.objects,
-                hasMore: this.result.value.hasMore
-            }
-            throw err;
-        })
+                objects: previous.objects,
+                hasMore: false,
+            };
+            return false;
+        }
     }
 
     search(noFacets = false) {
-        // Allow initial search even if isLoading is true (for initial page load)
-        if (this.isRunning && this.objects.length > 0) {
+        if (this.isRunning) {
             return Promise.resolve(false);
         }
         return this._search(false, noFacets);
@@ -198,6 +215,7 @@ export class DocumentSearch implements SearchInterface {
 const DocumentSearchContext = createContext<DocumentSearch | undefined>(undefined);
 
 export function useDocumentSearch() {
+    // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
     return useContext(DocumentSearchContext)!;
 }
 
@@ -217,5 +235,4 @@ export function useDocumentSearchCount() {
     return result.total;
 }
 
-
 export { DocumentSearchContext as SearchContext };

package/src/features/store/objects/search/DocumentSearchProvider.tsx

@@ -1,7 +1,8 @@
-import { useUserSession } from "@vertesia/ui/session";
-import { FacetSpec } from "@vertesia/common";
-import React, { useMemo } from "react";
-import { DocumentSearch, SearchContext } from "./DocumentSearchContext";
+import type { FacetSpec } from '@vertesia/common';
+import { useUserSession } from '@vertesia/ui/session';
+import type React from 'react';
+import { useMemo } from 'react';
+import { DocumentSearch, SearchContext } from './DocumentSearchContext';
 
 interface DocumentSearchProviderProps {
     children: React.ReactNode;
@@ -12,7 +13,15 @@ interface DocumentSearchProviderProps {
     collectionId?: string;
     name?: string;
 }
-export function DocumentSearchProvider({ children, limit, parent, typeId, facets, name, collectionId }: DocumentSearchProviderProps) {
+export function DocumentSearchProvider({
+    children,
+    limit,
+    parent,
+    typeId,
+    facets,
+    name,
+    collectionId,
+}: DocumentSearchProviderProps) {
     const { store } = useUserSession();
     const search = useMemo(() => {
         let facetSpecs: FacetSpec[];
@@ -22,18 +31,18 @@ export function DocumentSearchProvider({ children, limit, parent, typeId, facets
             facetSpecs = [
                 {
                     name: 'status',
-                    field: 'status'
+                    field: 'status',
                 },
                 {
                     name: 'location',
-                    field: 'location'
-                }
-            ]
+                    field: 'location',
+                },
+            ];
             if (!typeId) {
                 facetSpecs.unshift({
                     name: 'type',
-                    field: 'type'
-                })
+                    field: 'type',
+                });
             }
         }
         const search = new DocumentSearch(store, limit).withFacets(facetSpecs);
@@ -45,9 +54,7 @@ export function DocumentSearchProvider({ children, limit, parent, typeId, facets
             search.query.all_revisions = true;
         }
         return search;
-    }, [typeId, limit, collectionId]);
+    }, [collectionId, facets, limit, name, parent, store, typeId]);
 
-    return (
-        <SearchContext.Provider value={search}>{children}</SearchContext.Provider>
-    )
-}
+    return <SearchContext.Provider value={search}>{children}</SearchContext.Provider>;
+}

package/src/features/store/objects/search/index.ts

@@ -1,2 +1,2 @@
-export * from "./DocumentSearchContext"
-export * from "./DocumentSearchProvider"
+export * from './DocumentSearchContext';
+export * from './DocumentSearchProvider';