Disable jump to read receipt button instead of hiding when nothing to jump to (#12863)

* Disable User Info jump to read receipt button instead of hiding it when no RR

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

* Update tests

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

* Update snapshot

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

* Remove non-functional code

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

* delint

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

---------

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

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 (room: Room): void {
-            const onReadReceiptButton = function (): void {
+            dis.dispatch<ViewRoomPayload>({
-                const room = cli.getRoom(member.roomId);
+                action: Action.ViewRoom,
-                dis.dispatch<ViewRoomPayload>({
+                highlighted: true,
-                    action: Action.ViewRoom,
+                // this could return null, the default prevents a type error
-                    highlighted: true,
+                event_id: room.getEventReadUpTo(member.userId) || undefined,
-                    // this could return null, the default prevents a type error
+                room_id: room.roomId,
-                    event_id: room?.getEventReadUpTo(member.userId) || undefined,
+                metricsTrigger: undefined, // room doesn't change
-                    room_id: member.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 = (
+            <MenuItem
+                role="button"
+                onSelect={async (ev) => {
+                    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<ComposerInsertPayload>({
                     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 = (
-                    <MenuItem
-                        role="button"
-                        onSelect={async (ev) => {
-                            ev.preventDefault();
-                            onReadReceiptButton();
-                        }}
-                        label={_t("user_info|jump_to_rr_button")}
-                        Icon={CheckIcon}
-                    />
-                );
-            }
-
             insertPillButton = (
                 <MenuItem
                     role="button"

test/components/views/right_panel/UserInfo-test.tsx

@@ -927,19 +927,19 @@ describe("<UserOptionsSection />", () => {
         });
     });
 
-    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", () => {

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -255,6 +255,44 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
         </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36 _disabled_1gwvj_119"
+          data-kind="primary"
+          disabled=""
+          role="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Jump to read receipt
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"
@@ -525,6 +563,44 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
         </button>
+        <button
+          class="_item_1gwvj_17 _interactive_1gwvj_36 _disabled_1gwvj_119"
+          data-kind="primary"
+          disabled=""
+          role="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_1gwvj_44"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
+          >
+            Jump to read receipt
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_1gwvj_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+            />
+          </svg>
+        </button>
         <button
           class="_item_1gwvj_17 _interactive_1gwvj_36"
           data-kind="primary"