From 07747e24d47c05d4748815bc726490984a1ccb38 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 21 Dec 2023 15:21:41 +0000 Subject: [PATCH] Switch Pill & E2EIcon to using Compound Tooltips (#12080) * Switch Pill to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch E2EIcon to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests & snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/Pill.tsx | 59 +++++++----------- src/components/views/rooms/E2EIcon.tsx | 42 +++++-------- .../views/rooms/LegacyRoomHeader.tsx | 6 +- .../__snapshots__/RoomView-test.tsx.snap | 12 ++-- test/components/views/elements/Pill-test.tsx | 4 +- .../elements/__snapshots__/Pill-test.tsx.snap | 62 +++++++++++-------- .../views/messages/TextualBody-test.tsx | 4 +- .../__snapshots__/TextualBody-test.tsx.snap | 14 ++--- .../views/rooms/MemberTile-test.tsx | 23 ++++--- .../__snapshots__/MemberTile-test.tsx.snap | 8 --- 10 files changed, 105 insertions(+), 129 deletions(-) diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 8129a5fe45..9f332e29c3 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -14,13 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactElement, useRef, useState } from "react"; +import React, { ReactElement } from "react"; import classNames from "classnames"; import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; +import { Tooltip } from "@vector-im/compound-web"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import Tooltip, { Alignment } from "../elements/Tooltip"; import { usePermalink } from "../../../hooks/usePermalink"; import RoomAvatar from "../avatars/RoomAvatar"; import MemberAvatar from "../avatars/MemberAvatar"; @@ -88,8 +88,6 @@ export interface PillProps { } export const Pill: React.FC = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => { - const tooltipId = useRef(`mx_Pill_${Math.random()}`).current; - const [hover, setHover] = useState(false); const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({ room, type: propType, @@ -109,15 +107,6 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom, }); - const onMouseOver = (): void => { - setHover(true); - }; - - const onMouseLeave = (): void => { - setHover(false); - }; - - const tip = hover && resourceId ? : null; let avatar: ReactElement | null = null; let pillText: string | null = text; @@ -155,34 +144,28 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room return null; } + const isAnchor = !!inMessage && !!url; return ( - {inMessage && url ? ( - - {avatar} - {pillText} - {tip} - - ) : ( - - {avatar} - {pillText} - {tip} - - )} + + {isAnchor ? ( + + {avatar} + {pillText} + + ) : ( + + {avatar} + {pillText} + + )} + ); diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx index 92abede11c..b6cbbe96b5 100644 --- a/src/components/views/rooms/E2EIcon.tsx +++ b/src/components/views/rooms/E2EIcon.tsx @@ -15,12 +15,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { CSSProperties, useState } from "react"; +import React, { ComponentProps, CSSProperties } from "react"; import classNames from "classnames"; +import { Tooltip } from "@vector-im/compound-web"; import { _t, _td, TranslationKey } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import Tooltip, { Alignment } from "../elements/Tooltip"; import { E2EStatus } from "../../../utils/ShieldUtils"; import { XOR } from "../../../@types/common"; @@ -48,7 +48,7 @@ interface Props { size?: number; onClick?: () => void; hideTooltip?: boolean; - tooltipAlignment?: Alignment; + tooltipSide?: ComponentProps["side"]; bordered?: boolean; } @@ -69,11 +69,9 @@ const E2EIcon: React.FC> = ({ size, onClick, hideTooltip, - tooltipAlignment, + tooltipSide, bordered, }) => { - const [hover, setHover] = useState(false); - const classes = classNames( { mx_E2EIcon: true, @@ -97,35 +95,23 @@ const E2EIcon: React.FC> = ({ style = { width: `${size}px`, height: `${size}px` }; } - const onMouseOver = (): void => setHover(true); - const onMouseLeave = (): void => setHover(false); - const label = e2eTitle ? _t(e2eTitle) : ""; - let tip: JSX.Element | undefined; - if (hover && !hideTooltip && label) { - tip = ; + let content: JSX.Element; + if (onClick) { + content = ; + } else { + content =
; } - if (onClick) { - return ( - - {tip} - - ); + if (!e2eTitle || hideTooltip) { + return content; } return ( -
- {tip} -
+ + {content} + ); }; diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 6729ba118f..4d27f05cef 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -780,11 +780,7 @@ export default class RoomHeader extends React.Component { const icon = this.props.viewingCall ? (
) : this.props.e2eStatus ? ( - + ) : // If we're expecting an E2EE status to come in, but it hasn't // yet been loaded, insert a blank div to reserve space this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? ( diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 1f29fc76bb..517d318412 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -522,10 +522,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
-
+ +
+
diff --git a/test/components/views/elements/Pill-test.tsx b/test/components/views/elements/Pill-test.tsx index b4ffb1ea2e..cdde49cc56 100644 --- a/test/components/views/elements/Pill-test.tsx +++ b/test/components/views/elements/Pill-test.tsx @@ -142,8 +142,8 @@ describe("", () => { await userEvent.hover(screen.getByText("Room 1")); }); - it("should show a tooltip with the room Id", () => { - expect(screen.getByRole("tooltip", { name: room1Id })).toBeInTheDocument(); + it("should show a tooltip with the room Id", async () => { + expect(await screen.findByRole("tooltip", { name: room1Id })).toBeInTheDocument(); }); describe("when not hovering the pill any more", () => { diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap index b9642dfd5c..1a9ee6b807 100644 --- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap @@ -11,13 +11,17 @@ exports[` should not render an avatar or link when called with inMessage =
- Room 1 + + Room 1 + @@ -30,24 +34,28 @@ exports[` should render the expected pill for @room 1`] = `
- - @room + + + @room + @@ -60,8 +68,8 @@ exports[` should render the expected pill for a known user not in the room
should render the expected pill for a message in another room 1`
should render the expected pill for a message in the same room 1
should render the expected pill for a room alias 1`] = `
should render the expected pill for a space 1`] = `
should render the expected pill for an uknown user not in the ro
when rendering a pill for a room should render the expected pill
when rendering a pill for a user in the room should render as ex
", () => { const { container } = getComponent({ mxEvent: ev }); const content = container.querySelector(".mx_EventTile_body"); expect(content.innerHTML).toMatchInlineSnapshot( - `"Chat with Member"`, + `"Chat with Member"`, ); }); @@ -217,7 +217,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); const content = container.querySelector(".mx_EventTile_body"); expect(content.innerHTML).toMatchInlineSnapshot( - `"Visit
#room:example.com"`, + `"Visit
#room:example.com"`, ); }); diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index ac264c6fca..383f7d5515 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -50,8 +50,8 @@ exports[` renders formatted m.text correctly pills appear for an renders formatted m.text correctly pills appear for eve renders formatted m.text correctly pills appear for roo renders formatted m.text correctly pills get injected c renders plain-text m.text correctly should pillify a pe >
{ const { container } = render(); - await waitFor(() => - expect(screen.getByLabelText("This user has not verified all of their sessions.")).toBeInTheDocument(), - ); expect(container).toMatchSnapshot(); + await waitFor(async () => { + await userEvent.hover(container.querySelector(".mx_E2EIcon")!); + expect( + screen.getByRole("tooltip", { name: "This user has not verified all of their sessions." }), + ).toBeInTheDocument(); + }); }); it("should display an verified E2EIcon when the e2E status = Verified", async () => { @@ -69,11 +73,14 @@ describe("MemberTile", () => { const { container } = render(); - await waitFor(() => - expect( - screen.getByLabelText("You have verified this user. This user has verified all of their sessions."), - ).toBeInTheDocument(), - ); expect(container).toMatchSnapshot(); + await waitFor(async () => { + await userEvent.hover(container.querySelector(".mx_E2EIcon")!); + expect( + screen.getByRole("tooltip", { + name: "You have verified this user. This user has verified all of their sessions.", + }), + ).toBeInTheDocument(); + }); }); }); diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap index 4a84bea3ae..a26d2c0fd4 100644 --- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap @@ -24,10 +24,6 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver > u -
u -