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

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

@@ -0,0 +1,150 @@
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
+import { ContentObjectStatus, type ViewExecutionDefinition, type ViewExecutionResult } from '@vertesia/common';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { ViewDropTarget } from './ViewDropTarget.js';
+
+vi.mock('../store/objects/upload/DocumentUploadModal.js', () => ({
+    DocumentUploadModal: ({
+        isOpen,
+        files,
+        collectionId,
+        selectedFolder,
+        initialTypeId,
+        defaultProperties,
+        allowFolders,
+    }: {
+        isOpen: boolean;
+        files: File[];
+        collectionId?: string;
+        selectedFolder?: string;
+        initialTypeId?: string;
+        defaultProperties?: Record<string, unknown>;
+        allowFolders?: boolean;
+    }) =>
+        isOpen ? (
+            <div
+                data-testid="upload-modal"
+                data-collection-id={collectionId}
+                data-location={selectedFolder}
+                data-type-id={initialTypeId}
+                data-properties={JSON.stringify(defaultProperties)}
+                data-allow-folders={String(allowFolders)}
+            >
+                {files.map((file) => file.name).join(',')}
+            </div>
+        ) : null,
+}));
+
+const definition: ViewExecutionDefinition = {
+    name: 'Inbox',
+    results: {
+        default_display: 'list',
+        displays: [{ id: 'list', label: 'List', type: 'list', title: { field: 'name' } }],
+        drop: {
+            handler: 'upload',
+            params: {
+                type_id: 'invoice',
+                collection_id: 'inbox',
+                location: '/Inbox',
+                properties: { source: 'view' },
+                allow_folders: false,
+            },
+        },
+    },
+};
+
+const result: ViewExecutionResult = {
+    view: 'inbox',
+    revision: 1,
+    definition,
+    display: 'list',
+    search: { requested_mode: 'browse', applied_mode: 'browse', warnings: [] },
+    hits: [
+        {
+            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: '/Inbox',
+                status: ContentObjectStatus.completed,
+                properties: {},
+                revision: { root: 'document-1', head: true },
+            },
+        },
+    ],
+    total: 1,
+    navigation: {},
+    took: 1,
+};
+
+function dropFile(target: HTMLElement, name: string): File {
+    const file = new File(['content'], name, { type: 'application/pdf' });
+    fireEvent.drop(target, { dataTransfer: { files: [file] } });
+    return file;
+}
+
+describe('ViewDropTarget', () => {
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('opens the built-in uploader for a JSON-configured upload drop', async () => {
+        renderWithProviders(
+            <ViewDropTarget definition={definition} request={{}} result={result} canWrite refresh={vi.fn()}>
+                <div>View results</div>
+            </ViewDropTarget>,
+        );
+
+        const target = screen.getByText('View results').parentElement;
+        expect(target).not.toBeNull();
+        dropFile(target as HTMLElement, 'invoice.pdf');
+
+        const modal = await screen.findByTestId('upload-modal');
+        expect(modal.textContent).toContain('invoice.pdf');
+        expect(modal.dataset).toMatchObject({
+            collectionId: 'inbox',
+            location: '/Inbox',
+            typeId: 'invoice',
+            properties: '{"source":"view"}',
+            allowFolders: 'false',
+        });
+    });
+
+    it('runs a code contribution instead of the configured upload action', async () => {
+        const run = vi.fn();
+        renderWithProviders(
+            <ViewDropTarget
+                definition={definition}
+                request={{ query: 'open invoices' }}
+                result={result}
+                contribution={{ run }}
+                canWrite
+                refresh={vi.fn()}
+            >
+                <div>View results</div>
+            </ViewDropTarget>,
+        );
+
+        const target = screen.getByText('View results').parentElement;
+        expect(target).not.toBeNull();
+        const file = dropFile(target as HTMLElement, 'invoice.pdf');
+
+        await waitFor(() => {
+            expect(run).toHaveBeenCalledOnce();
+            expect(run).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    configuration: definition.results?.drop,
+                    files: [file],
+                    request: { query: 'open invoices' },
+                }),
+            );
+        });
+        expect(screen.queryByTestId('upload-modal')).toBeNull();
+    });
+});

package/src/features/views/ViewDropTarget.tsx

@@ -0,0 +1,140 @@
+import type { ExecuteViewRequest, ViewExecutionDefinition, ViewExecutionResult } from '@vertesia/common';
+import { Spinner, useToast } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { DropZone } from '@vertesia/ui/widgets';
+import { type DragEvent, type ReactNode, useCallback, useRef, useState } from 'react';
+import { DocumentUploadModal } from '../store/objects/upload/DocumentUploadModal.js';
+import type { ViewDropContribution } from './types.js';
+
+interface ViewDropTargetProps {
+    children: ReactNode;
+    definition: ViewExecutionDefinition;
+    request: ExecuteViewRequest;
+    result: ViewExecutionResult;
+    contribution?: ViewDropContribution;
+    canWrite: boolean;
+    refresh: () => Promise<void>;
+}
+
+function droppedFiles(event: DragEvent<HTMLDivElement>): File[] {
+    if (event.dataTransfer.items) {
+        return Array.from(event.dataTransfer.items)
+            .filter((item) => item.kind === 'file')
+            .map((item) => item.getAsFile())
+            .filter((file): file is File => file !== null);
+    }
+    return Array.from(event.dataTransfer.files);
+}
+
+export function ViewDropTarget({
+    children,
+    definition,
+    request,
+    result,
+    contribution,
+    canWrite,
+    refresh,
+}: ViewDropTargetProps) {
+    const { t } = useUITranslation();
+    const toast = useToast();
+    const configuration = definition.results?.drop;
+    const builtinEnabled = configuration?.handler === 'upload' && canWrite;
+    const enabled = contribution !== undefined || builtinEnabled;
+    const [isDragging, setIsDragging] = useState(false);
+    const [isRunning, setIsRunning] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    const runningRef = useRef(false);
+
+    const handleFiles = useCallback(
+        async (nextFiles: File[]) => {
+            if (!nextFiles.length) return;
+            if (contribution) {
+                if (runningRef.current) return;
+                runningRef.current = true;
+                setIsRunning(true);
+                try {
+                    await contribution.run({ configuration, files: nextFiles, definition, request, result, refresh });
+                } catch (error: unknown) {
+                    console.error('View drop action failed:', error);
+                    toast({
+                        status: 'error',
+                        title: t('view.dropFailed'),
+                        description: t('view.actionFailedDescription'),
+                    });
+                } finally {
+                    runningRef.current = false;
+                    setIsRunning(false);
+                }
+                return;
+            }
+            if (builtinEnabled) setFiles(nextFiles);
+        },
+        [builtinEnabled, configuration, contribution, definition, refresh, request, result, t, toast],
+    );
+
+    if (!enabled) return children;
+
+    const params = configuration?.params;
+    return (
+        <>
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: HTML has no dedicated semantic element for a native file drop target. */}
+            <div
+                className="relative min-h-48"
+                onDragEnter={(event) => {
+                    event.preventDefault();
+                    setIsDragging(true);
+                }}
+                onDragOver={(event) => {
+                    event.preventDefault();
+                    setIsDragging(true);
+                }}
+                onDragLeave={(event) => {
+                    event.preventDefault();
+                    if (!event.currentTarget.contains(event.relatedTarget as Node)) setIsDragging(false);
+                }}
+                onDrop={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    setIsDragging(false);
+                    if ((event.target as Element).closest('[data-view-drop-zone]')) return;
+                    void handleFiles(droppedFiles(event));
+                }}
+            >
+                {children}
+                {isRunning && (
+                    <div className="absolute inset-0 z-40 flex items-center justify-center bg-background/80">
+                        <Spinner size="xl" />
+                    </div>
+                )}
+                <div
+                    data-view-drop-zone
+                    className={`pointer-events-none absolute inset-0 ${isDragging ? 'z-50' : '-z-10'}`}
+                >
+                    <DropZone
+                        onDrop={(nextFiles) => void handleFiles(nextFiles)}
+                        message={t('view.dropFiles')}
+                        buttonLabel={t('view.selectFiles')}
+                        allowFolders={params?.allow_folders ?? true}
+                        className={`pointer-events-auto absolute inset-0 bg-background/90 ${isDragging ? 'flex' : 'hidden'}`}
+                    />
+                </div>
+            </div>
+            {builtinEnabled && (
+                <DocumentUploadModal
+                    isOpen={files.length > 0}
+                    onClose={() => setFiles([])}
+                    files={files}
+                    collectionId={params?.collection_id}
+                    selectedFolder={params?.location}
+                    initialTypeId={params?.type_id}
+                    defaultProperties={params?.properties}
+                    allowFolders={params?.allow_folders ?? true}
+                    title={t('view.uploadToView')}
+                    onUploadComplete={(uploadResult) => {
+                        if (uploadResult.success) void refresh();
+                    }}
+                />
+            )}
+        </>
+    );
+}

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

@@ -270,4 +270,76 @@ describe('ViewExperience', () => {
             expect(execute).toHaveBeenLastCalledWith(expect.objectContaining({ sort: 'name_asc' }));
         });
     });
+
+    it('passes selected hits to an app-contributed action', async () => {
+        const baseResults = result.definition.results;
+        const baseHit = result.hits[0];
+        if (!baseResults || !baseHit) throw new Error('Expected the View fixture to include results and one hit');
+        const selectableResult = {
+            ...result,
+            definition: {
+                ...result.definition,
+                results: {
+                    ...baseResults,
+                    default_display: 'list',
+                    displays: [{ id: 'list', label: 'List', type: 'list', title: { field: 'name' } }],
+                    selection: { mode: 'multiple', select_all: 'page' },
+                    actions: {
+                        include_defaults: false,
+                        items: [
+                            {
+                                id: 'approve',
+                                label: 'Approve',
+                                handler: 'approve-orders',
+                                placement: 'selection',
+                                requires_selection: 'any',
+                            },
+                        ],
+                    },
+                },
+            },
+            display: 'list',
+            hits: [
+                ...result.hits,
+                {
+                    ...baseHit,
+                    id: 'document-2',
+                    document: {
+                        ...baseHit.document,
+                        id: 'document-2',
+                        name: 'Expansion Agreement',
+                        revision: { root: 'document-2', head: true },
+                    },
+                },
+            ],
+            total: 2,
+        } satisfies ViewExecutionResult;
+        const execute = vi.fn().mockResolvedValue(selectableResult);
+        const approve = vi.fn();
+
+        renderWithProviders(
+            <ViewExperience
+                viewId="selectable-orders"
+                execute={execute}
+                contributions={{ actions: { 'approve-orders': { run: approve } } }}
+                syncUrl={false}
+                showHeader={false}
+            />,
+        );
+
+        fireEvent.click(await screen.findByRole('checkbox', { name: 'Select all results on this page' }));
+        fireEvent.click(await screen.findByRole('button', { name: 'Approve' }));
+
+        await waitFor(() => {
+            expect(approve).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: expect.objectContaining({ handler: 'approve-orders' }),
+                    hits: [
+                        expect.objectContaining({ id: 'document-1' }),
+                        expect.objectContaining({ id: 'document-2' }),
+                    ],
+                }),
+            );
+        });
+    });
 });