Fix module composer upload options appearing twice (#34920)

* Fix composer upload options appearing twice.

* Cleanup

* reinstate type hack

Author: Half-Shot

apps/web/src/viewmodels/room/RoomUploadViewModel.test.tsx

@@ -81,7 +81,11 @@ describe("RoomUploadViewModel", () => {
             icon,
             onSelected,
         });
-        expect(vm.getSnapshot().options).toContainEqual({ type: "org.example.test", label: "My uploader", icon });
+        // The module option must appear exactly once, alongside the built-in local option.
+        expect(vm.getSnapshot().options).toEqual([
+            expect.objectContaining({ type: "local" }),
+            { type: "org.example.test", label: "My uploader", icon },
+        ]);
         vm.onUploadOptionSelected("org.example.test");
         expect(onSelected).toHaveBeenCalledWith(
             room.roomId,

apps/web/src/viewmodels/room/RoomUploadViewModel.tsx

@@ -75,16 +75,13 @@ export class RoomUploadViewModel
             },
         );
         // Initial check.
-        this.onRoomCurrentStateUpdated();
+        this.updateOptions();
         // Configure upload functions
         for (const option of moduleComposerApi.fileUploadOptions) {
             this.uploadSelectFns.set(option.type, option.onSelected);
         }
         this.uploadSelectFns.set("local", this.openUploadDialog);
-        room.on(RoomEvent.CurrentStateUpdated, this.onRoomCurrentStateUpdated);
         this.disposables.trackListener(room, RoomEvent.CurrentStateUpdated, this.onRoomCurrentStateUpdated);
-
-        moduleComposerApi.on(ModuleComposerApiEvents.UploaderOptionsChanged, this.onUploaderOptionsChanged);
         this.disposables.trackListener(
             moduleComposerApi,
             ModuleComposerApiEvents.UploaderOptionsChanged,
@@ -94,8 +91,12 @@ export class RoomUploadViewModel
     }
 
     private onRoomCurrentStateUpdated = (): void => {
+        this.updateOptions();
+    };
+
+    private updateOptions(): void {
         const maySendMessage = this.room.maySendMessage();
-        this.snapshot.merge({
+        this.snapshot.set({
             mayDragAndDropFile: maySendMessage,
             options: maySendMessage
                 ? [
@@ -112,20 +113,11 @@ export class RoomUploadViewModel
                   ]
                 : [],
         });
-    };
+    }
 
     private readonly onUploaderOptionsChanged = (option: ComposerApiFileUploadOption): void => {
         this.uploadSelectFns.set(option.type, option.onSelected);
-        this.snapshot.merge({
-            options: [
-                ...this.snapshot.current.options,
-                {
-                    type: option.type,
-                    label: option.label,
-                    icon: option.icon,
-                },
-            ],
-        });
+        this.updateOptions();
     };
 
     public setReplyToEvent = (replyToEvent?: MatrixEvent): void => {