diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png index 45af5ac44be..b6883c218e6 100644 Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 159bc9dbf12..9cc50fa9287 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -442,19 +442,35 @@ export const UserOptionsSection: React.FC<{ // Only allow the user to ignore the user if its not ourselves // same goes for jumping to read receipt if (!isMe) { - if (member instanceof RoomMember && member.roomId && !isSpace) { - const onReadReceiptButton = function (): void { - const room = cli.getRoom(member.roomId); - dis.dispatch({ - action: Action.ViewRoom, - highlighted: true, - // this could return null, the default prevents a type error - event_id: room?.getEventReadUpTo(member.userId) || undefined, - room_id: member.roomId, - metricsTrigger: undefined, // room doesn't change - }); - }; + const onReadReceiptButton = function (room: Room): void { + dis.dispatch({ + action: Action.ViewRoom, + highlighted: true, + // this could return null, the default prevents a type error + event_id: room.getEventReadUpTo(member.userId) || undefined, + room_id: room.roomId, + metricsTrigger: undefined, // room doesn't change + }); + }; + + const room = member instanceof RoomMember ? cli.getRoom(member.roomId) : null; + const readReceiptButtonDisabled = isSpace || !room?.getEventReadUpTo(member.userId); + readReceiptButton = ( + { + ev.preventDefault(); + if (room && !readReceiptButtonDisabled) { + onReadReceiptButton(room); + } + }} + label={_t("user_info|jump_to_rr_button")} + disabled={readReceiptButtonDisabled} + Icon={CheckIcon} + /> + ); + if (member instanceof RoomMember && member.roomId && !isSpace) { const onInsertPillButton = function (): void { dis.dispatch({ action: Action.ComposerInsert, @@ -463,21 +479,6 @@ export const UserOptionsSection: React.FC<{ }); }; - const room = member instanceof RoomMember ? cli.getRoom(member.roomId) : undefined; - if (room?.getEventReadUpTo(member.userId)) { - readReceiptButton = ( - { - ev.preventDefault(); - onReadReceiptButton(); - }} - label={_t("user_info|jump_to_rr_button")} - Icon={CheckIcon} - /> - ); - } - insertPillButton = ( ", () => { }); }); - it("when call to client.getRoom is null, does not show read receipt button", () => { + it("when call to client.getRoom is null, shows disabled read receipt button", () => { mockClient.getRoom.mockReturnValueOnce(null); renderComponent(); - expect(screen.queryByRole("button", { name: "Jump to read receipt" })).not.toBeInTheDocument(); + expect(screen.queryByRole("button", { name: "Jump to read receipt" })).toBeDisabled(); }); - it("when call to client.getRoom is non-null and room.getEventReadUpTo is null, does not show read receipt button", () => { + it("when call to client.getRoom is non-null and room.getEventReadUpTo is null, shows disabled read receipt button", () => { mockRoom.getEventReadUpTo.mockReturnValueOnce(null); mockClient.getRoom.mockReturnValueOnce(mockRoom); renderComponent(); - expect(screen.queryByRole("button", { name: "Jump to read receipt" })).not.toBeInTheDocument(); + expect(screen.queryByRole("button", { name: "Jump to read receipt" })).toBeDisabled(); }); it("when calls to client.getRoom and room.getEventReadUpTo are non-null, shows read receipt button", () => { diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index e7bd262ab06..22794e9d8b8 100644 --- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -255,6 +255,44 @@ exports[` with crypto enabled renders 1`] = ` /> + +