Disable file drag-and-drop if insufficient permissions (#30186)

* Disable file drag-and-drop if insufficient permissions

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/FileDropTarget.tsx

@@ -7,11 +7,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { useEffect, useState } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../languageHandler";
 import UploadBigSvg from "../../../res/img/upload-big.svg";
+import { useRoomState } from "../../hooks/useRoomState.ts";
 
 interface IProps {
+    room: Room;
     parent: HTMLElement | null;
     onFileDrop(dataTransfer: DataTransfer): void;
 }
@@ -21,14 +24,15 @@ interface IState {
     counter: number;
 }
 
-const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
+const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
     const [state, setState] = useState<IState>({
         dragging: false,
         counter: 0,
     });
+    const hasPermission = useRoomState(room, (state) => state.maySendMessage(room.client.getUserId()!));
 
     useEffect(() => {
-        if (!parent || parent.ondrop) return;
+        if (!hasPermission || !parent || parent.ondrop) return;
 
         const onDragEnter = (ev: DragEvent): void => {
             ev.stopPropagation();
@@ -102,9 +106,9 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
             parent?.removeEventListener("dragenter", onDragEnter);
             parent?.removeEventListener("dragleave", onDragLeave);
         };
-    }, [parent, onFileDrop]);
+    }, [parent, onFileDrop, hasPermission]);
 
-    if (state.dragging) {
+    if (hasPermission && state.dragging) {
         return (
             <div className="mx_FileDropTarget">
                 <img src={UploadBigSvg} className="mx_FileDropTarget_image" alt="" />

src/components/structures/RoomView.tsx

@@ -316,7 +316,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
             <ErrorBoundary>
                 <RoomHeader room={room} />
                 <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
-                    <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} />
+                    <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} />
                     <div className="mx_RoomView_timeline">
                         <ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={props.resizeNotifier}>
                             {encryptionTile}
@@ -2564,7 +2564,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         {auxPanel}
                         {pinnedMessageBanner}
                         <main className={timelineClasses}>
-                            <FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
+                            <FileDropTarget
+                                parent={this.roomView.current}
+                                onFileDrop={this.onFileDrop}
+                                room={this.state.room}
+                            />
                             {topUnreadMessagesBar}
                             {jumpToBottom}
                             {messagePanel}

src/components/structures/ThreadView.tsx

@@ -388,7 +388,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
             timeline = (
                 <>
-                    <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} />
+                    <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} room={this.props.room} />
                     <TimelinePanel
                         key={this.state.thread.id}
                         ref={this.timelinePanel}

test/unit-tests/components/structures/FileDropTarget-test.tsx

@@ -0,0 +1,59 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { mocked } from "jest-mock";
+import { render, fireEvent } from "jest-matrix-react";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import FileDropTarget from "../../../../src/components/structures/FileDropTarget.tsx";
+import { stubClient } from "../../../test-utils";
+
+describe("FileDropTarget", () => {
+    let room: Room;
+    beforeEach(() => {
+        const client = stubClient();
+        room = new Room("!roomId:example.com", client, client.getUserId()!);
+        room.currentState.maySendMessage = jest.fn().mockReturnValue(true);
+    });
+
+    it("should render nothing when idle", () => {
+        const element = document.createElement("div");
+        const onFileDrop = jest.fn();
+
+        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should render drop file prompt on mouse over with file if permissions allow", () => {
+        const element = document.createElement("div");
+        const onFileDrop = jest.fn();
+        mocked(room.currentState.maySendMessage).mockReturnValue(true);
+
+        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        fireEvent.dragEnter(element, {
+            dataTransfer: {
+                types: ["Files"],
+            },
+        });
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    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();
+        mocked(room.currentState.maySendMessage).mockReturnValue(false);
+
+        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        fireEvent.dragEnter(element, {
+            dataTransfer: {
+                types: ["Files"],
+            },
+        });
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/structures/__snapshots__/FileDropTarget-test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileDropTarget should not render drop file prompt on mouse over with file if permissions do not allow 1`] = `<DocumentFragment />`;
+
+exports[`FileDropTarget should render drop file prompt on mouse over with file if permissions allow 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_FileDropTarget"
+  >
+    <img
+      alt=""
+      class="mx_FileDropTarget_image"
+      src="image-file-stub"
+    />
+    Drop file here to upload
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FileDropTarget should render nothing when idle 1`] = `<DocumentFragment />`;