PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use new compound tooltip

Browse source
This commit is contained in:
Florian Duros 2024-04-12 14:56:23 +02:00
parent aadb46358b
commit 5354e6efea
No known key found for this signature in database
GPG key ID: A5BBB4041B493F15
49 changed files with 127 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Modal.tsx
View file

@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
import classNames from "classnames"; import classNames from "classnames";
import { defer, sleep } from "matrix-js-sdk/src/utils"; import { defer, sleep } from "matrix-js-sdk/src/utils";
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix"; import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
import { Glass, TooltipProvider } from "@vector-im/compound-web"; import { Glass } from "@vector-im/compound-web";
import dis from "./dispatcher/dispatcher"; import dis from "./dispatcher/dispatcher";
import AsyncWrapper from "./AsyncWrapper"; import AsyncWrapper from "./AsyncWrapper";
@ -374,7 +374,6 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className); const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
const staticDialog = ( const staticDialog = (
<TooltipProvider>
<div className={classes}> <div className={classes}>
<Glass className="mx_Dialog_border"> <Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div> <div className="mx_Dialog">{this.staticModal.elem}</div>
@ -385,7 +384,6 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
onClick={this.onBackgroundClick} onClick={this.onBackgroundClick}
/> />
</div> </div>
</TooltipProvider>
); );
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@ -401,7 +399,6 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
}); });
const dialog = ( const dialog = (
<TooltipProvider>
<div className={classes}> <div className={classes}>
<Glass className="mx_Dialog_border"> <Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div> <div className="mx_Dialog">{modal.elem}</div>
@ -412,7 +409,6 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
onClick={this.onBackgroundClick} onClick={this.onBackgroundClick}
/> />
</div> </div>
</TooltipProvider>
); );
setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer())); setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));

3
src/components/structures/ContextMenu.tsx
View file

@ -20,7 +20,6 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import classNames from "classnames"; import classNames from "classnames";
import FocusLock from "react-focus-lock"; import FocusLock from "react-focus-lock";
import { TooltipProvider } from "@vector-im/compound-web";
import { Writeable } from "../../@types/common"; import { Writeable } from "../../@types/common";
import UIStore from "../../stores/UIStore"; import UIStore from "../../stores/UIStore";
@ -630,7 +629,6 @@ export function createMenu(
}; };
const menu = ( const menu = (
<TooltipProvider>
<ContextMenu <ContextMenu
{...props} {...props}
mountAsChild={true} mountAsChild={true}
@ -640,7 +638,6 @@ export function createMenu(
> >
<ElementClass {...props} onFinished={onFinished} /> <ElementClass {...props} onFinished={onFinished} />
</ContextMenu> </ContextMenu>
</TooltipProvider>
); );
ReactDOM.render(menu, getOrCreateContainer()); ReactDOM.render(menu, getOrCreateContainer());

5
src/components/structures/MatrixChat.tsx
View file

@ -34,7 +34,6 @@ import { throttle } from "lodash";
import { CryptoEvent } from "matrix-js-sdk/src/crypto"; import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms"; import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup"; import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
import { TooltipProvider } from "@vector-im/compound-web";
// what-input helps improve keyboard accessibility // what-input helps improve keyboard accessibility
import "what-input"; import "what-input";
@ -2136,9 +2135,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
return ( return (
<ErrorBoundary> <ErrorBoundary>
<SDKContext.Provider value={this.stores}> <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
<TooltipProvider>{view}</TooltipProvider>
</SDKContext.Provider>
</ErrorBoundary> </ErrorBoundary>
); );
} }

2
src/components/structures/auth/forgot-password/CheckEmail.tsx
View file

@ -66,7 +66,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
<input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} /> <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
<div className="mx_AuthBody_did-not-receive"> <div className="mx_AuthBody_did-not-receive">
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span> <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
<Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}> <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}> <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
<RetryIcon className="mx_Icon mx_Icon_16" /> <RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")} {_t("action|resend")}

2
src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
View file

@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
<div className="mx_AuthBody_did-not-receive"> <div className="mx_AuthBody_did-not-receive">
<span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span> <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
<Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}> <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
<AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}> <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
<RetryIcon className="mx_Icon mx_Icon_16" /> <RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")} {_t("action|resend")}

2
src/components/views/avatars/DecoratedRoomAvatar.tsx
View file

@ -218,7 +218,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
viewAvatarOnClick={this.props.viewAvatarOnClick} viewAvatarOnClick={this.props.viewAvatarOnClick}
/> />
{icon && ( {icon && (
<Tooltip label={tooltipText(this.state.icon)!} side="bottom"> <Tooltip label={tooltipText(this.state.icon)!} placement="bottom">
{icon} {icon}
</Tooltip> </Tooltip>
)} )}

2
src/components/views/elements/InfoTooltip.tsx
View file

@ -43,7 +43,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
// Tooltip are forced on the right for a more natural feel to them on info icons // Tooltip are forced on the right for a more natural feel to them on info icons
return ( return (
<Tooltip label={tooltip || title} side="right"> <Tooltip label={tooltip || title} placement="right">
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}> <div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} /> <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{children} {children}

3
src/components/views/elements/PersistedElement.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { MutableRefObject, ReactNode } from "react"; import React, { MutableRefObject, ReactNode } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -177,11 +176,9 @@ export default class PersistedElement extends React.Component<IProps> {
private renderApp(): void { private renderApp(): void {
const content = ( const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}> <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<TooltipProvider>
<div ref={this.collectChild} style={this.props.style}> <div ref={this.collectChild} style={this.props.style}>
{this.props.children} {this.props.children}
</div> </div>
</TooltipProvider>
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
); );

2
src/components/views/elements/Pill.tsx
View file

@ -151,7 +151,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
<Tooltip <Tooltip
label={resourceId ?? ""} label={resourceId ?? ""}
open={resourceId ? undefined : false} open={resourceId ? undefined : false}
side="right" placement="right"
isTriggerInteractive={isAnchor} isTriggerInteractive={isAnchor}
> >
{isAnchor ? ( {isAnchor ? (

2
src/components/views/elements/TextWithTooltip.tsx
View file

@ -33,7 +33,7 @@ export default class TextWithTooltip extends React.Component<IProps> {
const { className, children, tooltip, tooltipProps } = this.props; const { className, children, tooltip, tooltipProps } = this.props;
return ( return (
<Tooltip label={tooltip} side="right"> <Tooltip label={tooltip} placement="right">
<span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}> <span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}>
{children} {children}
</span> </span>

3
src/components/views/messages/MStickerBody.tsx
View file

@ -69,8 +69,7 @@ export default class MStickerBody extends MImageBody {
if (!content?.body || !content.info?.w) return null; if (!content?.body || !content.info?.w) return null;
return { return {
align: "center", placement: "right",
side: "right",
label: content.body, label: content.body,
}; };
} }

7
src/components/views/messages/TextualBody.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { createRef, SyntheticEvent, MouseEvent } from "react"; import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix"; import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import * as HtmlUtils from "../../../HtmlUtils"; import * as HtmlUtils from "../../../HtmlUtils";
import { formatDate } from "../../../DateUtils"; import { formatDate } from "../../../DateUtils";
@ -349,11 +348,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
const reason = node.getAttribute("data-mx-spoiler") ?? undefined; const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = ( const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);
ReactDOM.render(spoiler, spoilerContainer); ReactDOM.render(spoiler, spoilerContainer);
node.parentNode?.replaceChild(spoilerContainer, node); node.parentNode?.replaceChild(spoilerContainer, node);

2
src/components/views/polls/pollHistory/PollListItem.tsx
View file

@ -36,7 +36,7 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
const formattedDate = formatLocalDateShort(event.getTs()); const formattedDate = formatLocalDateShort(event.getTs());
return ( return (
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}> <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}> <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
<div className="mx_PollListItem_content"> <div className="mx_PollListItem_content">
<span>{formattedDate}</span> <span>{formattedDate}</span>
<PollIcon className="mx_PollListItem_icon" /> <PollIcon className="mx_PollListItem_icon" />

2
src/components/views/polls/pollHistory/PollListItemEnded.tsx
View file

@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
return ( return (
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}> <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}> <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
<div className="mx_PollListItemEnded_content"> <div className="mx_PollListItemEnded_content">
<div className="mx_PollListItemEnded_title"> <div className="mx_PollListItemEnded_title">
<PollIcon className="mx_PollListItemEnded_icon" /> <PollIcon className="mx_PollListItemEnded_icon" />

2
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -405,7 +405,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
align="center" align="center"
justify="space-between" justify="space-between"
> >
<Tooltip label={_t("action|search")} side="right"> <Tooltip label={_t("action|search")} placement="right">
<button <button
className="mx_RoomSummaryCard_searchBtn" className="mx_RoomSummaryCard_searchBtn"
data-testid="summary-search" data-testid="summary-search"

6
src/components/views/rooms/E2EIcon.tsx
View file

@ -48,7 +48,7 @@ interface Props {
size?: number; size?: number;
onClick?: () => void; onClick?: () => void;
hideTooltip?: boolean; hideTooltip?: boolean;
tooltipSide?: ComponentProps<typeof Tooltip>["side"]; tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
bordered?: boolean; bordered?: boolean;
} }
@ -69,7 +69,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
size, size,
onClick, onClick,
hideTooltip, hideTooltip,
tooltipSide, tooltipPlacement,
bordered, bordered,
}) => { }) => {
const classes = classNames( const classes = classNames(
@ -109,7 +109,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
} }
return ( return (
<Tooltip label={label} side={tooltipSide} isTriggerInteractive={!!onClick}> <Tooltip label={label} placement={tooltipPlacement} isTriggerInteractive={!!onClick}>
{content} {content}
</Tooltip> </Tooltip>
); );

2
src/components/views/rooms/EventTile.tsx
View file

@ -1546,7 +1546,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
return ( return (
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
<div className="mx_ReadReceiptGroup"> <div className="mx_ReadReceiptGroup">
<Tooltip label={label} side="top" align="end"> <Tooltip label={label} placement="top-end">
<div className="mx_ReadReceiptGroup_button"> <div className="mx_ReadReceiptGroup_button">
<span className="mx_ReadReceiptGroup_container"> <span className="mx_ReadReceiptGroup_container">
<span className={receiptClasses}>{nonCssBadge}</span> <span className={receiptClasses}>{nonCssBadge}</span>

2
src/components/views/rooms/LegacyRoomHeader.tsx
View file

@ -784,7 +784,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
const icon = this.props.viewingCall ? ( const icon = this.props.viewingCall ? (
<div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" /> <div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" />
) : this.props.e2eStatus ? ( ) : this.props.e2eStatus ? (
<E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipSide="bottom" /> <E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipPlacement="bottom" />
) : // If we're expecting an E2EE status to come in, but it hasn't ) : // If we're expecting an E2EE status to come in, but it hasn't
// yet been loaded, insert a blank div to reserve space // yet been loaded, insert a blank div to reserve space
this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? ( this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? (

2
src/components/views/rooms/NotificationBadge.tsx
View file

@ -121,7 +121,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) { if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
return ( return (
<Tooltip label={_t("notifications|message_didnt_send")} side="right"> <Tooltip label={_t("notifications|message_didnt_send")} placement="right">
{badge} {badge}
</Tooltip> </Tooltip>
); );

6
src/components/views/rooms/RoomHeader.tsx
View file

@ -252,7 +252,7 @@ export default function RoomHeader({
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span> <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && ( {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} side="right"> <Tooltip label={_t("common|public_room")} placement="right">
<PublicIcon <PublicIcon
width="16px" width="16px"
height="16px" height="16px"
@ -263,7 +263,7 @@ export default function RoomHeader({
)} )}
{isDirectMessage && e2eStatus === E2EStatus.Verified && ( {isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} side="right"> <Tooltip label={_t("common|verified")} placement="right">
<VerifiedIcon <VerifiedIcon
width="16px" width="16px"
height="16px" height="16px"
@ -274,7 +274,7 @@ export default function RoomHeader({
)} )}
{isDirectMessage && e2eStatus === E2EStatus.Warning && ( {isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} side="right"> <Tooltip label={_t("room|header_untrusted_label")} placement="right">
<ErrorIcon <ErrorIcon
width="16px" width="16px"
height="16px" height="16px"

2
src/components/views/settings/devices/FilteredDeviceListHeader.tsx
View file

@ -40,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
return ( return (
<div className="mx_FilteredDeviceListHeader" {...rest}> <div className="mx_FilteredDeviceListHeader" {...rest}>
{!isSelectDisabled && ( {!isSelectDisabled && (
<Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}> <Tooltip label={checkboxLabel} placement="top" isTriggerInteractive={false}>
<StyledCheckbox <StyledCheckbox
kind={CheckboxStyle.Solid} kind={CheckboxStyle.Solid}
checked={isAllSelected} checked={isAllSelected}

2
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View file

@ -45,7 +45,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
const openTooltip = displayLabel ? false : undefined; const openTooltip = displayLabel ? false : undefined;
return ( return (
<Tooltip label={_t("common|threads")} side="right" open={openTooltip}> <Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
<IconButton <IconButton
aria-label={_t("common|threads")} aria-label={_t("common|threads")}
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })} className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}

6
src/toasts/IncomingCallToast.tsx
View file

@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager"; import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
// eslint-disable-next-line no-restricted-imports // eslint-disable-next-line no-restricted-imports
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import { Button, Tooltip } from "@vector-im/compound-web";
import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg"; import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
import { _t } from "../languageHandler"; import { _t } from "../languageHandler";
@ -168,7 +168,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
); );
return ( return (
<TooltipProvider> <>
<div> <div>
<RoomAvatar room={room ?? undefined} size="24px" /> <RoomAvatar room={room ?? undefined} size="24px" />
</div> </div>
@ -200,6 +200,6 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
onClick={onCloseClick} onClick={onCloseClick}
title={_t("action|close")} title={_t("action|close")}
/> />
</TooltipProvider> </>
); );
} }

3
src/utils/exportUtils/HtmlExport.tsx
View file

@ -20,7 +20,6 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
import { renderToStaticMarkup } from "react-dom/server"; import { renderToStaticMarkup } from "react-dom/server";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import escapeHtml from "escape-html"; import escapeHtml from "escape-html";
import { TooltipProvider } from "@vector-im/compound-web";
import Exporter from "./Exporter"; import Exporter from "./Exporter";
import { mediaFromMxc } from "../../customisations/Media"; import { mediaFromMxc } from "../../customisations/Media";
@ -284,7 +283,6 @@ export default class HTMLExporter extends Exporter {
return ( return (
<div className="mx_Export_EventWrapper" id={mxEv.getId()}> <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value={this.room.client}> <MatrixClientContext.Provider value={this.room.client}>
<TooltipProvider>
<EventTile <EventTile
mxEvent={mxEv} mxEvent={mxEv}
continuation={continuation} continuation={continuation}
@ -304,7 +302,6 @@ export default class HTMLExporter extends Exporter {
layout={Layout.Group} layout={Layout.Group}
showReadReceipts={false} showReadReceipts={false}
/> />
</TooltipProvider>
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
</div> </div>
); );

5
src/utils/pillify.tsx
View file

@ -18,7 +18,6 @@ import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor"; import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix"; import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import SettingsStore from "../settings/SettingsStore"; import SettingsStore from "../settings/SettingsStore";
import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill"; import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill";
@ -84,9 +83,7 @@ export function pillifyLinks(
const pillContainer = document.createElement("span"); const pillContainer = document.createElement("span");
const pill = ( const pill = (
<TooltipProvider>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} /> <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
); );
ReactDOM.render(pill, pillContainer); ReactDOM.render(pill, pillContainer);
@ -141,14 +138,12 @@ export function pillifyLinks(
const pillContainer = document.createElement("span"); const pillContainer = document.createElement("span");
const pill = ( const pill = (
<TooltipProvider>
<Pill <Pill
type={PillType.AtRoomMention} type={PillType.AtRoomMention}
inMessage={true} inMessage={true}
room={room} room={room}
shouldShowPillAvatar={shouldShowPillAvatar} shouldShowPillAvatar={shouldShowPillAvatar}
/> />
</TooltipProvider>
); );
ReactDOM.render(pill, pillContainer); ReactDOM.render(pill, pillContainer);

3
src/utils/tooltipify.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web";
import PlatformPeg from "../PlatformPeg"; import PlatformPeg from "../PlatformPeg";
import LinkWithTooltip from "../components/views/elements/LinkWithTooltip"; import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@ -61,11 +60,9 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
// without the superfluous span but this is not something React trivially supports at this time. // without the superfluous span but this is not something React trivially supports at this time.
const tooltip = ( const tooltip = (
<TooltipProvider>
<LinkWithTooltip tooltip={href}> <LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} /> <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip> </LinkWithTooltip>
</TooltipProvider>
); );
ReactDOM.render(tooltip, node); ReactDOM.render(tooltip, node);

3
test/components/structures/MessagePanel-test.tsx
View file

@ -20,7 +20,6 @@ import { EventEmitter } from "events";
import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix"; import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { render } from "@testing-library/react"; import { render } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel"; import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
import SettingsStore from "../../../src/settings/SettingsStore"; import SettingsStore from "../../../src/settings/SettingsStore";
@ -99,9 +98,7 @@ describe("MessagePanel", function () {
const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => ( const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
<MatrixClientContext.Provider value={client}> <MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}> <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
<TooltipProvider>
<MessagePanel {...defaultProps} {...props} /> <MessagePanel {...defaultProps} {...props} />
</TooltipProvider>
</RoomContext.Provider> </RoomContext.Provider>
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
); );

2
test/components/structures/RightPanel-test.tsx
View file

@ -19,7 +19,6 @@ import { render, screen, waitFor } from "@testing-library/react";
import { jest } from "@jest/globals"; import { jest } from "@jest/globals";
import { mocked, MockedObject } from "jest-mock"; import { mocked, MockedObject } from "jest-mock";
import { MatrixClient } from "matrix-js-sdk/src/matrix"; import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import _RightPanel from "../../../src/components/structures/RightPanel"; import _RightPanel from "../../../src/components/structures/RightPanel";
import { MatrixClientPeg } from "../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@ -123,7 +122,6 @@ describe("RightPanel", () => {
resizeNotifier={resizeNotifier} resizeNotifier={resizeNotifier}
permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)} permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
/>, />,
{ wrapper: TooltipProvider },
); );
// Wait for RPS room 1 updates to fire // Wait for RPS room 1 updates to fire
const rpsUpdated = waitForRpsUpdate(); const rpsUpdated = waitForRpsUpdate();

3
test/components/structures/RoomView-test.tsx
View file

@ -33,7 +33,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib"; import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react"; import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import { import {
stubClient, stubClient,
@ -145,7 +144,6 @@ describe("RoomView", () => {
wrappedRef={ref as any} wrappedRef={ref as any}
/> />
</SDKContext.Provider>, </SDKContext.Provider>,
{ wrapper: TooltipProvider },
); );
await flushPromises(); await flushPromises();
return roomView; return roomView;
@ -183,7 +181,6 @@ describe("RoomView", () => {
onRegistered={jest.fn()} onRegistered={jest.fn()}
/> />
</SDKContext.Provider>, </SDKContext.Provider>,
{ wrapper: TooltipProvider },
); );
await flushPromises(); await flushPromises();
return roomView; return roomView;

3
test/components/structures/SpaceHierarchy-test.tsx
View file

@ -20,7 +20,6 @@ import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@
import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix"; import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy"; import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
import { TooltipProvider } from "@vector-im/compound-web";
import { MatrixClientPeg } from "../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
import { mkStubRoom, stubClient } from "../../test-utils"; import { mkStubRoom, stubClient } from "../../test-utils";
@ -287,9 +286,7 @@ describe("SpaceHierarchy", () => {
}; };
const getComponent = (props = {}): React.ReactElement => ( const getComponent = (props = {}): React.ReactElement => (
<MatrixClientContext.Provider value={client}> <MatrixClientContext.Provider value={client}>
<TooltipProvider>
<SpaceHierarchy {...defaultProps} {...props} /> <SpaceHierarchy {...defaultProps} {...props} />
</TooltipProvider>
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
); );

14
test/components/structures/ThreadPanel-test.tsx
View file

@ -25,7 +25,6 @@ import {
FeatureSupport, FeatureSupport,
Thread, Thread,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../src/components/structures/ThreadPanel"; import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../src/components/structures/ThreadPanel";
import MatrixClientContext from "../../../src/contexts/MatrixClientContext"; import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@ -51,7 +50,6 @@ describe("ThreadPanel", () => {
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/>, />,
{ wrapper: TooltipProvider },
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -63,7 +61,6 @@ describe("ThreadPanel", () => {
filterOption={ThreadFilterType.My} filterOption={ThreadFilterType.My}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/>, />,
{ wrapper: TooltipProvider },
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -75,7 +72,6 @@ describe("ThreadPanel", () => {
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/>, />,
{ wrapper: TooltipProvider },
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -87,7 +83,6 @@ describe("ThreadPanel", () => {
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/>, />,
{ wrapper: TooltipProvider },
); );
const found = container.querySelector(".mx_ThreadPanel_dropdown"); const found = container.querySelector(".mx_ThreadPanel_dropdown");
expect(found).toBeTruthy(); expect(found).toBeTruthy();
@ -103,7 +98,6 @@ describe("ThreadPanel", () => {
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/>, />,
{ wrapper: TooltipProvider },
); );
fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!); fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!);
const found = screen.queryAllByRole("menuitemradio"); const found = screen.queryAllByRole("menuitemradio");
@ -126,13 +120,11 @@ describe("ThreadPanel", () => {
const { container } = render( const { container } = render(
<RoomContext.Provider value={roomContextObject}> <RoomContext.Provider value={roomContextObject}>
<MatrixClientContext.Provider value={mockClient}> <MatrixClientContext.Provider value={mockClient}>
<TooltipProvider>
<ThreadPanelHeader <ThreadPanelHeader
empty={false} empty={false}
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/> />
</TooltipProvider>
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
</RoomContext.Provider>, </RoomContext.Provider>,
); );
@ -146,13 +138,11 @@ describe("ThreadPanel", () => {
const mockClient = createTestClient(); const mockClient = createTestClient();
const { container } = render( const { container } = render(
<MatrixClientContext.Provider value={mockClient}> <MatrixClientContext.Provider value={mockClient}>
<TooltipProvider>
<ThreadPanelHeader <ThreadPanelHeader
empty={false} empty={false}
filterOption={ThreadFilterType.All} filterOption={ThreadFilterType.All}
setFilterOption={() => undefined} setFilterOption={() => undefined}
/> />
</TooltipProvider>
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
); );
fireEvent.click(getByRole(container, "button", { name: "Mark all as read" })); fireEvent.click(getByRole(container, "button", { name: "Mark all as read" }));
@ -308,7 +298,7 @@ describe("ThreadPanel", () => {
myThreads!.addLiveEvent(ownThread.rootEvent); myThreads!.addLiveEvent(ownThread.rootEvent);
let events: EventData[] = []; let events: EventData[] = [];
const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider }); const renderResult = render(<TestThreadPanel />);
await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy()); await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
await waitFor(() => { await waitFor(() => {
events = findEvents(renderResult.container); events = findEvents(renderResult.container);
@ -354,7 +344,7 @@ describe("ThreadPanel", () => {
allThreads!.addLiveEvent(otherThread.rootEvent); allThreads!.addLiveEvent(otherThread.rootEvent);
let events: EventData[] = []; let events: EventData[] = [];
const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider }); const renderResult = render(<TestThreadPanel />);
await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy()); await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
await waitFor(() => { await waitFor(() => {
events = findEvents(renderResult.container); events = findEvents(renderResult.container);

29
test/components/structures/TimelinePanel-test.tsx
View file

@ -39,7 +39,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
import React, { createRef } from "react"; import React, { createRef } from "react";
import { Mocked, mocked } from "jest-mock"; import { Mocked, mocked } from "jest-mock";
import { forEachRight } from "lodash"; import { forEachRight } from "lodash";
import { TooltipProvider } from "@vector-im/compound-web";
import TimelinePanel from "../../../src/components/structures/TimelinePanel"; import TimelinePanel from "../../../src/components/structures/TimelinePanel";
import MatrixClientContext from "../../../src/contexts/MatrixClientContext"; import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@ -212,7 +211,6 @@ describe("TimelinePanel", () => {
manageReadReceipts={true} manageReadReceipts={true}
ref={ref} ref={ref}
/>, />,
{ wrapper: TooltipProvider },
); );
await flushPromises(); await flushPromises();
timelinePanel = ref.current!; timelinePanel = ref.current!;
@ -392,7 +390,7 @@ describe("TimelinePanel", () => {
onEventScrolledIntoView: jest.fn(), onEventScrolledIntoView: jest.fn(),
}; };
const { rerender } = render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); const { rerender } = render(<TimelinePanel {...props} />);
expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined); expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined);
props.eventId = events[1].getId(); props.eventId = events[1].getId();
rerender(<TimelinePanel {...props} />); rerender(<TimelinePanel {...props} />);
@ -409,9 +407,7 @@ describe("TimelinePanel", () => {
setupPagination(client, timeline, eventsPage1, null); setupPagination(client, timeline, eventsPage1, null);
await withScrollPanelMountSpy(async (mountSpy) => { await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, { const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
wrapper: TooltipProvider,
});
await waitFor(() => expectEvents(container, [events[1]])); await waitFor(() => expectEvents(container, [events[1]]));
@ -428,7 +424,7 @@ describe("TimelinePanel", () => {
const [, room, events] = setupTestData(); const [, room, events] = setupTestData();
await withScrollPanelMountSpy(async (mountSpy) => { await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render(<TimelinePanel {...getProps(room, events)} />, { wrapper: TooltipProvider }); const { container } = render(<TimelinePanel {...getProps(room, events)} />);
await waitFor(() => expectEvents(container, [events[0], events[1]])); await waitFor(() => expectEvents(container, [events[0], events[1]]));
@ -455,7 +451,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 }); const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: otherTimeline, liveEvent: true }; const data = { timeline: otherTimeline, liveEvent: true };
@ -471,7 +467,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 }); const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false }; const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@ -487,7 +483,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 }); const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false }; const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@ -504,7 +500,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); render(<TimelinePanel {...props} />);
const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 }); const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true }; const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@ -527,7 +523,7 @@ describe("TimelinePanel", () => {
const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear(); const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
render(<TimelinePanel {...props} />, { wrapper: TooltipProvider }); render(<TimelinePanel {...props} />);
await flushPromises(); await flushPromises();
@ -568,7 +564,6 @@ describe("TimelinePanel", () => {
overlayTimelineSet={overlayTimelineSet} overlayTimelineSet={overlayTimelineSet}
overlayTimelineSetFilter={isCallEvent} overlayTimelineSetFilter={isCallEvent}
/>, />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => await waitFor(() =>
expectEvents(container, [ expectEvents(container, [
@ -608,7 +603,6 @@ describe("TimelinePanel", () => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />, <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => await waitFor(() =>
@ -640,7 +634,6 @@ describe("TimelinePanel", () => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />, <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => await waitFor(() =>
@ -672,7 +665,6 @@ describe("TimelinePanel", () => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />, <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => await waitFor(() =>
@ -707,7 +699,6 @@ describe("TimelinePanel", () => {
timelineSet={timelineSet} timelineSet={timelineSet}
overlayTimelineSet={overlayTimelineSet} overlayTimelineSet={overlayTimelineSet}
/>, />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]])); await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]]));
@ -781,7 +772,6 @@ describe("TimelinePanel", () => {
await withScrollPanelMountSpy(async (mountSpy) => { await withScrollPanelMountSpy(async (mountSpy) => {
const { container } = render( const { container } = render(
<TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />, <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
{ wrapper: TooltipProvider },
); );
await waitFor(() => await waitFor(() =>
@ -894,7 +884,6 @@ describe("TimelinePanel", () => {
<MatrixClientContext.Provider value={client}> <MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad /> <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
); );
await dom.findByText("RootEvent"); await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1"); await dom.findByText("ReplyEvent1");
@ -948,7 +937,6 @@ describe("TimelinePanel", () => {
<MatrixClientContext.Provider value={client}> <MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad /> <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
); );
await dom.findByText("RootEvent"); await dom.findByText("RootEvent");
await dom.findByText("ReplyEvent1"); await dom.findByText("ReplyEvent1");
@ -1017,7 +1005,6 @@ describe("TimelinePanel", () => {
<MatrixClientContext.Provider value={client}> <MatrixClientContext.Provider value={client}>
<TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} /> <TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
); );
await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull()); await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());

2
test/components/structures/auth/ForgotPassword-test.tsx
View file

@ -103,7 +103,7 @@ describe("<ForgotPassword>", () => {
beforeEach(() => { beforeEach(() => {
renderResult = render( renderResult = render(
<ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />, <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
{ wrapper: TooltipProvider }, ,
); );
}); });

2
test/components/views/beacon/BeaconListItem-test.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React from "react"; import React from "react";
import { act, fireEvent, render } from "@testing-library/react"; import { act, fireEvent, render } from "@testing-library/react";
import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix"; import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem"; import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@ -76,7 +75,6 @@ describe("<BeaconListItem />", () => {
<MatrixClientContext.Provider value={mockClient}> <MatrixClientContext.Provider value={mockClient}>
<BeaconListItem {...defaultProps} {...props} /> <BeaconListItem {...defaultProps} {...props} />
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
); );
const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => { const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {

3
test/components/views/beacon/BeaconViewDialog-test.tsx
View file

@ -80,8 +80,7 @@ describe("<BeaconViewDialog />", () => {
matrixClient: mockClient as MatrixClient, matrixClient: mockClient as MatrixClient,
}; };
const getComponent = (props = {}): RenderResult => const getComponent = (props = {}): RenderResult => render(<BeaconViewDialog {...defaultProps} {...props} />);
render(<BeaconViewDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
const openSidebar = (getByTestId: RenderResult["getByTestId"]) => { const openSidebar = (getByTestId: RenderResult["getByTestId"]) => {
fireEvent.click(getByTestId("beacon-view-dialog-open-sidebar")); fireEvent.click(getByTestId("beacon-view-dialog-open-sidebar"));

4
test/components/views/beacon/ShareLatestLocation-test.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react"; import React from "react";
import { fireEvent, render } from "@testing-library/react"; import { fireEvent, render } from "@testing-library/react";
import { TooltipProvider } from "@vector-im/compound-web";
import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation"; import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
import { copyPlaintext } from "../../../../src/utils/strings"; import { copyPlaintext } from "../../../../src/utils/strings";
@ -33,8 +32,7 @@ describe("<ShareLatestLocation />", () => {
timestamp: 123, timestamp: 123,
}, },
}; };
const getComponent = (props = {}) => const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
render(<ShareLatestLocation {...defaultProps} {...props} />, { wrapper: TooltipProvider });
beforeEach(() => { beforeEach(() => {
jest.clearAllMocks(); jest.clearAllMocks();

3
test/components/views/dialogs/ServerPickerDialog-test.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React from "react"; import React from "react";
import { fireEvent, render, screen } from "@testing-library/react"; import { fireEvent, render, screen } from "@testing-library/react";
import fetchMock from "fetch-mock-jest"; import fetchMock from "fetch-mock-jest";
import { TooltipProvider } from "@vector-im/compound-web";
import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog"; import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";
import SdkConfig from "../../../../src/SdkConfig"; import SdkConfig from "../../../../src/SdkConfig";
@ -56,7 +55,7 @@ describe("<ServerPickerDialog />", () => {
onFinished: any; onFinished: any;
serverConfig: ValidatedServerConfig; serverConfig: ValidatedServerConfig;
}> = {}, }> = {},
) => render(<ServerPickerDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider }); ) => render(<ServerPickerDialog {...defaultProps} {...props} />);
beforeEach(() => { beforeEach(() => {
SdkConfig.add({ SdkConfig.add({

2
test/components/views/elements/FacePile-test.tsx
View file

@ -14,7 +14,6 @@ limitations under the License.
import { render } from "@testing-library/react"; import { render } from "@testing-library/react";
import React from "react"; import React from "react";
import { TooltipProvider } from "@vector-im/compound-web";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import FacePile from "../../../../src/components/views/elements/FacePile"; import FacePile from "../../../../src/components/views/elements/FacePile";
@ -26,7 +25,6 @@ describe("<FacePile />", () => {
const { asFragment } = render( const { asFragment } = render(
<FacePile members={[member]} size="36px" overflow={false} tooltipLabel="tooltip" />, <FacePile members={[member]} size="36px" overflow={false} tooltipLabel="tooltip" />,
{ wrapper: TooltipProvider },
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();

2
test/components/views/elements/Pill-test.tsx
View file

@ -65,7 +65,7 @@ describe("<Pill>", () => {
<div onClick={pillParentClickHandler}> <div onClick={pillParentClickHandler}>
<Pill {...withDefault} /> <Pill {...withDefault} />
</div>, </div>,
{ wrapper: TooltipProvider }, ,
); );
}; };

2
test/components/views/messages/CallEvent-test.tsx
View file

@ -103,7 +103,7 @@ describe("CallEvent", () => {
}); });
const renderEvent = () => { const renderEvent = () => {
render(<CallEvent mxEvent={call.event} />, { wrapper: TooltipProvider }); render(<CallEvent mxEvent={call.event} />);
}; };
it("shows a message and duration if the call was ended", () => { it("shows a message and duration if the call was ended", () => {

3
test/components/views/messages/MStickerBody-test.tsx
View file

@ -19,7 +19,6 @@ import { render, screen } from "@testing-library/react";
import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import fetchMock from "fetch-mock-jest"; import fetchMock from "fetch-mock-jest";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import { import {
@ -86,7 +85,7 @@ describe("<MStickerBody/>", () => {
it("should show a tooltip on hover", async () => { it("should show a tooltip on hover", async () => {
fetchMock.getOnce(url, { status: 200 }); fetchMock.getOnce(url, { status: 200 });
render(<MStickerBody {...props} mxEvent={mediaEvent} />, { wrapper: TooltipProvider }); render(<MStickerBody {...props} mxEvent={mediaEvent} />);
expect(screen.queryByRole("tooltip")).toBeNull(); expect(screen.queryByRole("tooltip")).toBeNull();
await userEvent.hover(screen.getByRole("img")); await userEvent.hover(screen.getByRole("img"));

6
test/components/views/messages/MessageTimestamp-test.tsx
View file

@ -31,7 +31,7 @@ describe("MessageTimestamp", () => {
const DAY_MS = HOUR_MS * 24; const DAY_MS = HOUR_MS * 24;
it("should render HH:MM", () => { it("should render HH:MM", () => {
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider }); const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, );
expect(asFragment()).toMatchInlineSnapshot(` expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment> <DocumentFragment>
<span <span
@ -47,7 +47,7 @@ describe("MessageTimestamp", () => {
}); });
it("should show full date & time on hover", async () => { it("should show full date & time on hover", async () => {
const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider }); const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, );
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`); expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
}); });
@ -55,7 +55,7 @@ describe("MessageTimestamp", () => {
it("should show sent & received time on hover if passed", async () => { it("should show sent & received time on hover if passed", async () => {
const { container } = render( const { container } = render(
<MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />, <MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
{ wrapper: TooltipProvider }, ,
); );
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot( expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(

4
test/components/views/polls/pollHistory/PollListItem-test.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React from "react"; import React from "react";
import { fireEvent, render } from "@testing-library/react"; import { fireEvent, render } from "@testing-library/react";
import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem"; import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils"; import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
@ -26,8 +25,7 @@ describe("<PollListItem />", () => {
const event = makePollStartEvent("Question?", "@me:domain.org"); const event = makePollStartEvent("Question?", "@me:domain.org");
event.getContent().origin; event.getContent().origin;
const defaultProps = { event, onClick: jest.fn() }; const defaultProps = { event, onClick: jest.fn() };
const getComponent = (props = {}) => const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...props} />);
render(<PollListItem {...defaultProps} {...props} />, { wrapper: TooltipProvider });
beforeAll(() => { beforeAll(() => {
// mock default locale to en-GB and set timezone // mock default locale to en-GB and set timezone

2
test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
View file

@ -61,7 +61,7 @@ describe("<PollListItemEnded />", () => {
const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000); const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
const getComponent = (props: { event: MatrixEvent; poll: Poll }) => const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
render(<PollListItemEnded {...props} onClick={jest.fn()} />, { wrapper: TooltipProvider }); render(<PollListItemEnded {...props} onClick={jest.fn()} />);
beforeAll(() => { beforeAll(() => {
// mock default locale to en-GB and set timezone // mock default locale to en-GB and set timezone

4
test/components/views/rooms/LegacyRoomHeader-test.tsx
View file

@ -226,7 +226,7 @@ describe("LegacyRoomHeader", () => {
{...props} {...props}
/> />
</RoomContext.Provider>, </RoomContext.Provider>,
{ wrapper: TooltipProvider }, ,
); );
}; };
@ -870,7 +870,7 @@ function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoom
<RoomContext.Provider value={{ ...roomContext, room } as IRoomState}> <RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
<RoomHeader {...props} /> <RoomHeader {...props} />
</RoomContext.Provider>, </RoomContext.Provider>,
{ wrapper: TooltipProvider }, ,
); );
} }

3
test/components/views/rooms/MemberList-test.tsx
View file

@ -21,7 +21,6 @@ import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "ma
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { compare } from "matrix-js-sdk/src/utils"; import { compare } from "matrix-js-sdk/src/utils";
import { mocked, MockedObject } from "jest-mock"; import { mocked, MockedObject } from "jest-mock";
import { TooltipProvider } from "@vector-im/compound-web";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import * as TestUtils from "../../../test-utils"; import * as TestUtils from "../../../test-utils";
@ -231,7 +230,6 @@ describe("MemberList", () => {
ref={gatherWrappedRef} ref={gatherWrappedRef}
/> />
</SDKContext.Provider>, </SDKContext.Provider>,
{ wrapper: TooltipProvider },
); );
} }
@ -383,7 +381,6 @@ describe("MemberList", () => {
roomId={room.roomId} roomId={room.roomId}
/> />
</SDKContext.Provider>, </SDKContext.Provider>,
{ wrapper: TooltipProvider },
); );
}; };

7
test/components/views/rooms/MemberTile-test.tsx
View file

@ -21,7 +21,6 @@ import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api"; import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
import { mocked } from "jest-mock"; import { mocked } from "jest-mock";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import * as TestUtils from "../../../test-utils"; import * as TestUtils from "../../../test-utils";
import MemberTile from "../../../../src/components/views/rooms/MemberTile"; import MemberTile from "../../../../src/components/views/rooms/MemberTile";
@ -37,7 +36,7 @@ describe("MemberTile", () => {
}); });
it("should not display an E2EIcon when the e2E status = normal", () => { it("should not display an E2EIcon when the e2E status = normal", () => {
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider }); const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });
@ -48,7 +47,7 @@ describe("MemberTile", () => {
wasCrossSigningVerified: jest.fn().mockReturnValue(true), wasCrossSigningVerified: jest.fn().mockReturnValue(true),
} as unknown as UserVerificationStatus); } as unknown as UserVerificationStatus);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider }); const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
await waitFor(async () => { await waitFor(async () => {
@ -72,7 +71,7 @@ describe("MemberTile", () => {
crossSigningVerified: true, crossSigningVerified: true,
} as DeviceVerificationStatus); } as DeviceVerificationStatus);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider }); const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
await waitFor(async () => { await waitFor(async () => {

2
test/components/views/rooms/MessageComposer-test.tsx
View file

@ -18,7 +18,6 @@ import * as React from "react";
import { EventType, MatrixEvent, Room, RoomMember, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix"; import { EventType, MatrixEvent, Room, RoomMember, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix";
import { act, render, screen } from "@testing-library/react"; import { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import { import {
clearAllModals, clearAllModals,
@ -514,7 +513,6 @@ function wrapAndRender(
<MessageComposer {...defaultProps} {...props} /> <MessageComposer {...defaultProps} {...props} />
</RoomContext.Provider> </RoomContext.Provider>
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
), ),
roomContext, roomContext,
}; };

3
test/components/views/spaces/ThreadsActivityCentre-test.tsx
View file

@ -20,7 +20,6 @@ import React, { ComponentProps } from "react";
import { getByText, render, screen } from "@testing-library/react"; import { getByText, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix"; import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import { ThreadsActivityCentre } from "../../../../src/components/views/spaces/threads-activity-centre"; import { ThreadsActivityCentre } from "../../../../src/components/views/spaces/threads-activity-centre";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -49,7 +48,6 @@ describe("ThreadsActivityCentre", () => {
<MatrixClientContext.Provider value={cli}> <MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre {...props} /> <ThreadsActivityCentre {...props} />
</MatrixClientContext.Provider>, </MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
); );
}; };
@ -251,7 +249,6 @@ describe("ThreadsActivityCentre", () => {
<ThreadsActivityCentre /> <ThreadsActivityCentre />
</MatrixClientContext.Provider> </MatrixClientContext.Provider>
</div>, </div>,
{ wrapper: TooltipProvider },
); );
await userEvent.click(getTACButton()); await userEvent.click(getTACButton());