Refactor ReactionsRowButtonTooltip to shared-components (#31866)

* Setting up structure for the init refactoring of ReactionsRowButtonTooltip * implemented example to follow for refactoring to MVVM * Refactoring of ReactionsRowButtonTooltipView * updated reactionrowbutton to use our new viewmodel and removed unessecery comments * Updated children from reactnode to propswithchildren * removal of children on the vm have it as a props * implemented constructor into reactionrowbutton to use vm to viewmodel * Removal of old component * Added ViewModel Tests for new viewmodel * Fix issues after merging develop * Updated import placement for eslint failure CI * Add tests for ReactionsRowButton ViewModel integration and click handlers to pass coverage * Added more tests to cover all conditions * Pass MatrixClient as prop instead of using global; replace expect(true).toBe(true) with not.toThrow() * Added new snapshot to reflect modifications on tests * Update images to fit the CI tests * Optimize reactions tooltip viewmodel updates * Removal of module.css for reactionbuttontooltip, we dont need it since we dont use any css * Fixed snapshots to show the tooltip by introducing a boolean to set open to true in Storybook. * Update snapshots --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-30 12:53:57 +01:00
parent 8cef5df140
commit 62c7fe5408
15 changed files with 941 additions and 73 deletions
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -9,12 +9,13 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import classNames from "classnames";
 import { EventType, type MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import { ReactionsRowButtonTooltipView } from "@element-hq/web-shared-components";

 import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
 import { formatList } from "../../../utils/FormattingUtils";
 import dis from "../../../dispatcher/dispatcher";
-import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
+import { ReactionsRowButtonTooltipViewModel } from "../../../viewmodels/message-body/ReactionsRowButtonTooltipViewModel";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
@@ -40,6 +41,41 @@ export default class ReactionsRowButton extends React.PureComponent<IProps> {
    public static contextType = MatrixClientContext;
    declare public context: React.ContextType<typeof MatrixClientContext>;

+    private reactionsRowButtonTooltipViewModel: ReactionsRowButtonTooltipViewModel;
+
+    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+        super(props, context);
+        this.reactionsRowButtonTooltipViewModel = new ReactionsRowButtonTooltipViewModel({
+            client: context,
+            mxEvent: props.mxEvent,
+            content: props.content,
+            reactionEvents: props.reactionEvents,
+            customReactionImagesEnabled: props.customReactionImagesEnabled,
+        });
+    }
+
+    public componentDidUpdate(prevProps: IProps): void {
+        if (
+            prevProps.mxEvent !== this.props.mxEvent ||
+            prevProps.content !== this.props.content ||
+            prevProps.reactionEvents !== this.props.reactionEvents ||
+            prevProps.customReactionImagesEnabled !== this.props.customReactionImagesEnabled
+        ) {
+            // View model bails out if derived snapshot hasn't changed.
+            this.reactionsRowButtonTooltipViewModel.setProps({
+                client: this.context,
+                mxEvent: this.props.mxEvent,
+                content: this.props.content,
+                reactionEvents: this.props.reactionEvents,
+                customReactionImagesEnabled: this.props.customReactionImagesEnabled,
+            });
+        }
+    }
+
+    public componentWillUnmount(): void {
+        this.reactionsRowButtonTooltipViewModel.dispose();
+    }
+
    public onClick = (): void => {
        const { mxEvent, myReactionEvent, content } = this.props;
        if (myReactionEvent) {
@@ -110,12 +146,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps> {
        }

        return (
-            <ReactionsRowButtonTooltip
-                mxEvent={this.props.mxEvent}
-                content={content}
-                reactionEvents={reactionEvents}
-                customReactionImagesEnabled={this.props.customReactionImagesEnabled}
-            >
+            <ReactionsRowButtonTooltipView vm={this.reactionsRowButtonTooltipViewModel}>
                <AccessibleButton
                    className={classes}
                    aria-label={label}
@@ -127,7 +158,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps> {
                        {count}
                    </span>
                </AccessibleButton>
-            </ReactionsRowButtonTooltip>
+            </ReactionsRowButtonTooltipView>
        );
    }
 }
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -1,62 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019-2021 The Matrix.org Foundation C.I.C.
-
-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, { type PropsWithChildren } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { Tooltip } from "@vector-im/compound-web";
-
-import { unicodeToShortcode } from "../../../HtmlUtils";
-import { _t } from "../../../languageHandler";
-import { formatList } from "../../../utils/FormattingUtils";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
-interface IProps {
-    // The event we're displaying reactions for
-    mxEvent: MatrixEvent;
-    // The reaction content / key / emoji
-    content: string;
-    // A list of Matrix reaction events for this key
-    reactionEvents: MatrixEvent[];
-    // Whether to render custom image reactions
-    customReactionImagesEnabled?: boolean;
-}
-
-export default class ReactionsRowButtonTooltip extends React.PureComponent<PropsWithChildren<IProps>> {
-    public static contextType = MatrixClientContext;
-    declare public context: React.ContextType<typeof MatrixClientContext>;
-
-    public render(): React.ReactNode {
-        const { content, reactionEvents, mxEvent, children } = this.props;
-
-        const room = this.context.getRoom(mxEvent.getRoomId());
-        if (room) {
-            const senders: string[] = [];
-            let customReactionName: string | undefined;
-            for (const reactionEvent of reactionEvents) {
-                const member = room.getMember(reactionEvent.getSender()!);
-                const name = member?.name ?? reactionEvent.getSender()!;
-                senders.push(name);
-                customReactionName =
-                    (this.props.customReactionImagesEnabled &&
-                        REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
-                    undefined;
-            }
-            const shortName = unicodeToShortcode(content) || customReactionName;
-            const formattedSenders = formatList(senders, 6);
-            const caption = shortName ? _t("timeline|reactions|tooltip_caption", { shortName }) : undefined;
-
-            return (
-                <Tooltip description={formattedSenders} caption={caption} placement="right">
-                    {children}
-                </Tooltip>
-            );
-        }
-
-        return children;
-    }
-}
--- a/src/viewmodels/message-body/ReactionsRowButtonTooltipViewModel.ts
+++ b/src/viewmodels/message-body/ReactionsRowButtonTooltipViewModel.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2026 Element Creations 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 { type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type ReactionsRowButtonTooltipViewSnapshot,
+    type ReactionsRowButtonTooltipViewModel as ReactionsRowButtonTooltipViewModelInterface,
+} from "@element-hq/web-shared-components";
+
+import { _t } from "../../languageHandler";
+import { formatList } from "../../utils/FormattingUtils";
+import { unicodeToShortcode } from "../../HtmlUtils";
+import { REACTION_SHORTCODE_KEY } from "../../components/views/messages/ReactionsRow";
+
+export interface ReactionsRowButtonTooltipViewModelProps {
+    /**
+     * The Matrix client instance.
+     */
+    client: MatrixClient | null;
+    /**
+     * The event we're displaying reactions for.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * The reaction content / key / emoji.
+     */
+    content: string;
+    /**
+     * A list of Matrix reaction events for this key.
+     */
+    reactionEvents: MatrixEvent[];
+    /**
+     * Whether to render custom image reactions.
+     */
+    customReactionImagesEnabled?: boolean;
+}
+
+/**
+ * ViewModel for the reactions row button tooltip, providing the formatted sender list and caption.
+ */
+export class ReactionsRowButtonTooltipViewModel
+    extends BaseViewModel<ReactionsRowButtonTooltipViewSnapshot, ReactionsRowButtonTooltipViewModelProps>
+    implements ReactionsRowButtonTooltipViewModelInterface
+{
+    /**
+     * Computes the snapshot for the reactions row button tooltip.
+     * @param props - The view model properties
+     * @returns The computed snapshot with formattedSenders, caption, and children
+     */
+    private static readonly computeSnapshot = (
+        props: ReactionsRowButtonTooltipViewModelProps,
+    ): ReactionsRowButtonTooltipViewSnapshot => {
+        const { client, mxEvent, content, reactionEvents, customReactionImagesEnabled } = props;
+
+        const room = client?.getRoom(mxEvent.getRoomId());
+
+        if (room) {
+            const senders: string[] = [];
+            let customReactionName: string | undefined;
+
+            for (const reactionEvent of reactionEvents) {
+                const member = room.getMember(reactionEvent.getSender()!);
+                const name = member?.name ?? reactionEvent.getSender()!;
+                senders.push(name);
+                customReactionName =
+                    (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
+                    undefined;
+            }
+
+            const shortName = unicodeToShortcode(content) || customReactionName;
+            const formattedSenders = formatList(senders, 6);
+            const caption = shortName ? _t("timeline|reactions|tooltip_caption", { shortName }) : undefined;
+
+            return {
+                formattedSenders,
+                caption,
+            };
+        }
+
+        return {
+            formattedSenders: undefined,
+            caption: undefined,
+        };
+    };
+
+    public constructor(props: ReactionsRowButtonTooltipViewModelProps) {
+        super(props, ReactionsRowButtonTooltipViewModel.computeSnapshot(props));
+    }
+
+    /**
+     * Updates the properties of the view model and recomputes the snapshot.
+     * @param newProps - Partial properties to update
+     */
+    public setProps(newProps: Partial<ReactionsRowButtonTooltipViewModelProps>): void {
+        this.props = { ...this.props, ...newProps };
+        const nextSnapshot = ReactionsRowButtonTooltipViewModel.computeSnapshot(this.props);
+        const currentSnapshot = this.snapshot.current;
+
+        if (
+            nextSnapshot.formattedSenders === currentSnapshot.formattedSenders &&
+            nextSnapshot.caption === currentSnapshot.caption
+        ) {
+            return;
+        }
+
+        this.snapshot.set(nextSnapshot);
+    }
+}