diff --git a/src/components/structures/FileDropTarget.tsx b/src/components/structures/FileDropTarget.tsx index dcf4a2fdb1..5ad16303bf 100644 --- a/src/components/structures/FileDropTarget.tsx +++ b/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 = ({ parent, onFileDrop }) => { +const FileDropTarget: React.FC = ({ parent, onFileDrop, room }) => { const [state, setState] = useState({ 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 = ({ parent, onFileDrop }) => { parent?.removeEventListener("dragenter", onDragEnter); parent?.removeEventListener("dragleave", onDragLeave); }; - }, [parent, onFileDrop]); + }, [parent, onFileDrop, hasPermission]); - if (state.dragging) { + if (hasPermission && state.dragging) { return (
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index b6f8bc06b3..20951448af 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -316,7 +316,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
- +
{encryptionTile} @@ -2564,7 +2564,11 @@ export class RoomView extends React.Component { {auxPanel} {pinnedMessageBanner}
- + {topUnreadMessagesBar} {jumpToBottom} {messagePanel} diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index c1c4b3ff57..514fd9875c 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -388,7 +388,7 @@ export default class ThreadView extends React.Component { timeline = ( <> - + { + 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(); + 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(); + 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(); + fireEvent.dragEnter(element, { + dataTransfer: { + types: ["Files"], + }, + }); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/test/unit-tests/components/structures/__snapshots__/FileDropTarget-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/FileDropTarget-test.tsx.snap new file mode 100644 index 0000000000..367a456a31 --- /dev/null +++ b/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`] = ``; + +exports[`FileDropTarget should render drop file prompt on mouse over with file if permissions allow 1`] = ` + +
+ + Drop file here to upload +
+
+`; + +exports[`FileDropTarget should render nothing when idle 1`] = ``;