From eafe81b3fadfcc4aaeb166389ddb257af136dd54 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 5 Aug 2024 14:20:21 +0100 Subject: [PATCH 1/5] Disable User Info jump to read receipt button instead of hiding it when no RR Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/right_panel/UserInfo.tsx | 62 ++++++++++--------- src/i18n/strings/en_EN.json | 1 + 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 159bc9dbf12..7ca9619f75d 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -34,7 +34,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types"; import { UserVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/crypto-api"; import { logger } from "matrix-js-sdk/src/logger"; import { CryptoEvent } from "matrix-js-sdk/src/crypto"; -import { Heading, MenuItem, Text } from "@vector-im/compound-web"; +import { Heading, MenuItem, Text, Tooltip } from "@vector-im/compound-web"; import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat"; import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; @@ -442,19 +442,40 @@ 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 (readReceiptButtonDisabled) { + readReceiptButton = ( + {readReceiptButton} + ); + } + if (member instanceof RoomMember && member.roomId && !isSpace) { const onInsertPillButton = function (): void { dis.dispatch({ action: Action.ComposerInsert, @@ -463,21 +484,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 = ( Date: Mon, 5 Aug 2024 15:20:42 +0100 Subject: [PATCH 2/5] Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/right_panel/UserInfo-test.tsx | 8 +- .../__snapshots__/UserInfo-test.tsx.snap | 76 +++++++++++++++++++ 2 files changed, 80 insertions(+), 4 deletions(-) diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx index 3b364687869..b6b5325454d 100644 --- a/test/components/views/right_panel/UserInfo-test.tsx +++ b/test/components/views/right_panel/UserInfo-test.tsx @@ -927,19 +927,19 @@ describe("", () => { }); }); - 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`] = ` /> + +