nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Michael Telatynski
2025-06-24 14:26:03 +01:00
committed by GitHub
parent f707bb410e
commit 2b8f95a25b
5 changed files with 94 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/structures/FileDropTarget.tsx
View File

@@ -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="" />

8
src/components/structures/RoomView.tsx
View File

@@ -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}

2
src/components/structures/ThreadView.tsx
View File

@@ -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}

59
test/unit-tests/components/structures/FileDropTarget-test.tsx Normal file
View File

@@ -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();
});
});

20
test/unit-tests/components/structures/__snapshots__/FileDropTarget-test.tsx.snap Normal file
View File

@@ -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 />`;