@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260826.064249Z

package/src/features/store/objects/upload/DocumentUploadModal.tsx

@@ -1,4 +1,4 @@
-import type { Collection, ContentObjectTypeCatalogEntry, DynamicCollection } from '@vertesia/common';
+import type { Collection, ContentObjectTypeCatalogEntry, DynamicCollection, JSONObject } from '@vertesia/common';
 import {
     Button,
     errorMessage,
@@ -59,6 +59,10 @@ interface DocumentUploadModalProps {
     /** Show only the type selection, used for type change operations */
     showTypeSelectionOnly?: boolean;
     allowFolders?: boolean;
+    /** Preselect a content type while preserving the normal type chooser. */
+    initialTypeId?: string;
+    /** Properties applied to newly created objects from this upload. */
+    defaultProperties?: JSONObject;
 }
 
 /**
@@ -81,6 +85,8 @@ export function DocumentUploadModal({
     hideFileSelection = false,
     showTypeSelectionOnly = false,
     allowFolders = true,
+    initialTypeId,
+    defaultProperties,
 }: DocumentUploadModalProps) {
     const { client } = useUserSession();
     const { registry: typeRegistry } = useTypeRegistry();
@@ -222,7 +228,7 @@ export function DocumentUploadModal({
             // Always reset state first
             setProcessedFiles([]);
             setProcessingDone(false);
-            setSelectedType(null);
+            setSelectedType(initialTypeId ? (typeRegistry?.getType(initialTypeId) ?? null) : null);
             setFileStatuses([]);
             setIsUploading(false);
             setUploadComplete(false);
@@ -243,7 +249,7 @@ export function DocumentUploadModal({
             // Create a new key to ensure the modal is fresh
             setModalKey(Date.now());
         }
-    }, [isOpen, initialFiles, processFiles, resolvedTitle]);
+    }, [initialFiles, initialTypeId, isOpen, processFiles, resolvedTitle, typeRegistry]);
 
     // Complete cleanup when modal closes
     const handleClose = () => {
@@ -415,6 +421,7 @@ export function DocumentUploadModal({
                                         content: fileInfo.file,
                                         location:
                                             fileInfo.location || fileInfo.file.webkitRelativePath || fileInfo.name,
+                                        properties: defaultProperties,
                                     },
                                     {
                                         collection_id: collectionId,

package/src/features/store/objects/upload/useSmartFileUploadProcessing.ts

@@ -1,4 +1,4 @@
-import type { ComplexSearchPayload, ContentObjectItem, FindPayload } from '@vertesia/common';
+import type { ComplexSearchPayload, FindPayload } from '@vertesia/common';
 import { errorMessage, useToast } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
@@ -7,6 +7,11 @@ import { Md5 } from 'ts-md5';
 
 const t = i18nInstance.getFixedT(null, NAMESPACE);
 
+interface ExistingHashMatch {
+    id: string;
+    content?: { etag?: string };
+}
+
 /**
  * Types of actions that can be taken with a file
  */
@@ -140,20 +145,24 @@ export function useSmartFileUploadProcessing() {
                         'content.etag': { $in: hashes },
                     };
 
-                    let res: Array<Pick<ContentObjectItem, 'id' | 'content'>>;
+                    let res: ExistingHashMatch[];
 
                     if (limitToCollectionId) {
                         const payload: ComplexSearchPayload = {
                             query: { match: query },
                             select: 'id content.etag',
                         };
-                        res = (await client.store.collections.searchMembers(limitToCollectionId, payload)).results;
+                        res = (
+                            await client.store.collections.searchMembers(limitToCollectionId, payload)
+                        ).results.filter((doc): doc is ExistingHashMatch => typeof doc.id === 'string');
                     } else {
-                        const payload: FindPayload = {
+                        const payload = {
                             query,
                             select: 'id content.etag',
-                        };
-                        res = await client.store.objects.find(payload);
+                        } satisfies FindPayload & { select: string };
+                        res = (await client.store.objects.find(payload)).flatMap((doc) =>
+                            typeof doc.id === 'string' ? [{ id: doc.id, content: doc.content }] : [],
+                        );
                     }
 
                     for (const doc of res) {

package/src/features/store/types/ContentObjectTypesTable.tsx

@@ -3,11 +3,8 @@ import { Button, CopyButton, Table, TBody, THead, VTooltip } from '@vertesia/ui/
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useNavigate } from '@vertesia/ui/router';
 import clsx from 'clsx';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import { Filter } from 'lucide-react';
-
-dayjs.extend(relativeTime);
+import dayjs from '../../../core/utils/dayjs.js';
 
 const ACTION_BTN_CLASS =
     'h-6 w-6 p-0 opacity-0 group-hover/field:opacity-100 text-muted hover:text-foreground transition-opacity shrink-0';

package/src/features/store/types/IntakePolicyEditor.tsx

@@ -345,7 +345,17 @@ export function IntakePolicyEditor({
             onSaveProp ??
             (objectType
                 ? (next: ContentTypeIntakePolicy) =>
-                      store.types.update(objectType.id, { intake: next }).then((response) => response.intake)
+                      store.types
+                          .update(objectType.id, {
+                              intake: next,
+                              ...(objectType.edit_revision === undefined
+                                  ? {}
+                                  : { expected_edit_revision: objectType.edit_revision }),
+                          })
+                          .then((response) => {
+                              objectType.edit_revision = response.edit_revision;
+                              return response.intake;
+                          })
                 : undefined);
         if (!persist) {
             return;

package/src/features/store/types/ObjectSchemaEditor.tsx

@@ -35,8 +35,12 @@ export function ObjectSchemaEditor({ objectType, onSchemaUpdate, readonly = fals
 
         setUpdating(true);
         store.types
-            .update(objectType.id, { object_schema: schema.schema })
-            .then(() => {
+            .update(objectType.id, {
+                object_schema: schema.schema,
+                ...(objectType.edit_revision === undefined ? {} : { expected_edit_revision: objectType.edit_revision }),
+            })
+            .then((response) => {
+                objectType.edit_revision = response.edit_revision;
                 onSchemaUpdate(schema);
                 toast({
                     status: 'success',

package/src/features/store/types/TableLayoutEditor.tsx

@@ -62,9 +62,11 @@ export function TableLayoutEditor({ objectType, onLayoutUpdate, readonly = false
         setUpdating(true);
         store.types
             .update(objectType.id, {
+                ...(objectType.edit_revision === undefined ? {} : { expected_edit_revision: objectType.edit_revision }),
                 table_layout,
             })
             .then((response) => {
+                objectType.edit_revision = response.edit_revision;
                 toast({
                     status: 'success',
                     title: t('store.tableLayoutUpdated'),

package/src/features/user/UserInfo.test.tsx

@@ -68,6 +68,16 @@ describe('UserInfo', () => {
         expect(retrieveUser).toHaveBeenCalledTimes(1);
     });
 
+    it('renders a service account title from a ref that has no nested type', async () => {
+        render(
+            <I18nProvider lng="en">
+                <UserInfo userRef="service_account:66b27abd91cf39f93cdc1335" showTitle />
+            </I18nProvider>,
+        );
+
+        expect(await screen.findByText(/~dc1335/)).toBeDefined();
+    });
+
     it('renders a missing group as an unknown principal and caches the 404', async () => {
         const error = Object.assign(new Error('Not Found'), { status: 404 });
         retrieveGroup.mockRejectedValueOnce(error);

package/src/features/user/UserInfo.tsx

@@ -104,16 +104,11 @@ interface ServiceInfoProps extends InfoProps {
 }
 function ServiceAccountAvatar({ accountId, showTitle = false, size = 'md' }: ServiceInfoProps) {
     const { t } = useUITranslation();
-    const _type = accountId.split(':')[0];
-    const _accountId = accountId.split(':')[1];
     const description = (
         <>
             <div>{t('user.serviceAccountDescription')}</div>
             <div className="text-muted text-sm">
-                <span className="font-semibold">Type:</span> {_type}
-            </div>
-            <div className="text-muted text-sm">
-                <span className="font-semibold">ID:</span> {_accountId}
+                <span className="font-semibold">ID:</span> {accountId}
             </div>
         </>
     );
@@ -124,7 +119,7 @@ function ServiceAccountAvatar({ accountId, showTitle = false, size = 'md' }: Ser
                 <Avatar src="/cloud.svg" name="SA" color="bg-amber-500" className="px-[5px] text-white" size={size} />
                 {showTitle && (
                     <div className="text-sm font-semibold ps-2 truncate">
-                        {t('user.serviceAccount')} : ~{_accountId.slice(-6)}
+                        {t('user.serviceAccount')} : ~{accountId.slice(-6)}
                     </div>
                 )}
             </div>

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

@@ -0,0 +1,80 @@
+import { cleanup, screen } from '@testing-library/react';
+import type { VertesiaClient } from '@vertesia/client';
+import { ContentObjectStatus, type ViewExecutionResult, type ViewHit } from '@vertesia/common';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import type { ViewSelectionController } from './types.js';
+import { ViewActionsProvider, ViewActionsToolbar } from './ViewActions.js';
+
+const hit: ViewHit = {
+    id: 'document-1',
+    document: {
+        id: 'document-1',
+        name: 'Invoice',
+        created_at: '2026-01-01T00:00:00.000Z',
+        created_by: 'user-1',
+        updated_at: '2026-01-01T00:00:00.000Z',
+        updated_by: 'user-1',
+        location: '/Invoices',
+        status: ContentObjectStatus.completed,
+        properties: {},
+        revision: { root: 'document-1', head: true },
+    },
+};
+
+const result: ViewExecutionResult = {
+    view: 'invoices',
+    revision: 1,
+    definition: {
+        name: 'Invoices',
+        results: {
+            default_display: 'list',
+            selection: { mode: 'multiple' },
+            actions: { include_defaults: true },
+            displays: [{ id: 'list', label: 'List', type: 'list', title: { field: 'name' } }],
+        },
+    },
+    display: 'list',
+    search: { requested_mode: 'browse', applied_mode: 'browse', warnings: [] },
+    hits: [hit],
+    total: 1,
+    navigation: {},
+    took: 1,
+};
+
+const selection: ViewSelectionController = {
+    mode: 'multiple',
+    selectAll: false,
+    selectedIds: [hit.id],
+    selectedHits: [hit],
+    isSelected: (id) => id === hit.id,
+    toggle: vi.fn(),
+    togglePage: vi.fn(),
+    clear: vi.fn(),
+};
+
+describe('ViewActionsProvider', () => {
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('enables the standard export and permission-gated delete actions', () => {
+        renderWithProviders(
+            <ViewActionsProvider
+                definition={result.definition}
+                request={{}}
+                result={result}
+                selection={selection}
+                client={{} as VertesiaClient}
+                canDelete
+                refresh={vi.fn()}
+            >
+                <ViewActionsToolbar selection={selection} page={result.hits} />
+            </ViewActionsProvider>,
+        );
+
+        expect(screen.getByRole('button', { name: /export/i })).not.toBeNull();
+        expect(screen.getByRole('button', { name: /delete/i })).not.toBeNull();
+    });
+});

package/src/features/views/ViewActions.tsx

@@ -0,0 +1,352 @@
+import type { VertesiaClient } from '@vertesia/client';
+import type {
+    ExecuteViewRequest,
+    ViewActionConfiguration,
+    ViewExecutionDefinition,
+    ViewExecutionResult,
+    ViewHit,
+} from '@vertesia/common';
+import {
+    Button,
+    Checkbox,
+    ConfirmModal,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    SelectList,
+    useToast,
+} from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { Download, EllipsisVertical, Trash2, X } from 'lucide-react';
+import { createContext, type ReactNode, useCallback, useContext, useId, useMemo, useRef, useState } from 'react';
+import { ExportPropertiesModal } from '../store/objects/ExportPropertiesModal.js';
+import type {
+    ViewActionContext,
+    ViewActionContribution,
+    ViewExperienceContributions,
+    ViewSelectionController,
+} from './types.js';
+
+interface PendingAction {
+    action: ViewActionConfiguration;
+    hits: ViewHit[];
+}
+
+interface ViewActionsRuntime {
+    actions: ViewActionConfiguration[];
+    runningActionId?: string;
+    run: (action: ViewActionConfiguration, hits: ViewHit[]) => void;
+}
+
+const ViewActionsContext = createContext<ViewActionsRuntime | undefined>(undefined);
+
+export function useViewActions(): ViewActionsRuntime | undefined {
+    return useContext(ViewActionsContext);
+}
+
+interface ViewActionsProviderProps {
+    children: ReactNode;
+    definition: ViewExecutionDefinition;
+    request: ExecuteViewRequest;
+    result: ViewExecutionResult;
+    selection?: ViewSelectionController;
+    contributions?: ViewExperienceContributions;
+    client?: VertesiaClient;
+    canDelete: boolean;
+    refresh: () => Promise<void>;
+}
+
+function selectionMatches(action: ViewActionConfiguration, hits: ViewHit[]): boolean {
+    const requirement = action.requires_selection ?? (action.placement === 'toolbar' ? 'none' : 'any');
+    if (requirement === 'none') return true;
+    if (requirement === 'single') return hits.length === 1;
+    if (requirement === 'multiple') return hits.length > 1;
+    return hits.length > 0;
+}
+
+function triggerDownload(response: { type: string; name: string; data: string }): void {
+    const url = window.URL.createObjectURL(new Blob([response.data], { type: response.type }));
+    const anchor = document.createElement('a');
+    anchor.download = response.name;
+    anchor.href = url;
+    anchor.click();
+    window.setTimeout(() => window.URL.revokeObjectURL(url), 0);
+}
+
+export function ViewActionsProvider({
+    children,
+    definition,
+    request,
+    result,
+    selection,
+    contributions,
+    client,
+    canDelete,
+    refresh,
+}: ViewActionsProviderProps) {
+    const { t } = useUITranslation();
+    const toast = useToast();
+    const [pending, setPending] = useState<PendingAction>();
+    const [exportHits, setExportHits] = useState<ViewHit[]>();
+    const [isExporting, setIsExporting] = useState(false);
+    const [runningActionId, setRunningActionId] = useState<string>();
+    const runningActionRef = useRef(false);
+    const actionsConfiguration = definition.results?.actions;
+
+    const baseContext = useMemo<Omit<ViewActionContext, 'action' | 'hits'>>(
+        () => ({
+            definition,
+            request,
+            result,
+            refresh,
+            clearSelection: () => selection?.clear(),
+        }),
+        [definition, refresh, request, result, selection],
+    );
+
+    const actions = useMemo(() => {
+        const configured = (actionsConfiguration?.items ?? []).filter((action) => {
+            const contribution = contributions?.actions?.[action.handler];
+            return contribution !== undefined && (contribution.isAvailable?.(baseContext) ?? true);
+        });
+        if (!selection || actionsConfiguration?.include_defaults === false || !client) return configured;
+
+        const excluded = new Set(actionsConfiguration?.exclude_defaults ?? []);
+        const defaults: ViewActionConfiguration[] = [];
+        if (!excluded.has('export')) {
+            defaults.push({
+                id: 'export',
+                label: t('store.actions.exportProperties'),
+                handler: 'export',
+                placement: 'selection',
+                requires_selection: 'any',
+            });
+        }
+        if (canDelete && !excluded.has('delete')) {
+            defaults.push({
+                id: 'delete',
+                label: t('store.actions.delete'),
+                handler: 'delete',
+                placement: 'selection',
+                requires_selection: 'any',
+                destructive: true,
+                confirm: true,
+            });
+        }
+        return [...defaults, ...configured];
+    }, [actionsConfiguration, baseContext, canDelete, client, contributions?.actions, selection, t]);
+
+    const execute = useCallback(
+        async ({ action, hits }: PendingAction) => {
+            if (runningActionRef.current) return;
+            runningActionRef.current = true;
+            setRunningActionId(action.id);
+            try {
+                if (action.handler === 'delete') {
+                    if (!client) return;
+                    const response = await client.store.objects.delete(hits.map((hit) => hit.id));
+                    toast({
+                        status: response.failed.length > 0 ? 'warning' : 'success',
+                        title: t('view.deletedObjects', { count: response.deleted }),
+                    });
+                    selection?.clear();
+                    await refresh();
+                    return;
+                }
+
+                const contribution: ViewActionContribution | undefined = contributions?.actions?.[action.handler];
+                if (!contribution) return;
+                await contribution.run({ ...baseContext, action, hits });
+            } catch (error: unknown) {
+                console.error('View action failed:', error);
+                toast({
+                    status: 'error',
+                    title: t('view.actionFailed'),
+                    description: t('view.actionFailedDescription'),
+                });
+            } finally {
+                runningActionRef.current = false;
+                setRunningActionId(undefined);
+                setPending(undefined);
+            }
+        },
+        [baseContext, client, contributions?.actions, refresh, selection, t, toast],
+    );
+
+    const run = useCallback(
+        (action: ViewActionConfiguration, hits: ViewHit[]) => {
+            if (!selectionMatches(action, hits) || runningActionRef.current) return;
+            if (action.handler === 'export') {
+                setExportHits(hits);
+                return;
+            }
+            if (action.confirm) {
+                setPending({ action, hits });
+                return;
+            }
+            void execute({ action, hits });
+        },
+        [execute],
+    );
+
+    const closeExport = useCallback(
+        (format?: string | null) => {
+            if (!format || !exportHits?.length || !client) {
+                setExportHits(undefined);
+                return;
+            }
+            setIsExporting(true);
+            void client.store.objects
+                .exportProperties({ objectIds: exportHits.map((hit) => hit.id), type: format })
+                .then((response) => {
+                    triggerDownload(response);
+                    toast({ status: 'success', title: t('store.actions.exportProperties') });
+                    setExportHits(undefined);
+                })
+                .catch((error: unknown) => {
+                    console.error('View export failed:', error);
+                    toast({
+                        status: 'error',
+                        title: t('store.actions.errorExportProperties'),
+                        description: t('view.actionFailedDescription'),
+                    });
+                })
+                .finally(() => setIsExporting(false));
+        },
+        [client, exportHits, t, toast],
+    );
+
+    const value = useMemo<ViewActionsRuntime>(
+        () => ({ actions, runningActionId, run }),
+        [actions, run, runningActionId],
+    );
+
+    return (
+        <ViewActionsContext.Provider value={value}>
+            {children}
+            <ExportPropertiesModal
+                isOpen={exportHits !== undefined}
+                isExporting={isExporting}
+                onClose={closeExport}
+                allowExportAll={false}
+            />
+            <ConfirmModal
+                isOpen={pending !== undefined}
+                title={pending?.action.label ?? t('modal.confirm')}
+                content={t('view.confirmAction', {
+                    action: pending?.action.label ?? '',
+                    count: pending?.hits.length ?? 0,
+                })}
+                isLoading={runningActionId !== undefined}
+                onConfirm={() => {
+                    if (pending) void execute(pending);
+                }}
+                onCancel={() => setPending(undefined)}
+                confirmationValue={pending?.action.handler === 'delete' ? 'delete' : undefined}
+                confirmationLabel={pending?.action.handler === 'delete' ? t('view.typeDeleteToConfirm') : undefined}
+                confirmationPlaceholder={pending?.action.handler === 'delete' ? 'delete' : undefined}
+            />
+        </ViewActionsContext.Provider>
+    );
+}
+
+export function ViewActionsToolbar({
+    selection,
+    page,
+    showSelectPage = false,
+}: {
+    selection?: ViewSelectionController;
+    page: ViewHit[];
+    showSelectPage?: boolean;
+}) {
+    const { t } = useUITranslation();
+    const runtime = useViewActions();
+    const selectPageId = useId();
+    if (!runtime) return null;
+    const selected = selection?.selectedHits ?? [];
+    const selectedOnPage = selection ? page.filter((hit) => selection.isSelected(hit.id)).length : 0;
+    const allOnPageSelected = page.length > 0 && selectedOnPage === page.length;
+    const canSelectPage = showSelectPage && selection?.selectAll && page.length > 0;
+    const actions = runtime.actions.filter(
+        (action) =>
+            ((action.placement ?? 'selection') === 'toolbar' ||
+                ((action.placement ?? 'selection') === 'selection' && selected.length > 0)) &&
+            selectionMatches(action, selected),
+    );
+    if (actions.length === 0 && selected.length === 0 && !canSelectPage) return null;
+
+    return (
+        <div className="flex flex-wrap items-center gap-2">
+            {canSelectPage && selection && (
+                <div className="flex items-center gap-2">
+                    <Checkbox
+                        id={selectPageId}
+                        checked={allOnPageSelected ? true : selectedOnPage > 0 ? 'indeterminate' : false}
+                        onCheckedChange={(checked) => selection.togglePage(page, checked === true)}
+                    />
+                    <label htmlFor={selectPageId} className="text-sm text-muted">
+                        {t('view.selectPage')}
+                    </label>
+                </div>
+            )}
+            {selected.length > 0 && (
+                <>
+                    <span className="text-sm text-muted">{t('view.selectedCount', { count: selected.length })}</span>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        aria-label={t('view.clearSelection')}
+                        onClick={selection?.clear}
+                    >
+                        <X className="size-4" />
+                    </Button>
+                </>
+            )}
+            {actions.map((action) => (
+                <Button
+                    key={action.id}
+                    type="button"
+                    variant={action.destructive ? 'destructive' : 'outline'}
+                    size="sm"
+                    disabled={runtime.runningActionId !== undefined}
+                    onClick={() => runtime.run(action, selected)}
+                >
+                    {action.handler === 'export' && <Download className="size-4" />}
+                    {action.handler === 'delete' && <Trash2 className="size-4" />}
+                    {action.label}
+                </Button>
+            ))}
+        </div>
+    );
+}
+
+export function ViewRowActions({ hit }: { hit: ViewHit }) {
+    const { t } = useUITranslation();
+    const runtime = useViewActions();
+    const actions = runtime?.actions.filter(
+        (action) => (action.placement ?? 'selection') === 'row' && selectionMatches(action, [hit]),
+    );
+    if (!runtime || !actions?.length) return null;
+
+    return (
+        <Popover>
+            <PopoverTrigger>
+                <Button type="button" variant="ghost" size="icon" aria-label={t('view.actions')}>
+                    <EllipsisVertical className="size-4" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-52 p-1" align="end" sideOffset={6}>
+                <SelectList
+                    options={actions}
+                    optionLayout={(action) => ({
+                        label: action.label,
+                        className: action.destructive ? 'text-destructive' : undefined,
+                    })}
+                    onChange={(action) => runtime.run(action, [hit])}
+                    noCheck
+                />
+            </PopoverContent>
+        </Popover>
+    );
+}