Module API for adding new file upload mechanisms (#33355)

* Initial reword of upload to MVVM. * Update tests * More incremental improvements * Refactor tests to use helper method for composer uploads. * Add drag and drop tests * lint * Add commentary * fixup test * More precise selector * Retarget uploads * lint * fixup * one more type * update snap * Fixup composerUploadFiles * fix import * lint * Copy and paste fixes too * Add tests for pasting * Add tests for pasting files. * Remove redundant fn * rm comment * tidy up * Test cleanup * More clean up * another fix * Begin fleshing out * Park changes * More stuff * Use condensed version * Cleanup tests * more cleaning * last bity * Add a test for the composer * Park up changes * Rewrite Measured to be a functional component * Add tests to cover narrow viewports * lint * breakpoint is optional * Cleanup * Support narrow mode * fixup * begone * Provide default value * add label * fixup test * update copyright * cleanup * Be a bit more lazy with FileDropTarget * remove a debug statement * Fixup * fix two snaps * Update screenshot * and the other one * Update snaps * unfake CIDER * update screens again * remove extra test * Undo accidental snapshots * Bit of tidyup * fixup * even more tidyup * may drag and drop file * tidy up again * snap snap snap * Use load to make sonarQube happy * Bunch of refactors * More cleanup * cleanup debug code * tweaks * remove a test we no longer need * make it happy * fix import * fixup * Update snaps * typo * one off * Add tests * lint * remove only * Reduce screenshot scope * fix snapshot usage * cleanup
2026-05-18 21:41:38 +00:00
parent 66b739fea9
commit 02b6520f09
30 changed files with 1627 additions and 831 deletions
@@ -10,26 +10,21 @@ import { render, fireEvent } from "jest-matrix-react";
 import { useMockedViewModel } from "@element-hq/web-shared-components";

 import FileDropTarget from "../../../../src/components/structures/FileDropTarget.tsx";
-import {
-    RoomUploadContext,
-    type RoomUploadViewActions,
-    type RoomUploadViewModel,
-    type RoomUploadViewSnapshot,
-} from "../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
+import { RoomUploadContext, type RoomUploadViewModel } from "../../../../src/viewmodels/room/RoomUploadViewModel.tsx";

 function FileDropTargetWrapped({
    element,
-    snapshot,
-    actions,
+    mayDragAndDropFile = false,
+    onFileDrop,
 }: {
    element: HTMLDivElement;
-    snapshot: RoomUploadViewSnapshot;
-    actions: Partial<RoomUploadViewActions>;
+    mayDragAndDropFile?: boolean;
+    onFileDrop: RoomUploadViewModel["initiateViaDataTransfer"];
 }) {
-    const mockVm = useMockedViewModel<RoomUploadViewSnapshot, RoomUploadViewActions>(
-        snapshot,
-        actions as RoomUploadViewActions,
-    );
+    const mockVm = useMockedViewModel<
+        { mayDragAndDropFile: boolean },
+        Pick<RoomUploadViewModel, "initiateViaDataTransfer">
+    >({ mayDragAndDropFile }, { initiateViaDataTransfer: onFileDrop });
    return (
        <RoomUploadContext.Provider value={mockVm as RoomUploadViewModel}>
            <FileDropTarget parent={element} />
@@ -43,11 +38,7 @@ describe("FileDropTarget", () => {
        const onFileDrop = jest.fn();

        const { asFragment } = render(
-            <FileDropTargetWrapped
-                element={element}
-                snapshot={{ mayUpload: true }}
-                actions={{ initiateViaDataTransfer: onFileDrop }}
-            />,
+            <FileDropTargetWrapped element={element} mayDragAndDropFile onFileDrop={onFileDrop} />,
        );
        expect(asFragment()).toMatchSnapshot();
    });
@@ -56,11 +47,7 @@ describe("FileDropTarget", () => {
        const element = document.createElement("div");
        const onFileDrop = jest.fn();
        const { asFragment } = render(
-            <FileDropTargetWrapped
-                element={element}
-                snapshot={{ mayUpload: true }}
-                actions={{ initiateViaDataTransfer: onFileDrop }}
-            />,
+            <FileDropTargetWrapped element={element} mayDragAndDropFile onFileDrop={onFileDrop} />,
        );
        fireEvent.dragEnter(element, {
            dataTransfer: {
@@ -73,13 +60,7 @@ describe("FileDropTarget", () => {
    it("should not render drop file prompt on mouse over with file if permissions do not allow", () => {
        const element = document.createElement("div");
        const onFileDrop = jest.fn();
-        const { asFragment } = render(
-            <FileDropTargetWrapped
-                element={element}
-                snapshot={{ mayUpload: false }}
-                actions={{ initiateViaDataTransfer: onFileDrop }}
-            />,
-        );
+        const { asFragment } = render(<FileDropTargetWrapped element={element} onFileDrop={onFileDrop} />);
        fireEvent.dragEnter(element, {
            dataTransfer: {
                types: ["Files"],